{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "credit-card",
  "type": "registry:ui",
  "title": "Credit Card Dialog",
  "description": "A responsive credit card form dialog with payment input validation - drawer on mobile, modal on desktop.",
  "dependencies": [
    "lucide-react",
    "react-payment-inputs"
  ],
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "label",
    "https://revola.sameerjs.com/r/revola.json"
  ],
  "files": [
    {
      "path": "registry/revola/examples/origin-ui/forms/payment/credit-card.tsx",
      "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { usePaymentInputs } from \"react-payment-inputs\";\nimport images, { type CardImages } from \"react-payment-inputs/images\";\n\nimport { CreditCardIcon, WalletIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n} from \"@/components/ui/revola\";\n\nexport default function CreditCardDialog() {\n  const id = useId();\n  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } = usePaymentInputs();\n\n  return (\n    <ResponsiveDialog>\n      <ResponsiveDialogTrigger asChild>\n        <Button variant=\"outline\" className=\"h-12 rounded-full px-6 capitalize\">\n          Update Card\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent className=\"sm:max-w-sm\">\n        <div className=\"space-y-4 overflow-y-auto p-6 max-sm:pt-4\">\n          <div className=\"flex flex-col gap-2\">\n            <div>\n              <div className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\" aria-hidden=\"true\">\n                <WalletIcon className=\"opacity-80\" size={16} />\n              </div>\n            </div>\n            <ResponsiveDialogHeader className=\"text-left\">\n              <ResponsiveDialogTitle>Update your card</ResponsiveDialogTitle>\n              <ResponsiveDialogDescription>Your new card will replace your current card.</ResponsiveDialogDescription>\n            </ResponsiveDialogHeader>\n          </div>\n\n          <form className=\"space-y-5\">\n            <div className=\"space-y-4\">\n              <div className=\"space-y-2\">\n                <Label htmlFor={`name-${id}`}>Name on card</Label>\n                <Input\n                  required\n                  type=\"text\"\n                  id={`name-${id}`}\n                  placeholder=\"John Doe\"\n                  className=\"[&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]\"\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <Label htmlFor={`number-${id}`}>Card Number</Label>\n                <div className=\"relative\">\n                  <Input\n                    {...getCardNumberProps()}\n                    id={`number-${id}`}\n                    className=\"peer pe-9 [direction:inherit] [&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]\"\n                    placeholder=\"4242 4242 4242 4242\"\n                  />\n                  <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                    {meta.cardType ? (\n                      <svg\n                        className=\"overflow-hidden rounded-sm\"\n                        {...getCardImageProps({ images: images as unknown as CardImages })}\n                        width={20}\n                      />\n                    ) : (\n                      <CreditCardIcon size={16} aria-hidden=\"true\" />\n                    )}\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex gap-4\">\n                <div className=\"flex-1 space-y-2\">\n                  <Label htmlFor={`expiry-${id}`}>Expiry date</Label>\n                  <Input\n                    {...getExpiryDateProps()}\n                    id={`expiry-${id}`}\n                    className=\"[direction:inherit] [&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]\"\n                    placeholder=\"06/28\"\n                  />\n                </div>\n                <div className=\"flex-1 space-y-2\">\n                  <Label htmlFor={`cvc-${id}`}>CVC</Label>\n                  <Input\n                    {...getCVCProps()}\n                    id={`cvc-${id}`}\n                    className=\"[direction:inherit] [&:-webkit-autofill]:shadow-[0_0_0_30px_theme(colors.input)_inset]\"\n                    placeholder=\"123\"\n                  />\n                </div>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Checkbox id={`primary-${id}`} />\n              <Label htmlFor={`primary-${id}`} className=\"font-normal text-muted-foreground\">\n                Set as default payment method\n              </Label>\n            </div>\n            <ResponsiveDialogFooter>\n              <Button type=\"button\" className=\"w-full\">\n                Update card\n              </Button>\n            </ResponsiveDialogFooter>\n          </form>\n        </div>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}