          {JSON.stringify(data, null, 2)}

), }) } return ( Send ) } `,__src__:"registry/new-york/examples/reform/re-textarea-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "zod"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReForm } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReSubmit } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-submit"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReTextarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-textarea"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" formSchema"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" z."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"object"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" input: z."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"string"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"optional"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" FormData"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" z"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"infer"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" formSchema>"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" FormComponent"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" handleSubmit"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" FormData"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" toast"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"You submitted the following values:"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" description"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"pre"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"code"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"stringify"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ReForm"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" schema"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{formSchema}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleSubmit}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-4 gap-0"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ReTextarea"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Textarea"'}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"input"'}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" description"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Write something"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ReSubmit"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Send"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { z } from "zod" import { toast } from "@/components/hooks/use-toast" import { ReForm } from "@/components/ui/reform/re-form" import { ReSubmit } from "@/components/ui/reform/re-submit" import { ReTextarea } from "@/components/ui/reform/re-textarea" const formSchema = z.object({ input: z.string().optional(), }) type FormData = z.infer export function FormComponent() { const handleSubmit = (data: FormData) => { toast({ title: "You submitted the following values:", description: (

          {JSON.stringify(data, null, 2)}

), }) } return ( Send ) } `,__src__:"registry/default/examples/reform/re-textarea-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "zod"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReForm } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReSubmit } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-submit"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReTextarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-textarea"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" formSchema"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" z."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"object"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" input: z."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"string"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"optional"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" FormData"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" z"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"infer"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"typeof"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" formSchema>"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" FormComponent"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" handleSubmit"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"data"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" FormData"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" toast"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"You submitted the following values:"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" description"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"pre"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"code"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"stringify"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ReForm"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" schema"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{formSchema}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleSubmit}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-4 gap-0"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ReTextarea"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Textarea"'}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"input"'}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" description"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Write something"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ReSubmit"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Send"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(d,{defaultValue:"cli",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(t,{value:"cli",children:"CLI"}),(0,l.jsx)(t,{value:"manual",children:"Manual"})]}),(0,l.jsx)(i,{value:"cli",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx kodkafa@latest add re-textarea `,__npmCommand__:`npx kodkafa@latest add re-textarea `,__yarnCommand__:`npx kodkafa@latest add re-textarea `,__pnpmCommand__:`pnpm dlx kodkafa@latest add re-textarea `,__bunCommand__:`bunx --bun kodkafa@latest add re-textarea `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" kodkafa@latest"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" re-textarea"})]})})})})}),(0,l.jsx)(i,{value:"manual",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsxs)(c,{name:"re-textarea",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import { TextareaHTMLAttributes } from "react" import { useFormContext } from "react-hook-form" import { cn } from "@/components/lib/utils" import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { ReFormFieldProps } from "@/components/ui/reform/re-form" import { Textarea } from "@/components/ui/textarea" export type Props = TextareaHTMLAttributes & { className?: string name: string label?: string description?: string } const ReTextarea = React.forwardRef< HTMLTextAreaElement, React.ComponentProps<"textarea"> & ReFormFieldProps >(({ className, name, label, description, ...props }) => { const form = useFormContext() return ( ( {label && {label}}

</FormControl>
          {description && <FormDescription>{description}</FormDescription>}
          <FormMessage className="reform-message text-xs" />
        </FormItem>
      )}
    />
  )
})

ReTextarea.displayName = "ReTextarea"
export { ReTextarea }
`,__src__:"registry/new-york/ui/reform/re-textarea.tsx",__style__:"new-york",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { TextareaHTMLAttributes } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useFormContext } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react-hook-form"'})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/lib/utils"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormControl,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormDescription,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormField,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormItem,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormLabel,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormMessage,"})}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/form"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReFormFieldProps } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" Props"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaHTMLAttributes"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLTextAreaElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  name"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  description"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" ReTextarea"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  HTMLTextAreaElement,"})}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  React.ComponentProps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"textarea"'}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" &"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ReFormFieldProps"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"name"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"label"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"description"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" form"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" useFormContext"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormField"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"      defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"      control"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{form.control}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"      name"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{name}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"      render"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"field"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{className}>"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          {label "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{label}</"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"              className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"resize-none"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"              {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"              {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"field}"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            />"})}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          </"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          {description "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{description}</"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormMessage"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"reform-message text-xs"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        </"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      )}"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    />"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"ReTextarea.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "ReTextarea"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReTextarea }"})]})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"

import * as React from "react"
import { TextareaHTMLAttributes } from "react"
import { useFormContext } from "react-hook-form"

import { cn } from "@/components/lib/utils"
import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { ReFormFieldProps } from "@/components/ui/reform/re-form"
import { Textarea } from "@/components/ui/textarea"

export type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
  className?: string
  name: string
  label?: string
  description?: string
}

const ReTextarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea"> & ReFormFieldProps
>(({ className, name, label, description, ...props }) => {
  const form = useFormContext()

return (
    <FormField
      defaultValue={""}
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem className={className}>
          {label && <FormLabel>{label}</FormLabel>}
          <FormControl>
            <Textarea
              className={cn("resize-none", className)}
              {...props}
              {...field}
            />
          </FormControl>
          {description && <FormDescription>{description}</FormDescription>}
          <FormMessage className="reform-message text-xs" />
        </FormItem>
      )}
    />
  )
})

ReTextarea.displayName = "ReTextarea"
export { ReTextarea }
`,__src__:"registry/default/ui/reform/re-textarea.tsx",__style__:"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { TextareaHTMLAttributes } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useFormContext } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react-hook-form"'})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/lib/utils"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormControl,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormDescription,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormField,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormItem,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormLabel,"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  FormMessage,"})}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/form"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReFormFieldProps } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" Props"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" TextareaHTMLAttributes"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLTextAreaElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  name"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"  description"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" ReTextarea"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  HTMLTextAreaElement,"})}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  React.ComponentProps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"textarea"'}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" &"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ReFormFieldProps"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"name"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"label"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"description"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" form"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" useFormContext"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"  return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormField"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"      defaultValue"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"      control"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{form.control}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"      name"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{name}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"      render"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"field"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{className}>"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          {label "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{label}</"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Textarea"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"              className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"resize-none"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"              {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"              {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"field}"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"            />"})}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          </"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          {description "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{description}</"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">}"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormMessage"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"reform-message text-xs"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"        </"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"      )}"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"    />"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})}),`
`,(0,l.jsx)(e.span,{className:"line",children:" "}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"ReTextarea.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "ReTextarea"'})]}),`
`,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ReTextarea }"})]})]})})})]}),(0,l.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),`
`,(0,l.jsxs)(e.h4,{id:"dependencies",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#dependencies",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Dependencies"]}),`
`,(0,l.jsxs)(e.p,{children:["The ReTextarea is built using the ",(0,l.jsx)(e.code,{children:"<Textarea />"})," from ",(0,l.jsx)(e.a,{href:"https://ui.shadcn.com/docs/components/textarea",children:"shadcn/ui"}),"."]}),`
`,(0,l.jsxs)(e.p,{children:["See installation instructions for the ",(0,l.jsx)(e.a,{href:"/docs/components/textarea#installation",children:"Textarea"})," component."]})]})}function N(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(F,{...n})}):F(n)}function o(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return R(S);})();
;return Component;</article></body></html>