{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-signup",
  "type": "registry:ui",
  "title": "Newsletter signup",
  "description": "An inline email capture form with a required email field and a Subscribe button that stack on mobile and sit side by side on wider screens. Tailwind styled.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/newsletter-signup.tsx",
      "type": "registry:ui",
      "target": "components/ui/newsletter-signup.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { inputVariants } from \"@/components/ui/input\"\n\nfunction NewsletterSignup({\n  onSubmit,\n  className,\n}: {\n  onSubmit?: (email: string) => void\n  className?: string\n}) {\n  const [email, setEmail] = React.useState(\"\")\n  return (\n    <form\n      data-slot=\"newsletter-signup\"\n      className={cn(\"flex w-full max-w-md flex-col gap-2 sm:flex-row\", className)}\n      onSubmit={(e) => {\n        e.preventDefault()\n        onSubmit?.(email)\n      }}\n    >\n      <input\n        type=\"email\"\n        required\n        aria-label=\"Email\"\n        placeholder=\"you@company.com\"\n        value={email}\n        onChange={(e) => setEmail(e.target.value)}\n        className={cn(inputVariants({ size: \"default\" }), \"flex-1\")}\n      />\n      <Button type=\"submit\">Subscribe</Button>\n    </form>\n  )\n}\nexport { NewsletterSignup }\n"
    }
  ]
}