{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-band",
  "title": "Stats Band",
  "description": "The accent-on-navy metric treatment in three idioms: stat cards, a stat-plus-quote proof band, and an on-image overlay.",
  "dependencies": [
    "@untitledui/icons@^0.0.22"
  ],
  "registryDependencies": [
    "@nx-ui/grid-backdrop",
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/marketing/stats-band.tsx",
      "content": "import * as React from \"react\"\nimport { MessageTextSquare01 } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { GridBackdrop } from \"@/components/blocks/marketing/grid-backdrop\"\n\n/**\n * StatsBand — the accent-yellow-on-navy metric treatment, in three idioms:\n *   - `stat-cards` (default) — a grid of navy metric cards, each with a grid\n *     backdrop and a big accent stat,\n *   - `proof` — one large stat beside a quote, on a brand band,\n *   - `on-image` — glassy stat cards anchored over a hero image (pass `image`).\n *\n * `stats` drives all three; `proof` also takes `quote`; `on-image` takes `image`.\n */\n\nexport interface Stat {\n  value: string\n  label: string\n}\n\ninterface StatsBandProps {\n  stats: Stat[]\n  variant?: \"stat-cards\" | \"proof\" | \"on-image\"\n  /** The quote for the `proof` variant. */\n  quote?: { text: string; attribution?: string }\n  /** The background image node for the `on-image` variant. */\n  image?: React.ReactNode\n  className?: string\n}\n\nfunction StatsBand({\n  stats,\n  variant = \"stat-cards\",\n  quote,\n  image,\n  className,\n}: StatsBandProps) {\n  if (variant === \"on-image\") {\n    return (\n      <div\n        data-slot=\"stats-band\"\n        className={cn(\n          \"relative isolate aspect-[16/5] w-full overflow-hidden rounded-3xl bg-brand-600\",\n          className\n        )}\n      >\n        {image}\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 bg-gradient-to-r from-brand-600/90 via-brand-600/40 to-transparent\"\n        />\n        <dl className=\"absolute inset-x-0 bottom-0 flex flex-wrap gap-3 p-5 md:p-8\">\n          {stats.map((stat) => (\n            <div\n              key={stat.label}\n              className=\"rounded-xl bg-black/25 p-4 ring-1 ring-white/15 backdrop-blur-sm\"\n            >\n              <dd className=\"text-display-xs font-semibold text-accent-300 md:text-display-sm\">\n                {stat.value}\n              </dd>\n              <dt className=\"mt-1 text-sm text-white/70\">{stat.label}</dt>\n            </div>\n          ))}\n        </dl>\n      </div>\n    )\n  }\n\n  if (variant === \"proof\") {\n    const primary = stats[0]\n    return (\n      <div\n        data-slot=\"stats-band\"\n        className={cn(\n          \"relative isolate overflow-hidden rounded-3xl bg-brand-600 p-8 text-white md:p-12\",\n          className\n        )}\n      >\n        <GridBackdrop tone=\"brand\" mask=\"left\" />\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute -right-16 -top-16 size-72 rounded-full bg-accent-400/10 blur-3xl\"\n        />\n        <div className=\"relative grid items-center gap-8 md:grid-cols-[auto_1fr] md:gap-12\">\n          {primary ? (\n            <div className=\"flex flex-col gap-1\">\n              <span className=\"text-display-md font-semibold text-accent-300 md:text-display-lg\">\n                {primary.value}\n              </span>\n              <span className=\"text-md text-white/70\">{primary.label}</span>\n            </div>\n          ) : null}\n          {quote ? (\n            <figure className=\"flex flex-col gap-4\">\n              <MessageTextSquare01 className=\"size-8 text-accent-300\" />\n              <blockquote className=\"text-xl font-medium text-balance text-white md:text-display-xs md:leading-tight\">\n                “{quote.text}”\n              </blockquote>\n              {quote.attribution ? (\n                <figcaption className=\"text-sm text-white/60\">\n                  {quote.attribution}\n                </figcaption>\n              ) : null}\n            </figure>\n          ) : null}\n        </div>\n      </div>\n    )\n  }\n\n  // stat-cards\n  return (\n    <div\n      data-slot=\"stats-band\"\n      className={cn(\n        \"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\",\n        className\n      )}\n    >\n      {stats.map((stat) => (\n        <div\n          key={stat.label}\n          className=\"relative isolate overflow-hidden rounded-3xl bg-brand-600 p-7 text-white\"\n        >\n          <GridBackdrop tone=\"brand\" cellSize={32} mask=\"none\" className=\"opacity-[0.07]\" />\n          <div className=\"relative flex flex-col gap-1\">\n            <span className=\"text-display-sm font-semibold text-accent-300 md:text-display-md\">\n              {stat.value}\n            </span>\n            <span className=\"text-md text-white/70\">{stat.label}</span>\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport { StatsBand }\n",
      "type": "registry:component",
      "target": "components/blocks/marketing/stats-band.tsx"
    }
  ],
  "type": "registry:block"
}