{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "conversion-funnel",
  "title": "Conversion Funnel",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/conversion-funnel/ConversionFunnel.tsx",
      "content": "/**\n * Conversion funnel: SmoothFunnel chart with count strip above and\n * stage-name + retention-from-previous strip below.\n *\n * Works for any drop-off flow with 3-6 stages: hiring (applied ->\n * hired), e-commerce (sessions -> purchases), onboarding (signed up\n * -> activated), etc. Reads as a single horizontal \"flow\":\n *\n *   72K        38.2K       16.8K       5.6K\n *   ╔══════╗╔════════╗╔══════════╗╔══════════╗\n *   ║ 100% ║║  53%   ║║   23%    ║║    8%    ║\n *   ╚══════╝╚════════╝╚══════════╝╚══════════╝\n *   Views      Cart        Checkout    Purchase\n *              -> 53%       -> 44%      -> 33%\n *\n * The middle pill (inside each band) shows the share OF THE TOP\n * stage (100%, 53%, 23%, ...). The bottom retention number shows the\n * stage-to-stage conversion -- usually the more actionable signal.\n */\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { SmoothFunnel } from '@/components/ui/charts/smooth-funnel'\n\ninterface Stage {\n  name: string\n  value: number\n}\n\nexport interface ConversionFunnelProps {\n  data: Stage[]\n  /** SmoothFunnel container height. Defaults to 180. */\n  height?: number | string\n  /** Override colour palette. Defaults to the registry's chart-1..N\n   *  OKLCH tokens via CSS variables (so light/dark + theme-customizer\n   *  flips ripple through without any JS). Pass a literal hex array to\n   *  override. */\n  colors?: string[]\n  /** Compact number formatter for the count strip (default toLocaleString). */\n  format?: (n: number) => string\n  /** Hide the retention-from-previous footer on each non-first stage. */\n  hideRetention?: boolean\n  className?: string\n}\n\nconst DEFAULT_PALETTE = [\n  'var(--chart-1)',\n  'var(--chart-2)',\n  'var(--chart-3)',\n  'var(--chart-4)',\n  'var(--chart-5)',\n  'var(--chart-1)',\n]\n\nexport function ConversionFunnel({\n  data,\n  height = 180,\n  colors,\n  format,\n  hideRetention = false,\n  className,\n}: ConversionFunnelProps) {\n  const palette = colors ?? DEFAULT_PALETTE\n  const fmt = (v: number) => (format ? format(v) : v.toLocaleString())\n  const retention = (i: number) => {\n    if (i === 0) return null\n    const prev = data[i - 1]?.value ?? 1\n    return Math.round((data[i]!.value / prev) * 100)\n  }\n\n  return (\n    <div data-uipkge=\"\" data-slot=\"conversion-funnel\" className={cn('space-y-2', className)}>\n      {/* Top: per-stage count */}\n      <div\n        className=\"grid px-2 text-center\"\n        style={{ gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))` }}\n      >\n        {data.map((stage) => (\n          <div key={`top-${stage.name}`} className=\"text-foreground text-base font-bold tabular-nums\">\n            {fmt(stage.value)}\n          </div>\n        ))}\n      </div>\n\n      {/* Funnel SVG */}\n      <SmoothFunnel data={data} height={height} colors={palette} />\n\n      {/* Bottom: stage name + retention from previous */}\n      <div\n        className=\"grid px-2 text-center\"\n        style={{ gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))` }}\n      >\n        {data.map((stage, i) => (\n          <div key={`bot-${stage.name}`} className=\"space-y-0.5\">\n            <p className=\"text-muted-foreground text-xs\">{stage.name}</p>\n            {!hideRetention && retention(i) !== null && (\n              <p className=\"text-info text-[10px] font-semibold tabular-nums\">→ {retention(i)}% retained</p>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/ConversionFunnel.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/smooth-funnel.json"
  ],
  "description": "Horizontal conversion funnel with count strip above the SmoothFunnel chart and a stage-name + retention-from-previous footer below. Works for hiring (applied → hired), e-commerce (sessions → purchases), onboarding (signed up → activated). 3-6 stages. Theme-aware via OKLCH chart tokens.",
  "categories": [
    "dashboard",
    "analytics"
  ]
}