{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "funnel-steps",
  "type": "registry:ui",
  "title": "Funnel steps",
  "description": "A conversion funnel drawn as labeled horizontal bars scaled to the largest step, with formatted counts per stage. Suited to signup and checkout analytics.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/funnel-steps.tsx",
      "type": "registry:ui",
      "target": "components/ui/funnel-steps.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** A conversion funnel as stacked bars: each step's bar is sized against the first step's count. */\ntype Step = { label: string; value: number }\n\nconst SAMPLE_STEPS: Step[] = [\n  { label: \"Visited pricing\", value: 12840 },\n  { label: \"Started trial\", value: 3210 },\n  { label: \"Sent first invoice\", value: 1880 },\n  { label: \"Connected bank\", value: 1120 },\n  { label: \"Upgraded to Growth\", value: 464 },\n]\n\ntype FunnelStepsProps = {\n  /** Funnel stages, top to bottom. Defaults to a Lumen signup funnel. */\n  steps?: Step[]\n  className?: string\n}\n\nfunction FunnelSteps({ steps = SAMPLE_STEPS, className }: FunnelStepsProps) {\n  const max = Math.max(...steps.map((s) => s.value), 1)\n  return (\n    <ol data-slot=\"funnel-steps\" className={cn(\"w-full max-w-sm space-y-2\", className)}>\n      {steps.map((s) => (\n        <li key={s.label} className=\"space-y-1\">\n          <div className=\"flex justify-between text-xs\">\n            <span className=\"font-medium text-fg\">{s.label}</span>\n            <span className=\"tabular-nums text-fg-muted\">{s.value.toLocaleString(\"en-US\")}</span>\n          </div>\n          <div className=\"h-2 overflow-hidden rounded-full bg-sunken\">\n            <div className=\"h-full rounded-full bg-accent\" style={{ width: `${(s.value / max) * 100}%` }} />\n          </div>\n        </li>\n      ))}\n    </ol>\n  )\n}\nexport { FunnelSteps }\nexport type { FunnelStepsProps, Step as FunnelStep }\n"
    }
  ]
}