{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stage-bars-card",
  "title": "Stage Bars",
  "description": "Funnel-as-rows: horizontal bars sized to the first stage, with percents.",
  "registryDependencies": [
    "https://components.exe.xyz/r/chart-card.json"
  ],
  "files": [
    {
      "path": "src/components/charts/stage-bars-card.tsx",
      "content": "import type { ReactNode } from \"react\"\n\nimport {\n  ChartCard,\n  ChartTiles,\n  chartColor,\n  formatNumber,\n  useActiveRange,\n} from \"@/components/charts/chart-card\"\n\nexport type StageBar = {\n  label: string\n  value: number\n  color?: string\n  icon?: ReactNode\n}\n\nconst DEFAULT_STAGES: StageBar[] = [\n  { label: \"Visits\", value: 4820 },\n  { label: \"Sign-up\", value: 3278 },\n  { label: \"Active\", value: 2024 },\n  { label: \"Pro\", value: 1157 },\n  { label: \"Team\", value: 530 },\n  { label: \"Enterprise\", value: 193 },\n]\n\nexport function StageBarsCard({\n  title = \"Pipeline\",\n  mono = false,\n  showIcons = true,\n  stages,\n  headline,\n  delta = 2.4,\n  range,\n  ranges,\n}: {\n  title?: string\n  mono?: boolean\n  showIcons?: boolean\n  stages?: StageBar[]\n  headline?: number\n  delta?: number\n  range?: string\n  ranges?: {\n    id: string\n    label: string\n    stages: StageBar[]\n    delta?: number\n    headline?: number\n  }[]\n}) {\n  const { id, setId, active } = useActiveRange(ranges, range)\n  const plotStages = active?.stages ?? stages ?? DEFAULT_STAGES\n  const first = plotStages[0]?.value ?? 1\n  const plotHeadline = active?.headline ?? headline ?? first\n  const plotDelta = active?.delta ?? delta\n  const summary = `${title} ${formatNumber(plotHeadline)}. ${plotStages\n    .map((stage) => {\n      const pct = first === 0 ? 0 : Math.round((stage.value / first) * 100)\n      return `${stage.label} ${formatNumber(stage.value)} ${pct}%`\n    })\n    .join(\", \")}`\n\n  return (\n    <ChartCard\n      title={title}\n      headline={plotHeadline}\n      delta={plotDelta}\n      period={ranges ? undefined : \"Last 30 days\"}\n      ranges={ranges}\n      range={id}\n      onRangeChange={setId}\n      summary={summary}\n      tiles={\n        <ChartTiles\n          items={plotStages.slice(0, 6).map((stage, index) => ({\n            id: stage.label,\n            label: stage.label,\n            value: `${first === 0 ? 0 : Math.round((stage.value / first) * 100)}%`,\n            color: mono ? \"var(--chart-5)\" : chartColor(index, stage.color),\n          }))}\n        />\n      }\n    >\n      <ul\n        className=\"grid grid-cols-[max-content_minmax(0,1fr)_auto_auto] items-center gap-x-3 gap-y-2.5\"\n        aria-label={summary}\n      >\n        {plotStages.map((stage, index) => {\n          const pct = first === 0 ? 0 : (stage.value / first) * 100\n          const color = mono ? \"var(--chart-5)\" : chartColor(index, stage.color)\n          return (\n            <li key={stage.label} className=\"contents\">\n              <span className=\"text-sm text-muted-foreground\">\n                {stage.label}\n              </span>\n              <div className=\"h-7 rounded-[2px] bg-muted\" aria-hidden>\n                <div\n                  className=\"flex h-full items-center gap-1.5 rounded-[2px] px-1.5\"\n                  style={{\n                    width: `${Math.max(pct, 3)}%`,\n                    background: `color-mix(in srgb, ${color} 55%, var(--card))`,\n                  }}\n                >\n                  {showIcons && stage.icon && pct >= 14 ? (\n                    <span className=\"size-3.5 text-foreground [&_svg]:size-3.5\">\n                      {stage.icon}\n                    </span>\n                  ) : null}\n                </div>\n              </div>\n              <span className=\"font-mono text-[11px] tabular-nums\">\n                {formatNumber(stage.value)}\n              </span>\n              <span className=\"font-mono text-[11px] text-muted-foreground tabular-nums\">\n                {Math.round(pct)}%\n              </span>\n            </li>\n          )\n        })}\n      </ul>\n    </ChartCard>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}