{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "funnel",
  "type": "registry:ui",
  "title": "Funnel (MIAN)",
  "description": "Conversion through the stages of a funnel, visits to signups to paid, with the rate between steps.",
  "categories": [
    "data display",
    "funnel",
    "conversion",
    "pipeline",
    "sales"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/funnel.css",
      "type": "registry:file",
      "target": "mian/components/funnel.css",
      "content": ".mn-funnel { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }\n.mn-funnel > li { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) 4.5rem; gap: .75rem; align-items: center; font-size: var(--mn-text-sm); }\n.mn-funnel-bar { display: flex; align-items: center; justify-content: center; width: var(--_v); min-width: 3.5rem; height: 2.25rem; margin-inline: auto; border-radius: min(6px, var(--mn-radius-field)); background: var(--_c, var(--mn-primary)); color: var(--_cf, var(--mn-primary-fg)); font-weight: 650; font-variant-numeric: tabular-nums; }\n.mn-funnel > li:nth-child(2) .mn-funnel-bar { opacity: .88; } .mn-funnel > li:nth-child(3) .mn-funnel-bar { opacity: .78; } .mn-funnel > li:nth-child(n+4) .mn-funnel-bar { opacity: .7; }\n.mn-funnel-rate { color: var(--mn-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; text-align: end; }\n@media (max-width: 30rem) { .mn-funnel > li { grid-template-columns: minmax(0, 1fr) 3.5rem; } .mn-funnel-bar { grid-column: 1 / -1; grid-row: 2; margin-inline: 0; } }"
    },
    {
      "path": "mian/examples/funnel.html",
      "type": "registry:file",
      "target": "mian/examples/funnel.html",
      "content": "<!-- Trial funnel, September -->\n<ol class=\"mn-funnel\" style=\"max-width:40rem\">\n  <li><span>Visited pricing</span><span class=\"mn-funnel-bar\" style=\"--_v:100%\">18,420</span><span class=\"mn-funnel-rate\">—</span></li>\n  <li><span>Started trial</span><span class=\"mn-funnel-bar\" style=\"--_v:62%\">2,210</span><span class=\"mn-funnel-rate\">12.0%</span></li>\n  <li><span>Connected a bank</span><span class=\"mn-funnel-bar\" style=\"--_v:40%\">1,412</span><span class=\"mn-funnel-rate\">63.9%</span></li>\n  <li><span>Paid</span><span class=\"mn-funnel-bar mn-success\" style=\"--_v:22%\">388</span><span class=\"mn-funnel-rate\">27.5%</span></li>\n</ol>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/funnel",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-funnel",
        "mn-funnel-bar",
        "mn-funnel-rate"
      ],
      "accessibility": [
        "Each stage is text, label, number and rate, so the funnel reads correctly without the bars.",
        "Explain what the rate is relative to (the previous step, or the first)."
      ],
      "intents": [
        "conversion funnel",
        "sales funnel",
        "drop-off",
        "signup funnel"
      ]
    }
  }
}