{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-formisch-switch",
  "dependencies": [
    "@formisch/react",
    "valibot"
  ],
  "registryDependencies": [
    "field",
    "switch",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-formisch-switch.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Form, Field as FormischField, reset, useForm } from \"@formisch/react\"\nimport type { SubmitHandler } from \"@formisch/react\"\nimport { toast } from \"sonner\"\nimport * as v from \"valibot\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst FormSchema = v.object({\n  twoFactor: v.pipe(\n    v.boolean(),\n    v.check(\n      (value) => value === true,\n      \"It is highly recommended to enable two-factor authentication.\"\n    )\n  ),\n})\n\nexport default function FormFormischSwitch() {\n  const form = useForm({\n    schema: FormSchema,\n    initialInput: {\n      twoFactor: false,\n    },\n  })\n\n  const handleSubmit: SubmitHandler<typeof FormSchema> = (output) => {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(output, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Security Settings</CardTitle>\n        <CardDescription>\n          Manage your account security preferences.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form of={form} id=\"form-formisch-switch\" onSubmit={handleSubmit}>\n          <FieldGroup>\n            <FormischField of={form} path={[\"twoFactor\"]}>\n              {(field) => (\n                <Field\n                  orientation=\"horizontal\"\n                  data-invalid={field.errors !== null}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-formisch-switch-twoFactor\">\n                      Multi-factor authentication\n                    </FieldLabel>\n                    <FieldDescription>\n                      Enable multi-factor authentication to secure your account.\n                    </FieldDescription>\n                    {field.errors && (\n                      <FieldError\n                        errors={field.errors.map((message) => ({ message }))}\n                      />\n                    )}\n                  </FieldContent>\n                  <Switch\n                    id=\"form-formisch-switch-twoFactor\"\n                    checked={field.input ?? false}\n                    onCheckedChange={(checked) => field.onChange(checked)}\n                    aria-invalid={field.errors !== null}\n                  />\n                </Field>\n              )}\n            </FormischField>\n          </FieldGroup>\n        </Form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => reset(form)}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-formisch-switch\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}