{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "add-card-form",
  "type": "registry:ui",
  "title": "Add card form",
  "description": "Compact payment form for card number, expiry and CVC with correct autocomplete hints, numeric input mode and a full width save button. Ready for your processor.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/form-field.json",
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/add-card-form.tsx",
      "type": "registry:ui",
      "target": "components/ui/add-card-form.tsx",
      "content": "\"use client\"\nimport { FormField } from \"@/components/ui/form-field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nfunction AddCardForm({ className, onSubmit }: { className?: string; onSubmit?: () => void }) {\n  return (\n    <form\n      data-slot=\"add-card-form\"\n      className={cn(\"space-y-3\", className)}\n      onSubmit={(e) => {\n        e.preventDefault()\n        onSubmit?.()\n      }}\n    >\n      <FormField id=\"card-number\" label=\"Card number\">\n        <Input id=\"card-number\" inputMode=\"numeric\" placeholder=\"4242 4242 4242 4242\" autoComplete=\"cc-number\" />\n      </FormField>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField id=\"card-exp\" label=\"Expiry\">\n          <Input id=\"card-exp\" placeholder=\"MM/YY\" autoComplete=\"cc-exp\" />\n        </FormField>\n        <FormField id=\"card-cvc\" label=\"CVC\">\n          <Input id=\"card-cvc\" placeholder=\"123\" autoComplete=\"cc-csc\" />\n        </FormField>\n      </div>\n      <Button type=\"submit\" className=\"w-full\">\n        Save card\n      </Button>\n    </form>\n  )\n}\nexport { AddCardForm }\n"
    }
  ]
}