{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-card",
  "title": "Payment card",
  "description": "A plastic payment card at real proportions. Use it on its own, as a radio in a picker, or inside a Wallet.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/payment-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cn } from \"cn\"\n\ntype PaymentCardTone = \"sapphire\" | \"gold\" | \"graphite\"\n\ntype PaymentCardProps = useRender.ComponentProps<\"div\"> & {\n  tone?: PaymentCardTone\n}\n\n/**\n * A plastic payment card. Works on its own, in a list or picker (pass\n * `render={<Radio.Root value=\"…\" />}`), or inside a Wallet.\n */\nfunction PaymentCard({ className, render, tone = \"graphite\", ...props }: PaymentCardProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps<\"div\">(\n      {\n        \"data-slot\": \"payment-card\",\n        \"data-tone\": tone,\n        className: cn(\n          \"bevel-plastic relative flex aspect-[85.6/53.98] w-full items-start gap-2 overflow-hidden rounded-(--bevel-radius-md) px-3 pt-1 text-(--payment-card-foreground) outline-none select-none\",\n          \"focus-visible:ring-2 focus-visible:ring-(--payment-card-foreground)/80\",\n          \"data-disabled:cursor-not-allowed data-disabled:brightness-75 data-disabled:saturate-50\",\n          \"forced-colors:border forced-colors:border-[CanvasText]\",\n          className\n        ),\n      } as React.ComponentProps<\"div\">,\n      props\n    ),\n  })\n}\n\nfunction PaymentCardBrand({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"payment-card-brand\"\n      className={cn(\n        \"inline-flex items-center gap-1 text-(length:--bevel-fine) leading-4 font-semibold tracking-(--bevel-tracking-print) uppercase [&_svg]:h-3 [&_svg]:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaymentCardNumber({\n  last4,\n  className,\n  ...props\n}: { last4: string } & Omit<React.ComponentProps<\"span\">, \"children\">) {\n  return (\n    <span\n      data-slot=\"payment-card-number\"\n      className={cn(\"ms-auto font-mono text-(length:--bevel-fine) leading-4 tabular-nums\", className)}\n      {...props}\n    >\n      <span aria-hidden>•••• </span>\n      <span className=\"sr-only\">ending in </span>\n      {last4}\n    </span>\n  )\n}\n\n/** The contact chip. Decorative. */\nfunction PaymentCardChip({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"payment-card-chip\"\n      aria-hidden\n      className={cn(\n        \"bevel-metal absolute top-[38%] left-[9%] aspect-[4/3] w-[13%] rounded-(--bevel-radius-xs) [--bevel-material:var(--payment-card-chip)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { PaymentCard, PaymentCardBrand, PaymentCardNumber, PaymentCardChip }\nexport type { PaymentCardProps, PaymentCardTone }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--payment-card-sapphire": "oklch(0.55 0.14 258)",
      "--payment-card-sapphire-foreground": "oklch(0.98 0.01 258)",
      "--payment-card-gold": "oklch(0.8 0.11 86)",
      "--payment-card-gold-foreground": "oklch(0.28 0.04 70)",
      "--payment-card-graphite": "oklch(0.27 0.015 260)",
      "--payment-card-graphite-foreground": "oklch(0.93 0.005 260)",
      "--payment-card-chip": "oklch(0.8 0.09 85)"
    },
    "[data-slot=\"payment-card\"][data-tone=\"sapphire\"]": {
      "--bevel-material": "var(--payment-card-sapphire)",
      "--payment-card-foreground": "var(--payment-card-sapphire-foreground)"
    },
    "[data-slot=\"payment-card\"][data-tone=\"gold\"]": {
      "--bevel-material": "var(--payment-card-gold)",
      "--payment-card-foreground": "var(--payment-card-gold-foreground)"
    },
    "[data-slot=\"payment-card\"][data-tone=\"graphite\"]": {
      "--bevel-material": "var(--payment-card-graphite)",
      "--payment-card-foreground": "var(--payment-card-graphite-foreground)"
    }
  },
  "categories": [
    "money"
  ],
  "type": "registry:ui"
}