@acronis-platform/ui-react 5.1.1 → 5.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.js","names":[],"sources":["../../../../src/components/ui/bar-chart/bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  Brush,\n  CartesianGrid,\n  Cell,\n  LabelList,\n  ReferenceArea,\n  ReferenceLine,\n  Rectangle,\n  Text,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport type { BarShapeProps } from 'recharts/types/cartesian/Bar';\nimport { Meter as MeterPrimitive } from '@base-ui/react/meter';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\nimport {\n  CHART_LABEL_FONT_SIZE,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveBrushProps,\n  resolveCartesianLabelPosition,\n  resolveCategoryRange,\n  resolveChartReferenceValue,\n  resolveLabelFillClass,\n  resolveReferenceLineProps,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  resolveChartColors,\n  toLabelFormatter,\n  toReferenceLineList,\n  type ChartConfig,\n  type ChartPalette,\n  type ChartStatusTone,\n  type ChartReferenceLine,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n  type ChartBrushProps,\n  type ChartCategoryRange,\n  type ChartDataLabelProps,\n  type CartesianLabelPosition,\n} from '../chart';\n\n// The two CVA axes are the design's Bar-chart variant set (B2): `orientation`\n// and `layout` (grouped side-by-side vs stacked). `orientation` is the\n// discriminant for *which component this is*: `vertical` renders the typed\n// recharts composition over the shared `Chart` primitives (bars rising from a\n// category X axis), `horizontal` renders the labelled proportional bar list\n// below, which has no axes, grid, or recharts at all. The classes stay empty\n// because neither mode is styled by a variant class — the recharts SVG draws\n// the vertical bars, and the horizontal list carries its own layout. CVA is\n// kept so the variant set is a first-class, spec-conformant part of the API\n// (matched against ui-spec's api.yaml enums); the resolved values are mirrored\n// onto `data-orientation` / `data-layout` for styling hooks and tests.\nconst barChartVariants = cva('', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: '',\n    },\n    layout: {\n      grouped: '',\n      stacked: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    layout: 'grouped',\n  },\n});\n\n/**\n * How a bar is painted. `rounded` rounds the growing end by `barRadius`; `pill`\n * rounds every corner to a capsule; `gradient` fades the series color down the\n * bar; `pattern` fills it with diagonal hatching in the series color (a\n * colorblind-safe way to set a subset of bars apart).\n */\nexport type BarChartBarShape = 'rounded' | 'pill' | 'gradient' | 'pattern';\n\n/**\n * Style override for one series over a range of categories — e.g. \"the forecast\n * tail from September onward reads translucent and dashed\". Anything left unset\n * keeps the series' normal painting.\n */\nexport interface BarChartBarSettings extends ChartCategoryRange {\n  /** Fill for the matched bars. Defaults to the series color. */\n  fill?: string;\n  /** Fill opacity for the matched bars. */\n  opacity?: number;\n  /** Outline the matched bars with a dashed stroke in the series color. */\n  dashed?: boolean;\n  /** Shape for the matched bars, overriding the chart's `barShape`. */\n  shape?: BarChartBarShape;\n  /**\n   * Track behind the matched bars: `true` fills the plot height, while a data\n   * field name caps it at that row's value — the headroom between a projection\n   * and its upper bound. A capped track stacks on its bar, so it needs the\n   * default `layout=\"grouped\"`; under `layout=\"stacked\"` it is ignored.\n   */\n  background?: boolean | string;\n}\n\n/** A shaded band behind a range of categories. */\nexport interface BarChartReferenceArea extends ChartCategoryRange {\n  /** Caption above the band. */\n  label?: string;\n  /**\n   * Mark the category ticks under the band — accent color, italic — so the\n   * highlighted range reads on the axis too. On by default.\n   */\n  highlightTicks?: boolean;\n  /**\n   * Draw a dashed rule at the band's leading edge — the hand-off into a\n   * forecast. Off by default.\n   */\n  divider?: boolean;\n}\n\n// Reserved field prefix for the synthetic headroom series a capped track\n// stacks onto its bar. It must never surface in the tooltip or the legend.\nconst HEADROOM_FIELD_PREFIX = '__headroom_';\n\n/**\n * Drop the synthetic headroom series from a recharts tooltip/legend payload,\n * keeping the real series (and their order). `legendType`/`tooltipType=\"none\"`\n * are set on those bars too, but recharts still lists them, so this filter is\n * what actually keeps them out — hence it's unit-tested.\n */\nexport function dropHeadroomSeries<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined,\n  dataKeys?: string[]\n): T[] | undefined {\n  const real = payload?.filter(\n    (item) => !String(item.dataKey).startsWith(HEADROOM_FIELD_PREFIX)\n  );\n  // recharts sorts the legend payload alphabetically by series name by default\n  // (its `itemSorter: 'value'`), so passing `dataKeys` puts the entries back in\n  // the order the caller declared them.\n  return dataKeys\n    ? real?.slice().sort(\n        (a, b) =>\n          dataKeys.indexOf(String(a.dataKey)) -\n          dataKeys.indexOf(String(b.dataKey))\n      )\n    : real;\n}\n\n/**\n * Swap a paint-server fill back to the series color for the chrome. A\n * `gradient` / `pattern` bar fills from `url(#…)`, which paints SVG but means\n * nothing as a CSS background — the legend swatch and the tooltip dot would\n * render blank — so they fall back to the series' own `--color-<key>`.\n */\nexport function withSeriesColor<T extends { dataKey?: unknown; color?: string }>(\n  payload: readonly T[] | undefined\n): T[] | undefined {\n  return payload?.map((item) =>\n    item.color?.startsWith('url(')\n      ? { ...item, color: `var(--color-${String(item.dataKey)})` }\n      : item\n  );\n}\n\ntype TooltipContentType = NonNullable<\n  React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<\n  TooltipContentType,\n  (...args: never[]) => unknown\n>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\ntype LegendContentType = NonNullable<\n  React.ComponentProps<typeof ChartLegend>['content']\n>;\ntype LegendContentFn = Extract<LegendContentType, (...args: never[]) => unknown>;\ntype LegendRenderProps = Parameters<LegendContentFn>[0];\n\n/**\n * Tooltip content that normalizes recharts' payload before anything renders it:\n * the synthetic headroom series stripped, the rows put back in `dataKeys` order,\n * and paint-server fills swapped back to the series color. Falls through to a\n * caller-supplied `content`, preserving recharts' own mount semantics — a\n * function via `createElement` (its own component identity + hook state), an\n * element via `cloneElement`.\n *\n * This is a component rather than a per-render wrapper factory on purpose:\n * recharts renders `content` by cloning the element it is given\n * (`Tooltip.js:27-28`), so a stable module-level type here means the subtree is\n * never remounted, whatever the caller passes.\n */\nexport function NormalizedTooltipContent({\n  content,\n  dataKeys,\n  ...props\n}: Partial<TooltipRenderProps> & {\n  content?: TooltipContentType;\n  dataKeys?: string[];\n}) {\n  const merged = {\n    ...props,\n    payload: withSeriesColor(dropHeadroomSeries(props.payload, dataKeys)),\n  } as TooltipRenderProps;\n\n  if (!content) {\n    return <ChartTooltipContent {...(merged as ChartTooltipContentProps)} />;\n  }\n  return typeof content === 'function'\n    ? React.createElement(\n        content as React.FunctionComponent<TooltipRenderProps>,\n        merged\n      )\n    : React.cloneElement(content, merged);\n}\n\n/**\n * Legend content over the same normalization. Ordering is the reason this\n * applies unconditionally: recharts sorts legend entries alphabetically by\n * series name by default (`itemSorter: 'value'`), so without putting them back\n * in `dataKeys` order the legend would silently reorder itself depending on\n * which bar-styling props happen to be set.\n */\nexport function NormalizedLegendContent({\n  dataKeys,\n  ...props\n}: Partial<LegendRenderProps> & { dataKeys: string[] }) {\n  return (\n    <ChartLegendContent\n      verticalAlign={props.verticalAlign}\n      payload={\n        withSeriesColor(\n          dropHeadroomSeries(props.payload, dataKeys)\n        ) as ChartLegendContentProps['payload']\n      }\n    />\n  );\n}\n\n/** Paint overrides recharts spreads over a bar to mark it as the active one. */\ninterface BarPaintOverride {\n  fill?: string;\n  fillOpacity?: number;\n}\n\n/**\n * Draw a bar, optionally over its full-height track (recharts hands a custom\n * `<Bar shape>` the track geometry alongside the bar's). Only geometry and\n * paint props are forwarded — recharts also passes the whole data entry, and\n * spreading that onto an SVG node would leak data fields into the DOM.\n *\n * `paint` is how the active bar keeps its track: recharts swaps a custom\n * `shape` out for the `activeBar` option while a bar is hovered\n * (`Bar.js` `BarRectangleWithActiveState`), so the active option has to be a\n * shape of its own that redraws the track and applies the highlight itself.\n */\nfunction renderBarWithTrack({\n  bar,\n  track,\n  trackFill,\n  paint,\n}: {\n  bar: Omit<BarShapeProps, 'background' | 'index'>;\n  track?: BarShapeProps['background'];\n  trackFill: string;\n  paint?: BarPaintOverride;\n}) {\n  return (\n    <>\n      {track && (\n        <Rectangle\n          className=\"recharts-bar-background-rectangle\"\n          x={track.x ?? undefined}\n          y={track.y ?? undefined}\n          width={track.width ?? undefined}\n          height={track.height ?? undefined}\n          fill={trackFill}\n        />\n      )}\n      <Rectangle\n        x={bar.x ?? undefined}\n        y={bar.y ?? undefined}\n        width={bar.width ?? undefined}\n        height={bar.height ?? undefined}\n        radius={bar.radius}\n        fill={paint?.fill ?? bar.fill}\n        fillOpacity={paint?.fillOpacity ?? bar.fillOpacity}\n        stroke={bar.stroke}\n        strokeWidth={bar.strokeWidth}\n        strokeDasharray={bar.strokeDasharray}\n      />\n    </>\n  );\n}\n\n/**\n * Build the `<Bar shape>` that draws a range-scoped track. recharts' own\n * `background` is all-or-nothing per series, so the track is drawn per row and\n * hidden where the range doesn't apply.\n */\nexport function createTrackShape({\n  inRange,\n  trackFill,\n  paint,\n}: {\n  inRange: (row: number) => boolean;\n  trackFill: string;\n  paint?: BarPaintOverride;\n}) {\n  return ({ background: track, index: row, ...bar }: BarShapeProps) =>\n    renderBarWithTrack({\n      bar,\n      track: inRange(row) ? track : undefined,\n      trackFill,\n      paint,\n    });\n}\n\n/**\n * The `shape` / `activeBar` pair one series' `<Bar>` is given.\n *\n * They resolve together because recharts swaps a custom `shape` out for the\n * `activeBar` option while a bar is hovered: a range-scoped track has to be\n * redrawn by the active option too, or the track blinks out under the cursor.\n */\nfunction resolveBarShapes({\n  rangeBackground,\n  inRange,\n  trackFill,\n  activeBarOption,\n}: {\n  /**\n   * recharts takes one `background` per series, so a range-scoped one is drawn\n   * per row by a custom shape instead: hidden where it doesn't apply.\n   */\n  rangeBackground: boolean;\n  inRange: (row: number) => boolean;\n  trackFill: string;\n  activeBarOption: BarPaintOverride | false;\n}) {\n  if (!rangeBackground) {\n    return { shape: undefined, activeBar: activeBarOption };\n  }\n  return {\n    shape: createTrackShape({ inRange, trackFill }),\n    activeBar: activeBarOption\n      ? createTrackShape({ inRange, trackFill, paint: activeBarOption })\n      : activeBarOption,\n  };\n}\n\n/**\n * Draw a highlight band plus a dashed rule on its leading edge — the left edge,\n * since the category axis runs along X.\n *\n * The band's own paint comes from the props recharts hands the shape — a\n * `<ReferenceArea shape>` still receives the element's `fill`/`fillOpacity`\n * (`ReferenceArea.js` `renderRect`), so hardcoding them here would quietly\n * ignore whatever the caller set.\n */\nfunction renderBandWithDivider(band: {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  fill?: string;\n  fillOpacity?: number;\n}) {\n  const { x = 0, y = 0, width = 0, height = 0, fill, fillOpacity } = band;\n  return (\n    <>\n      <Rectangle\n        className=\"recharts-reference-area-rect\"\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        fill={fill}\n        fillOpacity={fillOpacity}\n      />\n      <line\n        x1={x}\n        y1={y}\n        x2={x}\n        y2={y + height}\n        stroke=\"var(--ui-border-on-surface-border)\"\n        strokeDasharray=\"4 4\"\n      />\n    </>\n  );\n}\n\n/**\n * The `<ReferenceArea shape>` for a band, or `undefined` so recharts draws its\n * own rect. A custom shape is only needed for the leading-edge rule: a\n * `ReferenceLine` would sit on the tick's centre, and only the band knows where\n * its own edge is.\n */\nfunction resolveBandShape(divider: boolean | undefined) {\n  if (!divider) return undefined;\n  return renderBandWithDivider;\n}\n\n/**\n * A band's caption as recharts' native `label`. `'insideTop'` is asserted\n * because, read outside the JSX attribute, it would widen to `string` and stop\n * matching recharts' `Position` union.\n */\nfunction resolveBandLabel(label: string | undefined) {\n  return label\n    ? {\n        value: label,\n        position: 'insideTop' as const,\n        fill: 'var(--ui-text-on-surface-secondary)',\n        fontSize: 12,\n      }\n    : undefined;\n}\n\n/**\n * The `<defs>` a `gradient` / `pattern` bar fills from — one paint server per\n * series, since each is painted in that series' own color. Ids are namespaced\n * by the chart instance so two charts on a page can't collide.\n *\n * Safe to render as a component: unlike `Bar`'s cells, the chart renders its\n * children straight through rather than looking them up by type.\n */\nfunction BarPaintServers({\n  id,\n  dataKeys,\n  shapes,\n}: {\n  id: string;\n  dataKeys: string[];\n  shapes: ReadonlySet<BarChartBarShape>;\n}) {\n  const hasGradient = shapes.has('gradient');\n  const hasPattern = shapes.has('pattern');\n  if (!hasGradient && !hasPattern) return null;\n\n  return (\n    <defs>\n      {dataKeys.map((key) => (\n        <React.Fragment key={key}>\n          {/* Bars grow up, so a gradient runs top-down. */}\n          {hasGradient && (\n            <linearGradient id={`${id}-gradient-${key}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop\n                offset=\"0%\"\n                stopColor={`var(--color-${key})`}\n                stopOpacity={1}\n              />\n              <stop\n                offset=\"100%\"\n                stopColor={`var(--color-${key})`}\n                stopOpacity={0.35}\n              />\n            </linearGradient>\n          )}\n          {hasPattern && (\n            <pattern\n              id={`${id}-pattern-${key}`}\n              patternUnits=\"userSpaceOnUse\"\n              width={6}\n              height={6}\n              patternTransform=\"rotate(45)\"\n            >\n              <rect\n                width={6}\n                height={6}\n                fill={`var(--color-${key})`}\n                fillOpacity={0.25}\n              />\n              <line\n                x1={0}\n                y1={0}\n                x2={0}\n                y2={6}\n                stroke={`var(--color-${key})`}\n                strokeWidth={3}\n              />\n            </pattern>\n          )}\n        </React.Fragment>\n      ))}\n    </defs>\n  );\n}\n\n/** Corner radius as recharts' `Rectangle` takes it: one value or a 4-tuple. */\ntype BarRadius = number | [number, number, number, number] | undefined;\n\ninterface RangeCellsOptions {\n  data: ReadonlyArray<Record<string, string | number>>;\n  /** `data` plus the synthetic headroom fields, if any were added. */\n  chartData: ReadonlyArray<Record<string, string | number>>;\n  xKey: string;\n  seriesKey: string;\n  settings: BarChartBarSettings;\n  /** Inclusive row bounds the settings apply to. */\n  range: [number, number];\n  headroomKey: string | undefined;\n  barShape: BarChartBarShape;\n  rounded: boolean;\n  fillOf: (key: string, shape: BarChartBarShape) => string;\n  radiusFor: (shape: BarChartBarShape, rounded: boolean) => BarRadius;\n}\n\n/**\n * The `<Cell>` list that applies a series' `barSettings` over its range: the\n * matched rows take the override fill/opacity/dash/shape, the rest keep the\n * series' normal painting.\n *\n * A plain function returning the elements, deliberately not a component:\n * `Bar` discovers its cells with `findAllByType(props.children, Cell)`\n * (recharts `Bar.js`), which matches each direct child on its own display\n * name. Wrapping these in a component would make that lookup find nothing and\n * silently drop every per-range style — no error, just unstyled bars.\n * Returning an array keeps them direct children, since recharts' `toArray`\n * flattens arrays and unwraps fragments.\n */\nfunction rangeCells({\n  data,\n  chartData,\n  xKey,\n  seriesKey,\n  settings,\n  range,\n  headroomKey,\n  barShape,\n  rounded,\n  fillOf,\n  radiusFor,\n}: RangeCellsOptions) {\n  const { fill, opacity, dashed } = settings;\n\n  return data.map((row, rowIndex) => {\n    const on = rowIndex >= range[0] && rowIndex <= range[1];\n    const shape = (on && settings.shape) || barShape;\n    // Only a row that actually carries headroom gives up its rounded end — a\n    // row in range whose upper bound is missing, or no higher than its value,\n    // keeps it.\n    const stacksHeadroom =\n      headroomKey !== undefined &&\n      Number(\n        (chartData[rowIndex] as Record<string, unknown>)?.[\n          `${HEADROOM_FIELD_PREFIX}${seriesKey}`\n        ]\n      ) > 0;\n\n    return (\n      <Cell\n        key={`${seriesKey}-${String(row[xKey])}-${rowIndex}`}\n        fill={\n          on ? (fill ?? fillOf(seriesKey, shape)) : fillOf(seriesKey, barShape)\n        }\n        fillOpacity={on ? opacity : undefined}\n        stroke={on && dashed ? `var(--color-${seriesKey})` : undefined}\n        strokeWidth={on && dashed ? 1 : undefined}\n        strokeDasharray={on && dashed ? '4 3' : undefined}\n        // Cell types `radius` as the SVG attribute, but it feeds recharts'\n        // Rectangle, which takes the 4-tuple. A bar with headroom stacked on it\n        // hands the rounded end to that segment instead.\n        radius={\n          (stacksHeadroom ? undefined : radiusFor(shape, rounded)) as\n            | number\n            | undefined\n        }\n      />\n    );\n  });\n}\n\n/**\n * The recharts bar chart: bars rising from a category X axis, with axes, grid,\n * tooltip and legend. This is the default — `orientation` is only spelled out\n * to discriminate it from the horizontal mode below.\n */\nexport interface BarChartVerticalProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    Omit<VariantProps<typeof barChartVariants>, 'orientation'>,\n    CartesianChartProps,\n    ChartAnimationProps,\n    ChartBrushProps,\n    ChartDataLabelProps {\n  /** Selects the recharts bar chart. Omit it — this is the default. */\n  orientation?: 'vertical';\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-category data. Each object holds the category key + one numeric field per series. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n   * primitives). Series take their colour from the container's `palette`; each\n   * entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /**\n   * One or more dashed reference/average lines on the value (Y) axis. Each is\n   * driven by a fixed `value` or a computed series `average`. Pass a single\n   * object or an array to draw several at once.\n   */\n  referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n  /**\n   * One or more shaded bands behind a range of categories — e.g. a forecast\n   * period. Pass a single object or an array to draw several.\n   */\n  referenceArea?: BarChartReferenceArea | BarChartReferenceArea[];\n  /**\n   * Per-series style override for a range of categories, keyed by `dataKeys`\n   * entry. Bars outside a series' range — and series with no entry — render\n   * normally.\n   */\n  barSettings?: Record<string, BarChartBarSettings>;\n  /** Corner radius applied to the growing end of each bar. */\n  barRadius?: number;\n  /** How every bar is painted. Per-range overrides come from `barSettings`. */\n  barShape?: BarChartBarShape;\n  /** Fixed bar thickness, in px. Unset, recharts sizes bars from the available width. */\n  barSize?: number;\n  /** Upper bound on the computed bar thickness, in px. */\n  maxBarSize?: number;\n  /** Gap between bars of the same category, in px or a percentage string. */\n  barGap?: number | string;\n  /** Gap between category groups, in px or a percentage string. */\n  barCategoryGap?: number | string;\n  /**\n   * Minimum rendered length for a bar, in px, so a tiny value stays visible. A\n   * value of exactly `0` still renders nothing — a floor on it would read as a\n   * small positive.\n   */\n  minPointSize?: number;\n  /** Draw a full-height track behind every bar. */\n  showBackground?: boolean;\n  /** Fill for the track background. Defaults to the secondary surface. */\n  backgroundFill?: string;\n  /** Highlight the hovered bar. */\n  showActiveBar?: boolean;\n  /** Painting of the hovered bar when `showActiveBar` is on. */\n  activeBar?: {\n    /** Fill for the hovered bar. Defaults to the series color. */\n    fill?: string;\n    /** Fill opacity for the hovered bar. */\n    opacity?: number;\n  };\n  showLegend?: boolean;\n  /**\n   * Position of the value labels when `showLabels` is on. Defaults to the bar's\n   * growing end (`top`), or the segment centre when the layout is stacked.\n   */\n  labelPosition?: CartesianLabelPosition;\n}\n\n/** One row of the horizontal bar list. */\nexport interface BarChartItem {\n  /** Row label, shown at the start of the row. */\n  label: string;\n  /** The value this row represents. */\n  value: number;\n  /**\n   * Fill color — any CSS color; prefer an existing `--ui-*` token. Required\n   * when no `palette` is passed to the chart. Omit when supplying `tone`\n   * together with `palette`.\n   */\n  color?: string;\n  /**\n   * Palette tone for this row. Resolved against the `palette` prop on the\n   * enclosing `BarChart`; ignored when `palette` is omitted and `color` is set.\n   */\n  tone?: { status: ChartStatusTone };\n  /**\n   * Projected/forecast total value. When set and greater than `value`, renders\n   * a translucent bar (same color, 30% opacity) extending from the actual\n   * value's edge to the forecast value. The actual bar renders solid on top.\n   * ARIA values always reflect the actual value; `aria-valuetext` also\n   * mentions the forecast value. Ignored when `<= value`.\n   */\n  forecast?: number;\n}\n\n/**\n * The labelled proportional bar list: one row per `items` entry carrying its\n * label, value, share of `max`, and a track bar. No axes, grid, or recharts.\n */\nexport interface BarChartHorizontalProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Selects the labelled bar list. */\n  orientation: 'horizontal';\n  /** Rows to render — one labelled bar per item. */\n  items: BarChartItem[];\n  /** Upper bound the values are shares of. Defaults to the sum of every item's value. */\n  max?: number;\n  /** Format the numeric value in the label. Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Show the hover tooltip per row. On by default. */\n  showTooltip?: boolean;\n  /** Tooltip content shared by every row (replaces the default). Ignored when `showTooltip` is false. */\n  tooltip?: React.ReactNode;\n  /**\n   * Dataviz palette to resolve each item's color from. When provided, each\n   * `items` entry should carry a `tone` (and can omit `color`). The colors are\n   * resolved in the same order and with the same tone rules as the vertical\n   * chart — `status` tones pick a specific palette stop, slot-less items\n   * consume the next available stop.\n   */\n  palette?: ChartPalette;\n}\n\n/**\n * Unified BarChart props — `orientation` selects what gets rendered:\n * - omitted / `'vertical'`: the recharts bar chart (axes, grid, legend).\n * - `'horizontal'`: the labelled proportional bar list.\n */\nexport type BarChartProps = BarChartVerticalProps | BarChartHorizontalProps;\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\n/**\n * One labelled bar. Base UI's `Meter` primitive supplies `role=\"meter\"` and the\n * indicator's proportional width; the row is not a control, so the only reason\n * it takes focus is to make the tooltip reachable without a pointer.\n */\nfunction HorizontalBarRow({\n  item,\n  resolvedColor,\n  max,\n  valueFormatter,\n  showTooltip,\n  tooltip,\n}: {\n  item: BarChartItem;\n  resolvedColor: string;\n  max: number;\n  valueFormatter: (value: number) => string;\n  showTooltip: boolean;\n  tooltip?: React.ReactNode;\n}) {\n  const { label, value, forecast } = item;\n  const color = resolvedColor;\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const hasForecast = forecast != null && forecast > value;\n\n  const root = (\n    <MeterPrimitive.Root\n      value={value}\n      max={max}\n      aria-valuemax={max}\n      aria-valuetext={\n        hasForecast\n          ? `${valueFormatter(value)} of ${valueFormatter(max)} (${pct}%), forecast ${valueFormatter(forecast)}`\n          : `${valueFormatter(value)} of ${valueFormatter(max)} (${pct}%)`\n      }\n      tabIndex={showTooltip ? 0 : undefined}\n      className=\"flex w-full flex-col gap-1.5\"\n    >\n      <div className=\"flex items-baseline justify-between gap-2 text-sm leading-none\">\n        <MeterPrimitive.Label className=\"truncate font-semibold\">\n          {label}\n        </MeterPrimitive.Label>\n        <span className=\"shrink-0 tabular-nums\">\n          <span className=\"font-semibold text-[var(--ui-text-on-surface-link-idle)]\">\n            {valueFormatter(value)}\n          </span>\n          <span className=\"text-muted-foreground\"> {pct}%</span>\n        </span>\n      </div>\n      <MeterPrimitive.Track className=\"relative h-2 w-full overflow-hidden rounded-full bg-[var(--ui-background-status-neutral-pressed)]\">\n        {hasForecast && (\n          <div\n            data-forecast\n            className=\"absolute inset-y-0 start-0 rounded-full\"\n            style={{\n              backgroundColor: color,\n              opacity: 0.3,\n              width: `${(forecast / max) * 100}%`,\n            }}\n          />\n        )}\n        <MeterPrimitive.Indicator\n          className=\"relative rounded-full\"\n          style={{ backgroundColor: color }}\n        />\n      </MeterPrimitive.Track>\n    </MeterPrimitive.Root>\n  );\n\n  if (!showTooltip) return root;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger render={root} />\n      <TooltipContent\n        className={cn(\n          'border border-border bg-background text-foreground shadow-md',\n          !tooltip && 'flex items-center gap-2'\n        )}\n      >\n        {tooltip ?? (\n          <>\n            <span\n              className=\"size-2.5 shrink-0 rounded-full\"\n              style={{ backgroundColor: color }}\n            />\n            <span className=\"font-semibold\">{label}</span>\n            <span className=\"text-muted-foreground\">\n              {valueFormatter(value)} of {valueFormatter(max)} · {pct}%\n            </span>\n          </>\n        )}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n\nconst HorizontalBarLayout = React.forwardRef<\n  HTMLDivElement,\n  Omit<BarChartHorizontalProps, 'orientation'>\n>(\n  (\n    {\n      items,\n      max,\n      palette,\n      valueFormatter = defaultFormat,\n      showTooltip = true,\n      tooltip,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // A max of 0 (or a negative one) would make every share meaningless, so it\n    // falls back to the total — and to 1 when even that is 0, so the rows read\n    // as empty rather than dividing by zero.\n    const safeMax =\n      max !== undefined && max > 0\n        ? max\n        : items.reduce((sum, item) => sum + item.value, 0) || 1;\n\n    // When a palette is supplied, resolve each item's color through the same\n    // palette machinery as the vertical chart — a synthetic config maps each\n    // item's index key to its tone (or explicit color as a pinned stop).\n    const resolvedColors = React.useMemo(() => {\n      if (!palette) return null;\n      // Items with an explicit `color` bypass the palette; items with `tone`\n      // (or neither) are resolved through `resolveChartColors`.\n      const config: ChartConfig = Object.fromEntries(\n        items.map((item, i) => [\n          `item${i}`,\n          { label: item.label, ...(item.tone ? { tone: item.tone } : {}) },\n        ])\n      );\n      const resolved = resolveChartColors(config, palette);\n      return items.map((item, i) => item.color ?? resolved[`item${i}`]?.color ?? '');\n    }, [items, palette]);\n\n    return (\n      <div\n        ref={ref}\n        data-orientation=\"horizontal\"\n        className={cn('flex flex-col gap-4', className)}\n        {...props}\n      >\n        {items.map((item, i) => (\n          <HorizontalBarRow\n            key={`${i}-${item.label}`}\n            item={item}\n            resolvedColor={resolvedColors ? (resolvedColors[i] ?? '') : (item.color ?? '')}\n            max={safeMax}\n            valueFormatter={valueFormatter}\n            showTooltip={showTooltip}\n            tooltip={tooltip}\n          />\n        ))}\n      </div>\n    );\n  }\n);\nHorizontalBarLayout.displayName = 'HorizontalBarLayout';\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (rawProps, ref) => {\n    // useId must be called unconditionally before any early return (Rules of Hooks).\n    const instanceId = React.useId().replace(/:/g, '');\n\n    if (rawProps.orientation === 'horizontal') {\n      const { orientation: _orientation, ...horizontalProps } = rawProps;\n      return <HorizontalBarLayout {...horizontalProps} ref={ref} />;\n    }\n\n    const {\n      className,\n      config,\n      palette,\n      data,\n      dataKeys,\n      xKey,\n      referenceLine,\n      referenceArea,\n      barSettings,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      // Consumed rather than spread: a literal `orientation` attribute on the\n      // wrapper `<div>` is not a valid DOM prop.\n      orientation = 'vertical',\n      layout = 'grouped',\n      barRadius = 8,\n      barShape = 'rounded',\n      barSize = 8,\n      maxBarSize,\n      barGap = 4,\n      barCategoryGap,\n      minPointSize,\n      showBackground = false,\n      backgroundFill = 'var(--ui-background-surface-secondary)',\n      showActiveBar = false,\n      activeBar,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed = true,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      showLabels = false,\n      labelPosition,\n      labelFormatter,\n      showBrush = false,\n      brushHeight,\n      brushAriaLabel,\n      ...props\n    } = rawProps;\n\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // recharts' `layout` names the axis the *categories* run along, which for\n    // bars rising out of an X axis is its `'horizontal'`.\n    const rechartsLayout = 'horizontal';\n    const isStacked = layout === 'stacked';\n    // Labels sit at the growing end of the bar — above it — or centred in the\n    // segment when stacked.\n    const barLabelPosition = resolveCartesianLabelPosition({\n      labelPosition,\n      isStacked,\n      growingEnd: 'top',\n    });\n\n    const referenceLines = toReferenceLineList(referenceLine);\n\n    // Bands + the per-series overrides resolved to inclusive row indices once,\n    // so the Cells below are a lookup rather than a search per bar.\n    const referenceAreas = (\n      referenceArea\n        ? Array.isArray(referenceArea)\n          ? referenceArea\n          : [referenceArea]\n        : []\n    )\n      .map((area) => ({ area, range: resolveCategoryRange(area, data, xKey) }))\n      .filter(\n        (entry): entry is { area: BarChartReferenceArea; range: [number, number] } =>\n          entry.range !== undefined\n      );\n\n    const settingsByKey = new Map(\n      dataKeys.flatMap((key) => {\n        const settings = barSettings?.[key];\n        const range = settings\n          ? resolveCategoryRange(settings, data, xKey)\n          : undefined;\n        return settings && range ? [[key, { settings, range }] as const] : [];\n      })\n    );\n\n    // A capped track is drawn as a synthetic remainder (upper bound minus the\n    // bar's own value) stacked on the bar, so recharts scales and animates it\n    // rather than us guessing the axis scale from a mid-animation geometry.\n    const headroomKeys = new Map(\n      isStacked\n        ? []\n        : Array.from(settingsByKey, ([key, entry]) =>\n            typeof entry.settings.background === 'string'\n              ? ([key, entry.settings.background] as const)\n              : undefined\n          ).filter((pair): pair is readonly [string, string] => pair !== undefined)\n    );\n\n    const chartData = headroomKeys.size\n      ? data.map((row, rowIndex) => {\n          const extra: Record<string, number> = {};\n          headroomKeys.forEach((upperKey, key) => {\n            const entry = settingsByKey.get(key);\n            if (!entry) return;\n            const [start, end] = entry.range;\n            if (rowIndex < start || rowIndex > end) return;\n            const value = row[key];\n            const upper = row[upperKey];\n            if (typeof value !== 'number' || typeof upper !== 'number') return;\n            extra[`${HEADROOM_FIELD_PREFIX}${key}`] = Math.max(0, upper - value);\n          });\n          return { ...row, ...extra };\n        })\n      : data;\n\n    // The ticks under a band pick up the accent styling unless the band opts\n    // out. Resolved to the categories' own values rather than kept as row\n    // indices, because neither index a tick carries can be trusted here: the\n    // `index` prop is a position in the list recharts actually renders, which\n    // a numeric `interval` (and the default `preserveEnd`, dropping labels that\n    // don't fit) has already filtered, and `payload.index` is relative to the\n    // slice a `showBrush` selection leaves. The value survives both.\n    const highlightedValues = new Set(\n      referenceAreas\n        .filter(({ area }) => area.highlightTicks !== false)\n        .flatMap(({ range }) =>\n          data.slice(range[0], range[1] + 1).map((row) => row[xKey])\n        )\n    );\n\n    // recharts places the tick and hands the element its final geometry; we\n    // reuse its own <Text> so angle/anchor behavior is unchanged and only add\n    // the accent styling for the highlighted range. The formatter still takes\n    // the rendered position, since that is what recharts passes its own\n    // `tickFormatter`.\n    const categoryTick = highlightedValues.size\n      ? ({\n          payload,\n          index,\n          ...tickProps\n        }: {\n          payload: { value: string | number };\n          index: number;\n        }) => {\n          const value = xTickFormatter\n            ? xTickFormatter(payload.value as never, index)\n            : payload.value;\n          return (\n            <Text\n              {...tickProps}\n              className={cn(\n                'fill-muted-foreground',\n                highlightedValues.has(payload.value) && 'fill-primary italic'\n              )}\n              fontSize={12}\n            >\n              {value}\n            </Text>\n          );\n        }\n      : undefined;\n\n    // recharts spreads this over the bar's own props, so an explicitly\n    // `undefined` fill would wipe the series color (an unfilled path paints\n    // black). Only set what the caller asked for, and dim by default so\n    // `showActiveBar` alone is visible.\n    const activeBarOption = showActiveBar\n      ? {\n          ...(activeBar?.fill !== undefined ? { fill: activeBar.fill } : {}),\n          fillOpacity: activeBar?.opacity ?? 0.85,\n        }\n      : false;\n\n    // `gradient` and `pattern` paint from an SVG def, so the ids have to be\n    // unique per chart instance — same guard the shared container applies.\n    const defsId = `bar-${instanceId}`;\n    const usedShapes = new Set<BarChartBarShape>([barShape]);\n    settingsByKey.forEach(({ settings }) => {\n      if (settings.shape) usedShapes.add(settings.shape);\n    });\n    // recharts applies a flat minPointSize to zeroes too, which would draw a\n    // sliver where there is nothing to show. For a grouped bar it hands the\n    // callback the row's own value, but inside a stack it hands the running\n    // total, so a zero segment riding on a non-zero stack would slip through —\n    // there the value is read back off the row instead. That read uses the\n    // index recharts counts from the *displayed* slice, so a stacked chart\n    // whose brush has been dragged off its full range falls back to flooring\n    // the zero; the plain (unbrushed) stack, which is what the prop is for, is\n    // exact.\n    const minPointSizeFor = (key: string) =>\n      minPointSize === undefined\n        ? undefined\n        : (top: number | undefined | null, row: number) => {\n            const own = isStacked ? chartData[row]?.[key] : top;\n            return typeof own === 'number' && own !== 0 ? minPointSize : 0;\n          };\n\n    const fillOf = (key: string, shape: BarChartBarShape) =>\n      shape === 'gradient'\n        ? `url(#${defsId}-gradient-${key})`\n        : shape === 'pattern'\n          ? `url(#${defsId}-pattern-${key})`\n          : `var(--color-${key})`;\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    // Round only the growing end — the top of the bar.\n    const endRadius: [number, number, number, number] = [\n      barRadius,\n      barRadius,\n      0,\n      0,\n    ];\n    // A pill rounds every corner; recharts clamps the radius to half the bar's\n    // shorter side, so an oversized number gives a true capsule at any width.\n    const radiusFor = (shape: BarChartBarShape, rounded: boolean) =>\n      shape === 'pill'\n        ? 9999\n        : barRadius > 0 && rounded\n          ? endRadius\n          : undefined;\n\n    // Both take the normalization unconditionally: gating it on \"is a\n    // headroom/paint-server series in play\" is what let the legend's ordering\n    // drift between otherwise identical charts. The helpers are no-ops when\n    // there is nothing to strip or recolor.\n    const tooltipElement = (\n      <NormalizedTooltipContent content={tooltipContent} dataKeys={dataKeys} />\n    );\n    const legendElement = <NormalizedLegendContent dataKeys={dataKeys} />;\n\n    // The long chart children are lifted into these renderers so the returned\n    // tree reads as a flat list. They are plain functions, not components:\n    // recharts looks some of its children up by element type (see `rangeCells`\n    // above), so what they return has to stay a *direct* child — an array or a\n    // fragment is flattened, a component wrapper would not be.\n\n    // The categories run along X and the values along Y, so the category props\n    // (dataKey/tick) belong to the X axis and the value props\n    // (unit/tickCount/domain) to the Y axis — recharts ignores each set on the\n    // other axis.\n    const renderAxes = () => (\n      <>\n        <XAxis\n          dataKey={xKey}\n          type=\"category\"\n          hide={!showXAxis}\n          tickLine={false}\n          axisLine={false}\n          tick={categoryTick}\n          tickFormatter={xTickFormatter}\n          angle={xAxisAngle}\n          interval={xAxisInterval}\n          textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n          height={xAxisHeight}\n          label={xAxisTitle}\n        />\n        <YAxis\n          type=\"number\"\n          hide={!showYAxis}\n          tickLine={false}\n          axisLine={false}\n          unit={yUnit}\n          tickFormatter={yTickFormatter}\n          tickCount={yAxisTickCount}\n          domain={yDomain}\n          width={yAxisLabel ? 72 : undefined}\n          label={yAxisTitle}\n        />\n      </>\n    );\n\n    const renderSeries = () =>\n      dataKeys.map((key, index) => {\n        // In a stack only the last segment's end is rounded; grouped bars\n        // each round their own end.\n        const rounded = isStacked ? index === dataKeys.length - 1 : true;\n        const entry = settingsByKey.get(key);\n        const inRange = (row: number) =>\n          entry !== undefined && row >= entry.range[0] && row <= entry.range[1];\n        const headroomKey = headroomKeys.get(key);\n        const { shape, activeBar: activeBarShape } = resolveBarShapes({\n          rangeBackground: entry?.settings.background === true,\n          inRange,\n          trackFill: backgroundFill,\n          activeBarOption,\n        });\n        const cells =\n          entry &&\n          rangeCells({\n            data,\n            chartData,\n            xKey,\n            seriesKey: key,\n            settings: entry.settings,\n            range: entry.range,\n            headroomKey,\n            barShape,\n            rounded,\n            fillOf,\n            radiusFor,\n          });\n        const labels = showLabels && (\n          <LabelList\n            dataKey={key}\n            position={barLabelPosition}\n            formatter={toLabelFormatter(labelFormatter)}\n            className={resolveLabelFillClass(barLabelPosition)}\n            fontSize={CHART_LABEL_FONT_SIZE}\n          />\n        );\n        return (\n          <React.Fragment key={key}>\n            <Bar\n              dataKey={key}\n              fill={fillOf(key, barShape)}\n              // Its own stack, so the headroom sits on this series' bar\n              // while the series stay side by side.\n              stackId={isStacked ? 'a' : headroomKey ? key : undefined}\n              radius={radiusFor(barShape, rounded)}\n              minPointSize={minPointSizeFor(key)}\n              background={showBackground ? { fill: backgroundFill } : undefined}\n              shape={shape}\n              activeBar={activeBarShape}\n              {...animation}\n            >\n              {cells}\n              {labels}\n            </Bar>\n            {headroomKey && (\n              <Bar\n                dataKey={`${HEADROOM_FIELD_PREFIX}${key}`}\n                stackId={key}\n                fill={`var(--color-${key})`}\n                fillOpacity={0.25}\n                radius={radiusFor(barShape, true)}\n                // Decoration for the bar below it — never its own row in the\n                // tooltip or entry in the legend.\n                legendType=\"none\"\n                tooltipType=\"none\"\n                {...animation}\n              />\n            )}\n          </React.Fragment>\n        );\n      });\n\n    const renderReferenceAreas = () =>\n      referenceAreas.map(({ area, range }, index) => {\n        const [start, end] = range;\n        return (\n          <ReferenceArea\n            key={`${area.label ?? 'area'}-${index}`}\n            // Bands run along the category axis, which is X.\n            x1={data[start]?.[xKey]}\n            x2={data[end]?.[xKey]}\n            fill=\"var(--ui-background-surface-secondary)\"\n            fillOpacity={0.6}\n            ifOverflow=\"extendDomain\"\n            shape={resolveBandShape(area.divider)}\n            label={resolveBandLabel(area.label)}\n          />\n        );\n      });\n\n    const renderReferenceLines = () =>\n      referenceLines.map((ref, index) => {\n        const value = resolveChartReferenceValue(ref, data, dataKeys);\n        if (value === undefined) return null;\n        return (\n          <ReferenceLine\n            key={`${ref.label ?? 'ref'}-${index}`}\n            // Drawn on the value axis, which is Y.\n            y={value}\n            // By default the caption sits above the line's right end.\n            {...resolveReferenceLineProps(\n              ref.label,\n              ref.labelPosition ?? 'insideTopRight'\n            )}\n          />\n        );\n      });\n\n    return (\n      <div\n        ref={ref}\n        data-orientation={orientation}\n        data-layout={layout}\n        className={cn(barChartVariants({ orientation, layout }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart\n            data={chartData as readonly unknown[]}\n            layout={rechartsLayout}\n            barSize={barSize}\n            maxBarSize={maxBarSize}\n            barGap={barGap}\n            barCategoryGap={barCategoryGap}\n          >\n            <BarPaintServers id={defsId} dataKeys={dataKeys} shapes={usedShapes} />\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            {renderAxes()}\n            {showTooltip && <ChartTooltip content={tooltipElement} />}\n            {showLegend && <ChartLegend content={legendElement} />}\n            {renderSeries()}\n            {renderReferenceAreas()}\n            {renderReferenceLines()}\n            {showBrush && (\n              <Brush\n                dataKey={xKey}\n                // The brush slices rows by index, so its captions come from the\n                // axis holding the categories — X.\n                tickFormatter={xTickFormatter}\n                {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n              />\n            )}\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nBarChart.displayName = 'BarChart';\n\nexport { BarChart, barChartVariants };\n"],"mappings":"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"}
+{"version":3,"file":"bar-chart.js","names":[],"sources":["../../../../src/components/ui/bar-chart/bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  Brush,\n  CartesianGrid,\n  Cell,\n  LabelList,\n  ReferenceArea,\n  ReferenceLine,\n  Rectangle,\n  Text,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport type { BarShapeProps } from 'recharts/types/cartesian/Bar';\nimport { Meter as MeterPrimitive } from '@base-ui/react/meter';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\nimport {\n  CHART_LABEL_FONT_SIZE,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveBrushProps,\n  resolveCartesianLabelPosition,\n  resolveCategoryRange,\n  resolveChartReferenceValue,\n  resolveLabelFillClass,\n  resolveReferenceLineProps,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  resolveChartColors,\n  toLabelFormatter,\n  toReferenceLineList,\n  type ChartConfig,\n  type ChartPalette,\n  type ChartStatusTone,\n  type ChartReferenceLine,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\n  toCssKey,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n  type ChartBrushProps,\n  type ChartCategoryRange,\n  type ChartDataLabelProps,\n  type CartesianLabelPosition,\n} from '../chart';\n\n// The two CVA axes are the design's Bar-chart variant set (B2): `orientation`\n// and `layout` (grouped side-by-side vs stacked). `orientation` is the\n// discriminant for *which component this is*: `vertical` renders the typed\n// recharts composition over the shared `Chart` primitives (bars rising from a\n// category X axis), `horizontal` renders the labelled proportional bar list\n// below, which has no axes, grid, or recharts at all. The classes stay empty\n// because neither mode is styled by a variant class — the recharts SVG draws\n// the vertical bars, and the horizontal list carries its own layout. CVA is\n// kept so the variant set is a first-class, spec-conformant part of the API\n// (matched against ui-spec's api.yaml enums); the resolved values are mirrored\n// onto `data-orientation` / `data-layout` for styling hooks and tests.\nconst barChartVariants = cva('', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: '',\n    },\n    layout: {\n      grouped: '',\n      stacked: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    layout: 'grouped',\n  },\n});\n\n/**\n * How a bar is painted. `rounded` rounds the growing end by `barRadius`; `pill`\n * rounds every corner to a capsule; `gradient` fades the series color down the\n * bar; `pattern` fills it with diagonal hatching in the series color (a\n * colorblind-safe way to set a subset of bars apart).\n */\nexport type BarChartBarShape = 'rounded' | 'pill' | 'gradient' | 'pattern';\n\n/**\n * Style override for one series over a range of categories — e.g. \"the forecast\n * tail from September onward reads translucent and dashed\". Anything left unset\n * keeps the series' normal painting.\n */\nexport interface BarChartBarSettings extends ChartCategoryRange {\n  /** Fill for the matched bars. Defaults to the series color. */\n  fill?: string;\n  /** Fill opacity for the matched bars. */\n  opacity?: number;\n  /** Outline the matched bars with a dashed stroke in the series color. */\n  dashed?: boolean;\n  /** Shape for the matched bars, overriding the chart's `barShape`. */\n  shape?: BarChartBarShape;\n  /**\n   * Track behind the matched bars: `true` fills the plot height, while a data\n   * field name caps it at that row's value — the headroom between a projection\n   * and its upper bound. A capped track stacks on its bar, so it needs the\n   * default `layout=\"grouped\"`; under `layout=\"stacked\"` it is ignored.\n   */\n  background?: boolean | string;\n}\n\n/** A shaded band behind a range of categories. */\nexport interface BarChartReferenceArea extends ChartCategoryRange {\n  /** Caption above the band. */\n  label?: string;\n  /**\n   * Mark the category ticks under the band — accent color, italic — so the\n   * highlighted range reads on the axis too. On by default.\n   */\n  highlightTicks?: boolean;\n  /**\n   * Draw a dashed rule at the band's leading edge — the hand-off into a\n   * forecast. Off by default.\n   */\n  divider?: boolean;\n}\n\n// Reserved field prefix for the synthetic headroom series a capped track\n// stacks onto its bar. It must never surface in the tooltip or the legend.\nconst HEADROOM_FIELD_PREFIX = '__headroom_';\n\n/**\n * Drop the synthetic headroom series from a recharts tooltip/legend payload,\n * keeping the real series (and their order). `legendType`/`tooltipType=\"none\"`\n * are set on those bars too, but recharts still lists them, so this filter is\n * what actually keeps them out — hence it's unit-tested.\n */\nexport function dropHeadroomSeries<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined,\n  dataKeys?: string[]\n): T[] | undefined {\n  const real = payload?.filter(\n    (item) => !String(item.dataKey).startsWith(HEADROOM_FIELD_PREFIX)\n  );\n  // recharts sorts the legend payload alphabetically by series name by default\n  // (its `itemSorter: 'value'`), so passing `dataKeys` puts the entries back in\n  // the order the caller declared them.\n  return dataKeys\n    ? real?.slice().sort(\n        (a, b) =>\n          dataKeys.indexOf(String(a.dataKey)) -\n          dataKeys.indexOf(String(b.dataKey))\n      )\n    : real;\n}\n\n/**\n * Swap a paint-server fill back to the series color for the chrome. A\n * `gradient` / `pattern` bar fills from `url(#…)`, which paints SVG but means\n * nothing as a CSS background — the legend swatch and the tooltip dot would\n * render blank — so they fall back to the series' own `--color-<key>`.\n */\nexport function withSeriesColor<T extends { dataKey?: unknown; color?: string }>(\n  payload: readonly T[] | undefined\n): T[] | undefined {\n  return payload?.map((item) =>\n    item.color?.startsWith('url(')\n      ? { ...item, color: `var(--color-${toCssKey(String(item.dataKey))})` }\n      : item\n  );\n}\n\ntype TooltipContentType = NonNullable<\n  React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<\n  TooltipContentType,\n  (...args: never[]) => unknown\n>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\ntype LegendContentType = NonNullable<\n  React.ComponentProps<typeof ChartLegend>['content']\n>;\ntype LegendContentFn = Extract<LegendContentType, (...args: never[]) => unknown>;\ntype LegendRenderProps = Parameters<LegendContentFn>[0];\n\n/**\n * Tooltip content that normalizes recharts' payload before anything renders it:\n * the synthetic headroom series stripped, the rows put back in `dataKeys` order,\n * and paint-server fills swapped back to the series color. Falls through to a\n * caller-supplied `content`, preserving recharts' own mount semantics — a\n * function via `createElement` (its own component identity + hook state), an\n * element via `cloneElement`.\n *\n * This is a component rather than a per-render wrapper factory on purpose:\n * recharts renders `content` by cloning the element it is given\n * (`Tooltip.js:27-28`), so a stable module-level type here means the subtree is\n * never remounted, whatever the caller passes.\n */\nexport function NormalizedTooltipContent({\n  content,\n  dataKeys,\n  ...props\n}: Partial<TooltipRenderProps> & {\n  content?: TooltipContentType;\n  dataKeys?: string[];\n}) {\n  const merged = {\n    ...props,\n    payload: withSeriesColor(dropHeadroomSeries(props.payload, dataKeys)),\n  } as TooltipRenderProps;\n\n  if (!content) {\n    return <ChartTooltipContent {...(merged as ChartTooltipContentProps)} />;\n  }\n  return typeof content === 'function'\n    ? React.createElement(\n        content as React.FunctionComponent<TooltipRenderProps>,\n        merged\n      )\n    : React.cloneElement(content, merged);\n}\n\n/**\n * Legend content over the same normalization. Ordering is the reason this\n * applies unconditionally: recharts sorts legend entries alphabetically by\n * series name by default (`itemSorter: 'value'`), so without putting them back\n * in `dataKeys` order the legend would silently reorder itself depending on\n * which bar-styling props happen to be set.\n */\nexport function NormalizedLegendContent({\n  dataKeys,\n  ...props\n}: Partial<LegendRenderProps> & { dataKeys: string[] }) {\n  return (\n    <ChartLegendContent\n      verticalAlign={props.verticalAlign}\n      payload={\n        withSeriesColor(\n          dropHeadroomSeries(props.payload, dataKeys)\n        ) as ChartLegendContentProps['payload']\n      }\n    />\n  );\n}\n\n/** Paint overrides recharts spreads over a bar to mark it as the active one. */\ninterface BarPaintOverride {\n  fill?: string;\n  fillOpacity?: number;\n}\n\n/**\n * Draw a bar, optionally over its full-height track (recharts hands a custom\n * `<Bar shape>` the track geometry alongside the bar's). Only geometry and\n * paint props are forwarded — recharts also passes the whole data entry, and\n * spreading that onto an SVG node would leak data fields into the DOM.\n *\n * `paint` is how the active bar keeps its track: recharts swaps a custom\n * `shape` out for the `activeBar` option while a bar is hovered\n * (`Bar.js` `BarRectangleWithActiveState`), so the active option has to be a\n * shape of its own that redraws the track and applies the highlight itself.\n */\nfunction renderBarWithTrack({\n  bar,\n  track,\n  trackFill,\n  paint,\n}: {\n  bar: Omit<BarShapeProps, 'background' | 'index'>;\n  track?: BarShapeProps['background'];\n  trackFill: string;\n  paint?: BarPaintOverride;\n}) {\n  return (\n    <>\n      {track && (\n        <Rectangle\n          className=\"recharts-bar-background-rectangle\"\n          x={track.x ?? undefined}\n          y={track.y ?? undefined}\n          width={track.width ?? undefined}\n          height={track.height ?? undefined}\n          fill={trackFill}\n        />\n      )}\n      <Rectangle\n        x={bar.x ?? undefined}\n        y={bar.y ?? undefined}\n        width={bar.width ?? undefined}\n        height={bar.height ?? undefined}\n        radius={bar.radius}\n        fill={paint?.fill ?? bar.fill}\n        fillOpacity={paint?.fillOpacity ?? bar.fillOpacity}\n        stroke={bar.stroke}\n        strokeWidth={bar.strokeWidth}\n        strokeDasharray={bar.strokeDasharray}\n      />\n    </>\n  );\n}\n\n/**\n * Build the `<Bar shape>` that draws a range-scoped track. recharts' own\n * `background` is all-or-nothing per series, so the track is drawn per row and\n * hidden where the range doesn't apply.\n */\nexport function createTrackShape({\n  inRange,\n  trackFill,\n  paint,\n}: {\n  inRange: (row: number) => boolean;\n  trackFill: string;\n  paint?: BarPaintOverride;\n}) {\n  return ({ background: track, index: row, ...bar }: BarShapeProps) =>\n    renderBarWithTrack({\n      bar,\n      track: inRange(row) ? track : undefined,\n      trackFill,\n      paint,\n    });\n}\n\n/**\n * The `shape` / `activeBar` pair one series' `<Bar>` is given.\n *\n * They resolve together because recharts swaps a custom `shape` out for the\n * `activeBar` option while a bar is hovered: a range-scoped track has to be\n * redrawn by the active option too, or the track blinks out under the cursor.\n */\nfunction resolveBarShapes({\n  rangeBackground,\n  inRange,\n  trackFill,\n  activeBarOption,\n}: {\n  /**\n   * recharts takes one `background` per series, so a range-scoped one is drawn\n   * per row by a custom shape instead: hidden where it doesn't apply.\n   */\n  rangeBackground: boolean;\n  inRange: (row: number) => boolean;\n  trackFill: string;\n  activeBarOption: BarPaintOverride | false;\n}) {\n  if (!rangeBackground) {\n    return { shape: undefined, activeBar: activeBarOption };\n  }\n  return {\n    shape: createTrackShape({ inRange, trackFill }),\n    activeBar: activeBarOption\n      ? createTrackShape({ inRange, trackFill, paint: activeBarOption })\n      : activeBarOption,\n  };\n}\n\n/**\n * Draw a highlight band plus a dashed rule on its leading edge — the left edge,\n * since the category axis runs along X.\n *\n * The band's own paint comes from the props recharts hands the shape — a\n * `<ReferenceArea shape>` still receives the element's `fill`/`fillOpacity`\n * (`ReferenceArea.js` `renderRect`), so hardcoding them here would quietly\n * ignore whatever the caller set.\n */\nfunction renderBandWithDivider(band: {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  fill?: string;\n  fillOpacity?: number;\n}) {\n  const { x = 0, y = 0, width = 0, height = 0, fill, fillOpacity } = band;\n  return (\n    <>\n      <Rectangle\n        className=\"recharts-reference-area-rect\"\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        fill={fill}\n        fillOpacity={fillOpacity}\n      />\n      <line\n        x1={x}\n        y1={y}\n        x2={x}\n        y2={y + height}\n        stroke=\"var(--ui-border-on-surface-border)\"\n        strokeDasharray=\"4 4\"\n      />\n    </>\n  );\n}\n\n/**\n * The `<ReferenceArea shape>` for a band, or `undefined` so recharts draws its\n * own rect. A custom shape is only needed for the leading-edge rule: a\n * `ReferenceLine` would sit on the tick's centre, and only the band knows where\n * its own edge is.\n */\nfunction resolveBandShape(divider: boolean | undefined) {\n  if (!divider) return undefined;\n  return renderBandWithDivider;\n}\n\n/**\n * A band's caption as recharts' native `label`. `'insideTop'` is asserted\n * because, read outside the JSX attribute, it would widen to `string` and stop\n * matching recharts' `Position` union.\n */\nfunction resolveBandLabel(label: string | undefined) {\n  return label\n    ? {\n        value: label,\n        position: 'insideTop' as const,\n        fill: 'var(--ui-text-on-surface-secondary)',\n        fontSize: 12,\n      }\n    : undefined;\n}\n\n/**\n * The `<defs>` a `gradient` / `pattern` bar fills from — one paint server per\n * series, since each is painted in that series' own color. Ids are namespaced\n * by the chart instance so two charts on a page can't collide.\n *\n * Safe to render as a component: unlike `Bar`'s cells, the chart renders its\n * children straight through rather than looking them up by type.\n */\nfunction BarPaintServers({\n  id,\n  dataKeys,\n  shapes,\n}: {\n  id: string;\n  dataKeys: string[];\n  shapes: ReadonlySet<BarChartBarShape>;\n}) {\n  const hasGradient = shapes.has('gradient');\n  const hasPattern = shapes.has('pattern');\n  if (!hasGradient && !hasPattern) return null;\n\n  return (\n    <defs>\n      {dataKeys.map((key) => (\n        <React.Fragment key={key}>\n          {/* Bars grow up, so a gradient runs top-down. */}\n          {hasGradient && (\n            <linearGradient id={`${id}-gradient-${toCssKey(key)}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop\n                offset=\"0%\"\n                stopColor={`var(--color-${toCssKey(key)})`}\n                stopOpacity={1}\n              />\n              <stop\n                offset=\"100%\"\n                stopColor={`var(--color-${toCssKey(key)})`}\n                stopOpacity={0.35}\n              />\n            </linearGradient>\n          )}\n          {hasPattern && (\n            <pattern\n              id={`${id}-pattern-${toCssKey(key)}`}\n              patternUnits=\"userSpaceOnUse\"\n              width={6}\n              height={6}\n              patternTransform=\"rotate(45)\"\n            >\n              <rect\n                width={6}\n                height={6}\n                fill={`var(--color-${toCssKey(key)})`}\n                fillOpacity={0.25}\n              />\n              <line\n                x1={0}\n                y1={0}\n                x2={0}\n                y2={6}\n                stroke={`var(--color-${toCssKey(key)})`}\n                strokeWidth={3}\n              />\n            </pattern>\n          )}\n        </React.Fragment>\n      ))}\n    </defs>\n  );\n}\n\n/** Corner radius as recharts' `Rectangle` takes it: one value or a 4-tuple. */\ntype BarRadius = number | [number, number, number, number] | undefined;\n\ninterface RangeCellsOptions {\n  data: ReadonlyArray<Record<string, string | number>>;\n  /** `data` plus the synthetic headroom fields, if any were added. */\n  chartData: ReadonlyArray<Record<string, string | number>>;\n  xKey: string;\n  seriesKey: string;\n  settings: BarChartBarSettings;\n  /** Inclusive row bounds the settings apply to. */\n  range: [number, number];\n  headroomKey: string | undefined;\n  barShape: BarChartBarShape;\n  rounded: boolean;\n  fillOf: (key: string, shape: BarChartBarShape) => string;\n  radiusFor: (shape: BarChartBarShape, rounded: boolean) => BarRadius;\n}\n\n/**\n * The `<Cell>` list that applies a series' `barSettings` over its range: the\n * matched rows take the override fill/opacity/dash/shape, the rest keep the\n * series' normal painting.\n *\n * A plain function returning the elements, deliberately not a component:\n * `Bar` discovers its cells with `findAllByType(props.children, Cell)`\n * (recharts `Bar.js`), which matches each direct child on its own display\n * name. Wrapping these in a component would make that lookup find nothing and\n * silently drop every per-range style — no error, just unstyled bars.\n * Returning an array keeps them direct children, since recharts' `toArray`\n * flattens arrays and unwraps fragments.\n */\nfunction rangeCells({\n  data,\n  chartData,\n  xKey,\n  seriesKey,\n  settings,\n  range,\n  headroomKey,\n  barShape,\n  rounded,\n  fillOf,\n  radiusFor,\n}: RangeCellsOptions) {\n  const { fill, opacity, dashed } = settings;\n\n  return data.map((row, rowIndex) => {\n    const on = rowIndex >= range[0] && rowIndex <= range[1];\n    const shape = (on && settings.shape) || barShape;\n    // Only a row that actually carries headroom gives up its rounded end — a\n    // row in range whose upper bound is missing, or no higher than its value,\n    // keeps it.\n    const stacksHeadroom =\n      headroomKey !== undefined &&\n      Number(\n        (chartData[rowIndex] as Record<string, unknown>)?.[\n          `${HEADROOM_FIELD_PREFIX}${seriesKey}`\n        ]\n      ) > 0;\n\n    return (\n      <Cell\n        key={`${seriesKey}-${String(row[xKey])}-${rowIndex}`}\n        fill={\n          on ? (fill ?? fillOf(seriesKey, shape)) : fillOf(seriesKey, barShape)\n        }\n        fillOpacity={on ? opacity : undefined}\n        stroke={on && dashed ? `var(--color-${toCssKey(seriesKey)})` : undefined}\n        strokeWidth={on && dashed ? 1 : undefined}\n        strokeDasharray={on && dashed ? '4 3' : undefined}\n        // Cell types `radius` as the SVG attribute, but it feeds recharts'\n        // Rectangle, which takes the 4-tuple. A bar with headroom stacked on it\n        // hands the rounded end to that segment instead.\n        radius={\n          (stacksHeadroom ? undefined : radiusFor(shape, rounded)) as\n            | number\n            | undefined\n        }\n      />\n    );\n  });\n}\n\n/**\n * The recharts bar chart: bars rising from a category X axis, with axes, grid,\n * tooltip and legend. This is the default — `orientation` is only spelled out\n * to discriminate it from the horizontal mode below.\n */\nexport interface BarChartVerticalProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    Omit<VariantProps<typeof barChartVariants>, 'orientation'>,\n    CartesianChartProps,\n    ChartAnimationProps,\n    ChartBrushProps,\n    ChartDataLabelProps {\n  /** Selects the recharts bar chart. Omit it — this is the default. */\n  orientation?: 'vertical';\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-category data. Each object holds the category key + one numeric field per series. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n   * primitives). Series take their colour from the container's `palette`; each\n   * entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Bar>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /**\n   * One or more dashed reference/average lines on the value (Y) axis. Each is\n   * driven by a fixed `value` or a computed series `average`. Pass a single\n   * object or an array to draw several at once.\n   */\n  referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n  /**\n   * One or more shaded bands behind a range of categories — e.g. a forecast\n   * period. Pass a single object or an array to draw several.\n   */\n  referenceArea?: BarChartReferenceArea | BarChartReferenceArea[];\n  /**\n   * Per-series style override for a range of categories, keyed by `dataKeys`\n   * entry. Bars outside a series' range — and series with no entry — render\n   * normally.\n   */\n  barSettings?: Record<string, BarChartBarSettings>;\n  /** Corner radius applied to the growing end of each bar. */\n  barRadius?: number;\n  /** How every bar is painted. Per-range overrides come from `barSettings`. */\n  barShape?: BarChartBarShape;\n  /** Fixed bar thickness, in px. Unset, recharts sizes bars from the available width. */\n  barSize?: number;\n  /** Upper bound on the computed bar thickness, in px. */\n  maxBarSize?: number;\n  /** Gap between bars of the same category, in px or a percentage string. */\n  barGap?: number | string;\n  /** Gap between category groups, in px or a percentage string. */\n  barCategoryGap?: number | string;\n  /**\n   * Minimum rendered length for a bar, in px, so a tiny value stays visible. A\n   * value of exactly `0` still renders nothing — a floor on it would read as a\n   * small positive.\n   */\n  minPointSize?: number;\n  /** Draw a full-height track behind every bar. */\n  showBackground?: boolean;\n  /** Fill for the track background. Defaults to the secondary surface. */\n  backgroundFill?: string;\n  /** Highlight the hovered bar. */\n  showActiveBar?: boolean;\n  /** Painting of the hovered bar when `showActiveBar` is on. */\n  activeBar?: {\n    /** Fill for the hovered bar. Defaults to the series color. */\n    fill?: string;\n    /** Fill opacity for the hovered bar. */\n    opacity?: number;\n  };\n  showLegend?: boolean;\n  /**\n   * Position of the value labels when `showLabels` is on. Defaults to the bar's\n   * growing end (`top`), or the segment centre when the layout is stacked.\n   */\n  labelPosition?: CartesianLabelPosition;\n}\n\n/** One row of the horizontal bar list. */\nexport interface BarChartItem {\n  /** Row label, shown at the start of the row. */\n  label: string;\n  /** The value this row represents. */\n  value: number;\n  /**\n   * Fill color — any CSS color; prefer an existing `--ui-*` token. Required\n   * when no `palette` is passed to the chart. Omit when supplying `tone`\n   * together with `palette`.\n   */\n  color?: string;\n  /**\n   * Palette tone for this row. Resolved against the `palette` prop on the\n   * enclosing `BarChart`; ignored when `palette` is omitted and `color` is set.\n   */\n  tone?: { status: ChartStatusTone };\n  /**\n   * Projected/forecast total value. When set and greater than `value`, renders\n   * a translucent bar (same color, 30% opacity) extending from the actual\n   * value's edge to the forecast value. The actual bar renders solid on top.\n   * ARIA values always reflect the actual value; `aria-valuetext` also\n   * mentions the forecast value. Ignored when `<= value`.\n   */\n  forecast?: number;\n}\n\n/**\n * The labelled proportional bar list: one row per `items` entry carrying its\n * label, value, share of `max`, and a track bar. No axes, grid, or recharts.\n */\nexport interface BarChartHorizontalProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Selects the labelled bar list. */\n  orientation: 'horizontal';\n  /** Rows to render — one labelled bar per item. */\n  items: BarChartItem[];\n  /** Upper bound the values are shares of. Defaults to the sum of every item's value. */\n  max?: number;\n  /** Format the numeric value in the label. Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Show the hover tooltip per row. On by default. */\n  showTooltip?: boolean;\n  /** Tooltip content shared by every row (replaces the default). Ignored when `showTooltip` is false. */\n  tooltip?: React.ReactNode;\n  /**\n   * Dataviz palette to resolve each item's color from. When provided, each\n   * `items` entry should carry a `tone` (and can omit `color`). The colors are\n   * resolved in the same order and with the same tone rules as the vertical\n   * chart — `status` tones pick a specific palette stop, slot-less items\n   * consume the next available stop.\n   */\n  palette?: ChartPalette;\n}\n\n/**\n * Unified BarChart props — `orientation` selects what gets rendered:\n * - omitted / `'vertical'`: the recharts bar chart (axes, grid, legend).\n * - `'horizontal'`: the labelled proportional bar list.\n */\nexport type BarChartProps = BarChartVerticalProps | BarChartHorizontalProps;\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\n/**\n * One labelled bar. Base UI's `Meter` primitive supplies `role=\"meter\"` and the\n * indicator's proportional width; the row is not a control, so the only reason\n * it takes focus is to make the tooltip reachable without a pointer.\n */\nfunction HorizontalBarRow({\n  item,\n  resolvedColor,\n  max,\n  valueFormatter,\n  showTooltip,\n  tooltip,\n}: {\n  item: BarChartItem;\n  resolvedColor: string;\n  max: number;\n  valueFormatter: (value: number) => string;\n  showTooltip: boolean;\n  tooltip?: React.ReactNode;\n}) {\n  const { label, value, forecast } = item;\n  const color = resolvedColor;\n  const pct = max > 0 ? Math.round((value / max) * 100) : 0;\n  const hasForecast = forecast != null && forecast > value;\n\n  const root = (\n    <MeterPrimitive.Root\n      value={value}\n      max={max}\n      aria-valuemax={max}\n      aria-valuetext={\n        hasForecast\n          ? `${valueFormatter(value)} of ${valueFormatter(max)} (${pct}%), forecast ${valueFormatter(forecast)}`\n          : `${valueFormatter(value)} of ${valueFormatter(max)} (${pct}%)`\n      }\n      tabIndex={showTooltip ? 0 : undefined}\n      className=\"flex w-full flex-col gap-1.5\"\n    >\n      <div className=\"flex items-baseline justify-between gap-2 text-sm leading-none\">\n        <MeterPrimitive.Label className=\"truncate font-semibold\">\n          {label}\n        </MeterPrimitive.Label>\n        <span className=\"shrink-0 tabular-nums\">\n          <span className=\"font-semibold text-[var(--ui-text-on-surface-link-idle)]\">\n            {valueFormatter(value)}\n          </span>\n          <span className=\"text-muted-foreground\"> {pct}%</span>\n        </span>\n      </div>\n      <MeterPrimitive.Track className=\"relative h-2 w-full overflow-hidden rounded-full bg-[var(--ui-background-status-neutral-pressed)]\">\n        {hasForecast && (\n          <div\n            data-forecast\n            className=\"absolute inset-y-0 start-0 rounded-full\"\n            style={{\n              backgroundColor: color,\n              opacity: 0.3,\n              width: `${(forecast / max) * 100}%`,\n            }}\n          />\n        )}\n        <MeterPrimitive.Indicator\n          className=\"relative rounded-full\"\n          style={{ backgroundColor: color }}\n        />\n      </MeterPrimitive.Track>\n    </MeterPrimitive.Root>\n  );\n\n  if (!showTooltip) return root;\n\n  return (\n    <Tooltip>\n      <TooltipTrigger render={root} />\n      <TooltipContent\n        className={cn(\n          'border border-border bg-background text-foreground shadow-md',\n          !tooltip && 'flex items-center gap-2'\n        )}\n      >\n        {tooltip ?? (\n          <>\n            <span\n              className=\"size-2.5 shrink-0 rounded-full\"\n              style={{ backgroundColor: color }}\n            />\n            <span className=\"font-semibold\">{label}</span>\n            <span className=\"text-muted-foreground\">\n              {valueFormatter(value)} of {valueFormatter(max)} · {pct}%\n            </span>\n          </>\n        )}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n\nconst HorizontalBarLayout = React.forwardRef<\n  HTMLDivElement,\n  Omit<BarChartHorizontalProps, 'orientation'>\n>(\n  (\n    {\n      items,\n      max,\n      palette,\n      valueFormatter = defaultFormat,\n      showTooltip = true,\n      tooltip,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // A max of 0 (or a negative one) would make every share meaningless, so it\n    // falls back to the total — and to 1 when even that is 0, so the rows read\n    // as empty rather than dividing by zero.\n    const safeMax =\n      max !== undefined && max > 0\n        ? max\n        : items.reduce((sum, item) => sum + item.value, 0) || 1;\n\n    // When a palette is supplied, resolve each item's color through the same\n    // palette machinery as the vertical chart — a synthetic config maps each\n    // item's index key to its tone (or explicit color as a pinned stop).\n    const resolvedColors = React.useMemo(() => {\n      if (!palette) return null;\n      // Items with an explicit `color` bypass the palette; items with `tone`\n      // (or neither) are resolved through `resolveChartColors`.\n      const config: ChartConfig = Object.fromEntries(\n        items.map((item, i) => [\n          `item${i}`,\n          { label: item.label, ...(item.tone ? { tone: item.tone } : {}) },\n        ])\n      );\n      const resolved = resolveChartColors(config, palette);\n      return items.map((item, i) => item.color ?? resolved[`item${i}`]?.color ?? '');\n    }, [items, palette]);\n\n    return (\n      <div\n        ref={ref}\n        data-orientation=\"horizontal\"\n        className={cn('flex flex-col gap-4', className)}\n        {...props}\n      >\n        {items.map((item, i) => (\n          <HorizontalBarRow\n            key={`${i}-${item.label}`}\n            item={item}\n            resolvedColor={resolvedColors ? (resolvedColors[i] ?? '') : (item.color ?? '')}\n            max={safeMax}\n            valueFormatter={valueFormatter}\n            showTooltip={showTooltip}\n            tooltip={tooltip}\n          />\n        ))}\n      </div>\n    );\n  }\n);\nHorizontalBarLayout.displayName = 'HorizontalBarLayout';\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (rawProps, ref) => {\n    // useId must be called unconditionally before any early return (Rules of Hooks).\n    const instanceId = React.useId().replace(/:/g, '');\n\n    if (rawProps.orientation === 'horizontal') {\n      const { orientation: _orientation, ...horizontalProps } = rawProps;\n      return <HorizontalBarLayout {...horizontalProps} ref={ref} />;\n    }\n\n    const {\n      className,\n      config,\n      palette,\n      data,\n      dataKeys,\n      xKey,\n      referenceLine,\n      referenceArea,\n      barSettings,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      // Consumed rather than spread: a literal `orientation` attribute on the\n      // wrapper `<div>` is not a valid DOM prop.\n      orientation = 'vertical',\n      layout = 'grouped',\n      barRadius = 8,\n      barShape = 'rounded',\n      barSize = 8,\n      maxBarSize,\n      barGap = 4,\n      barCategoryGap,\n      minPointSize,\n      showBackground = false,\n      backgroundFill = 'var(--ui-background-surface-secondary)',\n      showActiveBar = false,\n      activeBar,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed = true,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      showLabels = false,\n      labelPosition,\n      labelFormatter,\n      showBrush = false,\n      brushHeight,\n      brushAriaLabel,\n      ...props\n    } = rawProps;\n\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // recharts' `layout` names the axis the *categories* run along, which for\n    // bars rising out of an X axis is its `'horizontal'`.\n    const rechartsLayout = 'horizontal';\n    const isStacked = layout === 'stacked';\n    // Labels sit at the growing end of the bar — above it — or centred in the\n    // segment when stacked.\n    const barLabelPosition = resolveCartesianLabelPosition({\n      labelPosition,\n      isStacked,\n      growingEnd: 'top',\n    });\n\n    const referenceLines = toReferenceLineList(referenceLine);\n\n    // Bands + the per-series overrides resolved to inclusive row indices once,\n    // so the Cells below are a lookup rather than a search per bar.\n    const referenceAreas = (\n      referenceArea\n        ? Array.isArray(referenceArea)\n          ? referenceArea\n          : [referenceArea]\n        : []\n    )\n      .map((area) => ({ area, range: resolveCategoryRange(area, data, xKey) }))\n      .filter(\n        (entry): entry is { area: BarChartReferenceArea; range: [number, number] } =>\n          entry.range !== undefined\n      );\n\n    const settingsByKey = new Map(\n      dataKeys.flatMap((key) => {\n        const settings = barSettings?.[key];\n        const range = settings\n          ? resolveCategoryRange(settings, data, xKey)\n          : undefined;\n        return settings && range ? [[key, { settings, range }] as const] : [];\n      })\n    );\n\n    // A capped track is drawn as a synthetic remainder (upper bound minus the\n    // bar's own value) stacked on the bar, so recharts scales and animates it\n    // rather than us guessing the axis scale from a mid-animation geometry.\n    const headroomKeys = new Map(\n      isStacked\n        ? []\n        : Array.from(settingsByKey, ([key, entry]) =>\n            typeof entry.settings.background === 'string'\n              ? ([key, entry.settings.background] as const)\n              : undefined\n          ).filter((pair): pair is readonly [string, string] => pair !== undefined)\n    );\n\n    const chartData = headroomKeys.size\n      ? data.map((row, rowIndex) => {\n          const extra: Record<string, number> = {};\n          headroomKeys.forEach((upperKey, key) => {\n            const entry = settingsByKey.get(key);\n            if (!entry) return;\n            const [start, end] = entry.range;\n            if (rowIndex < start || rowIndex > end) return;\n            const value = row[key];\n            const upper = row[upperKey];\n            if (typeof value !== 'number' || typeof upper !== 'number') return;\n            extra[`${HEADROOM_FIELD_PREFIX}${key}`] = Math.max(0, upper - value);\n          });\n          return { ...row, ...extra };\n        })\n      : data;\n\n    // The ticks under a band pick up the accent styling unless the band opts\n    // out. Resolved to the categories' own values rather than kept as row\n    // indices, because neither index a tick carries can be trusted here: the\n    // `index` prop is a position in the list recharts actually renders, which\n    // a numeric `interval` (and the default `preserveEnd`, dropping labels that\n    // don't fit) has already filtered, and `payload.index` is relative to the\n    // slice a `showBrush` selection leaves. The value survives both.\n    const highlightedValues = new Set(\n      referenceAreas\n        .filter(({ area }) => area.highlightTicks !== false)\n        .flatMap(({ range }) =>\n          data.slice(range[0], range[1] + 1).map((row) => row[xKey])\n        )\n    );\n\n    // recharts places the tick and hands the element its final geometry; we\n    // reuse its own <Text> so angle/anchor behavior is unchanged and only add\n    // the accent styling for the highlighted range. The formatter still takes\n    // the rendered position, since that is what recharts passes its own\n    // `tickFormatter`.\n    const categoryTick = highlightedValues.size\n      ? ({\n          payload,\n          index,\n          ...tickProps\n        }: {\n          payload: { value: string | number };\n          index: number;\n        }) => {\n          const value = xTickFormatter\n            ? xTickFormatter(payload.value as never, index)\n            : payload.value;\n          return (\n            <Text\n              {...tickProps}\n              className={cn(\n                'fill-muted-foreground',\n                highlightedValues.has(payload.value) && 'fill-primary italic'\n              )}\n              fontSize={12}\n            >\n              {value}\n            </Text>\n          );\n        }\n      : undefined;\n\n    // recharts spreads this over the bar's own props, so an explicitly\n    // `undefined` fill would wipe the series color (an unfilled path paints\n    // black). Only set what the caller asked for, and dim by default so\n    // `showActiveBar` alone is visible.\n    const activeBarOption = showActiveBar\n      ? {\n          ...(activeBar?.fill !== undefined ? { fill: activeBar.fill } : {}),\n          fillOpacity: activeBar?.opacity ?? 0.85,\n        }\n      : false;\n\n    // `gradient` and `pattern` paint from an SVG def, so the ids have to be\n    // unique per chart instance — same guard the shared container applies.\n    const defsId = `bar-${instanceId}`;\n    const usedShapes = new Set<BarChartBarShape>([barShape]);\n    settingsByKey.forEach(({ settings }) => {\n      if (settings.shape) usedShapes.add(settings.shape);\n    });\n    // recharts applies a flat minPointSize to zeroes too, which would draw a\n    // sliver where there is nothing to show. For a grouped bar it hands the\n    // callback the row's own value, but inside a stack it hands the running\n    // total, so a zero segment riding on a non-zero stack would slip through —\n    // there the value is read back off the row instead. That read uses the\n    // index recharts counts from the *displayed* slice, so a stacked chart\n    // whose brush has been dragged off its full range falls back to flooring\n    // the zero; the plain (unbrushed) stack, which is what the prop is for, is\n    // exact.\n    const minPointSizeFor = (key: string) =>\n      minPointSize === undefined\n        ? undefined\n        : (top: number | undefined | null, row: number) => {\n            const own = isStacked ? chartData[row]?.[key] : top;\n            return typeof own === 'number' && own !== 0 ? minPointSize : 0;\n          };\n\n    const fillOf = (key: string, shape: BarChartBarShape) =>\n      shape === 'gradient'\n        ? `url(#${defsId}-gradient-${toCssKey(key)})`\n        : shape === 'pattern'\n          ? `url(#${defsId}-pattern-${toCssKey(key)})`\n          : `var(--color-${toCssKey(key)})`;\n\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    // Round only the growing end — the top of the bar.\n    const endRadius: [number, number, number, number] = [\n      barRadius,\n      barRadius,\n      0,\n      0,\n    ];\n    // A pill rounds every corner; recharts clamps the radius to half the bar's\n    // shorter side, so an oversized number gives a true capsule at any width.\n    const radiusFor = (shape: BarChartBarShape, rounded: boolean) =>\n      shape === 'pill'\n        ? 9999\n        : barRadius > 0 && rounded\n          ? endRadius\n          : undefined;\n\n    // Both take the normalization unconditionally: gating it on \"is a\n    // headroom/paint-server series in play\" is what let the legend's ordering\n    // drift between otherwise identical charts. The helpers are no-ops when\n    // there is nothing to strip or recolor.\n    const tooltipElement = (\n      <NormalizedTooltipContent content={tooltipContent} dataKeys={dataKeys} />\n    );\n    const legendElement = <NormalizedLegendContent dataKeys={dataKeys} />;\n\n    // The long chart children are lifted into these renderers so the returned\n    // tree reads as a flat list. They are plain functions, not components:\n    // recharts looks some of its children up by element type (see `rangeCells`\n    // above), so what they return has to stay a *direct* child — an array or a\n    // fragment is flattened, a component wrapper would not be.\n\n    // The categories run along X and the values along Y, so the category props\n    // (dataKey/tick) belong to the X axis and the value props\n    // (unit/tickCount/domain) to the Y axis — recharts ignores each set on the\n    // other axis.\n    const renderAxes = () => (\n      <>\n        <XAxis\n          dataKey={xKey}\n          type=\"category\"\n          hide={!showXAxis}\n          tickLine={false}\n          axisLine={false}\n          tick={categoryTick}\n          tickFormatter={xTickFormatter}\n          angle={xAxisAngle}\n          interval={xAxisInterval}\n          textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n          height={xAxisHeight}\n          label={xAxisTitle}\n        />\n        <YAxis\n          type=\"number\"\n          hide={!showYAxis}\n          tickLine={false}\n          axisLine={false}\n          unit={yUnit}\n          tickFormatter={yTickFormatter}\n          tickCount={yAxisTickCount}\n          domain={yDomain}\n          width={yAxisLabel ? 72 : undefined}\n          label={yAxisTitle}\n        />\n      </>\n    );\n\n    const renderSeries = () =>\n      dataKeys.map((key, index) => {\n        // In a stack only the last segment's end is rounded; grouped bars\n        // each round their own end.\n        const rounded = isStacked ? index === dataKeys.length - 1 : true;\n        const entry = settingsByKey.get(key);\n        const inRange = (row: number) =>\n          entry !== undefined && row >= entry.range[0] && row <= entry.range[1];\n        const headroomKey = headroomKeys.get(key);\n        const { shape, activeBar: activeBarShape } = resolveBarShapes({\n          rangeBackground: entry?.settings.background === true,\n          inRange,\n          trackFill: backgroundFill,\n          activeBarOption,\n        });\n        const cells =\n          entry &&\n          rangeCells({\n            data,\n            chartData,\n            xKey,\n            seriesKey: key,\n            settings: entry.settings,\n            range: entry.range,\n            headroomKey,\n            barShape,\n            rounded,\n            fillOf,\n            radiusFor,\n          });\n        const labels = showLabels && (\n          <LabelList\n            dataKey={key}\n            position={barLabelPosition}\n            formatter={toLabelFormatter(labelFormatter)}\n            className={resolveLabelFillClass(barLabelPosition)}\n            fontSize={CHART_LABEL_FONT_SIZE}\n          />\n        );\n        return (\n          <React.Fragment key={key}>\n            <Bar\n              dataKey={key}\n              fill={fillOf(key, barShape)}\n              // Its own stack, so the headroom sits on this series' bar\n              // while the series stay side by side.\n              stackId={isStacked ? 'a' : headroomKey ? key : undefined}\n              radius={radiusFor(barShape, rounded)}\n              minPointSize={minPointSizeFor(key)}\n              background={showBackground ? { fill: backgroundFill } : undefined}\n              shape={shape}\n              activeBar={activeBarShape}\n              {...animation}\n            >\n              {cells}\n              {labels}\n            </Bar>\n            {headroomKey && (\n              <Bar\n                dataKey={`${HEADROOM_FIELD_PREFIX}${key}`}\n                stackId={key}\n                fill={`var(--color-${toCssKey(key)})`}\n                fillOpacity={0.25}\n                radius={radiusFor(barShape, true)}\n                // Decoration for the bar below it — never its own row in the\n                // tooltip or entry in the legend.\n                legendType=\"none\"\n                tooltipType=\"none\"\n                {...animation}\n              />\n            )}\n          </React.Fragment>\n        );\n      });\n\n    const renderReferenceAreas = () =>\n      referenceAreas.map(({ area, range }, index) => {\n        const [start, end] = range;\n        return (\n          <ReferenceArea\n            key={`${area.label ?? 'area'}-${index}`}\n            // Bands run along the category axis, which is X.\n            x1={data[start]?.[xKey]}\n            x2={data[end]?.[xKey]}\n            fill=\"var(--ui-background-surface-secondary)\"\n            fillOpacity={0.6}\n            ifOverflow=\"extendDomain\"\n            shape={resolveBandShape(area.divider)}\n            label={resolveBandLabel(area.label)}\n          />\n        );\n      });\n\n    const renderReferenceLines = () =>\n      referenceLines.map((ref, index) => {\n        const value = resolveChartReferenceValue(ref, data, dataKeys);\n        if (value === undefined) return null;\n        return (\n          <ReferenceLine\n            key={`${ref.label ?? 'ref'}-${index}`}\n            // Drawn on the value axis, which is Y.\n            y={value}\n            // By default the caption sits above the line's right end.\n            {...resolveReferenceLineProps(\n              ref.label,\n              ref.labelPosition ?? 'insideTopRight'\n            )}\n          />\n        );\n      });\n\n    return (\n      <div\n        ref={ref}\n        data-orientation={orientation}\n        data-layout={layout}\n        className={cn(barChartVariants({ orientation, layout }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsBarChart\n            data={chartData as readonly unknown[]}\n            layout={rechartsLayout}\n            barSize={barSize}\n            maxBarSize={maxBarSize}\n            barGap={barGap}\n            barCategoryGap={barCategoryGap}\n          >\n            <BarPaintServers id={defsId} dataKeys={dataKeys} shapes={usedShapes} />\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            {renderAxes()}\n            {showTooltip && <ChartTooltip content={tooltipElement} />}\n            {showLegend && <ChartLegend content={legendElement} />}\n            {renderSeries()}\n            {renderReferenceAreas()}\n            {renderReferenceLines()}\n            {showBrush && (\n              <Brush\n                dataKey={xKey}\n                // The brush slices rows by index, so its captions come from the\n                // axis holding the categories — X.\n                tickFormatter={xTickFormatter}\n                {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n              />\n            )}\n          </RechartsBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nBarChart.displayName = 'BarChart';\n\nexport { BarChart, barChartVariants };\n"],"mappings":";;;;;;;;;;;AAwEA,IAAM,KAAmB,EAAI,IAAI;CAC/B,UAAU;EACR,aAAa;GACX,UAAU;GACV,YAAY;EACd;EACA,QAAQ;GACN,SAAS;GACT,SAAS;EACX;CACF;CACA,iBAAiB;EACf,aAAa;EACb,QAAQ;CACV;AACF,CAAC,GAmDK,IAAwB;AAQ9B,SAAgB,EACd,GACA,GACiB;CACjB,IAAM,IAAO,GAAS,QACnB,MAAS,CAAC,OAAO,EAAK,OAAO,CAAC,CAAC,WAAW,CAAqB,CAClE;CAIA,OAAO,IACH,GAAM,MAAM,CAAC,CAAC,MACX,GAAG,MACF,EAAS,QAAQ,OAAO,EAAE,OAAO,CAAC,IAClC,EAAS,QAAQ,OAAO,EAAE,OAAO,CAAC,CACtC,IACA;AACN;AAQA,SAAgB,EACd,GACiB;CACjB,OAAO,GAAS,KAAK,MACnB,EAAK,OAAO,WAAW,MAAM,IACzB;EAAE,GAAG;EAAM,OAAO,eAAe,EAAS,OAAO,EAAK,OAAO,CAAC,EAAE;CAAG,IACnE,CACN;AACF;AA8BA,SAAgB,EAAyB,EACvC,YACA,aACA,GAAG,KAIF;CACD,IAAM,IAAS;EACb,GAAG;EACH,SAAS,EAAgB,EAAmB,EAAM,SAAS,CAAQ,CAAC;CACtE;CAKA,OAHK,IAGE,OAAO,KAAY,aACtB,EAAM,cACJ,GACA,CACF,IACA,EAAM,aAAa,GAAS,CAAM,IAP7B,kBAAC,GAAD,EAAqB,GAAK,EAAsC,CAAA;AAQ3E;AASA,SAAgB,EAAwB,EACtC,aACA,GAAG,KACmD;CACtD,OACE,kBAAC,GAAD;EACE,eAAe,EAAM;EACrB,SACE,EACE,EAAmB,EAAM,SAAS,CAAQ,CAC5C;CAEH,CAAA;AAEL;AAmBA,SAAS,EAAmB,EAC1B,QACA,UACA,cACA,YAMC;CACD,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,GAAD;EACE,WAAU;EACV,GAAG,EAAM,KAAK,KAAA;EACd,GAAG,EAAM,KAAK,KAAA;EACd,OAAO,EAAM,SAAS,KAAA;EACtB,QAAQ,EAAM,UAAU,KAAA;EACxB,MAAM;CACP,CAAA,GAEH,kBAAC,GAAD;EACE,GAAG,EAAI,KAAK,KAAA;EACZ,GAAG,EAAI,KAAK,KAAA;EACZ,OAAO,EAAI,SAAS,KAAA;EACpB,QAAQ,EAAI,UAAU,KAAA;EACtB,QAAQ,EAAI;EACZ,MAAM,GAAO,QAAQ,EAAI;EACzB,aAAa,GAAO,eAAe,EAAI;EACvC,QAAQ,EAAI;EACZ,aAAa,EAAI;EACjB,iBAAiB,EAAI;CACtB,CAAA,CACD,EAAA,CAAA;AAEN;AAOA,SAAgB,EAAiB,EAC/B,YACA,cACA,YAKC;CACD,QAAQ,EAAE,YAAY,GAAO,OAAO,GAAK,GAAG,QAC1C,EAAmB;EACjB;EACA,OAAO,EAAQ,CAAG,IAAI,IAAQ,KAAA;EAC9B;EACA;CACF,CAAC;AACL;AASA,SAAS,GAAiB,EACxB,oBACA,YACA,cACA,sBAUC;CAID,OAHK,IAGE;EACL,OAAO,EAAiB;GAAE;GAAS;EAAU,CAAC;EAC9C,WAAW,KACP,EAAiB;GAAE;GAAS;GAAW,OAAO;EAAgB,CAAC;CAErE,IAPS;EAAE,OAAO,KAAA;EAAW,WAAW;CAAgB;AAQ1D;AAWA,SAAS,EAAsB,GAO5B;CACD,IAAM,EAAE,OAAI,GAAG,OAAI,GAAG,WAAQ,GAAG,YAAS,GAAG,SAAM,mBAAgB;CACnE,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAU;EACP;EACA;EACI;EACC;EACF;EACO;CACd,CAAA,GACD,kBAAC,QAAD;EACE,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI,IAAI;EACR,QAAO;EACP,iBAAgB;CACjB,CAAA,CACD,EAAA,CAAA;AAEN;AAQA,SAAS,GAAiB,GAA8B;CACjD,OACL,OAAO;AACT;AAOA,SAAS,GAAiB,GAA2B;CACnD,OAAO,IACH;EACE,OAAO;EACP,UAAU;EACV,MAAM;EACN,UAAU;CACZ,IACA,KAAA;AACN;AAUA,SAAS,GAAgB,EACvB,OACA,aACA,aAKC;CACD,IAAM,IAAc,EAAO,IAAI,UAAU,GACnC,IAAa,EAAO,IAAI,SAAS;CAGvC,OAFI,CAAC,KAAe,CAAC,IAAmB,OAGtC,kBAAC,QAAD,EAAA,UACG,EAAS,KAAK,MACb,kBAAC,EAAM,UAAP,EAAA,UAAA,CAEG,KACC,kBAAC,kBAAD;EAAgB,IAAI,GAAG,EAAG,YAAY,EAAS,CAAG;EAAK,IAAG;EAAI,IAAG;EAAI,IAAG;EAAI,IAAG;EAA/E,UAAA,CACE,kBAAC,QAAD;GACE,QAAO;GACP,WAAW,eAAe,EAAS,CAAG,EAAE;GACxC,aAAa;EACd,CAAA,GACD,kBAAC,QAAD;GACE,QAAO;GACP,WAAW,eAAe,EAAS,CAAG,EAAE;GACxC,aAAa;EACd,CAAA,CACa;CAEjB,CAAA,GAAA,KACC,kBAAC,WAAD;EACE,IAAI,GAAG,EAAG,WAAW,EAAS,CAAG;EACjC,cAAa;EACb,OAAO;EACP,QAAQ;EACR,kBAAiB;EALnB,UAAA,CAOE,kBAAC,QAAD;GACE,OAAO;GACP,QAAQ;GACR,MAAM,eAAe,EAAS,CAAG,EAAE;GACnC,aAAa;EACd,CAAA,GACD,kBAAC,QAAD;GACE,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,QAAQ,eAAe,EAAS,CAAG,EAAE;GACrC,aAAa;EACd,CAAA,CACM;CAEG,CAAA,CAAA,EAAA,GAxCK,CAwCL,CACjB,EACG,CAAA;AAEV;AAkCA,SAAS,GAAW,EAClB,SACA,cACA,SACA,cACA,aACA,UACA,gBACA,aACA,YACA,WACA,gBACoB;CACpB,IAAM,EAAE,SAAM,YAAS,cAAW;CAElC,OAAO,EAAK,KAAK,GAAK,MAAa;EACjC,IAAM,IAAK,KAAY,EAAM,MAAM,KAAY,EAAM,IAC/C,IAAS,KAAM,EAAS,SAAU,GAIlC,IACJ,MAAgB,KAAA,KAChB,OACG,EAAU,EAAS,GAClB,GAAG,IAAwB,IAE/B,IAAI;EAEN,OACE,kBAAC,GAAD;GAEE,MACE,IAAM,KAAQ,EAAO,GAAW,CAAK,IAAK,EAAO,GAAW,CAAQ;GAEtE,aAAa,IAAK,IAAU,KAAA;GAC5B,QAAQ,KAAM,IAAS,eAAe,EAAS,CAAS,EAAE,KAAK,KAAA;GAC/D,aAAa,KAAM,IAAS,IAAI,KAAA;GAChC,iBAAiB,KAAM,IAAS,QAAQ,KAAA;GAIxC,QACG,IAAiB,KAAA,IAAY,EAAU,GAAO,CAAO;EAIzD,GAhBM,GAAG,EAAU,GAAG,OAAO,EAAI,EAAK,EAAE,GAAG,GAgB3C;CAEL,CAAC;AACH;AAuJA,IAAM,KAAiB,MAAkB,EAAM,eAAe;AAO9D,SAAS,EAAiB,EACxB,SACA,kBACA,QACA,mBACA,gBACA,cAQC;CACD,IAAM,EAAE,UAAO,UAAO,gBAAa,GAC7B,IAAQ,GACR,IAAM,IAAM,IAAI,KAAK,MAAO,IAAQ,IAAO,GAAG,IAAI,GAClD,IAAc,KAAY,QAAQ,IAAW,GAE7C,IACJ,kBAAC,EAAe,MAAhB;EACS;EACF;EACL,iBAAe;EACf,kBACE,IACI,GAAG,EAAe,CAAK,EAAE,MAAM,EAAe,CAAG,EAAE,IAAI,EAAI,eAAe,EAAe,CAAQ,MACjG,GAAG,EAAe,CAAK,EAAE,MAAM,EAAe,CAAG,EAAE,IAAI,EAAI;EAEjE,UAAU,IAAc,IAAI,KAAA;EAC5B,WAAU;EAVZ,UAAA,CAYE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,EAAe,OAAhB;IAAsB,WAAU;IAC7B,UAAA;GACmB,CAAA,GACtB,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KACb,UAAA,EAAe,CAAK;IACjB,CAAA,GACN,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MAAwC;MAAE;MAAI;KAAO;IACjD,CAAA,CAAA;GACH,CAAA,CAAA;EACL,CAAA,GAAA,kBAAC,EAAe,OAAhB;GAAsB,WAAU;GAAhC,UAAA,CACG,KACC,kBAAC,OAAD;IACE,iBAAA;IACA,WAAU;IACV,OAAO;KACL,iBAAiB;KACjB,SAAS;KACT,OAAO,GAAI,IAAW,IAAO,IAAI;IACnC;GACD,CAAA,GAEH,kBAAC,EAAe,WAAhB;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,EAAM;GACjC,CAAA,CACmB;EACH,CAAA,CAAA;;CAKvB,OAFK,IAGH,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAgB,QAAQ,EAAO,CAAA,GAC/B,kBAAC,GAAD;EACE,WAAW,EACT,gEACA,CAAC,KAAW,yBACd;EAEC,UAAA,KACC,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,EAAM;GACjC,CAAA;GACD,kBAAC,QAAD;IAAM,WAAU;IAAiB,UAAA;GAAY,CAAA;GAC7C,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KACG,EAAe,CAAK;KAAE;KAAK,EAAe,CAAG;KAAE;KAAI;KAAI;IACpD;;EACN,EAAA,CAAA;CAEU,CAAA,CACT,EAAA,CAAA,IAxBc;AA0B3B;AAEA,IAAM,IAAsB,EAAM,YAK9B,EACE,UACA,QACA,YACA,oBAAiB,GACjB,iBAAc,IACd,YACA,cACA,GAAG,KAEL,MACG;CAIH,IAAM,IACJ,MAAQ,KAAA,KAAa,IAAM,IACvB,IACA,EAAM,QAAQ,GAAK,MAAS,IAAM,EAAK,OAAO,CAAC,KAAK,GAKpD,IAAiB,EAAM,cAAc;EACzC,IAAI,CAAC,GAAS,OAAO;EAGrB,IAAM,IAAsB,OAAO,YACjC,EAAM,KAAK,GAAM,MAAM,CACrB,OAAO,KACP;GAAE,OAAO,EAAK;GAAO,GAAI,EAAK,OAAO,EAAE,MAAM,EAAK,KAAK,IAAI,CAAC;EAAG,CACjE,CAAC,CACH,GACM,IAAW,EAAmB,GAAQ,CAAO;EACnD,OAAO,EAAM,KAAK,GAAM,MAAM,EAAK,SAAS,EAAS,OAAO,IAAI,EAAE,SAAS,EAAE;CAC/E,GAAG,CAAC,GAAO,CAAO,CAAC;CAEnB,OACE,kBAAC,OAAD;EACO;EACL,oBAAiB;EACjB,WAAW,EAAG,uBAAuB,CAAS;EAC9C,GAAI;EAEH,UAAA,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD;GAEQ;GACN,eAAe,IAAkB,EAAe,MAAM,KAAO,EAAK,SAAS;GAC3E,KAAK;GACW;GACH;GACJ;EACV,GAPM,GAAG,EAAE,GAAG,EAAK,OAOnB,CACF;CACE,CAAA;AAET,CACF;AACA,EAAoB,cAAc;AAElC,IAAM,IAAW,EAAM,YACpB,GAAU,MAAQ;CAEjB,IAAM,IAAa,EAAM,MAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CAEjD,IAAI,EAAS,gBAAgB,cAAc;EACzC,IAAM,EAAE,aAAa,GAAc,GAAG,MAAoB;EAC1D,OAAO,kBAAC,GAAD;GAAqB,GAAI;GAAsB;EAAM,CAAA;CAC9D;CAEA,IAAM,EACJ,cACA,WACA,YACA,SACA,aACA,SACA,kBACA,kBACA,gBACA,eACA,eACA,UAGA,iBAAc,YACd,YAAS,WACT,eAAY,GACZ,cAAW,WACX,cAAU,GACV,gBACA,aAAS,GACT,oBACA,iBACA,qBAAiB,IACjB,oBAAiB,0CACjB,oBAAgB,IAChB,cACA,eAAW,IACX,kBAAc,IACd,iBAAa,IACb,gBAAY,IACZ,gBAAY,IACZ,mBACA,oBACA,eACA,mBACA,oBACA,iBACA,iBAAa,IACb,oBACA,kBACA,oBACA,aACA,uBACA,oBACA,qBACA,iBAAa,IACb,mBACA,oBACA,gBAAY,IACZ,iBACA,oBACA,GAAG,OACD,GAEE,IAAY,EAAiB;EACjC;EACA;EACA;EACA;CACF,CAAC,GAIK,IAAY,MAAW,WAGvB,IAAmB,EAA8B;EACrD;EACA;EACA,YAAY;CACd,CAAC,GAEK,KAAiB,GAAoB,CAAa,GAIlD,MACJ,IACI,MAAM,QAAQ,CAAa,IACzB,IACA,CAAC,CAAa,IAChB,CAAC,EAAA,CAEJ,KAAK,OAAU;EAAE;EAAM,OAAO,EAAqB,GAAM,GAAM,CAAI;CAAE,EAAE,CAAC,CACxE,QACE,MACC,EAAM,UAAU,KAAA,CACpB,GAEI,IAAgB,IAAI,IACxB,EAAS,SAAS,MAAQ;EACxB,IAAM,IAAW,IAAc,IACzB,IAAQ,IACV,EAAqB,GAAU,GAAM,CAAI,IACzC,KAAA;EACJ,OAAO,KAAY,IAAQ,CAAC,CAAC,GAAK;GAAE;GAAU;EAAM,CAAC,CAAU,IAAI,CAAC;CACtE,CAAC,CACH,GAKM,IAAe,IAAI,IACvB,IACI,CAAC,IACD,MAAM,KAAK,IAAgB,CAAC,GAAK,OAC/B,OAAO,EAAM,SAAS,cAAe,WAChC,CAAC,GAAK,EAAM,SAAS,UAAU,IAChC,KAAA,CACN,CAAC,CAAC,QAAQ,MAA4C,MAAS,KAAA,CAAS,CAC9E,GAEM,IAAY,EAAa,OAC3B,EAAK,KAAK,GAAK,MAAa;EAC1B,IAAM,IAAgC,CAAC;EAWvC,OAVA,EAAa,SAAS,GAAU,MAAQ;GACtC,IAAM,IAAQ,EAAc,IAAI,CAAG;GACnC,IAAI,CAAC,GAAO;GACZ,IAAM,CAAC,GAAO,KAAO,EAAM;GAC3B,IAAI,IAAW,KAAS,IAAW,GAAK;GACxC,IAAM,IAAQ,EAAI,IACZ,IAAQ,EAAI;GACd,OAAO,KAAU,YAAY,OAAO,KAAU,aAClD,EAAM,GAAG,IAAwB,OAAS,KAAK,IAAI,GAAG,IAAQ,CAAK;EACrE,CAAC,GACM;GAAE,GAAG;GAAK,GAAG;EAAM;CAC5B,CAAC,IACD,GASE,IAAoB,IAAI,IAC5B,GACG,QAAQ,EAAE,cAAW,EAAK,mBAAmB,EAAK,CAAC,CACnD,SAAS,EAAE,eACV,EAAK,MAAM,EAAM,IAAI,EAAM,KAAK,CAAC,CAAC,CAAC,KAAK,MAAQ,EAAI,EAAK,CAC3D,CACJ,GAOM,KAAe,EAAkB,QAClC,EACC,YACA,UACA,GAAG,QAIC;EACJ,IAAM,IAAQ,IACV,EAAe,EAAQ,OAAgB,CAAK,IAC5C,EAAQ;EACZ,OACE,kBAAC,IAAD;GACE,GAAI;GACJ,WAAW,EACT,yBACA,EAAkB,IAAI,EAAQ,KAAK,KAAK,qBAC1C;GACA,UAAU;GAET,UAAA;EACG,CAAA;CAEV,IACA,KAAA,GAME,KAAkB,KACpB;EACE,GAAI,GAAW,SAAS,KAAA,IAAuC,CAAC,IAA5B,EAAE,MAAM,EAAU,KAAK;EAC3D,aAAa,GAAW,WAAW;CACrC,IACA,IAIE,IAAS,OAAO,KAChB,qBAAa,IAAI,IAAsB,CAAC,CAAQ,CAAC;CACvD,EAAc,SAAS,EAAE,kBAAe;EACtC,AAAI,EAAS,SAAO,GAAW,IAAI,EAAS,KAAK;CACnD,CAAC;CAUD,IAAM,MAAmB,MACvB,MAAiB,KAAA,IACb,KAAA,KACC,GAAgC,MAAgB;EAC/C,IAAM,IAAM,IAAY,EAAU,EAAI,GAAG,KAAO;EAChD,OAAO,OAAO,KAAQ,YAAY,MAAQ,IAAI,IAAe;CAC/D,GAEA,MAAU,GAAa,MAC3B,MAAU,aACN,QAAQ,EAAO,YAAY,EAAS,CAAG,EAAE,KACzC,MAAU,YACR,QAAQ,EAAO,WAAW,EAAS,CAAG,EAAE,KACxC,eAAe,EAAS,CAAG,EAAE,IAK/B,KAAa,GAAkB,CAAU,GACzC,KAAa,GAAkB,CAAU,GAEzC,KAAU,EAAkB,EAAW,GAEvC,KAAc,GAAmB,GAAY,CAAU,GAGvD,KAA8C;EAClD;EACA;EACA;EACA;CACF,GAGM,KAAa,GAAyB,MAC1C,MAAU,SACN,OACA,IAAY,KAAK,IACf,KACA,KAAA,GAMF,KACJ,kBAAC,GAAD;EAA0B,SAAS;EAA0B;CAAW,CAAA,GAEpE,KAAgB,kBAAC,GAAD,EAAmC,YAAW,CAAA,GAY9D,WACJ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,IAAD;EACE,SAAS;EACT,MAAK;EACL,MAAM,CAAC;EACP,UAAU;EACV,UAAU;EACV,MAAM;EACN,eAAe;EACf,OAAO;EACP,UAAU;EACV,YAAY,GAAyB,CAAU;EAC/C,QAAQ;EACR,OAAO;CACR,CAAA,GACD,kBAAC,IAAD;EACE,MAAK;EACL,MAAM,CAAC;EACP,UAAU;EACV,UAAU;EACV,MAAM;EACN,eAAe;EACf,WAAW;EACX,QAAQ;EACR,OAAO,IAAa,KAAK,KAAA;EACzB,OAAO;CACR,CAAA,CACD,EAAA,CAAA,GAGE,WACJ,EAAS,KAAK,GAAK,MAAU;EAG3B,IAAM,IAAU,MAAY,MAAU,EAAS,SAAS,GAClD,IAAQ,EAAc,IAAI,CAAG,GAC7B,KAAW,MACf,MAAU,KAAA,KAAa,KAAO,EAAM,MAAM,MAAM,KAAO,EAAM,MAAM,IAC/D,IAAc,EAAa,IAAI,CAAG,GAClC,EAAE,UAAO,WAAW,MAAmB,GAAiB;GAC5D,iBAAiB,GAAO,SAAS,eAAe;GAChD;GACA,WAAW;GACX;EACF,CAAC,GACK,IACJ,KACA,GAAW;GACT;GACA;GACA;GACA,WAAW;GACX,UAAU,EAAM;GAChB,OAAO,EAAM;GACb;GACA;GACA;GACA;GACA;EACF,CAAC,GACG,IAAS,MACb,kBAAC,IAAD;GACE,SAAS;GACT,UAAU;GACV,WAAW,GAAiB,EAAc;GAC1C,WAAW,EAAsB,CAAgB;GACjD,UAAA;EACD,CAAA;EAEH,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,SAAS;GACT,MAAM,GAAO,GAAK,CAAQ;GAG1B,SAAS,IAAY,MAAM,IAAc,IAAM,KAAA;GAC/C,QAAQ,EAAU,GAAU,CAAO;GACnC,cAAc,GAAgB,CAAG;GACjC,YAAY,KAAiB,EAAE,MAAM,EAAe,IAAI,KAAA;GACjD;GACP,WAAW;GACX,GAAI;GAXN,UAAA,CAaG,GACA,CACE;EACJ,CAAA,GAAA,KACC,kBAAC,GAAD;GACE,SAAS,GAAG,IAAwB;GACpC,SAAS;GACT,MAAM,eAAe,EAAS,CAAG,EAAE;GACnC,aAAa;GACb,QAAQ,EAAU,GAAU,EAAI;GAGhC,YAAW;GACX,aAAY;GACZ,GAAI;EACL,CAAA,CAEW,EAAA,GA/BK,CA+BL;CAEpB,CAAC,GAEG,WACJ,GAAe,KAAK,EAAE,SAAM,YAAS,MAAU;EAC7C,IAAM,CAAC,GAAO,KAAO;EACrB,OACE,kBAAC,IAAD;GAGE,IAAI,EAAK,EAAM,GAAG;GAClB,IAAI,EAAK,EAAI,GAAG;GAChB,MAAK;GACL,aAAa;GACb,YAAW;GACX,OAAO,GAAiB,EAAK,OAAO;GACpC,OAAO,GAAiB,EAAK,KAAK;EACnC,GATM,GAAG,EAAK,SAAS,OAAO,GAAG,GASjC;CAEL,CAAC,GAEG,WACJ,GAAe,KAAK,GAAK,MAAU;EACjC,IAAM,IAAQ,EAA2B,GAAK,GAAM,CAAQ;EAE5D,OADI,MAAU,KAAA,IAAkB,OAE9B,kBAAC,IAAD;GAGE,GAAG;GAEH,GAAI,GACF,EAAI,OACJ,EAAI,iBAAiB,gBACvB;EACD,GARM,GAAG,EAAI,SAAS,MAAM,GAAG,GAQ/B;CAEL,CAAC;CAEH,OACE,kBAAC,OAAD;EACO;EACL,oBAAkB;EAClB,eAAa;EACb,WAAW,EAAG,GAAiB;GAAE;GAAa;EAAO,CAAC,GAAG,CAAS;EAClE,GAAI;EAEJ,UAAA,kBAAC,GAAD;GACU;GACC;GACT,WAAU;GAEV,UAAA,kBAAC,IAAD;IACE,MAAM;IACN,QAAQ;IACC;IACG;IACJ;IACQ;IANlB,UAAA;KAQE,kBAAC,IAAD;MAAiB,IAAI;MAAkB;MAAU,QAAQ;KAAa,CAAA;KACrE,MACC,kBAAC,IAAD;MACE,YAAY,MAAkB;MAC9B,UAAU,MAAgB;MAC1B,iBAAiB,KAAa,QAAQ,KAAA;KACvC,CAAA;KAEF,GAAW;KACX,MAAe,kBAAC,GAAD,EAAc,SAAS,GAAiB,CAAA;KACvD,MAAc,kBAAC,GAAD,EAAa,SAAS,GAAgB,CAAA;KACpD,GAAa;KACb,GAAqB;KACrB,GAAqB;KACrB,MACC,kBAAC,IAAD;MACE,SAAS;MAGT,eAAe;MACf,GAAI,EAAkB;OAAE;OAAa;MAAe,CAAC;KACtD,CAAA;IAEa;;EACJ,CAAA;CACb,CAAA;AAET,CACF;AACA,EAAS,cAAc"}

package/dist/components/ui/category-bar/category-bar.js

@@ -3,11 +3,11 @@ 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 { Tooltip as n, TooltipContent as r, TooltipTrigger as i } from "../tooltip/tooltip.js";
 import { CHART_DEFAULT_PALETTE as a } from "../chart/chart-palette.js";
-import { ChartStyle as o, resolveChartColors as s } from "../chart/chart.js";
-import * as c from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ChartStyle as o, resolveChartColors as s, toCssKey as c } from "../chart/chart.js";
+import * as l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/ui/category-bar/category-bar.tsx
-var f = (e) => e.toLocaleString(), p = t("flex w-full overflow-hidden rounded-full bg-input", {
+var p = (e) => e.toLocaleString(), m = t("flex w-full overflow-hidden rounded-full bg-input", {
 	variants: { size: {
 		sm: "h-1.5",
 		md: "h-2.5",
@@ -15,32 +15,32 @@ var f = (e) => e.toLocaleString(), p = t("flex w-full overflow-hidden rounded-fu
 	} },
 	defaultVariants: { size: "md" }
 });
-function m({ chartId: t, config: n, color: i, label: a, percent: s, segmentKey: c, value: f, valueFormatter: p, renderContent: m }) {
-	return /* @__PURE__ */ d(r, {
+function h({ chartId: t, config: n, color: i, label: a, percent: s, segmentKey: c, value: l, valueFormatter: p, renderContent: m }) {
+	return /* @__PURE__ */ f(r, {
 		"data-chart": t,
 		className: e("border border-border bg-background text-foreground shadow-md", !m && "flex items-center gap-2"),
-		children: [/* @__PURE__ */ u(o, {
+		children: [/* @__PURE__ */ d(o, {
 			id: t,
 			config: n
 		}), m ? m({
 			key: c,
-			value: f,
+			value: l,
 			label: a,
 			percent: s,
 			color: i
-		}) : /* @__PURE__ */ d(l, { children: [
-			/* @__PURE__ */ u("span", {
+		}) : /* @__PURE__ */ f(u, { children: [
+			/* @__PURE__ */ d("span", {
 				className: "size-2.5 shrink-0 rounded-full",
 				style: { backgroundColor: i }
 			}),
-			/* @__PURE__ */ u("span", {
+			/* @__PURE__ */ d("span", {
 				className: "font-semibold",
 				children: a
 			}),
-			/* @__PURE__ */ d("span", {
+			/* @__PURE__ */ f("span", {
 				className: "text-muted-foreground tabular-nums",
 				children: [
-					p(f),
+					p(l),
 					" · ",
 					s,
 					"%"
@@ -49,67 +49,67 @@ function m({ chartId: t, config: n, color: i, label: a, percent: s, segmentKey:
 		] })]
 	});
 }
-var h = c.forwardRef(({ className: t, data: r, config: l, palette: h = a, size: g, showLegend: _ = !1, showTooltip: v = !0, tooltipContent: y, valueFormatter: b = f, defaultOpenIndex: x, "aria-label": S, ...C }, w) => {
-	let T = `chart-${c.useId().replace(/:/g, "")}`, E = c.useMemo(() => s(l, h), [l, h]), D = r.reduce((e, t) => e + t.value, 0), O = (e) => l[e]?.label ?? e, k = (e) => {
-		let t = l[e]?.label;
+var g = l.forwardRef(({ className: t, data: r, config: u, palette: g = a, size: _, showLegend: v = !1, showTooltip: y = !0, tooltipContent: b, valueFormatter: x = p, defaultOpenIndex: S, "aria-label": C, ...w }, T) => {
+	let E = `chart-${l.useId().replace(/:/g, "")}`, D = l.useMemo(() => s(u, g), [u, g]), O = r.reduce((e, t) => e + t.value, 0), k = (e) => u[e]?.label ?? e, A = (e) => {
+		let t = u[e]?.label;
 		return typeof t == "string" || typeof t == "number" ? String(t) : e;
-	}, A = (e) => `var(--color-${e})`, j = (e) => D > 0 ? Math.round(e / D * 100) : 0, M = S ?? r.map((e) => `${k(e.key)} ${b(e.value)}`).join(", ");
-	return /* @__PURE__ */ d("div", {
-		ref: w,
-		"data-chart": T,
+	}, j = (e) => `var(--color-${c(e)})`, M = (e) => O > 0 ? Math.round(e / O * 100) : 0, N = C ?? r.map((e) => `${A(e.key)} ${x(e.value)}`).join(", ");
+	return /* @__PURE__ */ f("div", {
+		ref: T,
+		"data-chart": E,
 		className: e("flex w-full flex-col gap-3", t),
-		...C,
+		...w,
 		children: [
-			/* @__PURE__ */ u(o, {
-				id: T,
-				config: E
+			/* @__PURE__ */ d(o, {
+				id: E,
+				config: D
 			}),
-			/* @__PURE__ */ u("div", {
-				className: p({ size: g }),
+			/* @__PURE__ */ d("div", {
+				className: m({ size: _ }),
 				role: "img",
-				"aria-label": M,
+				"aria-label": N,
 				children: r.map((e, t) => {
-					let r = A(e.key), a = /* @__PURE__ */ u("div", {
+					let r = j(e.key), a = /* @__PURE__ */ d("div", {
 						className: "h-full min-w-0",
 						style: {
 							flex: `${e.value} 0 0%`,
 							backgroundColor: r
 						}
 					}, e.key);
-					return v ? /* @__PURE__ */ d(n, {
-						defaultOpen: t === x,
-						children: [/* @__PURE__ */ u(i, { render: a }), /* @__PURE__ */ u(m, {
-							chartId: T,
-							config: E,
+					return y ? /* @__PURE__ */ f(n, {
+						defaultOpen: t === S,
+						children: [/* @__PURE__ */ d(i, { render: a }), /* @__PURE__ */ d(h, {
+							chartId: E,
+							config: D,
 							color: r,
-							label: O(e.key),
-							percent: j(e.value),
+							label: k(e.key),
+							percent: M(e.value),
 							segmentKey: e.key,
 							value: e.value,
-							valueFormatter: b,
-							renderContent: y
+							valueFormatter: x,
+							renderContent: b
 						})]
 					}, e.key) : a;
 				})
 			}),
-			_ && /* @__PURE__ */ u("ul", {
+			v && /* @__PURE__ */ d("ul", {
 				className: "flex flex-wrap justify-between gap-x-6 gap-y-3",
-				children: r.map((e) => /* @__PURE__ */ d("li", {
+				children: r.map((e) => /* @__PURE__ */ f("li", {
 					className: "flex flex-col gap-1.5",
-					children: [/* @__PURE__ */ d("span", {
+					children: [/* @__PURE__ */ f("span", {
 						className: "flex items-center gap-1.5 text-sm leading-none text-muted-foreground",
-						children: [/* @__PURE__ */ u("span", {
+						children: [/* @__PURE__ */ d("span", {
 							className: "size-2.5 shrink-0 rounded-sm",
-							style: { backgroundColor: A(e.key) }
-						}), O(e.key)]
-					}), /* @__PURE__ */ d("span", {
+							style: { backgroundColor: j(e.key) }
+						}), k(e.key)]
+					}), /* @__PURE__ */ f("span", {
 						className: "flex items-baseline gap-1.5 leading-none tabular-nums",
-						children: [/* @__PURE__ */ u("span", {
+						children: [/* @__PURE__ */ d("span", {
 							className: "text-base font-semibold text-foreground",
-							children: b(e.value)
-						}), /* @__PURE__ */ d("span", {
+							children: x(e.value)
+						}), /* @__PURE__ */ f("span", {
 							className: "text-sm text-muted-foreground",
-							children: [j(e.value), "%"]
+							children: [M(e.value), "%"]
 						})]
 					})]
 				}, e.key))
@@ -117,8 +117,8 @@ var h = c.forwardRef(({ className: t, data: r, config: l, palette: h = a, size:
 		]
 	});
 });
-h.displayName = "CategoryBar";
+g.displayName = "CategoryBar";
 //#endregion
-export { h as CategoryBar, p as categoryBarVariants };
+export { g as CategoryBar, m as categoryBarVariants };
 
 //# sourceMappingURL=category-bar.js.map

package/dist/components/ui/category-bar/category-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"category-bar.js","names":[],"sources":["../../../../src/components/ui/category-bar/category-bar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport {\n  CHART_DEFAULT_PALETTE,\n  ChartStyle,\n  resolveChartColors,\n  type ChartConfig,\n  type ChartPalette,\n  type ResolvedChartConfig,\n} from '../chart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A category bar: a single horizontal bar split into proportional colored\n// segments — one part-to-whole across a handful of categories, in one row\n// (onboarding stages, certification status, a rating scale). Unlike\n// `BarChart orientation=\"horizontal\"` (one value per labelled row, stacked into\n// a bar list), all segments share the same bar.\n// It's a plain flex composition, not a recharts chart: each segment's width is\n// `value / total`, so exact proportions and the count/% legend are direct DOM,\n// with no axes/grid to hide. Segment colors come from the `palette` prop, the\n// same dataviz palettes the recharts charts use.\n//\n// Colors are consumed through the same `--color-<key>` bridge the recharts\n// charts use: `ChartStyle` emits one custom property per config entry, so a\n// `theme: { light, dark }` entry works as well as a flat `color` — reading\n// `config[key].color` directly would render a themed config colorless. The\n// tooltip is portaled out of the bar's DOM, so its popup carries its own\n// `data-chart` scope + `ChartStyle` to keep the bridge resolvable there.\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\n// Track height only — the flex/rounded/overflow chrome is static.\nconst categoryBarVariants = cva(\n  'flex w-full overflow-hidden rounded-full bg-input',\n  {\n    variants: {\n      size: {\n        sm: 'h-1.5',\n        md: 'h-2.5',\n        lg: 'h-4',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface CategoryBarSegment {\n  /** Key into `config` for this segment's label + color. */\n  key: string;\n  /** The segment's value — its width is this over the sum of all values. */\n  value: number;\n}\n\n/** The resolved segment passed to a custom `tooltipContent` renderer. */\nexport interface CategoryBarTooltipContext extends CategoryBarSegment {\n  /** Resolved `config` label (falls back to the key); may be any `ReactNode`. */\n  label: React.ReactNode;\n  /** Share of the total as a rounded percentage (0–100). */\n  percent: number;\n  /**\n   * CSS color reference for the segment — the `var(--color-<key>)` bridge, which\n   * resolves the palette stop assigned to this segment. Usable anywhere a CSS\n   * color is (e.g. a `style` background); not a literal value.\n   */\n  color: string;\n}\n\nexport interface CategoryBarProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof categoryBarVariants> {\n  /** Ordered segments (left → right). Widths are proportional to `value`. */\n  data: ReadonlyArray<CategoryBarSegment>;\n  /** Maps each segment `key` to a `label` and, optionally, a palette `tone`. */\n  config: ChartConfig;\n  /**\n   * The dataviz palette the segments are painted from. Segments take a stop of\n   * it in the palette's defined order, or the one their `tone` names. Defaults\n   * to `categorical`.\n   */\n  palette?: ChartPalette;\n  /** Show the legend below the bar (color dot + label + value + %). */\n  showLegend?: boolean;\n  /** Show a hover tooltip per segment (dot + label + value + %). */\n  showTooltip?: boolean;\n  /**\n   * Custom tooltip content per segment — replaces the default (dot + label +\n   * `value · %`) inside the same card. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: (segment: CategoryBarTooltipContext) => React.ReactNode;\n  /** Format the numeric value (legend + tooltip). Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Render the tooltip for this segment index initially open (VR/testing). */\n  defaultOpenIndex?: number;\n  /**\n   * Accessible summary of the whole bar. Defaults to a `label value` list built\n   * from the data; pass a fuller sentence for screen readers if you have one.\n   */\n  'aria-label'?: string;\n}\n\n/**\n * One segment's hover card.\n *\n * It re-declares `data-chart` and re-renders `ChartStyle` because the popup is\n * portaled out of the bar: outside that subtree the `--color-*` bridge the\n * swatch reads has nothing to resolve against.\n */\nfunction CategoryBarSegmentTooltip({\n  chartId,\n  config,\n  color,\n  label,\n  percent,\n  segmentKey,\n  value,\n  valueFormatter,\n  renderContent,\n}: {\n  chartId: string;\n  config: ResolvedChartConfig;\n  color: string;\n  label: React.ReactNode;\n  percent: number;\n  segmentKey: string;\n  value: number;\n  valueFormatter: (value: number) => string;\n  // Not named `render`: in this package that name is reserved for Base UI's\n  // polymorphic composition prop (see `<TooltipTrigger render={…} />` below).\n  renderContent?: (segment: CategoryBarTooltipContext) => React.ReactNode;\n}) {\n  return (\n    <TooltipContent\n      data-chart={chartId}\n      className={cn(\n        'border border-border bg-background text-foreground shadow-md',\n        !renderContent && 'flex items-center gap-2'\n      )}\n    >\n      <ChartStyle id={chartId} config={config} />\n      {renderContent ? (\n        renderContent({ key: segmentKey, value, label, percent, color })\n      ) : (\n        <>\n          <span\n            className=\"size-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: color }}\n          />\n          <span className=\"font-semibold\">{label}</span>\n          <span className=\"text-muted-foreground tabular-nums\">\n            {valueFormatter(value)} · {percent}%\n          </span>\n        </>\n      )}\n    </TooltipContent>\n  );\n}\n\nconst CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>(\n  (\n    {\n      className,\n      data,\n      config,\n      palette = CHART_DEFAULT_PALETTE,\n      size,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      valueFormatter = defaultFormat,\n      defaultOpenIndex,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n    // Resolved here rather than by a `ChartContainer`: this component paints\n    // plain divs, not a recharts plot, so it owns the `--color-*` emission for\n    // both the bar and its portaled per-segment tooltip.\n    const resolvedConfig = React.useMemo(\n      () => resolveChartColors(config, palette),\n      [config, palette]\n    );\n\n    const total = data.reduce((sum, seg) => sum + seg.value, 0);\n    const labelFor = (key: string): React.ReactNode =>\n      config[key]?.label ?? key;\n    // The aria-label has to be a plain string, so a rich (element) label can't\n    // be used there — fall back to the key rather than stringifying it into\n    // \"[object Object]\".\n    const labelTextFor = (key: string) => {\n      const label = config[key]?.label;\n      return typeof label === 'string' || typeof label === 'number'\n        ? String(label)\n        : key;\n    };\n    const colorOf = (key: string) => `var(--color-${key})`;\n    const pctOf = (value: number) =>\n      total > 0 ? Math.round((value / total) * 100) : 0;\n\n    // A locale-neutral fallback: \"<label> <value>\" pairs. Consumers can pass a\n    // fuller `aria-label` sentence.\n    const summary =\n      ariaLabel ??\n      data\n        .map((seg) => `${labelTextFor(seg.key)} ${valueFormatter(seg.value)}`)\n        .join(', ');\n\n    return (\n      <div\n        ref={ref}\n        data-chart={chartId}\n        className={cn('flex w-full flex-col gap-3', className)}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={resolvedConfig} />\n        <div\n          className={categoryBarVariants({ size })}\n          role=\"img\"\n          aria-label={summary}\n        >\n          {data.map((seg, index) => {\n            const color = colorOf(seg.key);\n            // flex-grow proportional to value with a zero basis → widths are\n            // exactly value/total; a zero-value segment collapses.\n            const segment = (\n              <div\n                key={seg.key}\n                className=\"h-full min-w-0\"\n                style={{ flex: `${seg.value} 0 0%`, backgroundColor: color }}\n              />\n            );\n\n            if (!showTooltip) return segment;\n\n            return (\n              <Tooltip key={seg.key} defaultOpen={index === defaultOpenIndex}>\n                <TooltipTrigger render={segment} />\n                <CategoryBarSegmentTooltip\n                  chartId={chartId}\n                  config={resolvedConfig}\n                  color={color}\n                  label={labelFor(seg.key)}\n                  percent={pctOf(seg.value)}\n                  segmentKey={seg.key}\n                  value={seg.value}\n                  valueFormatter={valueFormatter}\n                  renderContent={tooltipContent}\n                />\n              </Tooltip>\n            );\n          })}\n        </div>\n\n        {showLegend && (\n          <ul className=\"flex flex-wrap justify-between gap-x-6 gap-y-3\">\n            {data.map((seg) => (\n              <li key={seg.key} className=\"flex flex-col gap-1.5\">\n                <span className=\"flex items-center gap-1.5 text-sm leading-none text-muted-foreground\">\n                  <span\n                    className=\"size-2.5 shrink-0 rounded-sm\"\n                    style={{ backgroundColor: colorOf(seg.key) }}\n                  />\n                  {labelFor(seg.key)}\n                </span>\n                <span className=\"flex items-baseline gap-1.5 leading-none tabular-nums\">\n                  <span className=\"text-base font-semibold text-foreground\">\n                    {valueFormatter(seg.value)}\n                  </span>\n                  <span className=\"text-sm text-muted-foreground\">\n                    {pctOf(seg.value)}%\n                  </span>\n                </span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n);\nCategoryBar.displayName = 'CategoryBar';\n\nexport { CategoryBar, categoryBarVariants };\n"],"mappings":"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"}
+{"version":3,"file":"category-bar.js","names":[],"sources":["../../../../src/components/ui/category-bar/category-bar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport {\n  CHART_DEFAULT_PALETTE,\n  ChartStyle,\n  resolveChartColors,\n  toCssKey,\n  type ChartConfig,\n  type ChartPalette,\n  type ResolvedChartConfig,\n} from '../chart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A category bar: a single horizontal bar split into proportional colored\n// segments — one part-to-whole across a handful of categories, in one row\n// (onboarding stages, certification status, a rating scale). Unlike\n// `BarChart orientation=\"horizontal\"` (one value per labelled row, stacked into\n// a bar list), all segments share the same bar.\n// It's a plain flex composition, not a recharts chart: each segment's width is\n// `value / total`, so exact proportions and the count/% legend are direct DOM,\n// with no axes/grid to hide. Segment colors come from the `palette` prop, the\n// same dataviz palettes the recharts charts use.\n//\n// Colors are consumed through the same `--color-<key>` bridge the recharts\n// charts use: `ChartStyle` emits one custom property per config entry, so a\n// `theme: { light, dark }` entry works as well as a flat `color` — reading\n// `config[key].color` directly would render a themed config colorless. The\n// tooltip is portaled out of the bar's DOM, so its popup carries its own\n// `data-chart` scope + `ChartStyle` to keep the bridge resolvable there.\n\nconst defaultFormat = (value: number) => value.toLocaleString();\n\n// Track height only — the flex/rounded/overflow chrome is static.\nconst categoryBarVariants = cva(\n  'flex w-full overflow-hidden rounded-full bg-input',\n  {\n    variants: {\n      size: {\n        sm: 'h-1.5',\n        md: 'h-2.5',\n        lg: 'h-4',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface CategoryBarSegment {\n  /** Key into `config` for this segment's label + color. */\n  key: string;\n  /** The segment's value — its width is this over the sum of all values. */\n  value: number;\n}\n\n/** The resolved segment passed to a custom `tooltipContent` renderer. */\nexport interface CategoryBarTooltipContext extends CategoryBarSegment {\n  /** Resolved `config` label (falls back to the key); may be any `ReactNode`. */\n  label: React.ReactNode;\n  /** Share of the total as a rounded percentage (0–100). */\n  percent: number;\n  /**\n   * CSS color reference for the segment — the `var(--color-<key>)` bridge, which\n   * resolves the palette stop assigned to this segment. Usable anywhere a CSS\n   * color is (e.g. a `style` background); not a literal value.\n   */\n  color: string;\n}\n\nexport interface CategoryBarProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof categoryBarVariants> {\n  /** Ordered segments (left → right). Widths are proportional to `value`. */\n  data: ReadonlyArray<CategoryBarSegment>;\n  /** Maps each segment `key` to a `label` and, optionally, a palette `tone`. */\n  config: ChartConfig;\n  /**\n   * The dataviz palette the segments are painted from. Segments take a stop of\n   * it in the palette's defined order, or the one their `tone` names. Defaults\n   * to `categorical`.\n   */\n  palette?: ChartPalette;\n  /** Show the legend below the bar (color dot + label + value + %). */\n  showLegend?: boolean;\n  /** Show a hover tooltip per segment (dot + label + value + %). */\n  showTooltip?: boolean;\n  /**\n   * Custom tooltip content per segment — replaces the default (dot + label +\n   * `value · %`) inside the same card. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: (segment: CategoryBarTooltipContext) => React.ReactNode;\n  /** Format the numeric value (legend + tooltip). Defaults to `toLocaleString()`. */\n  valueFormatter?: (value: number) => string;\n  /** Render the tooltip for this segment index initially open (VR/testing). */\n  defaultOpenIndex?: number;\n  /**\n   * Accessible summary of the whole bar. Defaults to a `label value` list built\n   * from the data; pass a fuller sentence for screen readers if you have one.\n   */\n  'aria-label'?: string;\n}\n\n/**\n * One segment's hover card.\n *\n * It re-declares `data-chart` and re-renders `ChartStyle` because the popup is\n * portaled out of the bar: outside that subtree the `--color-*` bridge the\n * swatch reads has nothing to resolve against.\n */\nfunction CategoryBarSegmentTooltip({\n  chartId,\n  config,\n  color,\n  label,\n  percent,\n  segmentKey,\n  value,\n  valueFormatter,\n  renderContent,\n}: {\n  chartId: string;\n  config: ResolvedChartConfig;\n  color: string;\n  label: React.ReactNode;\n  percent: number;\n  segmentKey: string;\n  value: number;\n  valueFormatter: (value: number) => string;\n  // Not named `render`: in this package that name is reserved for Base UI's\n  // polymorphic composition prop (see `<TooltipTrigger render={…} />` below).\n  renderContent?: (segment: CategoryBarTooltipContext) => React.ReactNode;\n}) {\n  return (\n    <TooltipContent\n      data-chart={chartId}\n      className={cn(\n        'border border-border bg-background text-foreground shadow-md',\n        !renderContent && 'flex items-center gap-2'\n      )}\n    >\n      <ChartStyle id={chartId} config={config} />\n      {renderContent ? (\n        renderContent({ key: segmentKey, value, label, percent, color })\n      ) : (\n        <>\n          <span\n            className=\"size-2.5 shrink-0 rounded-full\"\n            style={{ backgroundColor: color }}\n          />\n          <span className=\"font-semibold\">{label}</span>\n          <span className=\"text-muted-foreground tabular-nums\">\n            {valueFormatter(value)} · {percent}%\n          </span>\n        </>\n      )}\n    </TooltipContent>\n  );\n}\n\nconst CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>(\n  (\n    {\n      className,\n      data,\n      config,\n      palette = CHART_DEFAULT_PALETTE,\n      size,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      valueFormatter = defaultFormat,\n      defaultOpenIndex,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n    // Resolved here rather than by a `ChartContainer`: this component paints\n    // plain divs, not a recharts plot, so it owns the `--color-*` emission for\n    // both the bar and its portaled per-segment tooltip.\n    const resolvedConfig = React.useMemo(\n      () => resolveChartColors(config, palette),\n      [config, palette]\n    );\n\n    const total = data.reduce((sum, seg) => sum + seg.value, 0);\n    const labelFor = (key: string): React.ReactNode =>\n      config[key]?.label ?? key;\n    // The aria-label has to be a plain string, so a rich (element) label can't\n    // be used there — fall back to the key rather than stringifying it into\n    // \"[object Object]\".\n    const labelTextFor = (key: string) => {\n      const label = config[key]?.label;\n      return typeof label === 'string' || typeof label === 'number'\n        ? String(label)\n        : key;\n    };\n    const colorOf = (key: string) => `var(--color-${toCssKey(key)})`;\n    const pctOf = (value: number) =>\n      total > 0 ? Math.round((value / total) * 100) : 0;\n\n    // A locale-neutral fallback: \"<label> <value>\" pairs. Consumers can pass a\n    // fuller `aria-label` sentence.\n    const summary =\n      ariaLabel ??\n      data\n        .map((seg) => `${labelTextFor(seg.key)} ${valueFormatter(seg.value)}`)\n        .join(', ');\n\n    return (\n      <div\n        ref={ref}\n        data-chart={chartId}\n        className={cn('flex w-full flex-col gap-3', className)}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={resolvedConfig} />\n        <div\n          className={categoryBarVariants({ size })}\n          role=\"img\"\n          aria-label={summary}\n        >\n          {data.map((seg, index) => {\n            const color = colorOf(seg.key);\n            // flex-grow proportional to value with a zero basis → widths are\n            // exactly value/total; a zero-value segment collapses.\n            const segment = (\n              <div\n                key={seg.key}\n                className=\"h-full min-w-0\"\n                style={{ flex: `${seg.value} 0 0%`, backgroundColor: color }}\n              />\n            );\n\n            if (!showTooltip) return segment;\n\n            return (\n              <Tooltip key={seg.key} defaultOpen={index === defaultOpenIndex}>\n                <TooltipTrigger render={segment} />\n                <CategoryBarSegmentTooltip\n                  chartId={chartId}\n                  config={resolvedConfig}\n                  color={color}\n                  label={labelFor(seg.key)}\n                  percent={pctOf(seg.value)}\n                  segmentKey={seg.key}\n                  value={seg.value}\n                  valueFormatter={valueFormatter}\n                  renderContent={tooltipContent}\n                />\n              </Tooltip>\n            );\n          })}\n        </div>\n\n        {showLegend && (\n          <ul className=\"flex flex-wrap justify-between gap-x-6 gap-y-3\">\n            {data.map((seg) => (\n              <li key={seg.key} className=\"flex flex-col gap-1.5\">\n                <span className=\"flex items-center gap-1.5 text-sm leading-none text-muted-foreground\">\n                  <span\n                    className=\"size-2.5 shrink-0 rounded-sm\"\n                    style={{ backgroundColor: colorOf(seg.key) }}\n                  />\n                  {labelFor(seg.key)}\n                </span>\n                <span className=\"flex items-baseline gap-1.5 leading-none tabular-nums\">\n                  <span className=\"text-base font-semibold text-foreground\">\n                    {valueFormatter(seg.value)}\n                  </span>\n                  <span className=\"text-sm text-muted-foreground\">\n                    {pctOf(seg.value)}%\n                  </span>\n                </span>\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n);\nCategoryBar.displayName = 'CategoryBar';\n\nexport { CategoryBar, categoryBarVariants };\n"],"mappings":"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"}