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

), }) } return ( Send ) } `,__src__:"registry/new-york/examples/reform/re-select-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:" { ReSelect } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-select"'})]}),` `,(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.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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" required_error: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"You have to select at least one item."'}),(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.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:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" options"}),(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:" { label: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Option 1"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", value: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"option1"'}),(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:" { label: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Option 2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", value: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"option2"'}),(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:" { label: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Option 3"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", value: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"option3"'}),(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:"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:" defaultValues"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{{ input: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"option2"'}),(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:" 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:"ReSelect"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(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:'"Select"'})]}),` `,(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:"#9ECBFF"},children:'"input"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" options"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{options}"})]}),` `,(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:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"You have to select one item."'})]}),` `,(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:"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 { ReSelect } from "@/components/ui/reform/re-select" import { ReSubmit } from "@/components/ui/reform/re-submit" const formSchema = z.object({ input: z.string({ required_error: "You have to select at least one item.", }), }) type FormData = z.infer const options = [ { label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }, { label: "Option 3", value: "option3" }, ] 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-select-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:" { ReSelect } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-select"'})]}),` `,(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.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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" required_error: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"You have to select at least one item."'}),(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.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:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" options"}),(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:" { label: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Option 1"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", value: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"option1"'}),(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:" { label: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Option 2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", value: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"option2"'}),(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:" { label: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Option 3"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", value: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"option3"'}),(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:"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:" defaultValues"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{{ input: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"option2"'}),(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:" 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:"ReSelect"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(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:'"Select"'})]}),` `,(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:"#9ECBFF"},children:'"input"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" options"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{options}"})]}),` `,(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:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"You have to select one item."'})]}),` `,(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:"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-select `,__npmCommand__:`npx kodkafa@latest add re-select `,__yarnCommand__:`npx kodkafa@latest add re-select `,__pnpmCommand__:`pnpm dlx kodkafa@latest add re-select `,__bunCommand__:`bunx --bun kodkafa@latest add re-select `,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-select"})]})})})})}),(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)(o,{name:"re-select",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 * as SelectPrimitive from "@radix-ui/react-select" import { useFormContext } from "react-hook-form" import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { ReFormFieldProps } from "@/components/ui/reform/re-form" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" const ReSelect = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & ReFormFieldProps & { placeholder?: string options: { label: string | React.ReactNode value: string }[] } >( ( { name, label, description, placeholder = "Select", options, ...props }, ref ) => { const form = useFormContext() if (!form) return (

Form context not found

) return ( ( {label && {label}} {description && {description}} )} /> ) } ) ReSelect.displayName = "ReSelect" export { ReSelect } `,__src__:"registry/new-york/ui/reform/re-select.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:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@radix-ui/react-select"'})]}),` `,(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:" {"})]}),` `,(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:" {"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Select,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectContent,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectItem,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectTrigger,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectValue,"})}),` `,(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/select"'})]}),` `,(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:" ReSelect"}),(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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(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:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ReFormFieldProps "}),(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:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" string"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" options"}),(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:" label"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": string "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"|"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ReactNode"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(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,{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:" { name, label, description, placeholder "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "Select"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", options, "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props },"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref"})}),` `,(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:" {"})]}),` `,(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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(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:"form)"})]}),` `,(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:"#85E89D"},children:"div"}),(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-destructive text-sm"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Form context not found"})]}),` `,(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:"FormField"})]}),` `,(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:"#E1E4E8"},children:">"})]}),` `,(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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Select"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{field.onChange} "}),(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:"{field.value}>"})]}),` `,(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:"SelectTrigger"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref} {"}),(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:"#79B8FF"},children:"SelectValue"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{field.value "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"||"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" placeholder} />"})]}),` `,(0,l.jsxs)(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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SelectContent"}),(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:" {options."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"x"}),(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:"SelectItem"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{x.value} "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{x.value}>"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {x.label}"})}),` `,(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.jsxs)(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.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.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,{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.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:"ReSelect.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "ReSelect"'})]}),` `,(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:" { ReSelect }"})]})]})})}),(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 * as SelectPrimitive from "@radix-ui/react-select" import { useFormContext } from "react-hook-form" import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { ReFormFieldProps } from "@/components/ui/reform/re-form" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" const ReSelect = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & ReFormFieldProps & { placeholder?: string options: { label: string | React.ReactNode value: string }[] } >( ( { name, label, description, placeholder = "Select", options, ...props }, ref ) => { const form = useFormContext() if (!form) return (

Form context not found

) return ( ( {label && {label}} {description && {description}} )} /> ) } ) ReSelect.displayName = "ReSelect" export { ReSelect } `,__src__:"registry/default/ui/reform/re-select.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:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@radix-ui/react-select"'})]}),` `,(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:" {"})]}),` `,(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:" {"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Select,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectContent,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectItem,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectTrigger,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" SelectValue,"})}),` `,(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/select"'})]}),` `,(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:" ReSelect"}),(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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(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:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ReFormFieldProps "}),(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:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" string"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" options"}),(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:" label"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": string "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"|"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ReactNode"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(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,{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:" { name, label, description, placeholder "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "Select"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", options, "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props },"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref"})}),` `,(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:" {"})]}),` `,(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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" if"}),(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:"form)"})]}),` `,(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:"#85E89D"},children:"div"}),(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-destructive text-sm"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Form context not found"})]}),` `,(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:"FormField"})]}),` `,(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:"#E1E4E8"},children:">"})]}),` `,(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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Select"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{field.onChange} "}),(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:"{field.value}>"})]}),` `,(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:"SelectTrigger"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref} {"}),(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:"#79B8FF"},children:"SelectValue"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{field.value "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"||"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" placeholder} />"})]}),` `,(0,l.jsxs)(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.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"SelectContent"}),(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:" {options."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"x"}),(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:"SelectItem"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{x.value} "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{x.value}>"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {x.label}"})}),` `,(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.jsxs)(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.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.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,{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.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:"ReSelect.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "ReSelect"'})]}),` `,(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:" { ReSelect }"})]})]})})})]}),(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 ReSelect is built using the ",(0,l.jsx)(e.code,{children:"