{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-band",
  "title": "Stats band",
  "description": "A marketing band of headline statistics separated by vertical dividers on a card background.",
  "registryDependencies": [
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/stats-band.tsx",
      "content": "import { Separator } from '@/components/ui/separator'\n\nconst stats = [\n  { value: '56', label: 'Components' },\n  { value: '40+', label: 'Patterns' },\n  { value: '2', label: 'Themes, light & dusk' },\n  { value: 'AA', label: 'WCAG 2.1 target' },\n]\n\n/** A marketing band of headline statistics separated by vertical dividers on a card background. */\nexport function StatsBand() {\n  return (\n    <section className=\"mx-auto w-full max-w-[880px] rounded-xl bg-card px-8 py-10 ring-1 ring-foreground/10\">\n      <div className=\"flex flex-col items-center gap-2 text-center\">\n        <span className=\"text-xs font-medium tracking-eyebrow uppercase text-ink-muted\">\n          By the numbers\n        </span>\n        <h2 className=\"font-heading text-2xl text-foreground\">A system that keeps its promises</h2>\n      </div>\n      <div className=\"mt-8 flex items-stretch justify-between gap-6 max-sm:flex-col max-sm:items-center\">\n        {stats.map((s, i) => (\n          <div key={s.label} className=\"flex flex-1 items-center gap-6 max-sm:w-full max-sm:flex-col max-sm:gap-2\">\n            {i > 0 && <Separator orientation=\"vertical\" className=\"max-sm:hidden\" />}\n            <div className=\"flex flex-1 flex-col items-center gap-1 text-center\">\n              <span className=\"font-heading text-3xl leading-none text-accent-pigment-text\">{s.value}</span>\n              <span className=\"text-sm text-muted-foreground\">{s.label}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/stats-band.tsx"
    }
  ],
  "meta": {
    "intent": [
      "marketing"
    ],
    "use_when": "You need a marketing band of headline statistics separated by dividers.",
    "not_for": "each number needs its own card with a period-over-period delta — this pattern is a single flat band with no per-item chrome or comparison → stat-cards; you're describing capabilities, not reporting numbers → feature-section"
  },
  "docs": "A marketing band of headline statistics separated by vertical dividers on a card background. Do: Color headline numbers from the accent's TEXT cut (--accent-pigment-text), so they follow the page's data-accent and still clear WCAG contrast on every ground. Don't: Use --accent-pigment for text. That is the decorative cut: on a Dawn card it is 2.9:1 for moss (the default accent) and 2.1:1 for gold, both under the 3:1 large-text minimum. It is also what --link and --ring already avoid. And never hardcode a fixed pigment (e.g. --terracotta) — that breaks the moment a consumer sets a different accent. Do: Pair every headline number with its own visible label directly beneath it (e.g. \"Components\"), as every stat in this band does. Don't: Ship a bare number with no label — a viewer has no way to tell what it counts. Use stat-cards when each number needs its own card with a period-over-period delta — this pattern is a single flat band with no per-item chrome or comparison. Use feature-section when you're describing capabilities, not reporting numbers.",
  "categories": [
    "marketing"
  ],
  "type": "registry:block"
}