}
`,__src__:"registry/default/example/textarea-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"import { Textarea } from "}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"@/components/ui/textarea"'})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:" "}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"export function TextareaDemo() {"})}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"  return <Textarea placeholder="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"Type your message here."'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" />"})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})})]})})})}),`
`,(0,n.jsxs)(e.h2,{id:"additional-examples",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#additional-examples",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Additional Examples"]}),`
`,(0,n.jsxs)(e.h3,{id:"disabled",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#disabled",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Disabled"]}),`
`,(0,n.jsx)(a,{name:"textarea-disabled",description:"A disabled textarea",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from "@/components/ui/textarea"

export function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />
}
`,__src__:"registry/default/example/textarea-disabled.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"import { Textarea } from "}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"@/components/ui/textarea"'})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:" "}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"export function TextareaDisabled() {"})}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"  return <Textarea placeholder="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"Type your message here."'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" disabled />"})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})})]})})})}),`
`,(0,n.jsxs)(e.h3,{id:"with-label",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-label",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"With Label"]}),`
`,(0,n.jsx)(a,{name:"textarea-with-label",className:"[&_div.grid]:w-full",description:"A textarea with a label",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}
`,__src__:"registry/default/example/textarea-with-label.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"import { Label } from "}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"@/components/ui/label"'})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"import { Textarea } from "}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"@/components/ui/textarea"'})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:" "}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"export function TextareaWithLabel() {"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"  return ("})}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"    <div className="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"grid w-full gap-1.5"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:">"})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"      <Label htmlFor="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"message"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:">Your message</Label>"})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"      <Textarea placeholder="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"Type your message here."'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" id="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"message"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" />"})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"    </div>"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"  )"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})})]})})})}),`
`,(0,n.jsxs)(e.h3,{id:"with-text",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-text",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"With Text"]}),`
`,(0,n.jsx)(a,{name:"textarea-with-text",description:"A textarea with text",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithText() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p className="text-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}
`,__src__:"registry/default/example/textarea-with-text.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"import { Label } from "}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"@/components/ui/label"'})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"import { Textarea } from "}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"@/components/ui/textarea"'})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:" "}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"export function TextareaWithText() {"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"  return ("})}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"    <div className="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"grid w-full gap-1.5"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:">"})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"      <Label htmlFor="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"message-2"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:">Your Message</Label>"})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"      <Textarea placeholder="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"Type your message here."'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" id="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"message-2"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" />"})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"      <p className="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"text-sm text-muted-foreground"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:">"})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"        Your message will be copied to the support team."})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"      </p>"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"    </div>"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"  )"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})})]})})})}),`
`,(0,n.jsxs)(e.h3,{id:"with-button",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-button",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"With Button"]}),`
`,(0,n.jsx)(a,{name:"textarea-with-button",description:"A textarea with a button",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}
`,__src__:"registry/default/example/textarea-with-button.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"import { Button } from "}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"@/components/ui/button"'})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"import { Textarea } from "}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"@/components/ui/textarea"'})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:" "}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"export function TextareaWithButton() {"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"  return ("})}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"    <div className="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"grid w-full gap-2"'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:">"})]}),`
`,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"      <Textarea placeholder="}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:'"Type your message here."'}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" />"})]}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"      <Button>Send message</Button>"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"    </div>"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"  )"})}),`
`,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"}"})})]})})})}),`
`,(0,n.jsxs)(e.h3,{id:"as-form-field",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#as-form-field",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"As Form Field"]}),`
`,(0,n.jsx)(a,{name:"textarea-form",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"

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

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

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

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

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

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