}
`,__src__:"registry/miami/example/textarea-demo.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/example/textarea-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Textarea } from '~/components/ui/textarea'

export function TextareaDemo() {
   return <Textarea placeholder="Type your message here." />
}
`,__src__:"registry/default/example/textarea-demo.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(n.h2,{id:"installation",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),`
`,(0,e.jsxs)(p,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(c,{value:"cli",children:(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx nyxb@latest add textarea
`,__npmCommand__:`npx nyxb@latest add textarea
`,__yarnCommand__:`npx nyxb@latest add textarea
`,__pnpmCommand__:`pnpm dlx nyxb@latest add textarea
`,__bunCommand__:`bunx --bun nyxb@latest add textarea
`,children:(0,e.jsx)(n.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" nyxb@latest"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" textarea"})]})})})})}),(0,e.jsx)(c,{value:"manual",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(s,{name:"textarea",children:[(0,e.jsx)(n.figure,{__src__:"registry/miami/ui/textarea.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import * as React from 'react'

import { ny } from '~/lib/utils'

export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
      return (
         <textarea
            className={ny(
               'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
               className,
            )}
            ref={ref}
            {...props}
         />
      )
   },
)
Textarea.displayName = 'Textarea'

export { Textarea }
`,__src__:"registry/miami/ui/textarea.tsx",__style__:"miami",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" interface"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaProps"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   extends"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"TextareaHTMLAttributes"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLTextAreaElement"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"> {}"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" Textarea"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"forwardRef"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLTextAreaElement"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"TextareaProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   ({ "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"ref"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"      return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"textarea"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"            className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"               'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"               className,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            )}"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"            ref"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         />"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   },"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"Textarea.displayName "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'Textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea }"})]})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/ui/textarea.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import * as React from 'react'

import { ny } from '~/lib/utils'

export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
      return (
         <textarea
            className={ny(
               'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               className,
            )}
            ref={ref}
            {...props}
         />
      )
   },
)
Textarea.displayName = 'Textarea'

export { Textarea }
`,__src__:"registry/default/ui/textarea.tsx",__style__:"default",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" interface"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaProps"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   extends"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"TextareaHTMLAttributes"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLTextAreaElement"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"> {}"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" Textarea"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"forwardRef"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLTextAreaElement"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"TextareaProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   ({ "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"ref"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"      return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"textarea"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"            className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"               'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"               className,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            )}"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"            ref"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         />"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   },"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"Textarea.displayName "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'Textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea }"})]})]})})})]}),(0,e.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),`
`,(0,e.jsxs)(n.h2,{id:"usage",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),`
`,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Textarea } from "~/components/ui/textarea"
`,children:(0,e.jsx)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "~/components/ui/textarea"'})]})})})}),`
`,(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`<Textarea />
`,children:(0,e.jsx)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]})})})}),`
`,(0,e.jsxs)(n.h2,{id:"examples",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Examples"]}),`
`,(0,e.jsxs)(n.h3,{id:"default",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Default"]}),`
`,(0,e.jsxs)(r,{name:"textarea-demo",description:"A textarea",styleSwitch:!0,button:"copy",dots:!1,children:[(0,e.jsx)(n.figure,{__src__:"registry/miami/example/textarea-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Textarea } from '~/components/ui/textarea'

export function TextareaDemo() {
   return <Textarea placeholder="Type your message here." />
}
`,__src__:"registry/miami/example/textarea-demo.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/example/textarea-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Textarea } from '~/components/ui/textarea'

export function TextareaDisabled() {
   return <Textarea placeholder="Type your message here." disabled />
}
`,__src__:"registry/miami/example/textarea-disabled.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaDisabled"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" disabled"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/example/textarea-disabled.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Textarea } from '~/components/ui/textarea'

export function TextareaDisabled() {
   return <Textarea placeholder="Type your message here." disabled />
}
`,__src__:"registry/default/example/textarea-disabled.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaDisabled"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" disabled"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(n.h3,{id:"with-label",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-label",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"With Label"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-label",className:"[&_div.grid]:w-full",description:"A textarea with a label",styleSwitch:!0,button:"copy",dots:!1,children:[(0,e.jsx)(n.figure,{__src__:"registry/miami/example/textarea-with-label.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Label } from '~/components/ui/label'
import { Textarea } from '~/components/ui/textarea'

export function TextareaWithLabel() {
   return (
      <div className="grid w-full gap-1.5">
         <Label htmlFor="message">Your message</Label>
         <Textarea placeholder="Type your message here." id="message" />
      </div>
   )
}
`,__src__:"registry/miami/example/textarea-with-label.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/label'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaWithLabel"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Your message</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/example/textarea-with-label.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Label } from '~/components/ui/label'
import { Textarea } from '~/components/ui/textarea'

export function TextareaWithLabel() {
   return (
      <div className="grid w-full gap-1.5">
         <Label htmlFor="message">Your message</Label>
         <Textarea placeholder="Type your message here." id="message" />
      </div>
   )
}
`,__src__:"registry/default/example/textarea-with-label.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/label'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaWithLabel"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Your message</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(n.h3,{id:"with-text",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-text",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"With Text"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-text",description:"A textarea with text",styleSwitch:!0,button:"copy",dots:!1,children:[(0,e.jsx)(n.figure,{__src__:"registry/miami/example/textarea-with-text.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Label } from '~/components/ui/label'
import { Textarea } from '~/components/ui/textarea'

export function TextareaWithText() {
   return (
      <div className="grid w-full gap-1.5">
         <Label htmlFor="message-2">Your Message</Label>
         <Textarea placeholder="Type your message here." id="message-2" />
         <p className="text-muted-foreground text-sm">
            Your message will be copied to the support team.
         </p>
      </div>
   )
}
`,__src__:"registry/miami/example/textarea-with-text.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/label'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaWithText"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Your Message</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-muted-foreground text-sm"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            Your message will be copied to the support team."})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/example/textarea-with-text.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Label } from '~/components/ui/label'
import { Textarea } from '~/components/ui/textarea'

export function TextareaWithText() {
   return (
      <div className="grid w-full gap-1.5">
         <Label htmlFor="message-2">Your Message</Label>
         <Textarea placeholder="Type your message here." id="message-2" />
         <p className="text-muted-foreground text-sm">
            Your message will be copied to the support team.
         </p>
      </div>
   )
}
`,__src__:"registry/default/example/textarea-with-text.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/label'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaWithText"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Your Message</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-muted-foreground text-sm"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            Your message will be copied to the support team."})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(n.h3,{id:"with-button",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-button",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"With Button"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-button",description:"A textarea with a button",styleSwitch:!0,button:"copy",dots:!1,children:[(0,e.jsx)(n.figure,{__src__:"registry/miami/example/textarea-with-button.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Button } from '~/components/ui/button'
import { Textarea } from '~/components/ui/textarea'

export function TextareaWithButton() {
   return (
      <div className="grid w-full gap-2">
         <Textarea placeholder="Type your message here." />
         <Button>Send message</Button>
      </div>
   )
}
`,__src__:"registry/miami/example/textarea-with-button.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/button'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaWithButton"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Send message</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/example/textarea-with-button.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Button } from '~/components/ui/button'
import { Textarea } from '~/components/ui/textarea'

export function TextareaWithButton() {
   return (
      <div className="grid w-full gap-2">
         <Textarea placeholder="Type your message here." />
         <Button>Send message</Button>
      </div>
   )
}
`,__src__:"registry/default/example/textarea-with-button.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/button'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaWithButton"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Send message</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(n.h3,{id:"form",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#form",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Form"]}),`
`,(0,e.jsxs)(r,{name:"textarea-form",styleSwitch:!0,button:"copy",dots:!1,children:[(0,e.jsx)(n.figure,{__src__:"registry/miami/example/textarea-form.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'

import { Button } from '~/components/ui/button'
import {
   Form,
   FormControl,
   FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
} from '~/components/ui/form'
import { Textarea } from '~/components/ui/textarea'
import { toast } from '~/components/ui/use-toast'

const FormSchema = z.object({
   bio: z
      .string()
      .min(10, {
         message: 'Bio must be at least 10 characters.',
      })
      .max(160, {
         message: 'Bio must not be longer than 30 characters.',
      }),
})

export function TextareaForm() {
   const form = useForm<z.infer<typeof FormSchema>>({
      resolver: zodResolver(FormSchema),
   })

function onSubmit(data: z.infer<typeof FormSchema>) {
      toast({
         title: 'You submitted the following values:',
         description: (
            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
               <code className="text-white">{JSON.stringify(data, null, 2)}</code>
            </pre>
         ),
      })
   }

return (
      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
            <FormField
               control={form.control}
               name="bio"
               render={({ field }) => (
                  <FormItem>
                     <FormLabel>Bio</FormLabel>
                     <FormControl>
                        <Textarea
                           placeholder="Tell us a little bit about yourself"
                           className="resize-none"
                           {...field}
                        />
                     </FormControl>
                     <FormDescription>
                        You can
                        {' '}
                        <span>@mention</span>
                        {' '}
                        other users and organizations.
                     </FormDescription>
                     <FormMessage />
                  </FormItem>
               )}
            />
            <Button type="submit">Submit</Button>
         </form>
      </Form>
   )
}
`,__src__:"registry/miami/example/textarea-form.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { zodResolver } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@hookform/resolvers/zod'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useForm } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react-hook-form'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'zod'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/button'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   Form,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormControl,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormDescription,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormField,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormItem,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormLabel,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormMessage,"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/form'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/use-toast'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" FormSchema"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" z."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"object"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   bio: z"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      ."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"string"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      ."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"min"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         message: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Bio must be at least 10 characters.'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      })"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      ."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"max"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"160"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         message: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Bio must not be longer than 30 characters.'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      }),"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"})"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaForm"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" form"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useForm"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"z"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" FormSchema>>({"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      resolver: "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"zodResolver"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(FormSchema),"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   })"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"data"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" z"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" FormSchema>) {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"      toast"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         title: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'You submitted the following values:'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"         description"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"               <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"stringify"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")}</"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         ),"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      })"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   }"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Form"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"form}>"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"form"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{form."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"handleSubmit"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(onSubmit)} "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-6"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormField"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"               control"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{form.control}"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"               name"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"bio"'})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"               render"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{({ "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"field"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                  <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Bio</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"                           placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Tell us a little bit about yourself"'})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"                           className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"resize-none"'})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                           {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"field}"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        />"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     </"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        You can"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        {"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">@mention</"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        {"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        other users and organizations."})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     </"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormMessage"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                  </"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"               )}"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            />"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" type"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"submit"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Submit</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"form"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Form"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/example/textarea-form.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client'

import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'

export function TextareaForm() {
   const form = useForm<z.infer<typeof FormSchema>>({
      resolver: zodResolver(FormSchema),
   })

return (
      <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
            <FormField
               control={form.control}
               name="bio"
               render={({ field }) => (
                  <FormItem>
                     <FormLabel>Bio</FormLabel>
                     <FormControl>
                        <Textarea
                           placeholder="Tell us a little bit about yourself"
                           className="resize-none"
                           {...field}
                        />
                     </FormControl>
                     <FormDescription>
                        You can
                        {' '}
                        <span>~mention</span>
                        {' '}
                        other users and organizations.
                     </FormDescription>
                     <FormMessage />
                  </FormItem>
               )}
            />
            <Button type="submit">Submit</Button>
         </form>
      </Form>
   )
}
`,__src__:"registry/default/example/textarea-form.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useForm } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react-hook-form'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'zod'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { zodResolver } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '@hookform/resolvers/zod'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/button'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   Form,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormControl,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormDescription,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormField,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormItem,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormLabel,"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   FormMessage,"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/form'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/textarea'"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/use-toast'"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" FormSchema"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" z."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"object"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   bio: z"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      ."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"string"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"()"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      ."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"min"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"10"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         message: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Bio must be at least 10 characters.'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      })"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      ."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"max"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"160"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         message: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'Bio must not be longer than 30 characters.'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      }),"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"})"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" TextareaForm"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" form"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useForm"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"z"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" FormSchema>>({"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      resolver: "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"zodResolver"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(FormSchema),"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   })"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"data"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" z"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" FormSchema>) {"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"      toast"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         title: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"'You submitted the following values:'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"         description"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:": ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"               <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"stringify"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")}</"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         ),"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      })"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   }"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:" "}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"   return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Form"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"form}>"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"form"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{form."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"handleSubmit"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"(onSubmit)} "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-6"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormField"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"               control"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{form.control}"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"               name"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"bio"'})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"               render"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{({ "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"field"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                  <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Bio</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Textarea"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"                           placeholder"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Tell us a little bit about yourself"'})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"                           className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"resize-none"'})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                           {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"field}"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        />"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     </"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        You can"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        {"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">~mention</"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        {"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                        other users and organizations."})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     </"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                     <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormMessage"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"                  </"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"               )}"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            />"})}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" type"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"submit"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Submit</"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"         </"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"form"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Form"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"   )"})}),`
`,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})}function u(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(m,{...l})}):m(l)}function o(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(k);})();
;return Component;</article></body></html>