const{Fragment:l,jsx:e,jsxs:n}=arguments[0];function _createMdxContent(s){const c={a:"a",code:"code",div:"div",h2:"h2",h3:"h3",pre:"pre",span:"span",...s.components},{ComponentPreview:r,ComponentSource:o,Step:a,Steps:i,Tabs:t,TabsContent:d,TabsList:h,TabsTrigger:p}=c;return r||_missingMdxReference("ComponentPreview",!0),o||_missingMdxReference("ComponentSource",!0),a||_missingMdxReference("Step",!0),i||_missingMdxReference("Steps",!0),t||_missingMdxReference("Tabs",!0),d||_missingMdxReference("TabsContent",!0),h||_missingMdxReference("TabsList",!0),p||_missingMdxReference("TabsTrigger",!0),n(l,{children:[e(r,{name:"switch-1",description:"A switch component.",children:n(c.div,{"data-rehype-pretty-code-fragment":"",children:[e(c.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Label } from '~/components/label'\nimport { Switch } from '~/components/switch'\n \nexport function SwitchDemo() {\n return (\n

\n \n Airplane Mode\n

\n )\n}",children:n(c.code,{"data-language":"tsx","data-theme":"dark",children:[n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" Label "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" '~/components/label'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" Switch "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" '~/components/switch'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"export"}),e(c.span,{style:{color:"#CBA6F7"},children:" function"}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" SwitchDemo"}),e(c.span,{style:{color:"#9399B2"},children:"()"}),e(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:" return"}),e(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"div"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'flex items-center space-x-2'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"Switch"}),e(c.span,{style:{color:"#F9E2AF"},children:" id"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'airplane-mode'"}),e(c.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"Label"}),e(c.span,{style:{color:"#F9E2AF"},children:" htmlFor"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'airplane-mode'"}),e(c.span,{style:{color:"#94E2D5"},children:">"}),e(c.span,{style:{color:"#CDD6F4"},children:"Airplane Mode"}),e(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#9399B2"},children:"}"})})]})}),e(c.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Label } from '~/components/label'\nimport { Switch } from '~/components/switch'\n \nexport function SwitchDemo() {\n return (\n

\n \n Airplane Mode\n

\n )\n}",children:n(c.code,{"data-language":"tsx","data-theme":"light",children:[n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { Label } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" '~/components/label'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { Switch } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" '~/components/switch'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"export"}),e(c.span,{style:{color:"#D73A49"},children:" function"}),e(c.span,{style:{color:"#6F42C1"},children:" SwitchDemo"}),e(c.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:" return"}),e(c.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"div"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'flex items-center space-x-2'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"Switch"}),e(c.span,{style:{color:"#6F42C1"},children:" id"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'airplane-mode'"}),e(c.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"Label"}),e(c.span,{style:{color:"#6F42C1"},children:" htmlFor"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'airplane-mode'"}),e(c.span,{style:{color:"#24292E"},children:">Airplane Mode"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" )"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",n(c.h2,{id:"installation",children:[e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:e(c.span,{className:"icon icon-link"})}),"Installation"]}),"\n",n(t,{children:[n(h,{children:[e(p,{value:"cli",children:"CLI"}),e(p,{value:"manual",children:"Manual"})]}),e(d,{value:"cli",children:n(c.div,{"data-rehype-pretty-code-fragment":"",children:[e(c.pre,{"data-language":"bash","data-theme":"dark",__rawString__:"npx shadcn@latest add switch",__npmCommand__:"npx shadcn@latest add switch",__yarnCommand__:"npx shadcn@latest add switch",__pnpmCommand__:"pnpm dlx shadcn@latest add switch",__bunCommand__:"bunx --bun shadcn@latest add switch",children:e(c.code,{"data-language":"bash","data-theme":"dark",children:n(c.span,{className:"line",children:[e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npx"}),e(c.span,{style:{color:"#A6E3A1"},children:" shadcn@latest"}),e(c.span,{style:{color:"#A6E3A1"},children:" add"}),e(c.span,{style:{color:"#A6E3A1"},children:" switch"})]})})}),e(c.pre,{"data-language":"bash","data-theme":"light",__rawString__:"npx shadcn@latest add switch",__npmCommand__:"npx shadcn@latest add switch",__yarnCommand__:"npx shadcn@latest add switch",__pnpmCommand__:"pnpm dlx shadcn@latest add switch",__bunCommand__:"bunx --bun shadcn@latest add switch",children:e(c.code,{"data-language":"bash","data-theme":"light",children:n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:"npx"}),e(c.span,{style:{color:"#032F62"},children:" shadcn@latest"}),e(c.span,{style:{color:"#032F62"},children:" add"}),e(c.span,{style:{color:"#032F62"},children:" switch"})]})})})]})}),e(d,{value:"manual",children:n(i,{children:[e(a,{children:"Install the following dependencies:"}),n(c.div,{"data-rehype-pretty-code-fragment":"",children:[e(c.pre,{"data-language":"bash","data-theme":"dark",__rawString__:"npm install @radix-ui/react-switch",__npmCommand__:"npm install @radix-ui/react-switch",__yarnCommand__:"yarn add @radix-ui/react-switch",__pnpmCommand__:"pnpm add @radix-ui/react-switch",__bunCommand__:"bun add @radix-ui/react-switch",children:e(c.code,{"data-language":"bash","data-theme":"dark",children:n(c.span,{className:"line",children:[e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npm"}),e(c.span,{style:{color:"#A6E3A1"},children:" install"}),e(c.span,{style:{color:"#A6E3A1"},children:" @radix-ui/react-switch"})]})})}),e(c.pre,{"data-language":"bash","data-theme":"light",__rawString__:"npm install @radix-ui/react-switch",__npmCommand__:"npm install @radix-ui/react-switch",__yarnCommand__:"yarn add @radix-ui/react-switch",__pnpmCommand__:"pnpm add @radix-ui/react-switch",__bunCommand__:"bun add @radix-ui/react-switch",children:e(c.code,{"data-language":"bash","data-theme":"light",children:n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:"npm"}),e(c.span,{style:{color:"#032F62"},children:" install"}),e(c.span,{style:{color:"#032F62"},children:" @radix-ui/react-switch"})]})})})]}),e(a,{children:"Copy and paste the following code into your project."}),n(o,{name:"switch",children:[n(c.div,{"data-rehype-pretty-code-fragment":"",children:[e(c.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// index.ts\n \nexport * from './switch'",children:n(c.code,{"data-language":"tsx","data-theme":"dark",children:[e(c.span,{className:"line",children:e(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// index.ts"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"export"}),e(c.span,{style:{color:"#F38BA8"},children:" *"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" './switch'"})]})]})}),e(c.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// index.ts\n \nexport * from './switch'",children:n(c.code,{"data-language":"tsx","data-theme":"light",children:[e(c.span,{className:"line",children:e(c.span,{style:{color:"#6A737D"},children:"// index.ts"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"export"}),e(c.span,{style:{color:"#005CC5"},children:" *"}),e(c.span,{style:{color:"#D73A49"},children:" from"}),e(c.span,{style:{color:"#032F62"},children:" './switch'"})]})]})})]}),n(c.div,{"data-rehype-pretty-code-fragment":"",children:[e(c.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// switch.tsx\n \n'use client'\n \nimport * as SwitchPrimitives from '@radix-ui/react-switch'\nimport * as React from 'react'\n \nimport { cn } from '@gentelduck/libs/cn'\n \nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n \nexport { Switch }",children:n(c.code,{"data-language":"tsx","data-theme":"dark",children:[e(c.span,{className:"line",children:e(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// switch.tsx"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#A6E3A1"},children:"'use client'"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#F38BA8"},children:" *"}),e(c.span,{style:{color:"#CBA6F7"},children:" as"}),e(c.span,{style:{color:"#CDD6F4"},children:" SwitchPrimitives "}),e(c.span,{style:{color:"#CBA6F7"},children:"from"}),e(c.span,{style:{color:"#A6E3A1"},children:" '@radix-ui/react-switch'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#F38BA8"},children:" *"}),e(c.span,{style:{color:"#CBA6F7"},children:" as"}),e(c.span,{style:{color:"#CDD6F4"},children:" React "}),e(c.span,{style:{color:"#CBA6F7"},children:"from"}),e(c.span,{style:{color:"#A6E3A1"},children:" 'react'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" cn "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" '@gentelduck/libs/cn'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"const"}),e(c.span,{style:{color:"#FAB387"},children:" Switch"}),e(c.span,{style:{color:"#94E2D5"},children:" ="}),e(c.span,{style:{color:"#CDD6F4"},children:" React"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"forwardRef"}),e(c.span,{style:{color:"#94E2D5"},children:"<"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" React"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"ElementRef"}),e(c.span,{style:{color:"#94E2D5"},children:""}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" React"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"ComponentPropsWithoutRef"}),e(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:">"}),e(c.span,{style:{color:"#CDD6F4"},children:"("}),e(c.span,{style:{color:"#9399B2"},children:"({"}),e(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" className"}),e(c.span,{style:{color:"#9399B2"},children:","}),e(c.span,{style:{color:"#94E2D5"},children:" ..."}),e(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"props"}),e(c.span,{style:{color:"#9399B2"},children:" },"}),e(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" ref"}),e(c.span,{style:{color:"#9399B2"},children:")"}),e(c.span,{style:{color:"#CBA6F7"},children:" =>"}),e(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"SwitchPrimitives.Root"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"cn"}),e(c.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#A6E3A1"},children:" 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input'"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" className"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" )"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#94E2D5"},children:"..."}),e(c.span,{style:{color:"#CDD6F4"},children:"props"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" ref"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#CDD6F4"},children:"ref"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#94E2D5"},children:" >"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"SwitchPrimitives.Thumb"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"cn"}),e(c.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#A6E3A1"},children:" 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" )"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#CDD6F4"},children:"))"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:"Switch"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"displayName "}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#CDD6F4"},children:" SwitchPrimitives"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"Root"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"displayName"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"export"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" Switch "}),e(c.span,{style:{color:"#9399B2"},children:"}"})]})]})}),e(c.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// switch.tsx\n \n'use client'\n \nimport * as SwitchPrimitives from '@radix-ui/react-switch'\nimport * as React from 'react'\n \nimport { cn } from '@gentelduck/libs/cn'\n \nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n \nexport { Switch }",children:n(c.code,{"data-language":"tsx","data-theme":"light",children:[e(c.span,{className:"line",children:e(c.span,{style:{color:"#6A737D"},children:"// switch.tsx"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#032F62"},children:"'use client'"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#005CC5"},children:" *"}),e(c.span,{style:{color:"#D73A49"},children:" as"}),e(c.span,{style:{color:"#24292E"},children:" SwitchPrimitives "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" '@radix-ui/react-switch'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#005CC5"},children:" *"}),e(c.span,{style:{color:"#D73A49"},children:" as"}),e(c.span,{style:{color:"#24292E"},children:" React "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" 'react'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { cn } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" '@gentelduck/libs/cn'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"const"}),e(c.span,{style:{color:"#005CC5"},children:" Switch"}),e(c.span,{style:{color:"#D73A49"},children:" ="}),e(c.span,{style:{color:"#24292E"},children:" React.forwardRef"}),e(c.span,{style:{color:"#D73A49"},children:"<"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" React.ElementRef"}),e(c.span,{style:{color:"#D73A49"},children:""}),e(c.span,{style:{color:"#24292E"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" React.ComponentPropsWithoutRef"}),e(c.span,{style:{color:"#D73A49"},children:""})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:">"}),e(c.span,{style:{color:"#24292E"},children:"(({ "}),e(c.span,{style:{color:"#E36209"},children:"className"}),e(c.span,{style:{color:"#24292E"},children:", "}),e(c.span,{style:{color:"#D73A49"},children:"..."}),e(c.span,{style:{color:"#E36209"},children:"props"}),e(c.span,{style:{color:"#24292E"},children:" }, "}),e(c.span,{style:{color:"#E36209"},children:"ref"}),e(c.span,{style:{color:"#24292E"},children:") "}),e(c.span,{style:{color:"#D73A49"},children:"=>"}),e(c.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"SwitchPrimitives.Root"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{"}),e(c.span,{style:{color:"#6F42C1"},children:"cn"}),e(c.span,{style:{color:"#24292E"},children:"("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#032F62"},children:" 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input'"}),e(c.span,{style:{color:"#24292E"},children:","})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" className,"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" )}"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" {"}),e(c.span,{style:{color:"#D73A49"},children:"..."}),e(c.span,{style:{color:"#24292E"},children:"props}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" ref"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{ref}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" >"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"SwitchPrimitives.Thumb"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{"}),e(c.span,{style:{color:"#6F42C1"},children:"cn"}),e(c.span,{style:{color:"#24292E"},children:"("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#032F62"},children:" 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'"}),e(c.span,{style:{color:"#24292E"},children:","})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" )}"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:"))"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:"Switch.displayName "}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:" SwitchPrimitives.Root.displayName"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"export"}),e(c.span,{style:{color:"#24292E"},children:" { Switch }"})]})]})})]})]}),e(a,{children:"Update the import paths to match your project setup."})]})})]}),"\n",n(c.h2,{id:"usage",children:[e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:e(c.span,{className:"icon icon-link"})}),"Usage"]}),"\n",n(c.div,{"data-rehype-pretty-code-fragment":"",children:[e(c.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:'import { Switch } from "@/components/ui/switch"',children:e(c.code,{"data-language":"tsx","data-theme":"dark",children:n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" Switch "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:' "@/components/ui/switch"'})]})})}),e(c.pre,{"data-language":"tsx","data-theme":"light",__rawString__:'import { Switch } from "@/components/ui/switch"',children:e(c.code,{"data-language":"tsx","data-theme":"light",children:n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { Switch } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:' "@/components/ui/switch"'})]})})})]}),"\n",n(c.div,{"data-rehype-pretty-code-fragment":"",children:[e(c.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"",children:e(c.code,{"data-language":"tsx","data-theme":"dark",children:n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:"<"}),e(c.span,{style:{color:"#F5C2E7"},children:"Switch"}),e(c.span,{style:{color:"#94E2D5"},children:" />"})]})})}),e(c.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"",children:e(c.code,{"data-language":"tsx","data-theme":"light",children:n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:"<"}),e(c.span,{style:{color:"#005CC5"},children:"Switch"}),e(c.span,{style:{color:"#24292E"},children:" />"})]})})})]}),"\n",n(c.h2,{id:"examples",children:[e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:e(c.span,{className:"icon icon-link"})}),"Examples"]}),"\n",n(c.h3,{id:"form",children:[e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#form",children:e(c.span,{className:"icon icon-link"})}),"Form"]}),"\n",e(r,{name:"switch-2",children:n(c.div,{"data-rehype-pretty-code-fragment":"",children:[e(c.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"'use client'\n \nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n \nimport { Button } from '~/components/button'\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n} from '~/components/form'\nimport { Switch } from '~/components/switch'\nimport { toast } from 'sonner'\n \nconst FormSchema = z.object({\n marketing_emails: z.boolean().default(false).optional(),\n security_emails: z.boolean(),\n})\n \nexport function SwitchForm() {\n const form = useForm>({\n resolver: zodResolver(FormSchema),\n defaultValues: {\n security_emails: true,\n },\n })\n \n function onSubmit(data: z.infer) {\n toast.info(\n

\n You submitted the following values:\n

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

,\n )\n }\n \n return (\n \n \n )\n}",children:n(c.code,{"data-language":"tsx","data-theme":"dark",children:[e(c.span,{className:"line",children:e(c.span,{style:{color:"#A6E3A1"},children:"'use client'"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" zodResolver "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" '@hookform/resolvers/zod'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" useForm "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" 'react-hook-form'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" z "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" 'zod'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" Button "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" '~/components/button'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" Form"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" FormControl"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" FormDescription"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" FormField"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" FormItem"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" FormLabel"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" '~/components/form'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" Switch "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" '~/components/switch'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"import"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#CDD6F4"},children:" toast "}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CBA6F7"},children:" from"}),e(c.span,{style:{color:"#A6E3A1"},children:" 'sonner'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"const"}),e(c.span,{style:{color:"#FAB387"},children:" FormSchema"}),e(c.span,{style:{color:"#94E2D5"},children:" ="}),e(c.span,{style:{color:"#CDD6F4"},children:" z"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"object"}),e(c.span,{style:{color:"#CDD6F4"},children:"("}),e(c.span,{style:{color:"#9399B2"},children:"{"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" marketing_emails"}),e(c.span,{style:{color:"#94E2D5"},children:":"}),e(c.span,{style:{color:"#CDD6F4"},children:" z"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"boolean"}),e(c.span,{style:{color:"#CDD6F4"},children:"()"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"default"}),e(c.span,{style:{color:"#CDD6F4"},children:"("}),e(c.span,{style:{color:"#FAB387"},children:"false"}),e(c.span,{style:{color:"#CDD6F4"},children:")"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"optional"}),e(c.span,{style:{color:"#CDD6F4"},children:"()"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" security_emails"}),e(c.span,{style:{color:"#94E2D5"},children:":"}),e(c.span,{style:{color:"#CDD6F4"},children:" z"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"boolean"}),e(c.span,{style:{color:"#CDD6F4"},children:"()"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:"export"}),e(c.span,{style:{color:"#CBA6F7"},children:" function"}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" SwitchForm"}),e(c.span,{style:{color:"#9399B2"},children:"()"}),e(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:" const"}),e(c.span,{style:{color:"#FAB387"},children:" form"}),e(c.span,{style:{color:"#94E2D5"},children:" ="}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" useForm"}),e(c.span,{style:{color:"#89DCEB"},children:"<"}),e(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"z"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"infer"}),e(c.span,{style:{color:"#89DCEB"},children:"<"}),e(c.span,{style:{color:"#94E2D5"},children:"typeof"}),e(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" FormSchema"}),e(c.span,{style:{color:"#89DCEB"},children:">>"}),e(c.span,{style:{color:"#CDD6F4"},children:"("}),e(c.span,{style:{color:"#9399B2"},children:"{"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" resolver"}),e(c.span,{style:{color:"#94E2D5"},children:":"}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" zodResolver"}),e(c.span,{style:{color:"#CDD6F4"},children:"(FormSchema)"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" defaultValues"}),e(c.span,{style:{color:"#94E2D5"},children:":"}),e(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" security_emails"}),e(c.span,{style:{color:"#94E2D5"},children:":"}),e(c.span,{style:{color:"#FAB387"},children:" true"}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#9399B2"},children:" },"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#9399B2"},children:" }"}),e(c.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:" function"}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" onSubmit"}),e(c.span,{style:{color:"#9399B2"},children:"("}),e(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"data"}),e(c.span,{style:{color:"#94E2D5"},children:":"}),e(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" z"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"infer"}),e(c.span,{style:{color:"#89DCEB"},children:"<"}),e(c.span,{style:{color:"#94E2D5"},children:"typeof"}),e(c.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" FormSchema"}),e(c.span,{style:{color:"#89DCEB"},children:">"}),e(c.span,{style:{color:"#9399B2"},children:")"}),e(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" toast"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"info"}),e(c.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"div"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"h4"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'text-lg font-medium'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#CDD6F4"},children:" You submitted the following values:"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"pre"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'mt-2 w-[340px] rounded-md bg-slate-950 p-4'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"code"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'text-white'"}),e(c.span,{style:{color:"#94E2D5"},children:">"}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#FAB387"},children:"JSON"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"stringify"}),e(c.span,{style:{color:"#CDD6F4"},children:"(data"}),e(c.span,{style:{color:"#9399B2"},children:","}),e(c.span,{style:{color:"#F38BA8"},children:" null"}),e(c.span,{style:{color:"#9399B2"},children:","}),e(c.span,{style:{color:"#FAB387"},children:" 2"}),e(c.span,{style:{color:"#CDD6F4"},children:")"}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "}),e(c.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#9399B2"},children:" }"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CBA6F7"},children:" return"}),e(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"Form"}),e(c.span,{style:{color:"#9399B2"},children:" {"}),e(c.span,{style:{color:"#94E2D5"},children:"..."}),e(c.span,{style:{color:"#CDD6F4"},children:"form"}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"form"}),e(c.span,{style:{color:"#F9E2AF"},children:" onSubmit"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#CDD6F4"},children:"form"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"handleSubmit"}),e(c.span,{style:{color:"#CDD6F4"},children:"(onSubmit)"}),e(c.span,{style:{color:"#9399B2"},children:"}"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'w-full space-y-6'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"div"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"h3"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'mb-4 text-lg font-medium'"}),e(c.span,{style:{color:"#94E2D5"},children:">"}),e(c.span,{style:{color:"#CDD6F4"},children:"Email Notifications"}),e(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"div"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'space-y-4'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormField"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" control"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#CDD6F4"},children:"form"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"control"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" name"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'marketing_emails'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" render"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{({"}),e(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" field"}),e(c.span,{style:{color:"#9399B2"},children:" })"}),e(c.span,{style:{color:"#CBA6F7"},children:" =>"}),e(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormItem"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"div"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'space-y-0.5'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormLabel"}),e(c.span,{style:{color:"#94E2D5"},children:">"}),e(c.span,{style:{color:"#CDD6F4"},children:"Marketing emails"}),e(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormDescription"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#CDD6F4"},children:" Receive emails about new products, features, and more."})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormControl"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"Switch"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" checked"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#CDD6F4"},children:"field"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"value"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" onCheckedChange"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#CDD6F4"},children:"field"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"onChange"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" )"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormField"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" control"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#CDD6F4"},children:"form"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"control"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" name"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'security_emails'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" render"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{({"}),e(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" field"}),e(c.span,{style:{color:"#9399B2"},children:" })"}),e(c.span,{style:{color:"#CBA6F7"},children:" =>"}),e(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormItem"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#89B4FA"},children:"div"}),e(c.span,{style:{color:"#F9E2AF"},children:" className"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'space-y-0.5'"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormLabel"}),e(c.span,{style:{color:"#94E2D5"},children:">"}),e(c.span,{style:{color:"#CDD6F4"},children:"Security emails"}),e(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormDescription"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#CDD6F4"},children:" Receive emails about your account security."})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"FormControl"}),e(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"Switch"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" checked"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#CDD6F4"},children:"field"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"value"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#F9E2AF"},children:" onCheckedChange"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#9399B2"},children:"{"}),e(c.span,{style:{color:"#CDD6F4"},children:"field"}),e(c.span,{style:{color:"#94E2D5"},children:"."}),e(c.span,{style:{color:"#CDD6F4"},children:"onChange"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#F9E2AF"},children:" disabled"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#F9E2AF"},children:" aria-readonly"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#CDD6F4"},children:" )"}),e(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" <"}),e(c.span,{style:{color:"#F5C2E7"},children:"Button"}),e(c.span,{style:{color:"#F9E2AF"},children:" type"}),e(c.span,{style:{color:"#94E2D5"},children:"="}),e(c.span,{style:{color:"#A6E3A1"},children:"'submit'"}),e(c.span,{style:{color:"#94E2D5"},children:">"}),e(c.span,{style:{color:"#CDD6F4"},children:"Submit"}),e(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#9399B2"},children:"}"})})]})}),e(c.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"'use client'\n \nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useForm } from 'react-hook-form'\nimport { z } from 'zod'\n \nimport { Button } from '~/components/button'\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n} from '~/components/form'\nimport { Switch } from '~/components/switch'\nimport { toast } from 'sonner'\n \nconst FormSchema = z.object({\n marketing_emails: z.boolean().default(false).optional(),\n security_emails: z.boolean(),\n})\n \nexport function SwitchForm() {\n const form = useForm>({\n resolver: zodResolver(FormSchema),\n defaultValues: {\n security_emails: true,\n },\n })\n \n function onSubmit(data: z.infer) {\n toast.info(\n

\n You submitted the following values:\n

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

,\n )\n }\n \n return (\n \n \n )\n}",children:n(c.code,{"data-language":"tsx","data-theme":"light",children:[e(c.span,{className:"line",children:e(c.span,{style:{color:"#032F62"},children:"'use client'"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { zodResolver } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" '@hookform/resolvers/zod'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { useForm } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" 'react-hook-form'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { z } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" 'zod'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { Button } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" '~/components/button'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" {"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" Form,"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" FormControl,"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" FormDescription,"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" FormField,"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" FormItem,"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" FormLabel,"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:"} "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" '~/components/form'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { Switch } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" '~/components/switch'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"import"}),e(c.span,{style:{color:"#24292E"},children:" { toast } "}),e(c.span,{style:{color:"#D73A49"},children:"from"}),e(c.span,{style:{color:"#032F62"},children:" 'sonner'"})]}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"const"}),e(c.span,{style:{color:"#005CC5"},children:" FormSchema"}),e(c.span,{style:{color:"#D73A49"},children:" ="}),e(c.span,{style:{color:"#24292E"},children:" z."}),e(c.span,{style:{color:"#6F42C1"},children:"object"}),e(c.span,{style:{color:"#24292E"},children:"({"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" marketing_emails: z."}),e(c.span,{style:{color:"#6F42C1"},children:"boolean"}),e(c.span,{style:{color:"#24292E"},children:"()."}),e(c.span,{style:{color:"#6F42C1"},children:"default"}),e(c.span,{style:{color:"#24292E"},children:"("}),e(c.span,{style:{color:"#005CC5"},children:"false"}),e(c.span,{style:{color:"#24292E"},children:")."}),e(c.span,{style:{color:"#6F42C1"},children:"optional"}),e(c.span,{style:{color:"#24292E"},children:"(),"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" security_emails: z."}),e(c.span,{style:{color:"#6F42C1"},children:"boolean"}),e(c.span,{style:{color:"#24292E"},children:"(),"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:"})"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:"export"}),e(c.span,{style:{color:"#D73A49"},children:" function"}),e(c.span,{style:{color:"#6F42C1"},children:" SwitchForm"}),e(c.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:" const"}),e(c.span,{style:{color:"#005CC5"},children:" form"}),e(c.span,{style:{color:"#D73A49"},children:" ="}),e(c.span,{style:{color:"#6F42C1"},children:" useForm"}),e(c.span,{style:{color:"#24292E"},children:"<"}),e(c.span,{style:{color:"#6F42C1"},children:"z"}),e(c.span,{style:{color:"#24292E"},children:"."}),e(c.span,{style:{color:"#6F42C1"},children:"infer"}),e(c.span,{style:{color:"#24292E"},children:"<"}),e(c.span,{style:{color:"#D73A49"},children:"typeof"}),e(c.span,{style:{color:"#24292E"},children:" FormSchema>>({"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" resolver: "}),e(c.span,{style:{color:"#6F42C1"},children:"zodResolver"}),e(c.span,{style:{color:"#24292E"},children:"(FormSchema),"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" defaultValues: {"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" security_emails: "}),e(c.span,{style:{color:"#005CC5"},children:"true"}),e(c.span,{style:{color:"#24292E"},children:","})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" },"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" })"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:" function"}),e(c.span,{style:{color:"#6F42C1"},children:" onSubmit"}),e(c.span,{style:{color:"#24292E"},children:"("}),e(c.span,{style:{color:"#E36209"},children:"data"}),e(c.span,{style:{color:"#D73A49"},children:":"}),e(c.span,{style:{color:"#6F42C1"},children:" z"}),e(c.span,{style:{color:"#24292E"},children:"."}),e(c.span,{style:{color:"#6F42C1"},children:"infer"}),e(c.span,{style:{color:"#24292E"},children:"<"}),e(c.span,{style:{color:"#D73A49"},children:"typeof"}),e(c.span,{style:{color:"#24292E"},children:" FormSchema>) {"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" toast."}),e(c.span,{style:{color:"#6F42C1"},children:"info"}),e(c.span,{style:{color:"#24292E"},children:"("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"div"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"h4"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'text-lg font-medium'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" You submitted the following values:"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"pre"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'mt-2 w-[340px] rounded-md bg-slate-950 p-4'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"code"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'text-white'"}),e(c.span,{style:{color:"#24292E"},children:">{"}),e(c.span,{style:{color:"#005CC5"},children:"JSON"}),e(c.span,{style:{color:"#24292E"},children:"."}),e(c.span,{style:{color:"#6F42C1"},children:"stringify"}),e(c.span,{style:{color:"#24292E"},children:"(data, "}),e(c.span,{style:{color:"#005CC5"},children:"null"}),e(c.span,{style:{color:"#24292E"},children:", "}),e(c.span,{style:{color:"#005CC5"},children:"2"}),e(c.span,{style:{color:"#24292E"},children:")}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" ,"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" )"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" }"})}),"\n",e(c.span,{className:"line",children:" "}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#D73A49"},children:" return"}),e(c.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"Form"}),e(c.span,{style:{color:"#24292E"},children:" {"}),e(c.span,{style:{color:"#D73A49"},children:"..."}),e(c.span,{style:{color:"#24292E"},children:"form}>"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"form"}),e(c.span,{style:{color:"#6F42C1"},children:" onSubmit"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{form."}),e(c.span,{style:{color:"#6F42C1"},children:"handleSubmit"}),e(c.span,{style:{color:"#24292E"},children:"(onSubmit)} "}),e(c.span,{style:{color:"#6F42C1"},children:"className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'w-full space-y-6'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"div"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"h3"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'mb-4 text-lg font-medium'"}),e(c.span,{style:{color:"#24292E"},children:">Email Notifications"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"div"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'space-y-4'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormField"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" control"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{form.control}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" name"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'marketing_emails'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" render"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{({ "}),e(c.span,{style:{color:"#E36209"},children:"field"}),e(c.span,{style:{color:"#24292E"},children:" }) "}),e(c.span,{style:{color:"#D73A49"},children:"=>"}),e(c.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormItem"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"div"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'space-y-0.5'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormLabel"}),e(c.span,{style:{color:"#24292E"},children:">Marketing emails"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormDescription"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" Receive emails about new products, features, and more."})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormControl"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"Switch"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" checked"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{field.value}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" onCheckedChange"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{field.onChange}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" )}"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormField"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" control"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{form.control}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" name"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'security_emails'"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" render"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{({ "}),e(c.span,{style:{color:"#E36209"},children:"field"}),e(c.span,{style:{color:"#24292E"},children:" }) "}),e(c.span,{style:{color:"#D73A49"},children:"=>"}),e(c.span,{style:{color:"#24292E"},children:" ("})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormItem"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#22863A"},children:"div"}),e(c.span,{style:{color:"#6F42C1"},children:" className"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'space-y-0.5'"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormLabel"}),e(c.span,{style:{color:"#24292E"},children:">Security emails"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormDescription"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" Receive emails about your account security."})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"FormControl"}),e(c.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"Switch"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" checked"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{field.value}"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#6F42C1"},children:" onCheckedChange"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#24292E"},children:"{field.onChange}"})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#6F42C1"},children:" disabled"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#6F42C1"},children:" aria-readonly"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" )}"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" />"})}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" <"}),e(c.span,{style:{color:"#005CC5"},children:"Button"}),e(c.span,{style:{color:"#6F42C1"},children:" type"}),e(c.span,{style:{color:"#D73A49"},children:"="}),e(c.span,{style:{color:"#032F62"},children:"'submit'"}),e(c.span,{style:{color:"#24292E"},children:">Submit"})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(c.span,{className:"line",children:[e(c.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:" )"})}),"\n",e(c.span,{className:"line",children:e(c.span,{style:{color:"#24292E"},children:"}"})})]})})]})})]})}return{default:function(l={}){const{wrapper:n}=l.components||{};return n?e(n,{...l,children:e(_createMdxContent,{...l})}):_createMdxContent(l)}};function _missingMdxReference(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}