const{Fragment:e,jsx:l,jsxs:n}=arguments[0];function _createMdxContent(s){const r={a:"a",code:"code",div:"div",h2:"h2",h3:"h3",pre:"pre",span:"span",...s.components},{ComponentPreview:a,ComponentSource:c,Step:o,Steps:i,Tabs:t,TabsContent:d,TabsList:p,TabsTrigger:h}=r;return a||_missingMdxReference("ComponentPreview",!0),c||_missingMdxReference("ComponentSource",!0),o||_missingMdxReference("Step",!0),i||_missingMdxReference("Steps",!0),t||_missingMdxReference("Tabs",!0),d||_missingMdxReference("TabsContent",!0),p||_missingMdxReference("TabsList",!0),h||_missingMdxReference("TabsTrigger",!0),n(e,{children:[l(a,{name:"textarea-1",description:"A textarea",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n return (\n

\n Your message\n

\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Label "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#CBA6F7"},children:" function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#9399B2"},children:"()"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  return"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#F9E2AF"},children:" htmlFor"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Your message"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Textarea"}),l(r.span,{style:{color:"#F9E2AF"},children:" placeholder"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#F9E2AF"},children:" id"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    </"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Label } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#D73A49"},children:" function"}),l(r.span,{style:{color:"#6F42C1"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  return"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#6F42C1"},children:" htmlFor"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:">Your message</"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Textarea"}),l(r.span,{style:{color:"#6F42C1"},children:" placeholder"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#6F42C1"},children:" id"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    </"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(r.h2,{id:"installation",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:l(r.span,{className:"icon icon-link"})}),"Installation"]}),"\n",n(t,{defaultValue:"cli",children:[n(p,{children:[l(h,{value:"cli",children:"CLI"}),l(h,{value:"manual",children:"Manual"})]}),l(d,{value:"cli",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"bash","data-theme":"dark",__rawString__:"npx shadcn@latest add textarea",__npmCommand__:"npx shadcn@latest add textarea",__yarnCommand__:"npx shadcn@latest add textarea",__pnpmCommand__:"pnpm dlx shadcn@latest add textarea",__bunCommand__:"bunx --bun shadcn@latest add textarea",children:l(r.code,{"data-language":"bash","data-theme":"dark",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npx"}),l(r.span,{style:{color:"#A6E3A1"},children:" shadcn@latest"}),l(r.span,{style:{color:"#A6E3A1"},children:" add"}),l(r.span,{style:{color:"#A6E3A1"},children:" textarea"})]})})}),l(r.pre,{"data-language":"bash","data-theme":"light",__rawString__:"npx shadcn@latest add textarea",__npmCommand__:"npx shadcn@latest add textarea",__yarnCommand__:"npx shadcn@latest add textarea",__pnpmCommand__:"pnpm dlx shadcn@latest add textarea",__bunCommand__:"bunx --bun shadcn@latest add textarea",children:l(r.code,{"data-language":"bash","data-theme":"light",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"npx"}),l(r.span,{style:{color:"#032F62"},children:" shadcn@latest"}),l(r.span,{style:{color:"#032F62"},children:" add"}),l(r.span,{style:{color:"#032F62"},children:" textarea"})]})})})]})}),l(d,{value:"manual",children:n(i,{children:[l(o,{children:"Copy and paste the following code into your project."}),n(c,{name:"textarea",children:[n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// index.ts\n \nexport * from './textarea'",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// index.ts"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#F38BA8"},children:" *"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" './textarea'"})]})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// index.ts\n \nexport * from './textarea'",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#6A737D"},children:"// index.ts"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#005CC5"},children:" *"}),l(r.span,{style:{color:"#D73A49"},children:" from"}),l(r.span,{style:{color:"#032F62"},children:" './textarea'"})]})]})})]}),n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// textarea.tsx\n \nimport * as React from 'react'\n \nimport { cn } from '@gentelduck/libs/cn'\n \nconst Textarea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.ComponentProps<'textarea'>\n>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\nTextarea.displayName = 'Textarea'\n \nexport { Textarea }",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// textarea.tsx"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#F38BA8"},children:" *"}),l(r.span,{style:{color:"#CBA6F7"},children:" as"}),l(r.span,{style:{color:"#CDD6F4"},children:" React "}),l(r.span,{style:{color:"#CBA6F7"},children:"from"}),l(r.span,{style:{color:"#A6E3A1"},children:" 'react'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" cn "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '@gentelduck/libs/cn'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"const"}),l(r.span,{style:{color:"#FAB387"},children:" Textarea"}),l(r.span,{style:{color:"#94E2D5"},children:" ="}),l(r.span,{style:{color:"#CDD6F4"},children:" React"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"forwardRef"}),l(r.span,{style:{color:"#94E2D5"},children:"<"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  HTMLTextAreaElement"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  React"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"ComponentProps"}),l(r.span,{style:{color:"#94E2D5"},children:"<"}),l(r.span,{style:{color:"#A6E3A1"},children:"'textarea'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"("}),l(r.span,{style:{color:"#9399B2"},children:"({"}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" className"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#94E2D5"},children:" ..."}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"props"}),l(r.span,{style:{color:"#9399B2"},children:" },"}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" ref"}),l(r.span,{style:{color:"#9399B2"},children:")"}),l(r.span,{style:{color:"#CBA6F7"},children:" =>"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  return"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    <"}),l(r.span,{style:{color:"#89B4FA"},children:"textarea"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:"      className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"cn"}),l(r.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#A6E3A1"},children:"        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm'"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"        className"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"      )"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:"      ref"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#CDD6F4"},children:"ref"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"      {"}),l(r.span,{style:{color:"#94E2D5"},children:"..."}),l(r.span,{style:{color:"#CDD6F4"},children:"props"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#94E2D5"},children:"    />"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:"  )"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"Textarea"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"displayName "}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:" 'Textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"})]})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// textarea.tsx\n \nimport * as React from 'react'\n \nimport { cn } from '@gentelduck/libs/cn'\n \nconst Textarea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.ComponentProps<'textarea'>\n>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\nTextarea.displayName = 'Textarea'\n \nexport { Textarea }",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#6A737D"},children:"// textarea.tsx"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#005CC5"},children:" *"}),l(r.span,{style:{color:"#D73A49"},children:" as"}),l(r.span,{style:{color:"#24292E"},children:" React "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" 'react'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { cn } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '@gentelduck/libs/cn'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"const"}),l(r.span,{style:{color:"#005CC5"},children:" Textarea"}),l(r.span,{style:{color:"#D73A49"},children:" ="}),l(r.span,{style:{color:"#24292E"},children:" React.forwardRef"}),l(r.span,{style:{color:"#D73A49"},children:"<"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  HTMLTextAreaElement,"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"  React.ComponentProps"}),l(r.span,{style:{color:"#D73A49"},children:"<"}),l(r.span,{style:{color:"#032F62"},children:"'textarea'"}),l(r.span,{style:{color:"#D73A49"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:">"}),l(r.span,{style:{color:"#24292E"},children:"(({ "}),l(r.span,{style:{color:"#E36209"},children:"className"}),l(r.span,{style:{color:"#24292E"},children:", "}),l(r.span,{style:{color:"#D73A49"},children:"..."}),l(r.span,{style:{color:"#E36209"},children:"props"}),l(r.span,{style:{color:"#24292E"},children:" }, "}),l(r.span,{style:{color:"#E36209"},children:"ref"}),l(r.span,{style:{color:"#24292E"},children:") "}),l(r.span,{style:{color:"#D73A49"},children:"=>"}),l(r.span,{style:{color:"#24292E"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  return"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    <"}),l(r.span,{style:{color:"#22863A"},children:"textarea"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"      className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{"}),l(r.span,{style:{color:"#6F42C1"},children:"cn"}),l(r.span,{style:{color:"#24292E"},children:"("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#032F62"},children:"        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm'"}),l(r.span,{style:{color:"#24292E"},children:","})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"        className,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"      )}"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"      ref"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{ref}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      {"}),l(r.span,{style:{color:"#D73A49"},children:"..."}),l(r.span,{style:{color:"#24292E"},children:"props}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"    />"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"})"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"Textarea.displayName "}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:" 'Textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea }"})]})]})})]})]}),l(o,{children:"Update the import paths to match your project setup."})]})})]}),"\n",n(r.h2,{id:"usage",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:l(r.span,{className:"icon icon-link"})}),"Usage"]}),"\n",n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Textarea } from '@/components/ui/textarea'",children:l(r.code,{"data-language":"tsx","data-theme":"dark",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '@/components/ui/textarea'"})]})})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Textarea } from '@/components/ui/textarea'",children:l(r.code,{"data-language":"tsx","data-theme":"light",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '@/components/ui/textarea'"})]})})})]}),"\n",n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"<Textarea />",children:l(r.code,{"data-language":"tsx","data-theme":"dark",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"<"}),l(r.span,{style:{color:"#F5C2E7"},children:"Textarea"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]})})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"<Textarea />",children:l(r.code,{"data-language":"tsx","data-theme":"light",children:n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"<"}),l(r.span,{style:{color:"#005CC5"},children:"Textarea"}),l(r.span,{style:{color:"#24292E"},children:" />"})]})})})]}),"\n",n(r.h2,{id:"examples",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:l(r.span,{className:"icon icon-link"})}),"Examples"]}),"\n",n(r.h3,{id:"default",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:l(r.span,{className:"icon icon-link"})}),"Default"]}),"\n",l(a,{name:"textarea-2",description:"A textarea",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Textarea } from '~/components/textarea'\n \nexport function Textarea2Demo() {\n  return <Textarea placeholder='Type your message here.' />\n}",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#CBA6F7"},children:" function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Textarea2Demo"}),l(r.span,{style:{color:"#9399B2"},children:"()"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  return"}),l(r.span,{style:{color:"#94E2D5"},children:" <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Textarea"}),l(r.span,{style:{color:"#F9E2AF"},children:" placeholder"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Textarea } from '~/components/textarea'\n \nexport function Textarea2Demo() {\n  return <Textarea placeholder='Type your message here.' />\n}",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#D73A49"},children:" function"}),l(r.span,{style:{color:"#6F42C1"},children:" Textarea2Demo"}),l(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  return"}),l(r.span,{style:{color:"#24292E"},children:" <"}),l(r.span,{style:{color:"#005CC5"},children:"Textarea"}),l(r.span,{style:{color:"#6F42C1"},children:" placeholder"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(r.h3,{id:"disabled",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#disabled",children:l(r.span,{className:"icon icon-link"})}),"Disabled"]}),"\n",l(a,{name:"textarea-3",description:"A disabled textarea",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Label "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#CBA6F7"},children:" function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#9399B2"},children:"()"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  return"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#F9E2AF"},children:" htmlFor"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Your message"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Textarea"}),l(r.span,{style:{color:"#F9E2AF"},children:" placeholder"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#F9E2AF"},children:" id"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    </"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Label } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#D73A49"},children:" function"}),l(r.span,{style:{color:"#6F42C1"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  return"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#6F42C1"},children:" htmlFor"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:">Your message</"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Textarea"}),l(r.span,{style:{color:"#6F42C1"},children:" placeholder"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#6F42C1"},children:" id"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    </"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(r.h3,{id:"with-label",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-label",children:l(r.span,{className:"icon icon-link"})}),"With Label"]}),"\n",l(a,{name:"textarea-4",description:"A textarea with a label",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Label "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#CBA6F7"},children:" function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#9399B2"},children:"()"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  return"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#F9E2AF"},children:" htmlFor"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Your message"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Textarea"}),l(r.span,{style:{color:"#F9E2AF"},children:" placeholder"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#F9E2AF"},children:" id"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    </"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Label } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#D73A49"},children:" function"}),l(r.span,{style:{color:"#6F42C1"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  return"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#6F42C1"},children:" htmlFor"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:">Your message</"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Textarea"}),l(r.span,{style:{color:"#6F42C1"},children:" placeholder"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#6F42C1"},children:" id"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    </"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(r.h3,{id:"with-text",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-text",children:l(r.span,{className:"icon icon-link"})}),"With Text"]}),"\n",l(a,{name:"textarea-5",description:"A textarea with text",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Label "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#CBA6F7"},children:" function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#9399B2"},children:"()"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  return"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#F9E2AF"},children:" htmlFor"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Your message"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Textarea"}),l(r.span,{style:{color:"#F9E2AF"},children:" placeholder"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#F9E2AF"},children:" id"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    </"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Label } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#D73A49"},children:" function"}),l(r.span,{style:{color:"#6F42C1"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  return"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#6F42C1"},children:" htmlFor"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:">Your message</"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Textarea"}),l(r.span,{style:{color:"#6F42C1"},children:" placeholder"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#6F42C1"},children:" id"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    </"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(r.h3,{id:"with-button",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-button",children:l(r.span,{className:"icon icon-link"})}),"With Button"]}),"\n",l(a,{name:"textarea-6",description:"A textarea with a button",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Label "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#CBA6F7"},children:" function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#9399B2"},children:"()"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  return"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    <"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#F9E2AF"},children:" htmlFor"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Your message"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#F5C2E7"},children:"Label"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Textarea"}),l(r.span,{style:{color:"#F9E2AF"},children:" placeholder"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#F9E2AF"},children:" id"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'message'"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    </"}),l(r.span,{style:{color:"#89B4FA"},children:"div"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Label } from '~/components/label'\nimport { Textarea } from '~/components/textarea'\n \nexport function Textarea4Demo() {\n  return (\n    <div className='grid w-full gap-1.5'>\n      <Label htmlFor='message'>Your message</Label>\n      <Textarea placeholder='Type your message here.' id='message' />\n    </div>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Label } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/label'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/textarea'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#D73A49"},children:" function"}),l(r.span,{style:{color:"#6F42C1"},children:" Textarea4Demo"}),l(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  return"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    <"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'grid w-full gap-1.5'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#6F42C1"},children:" htmlFor"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:">Your message</"}),l(r.span,{style:{color:"#005CC5"},children:"Label"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#005CC5"},children:"Textarea"}),l(r.span,{style:{color:"#6F42C1"},children:" placeholder"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'Type your message here.'"}),l(r.span,{style:{color:"#6F42C1"},children:" id"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'message'"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    </"}),l(r.span,{style:{color:"#22863A"},children:"div"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(r.h3,{id:"form",children:[l(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#form",children:l(r.span,{className:"icon icon-link"})}),"Form"]}),"\n",l(a,{name:"textarea-7",children:n(r.div,{"data-rehype-pretty-code-fragment":"",children:[l(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"'use client'\n \nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '~/components/form'\nimport { Button } from '~/components/button'\nimport { Textarea } from '~/components/textarea'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { toast } from 'sonner'\nimport { z } from 'zod'\n \nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n})\n \nexport function Textarea7Demo() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n \n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast('You submitted the following values:', {\n      description: (\n        <pre className='mt-2 w-[300px] rounded-md bg-zinc-950 p-4'>\n          <code className='text-white'>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n \n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className='w-2/3 space-y-6'>\n        <FormField\n          control={form.control}\n          name='bio'\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder='Tell us a little bit about yourself'\n                  className='resize-none'\n                  {...field}\n                />\n              </FormControl>\n              <FormDescription>\n                You can <span>@mention</span> other users and organizations.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type='submit'>Submit</Button>\n      </form>\n    </Form>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#A6E3A1"},children:"'use client'"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  Form"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  FormControl"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  FormDescription"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  FormField"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  FormItem"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  FormLabel"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  FormMessage"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/form'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Button "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/button'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" Textarea "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '~/components/textarea'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" zodResolver "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" '@hookform/resolvers/zod'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" useForm "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" 'react-hook-form'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" toast "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" 'sonner'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"import"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#CDD6F4"},children:" z "}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CBA6F7"},children:" from"}),l(r.span,{style:{color:"#A6E3A1"},children:" 'zod'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"const"}),l(r.span,{style:{color:"#FAB387"},children:" FormSchema"}),l(r.span,{style:{color:"#94E2D5"},children:" ="}),l(r.span,{style:{color:"#CDD6F4"},children:" z"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"object"}),l(r.span,{style:{color:"#CDD6F4"},children:"("}),l(r.span,{style:{color:"#9399B2"},children:"{"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"  bio"}),l(r.span,{style:{color:"#94E2D5"},children:":"}),l(r.span,{style:{color:"#CDD6F4"},children:" z"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    ."}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"string"}),l(r.span,{style:{color:"#CDD6F4"},children:"()"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    ."}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"min"}),l(r.span,{style:{color:"#CDD6F4"},children:"("}),l(r.span,{style:{color:"#FAB387"},children:"10"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"      message"}),l(r.span,{style:{color:"#94E2D5"},children:":"}),l(r.span,{style:{color:"#A6E3A1"},children:" 'Bio must be at least 10 characters.'"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"    }"}),l(r.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    ."}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"max"}),l(r.span,{style:{color:"#CDD6F4"},children:"("}),l(r.span,{style:{color:"#FAB387"},children:"160"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"      message"}),l(r.span,{style:{color:"#94E2D5"},children:":"}),l(r.span,{style:{color:"#A6E3A1"},children:" 'Bio must not be longer than 30 characters.'"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"    }"}),l(r.span,{style:{color:"#CDD6F4"},children:")"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"export"}),l(r.span,{style:{color:"#CBA6F7"},children:" function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Textarea7Demo"}),l(r.span,{style:{color:"#9399B2"},children:"()"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  const"}),l(r.span,{style:{color:"#FAB387"},children:" form"}),l(r.span,{style:{color:"#94E2D5"},children:" ="}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" useForm"}),l(r.span,{style:{color:"#89DCEB"},children:"<"}),l(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"z"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"infer"}),l(r.span,{style:{color:"#89DCEB"},children:"<"}),l(r.span,{style:{color:"#94E2D5"},children:"typeof"}),l(r.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" FormSchema"}),l(r.span,{style:{color:"#89DCEB"},children:">>"}),l(r.span,{style:{color:"#CDD6F4"},children:"("}),l(r.span,{style:{color:"#9399B2"},children:"{"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"    resolver"}),l(r.span,{style:{color:"#94E2D5"},children:":"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" zodResolver"}),l(r.span,{style:{color:"#CDD6F4"},children:"(FormSchema)"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"  }"}),l(r.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  function"}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" onSubmit"}),l(r.span,{style:{color:"#9399B2"},children:"("}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"data"}),l(r.span,{style:{color:"#94E2D5"},children:":"}),l(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" z"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"infer"}),l(r.span,{style:{color:"#89DCEB"},children:"<"}),l(r.span,{style:{color:"#94E2D5"},children:"typeof"}),l(r.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" FormSchema"}),l(r.span,{style:{color:"#89DCEB"},children:">"}),l(r.span,{style:{color:"#9399B2"},children:")"}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"    toast"}),l(r.span,{style:{color:"#CDD6F4"},children:"("}),l(r.span,{style:{color:"#A6E3A1"},children:"'You submitted the following values:'"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"      description"}),l(r.span,{style:{color:"#94E2D5"},children:":"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"        <"}),l(r.span,{style:{color:"#89B4FA"},children:"pre"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'mt-2 w-[300px] rounded-md bg-zinc-950 p-4'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"          <"}),l(r.span,{style:{color:"#89B4FA"},children:"code"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'text-white'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#FAB387"},children:"JSON"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"stringify"}),l(r.span,{style:{color:"#CDD6F4"},children:"(data"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#F38BA8"},children:" null"}),l(r.span,{style:{color:"#9399B2"},children:","}),l(r.span,{style:{color:"#FAB387"},children:" 2"}),l(r.span,{style:{color:"#CDD6F4"},children:")"}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#89B4FA"},children:"code"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"        </"}),l(r.span,{style:{color:"#89B4FA"},children:"pre"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"      )"}),l(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"    }"}),l(r.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"  }"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CBA6F7"},children:"  return"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Form"}),l(r.span,{style:{color:"#9399B2"},children:" {"}),l(r.span,{style:{color:"#94E2D5"},children:"..."}),l(r.span,{style:{color:"#CDD6F4"},children:"form"}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      <"}),l(r.span,{style:{color:"#89B4FA"},children:"form"}),l(r.span,{style:{color:"#F9E2AF"},children:" onSubmit"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#CDD6F4"},children:"form"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"handleSubmit"}),l(r.span,{style:{color:"#CDD6F4"},children:"(onSubmit)"}),l(r.span,{style:{color:"#9399B2"},children:"}"}),l(r.span,{style:{color:"#F9E2AF"},children:" className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'w-2/3 space-y-6'"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"        <"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormField"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:"          control"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{"}),l(r.span,{style:{color:"#CDD6F4"},children:"form"}),l(r.span,{style:{color:"#94E2D5"},children:"."}),l(r.span,{style:{color:"#CDD6F4"},children:"control"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:"          name"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'bio'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:"          render"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#9399B2"},children:"{({"}),l(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" field"}),l(r.span,{style:{color:"#9399B2"},children:" })"}),l(r.span,{style:{color:"#CBA6F7"},children:" =>"}),l(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"            <"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormItem"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"              <"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormLabel"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Bio"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormLabel"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"              <"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormControl"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"                <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Textarea"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:"                  placeholder"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'Tell us a little bit about yourself'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#F9E2AF"},children:"                  className"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'resize-none'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#9399B2"},children:"                  {"}),l(r.span,{style:{color:"#94E2D5"},children:"..."}),l(r.span,{style:{color:"#CDD6F4"},children:"field"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#94E2D5"},children:"                />"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"              </"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormControl"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"              <"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormDescription"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"                You can "}),l(r.span,{style:{color:"#94E2D5"},children:"<"}),l(r.span,{style:{color:"#89B4FA"},children:"span"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"@mention"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#89B4FA"},children:"span"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:" other users and organizations."})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"              </"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormDescription"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"              <"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormMessage"}),l(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"            </"}),l(r.span,{style:{color:"#F5C2E7"},children:"FormItem"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#CDD6F4"},children:"          )"}),l(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#94E2D5"},children:"        />"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"        <"}),l(r.span,{style:{color:"#F5C2E7"},children:"Button"}),l(r.span,{style:{color:"#F9E2AF"},children:" type"}),l(r.span,{style:{color:"#94E2D5"},children:"="}),l(r.span,{style:{color:"#A6E3A1"},children:"'submit'"}),l(r.span,{style:{color:"#94E2D5"},children:">"}),l(r.span,{style:{color:"#CDD6F4"},children:"Submit"}),l(r.span,{style:{color:"#94E2D5"},children:"</"}),l(r.span,{style:{color:"#F5C2E7"},children:"Button"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"      </"}),l(r.span,{style:{color:"#89B4FA"},children:"form"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#94E2D5"},children:"    </"}),l(r.span,{style:{color:"#F5C2E7"},children:"Form"}),l(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#CDD6F4"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),l(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"'use client'\n \nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '~/components/form'\nimport { Button } from '~/components/button'\nimport { Textarea } from '~/components/textarea'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { toast } from 'sonner'\nimport { z } from 'zod'\n \nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n})\n \nexport function Textarea7Demo() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n \n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast('You submitted the following values:', {\n      description: (\n        <pre className='mt-2 w-[300px] rounded-md bg-zinc-950 p-4'>\n          <code className='text-white'>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n \n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className='w-2/3 space-y-6'>\n        <FormField\n          control={form.control}\n          name='bio'\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder='Tell us a little bit about yourself'\n                  className='resize-none'\n                  {...field}\n                />\n              </FormControl>\n              <FormDescription>\n                You can <span>@mention</span> other users and organizations.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type='submit'>Submit</Button>\n      </form>\n    </Form>\n  )\n}",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:[l(r.span,{className:"line",children:l(r.span,{style:{color:"#032F62"},children:"'use client'"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" {"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  Form,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  FormControl,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  FormDescription,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  FormField,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  FormItem,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  FormLabel,"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  FormMessage,"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"} "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/form'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Button } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/button'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { Textarea } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '~/components/textarea'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { zodResolver } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" '@hookform/resolvers/zod'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { useForm } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" 'react-hook-form'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { toast } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" 'sonner'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"import"}),l(r.span,{style:{color:"#24292E"},children:" { z } "}),l(r.span,{style:{color:"#D73A49"},children:"from"}),l(r.span,{style:{color:"#032F62"},children:" 'zod'"})]}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"const"}),l(r.span,{style:{color:"#005CC5"},children:" FormSchema"}),l(r.span,{style:{color:"#D73A49"},children:" ="}),l(r.span,{style:{color:"#24292E"},children:" z."}),l(r.span,{style:{color:"#6F42C1"},children:"object"}),l(r.span,{style:{color:"#24292E"},children:"({"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  bio: z"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    ."}),l(r.span,{style:{color:"#6F42C1"},children:"string"}),l(r.span,{style:{color:"#24292E"},children:"()"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    ."}),l(r.span,{style:{color:"#6F42C1"},children:"min"}),l(r.span,{style:{color:"#24292E"},children:"("}),l(r.span,{style:{color:"#005CC5"},children:"10"}),l(r.span,{style:{color:"#24292E"},children:", {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      message: "}),l(r.span,{style:{color:"#032F62"},children:"'Bio must be at least 10 characters.'"}),l(r.span,{style:{color:"#24292E"},children:","})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"    })"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    ."}),l(r.span,{style:{color:"#6F42C1"},children:"max"}),l(r.span,{style:{color:"#24292E"},children:"("}),l(r.span,{style:{color:"#005CC5"},children:"160"}),l(r.span,{style:{color:"#24292E"},children:", {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      message: "}),l(r.span,{style:{color:"#032F62"},children:"'Bio must not be longer than 30 characters.'"}),l(r.span,{style:{color:"#24292E"},children:","})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"    }),"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"})"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"export"}),l(r.span,{style:{color:"#D73A49"},children:" function"}),l(r.span,{style:{color:"#6F42C1"},children:" Textarea7Demo"}),l(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  const"}),l(r.span,{style:{color:"#005CC5"},children:" form"}),l(r.span,{style:{color:"#D73A49"},children:" ="}),l(r.span,{style:{color:"#6F42C1"},children:" useForm"}),l(r.span,{style:{color:"#24292E"},children:"<"}),l(r.span,{style:{color:"#6F42C1"},children:"z"}),l(r.span,{style:{color:"#24292E"},children:"."}),l(r.span,{style:{color:"#6F42C1"},children:"infer"}),l(r.span,{style:{color:"#24292E"},children:"<"}),l(r.span,{style:{color:"#D73A49"},children:"typeof"}),l(r.span,{style:{color:"#24292E"},children:" FormSchema>>({"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    resolver: "}),l(r.span,{style:{color:"#6F42C1"},children:"zodResolver"}),l(r.span,{style:{color:"#24292E"},children:"(FormSchema),"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  })"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  function"}),l(r.span,{style:{color:"#6F42C1"},children:" onSubmit"}),l(r.span,{style:{color:"#24292E"},children:"("}),l(r.span,{style:{color:"#E36209"},children:"data"}),l(r.span,{style:{color:"#D73A49"},children:":"}),l(r.span,{style:{color:"#6F42C1"},children:" z"}),l(r.span,{style:{color:"#24292E"},children:"."}),l(r.span,{style:{color:"#6F42C1"},children:"infer"}),l(r.span,{style:{color:"#24292E"},children:"<"}),l(r.span,{style:{color:"#D73A49"},children:"typeof"}),l(r.span,{style:{color:"#24292E"},children:" FormSchema>) {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"    toast"}),l(r.span,{style:{color:"#24292E"},children:"("}),l(r.span,{style:{color:"#032F62"},children:"'You submitted the following values:'"}),l(r.span,{style:{color:"#24292E"},children:", {"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"      description"}),l(r.span,{style:{color:"#24292E"},children:": ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"        <"}),l(r.span,{style:{color:"#22863A"},children:"pre"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'mt-2 w-[300px] rounded-md bg-zinc-950 p-4'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"          <"}),l(r.span,{style:{color:"#22863A"},children:"code"}),l(r.span,{style:{color:"#6F42C1"},children:" className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'text-white'"}),l(r.span,{style:{color:"#24292E"},children:">{"}),l(r.span,{style:{color:"#005CC5"},children:"JSON"}),l(r.span,{style:{color:"#24292E"},children:"."}),l(r.span,{style:{color:"#6F42C1"},children:"stringify"}),l(r.span,{style:{color:"#24292E"},children:"(data, "}),l(r.span,{style:{color:"#005CC5"},children:"null"}),l(r.span,{style:{color:"#24292E"},children:", "}),l(r.span,{style:{color:"#005CC5"},children:"2"}),l(r.span,{style:{color:"#24292E"},children:")}</"}),l(r.span,{style:{color:"#22863A"},children:"code"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"        </"}),l(r.span,{style:{color:"#22863A"},children:"pre"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"      ),"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"    })"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  }"})}),"\n",l(r.span,{className:"line",children:" "}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#D73A49"},children:"  return"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    <"}),l(r.span,{style:{color:"#005CC5"},children:"Form"}),l(r.span,{style:{color:"#24292E"},children:" {"}),l(r.span,{style:{color:"#D73A49"},children:"..."}),l(r.span,{style:{color:"#24292E"},children:"form}>"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      <"}),l(r.span,{style:{color:"#22863A"},children:"form"}),l(r.span,{style:{color:"#6F42C1"},children:" onSubmit"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{form."}),l(r.span,{style:{color:"#6F42C1"},children:"handleSubmit"}),l(r.span,{style:{color:"#24292E"},children:"(onSubmit)} "}),l(r.span,{style:{color:"#6F42C1"},children:"className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'w-2/3 space-y-6'"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"        <"}),l(r.span,{style:{color:"#005CC5"},children:"FormField"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"          control"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{form.control}"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"          name"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'bio'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"          render"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#24292E"},children:"{({ "}),l(r.span,{style:{color:"#E36209"},children:"field"}),l(r.span,{style:{color:"#24292E"},children:" }) "}),l(r.span,{style:{color:"#D73A49"},children:"=>"}),l(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"            <"}),l(r.span,{style:{color:"#005CC5"},children:"FormItem"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"              <"}),l(r.span,{style:{color:"#005CC5"},children:"FormLabel"}),l(r.span,{style:{color:"#24292E"},children:">Bio</"}),l(r.span,{style:{color:"#005CC5"},children:"FormLabel"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"              <"}),l(r.span,{style:{color:"#005CC5"},children:"FormControl"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"                <"}),l(r.span,{style:{color:"#005CC5"},children:"Textarea"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"                  placeholder"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'Tell us a little bit about yourself'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#6F42C1"},children:"                  className"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'resize-none'"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"                  {"}),l(r.span,{style:{color:"#D73A49"},children:"..."}),l(r.span,{style:{color:"#24292E"},children:"field}"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"                />"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"              </"}),l(r.span,{style:{color:"#005CC5"},children:"FormControl"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"              <"}),l(r.span,{style:{color:"#005CC5"},children:"FormDescription"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"                You can <"}),l(r.span,{style:{color:"#22863A"},children:"span"}),l(r.span,{style:{color:"#24292E"},children:">@mention</"}),l(r.span,{style:{color:"#22863A"},children:"span"}),l(r.span,{style:{color:"#24292E"},children:"> other users and organizations."})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"              </"}),l(r.span,{style:{color:"#005CC5"},children:"FormDescription"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"              <"}),l(r.span,{style:{color:"#005CC5"},children:"FormMessage"}),l(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"            </"}),l(r.span,{style:{color:"#005CC5"},children:"FormItem"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"          )}"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"        />"})}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"        <"}),l(r.span,{style:{color:"#005CC5"},children:"Button"}),l(r.span,{style:{color:"#6F42C1"},children:" type"}),l(r.span,{style:{color:"#D73A49"},children:"="}),l(r.span,{style:{color:"#032F62"},children:"'submit'"}),l(r.span,{style:{color:"#24292E"},children:">Submit</"}),l(r.span,{style:{color:"#005CC5"},children:"Button"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"      </"}),l(r.span,{style:{color:"#22863A"},children:"form"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:[l(r.span,{style:{color:"#24292E"},children:"    </"}),l(r.span,{style:{color:"#005CC5"},children:"Form"}),l(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"  )"})}),"\n",l(r.span,{className:"line",children:l(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?l(n,{...e,children:l(_createMdxContent,{...e})}):_createMdxContent(e)}};function _missingMdxReference(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}</article></body></html>