{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-1",
  "title": "Card Form",
  "description": "Card Form for Payment.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "input",
    "input-group",
    "label"
  ],
  "files": [
    {
      "path": "registry/intents/billing/payment/payment-1.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { CreditCard, Lock } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from '@/components/ui/input-group'\nimport { Label } from '@/components/ui/label'\n\nexport function Payment1() {\n  const [number, setNumber] = useState('')\n\n  const formatNumber = (raw: string) =>\n    raw\n      .replace(/\\D/g, '')\n      .slice(0, 16)\n      .replace(/(.{4})/g, '$1 ')\n      .trim()\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Payment details</CardTitle>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-4\">\n        <div className=\"flex flex-col gap-2\">\n          <Label htmlFor=\"cf-name\">Name on card</Label>\n          <Input\n            id=\"cf-name\"\n            placeholder=\"Ada Lovelace\"\n            autoComplete=\"cc-name\"\n          />\n        </div>\n        <div className=\"flex flex-col gap-2\">\n          <Label htmlFor=\"cf-number\">Card number</Label>\n          <InputGroup>\n            <InputGroupAddon>\n              <CreditCard />\n            </InputGroupAddon>\n            <InputGroupInput\n              id=\"cf-number\"\n              inputMode=\"numeric\"\n              placeholder=\"4242 4242 4242 4242\"\n              value={number}\n              onChange={(e) => setNumber(formatNumber(e.target.value))}\n            />\n          </InputGroup>\n        </div>\n        <div className=\"flex gap-3\">\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <Label htmlFor=\"cf-exp\">Expiry</Label>\n            <Input id=\"cf-exp\" placeholder=\"MM / YY\" inputMode=\"numeric\" />\n          </div>\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <Label htmlFor=\"cf-cvc\">CVC</Label>\n            <Input id=\"cf-cvc\" placeholder=\"123\" inputMode=\"numeric\" />\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"flex flex-col gap-3\">\n        <Button className=\"w-full\">Save card</Button>\n        <p className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n          <Lock className=\"size-3\" />\n          Encrypted and processed securely.\n        </p>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/payment/payment-1.tsx"
    }
  ],
  "type": "registry:block"
}