{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-band-sparklines",
  "title": "Stats — Band with Sparklines",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/stats-band-sparklines/StatsBandSparklines.tsx",
      "content": "'use client'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Separator } from '@/components/ui/separator'\n\nconst metrics = [\n  {\n    value: '4.2',\n    unit: 'days',\n    label: 'Median time to close',\n    period: 'last 12 months',\n    series: [9.4, 9.1, 8.7, 8.2, 7.4, 6.8, 6.1, 5.6, 5.1, 4.8, 4.4, 4.2],\n  },\n  {\n    value: '61',\n    unit: '/mo',\n    label: 'Ad-hoc data requests',\n    period: 'last 12 months',\n    series: [212, 198, 184, 160, 141, 122, 108, 96, 84, 74, 66, 61],\n  },\n  {\n    value: '340',\n    unit: '',\n    label: 'Certified metrics live',\n    period: 'since launch',\n    series: [0, 12, 38, 74, 112, 148, 181, 214, 248, 281, 312, 340],\n  },\n  {\n    value: '99.98',\n    unit: '%',\n    label: 'Query availability',\n    period: 'rolling 90 days',\n    series: [99.9, 99.95, 99.92, 99.97, 99.99, 99.96, 99.98, 99.99, 99.97, 99.98, 99.99, 99.98],\n  },\n]\n\n// Normalise a series into a 100x28 viewBox so every sparkline shares a baseline.\nfunction points(series: number[]) {\n  const min = Math.min(...series)\n  const max = Math.max(...series)\n  const span = max - min || 1\n  return series\n    .map((value, index) => {\n      const x = (index / (series.length - 1)) * 100\n      const y = 26 - ((value - min) / span) * 24\n      return `${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(' ')\n}\n\nexport function StatsBandSparklines() {\n  return (\n    <section data-slot=\"stats-band-sparklines\" className=\"border-border bg-card border-y\">\n      <div className=\"mx-auto max-w-6xl px-6 py-12\">\n        <Badge variant=\"secondary\">Measured</Badge>\n\n        <dl className=\"mt-6 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-0\">\n          {metrics.map((metric, index) => (\n            <div key={metric.label} className=\"relative lg:px-6 lg:first:pl-0\">\n              <dd className=\"font-display text-3xl font-bold tracking-tight\">\n                {metric.value}\n                <span className=\"text-muted-foreground text-lg font-semibold\">{metric.unit}</span>\n              </dd>\n              <dt className=\"mt-1 text-sm font-medium\">{metric.label}</dt>\n\n              <svg\n                className=\"text-primary/70 mt-3 h-7 w-full\"\n                viewBox=\"0 0 100 28\"\n                preserveAspectRatio=\"none\"\n                aria-hidden=\"true\"\n              >\n                <polyline points={points(metric.series)} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n              </svg>\n\n              <p className=\"text-muted-foreground mt-1 font-mono text-xs\">{metric.period}</p>\n\n              {index < metrics.length - 1 && (\n                <Separator orientation=\"vertical\" className=\"absolute top-0 right-0 hidden h-full lg:block\" />\n              )}\n            </div>\n          ))}\n        </dl>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/StatsBandSparklines.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Metric band pairing each headline figure with an inline sparkline and its period, so a number arrives with the shape of the trend behind it.",
  "categories": [
    "marketing"
  ]
}