{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-formisch-complex",
  "dependencies": [
    "@formisch/react",
    "valibot"
  ],
  "registryDependencies": [
    "field",
    "button",
    "card",
    "checkbox",
    "radio-group",
    "select",
    "switch"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-formisch-complex.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 { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst addons = [\n  {\n    id: \"analytics\",\n    title: \"Analytics\",\n    description: \"Advanced analytics and reporting\",\n  },\n  {\n    id: \"backup\",\n    title: \"Backup\",\n    description: \"Automated daily backups\",\n  },\n  {\n    id: \"support\",\n    title: \"Priority Support\",\n    description: \"24/7 premium customer support\",\n  },\n] as const\n\nconst FormSchema = v.object({\n  plan: v.pipe(\n    v.string(),\n    v.minLength(1, \"Please select a subscription plan\"),\n    v.check(\n      (value) => value === \"basic\" || value === \"pro\",\n      \"Invalid plan selection. Please choose Basic or Pro\"\n    )\n  ),\n  billingPeriod: v.pipe(\n    v.string(),\n    v.minLength(1, \"Please select a billing period\")\n  ),\n  addons: v.pipe(\n    v.array(v.string()),\n    v.minLength(1, \"Please select at least one add-on\"),\n    v.maxLength(3, \"You can select up to 3 add-ons\"),\n    v.check(\n      (value) => value.every((addon) => addons.some((a) => a.id === addon)),\n      \"You selected an invalid add-on\"\n    )\n  ),\n  emailNotifications: v.boolean(),\n})\n\nexport default function FormFormischComplex() {\n  const form = useForm({\n    schema: FormSchema,\n    initialInput: {\n      plan: \"basic\",\n      billingPeriod: \"\",\n      addons: [],\n      emailNotifications: 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 max-w-sm\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>You&apos;re almost there!</CardTitle>\n        <CardDescription>\n          Choose your subscription plan and billing period.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form of={form} id=\"form-formisch-complex\" onSubmit={handleSubmit}>\n          <FieldGroup>\n            <FormischField of={form} path={[\"plan\"]}>\n              {(field) => (\n                <FieldSet data-invalid={field.errors !== null}>\n                  <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n                  <FieldDescription>\n                    Choose your subscription plan.\n                  </FieldDescription>\n                  <RadioGroup\n                    value={field.input ?? \"\"}\n                    onValueChange={(value) => field.onChange(value)}\n                    aria-invalid={field.errors !== null}\n                  >\n                    <FieldLabel htmlFor=\"form-formisch-complex-basic\">\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldTitle>Basic</FieldTitle>\n                          <FieldDescription>\n                            For individuals and small teams\n                          </FieldDescription>\n                        </FieldContent>\n                        <RadioGroupItem\n                          value=\"basic\"\n                          id=\"form-formisch-complex-basic\"\n                        />\n                      </Field>\n                    </FieldLabel>\n                    <FieldLabel htmlFor=\"form-formisch-complex-pro\">\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldTitle>Pro</FieldTitle>\n                          <FieldDescription>\n                            For businesses with higher demands\n                          </FieldDescription>\n                        </FieldContent>\n                        <RadioGroupItem\n                          value=\"pro\"\n                          id=\"form-formisch-complex-pro\"\n                        />\n                      </Field>\n                    </FieldLabel>\n                  </RadioGroup>\n                  {field.errors && (\n                    <FieldError\n                      errors={field.errors.map((message) => ({ message }))}\n                    />\n                  )}\n                </FieldSet>\n              )}\n            </FormischField>\n            <FieldSeparator />\n            <FormischField of={form} path={[\"billingPeriod\"]}>\n              {(field) => (\n                <Field data-invalid={field.errors !== null}>\n                  <FieldLabel htmlFor=\"form-formisch-complex-billingPeriod\">\n                    Billing Period\n                  </FieldLabel>\n                  <Select\n                    value={field.input ?? \"\"}\n                    onValueChange={(value) => field.onChange(value)}\n                  >\n                    <SelectTrigger\n                      id=\"form-formisch-complex-billingPeriod\"\n                      aria-invalid={field.errors !== null}\n                    >\n                      <SelectValue placeholder=\"Select\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"monthly\">Monthly</SelectItem>\n                      <SelectItem value=\"yearly\">Yearly</SelectItem>\n                    </SelectContent>\n                  </Select>\n                  <FieldDescription>\n                    Choose how often you want to be billed.\n                  </FieldDescription>\n                  {field.errors && (\n                    <FieldError\n                      errors={field.errors.map((message) => ({ message }))}\n                    />\n                  )}\n                </Field>\n              )}\n            </FormischField>\n            <FieldSeparator />\n            <FormischField of={form} path={[\"addons\"]}>\n              {(field) => {\n                const current = field.input ?? []\n                return (\n                  <FieldSet>\n                    <FieldLegend>Add-ons</FieldLegend>\n                    <FieldDescription>\n                      Select additional features you&apos;d like to include.\n                    </FieldDescription>\n                    <FieldGroup data-slot=\"checkbox-group\">\n                      {addons.map((addon) => (\n                        <Field\n                          key={addon.id}\n                          orientation=\"horizontal\"\n                          data-invalid={field.errors !== null}\n                        >\n                          <Checkbox\n                            id={`form-formisch-complex-${addon.id}`}\n                            aria-invalid={field.errors !== null}\n                            checked={current.includes(addon.id)}\n                            onCheckedChange={(checked) => {\n                              field.onChange(\n                                checked === true\n                                  ? [...current, addon.id]\n                                  : current.filter(\n                                      (value) => value !== addon.id\n                                    )\n                              )\n                            }}\n                          />\n                          <FieldContent>\n                            <FieldLabel\n                              htmlFor={`form-formisch-complex-${addon.id}`}\n                            >\n                              {addon.title}\n                            </FieldLabel>\n                            <FieldDescription>\n                              {addon.description}\n                            </FieldDescription>\n                          </FieldContent>\n                        </Field>\n                      ))}\n                    </FieldGroup>\n                    {field.errors && (\n                      <FieldError\n                        errors={field.errors.map((message) => ({ message }))}\n                      />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            </FormischField>\n            <FieldSeparator />\n            <FormischField of={form} path={[\"emailNotifications\"]}>\n              {(field) => (\n                <Field\n                  orientation=\"horizontal\"\n                  data-invalid={field.errors !== null}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-formisch-complex-emailNotifications\">\n                      Email Notifications\n                    </FieldLabel>\n                    <FieldDescription>\n                      Receive email updates about your subscription\n                    </FieldDescription>\n                  </FieldContent>\n                  <Switch\n                    id=\"form-formisch-complex-emailNotifications\"\n                    checked={field.input ?? false}\n                    onCheckedChange={(checked) => field.onChange(checked)}\n                    aria-invalid={field.errors !== null}\n                  />\n                  {field.errors && (\n                    <FieldError\n                      errors={field.errors.map((message) => ({ message }))}\n                    />\n                  )}\n                </Field>\n              )}\n            </FormischField>\n          </FieldGroup>\n        </Form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field>\n          <Button type=\"submit\" form=\"form-formisch-complex\">\n            Save Preferences\n          </Button>\n          <Button type=\"button\" variant=\"outline\" onClick={() => reset(form)}>\n            Reset\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}