@acronis-platform/ui-react 5.1.1 → 5.3.0

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

@@ -1 +1 @@
-{"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  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveChartColors,\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/** Override for a single stage, keyed by its `nameKey` value. */\nexport interface FunnelChartStageSettings {\n  /**\n   * Paint this stage with a colour of its own instead of its `palette` stop —\n   * the same per-item escape hatch `PieChart`'s `sliceSettings` offers.\n   * 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// Which stage this row is. recharts hands a custom `shape` the data row as\n// `payload` but no index, and the first stage is the one that must *not* be\n// pushed down — its top edge is the top of the funnel.\nconst STAGE_INDEX_KEY = '__stageIndex';\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_STROKE = 'var(--ui-border-on-surface-border-active)';\nconst ACTIVE_STROKE_WIDTH = 2;\n\n/**\n * The design's funnel plot: a 120×120 square beside its legend — the same\n * geometry `ChartDonut` uses in Figma, which is why `PieChart` and\n * `RadialBarChart` size their plot exactly this way too.\n *\n * The *component* is still parent-responsive: the root is a flex row whose\n * legend column takes every pixel the plot doesn't, so a funnel widens with its\n * widget instead of the plot growing into a tall, narrow wedge.\n *\n * Figma: `8811:175245` → `Chart` is `size-[120px]`, `gap-[16px]`, legend\n * `flex-[1_0_0]`.\n */\nconst PLOT_SIZE_CLASS = 'size-[120px]';\n\n/**\n * Surface showing between two stages, in px. recharts draws the stages flush —\n * `Funnel` has no gap prop and `Trapezoid` no radius — so both come from the\n * custom `shape` below.\n *\n * Figma `8811:175245` stacks the stages at y = 4 / 34 / 64 / 94 with shapes 28\n * tall: a 2px gap, three times over for four stages.\n */\nconst STAGE_GAP = 2;\n\n/** Corner rounding on the two upper edges of each stage (Figma: ~2px clip along the top edge). */\nconst STAGE_RADIUS = 2;\n\n/**\n * Corner rounding on the two lower edges of each stage.\n *\n * Figma's bottom corners clip ~0.85px — significantly less than the upper\n * corners. The asymmetry is intentional: the diagonal-meets-flat-bottom\n * transition is shallow, so a smaller radius keeps it from looking over-rounded\n * at the narrow tail of the funnel. 1px is the nearest integer match.\n */\nconst STAGE_BOTTOM_RADIUS = 1;\n\n/**\n * The plot-area inset when nothing sits beside the funnel. Figma's widest stage\n * spans 102.67 of the 120px box and the stack runs y=4 → ~115.7, i.e. ~8px of\n * horizontal and 4px of vertical breathing room.\n */\nconst PLOT_MARGIN = { top: 4, right: 8, bottom: 4, left: 8 };\n\n/**\n * The palette Figma paints the funnel from: the sequential blue ramp, whose\n * stops read as one quantity falling down the funnel. Every other chart keeps\n * the shared categorical default — a funnel's stages are an *ordered* series,\n * which is what a sequential ramp is for.\n *\n * Figma `8811:175245` uses `dataviz/sequential/blue/{2,4,6,8}`.\n */\nexport const FUNNEL_CHART_DEFAULT_PALETTE: ChartPalette = Object.freeze({\n  type: 'sequential',\n  ramp: 'blue',\n});\n\ntype StagePoint = readonly [number, number];\n\nconst distance = (a: StagePoint, b: StagePoint) =>\n  Math.hypot(b[0] - a[0], b[1] - a[1]);\n\n/** A point `d` px from `from` along the segment toward `to`. */\nfunction along(from: StagePoint, to: StagePoint, d: number): StagePoint {\n  const length = distance(from, to);\n  if (length === 0) return from;\n  return [\n    from[0] + ((to[0] - from[0]) * d) / length,\n    from[1] + ((to[1] - from[1]) * d) / length,\n  ];\n}\n\n// Trimmed to 3dp so the emitted `d` is stable across platforms — a raw float\n// makes every visual-regression baseline and DOM assertion renderer-dependent.\nconst coord = ([x, y]: StagePoint) =>\n  `${Number(x.toFixed(3))},${Number(y.toFixed(3))}`;\n\n/**\n * A closed polygon with rounded corners, as an SVG path.\n *\n * Each corner is trimmed back along both of its edges and bridged with a\n * quadratic curve through the original vertex. The radius is clamped to half of\n * either adjacent edge, so two corners can never overrun each other on a short\n * edge — which is the normal case at the bottom of a funnel, where the last\n * stages are only a few px wide.\n */\nfunction roundedPolygonPath(\n  points: readonly StagePoint[],\n  radius: number | readonly number[]\n): string {\n  const count = points.length;\n  if (count < 3) return '';\n\n  let path = '';\n  for (let i = 0; i < count; i++) {\n    const r = typeof radius === 'number' ? radius : radius[i];\n    const previous = points[(i - 1 + count) % count];\n    const current = points[i];\n    const next = points[(i + 1) % count];\n    const corner = Math.max(\n      0,\n      Math.min(\n        r,\n        distance(previous, current) / 2,\n        distance(current, next) / 2\n      )\n    );\n    const entry = along(current, previous, corner);\n    const exit = along(current, next, corner);\n    path += `${i === 0 ? 'M' : ' L'} ${coord(entry)}`;\n    path += ` Q ${coord(current)} ${coord(exit)}`;\n  }\n  return `${path} Z`;\n}\n\n/**\n * The `d` for one funnel stage — recharts' trapezoid geometry with the design's\n * rounded corners.\n *\n * `x`/`y` is the top-left of the *upper* edge and the shape is centred on\n * `x + upperWidth / 2`, matching recharts' own `getTrapezoidPath`.\n *\n * Either edge can collapse to a single rounded apex rather than a zero-length\n * one — the `triangle` last shape narrows to a point at the bottom, and a\n * `reversed` funnel stands that same triangle on its head at the top.\n */\nexport function funnelChartStagePath(options: {\n  x: number;\n  y: number;\n  upperWidth: number;\n  lowerWidth: number;\n  height: number;\n  /**\n   * Uniform corner radius — applies to all four corners. Overridden per-side\n   * by `topRadius` / `bottomRadius`. When absent, defaults to\n   * `STAGE_RADIUS` (top) and `STAGE_BOTTOM_RADIUS` (bottom).\n   */\n  radius?: number;\n  /** Radius for the two upper corners (default: `STAGE_RADIUS = 2`). */\n  topRadius?: number;\n  /**\n   * Radius for the two lower corners (default: `STAGE_BOTTOM_RADIUS = 1`).\n   *\n   * Figma's bottom corners clip ~0.85px — much smaller than the upper ones —\n   * so the default is intentionally lower than `topRadius`.\n   */\n  bottomRadius?: number;\n}): string {\n  const { x, y, upperWidth, lowerWidth, height } = options;\n  // `radius` is a backward-compat shorthand for all corners.\n  // Per-side props win; if only `radius` is given it applies to both sides.\n  // If nothing is given, use the asymmetric Figma defaults.\n  const uniformRadius = options.radius;\n  const topRadius = options.topRadius ?? uniformRadius ?? STAGE_RADIUS;\n  const bottomRadius =\n    options.bottomRadius ?? uniformRadius ?? STAGE_BOTTOM_RADIUS;\n\n  if (height <= 0 || (upperWidth <= 0 && lowerWidth <= 0)) return '';\n\n  const centre = x + upperWidth / 2;\n  const upper: StagePoint[] =\n    upperWidth <= 0\n      ? [[centre, y]]\n      : [\n          [x, y],\n          [x + upperWidth, y],\n        ];\n  const lower: StagePoint[] =\n    lowerWidth <= 0\n      ? [[centre, y + height]]\n      : [\n          [centre + lowerWidth / 2, y + height],\n          [centre - lowerWidth / 2, y + height],\n        ];\n\n  // Upper points get topRadius, lower points get bottomRadius — matching\n  // Figma's intentional asymmetry (the diagonal-meets-bottom transition\n  // uses a much smaller clip than the diagonal-meets-top one).\n  const radii: number[] = [\n    ...upper.map(() => topRadius),\n    ...lower.map(() => bottomRadius),\n  ];\n  return roundedPolygonPath([...upper, ...lower], radii);\n}\n\n/**\n * Pull a stage's **top** edge down by `gap`, so surface shows between it and the\n * stage above.\n *\n * The top rather than the bottom on purpose: the bottom edge is what\n * `lastShapeType` defines — the triangle's apex — so leaving it exactly where\n * recharts put it keeps a `triangle` funnel ending in a real point instead of a\n * blunt 2px edge. The upper edge slides down the funnel's own slope, so the\n * taper is unchanged rather than steepened.\n *\n * A stage with no room for the gap is returned untouched: better a missing gap\n * than an inverted shape.\n */\nexport function funnelChartStageInset(options: {\n  x: number;\n  y: number;\n  upperWidth: number;\n  lowerWidth: number;\n  height: number;\n  gap: number;\n}) {\n  const { x, y, upperWidth, lowerWidth, height, gap } = options;\n  if (gap <= 0 || height <= gap) {\n    return { x, y, upperWidth, lowerWidth, height };\n  }\n\n  const insetUpperWidth =\n    upperWidth + ((lowerWidth - upperWidth) * gap) / height;\n  return {\n    x: x + upperWidth / 2 - insetUpperWidth / 2,\n    y: y + gap,\n    upperWidth: insetUpperWidth,\n    lowerWidth,\n    height: height - gap,\n  };\n}\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.\n *\n * With nothing beside the funnel — the default, and what Figma draws — the plot\n * is the design's own inset (`PLOT_MARGIN`): just the few px the rounded corners\n * and the apex need, so the funnel fills its 120px square instead of being\n * squeezed into the middle by label room it isn't using.\n *\n * As soon as a label list *does* sit beside the funnel, the side insets come\n * back: 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  const besideOnLeft = stageLabelAt === 'left' || valueLabelAt === 'left';\n  const besideOnRight = stageLabelAt === 'right' || valueLabelAt === 'right';\n\n  // `inside` labels sit on the segments, so they count as \"nothing beside the\n  // funnel\" and keep the tight design margin too.\n  if (!besideOnLeft && !besideOnRight) {\n    return { ...PLOT_MARGIN };\n  }\n\n  return {\n    ...BASE_MARGIN,\n    left: besideOnLeft ? LABEL_SIDE_INSET : 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// What recharts hands a custom `Funnel` `shape`: the trapezoid box it measured,\n// the presentation props it resolved (`fill` from the `Cell`, `stroke`), the\n// data row, and whether this stage is the hovered one.\ntype FunnelStageShapeProps = {\n  x?: number;\n  y?: number;\n  upperWidth?: number;\n  lowerWidth?: number;\n  height?: number;\n  fill?: string;\n  stroke?: string;\n  strokeWidth?: string | number;\n  className?: string;\n  isActive?: boolean;\n  payload?: Record<string, unknown>;\n  showActiveShape?: boolean;\n  /**\n   * Which stage sits at the top of the plot area, and so takes no gap above it.\n   * Not always the first row: `reversed` flips the stack, which puts the *last*\n   * stage at the top.\n   */\n  topStageIndex?: number;\n};\n\n/**\n * One funnel stage. Replaces recharts' `Trapezoid` because the design's stage\n * has two things it can't express: a 2px gap to the stage above and 2px rounded\n * corners.\n *\n * Safe to substitute — recharts puts the tooltip/click handlers on the `<g\n * className=\"recharts-funnel-trapezoid\">` that wraps this, not on the shape, so\n * hover and the tooltip keep working without any event plumbing here.\n */\nfunction FunnelStageShape({\n  x = 0,\n  y = 0,\n  upperWidth = 0,\n  lowerWidth = 0,\n  height = 0,\n  fill,\n  stroke,\n  strokeWidth,\n  className,\n  isActive,\n  payload,\n  showActiveShape,\n  topStageIndex = 0,\n}: FunnelStageShapeProps) {\n  const isTopStage = payload?.[STAGE_INDEX_KEY] === topStageIndex;\n  const inset = funnelChartStageInset({\n    x,\n    y,\n    upperWidth,\n    lowerWidth,\n    height,\n    // The funnel's own top edge is not a seam, so only the stages below the\n    // topmost one are pushed down: n stages give exactly n-1 gaps.\n    gap: isTopStage ? 0 : STAGE_GAP,\n  });\n  const d = funnelChartStagePath(inset);\n  if (!d) return null;\n\n  const outlined = Boolean(isActive && showActiveShape);\n  return (\n    <path\n      className={cn('recharts-funnel-stage', className)}\n      d={d}\n      fill={fill}\n      stroke={outlined ? ACTIVE_STROKE : stroke}\n      strokeWidth={outlined ? ACTIVE_STROKE_WIDTH : strokeWidth}\n    />\n  );\n}\n\nexport interface FunnelChartProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof funnelChartVariants>,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette the stages are painted from — the only source of a\n   * stage's colour, bar a per-stage `stageSettings.color`. Defaults to\n   * `FUNNEL_CHART_DEFAULT_PALETTE` (the sequential blue ramp), which is what\n   * Figma paints the funnel with; a funnel's stages are an ordered series, so a\n   * ramp reads them better than the shared categorical default.\n   * 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  /**\n   * Render the stage list beside the funnel. On by default: the design's funnel\n   * carries no on-plot labels, so the legend is where the stages are named.\n   */\n  showLegend?: boolean;\n  /** Format the value in each legend row — the stage's `dataKey` number. */\n  legendValueFormatter?: (value: string | number) => 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 = false,\n      labelFormat = 'name',\n      labelPosition = 'right',\n      showValueLabels = false,\n      valuePosition,\n      labelFill,\n      labelFormatter,\n      percentFormatter,\n      showLegend = true,\n      legendValueFormatter,\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 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 fill =\n          stageSettings?.[name]?.color ?? `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_INDEX_KEY]: index,\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      data,\n      dataKey,\n      labelFormat,\n      labelFormatter,\n      nameKey,\n      percentFormatter,\n      stageSettings,\n    ]);\n\n    // The legend sits *outside* `ChartContainer`, beside the plot — so it can't\n    // read the `--color-<name>` custom properties `ChartStyle` scopes to\n    // `[data-chart=…]`. Resolving the palette here is what gives its markers the\n    // same colours the stages paint with, the way `PieChart` and\n    // `RadialBarChart` already do for their side legends.\n    const resolvedConfigForLegend = React.useMemo(\n      () =>\n        showLegend\n          ? resolveChartColors(config, palette ?? FUNNEL_CHART_DEFAULT_PALETTE)\n          : null,\n      [showLegend, config, palette]\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    // `config` entry, so a second entry would repeat the first verbatim — and\n    // `ChartLegendContent` keys its entries on `value`, so it would also be a\n    // duplicate React key.\n    const legendPayload = React.useMemo<LegendPayload[]>(() => {\n      if (!resolvedConfigForLegend) return [];\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            // A `stageSettings` colour is a real colour and paints as-is; every\n            // other stage takes its resolved palette stop.\n            color:\n              stageSettings?.[value]?.color ??\n              resolvedConfigForLegend[value]?.color ??\n              String(row.fill),\n            payload: row,\n          },\n        ];\n      });\n    }, [nameKey, seriesData, resolvedConfigForLegend, stageSettings]);\n\n    const resolvedValuePosition =\n      valuePosition ?? funnelChartOppositeSide(labelPosition);\n\n    // When labels sit beside the funnel (not on the segments), the 120px plot\n    // is too narrow: the label margins eat the whole width and leave 0px for the\n    // funnel. Make the plot grow to fill available width in that case; the fixed\n    // 120px square is only for the default \"no outside labels\" layout.\n    const hasOutsideLabels =\n      (showLabels && labelPosition !== 'inside') ||\n      (showValueLabels && resolvedValuePosition !== 'inside');\n\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`.\n    // ChartContainer's CSS neutralizer targets `.recharts-trapezoid`, but our\n    // custom shape renders as `.recharts-funnel-stage`, so the neutralizer\n    // never matches. Explicitly default to `'none'` to suppress the white\n    // outline — and pair a bare `strokeWidth` with the border token so it\n    // doesn't widen an invisible border.\n    const resolvedStroke =\n      stroke ??\n      (strokeWidth != null ? 'var(--ui-border-on-surface-border)' : 'none');\n    // One renderer for both slots: recharts swaps in `activeShape` for the\n    // hovered stage, so leaving it unset would drop back to its own square-\n    // cornered, gapless `Trapezoid` on hover.\n    const renderStage = (stageProps: FunnelStageShapeProps) => (\n      <FunnelStageShape\n        {...stageProps}\n        showActiveShape={showActiveShape}\n        // `reversed` stacks the funnel the other way up, so the stage with no\n        // gap above it is the last row rather than the first.\n        topStageIndex={reversed ? seriesData.length - 1 : 0}\n      />\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-last-shape={lastShape}\n        className={cn(\n          // The design's funnel is a row: a square plot, a 16px gutter, then the\n          // legend taking whatever is left — so the component fills its parent's\n          // width without the plot stretching into a tall, narrow wedge.\n          'flex flex-row items-center gap-4',\n          !showLegend && 'justify-center',\n          funnelChartVariants({ lastShape }),\n          className\n        )}\n        {...props}\n      >\n        <div\n          className={\n            hasOutsideLabels\n              ? 'h-[120px] flex-1'\n              : cn(PLOT_SIZE_CLASS, 'shrink-0')\n          }\n        >\n          <ChartContainer\n            config={config}\n            palette={palette ?? FUNNEL_CHART_DEFAULT_PALETTE}\n            className=\"size-full\"\n          >\n            <RechartsFunnelChart margin={plotMargin}>\n              {showTooltip && (\n                <ChartTooltip\n                  content={\n                    tooltipContent ?? (\n                      <ChartTooltipContent nameKey={nameKey} hideLabel />\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                shape={renderStage}\n                activeShape={renderStage}\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\n                        ? undefined\n                        : 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        {showLegend && resolvedConfigForLegend && (\n          <ChartLegendContent\n            variant=\"list\"\n            payload={legendPayload}\n            config={resolvedConfigForLegend}\n            nameKey={nameKey}\n            valueKey={dataKey}\n            valueFormatter={legendValueFormatter}\n            // Figma paints the funnel legend's value in the primary text token,\n            // not the link token the donut/radial legends use for theirs.\n            valueClassName=\"text-[var(--ui-text-on-surface-primary)]\"\n            className=\"min-w-0 flex-1\"\n          />\n        )}\n      </div>\n    );\n  }\n);\nFunnelChart.displayName = 'FunnelChart';\n\nexport { FunnelChart, funnelChartVariants };\n"],"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  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveChartColors,\n  resolveLabelFillClass,\n  toCssKey,\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/** Override for a single stage, keyed by its `nameKey` value. */\nexport interface FunnelChartStageSettings {\n  /**\n   * Paint this stage with a colour of its own instead of its `palette` stop —\n   * the same per-item escape hatch `PieChart`'s `sliceSettings` offers.\n   * 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// Which stage this row is. recharts hands a custom `shape` the data row as\n// `payload` but no index, and the first stage is the one that must *not* be\n// pushed down — its top edge is the top of the funnel.\nconst STAGE_INDEX_KEY = '__stageIndex';\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_STROKE = 'var(--ui-border-on-surface-border-active)';\nconst ACTIVE_STROKE_WIDTH = 2;\n\n/**\n * The design's funnel plot: a 120×120 square beside its legend — the same\n * geometry `ChartDonut` uses in Figma, which is why `PieChart` and\n * `RadialBarChart` size their plot exactly this way too.\n *\n * The *component* is still parent-responsive: the root is a flex row whose\n * legend column takes every pixel the plot doesn't, so a funnel widens with its\n * widget instead of the plot growing into a tall, narrow wedge.\n *\n * Figma: `8811:175245` → `Chart` is `size-[120px]`, `gap-[16px]`, legend\n * `flex-[1_0_0]`.\n */\nconst PLOT_SIZE_CLASS = 'size-[120px]';\n\n/**\n * Surface showing between two stages, in px. recharts draws the stages flush —\n * `Funnel` has no gap prop and `Trapezoid` no radius — so both come from the\n * custom `shape` below.\n *\n * Figma `8811:175245` stacks the stages at y = 4 / 34 / 64 / 94 with shapes 28\n * tall: a 2px gap, three times over for four stages.\n */\nconst STAGE_GAP = 2;\n\n/** Corner rounding on the two upper edges of each stage (Figma: ~2px clip along the top edge). */\nconst STAGE_RADIUS = 2;\n\n/**\n * Corner rounding on the two lower edges of each stage.\n *\n * Figma's bottom corners clip ~0.85px — significantly less than the upper\n * corners. The asymmetry is intentional: the diagonal-meets-flat-bottom\n * transition is shallow, so a smaller radius keeps it from looking over-rounded\n * at the narrow tail of the funnel. 1px is the nearest integer match.\n */\nconst STAGE_BOTTOM_RADIUS = 1;\n\n/**\n * The plot-area inset when nothing sits beside the funnel. Figma's widest stage\n * spans 102.67 of the 120px box and the stack runs y=4 → ~115.7, i.e. ~8px of\n * horizontal and 4px of vertical breathing room.\n */\nconst PLOT_MARGIN = { top: 4, right: 8, bottom: 4, left: 8 };\n\n/**\n * The palette Figma paints the funnel from: the sequential blue ramp, whose\n * stops read as one quantity falling down the funnel. Every other chart keeps\n * the shared categorical default — a funnel's stages are an *ordered* series,\n * which is what a sequential ramp is for.\n *\n * Figma `8811:175245` uses `dataviz/sequential/blue/{2,4,6,8}`.\n */\nexport const FUNNEL_CHART_DEFAULT_PALETTE: ChartPalette = Object.freeze({\n  type: 'sequential',\n  ramp: 'blue',\n});\n\ntype StagePoint = readonly [number, number];\n\nconst distance = (a: StagePoint, b: StagePoint) =>\n  Math.hypot(b[0] - a[0], b[1] - a[1]);\n\n/** A point `d` px from `from` along the segment toward `to`. */\nfunction along(from: StagePoint, to: StagePoint, d: number): StagePoint {\n  const length = distance(from, to);\n  if (length === 0) return from;\n  return [\n    from[0] + ((to[0] - from[0]) * d) / length,\n    from[1] + ((to[1] - from[1]) * d) / length,\n  ];\n}\n\n// Trimmed to 3dp so the emitted `d` is stable across platforms — a raw float\n// makes every visual-regression baseline and DOM assertion renderer-dependent.\nconst coord = ([x, y]: StagePoint) =>\n  `${Number(x.toFixed(3))},${Number(y.toFixed(3))}`;\n\n/**\n * A closed polygon with rounded corners, as an SVG path.\n *\n * Each corner is trimmed back along both of its edges and bridged with a\n * quadratic curve through the original vertex. The radius is clamped to half of\n * either adjacent edge, so two corners can never overrun each other on a short\n * edge — which is the normal case at the bottom of a funnel, where the last\n * stages are only a few px wide.\n */\nfunction roundedPolygonPath(\n  points: readonly StagePoint[],\n  radius: number | readonly number[]\n): string {\n  const count = points.length;\n  if (count < 3) return '';\n\n  let path = '';\n  for (let i = 0; i < count; i++) {\n    const r = typeof radius === 'number' ? radius : radius[i];\n    const previous = points[(i - 1 + count) % count];\n    const current = points[i];\n    const next = points[(i + 1) % count];\n    const corner = Math.max(\n      0,\n      Math.min(\n        r,\n        distance(previous, current) / 2,\n        distance(current, next) / 2\n      )\n    );\n    const entry = along(current, previous, corner);\n    const exit = along(current, next, corner);\n    path += `${i === 0 ? 'M' : ' L'} ${coord(entry)}`;\n    path += ` Q ${coord(current)} ${coord(exit)}`;\n  }\n  return `${path} Z`;\n}\n\n/**\n * The `d` for one funnel stage — recharts' trapezoid geometry with the design's\n * rounded corners.\n *\n * `x`/`y` is the top-left of the *upper* edge and the shape is centred on\n * `x + upperWidth / 2`, matching recharts' own `getTrapezoidPath`.\n *\n * Either edge can collapse to a single rounded apex rather than a zero-length\n * one — the `triangle` last shape narrows to a point at the bottom, and a\n * `reversed` funnel stands that same triangle on its head at the top.\n */\nexport function funnelChartStagePath(options: {\n  x: number;\n  y: number;\n  upperWidth: number;\n  lowerWidth: number;\n  height: number;\n  /**\n   * Uniform corner radius — applies to all four corners. Overridden per-side\n   * by `topRadius` / `bottomRadius`. When absent, defaults to\n   * `STAGE_RADIUS` (top) and `STAGE_BOTTOM_RADIUS` (bottom).\n   */\n  radius?: number;\n  /** Radius for the two upper corners (default: `STAGE_RADIUS = 2`). */\n  topRadius?: number;\n  /**\n   * Radius for the two lower corners (default: `STAGE_BOTTOM_RADIUS = 1`).\n   *\n   * Figma's bottom corners clip ~0.85px — much smaller than the upper ones —\n   * so the default is intentionally lower than `topRadius`.\n   */\n  bottomRadius?: number;\n}): string {\n  const { x, y, upperWidth, lowerWidth, height } = options;\n  // `radius` is a backward-compat shorthand for all corners.\n  // Per-side props win; if only `radius` is given it applies to both sides.\n  // If nothing is given, use the asymmetric Figma defaults.\n  const uniformRadius = options.radius;\n  const topRadius = options.topRadius ?? uniformRadius ?? STAGE_RADIUS;\n  const bottomRadius =\n    options.bottomRadius ?? uniformRadius ?? STAGE_BOTTOM_RADIUS;\n\n  if (height <= 0 || (upperWidth <= 0 && lowerWidth <= 0)) return '';\n\n  const centre = x + upperWidth / 2;\n  const upper: StagePoint[] =\n    upperWidth <= 0\n      ? [[centre, y]]\n      : [\n          [x, y],\n          [x + upperWidth, y],\n        ];\n  const lower: StagePoint[] =\n    lowerWidth <= 0\n      ? [[centre, y + height]]\n      : [\n          [centre + lowerWidth / 2, y + height],\n          [centre - lowerWidth / 2, y + height],\n        ];\n\n  // Upper points get topRadius, lower points get bottomRadius — matching\n  // Figma's intentional asymmetry (the diagonal-meets-bottom transition\n  // uses a much smaller clip than the diagonal-meets-top one).\n  const radii: number[] = [\n    ...upper.map(() => topRadius),\n    ...lower.map(() => bottomRadius),\n  ];\n  return roundedPolygonPath([...upper, ...lower], radii);\n}\n\n/**\n * Pull a stage's **top** edge down by `gap`, so surface shows between it and the\n * stage above.\n *\n * The top rather than the bottom on purpose: the bottom edge is what\n * `lastShapeType` defines — the triangle's apex — so leaving it exactly where\n * recharts put it keeps a `triangle` funnel ending in a real point instead of a\n * blunt 2px edge. The upper edge slides down the funnel's own slope, so the\n * taper is unchanged rather than steepened.\n *\n * A stage with no room for the gap is returned untouched: better a missing gap\n * than an inverted shape.\n */\nexport function funnelChartStageInset(options: {\n  x: number;\n  y: number;\n  upperWidth: number;\n  lowerWidth: number;\n  height: number;\n  gap: number;\n}) {\n  const { x, y, upperWidth, lowerWidth, height, gap } = options;\n  if (gap <= 0 || height <= gap) {\n    return { x, y, upperWidth, lowerWidth, height };\n  }\n\n  const insetUpperWidth =\n    upperWidth + ((lowerWidth - upperWidth) * gap) / height;\n  return {\n    x: x + upperWidth / 2 - insetUpperWidth / 2,\n    y: y + gap,\n    upperWidth: insetUpperWidth,\n    lowerWidth,\n    height: height - gap,\n  };\n}\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.\n *\n * With nothing beside the funnel — the default, and what Figma draws — the plot\n * is the design's own inset (`PLOT_MARGIN`): just the few px the rounded corners\n * and the apex need, so the funnel fills its 120px square instead of being\n * squeezed into the middle by label room it isn't using.\n *\n * As soon as a label list *does* sit beside the funnel, the side insets come\n * back: 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  const besideOnLeft = stageLabelAt === 'left' || valueLabelAt === 'left';\n  const besideOnRight = stageLabelAt === 'right' || valueLabelAt === 'right';\n\n  // `inside` labels sit on the segments, so they count as \"nothing beside the\n  // funnel\" and keep the tight design margin too.\n  if (!besideOnLeft && !besideOnRight) {\n    return { ...PLOT_MARGIN };\n  }\n\n  return {\n    ...BASE_MARGIN,\n    left: besideOnLeft ? LABEL_SIDE_INSET : 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// What recharts hands a custom `Funnel` `shape`: the trapezoid box it measured,\n// the presentation props it resolved (`fill` from the `Cell`, `stroke`), the\n// data row, and whether this stage is the hovered one.\ntype FunnelStageShapeProps = {\n  x?: number;\n  y?: number;\n  upperWidth?: number;\n  lowerWidth?: number;\n  height?: number;\n  fill?: string;\n  stroke?: string;\n  strokeWidth?: string | number;\n  className?: string;\n  isActive?: boolean;\n  payload?: Record<string, unknown>;\n  showActiveShape?: boolean;\n  /**\n   * Which stage sits at the top of the plot area, and so takes no gap above it.\n   * Not always the first row: `reversed` flips the stack, which puts the *last*\n   * stage at the top.\n   */\n  topStageIndex?: number;\n};\n\n/**\n * One funnel stage. Replaces recharts' `Trapezoid` because the design's stage\n * has two things it can't express: a 2px gap to the stage above and 2px rounded\n * corners.\n *\n * Safe to substitute — recharts puts the tooltip/click handlers on the `<g\n * className=\"recharts-funnel-trapezoid\">` that wraps this, not on the shape, so\n * hover and the tooltip keep working without any event plumbing here.\n */\nfunction FunnelStageShape({\n  x = 0,\n  y = 0,\n  upperWidth = 0,\n  lowerWidth = 0,\n  height = 0,\n  fill,\n  stroke,\n  strokeWidth,\n  className,\n  isActive,\n  payload,\n  showActiveShape,\n  topStageIndex = 0,\n}: FunnelStageShapeProps) {\n  const isTopStage = payload?.[STAGE_INDEX_KEY] === topStageIndex;\n  const inset = funnelChartStageInset({\n    x,\n    y,\n    upperWidth,\n    lowerWidth,\n    height,\n    // The funnel's own top edge is not a seam, so only the stages below the\n    // topmost one are pushed down: n stages give exactly n-1 gaps.\n    gap: isTopStage ? 0 : STAGE_GAP,\n  });\n  const d = funnelChartStagePath(inset);\n  if (!d) return null;\n\n  const outlined = Boolean(isActive && showActiveShape);\n  return (\n    <path\n      className={cn('recharts-funnel-stage', className)}\n      d={d}\n      fill={fill}\n      stroke={outlined ? ACTIVE_STROKE : stroke}\n      strokeWidth={outlined ? ACTIVE_STROKE_WIDTH : strokeWidth}\n    />\n  );\n}\n\nexport interface FunnelChartProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof funnelChartVariants>,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette the stages are painted from — the only source of a\n   * stage's colour, bar a per-stage `stageSettings.color`. Defaults to\n   * `FUNNEL_CHART_DEFAULT_PALETTE` (the sequential blue ramp), which is what\n   * Figma paints the funnel with; a funnel's stages are an ordered series, so a\n   * ramp reads them better than the shared categorical default.\n   * 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  /**\n   * Render the stage list beside the funnel. On by default: the design's funnel\n   * carries no on-plot labels, so the legend is where the stages are named.\n   */\n  showLegend?: boolean;\n  /** Format the value in each legend row — the stage's `dataKey` number. */\n  legendValueFormatter?: (value: string | number) => 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 = false,\n      labelFormat = 'name',\n      labelPosition = 'right',\n      showValueLabels = false,\n      valuePosition,\n      labelFill,\n      labelFormatter,\n      percentFormatter,\n      showLegend = true,\n      legendValueFormatter,\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 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 fill =\n          stageSettings?.[name]?.color ?? `var(--color-${toCssKey(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_INDEX_KEY]: index,\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      data,\n      dataKey,\n      labelFormat,\n      labelFormatter,\n      nameKey,\n      percentFormatter,\n      stageSettings,\n    ]);\n\n    // The legend sits *outside* `ChartContainer`, beside the plot — so it can't\n    // read the `--color-<name>` custom properties `ChartStyle` scopes to\n    // `[data-chart=…]`. Resolving the palette here is what gives its markers the\n    // same colours the stages paint with, the way `PieChart` and\n    // `RadialBarChart` already do for their side legends.\n    const resolvedConfigForLegend = React.useMemo(\n      () =>\n        showLegend\n          ? resolveChartColors(config, palette ?? FUNNEL_CHART_DEFAULT_PALETTE)\n          : null,\n      [showLegend, config, palette]\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    // `config` entry, so a second entry would repeat the first verbatim — and\n    // `ChartLegendContent` keys its entries on `value`, so it would also be a\n    // duplicate React key.\n    const legendPayload = React.useMemo<LegendPayload[]>(() => {\n      if (!resolvedConfigForLegend) return [];\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            // A `stageSettings` colour is a real colour and paints as-is; every\n            // other stage takes its resolved palette stop.\n            color:\n              stageSettings?.[value]?.color ??\n              resolvedConfigForLegend[value]?.color ??\n              String(row.fill),\n            payload: row,\n          },\n        ];\n      });\n    }, [nameKey, seriesData, resolvedConfigForLegend, stageSettings]);\n\n    const resolvedValuePosition =\n      valuePosition ?? funnelChartOppositeSide(labelPosition);\n\n    // When labels sit beside the funnel (not on the segments), the 120px plot\n    // is too narrow: the label margins eat the whole width and leave 0px for the\n    // funnel. Make the plot grow to fill available width in that case; the fixed\n    // 120px square is only for the default \"no outside labels\" layout.\n    const hasOutsideLabels =\n      (showLabels && labelPosition !== 'inside') ||\n      (showValueLabels && resolvedValuePosition !== 'inside');\n\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`.\n    // ChartContainer's CSS neutralizer targets `.recharts-trapezoid`, but our\n    // custom shape renders as `.recharts-funnel-stage`, so the neutralizer\n    // never matches. Explicitly default to `'none'` to suppress the white\n    // outline — and pair a bare `strokeWidth` with the border token so it\n    // doesn't widen an invisible border.\n    const resolvedStroke =\n      stroke ??\n      (strokeWidth != null ? 'var(--ui-border-on-surface-border)' : 'none');\n    // One renderer for both slots: recharts swaps in `activeShape` for the\n    // hovered stage, so leaving it unset would drop back to its own square-\n    // cornered, gapless `Trapezoid` on hover.\n    const renderStage = (stageProps: FunnelStageShapeProps) => (\n      <FunnelStageShape\n        {...stageProps}\n        showActiveShape={showActiveShape}\n        // `reversed` stacks the funnel the other way up, so the stage with no\n        // gap above it is the last row rather than the first.\n        topStageIndex={reversed ? seriesData.length - 1 : 0}\n      />\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-last-shape={lastShape}\n        className={cn(\n          // The design's funnel is a row: a square plot, a 16px gutter, then the\n          // legend taking whatever is left — so the component fills its parent's\n          // width without the plot stretching into a tall, narrow wedge.\n          'flex flex-row items-center gap-4',\n          !showLegend && 'justify-center',\n          funnelChartVariants({ lastShape }),\n          className\n        )}\n        {...props}\n      >\n        <div\n          className={\n            hasOutsideLabels\n              ? 'h-[120px] flex-1'\n              : cn(PLOT_SIZE_CLASS, 'shrink-0')\n          }\n        >\n          <ChartContainer\n            config={config}\n            palette={palette ?? FUNNEL_CHART_DEFAULT_PALETTE}\n            className=\"size-full\"\n          >\n            <RechartsFunnelChart margin={plotMargin}>\n              {showTooltip && (\n                <ChartTooltip\n                  content={\n                    tooltipContent ?? (\n                      <ChartTooltipContent nameKey={nameKey} hideLabel />\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                shape={renderStage}\n                activeShape={renderStage}\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\n                        ? undefined\n                        : 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        {showLegend && resolvedConfigForLegend && (\n          <ChartLegendContent\n            variant=\"list\"\n            payload={legendPayload}\n            config={resolvedConfigForLegend}\n            nameKey={nameKey}\n            valueKey={dataKey}\n            valueFormatter={legendValueFormatter}\n            // Figma paints the funnel legend's value in the primary text token,\n            // not the link token the donut/radial legends use for theirs.\n            valueClassName=\"text-[var(--ui-text-on-surface-primary)]\"\n            className=\"min-w-0 flex-1\"\n          />\n        )}\n      </div>\n    );\n  }\n);\nFunnelChart.displayName = 'FunnelChart';\n\nexport { FunnelChart, funnelChartVariants };\n"],"mappings":"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"}

package/dist/components/ui/histogram/histogram.js

@@ -1,13 +1,13 @@
 "use client";
 import { cn as e } from "../../../lib/utils.js";
-import { ChartContainer as t, ChartTooltip as n, ChartTooltipContent as r } from "../chart/chart.js";
-import { resolveAnimation as i, resolveAxisDomain as a, resolveRotatedTickAnchor as o, resolveXAxisHeight as s, resolveXAxisTitle as c, resolveYAxisTitle as l } from "../chart/chart-format.js";
-import * as u from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Bar as p, BarChart as m, CartesianGrid as h, XAxis as g, YAxis as _ } from "recharts";
+import { ChartContainer as t, ChartTooltip as n, ChartTooltipContent as r, toCssKey as i } from "../chart/chart.js";
+import { resolveAnimation as a, resolveAxisDomain as o, resolveRotatedTickAnchor as s, resolveXAxisHeight as c, resolveXAxisTitle as l, resolveYAxisTitle as u } from "../chart/chart-format.js";
+import * as d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Bar as m, BarChart as h, CartesianGrid as g, XAxis as _, YAxis as v } from "recharts";
 //#region src/components/ui/histogram/histogram.tsx
-var v = (e) => Number(e.toFixed(2));
-function y(e, t, n) {
+var y = (e) => Number(e.toFixed(2));
+function b(e, t, n) {
 	let r = e.filter((e) => typeof e == "number" && Number.isFinite(e));
 	if (r.length === 0 || t < 1) return [];
 	let [i, a] = n ?? [Math.min(...r), Math.max(...r)], o = Math.min(i, a), s = Math.max(i, a), c = o === s ? o + 1 : s, l = (c - o) / t, u = Array.from({ length: t }, (e, n) => {
@@ -15,7 +15,7 @@ function y(e, t, n) {
 		return {
 			x0: r,
 			x1: i,
-			label: `${v(r)}–${v(i)}`,
+			label: `${y(r)}–${y(i)}`,
 			count: 0
 		};
 	});
@@ -26,83 +26,83 @@ function y(e, t, n) {
 	}
 	return u;
 }
-var b = u.forwardRef(({ className: v, config: b, palette: x, values: S, dataKey: C = "count", binCount: w = 10, domain: T, xAxisLabel: E, yAxisLabel: D, yUnit: O, barRadius: k = 0, showGrid: A = !0, showTooltip: j = !0, showXAxis: M = !0, showYAxis: N = !0, xTickFormatter: P, yTickFormatter: F, xAxisAngle: I, xAxisInterval: L, yAxisTickCount: R, yAxisDomain: z, gridDashed: B, gridHorizontal: V, gridVertical: H, tooltipContent: U, animate: W, animationDuration: G, animationBegin: K, animationEasing: q, ...J }, Y) => {
-	let X = i({
-		animate: W,
-		animationDuration: G,
-		animationBegin: K,
-		animationEasing: q
-	}), Z = c(E), Q = l(D), $ = a(z), ee = s(E, I), te = u.useMemo(() => y(S, w, T), [
-		S,
-		w,
-		T
+var x = d.forwardRef(({ className: y, config: x, palette: S, values: C, dataKey: w = "count", binCount: T = 10, domain: E, xAxisLabel: D, yAxisLabel: O, yUnit: k, barRadius: A = 0, showGrid: j = !0, showTooltip: M = !0, showXAxis: N = !0, showYAxis: P = !0, xTickFormatter: F, yTickFormatter: I, xAxisAngle: L, xAxisInterval: R, yAxisTickCount: z, yAxisDomain: B, gridDashed: V, gridHorizontal: H, gridVertical: U, tooltipContent: W, animate: G, animationDuration: K, animationBegin: q, animationEasing: J, ...Y }, X) => {
+	let Z = a({
+		animate: G,
+		animationDuration: K,
+		animationBegin: q,
+		animationEasing: J
+	}), Q = l(D), $ = u(O), ee = o(B), te = c(D, L), ne = d.useMemo(() => b(C, T, E), [
+		C,
+		T,
+		E
 	]).map((e) => ({
 		label: e.label,
-		[C]: e.count
+		[w]: e.count
 	}));
-	return /* @__PURE__ */ d("div", {
-		ref: Y,
-		className: e(v),
-		...J,
-		children: /* @__PURE__ */ d(t, {
-			config: b,
-			palette: x,
+	return /* @__PURE__ */ f("div", {
+		ref: X,
+		className: e(y),
+		...Y,
+		children: /* @__PURE__ */ f(t, {
+			config: x,
+			palette: S,
 			className: "size-full [&_.recharts-label]:fill-foreground",
-			children: /* @__PURE__ */ f(m, {
-				data: te,
+			children: /* @__PURE__ */ p(h, {
+				data: ne,
 				barCategoryGap: 0,
 				children: [
-					A && /* @__PURE__ */ d(h, {
-						horizontal: V ?? !0,
-						vertical: H ?? !1,
-						strokeDasharray: B ? "3 3" : void 0
+					j && /* @__PURE__ */ f(g, {
+						horizontal: H ?? !0,
+						vertical: U ?? !1,
+						strokeDasharray: V ? "3 3" : void 0
 					}),
-					/* @__PURE__ */ d(g, {
+					/* @__PURE__ */ f(_, {
 						dataKey: "label",
-						hide: !M,
+						hide: !N,
 						tickLine: !1,
 						axisLine: !1,
-						tickFormatter: P,
-						angle: I,
-						interval: L,
-						textAnchor: o(I),
-						height: ee,
-						label: Z
+						tickFormatter: F,
+						angle: L,
+						interval: R,
+						textAnchor: s(L),
+						height: te,
+						label: Q
 					}),
-					/* @__PURE__ */ d(_, {
+					/* @__PURE__ */ f(v, {
 						type: "number",
-						hide: !N,
+						hide: !P,
 						tickLine: !1,
 						axisLine: !1,
 						allowDecimals: !1,
-						unit: O,
-						tickFormatter: F,
-						tickCount: R,
-						domain: $,
-						width: D ? 72 : void 0,
-						label: Q
+						unit: k,
+						tickFormatter: I,
+						tickCount: z,
+						domain: ee,
+						width: O ? 72 : void 0,
+						label: $
 					}),
-					j && /* @__PURE__ */ d(n, { content: U ?? /* @__PURE__ */ d(r, {}) }),
-					/* @__PURE__ */ d(p, {
-						dataKey: C,
-						fill: `var(--color-${C})`,
+					M && /* @__PURE__ */ f(n, { content: W ?? /* @__PURE__ */ f(r, {}) }),
+					/* @__PURE__ */ f(m, {
+						dataKey: w,
+						fill: `var(--color-${i(String(w))})`,
 						stroke: "var(--ui-background-surface-primary)",
 						strokeWidth: 1,
-						radius: k > 0 ? [
-							k,
-							k,
+						radius: A > 0 ? [
+							A,
+							A,
 							0,
 							0
 						] : void 0,
-						...X
+						...Z
 					})
 				]
 			})
 		})
 	});
 });
-b.displayName = "Histogram";
+x.displayName = "Histogram";
 //#endregion
-export { b as Histogram, y as computeHistogramBins };
+export { x as Histogram, b as computeHistogramBins };
 
 //# sourceMappingURL=histogram.js.map

package/dist/components/ui/histogram/histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram.js","names":[],"sources":["../../../../src/components/ui/histogram/histogram.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  type ChartConfig,\n  type ChartPalette,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n} from '../chart';\n\n// A histogram bins a set of continuous samples into equal-width ranges and plots\n// the frequency of each as contiguous bars — distinct from BarChart, whose bars\n// are pre-categorized. The binning is the component's job (a pure helper), so the\n// consumer passes raw `values`, not pre-aggregated rows. Built on the shared\n// `Chart` primitives; no new tokens (the single series' color is caller-supplied\n// via `config`, same `--color-<key>` mechanism as the other chart types).\n\nexport interface HistogramBin {\n  /** Lower bound of the bin (inclusive). */\n  x0: number;\n  /** Upper bound of the bin (exclusive, except the last bin which is inclusive). */\n  x1: number;\n  /** Human-readable range label, e.g. `\"0–10\"`. */\n  label: string;\n  /** How many samples fell in the bin. */\n  count: number;\n}\n\nconst roundEdge = (n: number) => Number(n.toFixed(2));\n\n/**\n * Split `values` into `binCount` equal-width bins and count the samples in each.\n * The range is `domain` if given, else the data's [min, max]; values outside the\n * domain are dropped, and the max value lands in the last (inclusive) bin.\n * Returns [] when there's nothing to bin. Exported for unit tests; not part of\n * the package's public API.\n */\nexport function computeHistogramBins(\n  values: ReadonlyArray<number>,\n  binCount: number,\n  domain?: [number, number]\n): HistogramBin[] {\n  const nums = values.filter(\n    (v): v is number => typeof v === 'number' && Number.isFinite(v)\n  );\n  if (nums.length === 0 || binCount < 1) return [];\n\n  const [d0, d1] = domain ?? [Math.min(...nums), Math.max(...nums)];\n  // Normalize an inverted domain ([max, min]) so binning stays robust.\n  const min = Math.min(d0, d1);\n  const hi = Math.max(d0, d1);\n  // A zero-width range (all values equal, or a degenerate domain) can't be\n  // divided — widen it by 1 so the single bin has extent.\n  const max = min === hi ? min + 1 : hi;\n  const width = (max - min) / binCount;\n\n  const bins: HistogramBin[] = Array.from({ length: binCount }, (_, i) => {\n    const x0 = min + i * width;\n    const x1 = i === binCount - 1 ? max : min + (i + 1) * width;\n    return { x0, x1, label: `${roundEdge(x0)}–${roundEdge(x1)}`, count: 0 };\n  });\n\n  for (const v of nums) {\n    if (v < min || v > max) continue;\n    let idx = Math.floor((v - min) / width);\n    if (idx >= binCount) idx = binCount - 1; // the max value\n    bins[idx].count += 1;\n  }\n  return bins;\n}\n\nexport interface HistogramProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps,\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  /** Raw continuous samples to bin (non-finite values are ignored). */\n  values: ReadonlyArray<number>;\n  /**\n   * Single-series map of `label` / `icon` / `tone`, keyed by `dataKey` (imported\n   * from the shared `Chart` primitives). 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  /** `config` key that colors + labels the frequency bars. */\n  dataKey?: string;\n  /** Number of equal-width bins. */\n  binCount?: number;\n  /** Fix the binning range instead of deriving it from the data's min/max. */\n  domain?: [number, number];\n  /** Corner radius on the top of each bar. */\n  barRadius?: number;\n}\n\nconst Histogram = React.forwardRef<HTMLDivElement, HistogramProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      values,\n      dataKey = 'count',\n      binCount = 10,\n      domain,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      barRadius = 0,\n      showGrid = true,\n      showTooltip = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\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    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    const bins = React.useMemo(\n      () => computeHistogramBins(values, binCount, domain),\n      [values, binCount, domain]\n    );\n    // Bars carry the bin `label` as the category and `count` under `dataKey`, so\n    // the tooltip resolves the frequency from `config[dataKey]`.\n    const data = bins.map((bin) => ({ label: bin.label, [dataKey]: bin.count }));\n\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart data={data} barCategoryGap={0}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey=\"label\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              allowDecimals={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            <Bar\n              dataKey={dataKey}\n              fill={`var(--color-${dataKey})`}\n              // A hairline in the surface color separates the contiguous bars so\n              // they don't blend into one mass (same trick as the Treemap cells).\n              stroke=\"var(--ui-background-surface-primary)\"\n              strokeWidth={1}\n              radius={barRadius > 0 ? [barRadius, barRadius, 0, 0] : undefined}\n              {...animation}\n            />\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nHistogram.displayName = 'Histogram';\n\nexport { Histogram };\n"],"mappings":"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"}
+{"version":3,"file":"histogram.js","names":[],"sources":["../../../../src/components/ui/histogram/histogram.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  type ChartConfig,\n  toCssKey,\n  type ChartPalette,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n} from '../chart';\n\n// A histogram bins a set of continuous samples into equal-width ranges and plots\n// the frequency of each as contiguous bars — distinct from BarChart, whose bars\n// are pre-categorized. The binning is the component's job (a pure helper), so the\n// consumer passes raw `values`, not pre-aggregated rows. Built on the shared\n// `Chart` primitives; no new tokens (the single series' color is caller-supplied\n// via `config`, same `--color-<key>` mechanism as the other chart types).\n\nexport interface HistogramBin {\n  /** Lower bound of the bin (inclusive). */\n  x0: number;\n  /** Upper bound of the bin (exclusive, except the last bin which is inclusive). */\n  x1: number;\n  /** Human-readable range label, e.g. `\"0–10\"`. */\n  label: string;\n  /** How many samples fell in the bin. */\n  count: number;\n}\n\nconst roundEdge = (n: number) => Number(n.toFixed(2));\n\n/**\n * Split `values` into `binCount` equal-width bins and count the samples in each.\n * The range is `domain` if given, else the data's [min, max]; values outside the\n * domain are dropped, and the max value lands in the last (inclusive) bin.\n * Returns [] when there's nothing to bin. Exported for unit tests; not part of\n * the package's public API.\n */\nexport function computeHistogramBins(\n  values: ReadonlyArray<number>,\n  binCount: number,\n  domain?: [number, number]\n): HistogramBin[] {\n  const nums = values.filter(\n    (v): v is number => typeof v === 'number' && Number.isFinite(v)\n  );\n  if (nums.length === 0 || binCount < 1) return [];\n\n  const [d0, d1] = domain ?? [Math.min(...nums), Math.max(...nums)];\n  // Normalize an inverted domain ([max, min]) so binning stays robust.\n  const min = Math.min(d0, d1);\n  const hi = Math.max(d0, d1);\n  // A zero-width range (all values equal, or a degenerate domain) can't be\n  // divided — widen it by 1 so the single bin has extent.\n  const max = min === hi ? min + 1 : hi;\n  const width = (max - min) / binCount;\n\n  const bins: HistogramBin[] = Array.from({ length: binCount }, (_, i) => {\n    const x0 = min + i * width;\n    const x1 = i === binCount - 1 ? max : min + (i + 1) * width;\n    return { x0, x1, label: `${roundEdge(x0)}–${roundEdge(x1)}`, count: 0 };\n  });\n\n  for (const v of nums) {\n    if (v < min || v > max) continue;\n    let idx = Math.floor((v - min) / width);\n    if (idx >= binCount) idx = binCount - 1; // the max value\n    bins[idx].count += 1;\n  }\n  return bins;\n}\n\nexport interface HistogramProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps,\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  /** Raw continuous samples to bin (non-finite values are ignored). */\n  values: ReadonlyArray<number>;\n  /**\n   * Single-series map of `label` / `icon` / `tone`, keyed by `dataKey` (imported\n   * from the shared `Chart` primitives). 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  /** `config` key that colors + labels the frequency bars. */\n  dataKey?: string;\n  /** Number of equal-width bins. */\n  binCount?: number;\n  /** Fix the binning range instead of deriving it from the data's min/max. */\n  domain?: [number, number];\n  /** Corner radius on the top of each bar. */\n  barRadius?: number;\n}\n\nconst Histogram = React.forwardRef<HTMLDivElement, HistogramProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      values,\n      dataKey = 'count',\n      binCount = 10,\n      domain,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      barRadius = 0,\n      showGrid = true,\n      showTooltip = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed,\n      gridHorizontal,\n      gridVertical,\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    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    const bins = React.useMemo(\n      () => computeHistogramBins(values, binCount, domain),\n      [values, binCount, domain]\n    );\n    // Bars carry the bin `label` as the category and `count` under `dataKey`, so\n    // the tooltip resolves the frequency from `config[dataKey]`.\n    const data = bins.map((bin) => ({ label: bin.label, [dataKey]: bin.count }));\n\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart data={data} barCategoryGap={0}>\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              dataKey=\"label\"\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              allowDecimals={false}\n              unit={yUnit}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            <Bar\n              dataKey={dataKey}\n              fill={`var(--color-${toCssKey(String(dataKey))})`}\n              // A hairline in the surface color separates the contiguous bars so\n              // they don't blend into one mass (same trick as the Treemap cells).\n              stroke=\"var(--ui-background-surface-primary)\"\n              strokeWidth={1}\n              radius={barRadius > 0 ? [barRadius, barRadius, 0, 0] : undefined}\n              {...animation}\n            />\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nHistogram.displayName = 'Histogram';\n\nexport { Histogram };\n"],"mappings":"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"}

package/dist/components/ui/input-num-picker/input-num-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-num-picker.js","names":[],"sources":["../../../../src/components/ui/input-num-picker/input-num-picker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIconInput } from '../button-icon-input';\n\n// Mirrors the Figma \"InputNumPicker\" component: a numeric stepper field built on\n// Base UI's NumberField (Root/Group/Input/Decrement/Increment), themed by its own\n// `--ui-input-num-picker-*` tier. Adds the field furniture InputText/InputSelect\n// already ship: an optional `label` (with an optional `required` `*`). The stepper\n// buttons reuse `ButtonIconInput` (already themed for exactly this \"small icon\n// inside a field box\" role) via its `render` prop, rather than duplicating its\n// idle/hover/active/disabled token wiring here.\nexport interface InputNumPickerProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Root>,\n    'children'\n  > {\n  /** Field label, rendered above the stepper box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Accessible label for the decrement button. */\n  decrementLabel?: string;\n  /** Accessible label for the increment button. */\n  incrementLabel?: string;\n}\n\nconst InputNumPicker = React.forwardRef<HTMLInputElement, InputNumPickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      decrementLabel = 'Decrease',\n      incrementLabel = 'Increase',\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <NumberFieldPrimitive.Root\n        id={inputId}\n        disabled={disabled}\n        required={required}\n        className={cn(\n          'flex min-w-[var(--ui-input-num-picker-global-container-width-min)] flex-col items-center gap-[var(--ui-input-num-picker-global-container-gap)]',\n          className\n        )}\n        {...props}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex w-full gap-[var(--ui-input-num-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-num-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-num-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-num-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <NumberFieldPrimitive.Group\n          className={cn(\n            'flex h-[var(--ui-input-num-picker-global-box-height)] w-full items-center gap-[var(--ui-input-num-picker-global-box-gap)] rounded-[var(--ui-input-num-picker-global-box-border-radius)] border-[length:var(--ui-input-num-picker-global-box-border-width)] border-solid border-[var(--ui-input-num-picker-normal-box-border-color-idle)] bg-[var(--ui-input-num-picker-global-box-color-idle)] px-[var(--ui-input-num-picker-global-box-padding-x)] py-[var(--ui-input-num-picker-global-box-padding-y)] transition-colors',\n            'not-has-disabled:hover:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] not-has-disabled:hover:bg-[var(--ui-input-num-picker-global-box-color-hover)]',\n            'has-[input:focus-visible]:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n            'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-num-picker-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-num-picker-global-box-color-disabled)]'\n          )}\n        >\n          <NumberFieldPrimitive.Decrement\n            render={\n              <ButtonIconInput aria-label={decrementLabel}>\n                <MinusIcon size={16} />\n              </ButtonIconInput>\n            }\n          />\n\n          <NumberFieldPrimitive.Input\n            ref={ref}\n            className={cn(\n              'min-w-0 flex-1 bg-transparent text-center text-sm leading-6 outline-none',\n              disabled\n                ? 'text-[var(--ui-input-num-picker-global-value-color-disabled)]'\n                : 'text-[var(--ui-input-num-picker-global-value-color-idle)]'\n            )}\n          />\n\n          <NumberFieldPrimitive.Increment\n            render={\n              <ButtonIconInput aria-label={incrementLabel}>\n                <PlusIcon size={16} />\n              </ButtonIconInput>\n            }\n          />\n        </NumberFieldPrimitive.Group>\n      </NumberFieldPrimitive.Root>\n    );\n  }\n);\nInputNumPicker.displayName = 'InputNumPicker';\n\nexport { InputNumPicker };\n"],"mappings":";;;;;;;;AA+BA,IAAM,IAAiB,EAAM,YAEzB,EACE,cACA,OACA,UACA,aACA,aACA,oBAAiB,YACjB,oBAAiB,YACjB,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM;CAEtB,OACE,kBAAC,EAAqB,MAAtB;EACE,IAAI;EACM;EACA;EACV,WAAW,EACT,kJACA,CACF;EACA,GAAI;EARN,UAAA,CAUG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,SAAD;GACE,SAAS;GACT,WAAW,EACT,6FACA,IACI,kEACA,2DACN;GAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACX,UAAA;GAEK,CAAA,CAEH;EAGT,CAAA,GAAA,kBAAC,EAAqB,OAAtB;GACE,WAAW,EACT,8fACA,0KACA,6LACA,0LACF;GANF,UAAA;IAQE,kBAAC,EAAqB,WAAtB,EACE,QACE,kBAAC,GAAD;KAAiB,cAAY;KAC3B,UAAA,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;IACP,CAAA,EAEpB,CAAA;IAED,kBAAC,EAAqB,OAAtB;KACO;KACL,WAAW,EACT,4EACA,IACI,kEACA,2DACN;IACD,CAAA;IAED,kBAAC,EAAqB,WAAtB,EACE,QACE,kBAAC,GAAD;KAAiB,cAAY;KAC3B,UAAA,kBAAC,GAAD,EAAU,MAAM,GAAK,CAAA;IACN,CAAA,EAEpB,CAAA;GACyB;EACH,CAAA,CAAA;;AAE/B,CACF;AACA,EAAe,cAAc"}
+{"version":3,"file":"input-num-picker.js","names":[],"sources":["../../../../src/components/ui/input-num-picker/input-num-picker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIconInput } from '../button-icon-input';\n\n// Mirrors the Figma \"InputNumPicker\" component: a numeric stepper field built on\n// Base UI's NumberField (Root/Group/Input/Decrement/Increment), themed by its own\n// `--ui-input-num-picker-*` tier. Adds the field furniture InputText/InputSelect\n// already ship: an optional `label` (with an optional `required` `*`). The stepper\n// buttons reuse `ButtonIconInput` (already themed for exactly this \"small icon\n// inside a field box\" role) via its `render` prop, rather than duplicating its\n// idle/hover/active/disabled token wiring here.\nexport interface InputNumPickerProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Root>,\n    'children'\n  > {\n  /** Field label, rendered above the stepper box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Accessible label for the decrement button. */\n  decrementLabel?: string;\n  /** Accessible label for the increment button. */\n  incrementLabel?: string;\n}\n\nconst InputNumPicker = React.forwardRef<HTMLInputElement, InputNumPickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      decrementLabel = 'Decrease',\n      incrementLabel = 'Increase',\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <NumberFieldPrimitive.Root\n        id={inputId}\n        disabled={disabled}\n        required={required}\n        className={cn(\n          'flex min-w-[var(--ui-input-num-picker-global-container-width-min)] flex-col items-center gap-[var(--ui-input-num-picker-global-container-gap)]',\n          className\n        )}\n        {...props}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex w-full gap-[var(--ui-input-num-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-num-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-num-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-num-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <NumberFieldPrimitive.Group\n          className={cn(\n            'flex h-[var(--ui-input-num-picker-global-box-height)] w-full items-center gap-[var(--ui-input-num-picker-global-box-gap)] rounded-[var(--ui-input-num-picker-global-box-border-radius)] border-[length:var(--ui-input-num-picker-global-box-border-width)] border-solid border-[var(--ui-input-num-picker-normal-box-border-color-idle)] bg-[var(--ui-input-num-picker-global-box-color-idle)] px-[var(--ui-input-num-picker-global-box-padding-x)] py-[var(--ui-input-num-picker-global-box-padding-y)] transition-colors',\n            'not-has-disabled:hover:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] not-has-disabled:hover:bg-[var(--ui-input-num-picker-global-box-color-hover)]',\n            'has-[input:focus-visible]:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n            'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-num-picker-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-num-picker-global-box-color-disabled)]'\n          )}\n        >\n          <NumberFieldPrimitive.Decrement\n            render={\n              <ButtonIconInput aria-label={decrementLabel}>\n                {/* Full-size glyph swapped for a small variant in Checkbox/Combobox/InputSelect/DropdownMenu's selection-indicator role; this is a decrement affordance, not a selection indicator, so it stays until design rules on whether the inset glyph applies here too. */}\n                <MinusIcon size={16} />\n              </ButtonIconInput>\n            }\n          />\n\n          <NumberFieldPrimitive.Input\n            ref={ref}\n            className={cn(\n              'min-w-0 flex-1 bg-transparent text-center text-sm leading-6 outline-none',\n              disabled\n                ? 'text-[var(--ui-input-num-picker-global-value-color-disabled)]'\n                : 'text-[var(--ui-input-num-picker-global-value-color-idle)]'\n            )}\n          />\n\n          <NumberFieldPrimitive.Increment\n            render={\n              <ButtonIconInput aria-label={incrementLabel}>\n                <PlusIcon size={16} />\n              </ButtonIconInput>\n            }\n          />\n        </NumberFieldPrimitive.Group>\n      </NumberFieldPrimitive.Root>\n    );\n  }\n);\nInputNumPicker.displayName = 'InputNumPicker';\n\nexport { InputNumPicker };\n"],"mappings":";;;;;;;;AA+BA,IAAM,IAAiB,EAAM,YAEzB,EACE,cACA,OACA,UACA,aACA,aACA,oBAAiB,YACjB,oBAAiB,YACjB,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM;CAEtB,OACE,kBAAC,EAAqB,MAAtB;EACE,IAAI;EACM;EACA;EACV,WAAW,EACT,kJACA,CACF;EACA,GAAI;EARN,UAAA,CAUG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,SAAD;GACE,SAAS;GACT,WAAW,EACT,6FACA,IACI,kEACA,2DACN;GAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACX,UAAA;GAEK,CAAA,CAEH;EAGT,CAAA,GAAA,kBAAC,EAAqB,OAAtB;GACE,WAAW,EACT,8fACA,0KACA,6LACA,0LACF;GANF,UAAA;IAQE,kBAAC,EAAqB,WAAtB,EACE,QACE,kBAAC,GAAD;KAAiB,cAAY;KAE3B,UAAA,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;IACP,CAAA,EAEpB,CAAA;IAED,kBAAC,EAAqB,OAAtB;KACO;KACL,WAAW,EACT,4EACA,IACI,kEACA,2DACN;IACD,CAAA;IAED,kBAAC,EAAqB,WAAtB,EACE,QACE,kBAAC,GAAD;KAAiB,cAAY;KAC3B,UAAA,kBAAC,GAAD,EAAU,MAAM,GAAK,CAAA;IACN,CAAA,EAEpB,CAAA;GACyB;EACH,CAAA,CAAA;;AAE/B,CACF;AACA,EAAe,cAAc"}

package/dist/components/ui/input-select/input-select.js

@@ -2,7 +2,7 @@ import { cn as e } from "../../../lib/utils.js";
 import { usePortalContainer as t } from "../../../lib/portal-container.js";
 import * as n from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { CheckIcon as a, ChevronDownIcon as o, ChevronRightIcon as s, CircleWarningIcon as c, InboxIcon as l, MagnifierIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { CheckSmallIcon as a, ChevronDownIcon as o, ChevronRightIcon as s, CircleWarningIcon as c, InboxIcon as l, MagnifierIcon as u } from "@acronis-platform/icons-react/stroke-mono";
 import { Select as d } from "@base-ui/react/select";
 //#region src/components/ui/input-select/input-select.tsx
 var f = n.createContext(!1), p = n.createContext(null);