{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "offer-card",
  "title": "Offer Card",
  "description": "A tinted glass card carrying a provider and two or more peer terms. Five tints, column and row layouts.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json",
    "http://localhost:5173/r/glass-surface.json",
    "http://localhost:5173/r/icon-ring.json"
  ],
  "files": [
    {
      "path": "src/components/ui/offer-card.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GlassSurface, type Corner } from \"@/components/ui/glass-surface\"\nimport { IconRing } from \"@/components/ui/icon-ring\"\n\n/**\n * The Credit Offers rail: a tinted glass card carrying a provider and two or\n * three terms. Unlike MetricCard there is no single headline number — the\n * terms are peers, and the layout has to say so.\n */\nconst TINTS = {\n  slate: \"radial-gradient(120% 100% at 20% 0%, #5b6f86 0%, #2f3a47 70%)\",\n  moss: \"radial-gradient(120% 100% at 20% 0%, #6d7a3a 0%, #333a1c 72%)\",\n  clay: \"radial-gradient(120% 100% at 20% 0%, #8a5f4a 0%, #3d2a22 72%)\",\n  plum: \"radial-gradient(120% 100% at 20% 0%, #6d4a63 0%, #2f2030 72%)\",\n  ash: \"radial-gradient(120% 100% at 20% 0%, #6e7076 0%, #303236 72%)\",\n} as const\n\nexport type OfferTint = keyof typeof TINTS\n\nconst offer = cva(\"flex flex-col text-white\", {\n  variants: {\n    density: {\n      compact: \"gap-4 p-4\",\n      normal: \"gap-6 p-5\",\n      roomy: \"gap-8 p-6\",\n    },\n    /** How the terms sit relative to each other. */\n    layout: {\n      /** Side-by-side columns — the reference. */\n      columns: \"\",\n      /** One term per row, label left and value right. */\n      rows: \"\",\n    },\n  },\n  defaultVariants: { density: \"normal\", layout: \"columns\" },\n})\n\nexport interface OfferTerm {\n  label: React.ReactNode\n  value: React.ReactNode\n  unit?: React.ReactNode\n}\n\nexport interface OfferCardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof offer> {\n  provider: React.ReactNode\n  /** Second line under the provider — a product name or a qualifier. */\n  detail?: React.ReactNode\n  icon?: React.ReactNode\n  terms: OfferTerm[]\n  tint?: OfferTint | (string & {})\n  corner?: Corner | (string & {})\n  action?: React.ReactNode\n  interactive?: boolean\n}\n\nexport function OfferCard({\n  provider,\n  detail,\n  icon,\n  terms,\n  tint = \"slate\",\n  corner = \"lg\",\n  action,\n  interactive = true,\n  layout,\n  density,\n  className,\n  ...props\n}: OfferCardProps) {\n  return (\n    <GlassSurface\n      data-slot=\"offer-card\"\n      material=\"glass\"\n      corner={corner}\n      interactive={interactive}\n      tint={tint in TINTS ? TINTS[tint as OfferTint] : tint}\n      className={cn(offer({ density, layout }), className)}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex items-start gap-3\">\n          {icon ? (\n            <IconRing variant=\"glass\" size=\"md\" className=\"text-white\">\n              {icon}\n            </IconRing>\n          ) : null}\n          <span className=\"grid gap-0.5 pt-0.5 leading-tight\">\n            <span className=\"font-display text-[17px]\">{provider}</span>\n            {detail ? <span className=\"text-[12px] opacity-60\">{detail}</span> : null}\n          </span>\n        </div>\n        {action}\n      </div>\n\n      <dl\n        className={cn(\n          \"mt-auto\",\n          layout === \"rows\" ? \"grid gap-2\" : \"grid grid-flow-col auto-cols-fr gap-4\",\n        )}\n      >\n        {terms.map((term, i) => (\n          <div\n            key={i}\n            className={cn(\n              layout === \"rows\"\n                ? \"flex items-baseline justify-between gap-3 border-b border-white/10 pb-2 last:border-0\"\n                : \"grid gap-1.5\",\n            )}\n          >\n            <dt className=\"font-mono text-[11px] tracking-[0.1em] uppercase opacity-55\">\n              {term.label}\n            </dt>\n            <dd\n              data-lq-numeric\n              className=\"flex items-baseline gap-1 font-display text-[2rem] leading-none tracking-[-0.03em]\"\n            >\n              {term.value}\n              {term.unit ? (\n                <span className=\"font-sans text-[0.4em] font-normal opacity-60\">{term.unit}</span>\n              ) : null}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    </GlassSurface>\n  )\n}\n\nexport { TINTS as OFFER_TINTS }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}