{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stage-bars","type":"registry:component","title":"Stage bars","description":"A funnel you can read at a glance: every stage as a bar against the first, the drop-off between them, and widths that ease when the period changes.","author":"Hairline UI","dependencies":[],"registryDependencies":["https://hairlineui.com/r/number-roll.json"],"files":[{"path":"registry/stage-bars.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { NumberRoll } from \"./number-roll\";\n\n/* ─────────────────────────────────────────────────────────\n * STAGE BARS: a funnel you can read at a glance\n *\n * arrive the first time it's on screen the bars grow from\n * the left one after another and every count and\n * share rolls up from zero\n * period This week, Last week, 30 days: the pill is thrown\n * to the choice, every bar eases to its new width and\n * every figure rolls; the drop-off between stages\n * rolls with them\n * focus point at a stage and the others dim, leaving it and\n * the drop-off into it to read\n *\n * One hue that steps lighter down the funnel, every value\n * labelled on its row, and the whole funnel in a table for\n * screen readers.\n * ───────────────────────────────────────────────────────── */\n\nexport interface Stage {\n id: string;\n label: string;\n}\n\nexport interface StagePeriod {\n id: string;\n /** In the switch, e.g. \"This week\". */\n label: string;\n /** One count per stage, in the same order. */\n values: number[];\n}\n\nexport interface StageBarsProps extends Omit, \"onChange\"> {\n title?: string;\n stages: Stage[];\n periods: StagePeriod[];\n value?: string;\n defaultValue?: string;\n onValueChange?: (id: string) => void;\n format?: Intl.NumberFormatOptions;\n locales?: string | string[];\n}\n\nconst EASE = \"cubic-bezier(0.16,1,0.3,1)\";\nconst THROW = \"cubic-bezier(0.34,1.36,0.64,1)\";\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst HUE = \"var(--chart-1, var(--primary))\";\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(\n subscribeReduced,\n () => window.matchMedia(reducedQuery).matches,\n () => false,\n );\n\nexport function StageBars({\n title = \"Funnel\",\n stages,\n periods,\n value,\n defaultValue,\n onValueChange,\n format,\n locales,\n className = \"\",\n ...props\n}: StageBarsProps) {\n const reduced = useReducedMotion();\n const id = React.useId();\n const [own, setOwn] = React.useState(defaultValue ?? periods[0]?.id);\n const periodId = value ?? own;\n const period = periods.find((p) => p.id === periodId) ?? periods[0];\n const values = period?.values ?? [];\n const first = values[0] || 1;\n\n const [visible, setVisible] = React.useState(false);\n const [focused, setFocused] = React.useState(null);\n const [pill, setPill] = React.useState({ left: 0, width: 0, ready: false });\n const rootRef = React.useRef(null);\n const chipRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n React.useEffect(() => {\n const el = rootRef.current;\n if (!el) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setVisible(true);\n observer.disconnect();\n }\n },\n { rootMargin: \"0px 0px -10% 0px\" },\n );\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n React.useLayoutEffect(() => {\n const el = chipRefs.current[periods.findIndex((p) => p.id === periodId)];\n if (!el) return;\n setPill((p) => (p.left === el.offsetLeft && p.width === el.offsetWidth ? p : { left: el.offsetLeft, width: el.offsetWidth, ready: p.width > 0 }));\n }, [periodId, periods]);\n\n const choose = (next: string) => {\n if (next === periodId) return;\n if (value === undefined) setOwn(next);\n onValueChange?.(next);\n };\n\n const fmt = (v: number) => new Intl.NumberFormat(locales, format).format(v);\n const overall = values.length > 1 ? (values[values.length - 1] ?? 0) / first : 1;\n\n return (\n
\n
\n {/* The title and its control share a row; the figures sit under both. */}\n
\n

{title}

\n {periods.length > 1 && (\n
\n \n {periods.map((p, i) => {\n const selected = p.id === periodId;\n return (\n {\n chipRefs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={selected}\n tabIndex={selected ? 0 : -1}\n onClick={() => choose(p.id)}\n onKeyDown={(e) => {\n if (e.key !== \"ArrowRight\" && e.key !== \"ArrowLeft\") return;\n e.preventDefault();\n const next = (i + (e.key === \"ArrowRight\" ? 1 : -1) + periods.length) % periods.length;\n choose(periods[next].id);\n chipRefs.current[next]?.focus();\n }}\n className={`relative h-6 whitespace-nowrap rounded-full px-2.5 text-[11.5px] font-medium @md:h-7 @md:px-3 @md:text-[12.5px] transition-colors duration-300 ${FOCUS} ${\n selected ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\"\n }`}\n >\n {p.label}\n \n );\n })}\n
\n )}\n
\n

\n \n made it all the way\n

\n\n
    setFocused(null)}>\n {stages.map((s, i) => {\n const v = values[i] ?? 0;\n const share = v / first;\n const step = i > 0 && values[i - 1] ? v / values[i - 1] : 1;\n const dim = focused !== null && focused !== i;\n // One hue, a step lighter for each stage further down.\n const strength = 1 - (stages.length > 1 ? (i / (stages.length - 1)) * 0.5 : 0);\n return (\n
  1. \n {i > 0 && (\n \n \n \n \n \n carried on\n

    \n )}\n
    setFocused(i)} className={`transition-opacity duration-300 ${dim ? \"opacity-40\" : \"\"}`}>\n
    \n {s.label}\n \n \n \n \n \n \n \n \n
    \n
    \n \n
    \n
    \n
    2. \n );\n })}\n
\n\n \n \n \n \n \n \n \n \n \n \n \n {stages.map((s, i) => (\n \n \n \n \n \n \n ))}\n \n
\n {title}, {period?.label}: {Math.round(overall * 1000) / 10}% made it from {stages[0]?.label.toLowerCase()} to{\" \"}\n {stages[stages.length - 1]?.label.toLowerCase()}\n
StageCountShare of the first stageShare of the stage before
{s.label}{fmt(values[i] ?? 0)}{Math.round(((values[i] ?? 0) / first) * 1000) / 10}%{i > 0 && values[i - 1] ? `${Math.round(((values[i] ?? 0) / values[i - 1]) * 1000) / 10}%` : \"–\"}
\n
\n
\n );\n}\n"}],"css":{},"docs":"Docs and live preview: https://hairlineui.com/ui/stage-bars"}