{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "conversion-funnel",
  "title": "Conversion Funnel",
  "type": "registry:block",
  "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": [
    "analytics",
    "dashboard"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/conversion-funnel/conversion-funnel.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n// Side-effect import: registers <uip-smooth-funnel> for standalone use\n// (consumers who install only this block still get a working chart).\nimport '../../components/charts/smooth-funnel'\n\nexport interface FunnelStage {\n  name: string\n  value: number\n}\n\n/**\n * <uip-conversion-funnel> — the registry ConversionFunnel block as a web component.\n *\n * Class strings are React's verbatim; the funnel SVG is <uip-smooth-funnel>\n * (React's SmoothFunnel). `data` / `height` / `colors` are properties\n * (attribute: false for the arrays — set them from JS, like the demo does);\n * `hide-retention` is a boolean attribute. React's `format` function prop has\n * no HTML equivalent, so counts render with toLocaleString. No events.\n */\nexport class UipConversionFunnel extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    data: { attribute: false },\n    height: {},\n    colors: { attribute: false },\n    hideRetention: { type: Boolean, attribute: 'hide-retention' },\n  }\n\n  data: FunnelStage[] = []\n  height: number | string = 180\n  colors?: string[]\n  hideRetention = false\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'conversion-funnel')\n  }\n\n  private retention(i: number): number | null {\n    if (i === 0) return null\n    const prev = this.data[i - 1]?.value ?? 1\n    return Math.round(((this.data[i]?.value ?? 0) / prev) * 100)\n  }\n\n  render() {\n    const stages = this.data ?? []\n    return html`\n      <div data-uipkge=\"\" data-slot=\"conversion-funnel\" class=${cn('space-y-2')}>\n        <div class=\"grid px-2 text-center\" style=\"grid-template-columns:repeat(${stages.length}, minmax(0, 1fr))\">\n          ${stages.map(\n            (stage) => html`<div class=\"text-foreground text-base font-bold tabular-nums\">\n              ${(stage.value ?? 0).toLocaleString()}\n            </div>`,\n          )}\n        </div>\n\n        <uip-smooth-funnel\n          .data=${stages.map((s) => ({ name: s.name, value: s.value }))}\n          height=${this.height}\n          .colors=${this.colors ??\n          ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)']}\n        ></uip-smooth-funnel>\n\n        <div class=\"grid px-2 text-center\" style=\"grid-template-columns:repeat(${stages.length}, minmax(0, 1fr))\">\n          ${stages.map(\n            (stage, i) => html`<div class=\"space-y-0.5\">\n              <p class=\"text-muted-foreground text-xs\">${stage.name}</p>\n              ${!this.hideRetention && this.retention(i) !== null\n                ? html`<p class=\"text-info text-xs font-semibold tabular-nums\">→ ${this.retention(i)}% retained</p>`\n                : html``}\n            </div>`,\n          )}\n        </div>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-conversion-funnel') || customElements.define('uip-conversion-funnel', UipConversionFunnel)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-conversion-funnel': UipConversionFunnel\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/conversion-funnel/conversion-funnel.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/smooth-funnel.json"
  ]
}