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

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

@@ -16,9 +16,11 @@ function h(e) {
 		query: i,
 		setQuery: a
 	}), [i]), s = n.useCallback((e, n) => {
-		t?.(e, n), e || a("");
-	}, [t]);
-	return /* @__PURE__ */ r(f.Provider, {
+		t?.(e, n), !e && !n.isCanceled && a("");
+	}, [t]), c = e.open, l = n.useRef(c);
+	return n.useEffect(() => {
+		l.current && c === !1 && a(""), l.current = c;
+	}, [c]), /* @__PURE__ */ r(f.Provider, {
 		value: !!e.multiple,
 		children: /* @__PURE__ */ r(p.Provider, {
 			value: o,
@@ -66,20 +68,27 @@ var b = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(d.Value, {
 	...n
 }));
 b.displayName = "InputSelectValue";
-var x = n.forwardRef(({ className: n, children: i, sideOffset: a = 4, align: o = "start", side: s = "bottom", portalContainer: c, ...l }, u) => {
-	let f = t(), p = c ?? f;
+var x = n.forwardRef(({ className: n, children: i, sideOffset: a = 4, align: o = "start", side: s = "bottom", alignOffset: c, collisionAvoidance: l, anchor: u, portalContainer: f, isPopoverStyled: p = !1, ...m }, h) => {
+	let g = t(), _ = f ?? g;
 	return /* @__PURE__ */ r(d.Portal, {
-		container: p,
+		container: _,
 		children: /* @__PURE__ */ r(d.Positioner, {
 			sideOffset: a,
 			align: o,
 			side: s,
+			alignOffset: c,
+			collisionAvoidance: l,
+			anchor: u,
 			alignItemWithTrigger: !1,
 			className: "z-50 outline-none",
 			children: /* @__PURE__ */ r(d.Popup, {
-				ref: u,
-				className: e("max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none", n),
-				...l,
+				ref: h,
+				className: e("max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm outline-none", p ? [
+					"rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)]",
+					"duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95",
+					"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2"
+				] : "rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] shadow-md", n),
+				...m,
 				children: i
 			})
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"input-select.js","names":[],"sources":["../../../../src/components/ui/input-select/input-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  CircleWarningIcon,\n  InboxIcon,\n  MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// The next-gen select, themed by the dedicated `--ui-input-select-*` tier (global /\n// normal / error / dropdown). It composes Base UI `Select` and adds the field\n// furniture (label, required, description, error) and the dropdown machinery\n// (in-dropdown search, sections/groups, single + multiple items, loading/empty/error\n// status). The trigger box wires each state to its own token — idle / hover / open\n// (`data-popup-open`) + focus ring / disabled — and switches to the error border +\n// `--ui-focus-error` ring when `aria-invalid` is set. Selection mode (single vs\n// multiple) flows from the `multiple` prop on the root via `InputSelectModeContext`:\n// single items toggle the row background and show a trailing check; multiple items\n// keep the row background and show a leading checkbox.\n\nconst InputSelectModeContext = React.createContext(false);\n\ninterface InputSelectFilterContextValue {\n  /** Current in-dropdown search query. */\n  query: string;\n  /** Update the search query. */\n  setQuery: (query: string) => void;\n}\n\nconst InputSelectFilterContext =\n  React.createContext<InputSelectFilterContextValue | null>(null);\n\n/**\n * Read the live in-dropdown search query (and its setter) from the nearest\n * `InputSelect`. Flat item lists filter themselves; use this for hierarchical\n * (tree) dropdowns that need to compute their own visibility.\n */\nfunction useInputSelectFilter(): InputSelectFilterContextValue {\n  const context = React.useContext(InputSelectFilterContext);\n  if (!context) {\n    throw new Error('useInputSelectFilter must be used within <InputSelect>.');\n  }\n  return context;\n}\n\nfunction InputSelect<Value, Multiple extends boolean | undefined = false>(\n  props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n  const { onOpenChange } = props;\n  const [query, setQuery] = React.useState('');\n  const filter = React.useMemo(() => ({ query, setQuery }), [query]);\n\n  // Reset the query when the popup closes so it reopens unfiltered.\n  const handleOpenChange = React.useCallback<\n    NonNullable<SelectPrimitive.Root.Props<Value, Multiple>['onOpenChange']>\n  >(\n    (open, eventDetails) => {\n      onOpenChange?.(open, eventDetails);\n      if (!open) {\n        setQuery('');\n      }\n    },\n    [onOpenChange]\n  );\n\n  return (\n    <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n      <InputSelectFilterContext.Provider value={filter}>\n        <SelectPrimitive.Root {...props} onOpenChange={handleOpenChange} />\n      </InputSelectFilterContext.Provider>\n    </InputSelectModeContext.Provider>\n  );\n}\nInputSelect.displayName = 'InputSelect';\n\nconst InputSelectGroup = SelectPrimitive.Group;\n\n/** Vertical field stack: label, trigger, description/error. */\nconst InputSelectField = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectField.displayName = 'InputSelectField';\n\nconst InputSelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {\n    /** Appends a required `*` after the label text. */\n    required?: boolean;\n  }\n>(({ className, children, required, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      'flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    {required && (\n      <span\n        aria-hidden=\"true\"\n        className=\"text-[var(--ui-input-select-global-required-color)]\"\n      >\n        *\n      </span>\n    )}\n  </SelectPrimitive.Label>\n));\nInputSelectLabel.displayName = 'InputSelectLabel';\n\nconst InputSelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors',\n      'not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n      'focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n      'data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n      'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]',\n      // Error treatment (driven by `aria-invalid`).\n      'aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon className=\"flex size-[var(--ui-input-select-global-icon-box-size)] shrink-0 items-center justify-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\">\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-data-[popup-open]:rotate-180\"\n      />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nInputSelectTrigger.displayName = 'InputSelectTrigger';\n\nconst InputSelectValue = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Value>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Value\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]',\n      'group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectValue.displayName = 'InputSelectValue';\n\nconst InputSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n    sideOffset?: number;\n    align?: SelectPrimitive.Positioner.Props['align'];\n    side?: SelectPrimitive.Positioner.Props['side'];\n    /**\n     * Container to portal the dropdown into. Defaults to the document body;\n     * pass an element to scope the portal (e.g. a shadow root, so the popup\n     * inherits styles defined there).\n     */\n    portalContainer?: SelectPrimitive.Portal.Props['container'];\n  }\n>(\n  (\n    {\n      className,\n      children,\n      sideOffset = 4,\n      align = 'start',\n      side = 'bottom',\n      portalContainer,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <SelectPrimitive.Portal container={resolvedContainer}>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignItemWithTrigger={false}\n        className=\"z-50 outline-none\"\n      >\n        <SelectPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n    );\n  }\n);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/**\n * In-dropdown search row (magnifier + input). By default it drives the\n * `InputSelect` filter context — flat `InputSelectItem`s filter themselves, and\n * tree dropdowns read the query via `useInputSelectFilter`. Pass `value`/`onChange`\n * to control the query externally.\n */\nconst InputSelectSearch = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentPropsWithoutRef<'input'>\n>(({ className, value, onChange, onKeyDown, ...props }, ref) => {\n  const filter = React.useContext(InputSelectFilterContext);\n  const setQuery = filter?.setQuery;\n  const controlled = value !== undefined;\n\n  // When the query is controlled externally, the consumer's `value` is the\n  // source of truth for what's displayed, so keep the internal filter context\n  // (what flat items match against) synced to it. A prop-driven value change —\n  // a \"clear\" button resetting to '', a debounced/transformed value — doesn't\n  // fire `onChange`, so driving the filter off raw DOM events alone would leave\n  // `filter.query` stale and hide every item against a query the box no longer\n  // shows. `setQuery` is a stable state setter, so this runs only when `value`\n  // changes.\n  React.useEffect(() => {\n    if (controlled) {\n      setQuery?.(String(value ?? ''));\n    }\n  }, [controlled, value, setQuery]);\n\n  return (\n    <div className=\"flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]\">\n      <MagnifierIcon\n        size={16}\n        className=\"shrink-0 text-[var(--ui-glyph-on-surface-primary)]\"\n      />\n      <input\n        ref={ref}\n        type=\"search\"\n        value={value ?? filter?.query ?? ''}\n        onChange={(event) => {\n          onChange?.(event);\n          // Uncontrolled: the input's value *is* the filter query, so write it\n          // straight through. Controlled: the effect above syncs the filter to\n          // the consumer's `value` once it re-renders, avoiding a flash of raw\n          // typed text when the consumer debounces or transforms the value.\n          if (!controlled) {\n            filter?.setQuery(event.currentTarget.value);\n          }\n        }}\n        // Base UI Select's typeahead would consume printable keys before they\n        // reach this input, so stop those from bubbling — but let navigation and\n        // selection keys (Arrow*/Home/End/Enter/Escape, all multi-char `key`\n        // names) through so the user can move from the search box into the\n        // filtered list and pick a result with the keyboard.\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (event.key.length === 1) {\n            event.stopPropagation();\n          }\n        }}\n        className={cn(\n          'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nInputSelectSearch.displayName = 'InputSelectSearch';\n\n/** A section (group) of items with an optional header. Divided by a top border. */\nconst InputSelectSection = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSection.displayName = 'InputSelectSection';\n\nconst InputSelectSectionLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSectionLabel.displayName = 'InputSelectSectionLabel';\n\n/**\n * Width (px) of the leading nesting spacer for a 1-based tree `indent` level, per\n * the Figma \"InputSelectDropdownTenants\" spec: level 1 reserves 16 px (enough for a\n * single chevron) and each deeper level adds 24 px — 16 / 40 / 64 for levels 1–3.\n * The tenant icon therefore starts at the same x-position whether or not the row is\n * expandable, because the chevron lives right-aligned inside this reserved space.\n */\nconst NESTING_BASE = 16;\nconst NESTING_STEP = 24;\nfunction nestingWidth(indent: number): number {\n  return NESTING_BASE + (indent - 1) * NESTING_STEP;\n}\n\nexport interface InputSelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n  /** Optional leading icon rendered before the label text. Colored by `--ui-input-select-dropdown-item-global-icon-tenant`. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = no indent). Levels 1–3 reserve 16 / 40 / 64 px. */\n  indent?: number;\n  /**\n   * Text used to match the in-dropdown search query. Defaults to the string\n   * `children`. When a query is active and this text doesn't match, the row hides\n   * itself — unless `hidden` is passed explicitly (tree dropdowns compute their own\n   * visibility). Rows stay mounted while hidden to keep Base UI's selection index\n   * stable.\n   */\n  textValue?: string;\n}\n\nconst InputSelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  InputSelectItemProps\n>(({ className, children, icon, indent, textValue, hidden, ...props }, ref) => {\n  const multiple = React.useContext(InputSelectModeContext);\n  const filter = React.useContext(InputSelectFilterContext);\n  const query = filter?.query.trim().toLowerCase() ?? '';\n  const label = textValue ?? (typeof children === 'string' ? children : undefined);\n  const autoHidden =\n    query.length > 0 && label !== undefined && !label.toLowerCase().includes(query);\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      hidden={hidden ?? autoHidden}\n      className={cn(\n        'group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n        'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n        // Single-select rows tint when selected; multiple-select rows keep the\n        // unselected background (the leading checkbox carries the state).\n        !multiple &&\n          'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n        'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n        className\n      )}\n      {...props}\n    >\n      {multiple && (\n        <span\n          aria-hidden=\"true\"\n          className=\"flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]\"\n        >\n          <CheckIcon size={16} />\n        </span>\n      )}\n      {typeof indent === 'number' && indent > 0 && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0\"\n          style={{ minWidth: nestingWidth(indent) }}\n        />\n      )}\n      {icon && (\n        <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n          {icon}\n        </span>\n      )}\n      <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n        {children}\n      </SelectPrimitive.ItemText>\n      {!multiple && (\n        <SelectPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]\">\n          <CheckIcon size={16} />\n        </SelectPrimitive.ItemIndicator>\n      )}\n    </SelectPrimitive.Item>\n  );\n});\nInputSelectItem.displayName = 'InputSelectItem';\n\nexport interface InputSelectExpanderProps\n  extends React.ComponentPropsWithoutRef<'button'> {\n  /** Whether the group is currently expanded. */\n  expanded: boolean;\n  /** Called when the user clicks the row to toggle expand/collapse. */\n  onToggle: () => void;\n  /** Optional leading icon rendered after the chevron. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = level 1). Levels 1–3 reserve 16 / 40 / 64 px; the chevron sits right-aligned inside. */\n  indent?: number;\n}\n\n/**\n * A non-selectable row that acts as an expand/collapse toggle for a tree group.\n * Visually identical to `InputSelectItem` but is **not** a `SelectPrimitive.Item`,\n * so clicking it won't set the select value.\n *\n * When collapsing a group, keep its child `InputSelectItem`s mounted and toggle\n * their `hidden` prop rather than unmounting them: Base UI's Select tracks the\n * selection by list index, so removing the selected row from the DOM makes a\n * sibling inherit its index and render a phantom check. `hidden` rows keep the\n * indices stable and are skipped by keyboard navigation.\n */\nconst InputSelectExpander = React.forwardRef<\n  HTMLButtonElement,\n  InputSelectExpanderProps\n>(({ className, children, expanded, onToggle, icon, indent, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    onClick={onToggle}\n    aria-expanded={expanded}\n    className={cn(\n      'group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n      'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n      className\n    )}\n    {...props}\n  >\n    <span\n      aria-hidden=\"true\"\n      className=\"flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]\"\n      style={{\n        minWidth:\n          typeof indent === 'number' && indent > 0 ? nestingWidth(indent) : NESTING_BASE,\n      }}\n    >\n      {expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n    </span>\n    {icon && (\n      <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n        {icon}\n      </span>\n    )}\n    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n  </button>\n));\nInputSelectExpander.displayName = 'InputSelectExpander';\n\nconst InputSelectDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectDescription.displayName = 'InputSelectDescription';\n\nconst InputSelectError = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectError.displayName = 'InputSelectError';\n\nexport interface InputSelectStatusProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** Which status to show. Drives the leading icon. */\n  variant: 'loading' | 'empty' | 'error';\n  /** Optional trailing action (e.g. a \"Try again\" button) — shown for `error`. */\n  action?: React.ReactNode;\n}\n\n/** Loading / empty / error status row shown instead of items inside the dropdown. */\nconst InputSelectStatus = React.forwardRef<HTMLDivElement, InputSelectStatusProps>(\n  ({ className, variant, children, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]',\n        className\n      )}\n      {...props}\n    >\n      {variant === 'loading' && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent\"\n        />\n      )}\n      {variant === 'empty' && <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />}\n      {variant === 'error' && <CircleWarningIcon size={24} className=\"text-[var(--ui-glyph-on-status-warning)]\" />}\n      {children}\n      {variant === 'error' && action}\n    </div>\n  )\n);\nInputSelectStatus.displayName = 'InputSelectStatus';\n\nexport {\n  InputSelect,\n  InputSelectField,\n  InputSelectLabel,\n  InputSelectTrigger,\n  InputSelectValue,\n  InputSelectContent,\n  InputSelectSearch,\n  InputSelectGroup,\n  InputSelectSection,\n  InputSelectSectionLabel,\n  InputSelectItem,\n  InputSelectExpander,\n  InputSelectDescription,\n  InputSelectError,\n  InputSelectStatus,\n  useInputSelectFilter,\n};\n"],"mappings":"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"}
+{"version":3,"file":"input-select.js","names":[],"sources":["../../../../src/components/ui/input-select/input-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  CircleWarningIcon,\n  InboxIcon,\n  MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// The next-gen select, themed by the dedicated `--ui-input-select-*` tier (global /\n// normal / error / dropdown). It composes Base UI `Select` and adds the field\n// furniture (label, required, description, error) and the dropdown machinery\n// (in-dropdown search, sections/groups, single + multiple items, loading/empty/error\n// status). The trigger box wires each state to its own token — idle / hover / open\n// (`data-popup-open`) + focus ring / disabled — and switches to the error border +\n// `--ui-focus-error` ring when `aria-invalid` is set. Selection mode (single vs\n// multiple) flows from the `multiple` prop on the root via `InputSelectModeContext`:\n// single items toggle the row background and show a trailing check; multiple items\n// keep the row background and show a leading checkbox.\n\nconst InputSelectModeContext = React.createContext(false);\n\ninterface InputSelectFilterContextValue {\n  /** Current in-dropdown search query. */\n  query: string;\n  /** Update the search query. */\n  setQuery: (query: string) => void;\n}\n\nconst InputSelectFilterContext =\n  React.createContext<InputSelectFilterContextValue | null>(null);\n\n/**\n * Read the live in-dropdown search query (and its setter) from the nearest\n * `InputSelect`. Flat item lists filter themselves; use this for hierarchical\n * (tree) dropdowns that need to compute their own visibility.\n */\nfunction useInputSelectFilter(): InputSelectFilterContextValue {\n  const context = React.useContext(InputSelectFilterContext);\n  if (!context) {\n    throw new Error('useInputSelectFilter must be used within <InputSelect>.');\n  }\n  return context;\n}\n\nfunction InputSelect<Value, Multiple extends boolean | undefined = false>(\n  props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n  const { onOpenChange } = props;\n  const [query, setQuery] = React.useState('');\n  const filter = React.useMemo(() => ({ query, setQuery }), [query]);\n\n  // Reset the query when the popup closes so it reopens unfiltered, via two paths.\n  // 1. `onOpenChange` — the only path in uncontrolled mode, where Base UI owns the\n  //    open state and reports every real transition. A consumer that calls\n  //    `eventDetails.cancel()` keeps the popup open (Base UI skips its own state\n  //    update too), so the query must survive that.\n  // 2. The `open` prop transitioning true -> false — needed in controlled mode,\n  //    where a consumer can flip its own state directly (e.g. an external toggle\n  //    button whose click handler runs after it cancelled Base UI's outside-press\n  //    close) without `onOpenChange` ever firing for that transition. A cancelled\n  //    close leaves `open` at `true`, so this path preserves the query too.\n  const handleOpenChange = React.useCallback<\n    NonNullable<SelectPrimitive.Root.Props<Value, Multiple>['onOpenChange']>\n  >(\n    (open, eventDetails) => {\n      onOpenChange?.(open, eventDetails);\n      if (!open && !eventDetails.isCanceled) {\n        setQuery('');\n      }\n    },\n    [onOpenChange]\n  );\n\n  const controlledOpen = props.open;\n  const previousOpenRef = React.useRef(controlledOpen);\n  React.useEffect(() => {\n    if (previousOpenRef.current && controlledOpen === false) {\n      setQuery('');\n    }\n    previousOpenRef.current = controlledOpen;\n  }, [controlledOpen]);\n\n  return (\n    <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n      <InputSelectFilterContext.Provider value={filter}>\n        <SelectPrimitive.Root {...props} onOpenChange={handleOpenChange} />\n      </InputSelectFilterContext.Provider>\n    </InputSelectModeContext.Provider>\n  );\n}\nInputSelect.displayName = 'InputSelect';\n\nconst InputSelectGroup = SelectPrimitive.Group;\n\n/** Vertical field stack: label, trigger, description/error. */\nconst InputSelectField = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectField.displayName = 'InputSelectField';\n\nconst InputSelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {\n    /** Appends a required `*` after the label text. */\n    required?: boolean;\n  }\n>(({ className, children, required, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      'flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    {required && (\n      <span\n        aria-hidden=\"true\"\n        className=\"text-[var(--ui-input-select-global-required-color)]\"\n      >\n        *\n      </span>\n    )}\n  </SelectPrimitive.Label>\n));\nInputSelectLabel.displayName = 'InputSelectLabel';\n\nconst InputSelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors',\n      'not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n      'focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n      'data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n      'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]',\n      // Error treatment (driven by `aria-invalid`).\n      'aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon className=\"flex size-[var(--ui-input-select-global-icon-box-size)] shrink-0 items-center justify-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\">\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-data-[popup-open]:rotate-180\"\n      />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nInputSelectTrigger.displayName = 'InputSelectTrigger';\n\nconst InputSelectValue = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Value>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Value\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]',\n      'group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectValue.displayName = 'InputSelectValue';\n\nconst InputSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n    sideOffset?: number;\n    align?: SelectPrimitive.Positioner.Props['align'];\n    side?: SelectPrimitive.Positioner.Props['side'];\n    /**\n     * Offset in px along the alignment axis (perpendicular to `side`). Defaults\n     * to Base UI's own `0` when omitted — pass a value to nudge the dropdown\n     * along the trigger's edge without changing its `align`.\n     */\n    alignOffset?: SelectPrimitive.Positioner.Props['alignOffset'];\n    /**\n     * Collision-avoidance strategy. Defaults to Base UI's own flip/shift\n     * behavior, which may move the dropdown off the requested `side`/`align`\n     * when it doesn't fit. Pass `{ side: 'none', fallbackAxisSide: 'none' }`\n     * alongside an explicit `side`/`align` to lock the popup to that placement\n     * with no auto-flip fallback (e.g. \"always to the right, no matter what\":\n     * `side=\"right\" sideOffset={20} collisionAvoidance={{ side: 'none',\n     * fallbackAxisSide: 'none' }}`).\n     */\n    collisionAvoidance?: SelectPrimitive.Positioner.Props['collisionAvoidance'];\n    /**\n     * Element (or ref/getter) the popup positions itself against, overriding\n     * the default of anchoring to `InputSelectTrigger`. Use when the visible\n     * trigger isn't the element Base UI tracks internally — e.g. an external\n     * button drives a hidden trigger, and the popup should align with the\n     * button instead of the hidden trigger's layout position.\n     */\n    anchor?: SelectPrimitive.Positioner.Props['anchor'];\n    /**\n     * Container to portal the dropdown into. Defaults to the nearest\n     * `PortalContainerProvider`, or `document.body` when there is none; pass an\n     * element to scope the portal explicitly (e.g. a shadow root, so the popup\n     * inherits styles defined there).\n     */\n    portalContainer?: SelectPrimitive.Portal.Props['container'];\n    /**\n     * Render the dropdown chrome like `PopoverContent` (`--ui-popover-container-*`\n     * tokens, no shadow, fade/zoom/slide enter-exit animation) instead of the\n     * default `--ui-input-select-dropdown-container-*` tokens + static `shadow-md`.\n     * See `components/ui/popover/popover.tsx`.\n     */\n    isPopoverStyled?: boolean;\n  }\n>(\n  (\n    {\n      className,\n      children,\n      sideOffset = 4,\n      align = 'start',\n      side = 'bottom',\n      alignOffset,\n      collisionAvoidance,\n      anchor,\n      portalContainer,\n      isPopoverStyled = false,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <SelectPrimitive.Portal container={resolvedContainer}>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignOffset={alignOffset}\n        collisionAvoidance={collisionAvoidance}\n        anchor={anchor}\n        alignItemWithTrigger={false}\n        className=\"z-50 outline-none\"\n      >\n        <SelectPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm outline-none',\n            // Keep the border/radius/background token references and the animation\n            // classes below in sync with PopoverContent's container in popover.tsx —\n            // but deliberately NOT its sizing (`min-w`/`max-w`) or `text-foreground`:\n            // the dropdown keeps its own `--anchor-width`/`--available-height` sizing\n            // and default text color whether or not `isPopoverStyled` is set.\n            isPopoverStyled\n              ? [\n                  'rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)]',\n                  'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n                  'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n                ]\n              : 'rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] shadow-md',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n    );\n  }\n);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/**\n * In-dropdown search row (magnifier + input). By default it drives the\n * `InputSelect` filter context — flat `InputSelectItem`s filter themselves, and\n * tree dropdowns read the query via `useInputSelectFilter`. Pass `value`/`onChange`\n * to control the query externally.\n */\nconst InputSelectSearch = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentPropsWithoutRef<'input'>\n>(({ className, value, onChange, onKeyDown, ...props }, ref) => {\n  const filter = React.useContext(InputSelectFilterContext);\n  const setQuery = filter?.setQuery;\n  const controlled = value !== undefined;\n\n  // When the query is controlled externally, the consumer's `value` is the\n  // source of truth for what's displayed, so keep the internal filter context\n  // (what flat items match against) synced to it. A prop-driven value change —\n  // a \"clear\" button resetting to '', a debounced/transformed value — doesn't\n  // fire `onChange`, so driving the filter off raw DOM events alone would leave\n  // `filter.query` stale and hide every item against a query the box no longer\n  // shows. `setQuery` is a stable state setter, so this runs only when `value`\n  // changes.\n  React.useEffect(() => {\n    if (controlled) {\n      setQuery?.(String(value ?? ''));\n    }\n  }, [controlled, value, setQuery]);\n\n  return (\n    <div className=\"flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]\">\n      <MagnifierIcon\n        size={16}\n        className=\"shrink-0 text-[var(--ui-glyph-on-surface-primary)]\"\n      />\n      <input\n        ref={ref}\n        type=\"search\"\n        value={value ?? filter?.query ?? ''}\n        onChange={(event) => {\n          onChange?.(event);\n          // Uncontrolled: the input's value *is* the filter query, so write it\n          // straight through. Controlled: the effect above syncs the filter to\n          // the consumer's `value` once it re-renders, avoiding a flash of raw\n          // typed text when the consumer debounces or transforms the value.\n          if (!controlled) {\n            filter?.setQuery(event.currentTarget.value);\n          }\n        }}\n        // Base UI Select's typeahead would consume printable keys before they\n        // reach this input, so stop those from bubbling — but let navigation and\n        // selection keys (Arrow*/Home/End/Enter/Escape, all multi-char `key`\n        // names) through so the user can move from the search box into the\n        // filtered list and pick a result with the keyboard.\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (event.key.length === 1) {\n            event.stopPropagation();\n          }\n        }}\n        className={cn(\n          'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nInputSelectSearch.displayName = 'InputSelectSearch';\n\n/** A section (group) of items with an optional header. Divided by a top border. */\nconst InputSelectSection = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSection.displayName = 'InputSelectSection';\n\nconst InputSelectSectionLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSectionLabel.displayName = 'InputSelectSectionLabel';\n\n/**\n * Width (px) of the leading nesting spacer for a 1-based tree `indent` level, per\n * the Figma \"InputSelectDropdownTenants\" spec: level 1 reserves 16 px (enough for a\n * single chevron) and each deeper level adds 24 px — 16 / 40 / 64 for levels 1–3.\n * The tenant icon therefore starts at the same x-position whether or not the row is\n * expandable, because the chevron lives right-aligned inside this reserved space.\n */\nconst NESTING_BASE = 16;\nconst NESTING_STEP = 24;\nfunction nestingWidth(indent: number): number {\n  return NESTING_BASE + (indent - 1) * NESTING_STEP;\n}\n\nexport interface InputSelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n  /** Optional leading icon rendered before the label text. Colored by `--ui-input-select-dropdown-item-global-icon-tenant`. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = no indent). Levels 1–3 reserve 16 / 40 / 64 px. */\n  indent?: number;\n  /**\n   * Text used to match the in-dropdown search query. Defaults to the string\n   * `children`. When a query is active and this text doesn't match, the row hides\n   * itself — unless `hidden` is passed explicitly (tree dropdowns compute their own\n   * visibility). Rows stay mounted while hidden to keep Base UI's selection index\n   * stable.\n   */\n  textValue?: string;\n}\n\nconst InputSelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  InputSelectItemProps\n>(({ className, children, icon, indent, textValue, hidden, ...props }, ref) => {\n  const multiple = React.useContext(InputSelectModeContext);\n  const filter = React.useContext(InputSelectFilterContext);\n  const query = filter?.query.trim().toLowerCase() ?? '';\n  const label = textValue ?? (typeof children === 'string' ? children : undefined);\n  const autoHidden =\n    query.length > 0 && label !== undefined && !label.toLowerCase().includes(query);\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      hidden={hidden ?? autoHidden}\n      className={cn(\n        'group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n        'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n        // Single-select rows tint when selected; multiple-select rows keep the\n        // unselected background (the leading checkbox carries the state).\n        !multiple &&\n          'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n        'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n        className\n      )}\n      {...props}\n    >\n      {multiple && (\n        <span\n          aria-hidden=\"true\"\n          className=\"flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]\"\n        >\n          <CheckIcon size={16} />\n        </span>\n      )}\n      {typeof indent === 'number' && indent > 0 && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0\"\n          style={{ minWidth: nestingWidth(indent) }}\n        />\n      )}\n      {icon && (\n        <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n          {icon}\n        </span>\n      )}\n      <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n        {children}\n      </SelectPrimitive.ItemText>\n      {!multiple && (\n        <SelectPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]\">\n          <CheckIcon size={16} />\n        </SelectPrimitive.ItemIndicator>\n      )}\n    </SelectPrimitive.Item>\n  );\n});\nInputSelectItem.displayName = 'InputSelectItem';\n\nexport interface InputSelectExpanderProps\n  extends React.ComponentPropsWithoutRef<'button'> {\n  /** Whether the group is currently expanded. */\n  expanded: boolean;\n  /** Called when the user clicks the row to toggle expand/collapse. */\n  onToggle: () => void;\n  /** Optional leading icon rendered after the chevron. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = level 1). Levels 1–3 reserve 16 / 40 / 64 px; the chevron sits right-aligned inside. */\n  indent?: number;\n}\n\n/**\n * A non-selectable row that acts as an expand/collapse toggle for a tree group.\n * Visually identical to `InputSelectItem` but is **not** a `SelectPrimitive.Item`,\n * so clicking it won't set the select value.\n *\n * When collapsing a group, keep its child `InputSelectItem`s mounted and toggle\n * their `hidden` prop rather than unmounting them: Base UI's Select tracks the\n * selection by list index, so removing the selected row from the DOM makes a\n * sibling inherit its index and render a phantom check. `hidden` rows keep the\n * indices stable and are skipped by keyboard navigation.\n */\nconst InputSelectExpander = React.forwardRef<\n  HTMLButtonElement,\n  InputSelectExpanderProps\n>(({ className, children, expanded, onToggle, icon, indent, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    onClick={onToggle}\n    aria-expanded={expanded}\n    className={cn(\n      'group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n      'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n      className\n    )}\n    {...props}\n  >\n    <span\n      aria-hidden=\"true\"\n      className=\"flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]\"\n      style={{\n        minWidth:\n          typeof indent === 'number' && indent > 0 ? nestingWidth(indent) : NESTING_BASE,\n      }}\n    >\n      {expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n    </span>\n    {icon && (\n      <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n        {icon}\n      </span>\n    )}\n    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n  </button>\n));\nInputSelectExpander.displayName = 'InputSelectExpander';\n\nconst InputSelectDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectDescription.displayName = 'InputSelectDescription';\n\nconst InputSelectError = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectError.displayName = 'InputSelectError';\n\nexport interface InputSelectStatusProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** Which status to show. Drives the leading icon. */\n  variant: 'loading' | 'empty' | 'error';\n  /** Optional trailing action (e.g. a \"Try again\" button) — shown for `error`. */\n  action?: React.ReactNode;\n}\n\n/** Loading / empty / error status row shown instead of items inside the dropdown. */\nconst InputSelectStatus = React.forwardRef<HTMLDivElement, InputSelectStatusProps>(\n  ({ className, variant, children, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]',\n        className\n      )}\n      {...props}\n    >\n      {variant === 'loading' && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent\"\n        />\n      )}\n      {variant === 'empty' && <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />}\n      {variant === 'error' && <CircleWarningIcon size={24} className=\"text-[var(--ui-glyph-on-status-warning)]\" />}\n      {children}\n      {variant === 'error' && action}\n    </div>\n  )\n);\nInputSelectStatus.displayName = 'InputSelectStatus';\n\nexport {\n  InputSelect,\n  InputSelectField,\n  InputSelectLabel,\n  InputSelectTrigger,\n  InputSelectValue,\n  InputSelectContent,\n  InputSelectSearch,\n  InputSelectGroup,\n  InputSelectSection,\n  InputSelectSectionLabel,\n  InputSelectItem,\n  InputSelectExpander,\n  InputSelectDescription,\n  InputSelectError,\n  InputSelectStatus,\n  useInputSelectFilter,\n};\n"],"mappings":"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"}

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

@@ -1,27 +1,27 @@
 "use client";
 import { cn as e } from "../../../lib/utils.js";
 import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as ee } from "../chart/chart.js";
-import { resolveAnimation as o, resolveLabelFillClass as s, toLabelFormatter as c } from "../chart/chart-format.js";
+import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o } from "../chart/chart.js";
+import { resolveAnimation as ee, resolveLabelFillClass as s, toLabelFormatter as c } from "../chart/chart-format.js";
 import * as l from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { LabelList as f, PolarAngleAxis as te, PolarGrid as p, PolarRadiusAxis as m, Radar as h, RadarChart as g } from "recharts";
+import { jsx as u, jsxs as te } from "react/jsx-runtime";
+import { LabelList as d, PolarAngleAxis as f, PolarGrid as ne, PolarRadiusAxis as re, Radar as p, RadarChart as ie } from "recharts";
 //#region src/components/ui/radar-chart/radar-chart.tsx
-var _ = t("", {
+var m = t("", {
 	variants: { gridType: {
 		polygon: "",
 		circle: ""
 	} },
 	defaultVariants: { gridType: "polygon" }
 });
-function v(e, t) {
+function h(e, t) {
 	switch (e) {
 		case "auto": return ["auto", "auto"];
 		case "fixed": return [0, t !== void 0 && Number.isFinite(t) && t > 0 ? t : "auto"];
 		default: return;
 	}
 }
-function y(e, t, n) {
+function g(e, t, n) {
 	let r = t?.color ?? `var(--color-${e})`, i = t?.dot ?? n.showDots;
 	return {
 		fill: r,
@@ -32,9 +32,19 @@ function y(e, t, n) {
 		activeDot: t?.activeDot ?? n.activeDot
 	};
 }
-var ne = 30;
-function re({ seriesKey: e, style: t, animation: n, showLabels: r, labelPosition: i, labelFormatter: a }) {
-	return /* @__PURE__ */ u(h, {
+var _ = 30, ae = 8, v = 187, y = 240, b = 32;
+function x(e, t) {
+	let n = e !== void 0 && e > v / 2, r = n ? y : v;
+	return t ? {
+		heightClass: n ? "h-[272px]" : "h-[219px]",
+		cy: `${Math.floor(r / 2 / (r + b) * 1e5) / 1e3}%`
+	} : {
+		heightClass: n ? "h-[240px]" : "h-[187px]",
+		cy: void 0
+	};
+}
+function oe({ seriesKey: e, style: t, animation: n, showLabels: r, labelPosition: i, labelFormatter: a }) {
+	return /* @__PURE__ */ u(p, {
 		dataKey: e,
 		stroke: t.stroke,
 		fill: t.fill,
@@ -43,7 +53,7 @@ function re({ seriesKey: e, style: t, animation: n, showLabels: r, labelPosition
 		dot: t.dot,
 		activeDot: t.activeDot,
 		...n,
-		children: r && /* @__PURE__ */ u(f, {
+		children: r && /* @__PURE__ */ u(d, {
 			dataKey: e,
 			position: i,
 			formatter: c(a),
@@ -52,80 +62,80 @@ function re({ seriesKey: e, style: t, animation: n, showLabels: r, labelPosition
 		})
 	}, e);
 }
-var b = l.forwardRef(({ className: t, config: s, palette: c, data: l, dataKeys: f, angleKey: h, seriesSettings: b, gridType: x = "polygon", fillOpacity: S = .3, strokeWidth: C = 2, showDots: w = !1, dotRadius: T = 3, activeDot: E, showGrid: D = !0, radialLines: O = !0, showAngleAxis: k = !0, angleAxisOrientation: A, angleAxisLine: j = !0, angleAxisLineType: M, angleTickLine: N = !0, angleTickSize: P, showRadiusAxis: F = !1, radiusAxisAngle: I, radiusAxisOrientation: L, radiusAxisDomain: R, radiusAxisDomainMax: z, radiusAxisTickCount: ie, radiusAxisReversed: B = !1, cx: V, cy: H, startAngle: U, endAngle: W, innerRadius: G, outerRadius: K, margin: q, showTooltip: J = !0, showLegend: Y = !0, legendPosition: X = "bottom", tooltipContent: ae, animate: oe, animationDuration: se, animationBegin: ce, animationEasing: Z, showLabels: Q = !1, labelPosition: le, labelFormatter: ue, ...de }, fe) => {
-	let pe = o({
-		animate: oe,
-		animationDuration: se,
-		animationBegin: ce,
-		animationEasing: Z
-	}), me = le ?? "top", $ = v(R, z), he = F || $ !== void 0 || B, ge = {
-		fillOpacity: S,
-		strokeWidth: C,
-		showDots: w,
-		dotRadius: T,
-		activeDot: E
-	};
+var S = l.forwardRef(({ className: t, config: s, palette: c, data: l, dataKeys: d, angleKey: p, seriesSettings: v, gridType: y = "polygon", fillOpacity: b = .3, strokeWidth: S = 2, showDots: C = !0, dotRadius: w = 2, activeDot: T, showGrid: E = !0, radialLines: D = !0, showAngleAxis: O = !0, angleAxisOrientation: k, angleAxisLine: A = !0, angleAxisLineType: j, angleTickLine: M = !0, angleTickSize: N, showRadiusAxis: P = !1, radiusAxisAngle: F, radiusAxisOrientation: I, radiusAxisDomain: L, radiusAxisDomainMax: R, radiusAxisTickCount: z, radiusAxisReversed: B = !1, cx: V, cy: H, startAngle: se, endAngle: U, innerRadius: W, outerRadius: G, margin: K, showTooltip: ce = !0, showLegend: q = !0, tooltipContent: le, animate: ue, animationDuration: de, animationBegin: fe, animationEasing: pe, showLabels: J = !1, labelPosition: me, labelFormatter: he, ...ge }, _e) => {
+	let Y = ee({
+		animate: ue,
+		animationDuration: de,
+		animationBegin: fe,
+		animationEasing: pe
+	}), ve = me ?? "top", X = h(L, R), ye = P || X !== void 0 || B, be = {
+		fillOpacity: b,
+		strokeWidth: S,
+		showDots: C,
+		dotRadius: w,
+		activeDot: T
+	}, Z = G ?? 78, Q = N ?? (J ? _ : 4), $ = x(typeof Z == "number" ? Z + Q + ae : void 0, q), xe = /(?:^|\s)(?:h-|size-|min-h-|max-h-)/.test(t ?? "");
 	return /* @__PURE__ */ u("div", {
-		ref: fe,
-		"data-grid-type": x,
-		className: e(_({ gridType: x }), t),
-		...de,
+		ref: _e,
+		"data-grid-type": y,
+		className: e(m({ gridType: y }), $.heightClass, t),
+		...ge,
 		children: /* @__PURE__ */ u(n, {
 			config: s,
 			palette: c,
-			className: "size-full [&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground [&_.recharts-polar-radius-axis-line]:stroke-border [&_.recharts-polar-radius-axis-tick_text]:fill-muted-foreground",
-			children: /* @__PURE__ */ d(g, {
+			className: e("size-full", "[&_.recharts-polar-angle-axis-tick_text]:fill-[var(--ui-text-on-surface-secondary)]! [&_.recharts-polar-angle-axis-tick_text]:text-xs [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-[var(--ui-border-on-surface-divider)]! [&_.recharts-polar-radius-axis-line]:stroke-[var(--ui-border-on-surface-divider)]! [&_.recharts-polar-radius-axis-tick_text]:fill-[var(--ui-text-on-surface-secondary)]! [&_.recharts-polar-radius-axis-tick_text]:text-xs"),
+			children: /* @__PURE__ */ te(ie, {
 				data: l,
 				cx: V,
-				cy: H,
-				startAngle: U,
-				endAngle: W,
-				innerRadius: G,
-				outerRadius: K,
-				margin: q,
+				cy: H ?? (xe ? void 0 : $.cy),
+				startAngle: se,
+				endAngle: U,
+				innerRadius: W,
+				outerRadius: Z,
+				margin: K,
 				children: [
-					J && /* @__PURE__ */ u(a, { content: ae ?? /* @__PURE__ */ u(ee, {}) }),
-					D && /* @__PURE__ */ u(p, {
-						gridType: x ?? "polygon",
-						radialLines: O
+					ce && /* @__PURE__ */ u(a, { content: le ?? /* @__PURE__ */ u(o, {}) }),
+					E && /* @__PURE__ */ u(ne, {
+						gridType: y ?? "polygon",
+						radialLines: D
 					}),
-					/* @__PURE__ */ u(te, {
-						dataKey: h,
-						orientation: A,
-						axisLineType: M,
-						tick: k,
-						axisLine: k && j,
-						tickLine: k && N,
-						tickSize: P ?? (Q ? ne : void 0)
+					/* @__PURE__ */ u(f, {
+						dataKey: p,
+						orientation: k,
+						axisLineType: j,
+						tick: O,
+						axisLine: O && A,
+						tickLine: O && M,
+						tickSize: Q
 					}),
-					he && /* @__PURE__ */ u(m, {
-						angle: I,
-						orientation: L,
-						domain: $,
-						tickCount: ie,
+					ye && /* @__PURE__ */ u(re, {
+						angle: F,
+						orientation: I,
+						domain: X,
+						tickCount: z,
 						reversed: B,
-						tick: F,
-						axisLine: F
+						tick: P,
+						axisLine: P
 					}),
-					Y && /* @__PURE__ */ u(r, {
-						verticalAlign: X,
-						content: /* @__PURE__ */ u(i, { verticalAlign: X })
+					q && /* @__PURE__ */ u(r, {
+						verticalAlign: "bottom",
+						content: /* @__PURE__ */ u(i, { verticalAlign: "bottom" })
 					}),
-					f.map((e) => re({
+					d.map((e) => oe({
 						seriesKey: e,
-						style: y(e, b?.[e], ge),
-						animation: pe,
-						showLabels: Q,
-						labelPosition: me,
-						labelFormatter: ue
+						style: g(e, v?.[e], be),
+						animation: Y,
+						showLabels: J,
+						labelPosition: ve,
+						labelFormatter: he
 					}))
 				]
 			})
 		})
 	});
 });
-b.displayName = "RadarChart";
+S.displayName = "RadarChart";
 //#endregion
-export { b as RadarChart, _ as radarChartVariants, v as radarRadiusAxisDomain, y as radarSeriesStyle };
+export { S as RadarChart, m as radarChartVariants, x as radarPlotBox, h as radarRadiusAxisDomain, g as radarSeriesStyle };
 
 //# sourceMappingURL=radar-chart.js.map