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

), }) } return ( Create my account ) } `,__src__:"registry/new-york/examples/reform/re-switch-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "zod"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReForm } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSubmit } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-submit"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSwitch } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" formSchema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" allowance: z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormData"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" formSchema>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormComponent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormData"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReForm"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" schema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{formSchema}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{handleSubmit}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" defaultValues"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{ allowance: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-4 gap-0"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReSwitch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex-row-reverse"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Newsletter Allowance"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"allowance"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"While confirming, we will send you newsletter to your email."'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Create my account"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { 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 { ReSwitch } from "@/components/ui/reform/re-switch" const formSchema = z.object({ allowance: z.boolean(), }) 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 ( Create my account ) } `,__src__:"registry/default/examples/reform/re-switch-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "zod"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReForm } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSubmit } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-submit"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSwitch } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" formSchema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" allowance: z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormData"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" formSchema>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormComponent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormData"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReForm"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" schema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{formSchema}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{handleSubmit}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" defaultValues"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{ allowance: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-4 gap-0"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReSwitch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex-row-reverse"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Newsletter Allowance"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"allowance"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"While confirming, we will send you newsletter to your email."'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Create my account"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(d,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(i,{value:"cli",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx kodkafa@latest add re-switch `,__npmCommand__:`npx kodkafa@latest add re-switch `,__yarnCommand__:`npx kodkafa@latest add re-switch `,__pnpmCommand__:`pnpm dlx kodkafa@latest add re-switch `,__bunCommand__:`bunx --bun kodkafa@latest add re-switch `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" kodkafa@latest"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" re-switch"})]})})})})}),(0,e.jsx)(i,{value:"manual",children:(0,e.jsxs)(p,{children:[(0,e.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(o,{name:"re-switch",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { useFormContext } from "react-hook-form" import { cn } from "@/lib/utils" import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { ReFormFieldProps } from "@/components/ui/reform/re-form" import { Switch } from "@/components/ui/switch" const ReSwitch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & ReFormFieldProps >(({ className, name, label, description, ...props }, ref) => { const form = useFormContext() return ( (

{label && {label}} {description && {description}}

)} /> ) }) ReSwitch.displayName = "ReSwitch" export { ReSwitch } `,__src__:"registry/new-york/ui/reform/re-switch.tsx",__style__:"new-york",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SwitchPrimitives "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@radix-ui/react-switch"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useFormContext } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react-hook-form"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormControl,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormDescription,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormField,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormItem,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormLabel,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormMessage,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReFormFieldProps } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" ReSwitch"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" &"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ReFormFieldProps"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" form"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useFormContext"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{form.control}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{name}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "rounded-md border border-input bg-background px-3 py-2 text-base "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "border-input space-y-0 items-center flex gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" className"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{field.value}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{field.onChange}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grow grid gap-1.5 leading-none"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {label "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{label}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {description "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{description}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormMessage"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"reform-message text-xs"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"ReSwitch.displayName "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "ReSwitch"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSwitch }"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { useFormContext } from "react-hook-form" import { cn } from "@/lib/utils" import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { ReFormFieldProps } from "@/components/ui/reform/re-form" import { Switch } from "@/components/ui/switch" const ReSwitch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & ReFormFieldProps >(({ className, name, label, description, ...props }, ref) => { const form = useFormContext() return ( (

{label && {label}} {description && {description}}

)} /> ) }) ReSwitch.displayName = "ReSwitch" export { ReSwitch } `,__src__:"registry/default/ui/reform/re-switch.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" SwitchPrimitives "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@radix-ui/react-switch"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useFormContext } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react-hook-form"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormControl,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormDescription,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormField,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormItem,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormLabel,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormMessage,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReFormFieldProps } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" ReSwitch"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" &"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ReFormFieldProps"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" form"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useFormContext"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{form.control}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{name}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "rounded-md border border-input bg-background px-3 py-2 text-base "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "border-input space-y-0 items-center flex gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" className"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{field.value}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{field.onChange}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grow grid gap-1.5 leading-none"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {label "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{label}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {description "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{description}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormMessage"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"reform-message text-xs"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"ReSwitch.displayName "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "ReSwitch"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSwitch }"})]})]})})})]}),(0,e.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h4,{id:"dependencies",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#dependencies",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Dependencies"]}),` `,(0,e.jsxs)(l.p,{children:["The ReSwitch is built using the ",(0,e.jsx)(l.code,{children:""})," from ",(0,e.jsx)(l.a,{href:"https://ui.shadcn.com/docs/components/switch",children:"shadcn/ui"}),"."]}),` `,(0,e.jsxs)(l.p,{children:["See installation instructions for the ",(0,e.jsx)(l.a,{href:"/docs/components/switch#installation",children:"Switch"})," component."]}),` `,(0,e.jsxs)(l.h2,{id:"examples",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,e.jsxs)(l.h3,{id:"switch",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#switch",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Switch"]}),` `,(0,e.jsxs)(s,{name:"re-form-register",description:"A register form example.",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { z } from "zod" import { toast } from "@/components/hooks/use-toast" import { Label } from "@/components/ui/label" import { ReCheckbox } from "@/components/ui/reform/re-checkbox" import { ReForm } from "@/components/ui/reform/re-form" import { ReInput } from "@/components/ui/reform/re-input" import { ReInputGroup } from "@/components/ui/reform/re-input-group" import { RePassword } from "@/components/ui/reform/re-password" import { ReSubmit } from "@/components/ui/reform/re-submit" import { ReSwitch } from "@/components/ui/reform/re-switch" const formSchema = z.object({ username: z.string().min(2, { message: "Username must be at least 2 characters.", }), password: z.string().min(8, { message: "Password must be at least 8 characters.", }), rememberMe: z.boolean(), }) 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 (

Full Name

@ By creating an account, you agree to our Terms of Service and{" "} Privacy Policy. } /> Create my account ) } `,__src__:"registry/new-york/examples/reform/re-form-register.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "zod"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReCheckbox } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-checkbox"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReForm } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReInput } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-input"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReInputGroup } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-input-group"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { RePassword } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-password"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSubmit } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-submit"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSwitch } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" formSchema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" username: z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" message: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Username must be at least 2 characters."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" password: z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" message: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Password must be at least 8 characters."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" rememberMe: z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormData"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" formSchema>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormComponent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormData"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReForm"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" schema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{formSchema}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{handleSubmit}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" defaultValues"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{ username: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", password: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", rememberMe: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-4 gap-0"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Full Name"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid grid-cols-2 gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInput"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"firstName"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"First Name"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInput"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"lastName"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Last Name"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInput"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Email"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"email"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"joe@gmail.com"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"email"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInputGroup"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Username"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"p-3 bg-accent text-muted-foreground border-r"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">@"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInput"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"username"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"joe"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"RePassword"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Password"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"password"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"password"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReCheckbox"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:' // label="Remember me"'})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"approve"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"block -m-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" By creating an account, you agree to our <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"u"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Terms of Service and{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"u"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Privacy Policy."})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReSwitch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Newsletter Allowance"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"allowance"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"While confirming, we will send you newsletter to your email."'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Create my account"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { z } from "zod" import { toast } from "@/components/hooks/use-toast" import { Label } from "@/components/ui/label" import { ReCheckbox } from "@/components/ui/reform/re-checkbox" import { ReForm } from "@/components/ui/reform/re-form" import { ReInput } from "@/components/ui/reform/re-input" import { ReInputGroup } from "@/components/ui/reform/re-input-group" import { RePassword } from "@/components/ui/reform/re-password" import { ReSubmit } from "@/components/ui/reform/re-submit" import { ReSwitch } from "@/components/ui/reform/re-switch" const formSchema = z.object({ username: z.string().min(2, { message: "Username must be at least 2 characters.", }), password: z.string().min(8, { message: "Password must be at least 8 characters.", }), rememberMe: z.boolean(), }) 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 (

Full Name

@ By creating an account, you agree to our Terms of Service and{" "} Privacy Policy. } /> Create my account ) } `,__src__:"registry/default/examples/reform/re-form-register.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "zod"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReCheckbox } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-checkbox"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReForm } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReInput } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-input"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReInputGroup } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-input-group"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { RePassword } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-password"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSubmit } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-submit"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ReSwitch } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/reform/re-switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" formSchema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" username: z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" message: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Username must be at least 2 characters."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" password: z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" message: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Password must be at least 8 characters."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }),"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" rememberMe: z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormData"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" formSchema>"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormComponent"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" FormData"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" title: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReForm"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" schema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{formSchema}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{handleSubmit}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" defaultValues"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{ username: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", password: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", rememberMe: "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-4 gap-0"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Full Name"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid grid-cols-2 gap-4"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInput"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"firstName"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"First Name"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInput"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"lastName"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Last Name"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInput"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Email"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"email"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"joe@gmail.com"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"email"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInputGroup"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Username"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"p-3 bg-accent text-muted-foreground border-r"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">@"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReInput"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"username"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"joe"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"RePassword"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Password"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"password"'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"password"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReCheckbox"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A737D"},children:' // label="Remember me"'})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"approve"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"block -m-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" By creating an account, you agree to our <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"u"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Terms of Service and{"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'" "'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"u"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Privacy Policy."})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReSwitch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Newsletter Allowance"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"allowance"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"While confirming, we will send you newsletter to your email."'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"ReSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Create my account"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})}function N(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(F,{...n})}):F(n)}function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return S(v);})(); ;return Component;