@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/funnel-chart/funnel-chart.js

@@ -1,282 +1,198 @@
-import { jsx as c, jsxs as V } from "react/jsx-runtime";
-import * as N from "react";
-import { cva as fr } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { FunnelChart as dr, Funnel as mr, Cell as vr, LabelList as O } from "recharts";
-import { cn as hr } from "../../../lib/utils.js";
-import { resolveAnimation as pr, resolveLabelFillClass as R } from "../chart/chart-format.js";
-import { ChartContainer as br, ChartTooltip as Lr, ChartTooltipContent as Cr, ChartLegend as Ar, ChartLegendContent as Nr } from "../chart/chart.js";
-const _r = fr("", {
-  variants: {
-    lastShape: {
-      triangle: "",
-      rectangle: ""
-    }
-  },
-  defaultVariants: {
-    lastShape: "triangle"
-  }
-}), D = {
-  right: "right",
-  left: "left",
-  inside: "center"
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o } from "../chart/chart.js";
+import { resolveAnimation as s, resolveLabelFillClass as c } from "../chart/chart-format.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Cell as f, Funnel as ee, FunnelChart as te, LabelList as p } from "recharts";
+//#region src/components/ui/funnel-chart/funnel-chart.tsx
+var m = t("", {
+	variants: { lastShape: {
+		triangle: "",
+		rectangle: ""
+	} },
+	defaultVariants: { lastShape: "triangle" }
+}), h = {
+	right: "right",
+	left: "left",
+	inside: "center"
 };
-function Er(r) {
-  switch (r) {
-    case "right":
-      return "left";
-    case "left":
-      return "right";
-    case "inside":
-      return "right";
-  }
+function g(e) {
+	switch (e) {
+		case "right": return "left";
+		case "left": return "right";
+		case "inside": return "right";
+	}
 }
-const G = "__stageLabel", j = "__stageValueLabel", Tr = 45, $r = {
-  stroke: "var(--ui-border-on-surface-border-active)",
-  strokeWidth: 2
-}, W = 96, H = {
-  top: 8,
-  right: W,
-  bottom: 8,
-  left: 24
-}, Ir = "75%";
-function gr(r) {
-  return r.includes("-");
+var _ = "__stageLabel", v = "__stageValueLabel", ne = {
+	stroke: "var(--ui-border-on-surface-border-active)",
+	strokeWidth: 2
+}, y = 96, b = {
+	top: 8,
+	right: y,
+	bottom: 8,
+	left: 24
+}, x = "75%";
+function S(e) {
+	return e.includes("-");
 }
-function Fr(r) {
-  const { showLabels: e, labelPosition: t, labelFormat: o } = r;
-  return e && t === "right" && gr(o) ? Ir : void 0;
+function C(e) {
+	let { showLabels: t, labelPosition: n, labelFormat: r } = e;
+	return t && n === "right" && S(r) ? x : void 0;
 }
-function xr(r) {
-  const { showLabels: e, labelPosition: t, showValueLabels: o, valuePosition: u } = r;
-  return {
-    ...H,
-    left: (e ? t : void 0) === "left" || (o ? u : void 0) === "left" ? W : H.left
-  };
+function w(e) {
+	let { showLabels: t, labelPosition: n, showValueLabels: r, valuePosition: i } = e, a = t ? n : void 0, o = r ? i : void 0;
+	return {
+		...b,
+		left: a === "left" || o === "left" ? y : b.left
+	};
 }
-const Mr = (r) => {
-  const e = typeof r == "number" ? r : Number(r);
-  return Number.isFinite(e) ? `${(e * 100).toFixed(1)}%` : String(r);
+var T = (e) => {
+	let t = typeof e == "number" ? e : Number(e);
+	return Number.isFinite(t) ? `${(t * 100).toFixed(1)}%` : String(e);
 };
-function U(r) {
-  const {
-    name: e,
-    value: t,
-    base: o,
-    format: u,
-    formatter: n,
-    percentFormatter: m = Mr
-  } = r, v = n ? n(t) : String(t), h = typeof t == "number" ? t : Number(t), l = o > 0 && Number.isFinite(h) ? m(h / o) : "";
-  switch (u) {
-    case "name":
-      return e;
-    case "value":
-      return v;
-    case "percent":
-      return l;
-    case "name-value":
-      return `${e}: ${v}`;
-    case "name-percent":
-      return l ? `${e}: ${l}` : e;
-    case "value-percent":
-      return l ? `${v} (${l})` : v;
-  }
+function E(e) {
+	let { name: t, value: n, base: r, format: i, formatter: a, percentFormatter: o = T } = e, s = a ? a(n) : String(n), c = typeof n == "number" ? n : Number(n), l = r > 0 && Number.isFinite(c) ? o(c / r) : "";
+	switch (i) {
+		case "name": return t;
+		case "value": return s;
+		case "percent": return l;
+		case "name-value": return `${t}: ${s}`;
+		case "name-percent": return l ? `${t}: ${l}` : t;
+		case "value-percent": return l ? `${s} (${l})` : s;
+	}
 }
-function Pr(r, e, t) {
-  if (t <= 1) return r;
-  const o = 100 - (100 - Tr) * e / (t - 1);
-  return `color-mix(in oklab, ${r} ${o.toFixed(1)}%, var(--ui-background-surface-primary))`;
+function D(e, t, n) {
+	return n <= 1 ? e : `color-mix(in oklab, ${e} ${(100 - 55 * t / (n - 1)).toFixed(1)}%, var(--ui-background-surface-primary))`;
 }
-const kr = N.forwardRef(
-  ({
-    className: r,
-    config: e,
-    palette: t,
-    data: o,
-    dataKey: u,
-    nameKey: n,
-    lastShape: m = "triangle",
-    reversed: v = !1,
-    showLabels: h = !0,
-    labelFormat: l = "name",
-    labelPosition: L = "right",
-    showValueLabels: _ = !1,
-    valuePosition: Y,
-    labelFill: C,
-    labelFormatter: E,
-    percentFormatter: T,
-    showLegend: z = !1,
-    legendPos: $ = "bottom",
-    colorMode: I = "palette",
-    gradientColor: g,
-    stageSettings: a,
-    showActiveShape: X = !1,
-    stroke: q,
-    strokeWidth: F,
-    funnelWidth: w,
-    margin: y,
-    showTooltip: J = !0,
-    tooltipContent: Q,
-    animate: Z,
-    animationDuration: K,
-    animationBegin: rr,
-    animationEasing: er,
-    ...tr
-  }, nr) => {
-    const or = pr({
-      animate: Z,
-      animationDuration: K,
-      animationBegin: rr,
-      animationEasing: er
-    }), A = N.useMemo(() => {
-      var k;
-      const i = o.filter(
-        (f) => {
-          var b;
-          return !((b = a == null ? void 0 : a[String(f[n])]) != null && b.hidden);
-        }
-      ), s = i.length ? String(i[0][n]) : void 0, p = g ?? (s === void 0 ? void 0 : ((k = a == null ? void 0 : a[s]) == null ? void 0 : k.color) ?? `var(--color-${s})`), cr = i.reduce((f, b) => {
-        const d = Number(b[u]);
-        return Number.isFinite(d) && d > f ? d : f;
-      }, 0);
-      return i.map((f, b) => {
-        var B;
-        const d = String(f[n]), ur = ((B = a == null ? void 0 : a[d]) == null ? void 0 : B.color) ?? (I === "gradient" && p ? Pr(p, b, i.length) : `var(--color-${d})`), S = {
-          name: d,
-          value: f[u],
-          base: cr,
-          formatter: E,
-          percentFormatter: T
-        };
-        return {
-          ...f,
-          fill: ur,
-          [G]: U({
-            ...S,
-            format: l
-          }),
-          [j]: U({
-            ...S,
-            format: "value"
-          })
-        };
-      });
-    }, [
-      I,
-      o,
-      u,
-      g,
-      l,
-      E,
-      n,
-      T,
-      a
-    ]), ar = N.useMemo(() => {
-      const i = /* @__PURE__ */ new Set();
-      return A.flatMap((s) => {
-        const p = String(s[n]);
-        return i.has(p) ? [] : (i.add(p), [
-          {
-            value: p,
-            dataKey: n,
-            type: "rect",
-            color: String(s.fill),
-            payload: s
-          }
-        ]);
-      });
-    }, [n, A]), x = Y ?? Er(L), M = D[L], P = D[x], ir = {
-      ...xr({
-        showLabels: h,
-        labelPosition: L,
-        showValueLabels: _,
-        valuePosition: x
-      }),
-      ...y
-    }, lr = w ?? Fr({ showLabels: h, labelPosition: L, labelFormat: l }), sr = q ?? (F != null ? "var(--ui-border-on-surface-border)" : void 0);
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        ref: nr,
-        "data-last-shape": m,
-        className: hr(_r({ lastShape: m }), r),
-        ...tr,
-        children: /* @__PURE__ */ c(br, { config: e, palette: t, className: "size-full", children: /* @__PURE__ */ V(dr, { margin: ir, children: [
-          J && /* @__PURE__ */ c(
-            Lr,
-            {
-              content: Q ?? /* @__PURE__ */ c(Cr, { nameKey: n, hideLabel: !0 })
-            }
-          ),
-          z && /* @__PURE__ */ c(
-            Ar,
-            {
-              verticalAlign: $,
-              content: () => /* @__PURE__ */ c(
-                Nr,
-                {
-                  payload: ar,
-                  verticalAlign: $,
-                  nameKey: n
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ V(
-            mr,
-            {
-              dataKey: u,
-              nameKey: n,
-              data: A,
-              lastShapeType: m ?? "triangle",
-              reversed: v,
-              width: lr,
-              stroke: sr,
-              strokeWidth: F,
-              activeShape: X ? $r : void 0,
-              ...or,
-              children: [
-                A.map((i, s) => (
-                  // Keyed by index, not the name: two stages could share a nameKey
-                  // value, which would collide as a React key. Same-named stages
-                  // intentionally share a color/config entry via `--color-<name>`.
-                  /* @__PURE__ */ c(vr, { fill: String(i.fill) }, s)
-                )),
-                h && /* @__PURE__ */ c(
-                  O,
-                  {
-                    position: M,
-                    dataKey: G,
-                    className: C ? void 0 : R(M),
-                    fill: C,
-                    stroke: "none"
-                  }
-                ),
-                _ && /* @__PURE__ */ c(
-                  O,
-                  {
-                    position: P,
-                    dataKey: j,
-                    className: C ? void 0 : R(P),
-                    fill: C,
-                    stroke: "none"
-                  }
-                )
-              ]
-            }
-          )
-        ] }) })
-      }
-    );
-  }
-);
-kr.displayName = "FunnelChart";
-export {
-  kr as FunnelChart,
-  xr as funnelChartLabelMargin,
-  Fr as funnelChartLabelReserve,
-  U as funnelChartLabelText,
-  Er as funnelChartOppositeSide,
-  Mr as funnelChartPercent,
-  _r as funnelChartVariants
-};
-//# sourceMappingURL=funnel-chart.js.map
+var O = l.forwardRef(({ className: t, config: y, palette: b, data: x, dataKey: S, nameKey: T, lastShape: O = "triangle", reversed: k = !1, showLabels: A = !0, labelFormat: j = "name", labelPosition: M = "right", showValueLabels: N = !1, valuePosition: re, labelFill: P, labelFormatter: F, percentFormatter: I, showLegend: L = !1, legendPos: R = "bottom", colorMode: z = "palette", gradientColor: B, stageSettings: V, showActiveShape: H = !1, stroke: U, strokeWidth: W, funnelWidth: G, margin: K, showTooltip: q = !0, tooltipContent: J, animate: Y, animationDuration: ie, animationBegin: ae, animationEasing: oe, ...se }, ce) => {
+	let le = s({
+		animate: Y,
+		animationDuration: ie,
+		animationBegin: ae,
+		animationEasing: oe
+	}), X = l.useMemo(() => {
+		let e = x.filter((e) => !V?.[String(e[T])]?.hidden), t = e.length ? String(e[0][T]) : void 0, n = B ?? (t === void 0 ? void 0 : V?.[t]?.color ?? `var(--color-${t})`), r = e.reduce((e, t) => {
+			let n = Number(t[S]);
+			return Number.isFinite(n) && n > e ? n : e;
+		}, 0);
+		return e.map((t, i) => {
+			let a = String(t[T]), o = V?.[a]?.color ?? (z === "gradient" && n ? D(n, i, e.length) : `var(--color-${a})`), s = {
+				name: a,
+				value: t[S],
+				base: r,
+				formatter: F,
+				percentFormatter: I
+			};
+			return {
+				...t,
+				fill: o,
+				[_]: E({
+					...s,
+					format: j
+				}),
+				[v]: E({
+					...s,
+					format: "value"
+				})
+			};
+		});
+	}, [
+		z,
+		x,
+		S,
+		B,
+		j,
+		F,
+		T,
+		I,
+		V
+	]), ue = l.useMemo(() => {
+		let e = /* @__PURE__ */ new Set();
+		return X.flatMap((t) => {
+			let n = String(t[T]);
+			return e.has(n) ? [] : (e.add(n), [{
+				value: n,
+				dataKey: T,
+				type: "rect",
+				color: String(t.fill),
+				payload: t
+			}]);
+		});
+	}, [T, X]), Z = re ?? g(M), Q = h[M], $ = h[Z], de = {
+		...w({
+			showLabels: A,
+			labelPosition: M,
+			showValueLabels: N,
+			valuePosition: Z
+		}),
+		...K
+	}, fe = G ?? C({
+		showLabels: A,
+		labelPosition: M,
+		labelFormat: j
+	}), pe = U ?? (W == null ? void 0 : "var(--ui-border-on-surface-border)");
+	return /* @__PURE__ */ u("div", {
+		ref: ce,
+		"data-last-shape": O,
+		className: e(m({ lastShape: O }), t),
+		...se,
+		children: /* @__PURE__ */ u(n, {
+			config: y,
+			palette: b,
+			className: "size-full",
+			children: /* @__PURE__ */ d(te, {
+				margin: de,
+				children: [
+					q && /* @__PURE__ */ u(a, { content: J ?? /* @__PURE__ */ u(o, {
+						nameKey: T,
+						hideLabel: !0
+					}) }),
+					L && /* @__PURE__ */ u(r, {
+						verticalAlign: R,
+						content: () => /* @__PURE__ */ u(i, {
+							payload: ue,
+							verticalAlign: R,
+							nameKey: T
+						})
+					}),
+					/* @__PURE__ */ d(ee, {
+						dataKey: S,
+						nameKey: T,
+						data: X,
+						lastShapeType: O ?? "triangle",
+						reversed: k,
+						width: fe,
+						stroke: pe,
+						strokeWidth: W,
+						activeShape: H ? ne : void 0,
+						...le,
+						children: [
+							X.map((e, t) => /* @__PURE__ */ u(f, { fill: String(e.fill) }, t)),
+							A && /* @__PURE__ */ u(p, {
+								position: Q,
+								dataKey: _,
+								className: P ? void 0 : c(Q),
+								fill: P,
+								stroke: "none"
+							}),
+							N && /* @__PURE__ */ u(p, {
+								position: $,
+								dataKey: v,
+								className: P ? void 0 : c($),
+								fill: P,
+								stroke: "none"
+							})
+						]
+					})
+				]
+			})
+		})
+	});
+});
+O.displayName = "FunnelChart";
+//#endregion
+export { O as FunnelChart, w as funnelChartLabelMargin, C as funnelChartLabelReserve, E as funnelChartLabelText, g as funnelChartOppositeSide, T as funnelChartPercent, m as funnelChartVariants };
+
+//# sourceMappingURL=funnel-chart.js.map

package/dist/components/ui/funnel-chart/funnel-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"funnel-chart.js","sources":["../../../../src/components/ui/funnel-chart/funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Cell,\n  Funnel,\n  FunnelChart as RechartsFunnelChart,\n  LabelList,\n} from 'recharts';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveLabelFillClass,\n  type ChartAnimationProps,\n  type ChartConfig,\n  type ChartPalette,\n  type TickFormatter,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The single\n// CVA axis is the design's Funnel-chart variant set: `lastShape` (does the\n// funnel narrow to a point — `triangle` — or end flat — `rectangle`). The class\n// stays empty because recharts' SVG — not CSS — draws the funnel: `lastShape`\n// drives the `<Funnel>`'s `lastShapeType`. CVA is kept so the variant set is a\n// first-class, spec-conformant part of the API (matched against ui-spec's\n// api.yaml enums) and exposed via `VariantProps`; the resolved value is also\n// mirrored onto `data-last-shape`.\nconst funnelChartVariants = cva('', {\n  variants: {\n    lastShape: {\n      triangle: '',\n      rectangle: '',\n    },\n  },\n  defaultVariants: {\n    lastShape: 'triangle',\n  },\n});\n\n/** Where a stage's label sits relative to its segment. */\nexport type FunnelChartLabelPosition = 'right' | 'left' | 'inside';\n\n/** What a stage's label says. */\nexport type FunnelChartLabelFormat =\n  | 'name'\n  | 'value'\n  | 'percent'\n  | 'name-value'\n  | 'name-percent'\n  | 'value-percent';\n\n/** How the stages are coloured: one `config` entry each, or one shared ramp. */\nexport type FunnelChartColorMode = 'palette' | 'gradient';\n\n/** Override for a single stage, keyed by its `nameKey` value. */\nexport interface FunnelChartStageSettings {\n  /**\n   * Paint this stage with a colour of its own, overriding both `config` and\n   * `colorMode`. Reference an existing semantic `--ui-*` token.\n   */\n  color?: string;\n  /**\n   * Drop the stage from the funnel — and from the legend, labels and the\n   * conversion percentages, which are computed over the visible stages only.\n   */\n  hidden?: boolean;\n}\n\n// recharts' `LabelList` positions that a funnel trapezoid understands. `inside`\n// is recharts' `center`: a trapezoid has no `insideLeft`/`insideTop` anchor, so\n// centring is the only on-segment placement. `outside` is not offered — for a\n// funnel it would mean \"beside the segment\", which is what `right`/`left`\n// already are, and recharts' polar `outside` doesn't apply to a trapezoid.\nconst LABEL_POSITION: Record<\n  FunnelChartLabelPosition,\n  'right' | 'left' | 'center'\n> = {\n  right: 'right',\n  left: 'left',\n  inside: 'center',\n};\n\n/**\n * Where the value labels sit when the caller doesn't say: opposite the names, so\n * the two lists never stack on the same edge. `inside` names sit on the segments\n * and leave both edges free, so the values take the default `right`.\n *\n * A static default can't do this — `valuePosition=\"left\"` beside\n * `labelPosition=\"left\"` draws both lists at the same anchor, overprinting the\n * name with its own value.\n */\nexport function funnelChartOppositeSide(\n  labelPosition: FunnelChartLabelPosition\n): FunnelChartLabelPosition {\n  switch (labelPosition) {\n    case 'right':\n      return 'left';\n    case 'left':\n      return 'right';\n    case 'inside':\n      return 'right';\n  }\n}\n\n// Synthetic row fields the two label lists read. A `LabelList` resolves its text\n// from a `dataKey`, and its `formatter` only ever sees that one field's value —\n// so a composite label (\"Signups: 52.0%\") has to be composed onto the row before\n// recharts sees it, the same way `fill` already is.\nconst STAGE_LABEL_KEY = '__stageLabel';\nconst STAGE_VALUE_LABEL_KEY = '__stageValueLabel';\n\n// How far the gradient ramp fades by the last stage: the final segment is mixed\n// down to this share of the base colour, the first stays at full strength.\nconst GRADIENT_MIN_MIX = 45;\n\n// Hover highlight for `showActiveShape` — an outline rather than a fill change,\n// so the segment keeps the colour that ties it to its legend entry and label.\nconst ACTIVE_SHAPE = {\n  stroke: 'var(--ui-border-on-surface-border-active)',\n  strokeWidth: 2,\n} as const;\n\n// The inset reserved on whichever side a label list sits. It is *not* label\n// room — see `funnelChartLabelReserve` for why — but a label whose text can't\n// wrap (one long word) does overflow past the plot edge, and this is what keeps\n// that overflow inside the SVG.\nconst LABEL_SIDE_INSET = 96;\n\n// The plot-area margin a funnel has always been drawn with: the right side\n// reserved, the left not.\nconst BASE_MARGIN = {\n  top: 8,\n  right: LABEL_SIDE_INSET,\n  bottom: 8,\n  left: 24,\n};\n\n/**\n * Share of the plot area handed to the funnel when a composite label sits to its\n * right. The rest becomes real label room — see `funnelChartLabelReserve`.\n *\n * A percentage, not a pixel count: the plot area is responsive, and recharts\n * resolves `Funnel`'s `width` against it, so a ratio keeps the reserve\n * proportional at every chart size.\n */\nconst COMPOSITE_FUNNEL_WIDTH = '75%';\n\n/** A label format that pairs two fields, so its text is roughly twice as wide. */\nfunction isCompositeFormat(format: FunnelChartLabelFormat): boolean {\n  return format.includes('-');\n}\n\n/**\n * Reserve room for a composite label beside the funnel, by narrowing the\n * **funnel** rather than the plot area.\n *\n * recharts word-wraps a label against the space between its trapezoid's\n * mid-height edge and the *plot area* edge (`getCartesianPosition` clamps\n * `width` to `parentViewBox`, which `Funnel` sets to the plot box). A margin\n * shrinks the plot area and the funnel inside it in lockstep, so widening\n * `margin.right` moves the clamp edge *inward* and leaves a composite label\n * with less room, not more — the reserved strip sits outside `parentViewBox`\n * where the text can never reach it.\n *\n * `Funnel`'s `width` is the lever that works: it scales the funnel within the\n * plot area while `parentViewBox` stays put, and because recharts anchors the\n * funnel at the plot area's left edge (`offsetX = offset.left`), everything it\n * frees lands on the right. Narrowing the funnel to\n * `COMPOSITE_FUNNEL_WIDTH` turns ~35px of wrap width into ~140px on a 460px\n * chart.\n *\n * Returns `undefined` — i.e. leave the funnel at its full width — for every\n * other case, so a funnel with plain labels, no labels, or `inside` labels keeps\n * exactly the geometry it has always had.\n *\n * There is no equivalent lever for `labelPosition=\"left\"`: the widest trapezoid\n * always starts flush at the plot area's left edge, so a left-hand label is\n * bounded by how sharply the funnel narrows and narrowing it further only makes\n * that worse. Composite left-hand labels wrap; that's a recharts limitation, not\n * a tuning choice.\n *\n * A caller-supplied `funnelWidth` always wins — this is only the default.\n */\nexport function funnelChartLabelReserve(options: {\n  showLabels: boolean;\n  labelPosition: FunnelChartLabelPosition;\n  labelFormat: FunnelChartLabelFormat;\n}): string | undefined {\n  const { showLabels, labelPosition, labelFormat } = options;\n  return showLabels &&\n    labelPosition === 'right' &&\n    isCompositeFormat(labelFormat)\n    ? COMPOSITE_FUNNEL_WIDTH\n    : undefined;\n}\n\n/**\n * The plot-area margin. Reserves the left inset when a label list sits there, so\n * a left-hand label isn't clipped at the SVG edge; the right inset is always\n * reserved, since that is the geometry every existing funnel was drawn with.\n *\n * This is overflow protection, not label room — the wrap width comes from\n * `funnelChartLabelReserve`. A caller-supplied `margin` is merged over these\n * defaults per side, so `margin={{ right: 160 }}` keeps the default top, bottom\n * and left rather than collapsing them to zero.\n */\nexport function funnelChartLabelMargin(options: {\n  showLabels: boolean;\n  labelPosition: FunnelChartLabelPosition;\n  showValueLabels: boolean;\n  valuePosition: FunnelChartLabelPosition;\n}) {\n  const { showLabels, labelPosition, showValueLabels, valuePosition } = options;\n  const stageLabelAt = showLabels ? labelPosition : undefined;\n  const valueLabelAt = showValueLabels ? valuePosition : undefined;\n\n  return {\n    ...BASE_MARGIN,\n    left:\n      stageLabelAt === 'left' || valueLabelAt === 'left'\n        ? LABEL_SIDE_INSET\n        : BASE_MARGIN.left,\n  };\n}\n\n/**\n * Format a conversion share the way the default `percent` label reads it:\n * `0.52 → \"52.0%\"`. Exported so a `percentFormatter` can wrap or replace it.\n */\nexport const funnelChartPercent: TickFormatter = (value) => {\n  const n = typeof value === 'number' ? value : Number(value);\n  return Number.isFinite(n) ? `${(n * 100).toFixed(1)}%` : String(value);\n};\n\n/**\n * Compose one stage's label text.\n *\n * `base` is the value the percentage is measured against — the funnel's widest\n * stage, not the sum of every stage. A funnel's stages are nested subsets of\n * each other rather than parts of a whole, so their values don't add up to\n * anything meaningful; the share that reads as information is the conversion\n * from the top of the funnel. (A pie's `percent` is the other way round — there\n * a slice really is a share of the total.)\n *\n * Only the numeric part goes through `formatter`, so a label and its tooltip can\n * share one formatter; the share goes through `percentFormatter`, so a locale\n * that doesn't write a bare `%` can replace it. The percent formats degrade to\n * the name (or to the value) rather than printing `NaN%` when there is nothing\n * to divide by.\n */\nexport function funnelChartLabelText(options: {\n  name: string;\n  value: number | string;\n  base: number;\n  format: FunnelChartLabelFormat;\n  formatter?: TickFormatter;\n  percentFormatter?: TickFormatter;\n}): string {\n  const {\n    name,\n    value,\n    base,\n    format,\n    formatter,\n    percentFormatter = funnelChartPercent,\n  } = options;\n  const text = formatter ? formatter(value) : String(value);\n  const numeric = typeof value === 'number' ? value : Number(value);\n  const share =\n    base > 0 && Number.isFinite(numeric)\n      ? percentFormatter(numeric / base)\n      : '';\n\n  switch (format) {\n    case 'name':\n      return name;\n    case 'value':\n      return text;\n    case 'percent':\n      return share;\n    case 'name-value':\n      return `${name}: ${text}`;\n    case 'name-percent':\n      return share ? `${name}: ${share}` : name;\n    case 'value-percent':\n      return share ? `${text} (${share})` : text;\n  }\n}\n\n/**\n * Mix one stage of the gradient ramp. Mixing toward the surface (rather than\n * lowering alpha) keeps every stage opaque, so an on-segment label keeps its\n * contrast and the ramp reads the same over any card background.\n */\nfunction gradientStageFill(base: string, index: number, count: number): string {\n  if (count <= 1) return base;\n  const strength = 100 - ((100 - GRADIENT_MIN_MIX) * index) / (count - 1);\n  return `color-mix(in oklab, ${base} ${strength.toFixed(1)}%, var(--ui-background-surface-primary))`;\n}\n\nexport interface FunnelChartProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof funnelChartVariants>,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** Row-per-stage data. Each object holds the stage's `nameKey` label + its `dataKey` numeric value. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-stage map of `label` / `icon` / `tone`, keyed by the stage's `nameKey`\n   * value (imported from the shared `Chart` primitives). Turned into\n   * `--color-<name>` custom properties. Series take their colour from the\n   * container's `palette`; each entry maps a key to a `label` and an optional\n   * `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each stage (the funnel narrows as it drops). */\n  dataKey: string;\n  /**\n   * Label field that names each stage (drives the legend, tooltip, on-chart\n   * labels, and the `--color-<name>` lookup). Values should be unique per chart —\n   * stages sharing a name share one `config`/color entry.\n   */\n  nameKey: string;\n  /** Flip the funnel so it widens toward the bottom instead of narrowing. */\n  reversed?: boolean;\n  /** Render a label for each stage — see `labelFormat` and `labelPosition`. */\n  showLabels?: boolean;\n  /**\n   * What each stage's label says. `percent` is the stage's share of the widest\n   * stage — its conversion from the top of the funnel.\n   */\n  labelFormat?: FunnelChartLabelFormat;\n  /**\n   * Where each stage's label sits. Defaults to `right`, beside the segment.\n   * `inside` centres it on the segment, which only works while every stage is\n   * wide enough to hold the text — a funnel narrows, so its last stages often\n   * are not. Keep the text short there (`percent`) or leave the labels beside\n   * the funnel.\n   */\n  labelPosition?: FunnelChartLabelPosition;\n  /**\n   * Render a second label carrying the stage's value, so the name and the number\n   * can sit on opposite sides of the funnel.\n   */\n  showValueLabels?: boolean;\n  /**\n   * Where the value label sits. Defaults to the side opposite `labelPosition`,\n   * where every stage has room — so it follows the names rather than pinning\n   * itself to one edge. See `labelPosition` before choosing `inside`.\n   */\n  valuePosition?: FunnelChartLabelPosition;\n  /**\n   * Colour for both label lists, overriding the contrast-matched default (the\n   * on-surface token beside the funnel, the on-fill token on a segment). Pass a\n   * `--ui-*` token; only use it when the default doesn't work on your surface.\n   */\n  labelFill?: string;\n  /** Format the numeric part of a label — pass the same formatter used elsewhere. */\n  labelFormatter?: TickFormatter;\n  /**\n   * Format the conversion share behind the `percent` formats. Receives the share\n   * as a fraction (`0.52`); defaults to `funnelChartPercent` (`\"52.0%\"`). Pass\n   * `createTickFormatter({ style: 'percent', minimumFractionDigits: 1 }, locale)`\n   * for a locale that doesn't write a bare `%`.\n   */\n  percentFormatter?: TickFormatter;\n  /** Render the legend. Off by default: a funnel labels its stages on the chart. */\n  showLegend?: boolean;\n  /** Which edge the legend sits on. */\n  legendPos?: 'top' | 'bottom';\n  /**\n   * How the stages are coloured. `palette` (the default) gives each stage its own\n   * `config` colour; `gradient` ramps one hue — `gradientColor` — from the widest\n   * stage down to the narrowest.\n   */\n  colorMode?: FunnelChartColorMode;\n  /**\n   * The hue `colorMode=\"gradient\"` ramps. Defaults to the first visible stage's\n   * own colour — including a `stageSettings` colour set on it — so a palette\n   * config becomes a ramp without a second colour decision. Ignored when\n   * `colorMode` is `palette`.\n   */\n  gradientColor?: string;\n  /** Per-stage `color` / `hidden` overrides, keyed by the stage's `nameKey` value. */\n  stageSettings?: Record<string, FunnelChartStageSettings>;\n  /** Outline the hovered segment. */\n  showActiveShape?: boolean;\n  /**\n   * Segment border colour. Reference an existing semantic `--ui-*` token.\n   * Defaults to the border token when `strokeWidth` is set on its own.\n   */\n  stroke?: string;\n  /** Segment border width, in px. Implies a default `stroke` when given alone. */\n  strokeWidth?: number;\n  /**\n   * Funnel width — a number in px or a percentage of the plot area (`'70%'`).\n   * Defaults to the full plot area, except that a composite `labelFormat` beside\n   * the funnel narrows it to leave the label real room to wrap into.\n   */\n  funnelWidth?: number | string;\n  /**\n   * Plot-area margin, in px. Merged over the defaults per side, so passing one\n   * side keeps the others.\n   */\n  margin?: { top?: number; right?: number; bottom?: number; left?: number };\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-series rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst FunnelChart = React.forwardRef<HTMLDivElement, FunnelChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      dataKey,\n      nameKey,\n      lastShape = 'triangle',\n      reversed = false,\n      showLabels = true,\n      labelFormat = 'name',\n      labelPosition = 'right',\n      showValueLabels = false,\n      valuePosition,\n      labelFill,\n      labelFormatter,\n      percentFormatter,\n      showLegend = false,\n      legendPos = 'bottom',\n      colorMode = 'palette',\n      gradientColor,\n      stageSettings,\n      showActiveShape = false,\n      stroke,\n      strokeWidth,\n      funnelWidth,\n      margin,\n      showTooltip = true,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n\n    // Stamp each row with its `fill` and its label texts (the shadcn data-driven\n    // pattern). A Funnel's default fill is grey (#808080) and recharts doesn't\n    // carry a per-segment color on the tooltip/legend payload item, so putting the\n    // color on the data row is what lets a real hover resolve each segment's\n    // color. (The forced-open `defaultIndex` VR snapshot can still show a neutral\n    // indicator — it synthesizes the open state without a pointer hover.)\n    const seriesData = React.useMemo(() => {\n      const visible = data.filter(\n        (row) => !stageSettings?.[String(row[nameKey])]?.hidden\n      );\n      // The ramp's default hue is the first visible stage's own colour — its\n      // `stageSettings` override if it has one, otherwise the `--color-*`\n      // custom property that ChartStyle emits for this series. Reading\n      // the override matters because that stage paints with it, so ramping from\n      // the config colour would start the ramp on a hue nothing on screen shows.\n      const firstName = visible.length ? String(visible[0][nameKey]) : undefined;\n      const base =\n        gradientColor ??\n        (firstName === undefined\n          ? undefined\n          : (stageSettings?.[firstName]?.color ?? `var(--color-${firstName})`));\n      // The percentages are conversions from the funnel's widest stage, and\n      // recharts sizes the trapezoids off `Math.max` of the values — so the base\n      // is the largest visible value, not the first row. Taking the first row\n      // would read as a conversion above 100% whenever the data isn't sorted\n      // descending.\n      const conversionBase = visible.reduce((widest, row) => {\n        const value = Number(row[dataKey]);\n        return Number.isFinite(value) && value > widest ? value : widest;\n      }, 0);\n\n      return visible.map((row, index) => {\n        const name = String(row[nameKey]);\n        const override = stageSettings?.[name]?.color;\n        const fill =\n          override ??\n          (colorMode === 'gradient' && base\n            ? gradientStageFill(base, index, visible.length)\n            : `var(--color-${name})`);\n        const labelArgs = {\n          name,\n          value: row[dataKey],\n          base: conversionBase,\n          formatter: labelFormatter,\n          percentFormatter,\n        };\n\n        return {\n          ...row,\n          fill,\n          [STAGE_LABEL_KEY]: funnelChartLabelText({\n            ...labelArgs,\n            format: labelFormat,\n          }),\n          [STAGE_VALUE_LABEL_KEY]: funnelChartLabelText({\n            ...labelArgs,\n            format: 'value',\n          }),\n        } as Record<string, string | number>;\n      });\n    }, [\n      colorMode,\n      data,\n      dataKey,\n      gradientColor,\n      labelFormat,\n      labelFormatter,\n      nameKey,\n      percentFormatter,\n      stageSettings,\n    ]);\n\n    // recharts 3 builds the legend payload from the graphical item, and `Funnel`\n    // — unlike Bar/Line/Area/Pie/Radar/RadialBar/Scatter — never registers one,\n    // so a `<Legend>` inside a `FunnelChart` renders empty. The payload is\n    // synthesized from the visible stages instead and handed to the shared\n    // `ChartLegendContent`, which keeps the funnel on the same legend markers,\n    // labels and `config` lookup as every other chart. `payload` carries the row\n    // so each entry resolves its own `config` entry via `nameKey`.\n    //\n    // One entry per *distinct* stage name: same-named stages deliberately share a\n    // `--color-<name>`/`config` entry, so a second entry would repeat the first\n    // verbatim — and `ChartLegendContent` keys its entries on `value`, so it would\n    // also be a duplicate React key.\n    const legendPayload = React.useMemo<LegendPayload[]>(() => {\n      const seen = new Set<string>();\n      return seriesData.flatMap((row) => {\n        const value = String(row[nameKey]);\n        if (seen.has(value)) return [];\n        seen.add(value);\n        return [\n          {\n            value,\n            dataKey: nameKey,\n            type: 'rect' as const,\n            color: String(row.fill),\n            payload: row,\n          },\n        ];\n      });\n    }, [nameKey, seriesData]);\n\n    const resolvedValuePosition =\n      valuePosition ?? funnelChartOppositeSide(labelPosition);\n    const stagePosition = LABEL_POSITION[labelPosition];\n    const valueLabelPosition = LABEL_POSITION[resolvedValuePosition];\n    const plotMargin = {\n      ...funnelChartLabelMargin({\n        showLabels,\n        labelPosition,\n        showValueLabels,\n        valuePosition: resolvedValuePosition,\n      }),\n      ...margin,\n    };\n    // A caller-supplied `funnelWidth` wins; otherwise a composite label beside the\n    // funnel narrows it to leave itself room to wrap into.\n    const resolvedFunnelWidth =\n      funnelWidth ??\n      funnelChartLabelReserve({ showLabels, labelPosition, labelFormat });\n    // recharts defaults a Funnel's stroke to a hardcoded `#fff` that\n    // `ChartContainer` neutralizes, so a bare `strokeWidth` would widen an\n    // invisible border. Pair it with the border token instead.\n    const resolvedStroke =\n      stroke ??\n      (strokeWidth != null ? 'var(--ui-border-on-surface-border)' : undefined);\n\n    return (\n      <div\n        ref={ref}\n        data-last-shape={lastShape}\n        className={cn(funnelChartVariants({ lastShape }), className)}\n        {...props}\n      >\n        <ChartContainer config={config} palette={palette} className=\"size-full\">\n          <RechartsFunnelChart margin={plotMargin}>\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n            {showLegend && (\n              <ChartLegend\n                verticalAlign={legendPos}\n                content={() => (\n                  <ChartLegendContent\n                    payload={legendPayload}\n                    verticalAlign={legendPos}\n                    nameKey={nameKey}\n                  />\n                )}\n              />\n            )}\n            <Funnel\n              dataKey={dataKey}\n              nameKey={nameKey}\n              data={seriesData}\n              lastShapeType={lastShape ?? 'triangle'}\n              reversed={reversed}\n              width={resolvedFunnelWidth}\n              stroke={resolvedStroke}\n              strokeWidth={strokeWidth}\n              activeShape={showActiveShape ? ACTIVE_SHAPE : undefined}\n              {...animation}\n            >\n              {seriesData.map((entry, index) => (\n                // Keyed by index, not the name: two stages could share a nameKey\n                // value, which would collide as a React key. Same-named stages\n                // intentionally share a color/config entry via `--color-<name>`.\n                <Cell key={index} fill={String(entry.fill)} />\n              ))}\n              {showLabels && (\n                <LabelList\n                  position={stagePosition}\n                  dataKey={STAGE_LABEL_KEY}\n                  className={\n                    labelFill ? undefined : resolveLabelFillClass(stagePosition)\n                  }\n                  fill={labelFill}\n                  stroke=\"none\"\n                />\n              )}\n              {showValueLabels && (\n                <LabelList\n                  position={valueLabelPosition}\n                  dataKey={STAGE_VALUE_LABEL_KEY}\n                  className={\n                    labelFill\n                      ? undefined\n                      : resolveLabelFillClass(valueLabelPosition)\n                  }\n                  fill={labelFill}\n                  stroke=\"none\"\n                />\n              )}\n            </Funnel>\n          </RechartsFunnelChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nFunnelChart.displayName = 'FunnelChart';\n\nexport { FunnelChart, funnelChartVariants };\n"],"names":["funnelChartVariants","cva","LABEL_POSITION","funnelChartOppositeSide","labelPosition","STAGE_LABEL_KEY","STAGE_VALUE_LABEL_KEY","GRADIENT_MIN_MIX","ACTIVE_SHAPE","LABEL_SIDE_INSET","BASE_MARGIN","COMPOSITE_FUNNEL_WIDTH","isCompositeFormat","format","funnelChartLabelReserve","options","showLabels","labelFormat","funnelChartLabelMargin","showValueLabels","valuePosition","funnelChartPercent","value","n","funnelChartLabelText","name","base","formatter","percentFormatter","text","numeric","share","gradientStageFill","index","count","strength","FunnelChart","React","className","config","palette","data","dataKey","nameKey","lastShape","reversed","labelFill","labelFormatter","showLegend","legendPos","colorMode","gradientColor","stageSettings","showActiveShape","stroke","strokeWidth","funnelWidth","margin","showTooltip","tooltipContent","animate","animationDuration","animationBegin","animationEasing","props","ref","animation","resolveAnimation","seriesData","visible","row","_a","firstName","conversionBase","widest","fill","labelArgs","legendPayload","seen","resolvedValuePosition","stagePosition","valueLabelPosition","plotMargin","resolvedFunnelWidth","resolvedStroke","jsx","cn","ChartContainer","jsxs","RechartsFunnelChart","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Funnel","entry","Cell","LabelList","resolveLabelFillClass"],"mappings":"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"}
+{"version":3,"file":"funnel-chart.js","names":[],"sources":["../../../../src/components/ui/funnel-chart/funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Cell,\n  Funnel,\n  FunnelChart as RechartsFunnelChart,\n  LabelList,\n} from 'recharts';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveLabelFillClass,\n  type ChartAnimationProps,\n  type ChartConfig,\n  type ChartPalette,\n  type TickFormatter,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The single\n// CVA axis is the design's Funnel-chart variant set: `lastShape` (does the\n// funnel narrow to a point — `triangle` — or end flat — `rectangle`). The class\n// stays empty because recharts' SVG — not CSS — draws the funnel: `lastShape`\n// drives the `<Funnel>`'s `lastShapeType`. CVA is kept so the variant set is a\n// first-class, spec-conformant part of the API (matched against ui-spec's\n// api.yaml enums) and exposed via `VariantProps`; the resolved value is also\n// mirrored onto `data-last-shape`.\nconst funnelChartVariants = cva('', {\n  variants: {\n    lastShape: {\n      triangle: '',\n      rectangle: '',\n    },\n  },\n  defaultVariants: {\n    lastShape: 'triangle',\n  },\n});\n\n/** Where a stage's label sits relative to its segment. */\nexport type FunnelChartLabelPosition = 'right' | 'left' | 'inside';\n\n/** What a stage's label says. */\nexport type FunnelChartLabelFormat =\n  | 'name'\n  | 'value'\n  | 'percent'\n  | 'name-value'\n  | 'name-percent'\n  | 'value-percent';\n\n/** How the stages are coloured: one `config` entry each, or one shared ramp. */\nexport type FunnelChartColorMode = 'palette' | 'gradient';\n\n/** Override for a single stage, keyed by its `nameKey` value. */\nexport interface FunnelChartStageSettings {\n  /**\n   * Paint this stage with a colour of its own, overriding both `config` and\n   * `colorMode`. Reference an existing semantic `--ui-*` token.\n   */\n  color?: string;\n  /**\n   * Drop the stage from the funnel — and from the legend, labels and the\n   * conversion percentages, which are computed over the visible stages only.\n   */\n  hidden?: boolean;\n}\n\n// recharts' `LabelList` positions that a funnel trapezoid understands. `inside`\n// is recharts' `center`: a trapezoid has no `insideLeft`/`insideTop` anchor, so\n// centring is the only on-segment placement. `outside` is not offered — for a\n// funnel it would mean \"beside the segment\", which is what `right`/`left`\n// already are, and recharts' polar `outside` doesn't apply to a trapezoid.\nconst LABEL_POSITION: Record<\n  FunnelChartLabelPosition,\n  'right' | 'left' | 'center'\n> = {\n  right: 'right',\n  left: 'left',\n  inside: 'center',\n};\n\n/**\n * Where the value labels sit when the caller doesn't say: opposite the names, so\n * the two lists never stack on the same edge. `inside` names sit on the segments\n * and leave both edges free, so the values take the default `right`.\n *\n * A static default can't do this — `valuePosition=\"left\"` beside\n * `labelPosition=\"left\"` draws both lists at the same anchor, overprinting the\n * name with its own value.\n */\nexport function funnelChartOppositeSide(\n  labelPosition: FunnelChartLabelPosition\n): FunnelChartLabelPosition {\n  switch (labelPosition) {\n    case 'right':\n      return 'left';\n    case 'left':\n      return 'right';\n    case 'inside':\n      return 'right';\n  }\n}\n\n// Synthetic row fields the two label lists read. A `LabelList` resolves its text\n// from a `dataKey`, and its `formatter` only ever sees that one field's value —\n// so a composite label (\"Signups: 52.0%\") has to be composed onto the row before\n// recharts sees it, the same way `fill` already is.\nconst STAGE_LABEL_KEY = '__stageLabel';\nconst STAGE_VALUE_LABEL_KEY = '__stageValueLabel';\n\n// How far the gradient ramp fades by the last stage: the final segment is mixed\n// down to this share of the base colour, the first stays at full strength.\nconst GRADIENT_MIN_MIX = 45;\n\n// Hover highlight for `showActiveShape` — an outline rather than a fill change,\n// so the segment keeps the colour that ties it to its legend entry and label.\nconst ACTIVE_SHAPE = {\n  stroke: 'var(--ui-border-on-surface-border-active)',\n  strokeWidth: 2,\n} as const;\n\n// The inset reserved on whichever side a label list sits. It is *not* label\n// room — see `funnelChartLabelReserve` for why — but a label whose text can't\n// wrap (one long word) does overflow past the plot edge, and this is what keeps\n// that overflow inside the SVG.\nconst LABEL_SIDE_INSET = 96;\n\n// The plot-area margin a funnel has always been drawn with: the right side\n// reserved, the left not.\nconst BASE_MARGIN = {\n  top: 8,\n  right: LABEL_SIDE_INSET,\n  bottom: 8,\n  left: 24,\n};\n\n/**\n * Share of the plot area handed to the funnel when a composite label sits to its\n * right. The rest becomes real label room — see `funnelChartLabelReserve`.\n *\n * A percentage, not a pixel count: the plot area is responsive, and recharts\n * resolves `Funnel`'s `width` against it, so a ratio keeps the reserve\n * proportional at every chart size.\n */\nconst COMPOSITE_FUNNEL_WIDTH = '75%';\n\n/** A label format that pairs two fields, so its text is roughly twice as wide. */\nfunction isCompositeFormat(format: FunnelChartLabelFormat): boolean {\n  return format.includes('-');\n}\n\n/**\n * Reserve room for a composite label beside the funnel, by narrowing the\n * **funnel** rather than the plot area.\n *\n * recharts word-wraps a label against the space between its trapezoid's\n * mid-height edge and the *plot area* edge (`getCartesianPosition` clamps\n * `width` to `parentViewBox`, which `Funnel` sets to the plot box). A margin\n * shrinks the plot area and the funnel inside it in lockstep, so widening\n * `margin.right` moves the clamp edge *inward* and leaves a composite label\n * with less room, not more — the reserved strip sits outside `parentViewBox`\n * where the text can never reach it.\n *\n * `Funnel`'s `width` is the lever that works: it scales the funnel within the\n * plot area while `parentViewBox` stays put, and because recharts anchors the\n * funnel at the plot area's left edge (`offsetX = offset.left`), everything it\n * frees lands on the right. Narrowing the funnel to\n * `COMPOSITE_FUNNEL_WIDTH` turns ~35px of wrap width into ~140px on a 460px\n * chart.\n *\n * Returns `undefined` — i.e. leave the funnel at its full width — for every\n * other case, so a funnel with plain labels, no labels, or `inside` labels keeps\n * exactly the geometry it has always had.\n *\n * There is no equivalent lever for `labelPosition=\"left\"`: the widest trapezoid\n * always starts flush at the plot area's left edge, so a left-hand label is\n * bounded by how sharply the funnel narrows and narrowing it further only makes\n * that worse. Composite left-hand labels wrap; that's a recharts limitation, not\n * a tuning choice.\n *\n * A caller-supplied `funnelWidth` always wins — this is only the default.\n */\nexport function funnelChartLabelReserve(options: {\n  showLabels: boolean;\n  labelPosition: FunnelChartLabelPosition;\n  labelFormat: FunnelChartLabelFormat;\n}): string | undefined {\n  const { showLabels, labelPosition, labelFormat } = options;\n  return showLabels &&\n    labelPosition === 'right' &&\n    isCompositeFormat(labelFormat)\n    ? COMPOSITE_FUNNEL_WIDTH\n    : undefined;\n}\n\n/**\n * The plot-area margin. Reserves the left inset when a label list sits there, so\n * a left-hand label isn't clipped at the SVG edge; the right inset is always\n * reserved, since that is the geometry every existing funnel was drawn with.\n *\n * This is overflow protection, not label room — the wrap width comes from\n * `funnelChartLabelReserve`. A caller-supplied `margin` is merged over these\n * defaults per side, so `margin={{ right: 160 }}` keeps the default top, bottom\n * and left rather than collapsing them to zero.\n */\nexport function funnelChartLabelMargin(options: {\n  showLabels: boolean;\n  labelPosition: FunnelChartLabelPosition;\n  showValueLabels: boolean;\n  valuePosition: FunnelChartLabelPosition;\n}) {\n  const { showLabels, labelPosition, showValueLabels, valuePosition } = options;\n  const stageLabelAt = showLabels ? labelPosition : undefined;\n  const valueLabelAt = showValueLabels ? valuePosition : undefined;\n\n  return {\n    ...BASE_MARGIN,\n    left:\n      stageLabelAt === 'left' || valueLabelAt === 'left'\n        ? LABEL_SIDE_INSET\n        : BASE_MARGIN.left,\n  };\n}\n\n/**\n * Format a conversion share the way the default `percent` label reads it:\n * `0.52 → \"52.0%\"`. Exported so a `percentFormatter` can wrap or replace it.\n */\nexport const funnelChartPercent: TickFormatter = (value) => {\n  const n = typeof value === 'number' ? value : Number(value);\n  return Number.isFinite(n) ? `${(n * 100).toFixed(1)}%` : String(value);\n};\n\n/**\n * Compose one stage's label text.\n *\n * `base` is the value the percentage is measured against — the funnel's widest\n * stage, not the sum of every stage. A funnel's stages are nested subsets of\n * each other rather than parts of a whole, so their values don't add up to\n * anything meaningful; the share that reads as information is the conversion\n * from the top of the funnel. (A pie's `percent` is the other way round — there\n * a slice really is a share of the total.)\n *\n * Only the numeric part goes through `formatter`, so a label and its tooltip can\n * share one formatter; the share goes through `percentFormatter`, so a locale\n * that doesn't write a bare `%` can replace it. The percent formats degrade to\n * the name (or to the value) rather than printing `NaN%` when there is nothing\n * to divide by.\n */\nexport function funnelChartLabelText(options: {\n  name: string;\n  value: number | string;\n  base: number;\n  format: FunnelChartLabelFormat;\n  formatter?: TickFormatter;\n  percentFormatter?: TickFormatter;\n}): string {\n  const {\n    name,\n    value,\n    base,\n    format,\n    formatter,\n    percentFormatter = funnelChartPercent,\n  } = options;\n  const text = formatter ? formatter(value) : String(value);\n  const numeric = typeof value === 'number' ? value : Number(value);\n  const share =\n    base > 0 && Number.isFinite(numeric)\n      ? percentFormatter(numeric / base)\n      : '';\n\n  switch (format) {\n    case 'name':\n      return name;\n    case 'value':\n      return text;\n    case 'percent':\n      return share;\n    case 'name-value':\n      return `${name}: ${text}`;\n    case 'name-percent':\n      return share ? `${name}: ${share}` : name;\n    case 'value-percent':\n      return share ? `${text} (${share})` : text;\n  }\n}\n\n/**\n * Mix one stage of the gradient ramp. Mixing toward the surface (rather than\n * lowering alpha) keeps every stage opaque, so an on-segment label keeps its\n * contrast and the ramp reads the same over any card background.\n */\nfunction gradientStageFill(base: string, index: number, count: number): string {\n  if (count <= 1) return base;\n  const strength = 100 - ((100 - GRADIENT_MIN_MIX) * index) / (count - 1);\n  return `color-mix(in oklab, ${base} ${strength.toFixed(1)}%, var(--ui-background-surface-primary))`;\n}\n\nexport interface FunnelChartProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof funnelChartVariants>,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** Row-per-stage data. Each object holds the stage's `nameKey` label + its `dataKey` numeric value. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-stage map of `label` / `icon` / `tone`, keyed by the stage's `nameKey`\n   * value (imported from the shared `Chart` primitives). Turned into\n   * `--color-<name>` custom properties. Series take their colour from the\n   * container's `palette`; each entry maps a key to a `label` and an optional\n   * `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each stage (the funnel narrows as it drops). */\n  dataKey: string;\n  /**\n   * Label field that names each stage (drives the legend, tooltip, on-chart\n   * labels, and the `--color-<name>` lookup). Values should be unique per chart —\n   * stages sharing a name share one `config`/color entry.\n   */\n  nameKey: string;\n  /** Flip the funnel so it widens toward the bottom instead of narrowing. */\n  reversed?: boolean;\n  /** Render a label for each stage — see `labelFormat` and `labelPosition`. */\n  showLabels?: boolean;\n  /**\n   * What each stage's label says. `percent` is the stage's share of the widest\n   * stage — its conversion from the top of the funnel.\n   */\n  labelFormat?: FunnelChartLabelFormat;\n  /**\n   * Where each stage's label sits. Defaults to `right`, beside the segment.\n   * `inside` centres it on the segment, which only works while every stage is\n   * wide enough to hold the text — a funnel narrows, so its last stages often\n   * are not. Keep the text short there (`percent`) or leave the labels beside\n   * the funnel.\n   */\n  labelPosition?: FunnelChartLabelPosition;\n  /**\n   * Render a second label carrying the stage's value, so the name and the number\n   * can sit on opposite sides of the funnel.\n   */\n  showValueLabels?: boolean;\n  /**\n   * Where the value label sits. Defaults to the side opposite `labelPosition`,\n   * where every stage has room — so it follows the names rather than pinning\n   * itself to one edge. See `labelPosition` before choosing `inside`.\n   */\n  valuePosition?: FunnelChartLabelPosition;\n  /**\n   * Colour for both label lists, overriding the contrast-matched default (the\n   * on-surface token beside the funnel, the on-fill token on a segment). Pass a\n   * `--ui-*` token; only use it when the default doesn't work on your surface.\n   */\n  labelFill?: string;\n  /** Format the numeric part of a label — pass the same formatter used elsewhere. */\n  labelFormatter?: TickFormatter;\n  /**\n   * Format the conversion share behind the `percent` formats. Receives the share\n   * as a fraction (`0.52`); defaults to `funnelChartPercent` (`\"52.0%\"`). Pass\n   * `createTickFormatter({ style: 'percent', minimumFractionDigits: 1 }, locale)`\n   * for a locale that doesn't write a bare `%`.\n   */\n  percentFormatter?: TickFormatter;\n  /** Render the legend. Off by default: a funnel labels its stages on the chart. */\n  showLegend?: boolean;\n  /** Which edge the legend sits on. */\n  legendPos?: 'top' | 'bottom';\n  /**\n   * How the stages are coloured. `palette` (the default) gives each stage its own\n   * `config` colour; `gradient` ramps one hue — `gradientColor` — from the widest\n   * stage down to the narrowest.\n   */\n  colorMode?: FunnelChartColorMode;\n  /**\n   * The hue `colorMode=\"gradient\"` ramps. Defaults to the first visible stage's\n   * own colour — including a `stageSettings` colour set on it — so a palette\n   * config becomes a ramp without a second colour decision. Ignored when\n   * `colorMode` is `palette`.\n   */\n  gradientColor?: string;\n  /** Per-stage `color` / `hidden` overrides, keyed by the stage's `nameKey` value. */\n  stageSettings?: Record<string, FunnelChartStageSettings>;\n  /** Outline the hovered segment. */\n  showActiveShape?: boolean;\n  /**\n   * Segment border colour. Reference an existing semantic `--ui-*` token.\n   * Defaults to the border token when `strokeWidth` is set on its own.\n   */\n  stroke?: string;\n  /** Segment border width, in px. Implies a default `stroke` when given alone. */\n  strokeWidth?: number;\n  /**\n   * Funnel width — a number in px or a percentage of the plot area (`'70%'`).\n   * Defaults to the full plot area, except that a composite `labelFormat` beside\n   * the funnel narrows it to leave the label real room to wrap into.\n   */\n  funnelWidth?: number | string;\n  /**\n   * Plot-area margin, in px. Merged over the defaults per side, so passing one\n   * side keeps the others.\n   */\n  margin?: { top?: number; right?: number; bottom?: number; left?: number };\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-series rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst FunnelChart = React.forwardRef<HTMLDivElement, FunnelChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      dataKey,\n      nameKey,\n      lastShape = 'triangle',\n      reversed = false,\n      showLabels = true,\n      labelFormat = 'name',\n      labelPosition = 'right',\n      showValueLabels = false,\n      valuePosition,\n      labelFill,\n      labelFormatter,\n      percentFormatter,\n      showLegend = false,\n      legendPos = 'bottom',\n      colorMode = 'palette',\n      gradientColor,\n      stageSettings,\n      showActiveShape = false,\n      stroke,\n      strokeWidth,\n      funnelWidth,\n      margin,\n      showTooltip = true,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n\n    // Stamp each row with its `fill` and its label texts (the shadcn data-driven\n    // pattern). A Funnel's default fill is grey (#808080) and recharts doesn't\n    // carry a per-segment color on the tooltip/legend payload item, so putting the\n    // color on the data row is what lets a real hover resolve each segment's\n    // color. (The forced-open `defaultIndex` VR snapshot can still show a neutral\n    // indicator — it synthesizes the open state without a pointer hover.)\n    const seriesData = React.useMemo(() => {\n      const visible = data.filter(\n        (row) => !stageSettings?.[String(row[nameKey])]?.hidden\n      );\n      // The ramp's default hue is the first visible stage's own colour — its\n      // `stageSettings` override if it has one, otherwise the `--color-*`\n      // custom property that ChartStyle emits for this series. Reading\n      // the override matters because that stage paints with it, so ramping from\n      // the config colour would start the ramp on a hue nothing on screen shows.\n      const firstName = visible.length ? String(visible[0][nameKey]) : undefined;\n      const base =\n        gradientColor ??\n        (firstName === undefined\n          ? undefined\n          : (stageSettings?.[firstName]?.color ?? `var(--color-${firstName})`));\n      // The percentages are conversions from the funnel's widest stage, and\n      // recharts sizes the trapezoids off `Math.max` of the values — so the base\n      // is the largest visible value, not the first row. Taking the first row\n      // would read as a conversion above 100% whenever the data isn't sorted\n      // descending.\n      const conversionBase = visible.reduce((widest, row) => {\n        const value = Number(row[dataKey]);\n        return Number.isFinite(value) && value > widest ? value : widest;\n      }, 0);\n\n      return visible.map((row, index) => {\n        const name = String(row[nameKey]);\n        const override = stageSettings?.[name]?.color;\n        const fill =\n          override ??\n          (colorMode === 'gradient' && base\n            ? gradientStageFill(base, index, visible.length)\n            : `var(--color-${name})`);\n        const labelArgs = {\n          name,\n          value: row[dataKey],\n          base: conversionBase,\n          formatter: labelFormatter,\n          percentFormatter,\n        };\n\n        return {\n          ...row,\n          fill,\n          [STAGE_LABEL_KEY]: funnelChartLabelText({\n            ...labelArgs,\n            format: labelFormat,\n          }),\n          [STAGE_VALUE_LABEL_KEY]: funnelChartLabelText({\n            ...labelArgs,\n            format: 'value',\n          }),\n        } as Record<string, string | number>;\n      });\n    }, [\n      colorMode,\n      data,\n      dataKey,\n      gradientColor,\n      labelFormat,\n      labelFormatter,\n      nameKey,\n      percentFormatter,\n      stageSettings,\n    ]);\n\n    // recharts 3 builds the legend payload from the graphical item, and `Funnel`\n    // — unlike Bar/Line/Area/Pie/Radar/RadialBar/Scatter — never registers one,\n    // so a `<Legend>` inside a `FunnelChart` renders empty. The payload is\n    // synthesized from the visible stages instead and handed to the shared\n    // `ChartLegendContent`, which keeps the funnel on the same legend markers,\n    // labels and `config` lookup as every other chart. `payload` carries the row\n    // so each entry resolves its own `config` entry via `nameKey`.\n    //\n    // One entry per *distinct* stage name: same-named stages deliberately share a\n    // `--color-<name>`/`config` entry, so a second entry would repeat the first\n    // verbatim — and `ChartLegendContent` keys its entries on `value`, so it would\n    // also be a duplicate React key.\n    const legendPayload = React.useMemo<LegendPayload[]>(() => {\n      const seen = new Set<string>();\n      return seriesData.flatMap((row) => {\n        const value = String(row[nameKey]);\n        if (seen.has(value)) return [];\n        seen.add(value);\n        return [\n          {\n            value,\n            dataKey: nameKey,\n            type: 'rect' as const,\n            color: String(row.fill),\n            payload: row,\n          },\n        ];\n      });\n    }, [nameKey, seriesData]);\n\n    const resolvedValuePosition =\n      valuePosition ?? funnelChartOppositeSide(labelPosition);\n    const stagePosition = LABEL_POSITION[labelPosition];\n    const valueLabelPosition = LABEL_POSITION[resolvedValuePosition];\n    const plotMargin = {\n      ...funnelChartLabelMargin({\n        showLabels,\n        labelPosition,\n        showValueLabels,\n        valuePosition: resolvedValuePosition,\n      }),\n      ...margin,\n    };\n    // A caller-supplied `funnelWidth` wins; otherwise a composite label beside the\n    // funnel narrows it to leave itself room to wrap into.\n    const resolvedFunnelWidth =\n      funnelWidth ??\n      funnelChartLabelReserve({ showLabels, labelPosition, labelFormat });\n    // recharts defaults a Funnel's stroke to a hardcoded `#fff` that\n    // `ChartContainer` neutralizes, so a bare `strokeWidth` would widen an\n    // invisible border. Pair it with the border token instead.\n    const resolvedStroke =\n      stroke ??\n      (strokeWidth != null ? 'var(--ui-border-on-surface-border)' : undefined);\n\n    return (\n      <div\n        ref={ref}\n        data-last-shape={lastShape}\n        className={cn(funnelChartVariants({ lastShape }), className)}\n        {...props}\n      >\n        <ChartContainer config={config} palette={palette} className=\"size-full\">\n          <RechartsFunnelChart margin={plotMargin}>\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n            {showLegend && (\n              <ChartLegend\n                verticalAlign={legendPos}\n                content={() => (\n                  <ChartLegendContent\n                    payload={legendPayload}\n                    verticalAlign={legendPos}\n                    nameKey={nameKey}\n                  />\n                )}\n              />\n            )}\n            <Funnel\n              dataKey={dataKey}\n              nameKey={nameKey}\n              data={seriesData}\n              lastShapeType={lastShape ?? 'triangle'}\n              reversed={reversed}\n              width={resolvedFunnelWidth}\n              stroke={resolvedStroke}\n              strokeWidth={strokeWidth}\n              activeShape={showActiveShape ? ACTIVE_SHAPE : undefined}\n              {...animation}\n            >\n              {seriesData.map((entry, index) => (\n                // Keyed by index, not the name: two stages could share a nameKey\n                // value, which would collide as a React key. Same-named stages\n                // intentionally share a color/config entry via `--color-<name>`.\n                <Cell key={index} fill={String(entry.fill)} />\n              ))}\n              {showLabels && (\n                <LabelList\n                  position={stagePosition}\n                  dataKey={STAGE_LABEL_KEY}\n                  className={\n                    labelFill ? undefined : resolveLabelFillClass(stagePosition)\n                  }\n                  fill={labelFill}\n                  stroke=\"none\"\n                />\n              )}\n              {showValueLabels && (\n                <LabelList\n                  position={valueLabelPosition}\n                  dataKey={STAGE_VALUE_LABEL_KEY}\n                  className={\n                    labelFill\n                      ? undefined\n                      : resolveLabelFillClass(valueLabelPosition)\n                  }\n                  fill={labelFill}\n                  stroke=\"none\"\n                />\n              )}\n            </Funnel>\n          </RechartsFunnelChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nFunnelChart.displayName = 'FunnelChart';\n\nexport { FunnelChart, funnelChartVariants };\n"],"mappings":"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"}