{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "coupon-input",
  "type": "registry:ui",
  "title": "Coupon input",
  "description": "Promo code field with an Apply button and inline success or error messages. The demo validation is easy to replace with your own check in React.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/coupon-input.tsx",
      "type": "registry:ui",
      "target": "components/ui/coupon-input.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { cn } from \"@/lib/utils\"\n\nfunction CouponInput({ className }: { className?: string }) {\n  const [code, setCode] = React.useState(\"\")\n  const [ok, setOk] = React.useState<null | boolean>(null)\n  return (\n    <div data-slot=\"coupon-input\" className={cn(\"space-y-2\", className)}>\n      <div className=\"flex gap-2\">\n        <Input\n          value={code}\n          onChange={(e) => { setCode(e.target.value); setOk(null) }}\n          placeholder=\"Coupon code\"\n          aria-label=\"Coupon code\"\n        />\n        <Button type=\"button\" variant=\"outline\" onClick={() => setOk(code.trim().toUpperCase() === \"HAIRLINE\")}>\n          Apply\n        </Button>\n      </div>\n      {ok === true ? <p className=\"text-xs text-success\">Coupon applied: 20% off the Pro plan</p> : null}\n      {ok === false ? <p className=\"text-xs text-danger\">Invalid code</p> : null}\n    </div>\n  )\n}\nexport { CouponInput }\n"
    }
  ]
}