{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-formisch-array",
  "dependencies": [
    "@formisch/react",
    "valibot"
  ],
  "registryDependencies": [
    "field",
    "input",
    "input-group",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/form-formisch-array.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  FieldArray,\n  Form,\n  Field as FormischField,\n  insert,\n  remove,\n  reset,\n  useForm,\n} from \"@formisch/react\"\nimport type { SubmitHandler } from \"@formisch/react\"\nimport { XIcon } from \"lucide-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  FieldLegend,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst FormSchema = v.object({\n  emails: v.pipe(\n    v.array(\n      v.object({\n        address: v.pipe(\n          v.string(),\n          v.nonEmpty(\"Enter an email address.\"),\n          v.email(\"Enter a valid email address.\")\n        ),\n      })\n    ),\n    v.minLength(1, \"Add at least one email address.\"),\n    v.maxLength(5, \"You can add up to 5 email addresses.\")\n  ),\n})\n\nexport default function FormFormischArray() {\n  const form = useForm({\n    schema: FormSchema,\n    initialInput: {\n      emails: [{ address: \"\" }, { address: \"\" }],\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 className=\"border-b\">\n        <CardTitle>Contact Emails</CardTitle>\n        <CardDescription>Manage your contact email addresses.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Form of={form} id=\"form-formisch-array\" onSubmit={handleSubmit}>\n          <FieldArray of={form} path={[\"emails\"]}>\n            {(fieldArray) => (\n              <FieldSet className=\"gap-4\">\n                <FieldLegend variant=\"label\">Email Addresses</FieldLegend>\n                <FieldDescription>\n                  Add up to 5 email addresses where we can contact you.\n                </FieldDescription>\n                <FieldGroup className=\"gap-4\">\n                  {fieldArray.items.map((item, index) => (\n                    <FormischField\n                      key={item}\n                      of={form}\n                      path={[\"emails\", index, \"address\"]}\n                    >\n                      {(field) => (\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={field.errors !== null}\n                        >\n                          <FieldContent>\n                            <InputGroup>\n                              <InputGroupInput\n                                {...field.props}\n                                id={`form-formisch-array-email-${index}`}\n                                value={field.input ?? \"\"}\n                                aria-invalid={field.errors !== null}\n                                placeholder=\"name@example.com\"\n                                type=\"email\"\n                                autoComplete=\"email\"\n                              />\n                              {fieldArray.items.length > 1 && (\n                                <InputGroupAddon align=\"inline-end\">\n                                  <InputGroupButton\n                                    type=\"button\"\n                                    variant=\"ghost\"\n                                    size=\"icon-xs\"\n                                    onClick={() =>\n                                      remove(form, {\n                                        path: [\"emails\"],\n                                        at: index,\n                                      })\n                                    }\n                                    aria-label={`Remove email ${index + 1}`}\n                                  >\n                                    <XIcon />\n                                  </InputGroupButton>\n                                </InputGroupAddon>\n                              )}\n                            </InputGroup>\n                            {field.errors && (\n                              <FieldError\n                                errors={field.errors.map((message) => ({\n                                  message,\n                                }))}\n                              />\n                            )}\n                          </FieldContent>\n                        </Field>\n                      )}\n                    </FormischField>\n                  ))}\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    onClick={() =>\n                      insert(form, {\n                        path: [\"emails\"],\n                        initialInput: { address: \"\" },\n                      })\n                    }\n                    disabled={fieldArray.items.length >= 5}\n                  >\n                    Add Email Address\n                  </Button>\n                </FieldGroup>\n                {fieldArray.errors && (\n                  <FieldError\n                    errors={fieldArray.errors.map((message) => ({ message }))}\n                  />\n                )}\n              </FieldSet>\n            )}\n          </FieldArray>\n        </Form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => reset(form)}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-formisch-array\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}