{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "example-form",
  "type": "registry:component",
  "title": "Example Form",
  "description": "A contact form with Zod validation.",
  "dependencies": [
    "@base-ui/react",
    "zod"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/example-form/example-form.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Card,\n  CardTitle,\n  CardHeader,\n  CardDescription,\n  CardContent,\n  CardFooter,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\nimport { z } from \"zod\"\n\nconst exampleFormSchema = z.object({\n  name: z.string().min(1),\n  email: z.string().email(),\n  message: z.string().min(1),\n})\n\nexport function ExampleForm() {\n  const [pending, setPending] = React.useState(false)\n  const [state, setState] = React.useState({\n    defaultValues: {\n      name: \"\",\n      email: \"\",\n      message: \"\",\n    },\n    success: false,\n    errors: {\n      name: \"\",\n      email: \"\",\n      message: \"\",\n    },\n  })\n\n  const handleSubmit = React.useCallback(\n    (e: React.FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      setPending(true)\n\n      const formData = new FormData(e.target as HTMLFormElement)\n      const data = Object.fromEntries(formData.entries())\n      const result = exampleFormSchema.safeParse(data)\n\n      if (!result.success) {\n        setState({\n          ...state,\n          errors: Object.fromEntries(\n            Object.entries(result.error.flatten().fieldErrors).map(\n              ([key, value]) => [key, value?.[0] ?? \"\"]\n            )\n          ) as Record<keyof typeof state.errors, string>,\n        })\n        setPending(false)\n        return\n      }\n\n      setPending(false)\n    },\n    [state]\n  )\n\n  return (\n    <form onSubmit={handleSubmit} className=\"w-full max-w-sm\">\n      <Card>\n        <CardHeader>\n          <CardTitle>How can we help?</CardTitle>\n          <CardDescription>\n            Need help with your project? We&apos;re here to assist you.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-6\">\n          <div\n            className=\"group/field grid gap-2\"\n            data-invalid={!!state.errors?.name}\n          >\n            <Label\n              htmlFor=\"name\"\n              className=\"group-data-[invalid=true]/field:text-destructive\"\n            >\n              Name <span aria-hidden=\"true\">*</span>\n            </Label>\n            <Input\n              id=\"name\"\n              name=\"name\"\n              placeholder=\"Lee Robinson\"\n              className=\"group-data-[invalid=true]/field:border-destructive focus-visible:group-data-[invalid=true]/field:ring-destructive\"\n              disabled={pending}\n              aria-invalid={!!state.errors?.name}\n              aria-errormessage=\"error-name\"\n              defaultValue={state.defaultValues.name}\n            />\n            {state.errors?.name && (\n              <p id=\"error-name\" className=\"text-destructive text-sm\">\n                {state.errors.name}\n              </p>\n            )}\n          </div>\n          <div\n            className=\"group/field grid gap-2\"\n            data-invalid={!!state.errors?.email}\n          >\n            <Label\n              htmlFor=\"email\"\n              className=\"group-data-[invalid=true]/field:text-destructive\"\n            >\n              Email <span aria-hidden=\"true\">*</span>\n            </Label>\n            <Input\n              id=\"email\"\n              name=\"email\"\n              placeholder=\"leerob@acme.com\"\n              className=\"group-data-[invalid=true]/field:border-destructive focus-visible:group-data-[invalid=true]/field:ring-destructive\"\n              disabled={pending}\n              aria-invalid={!!state.errors?.email}\n              aria-errormessage=\"error-email\"\n              defaultValue={state.defaultValues.email}\n            />\n            {state.errors?.email && (\n              <p id=\"error-email\" className=\"text-destructive text-sm\">\n                {state.errors.email}\n              </p>\n            )}\n          </div>\n          <div\n            className=\"group/field grid gap-2\"\n            data-invalid={!!state.errors?.message}\n          >\n            <Label\n              htmlFor=\"message\"\n              className=\"group-data-[invalid=true]/field:text-destructive\"\n            >\n              Message <span aria-hidden=\"true\">*</span>\n            </Label>\n            <Textarea\n              id=\"message\"\n              name=\"message\"\n              placeholder=\"Type your message here...\"\n              className=\"group-data-[invalid=true]/field:border-destructive focus-visible:group-data-[invalid=true]/field:ring-destructive\"\n              disabled={pending}\n              aria-invalid={!!state.errors?.message}\n              aria-errormessage=\"error-message\"\n              defaultValue={state.defaultValues.message}\n            />\n            {state.errors?.message && (\n              <p id=\"error-message\" className=\"text-destructive text-sm\">\n                {state.errors.message}\n              </p>\n            )}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" size=\"sm\" disabled={pending}>\n            {pending ? \"Sending...\" : \"Send Message\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </form>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/ui/button.tsx",
      "content": "import * as React from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/input.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/label.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/textarea.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/card.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
      "type": "registry:ui"
    }
  ]
}