{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-credit-card",
  "title": "Credit Card",
  "description": "Card visual com gradient e brand — adaptado Kibo.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@lema-ds/skeleton",
    "@lema-ds/ui-i18n",
    "@lema-ds/ds-locale-provider"
  ],
  "files": [
    {
      "path": "components/ds/ds-credit-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { UI_I18N, type UILocale } from \"@/lib/ui-i18n\"\nimport { useUILocale } from \"@/components/ui/ds-locale-provider\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\n// ── Types ──────────────────────────────────────────────────────────────────\n\nexport interface CreditCardProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof creditCardVariants> {\n  number?: string\n  holder?: string\n  expiry?: string\n  cvc?: string\n  brand?: \"visa\" | \"mastercard\" | \"amex\"\n  locale?: UILocale\n  loading?: boolean\n}\n\n// ── Variants ───────────────────────────────────────────────────────────────\n\nexport const creditCardVariants = cva(\n  \"relative flex max-w-full flex-col justify-between overflow-hidden rounded-2xl border p-6 shadow-lg\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-primary/20 bg-gradient-to-br from-primary to-primary/70 text-primary-foreground\",\n        dark: \"border-border bg-gradient-to-br from-card to-muted text-card-foreground\",\n        light:\n          \"border-border bg-gradient-to-br from-card to-background text-foreground\",\n      },\n      size: {\n        sm: \"aspect-[1.6] h-40 h-auto w-64 w-full max-w-full sm:w-64\",\n        md: \"aspect-[1.6] h-48 h-auto w-80 w-full max-w-full sm:w-80\",\n        lg: \"aspect-[1.6] h-56 h-auto w-96 w-full max-w-full sm:w-96\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  }\n)\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nexport function CreditCard({\n  className,\n  number = \"4242 4242 4242 4242\",\n  holder = \"Alex Silva\",\n  expiry = \"12/28\",\n  cvc = \"***\",\n  brand = \"visa\",\n  variant = \"default\",\n  size = \"md\",\n  locale: localeProp,\n  loading = false,\n  ...props\n}: CreditCardProps) {\n  const locale = useUILocale(localeProp)\n  void cvc\n  if (loading) {\n    return (\n      <Skeleton\n        className={cn(creditCardVariants({ variant, size }), className)}\n        {...props}\n      />\n    )\n  }\n\n  const t = UI_I18N[locale].creditCard\n\n  return (\n    <div\n      data-slot=\"credit-card\"\n      className={cn(creditCardVariants({ variant, size }), className)}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-xs font-medium tracking-widest uppercase opacity-70\">\n          {brand}\n        </span>\n        <span\n          // decorative — semantic token approximating white translucent on primary\n          className=\"size-6 rounded-full bg-primary-foreground/20\"\n          aria-hidden=\"true\"\n        />\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <span\n          className=\"text-lg tracking-widest tabular-nums\"\n          aria-label={t.cardNumber}\n        >\n          {number}\n        </span>\n        <div className=\"flex items-end justify-between gap-4\">\n          <span className=\"flex flex-col\">\n            <span className=\"text-xs tracking-widest uppercase opacity-60\">\n              {t.cardHolder}\n            </span>\n            <span className=\"truncate text-xs font-medium\">{holder}</span>\n          </span>\n          <span className=\"flex flex-col text-right\">\n            <span className=\"text-xs tracking-widest uppercase opacity-60\">\n              {t.expiry}\n            </span>\n            <span className=\"text-xs font-medium tabular-nums\">{expiry}</span>\n          </span>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}