}
`,__src__:"registry/ax-base/example/textarea-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from '@brudi/react-textarea'

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}
`,__src__:"registry/ax-site/example/textarea-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from '@brudi/react-textarea'

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}
`,__src__:"registry/ax-app/example/textarea-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),`
`,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @brudi/react-textarea
`,__npmCommand__:`npm install @brudi/react-textarea
`,__yarnCommand__:`yarn add @brudi/react-textarea
`,__pnpmCommand__:`pnpm add @brudi/react-textarea
`,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"install"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/react-textarea"})]})})})}),`
`,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),`
`,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from "@/brudi/react-textarea"
`,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"@/brudi/react-textarea"'})]})})})}),`
`,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`<Textarea />
`,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]})})})}),`
`,(0,e.jsxs)(l.h2,{id:"examples",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),`
`,(0,e.jsxs)(l.h3,{id:"default",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Default"]}),`
`,(0,e.jsxs)(r,{name:"textarea-demo",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from '@brudi/react-textarea'

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}
`,__src__:"registry/ax-base/example/textarea-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaDemo"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from '@brudi/react-textarea'

export function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />
}
`,__src__:"registry/ax-base/example/textarea-disabled.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaDisabled"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from '@brudi/react-textarea'

export function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />
}
`,__src__:"registry/ax-site/example/textarea-disabled.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaDisabled"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from '@brudi/react-textarea'

export function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />
}
`,__src__:"registry/ax-app/example/textarea-disabled.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaDisabled"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"disabled"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h3,{id:"with-label",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-label",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"With Label"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-label",className:"[&_div.grid]:w-full",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from '@brudi/react-label'
import { Textarea } from '@brudi/react-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/ax-base/example/textarea-with-label.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-label'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithLabel"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Your message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from '@brudi/react-label'
import { Textarea } from '@brudi/react-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/ax-site/example/textarea-with-label.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-label'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithLabel"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Your message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from '@brudi/react-label'
import { Textarea } from '@brudi/react-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/ax-app/example/textarea-with-label.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-label'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithLabel"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Your message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h3,{id:"with-text",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-text",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"With Text"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-text",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from '@brudi/react-label'
import { Textarea } from '@brudi/react-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-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}
`,__src__:"registry/ax-base/example/textarea-with-text.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-label'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithText"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Your Message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-sm text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        Your message will be copied to the support team."})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from '@brudi/react-label'
import { Textarea } from '@brudi/react-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-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}
`,__src__:"registry/ax-site/example/textarea-with-text.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-label'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithText"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Your Message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-sm text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        Your message will be copied to the support team."})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from '@brudi/react-label'
import { Textarea } from '@brudi/react-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-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}
`,__src__:"registry/ax-app/example/textarea-with-text.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-label'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithText"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Your Message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"id"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-sm text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        Your message will be copied to the support team."})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h3,{id:"with-button",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-button",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"With Button"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-button",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from '@brudi/react-button'
import { Textarea } from '@brudi/react-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/ax-base/example/textarea-with-button.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithButton"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Send message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from '@brudi/react-button'
import { Textarea } from '@brudi/react-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/ax-site/example/textarea-with-button.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithButton"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Send message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from '@brudi/react-button'
import { Textarea } from '@brudi/react-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/ax-app/example/textarea-with-button.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaWithButton"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid w-full gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Send message"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h3,{id:"form",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#form",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Form"]}),`
`,(0,e.jsxs)(r,{name:"textarea-form",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'

import Link from 'next/link'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from '@brudi/react-form'
import * as z from 'zod'

import { Button } from '@brudi/react-button'
import { Checkbox } from '@brudi/react-checkbox'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@brudi/react-form'
import { RadioGroup, RadioGroupItem } from '@brudi/react-radio-group'
import { Switch } from '@brudi/react-switch'
import { Textarea } from '@brudi/react-textarea'
import { toast } from '@brudi/react-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({
    schema: FormSchema
  })

function onSubmit(data: z.infer<typeof FormSchema>) {
    toast('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/ax-base/example/textarea-form.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Link"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'next/link'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"zodResolver"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@hookform/resolvers/zod'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useForm"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'zod'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Checkbox"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-checkbox'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormField"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormMessage"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"RadioGroup"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"RadioGroupItem"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-radio-group'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-switch'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"toast"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-toast'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  bio"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      message"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Bio must be at least 10 characters.'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"max"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"160"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      message"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Bio must not be longer than 30 characters.'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaForm"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"useForm"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    schema"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">)"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"toast"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'You submitted the following values:'"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      )"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"w-2/3 space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"bio"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"render"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{({"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"            "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Bio"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Tell us a little bit about yourself"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"resize-none"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                You can "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"@mention"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" other users and organizations."})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormMessage"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"            "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          )"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Submit"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'

import { useForm } from '@brudi/react-form'
import * as z from 'zod'

import { Button } from '@brudi/react-button'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@brudi/react-form'
import { Textarea } from '@brudi/react-textarea'
import { toast } from '@brudi/react-toast'

export function TextareaForm() {
  const form = useForm({
    schema: 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/ax-site/example/textarea-form.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useForm"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'zod'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormField"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormMessage"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"toast"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-toast'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  bio"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      message"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Bio must be at least 10 characters.'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"max"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"160"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      message"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Bio must not be longer than 30 characters.'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaForm"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"useForm"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    schema"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">)"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"toast"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'You submitted the following values:'"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      )"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"w-2/3 space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"bio"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"render"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{({"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"            "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Bio"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Tell us a little bit about yourself"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"resize-none"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                You can "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"@mention"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" other users and organizations."})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormMessage"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"            "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          )"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Submit"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'

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

export function TextareaForm() {
  const form = useForm({
    schema: 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/ax-app/example/textarea-form.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'use client'"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"useForm"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"zodResolver"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@hookform/resolvers/zod'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'zod'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-button'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormField"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormMessage"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-form'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"toast"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-toast'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  bio"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"z"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      message"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Bio must be at least 10 characters.'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"max"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"160"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      message"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Bio must not be longer than 30 characters.'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"TextareaForm"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"useForm"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    schema"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">)"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"toast"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'You submitted the following values:'"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      )"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"w-2/3 space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormField"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"bio"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"render"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{({"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"            "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Bio"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"placeholder"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"Tell us a little bit about yourself"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"resize-none"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"                You can "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"@mention"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" other users and organizations."})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"              "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormMessage"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"            "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"          )"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Submit"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"</"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h2,{id:"customization",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#customization",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Customization"]}),`
`,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @brudi/ui extend textarea
`,__npmCommand__:`npx @brudi/ui extend textarea
`,__yarnCommand__:`npx @brudi/ui extend textarea
`,__pnpmCommand__:`pnpx @brudi/ui extend textarea
`,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/ui"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"extend"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"textarea"})]})})})}),`
`,(0,e.jsx)(o,{type:"single",collapsible:!0,children:(0,e.jsxs)(s,{value:"manual-installation",children:[(0,e.jsx)(i,{children:"Manual Customization"}),(0,e.jsx)(d,{children:(0,e.jsxs)(p,{children:[(0,e.jsx)(a,{children:"Install the following dependencies:"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @brudi/react-textarea
`,__npmCommand__:`npm install @brudi/react-textarea
`,__yarnCommand__:`yarn add @brudi/react-textarea
`,__pnpmCommand__:`pnpm add @brudi/react-textarea
`,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"install"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/react-textarea"})]})})})}),(0,e.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(h,{name:"textarea",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from 'react'
import * as TextareaPrimitive from '@brudi/react-textarea'

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
  return <TextareaPrimitive.Root ref={ref} {...props} />
})
Textarea.displayName = 'Textarea'

export { Textarea }
`,__src__:"registry/ax-base/ui/textarea.tsx",__style__:"ax-base",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"TextareaPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"extends"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"TextareaHTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"HTMLTextAreaElement"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"HTMLTextAreaElement"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaPrimitive.Root"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"displayName"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from 'react'
import * as TextareaPrimitive from '@brudi/react-textarea'
import { ax } from '@brudi/react-utils'

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
    return (
      <TextareaPrimitive.Root
        ref={ref}
        className={ax('focus-visible:ring-2 focus-visible:ring-offset-2', className)}
        {...props}
      />
    )
  }
)
Textarea.displayName = 'Textarea'

export { Textarea }
`,__src__:"registry/ax-site/ui/textarea.tsx",__style__:"ax-site",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"TextareaPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"ax"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-utils'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"extends"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"TextareaHTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"HTMLTextAreaElement"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"HTMLTextAreaElement"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaPrimitive.Root"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"ax"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'focus-visible:ring-2 focus-visible:ring-offset-2'"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"        "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"      "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"    )"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"displayName"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from 'react'
import * as TextareaPrimitive from '@brudi/react-textarea'

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
  return <TextareaPrimitive.Root ref={ref} {...props} />
})
Textarea.displayName = 'Textarea'

export { Textarea }
`,__src__:"registry/ax-app/ui/textarea.tsx",__style__:"ax-app",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'react'"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" as "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"TextareaPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"extends"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"TextareaHTMLAttributes"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"HTMLTextAreaElement"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#EA9A97"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"HTMLTextAreaElement"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaProps"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:"  "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9CCFD8"},children:"TextareaPrimitive.Root"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6E6A86"},children:"/>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:")"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"displayName"}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F6C177"},children:"'Textarea'"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]})]})})})]}),(0,e.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]})})]})}function S(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var _=S;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(T);})();
;return Component;</article></body></html>