{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-method-card",
  "type": "registry:ui",
  "title": "Payment method card",
  "description": "A saved card row showing the card brand, last four digits and expiry date in monospace, with an Edit button. Fits the payment methods area of billing.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/payment-method-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/payment-method-card.tsx",
      "content": "\"use client\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nfunction PaymentMethodCard({\n  brand = \"Visa\",\n  last4 = \"4242\",\n  exp = \"09/28\",\n  className,\n}: {\n  brand?: string\n  last4?: string\n  exp?: string\n  className?: string\n}) {\n  return (\n    <div data-slot=\"payment-method-card\" className={cn(\"flex items-center justify-between gap-3 rounded-xl border border-border bg-surface p-4 shadow-highlight\", className)}>\n      <div>\n        <p className=\"text-sm font-medium text-fg\">{brand} ···· {last4}</p>\n        <p className=\"mt-0.5 font-mono text-xs text-fg-muted\">Exp {exp}</p>\n      </div>\n      <Button size=\"sm\" variant=\"outline\">Edit</Button>\n    </div>\n  )\n}\nexport { PaymentMethodCard }\n"
    }
  ]
}