@acronis-platform/ui-react 5.0.0 → 5.1.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';\n\nimport { cn } from '@/lib/utils';\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  toLabelFormatter,\n  toReferenceLineList,\n  type ChartConfig,\n  type ChartPalette,\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// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Bar-chart variant set (B2): `orientation` (which way the\n// bars grow) and `layout` (grouped side-by-side vs stacked). The classes stay\n// empty because the recharts SVG — not CSS — draws the bars: the same two props\n// drive recharts' `layout` prop, the axis roles, the `stackId`, and the corner\n// radius below. CVA is kept so the variant set is a first-class, spec-conformant\n// part of the API (matched against ui-spec's api.yaml enums) and exposed via\n// `VariantProps`; the resolved values are also mirrored onto `data-orientation`\n// / `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 * for vertical bars (the category axis runs along X), the top edge otherwise.\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({\n  band,\n  vertical,\n}: {\n  band: {\n    x?: number;\n    y?: number;\n    width?: number;\n    height?: number;\n    fill?: string;\n    fillOpacity?: number;\n  };\n  vertical: boolean;\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={vertical ? x : x + width}\n        y2={vertical ? y + height : y}\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({\n  divider,\n  vertical,\n}: {\n  divider: boolean | undefined;\n  vertical: boolean;\n}) {\n  if (!divider) return undefined;\n  return (band: { x?: number; y?: number; width?: number; height?: number }) =>\n    renderBandWithDivider({ band, vertical });\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  horizontal,\n}: {\n  id: string;\n  dataKeys: string[];\n  shapes: ReadonlySet<BarChartBarShape>;\n  /** Bars grow along X, so a gradient runs left-to-right instead of top-down. */\n  horizontal: boolean;\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          {hasGradient && (\n            <linearGradient\n              id={`${id}-gradient-${key}`}\n              x1=\"0\"\n              y1=\"0\"\n              x2={horizontal ? '1' : '0'}\n              y2={horizontal ? '0' : '1'}\n            >\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\nexport interface BarChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof barChartVariants>,\n    CartesianChartProps,\n    ChartAnimationProps,\n    ChartBrushProps,\n    ChartDataLabelProps {\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 axis (Y for vertical\n   * bars, X for horizontal). Each is driven by a fixed `value` or a computed\n   * series `average`. Pass a single 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  /** Unit suffix on X-axis tick values (recharts `unit`) — applies when the X axis is numeric (`orientation=\"horizontal\"`). */\n  xUnit?: string;\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 growing\n   * end — `top` for vertical bars, `right` for horizontal.\n   */\n  labelPosition?: CartesianLabelPosition;\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      dataKeys,\n      xKey,\n      referenceLine,\n      referenceArea,\n      barSettings,\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\n      orientation = 'vertical',\n      layout = 'grouped',\n      barRadius = 4,\n      barShape = 'rounded',\n      barSize,\n      maxBarSize,\n      barGap,\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,\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    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Our `orientation` is bar-direction; recharts' `layout` is the opposite axis.\n    const rechartsLayout = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n    const isStacked = layout === 'stacked';\n    // Labels sit at the growing end of the bar: above vertical bars, to the\n    // right of horizontal ones — or centred in the segment when stacked.\n    const barLabelPosition = resolveCartesianLabelPosition({\n      labelPosition,\n      isStacked,\n      growingEnd: orientation === 'horizontal' ? 'right' : '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 formatter =\n            orientation === 'horizontal' ? yTickFormatter : xTickFormatter;\n          const value = formatter\n            ? formatter(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-${React.useId().replace(/:/g, '')}`;\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: top for vertical bars, right for horizontal.\n    const endRadius: [number, number, number, number] =\n      orientation === 'horizontal'\n        ? [0, barRadius, barRadius, 0]\n        : [barRadius, barRadius, 0, 0];\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    // `orientation` decides which axis is numeric, and with it which axis the\n    // value props (unit/tickCount/domain) and the category props (dataKey/tick)\n    // belong to — recharts ignores each set on the other axis. Both branches\n    // stay spelled out because what differs is the prop *set*, not a couple of\n    // values: folding them into one shared props object would trade a readable\n    // fork for a merge whose per-axis prop list has to be re-derived by eye.\n    const renderAxes = () =>\n      orientation === 'horizontal' ? (\n        <>\n          {/* Horizontal bars put the values on X, so the value-axis props\n              (tickCount/domain) belong here — recharts ignores both on the\n              category axis. */}\n          <XAxis\n            type=\"number\"\n            hide={!showXAxis}\n            tickLine={false}\n            axisLine={false}\n            unit={xUnit}\n            tickFormatter={xTickFormatter}\n            angle={xAxisAngle}\n            interval={xAxisInterval}\n            textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n            tickCount={yAxisTickCount}\n            domain={yDomain}\n            height={xAxisHeight}\n            label={xAxisTitle}\n          />\n          <YAxis\n            dataKey={xKey}\n            type=\"category\"\n            hide={!showYAxis}\n            tickLine={false}\n            axisLine={false}\n            tick={categoryTick}\n            tickFormatter={yTickFormatter}\n            width={yAxisLabel ? 96 : 80}\n            label={yAxisTitle}\n          />\n        </>\n      ) : (\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        // Bands run along the category axis: X for vertical bars, Y for\n        // horizontal ones.\n        const bounds =\n          orientation === 'horizontal'\n            ? { y1: data[start]?.[xKey], y2: data[end]?.[xKey] }\n            : { x1: data[start]?.[xKey], x2: data[end]?.[xKey] };\n        return (\n          <ReferenceArea\n            key={`${area.label ?? 'area'}-${index}`}\n            {...bounds}\n            fill=\"var(--ui-background-surface-secondary)\"\n            fillOpacity={0.6}\n            ifOverflow=\"extendDomain\"\n            shape={resolveBandShape({\n              divider: area.divider,\n              vertical: orientation !== 'horizontal',\n            })}\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            // Draw on the value axis: Y for vertical bars, X for horizontal.\n            {...(orientation === 'horizontal' ? { x: value } : { y: value })}\n            // By default the caption sits at the top of the line: above the\n            // right end of a horizontal line (vertical bars), or above the\n            // top of a vertical line (horizontal bars).\n            {...resolveReferenceLineProps(\n              ref.label,\n              ref.labelPosition ??\n                (orientation === 'horizontal' ? 'top' : '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\n              id={defsId}\n              dataKeys={dataKeys}\n              shapes={usedShapes}\n              horizontal={orientation === 'horizontal'}\n            />\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? orientation === 'vertical'}\n                vertical={gridVertical ?? orientation === 'horizontal'}\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\n                // whichever axis holds the categories — Y for horizontal bars.\n                tickFormatter={\n                  orientation === 'horizontal' ? yTickFormatter : xTickFormatter\n                }\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  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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"}

package/dist/components/ui/card-widget-carousel/card-widget-carousel.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { ChevronLeftIcon as i, ChevronRightIcon as a } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/card-widget-carousel/card-widget-carousel.tsx
+var o = 304, s = t.forwardRef(({ className: s, children: c, nextLabel: l = "Next", prevLabel: u = "Previous", ...d }, f) => {
+	let p = t.useRef(null), [m, h] = t.useState(!1), [g, _] = t.useState(!0), v = t.useCallback(() => {
+		let e = p.current;
+		if (!e) return;
+		let { scrollLeft: t, scrollWidth: n, clientWidth: r } = e;
+		if (n === 0) return;
+		let i = Math.abs(t);
+		h(i > 1), _(i + r < n - 1);
+	}, []);
+	t.useEffect(() => {
+		let e = p.current;
+		if (!e) return;
+		v(), e.addEventListener("scroll", v, { passive: !0 });
+		let t = new ResizeObserver(v);
+		t.observe(e);
+		let n = new MutationObserver(v);
+		return n.observe(e, { childList: !0 }), () => {
+			e.removeEventListener("scroll", v), t.disconnect(), n.disconnect();
+		};
+	}, [v]);
+	let y = (e) => {
+		let t = p.current;
+		if (!t) return;
+		let n = getComputedStyle(t).direction === "rtl", r = e === "next" ? 1 : -1;
+		t.scrollBy({
+			left: (n ? -r : r) * o,
+			behavior: "smooth"
+		});
+	}, b = "pointer-events-auto flex size-12 shrink-0 items-center justify-center rounded-full border border-[var(--ui-border-on-surface-border)] bg-[var(--ui-background-surface-primary)] shadow-[var(--ui-shadow-md)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]";
+	return /* @__PURE__ */ r("div", {
+		ref: f,
+		className: e("relative overflow-hidden", s),
+		...d,
+		children: [
+			/* @__PURE__ */ n("div", {
+				ref: p,
+				className: "flex gap-4 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+				children: c
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "pointer-events-none absolute inset-y-0 start-0 flex w-[180px] items-center justify-start ps-4",
+				children: /* @__PURE__ */ n("button", {
+					type: "button",
+					"aria-label": u,
+					"aria-disabled": !m || void 0,
+					onClick: () => {
+						m && y("prev");
+					},
+					className: e(b, !m && "pointer-events-none opacity-0"),
+					children: /* @__PURE__ */ n(i, {
+						size: 16,
+						className: "rtl:rotate-180"
+					})
+				})
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "pointer-events-none absolute inset-y-0 end-0 flex w-[180px] items-center justify-end pe-4",
+				children: /* @__PURE__ */ n("button", {
+					type: "button",
+					"aria-label": l,
+					"aria-disabled": !g || void 0,
+					onClick: () => {
+						g && y("next");
+					},
+					className: e(b, !g && "pointer-events-none opacity-0"),
+					children: /* @__PURE__ */ n(a, {
+						size: 16,
+						className: "rtl:rotate-180"
+					})
+				})
+			})
+		]
+	});
+});
+s.displayName = "CardWidgetCarousel";
+//#endregion
+export { s as CardWidgetCarousel };
+
+//# sourceMappingURL=card-widget-carousel.js.map

package/dist/components/ui/card-widget-carousel/card-widget-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-widget-carousel.js","names":[],"sources":["../../../../src/components/ui/card-widget-carousel/card-widget-carousel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// One card (288px) + one gap (16px) = one scroll step.\nconst SCROLL_STEP = 304;\n\nexport interface CardWidgetCarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Accessible label for the Next chevron button. Defaults to `'Next'`. */\n  nextLabel?: string;\n  /** Accessible label for the Previous chevron button. Defaults to `'Previous'`. */\n  prevLabel?: string;\n}\n\nconst CardWidgetCarousel = React.forwardRef<HTMLDivElement, CardWidgetCarouselProps>(\n  ({ className, children, nextLabel = 'Next', prevLabel = 'Previous', ...props }, ref) => {\n    const trackRef = React.useRef<HTMLDivElement>(null);\n    // Initialise next=true so the button shows on first paint for overflowing tracks.\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n    const [canScrollNext, setCanScrollNext] = React.useState(true);\n\n    const updateScrollState = React.useCallback(() => {\n      const track = trackRef.current;\n      if (!track) return;\n      const { scrollLeft, scrollWidth, clientWidth } = track;\n      // Skip when layout hasn't happened yet (scrollWidth = 0 in test environments).\n      if (scrollWidth === 0) return;\n      // Math.abs handles both LTR (positive scrollLeft) and RTL (negative in Chrome).\n      const absScroll = Math.abs(scrollLeft);\n      setCanScrollPrev(absScroll > 1);\n      setCanScrollNext(absScroll + clientWidth < scrollWidth - 1);\n    }, []);\n\n    React.useEffect(() => {\n      const track = trackRef.current;\n      if (!track) return;\n      updateScrollState();\n      track.addEventListener('scroll', updateScrollState, { passive: true });\n      const ro = new ResizeObserver(updateScrollState);\n      ro.observe(track);\n      // Re-check when children are added/removed (e.g. async data load).\n      const mo = new MutationObserver(updateScrollState);\n      mo.observe(track, { childList: true });\n      return () => {\n        track.removeEventListener('scroll', updateScrollState);\n        ro.disconnect();\n        mo.disconnect();\n      };\n    }, [updateScrollState]);\n\n    const scroll = (direction: 'prev' | 'next') => {\n      const track = trackRef.current;\n      if (!track) return;\n      const isRtl = getComputedStyle(track).direction === 'rtl';\n      const forward = direction === 'next' ? 1 : -1;\n      track.scrollBy({ left: (isRtl ? -forward : forward) * SCROLL_STEP, behavior: 'smooth' });\n    };\n\n    const navBtn =\n      'pointer-events-auto flex size-12 shrink-0 items-center justify-center rounded-full border border-[var(--ui-border-on-surface-border)] bg-[var(--ui-background-surface-primary)] shadow-[var(--ui-shadow-md)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]';\n\n    return (\n      <div ref={ref} className={cn('relative overflow-hidden', className)} {...props}>\n        <div\n          ref={trackRef}\n          className=\"flex gap-4 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n        >\n          {children}\n        </div>\n\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex w-[180px] items-center justify-start ps-4\">\n          <button\n            type=\"button\"\n            aria-label={prevLabel}\n            aria-disabled={!canScrollPrev || undefined}\n            onClick={() => { if (canScrollPrev) scroll('prev'); }}\n            className={cn(navBtn, !canScrollPrev && 'pointer-events-none opacity-0')}\n          >\n            <ChevronLeftIcon size={16} className=\"rtl:rotate-180\" />\n          </button>\n        </div>\n\n        <div className=\"pointer-events-none absolute inset-y-0 end-0 flex w-[180px] items-center justify-end pe-4\">\n          <button\n            type=\"button\"\n            aria-label={nextLabel}\n            aria-disabled={!canScrollNext || undefined}\n            onClick={() => { if (canScrollNext) scroll('next'); }}\n            className={cn(navBtn, !canScrollNext && 'pointer-events-none opacity-0')}\n          >\n            <ChevronRightIcon size={16} className=\"rtl:rotate-180\" />\n          </button>\n        </div>\n      </div>\n    );\n  }\n);\nCardWidgetCarousel.displayName = 'CardWidgetCarousel';\n\nexport { CardWidgetCarousel };\n"],"mappings":";;;;;;AAYA,IAAM,IAAc,KASd,IAAqB,EAAM,YAC9B,EAAE,cAAW,aAAU,eAAY,QAAQ,eAAY,YAAY,GAAG,KAAS,MAAQ;CACtF,IAAM,IAAW,EAAM,OAAuB,IAAI,GAE5C,CAAC,GAAe,KAAoB,EAAM,SAAS,EAAK,GACxD,CAAC,GAAe,KAAoB,EAAM,SAAS,EAAI,GAEvD,IAAoB,EAAM,kBAAkB;EAChD,IAAM,IAAQ,EAAS;EACvB,IAAI,CAAC,GAAO;EACZ,IAAM,EAAE,eAAY,gBAAa,mBAAgB;EAEjD,IAAI,MAAgB,GAAG;EAEvB,IAAM,IAAY,KAAK,IAAI,CAAU;EAErC,AADA,EAAiB,IAAY,CAAC,GAC9B,EAAiB,IAAY,IAAc,IAAc,CAAC;CAC5D,GAAG,CAAC,CAAC;CAEL,EAAM,gBAAgB;EACpB,IAAM,IAAQ,EAAS;EACvB,IAAI,CAAC,GAAO;EAEZ,AADA,EAAkB,GAClB,EAAM,iBAAiB,UAAU,GAAmB,EAAE,SAAS,GAAK,CAAC;EACrE,IAAM,IAAK,IAAI,eAAe,CAAiB;EAC/C,EAAG,QAAQ,CAAK;EAEhB,IAAM,IAAK,IAAI,iBAAiB,CAAiB;EAEjD,OADA,EAAG,QAAQ,GAAO,EAAE,WAAW,GAAK,CAAC,SACxB;GAGX,AAFA,EAAM,oBAAoB,UAAU,CAAiB,GACrD,EAAG,WAAW,GACd,EAAG,WAAW;EAChB;CACF,GAAG,CAAC,CAAiB,CAAC;CAEtB,IAAM,KAAU,MAA+B;EAC7C,IAAM,IAAQ,EAAS;EACvB,IAAI,CAAC,GAAO;EACZ,IAAM,IAAQ,iBAAiB,CAAK,CAAC,CAAC,cAAc,OAC9C,IAAU,MAAc,SAAS,IAAI;EAC3C,EAAM,SAAS;GAAE,OAAO,IAAQ,CAAC,IAAU,KAAW;GAAa,UAAU;EAAS,CAAC;CACzF,GAEM,IACJ;CAEF,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,4BAA4B,CAAS;EAAG,GAAI;EAAzE,UAAA;GACE,kBAAC,OAAD;IACE,KAAK;IACL,WAAU;IAET;GACE,CAAA;GAEL,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,UAAD;KACE,MAAK;KACL,cAAY;KACZ,iBAAe,CAAC,KAAiB,KAAA;KACjC,eAAe;MAAE,AAAI,KAAe,EAAO,MAAM;KAAG;KACpD,WAAW,EAAG,GAAQ,CAAC,KAAiB,+BAA+B;KAEvE,UAAA,kBAAC,GAAD;MAAiB,MAAM;MAAI,WAAU;KAAkB,CAAA;IACjD,CAAA;GACL,CAAA;GAEL,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,UAAD;KACE,MAAK;KACL,cAAY;KACZ,iBAAe,CAAC,KAAiB,KAAA;KACjC,eAAe;MAAE,AAAI,KAAe,EAAO,MAAM;KAAG;KACpD,WAAW,EAAG,GAAQ,CAAC,KAAiB,+BAA+B;KAEvE,UAAA,kBAAC,GAAD;MAAkB,MAAM;MAAI,WAAU;KAAkB,CAAA;IAClD,CAAA;GACL,CAAA;EACF;;AAET,CACF;AACA,EAAmB,cAAc"}

package/dist/components/ui/card-widget-carousel/card-widget.js

@@ -0,0 +1,82 @@
+import { cn as e } from "../../../lib/utils.js";
+import { Card as t, CardContent as n, CardFooter as r, CardHeader as i } from "../card/card.js";
+import * as a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/ui/card-widget-carousel/card-widget.tsx
+var l = {
+	danger: "var(--ui-background-status-danger)",
+	warning: "var(--ui-background-status-warning)",
+	info: "var(--ui-background-status-info)"
+}, u = {
+	danger: "var(--ui-glyph-on-status-danger)",
+	warning: "var(--ui-glyph-on-status-warning)",
+	info: "var(--ui-glyph-on-status-info)"
+}, d = a.forwardRef(({ className: a, status: d = "info", icon: f, header: p, title: m, description: h, metric: g, caption: _, skeleton: v = !1, loadingLabel: y = "Loading", footer: b, ...x }, S) => {
+	let C = l[d], w = u[d];
+	return /* @__PURE__ */ c(t, {
+		ref: S,
+		className: e("flex w-72 shrink-0 flex-col", a),
+		...x,
+		children: [
+			p !== void 0 && /* @__PURE__ */ s(i, {
+				title: p,
+				className: "min-h-12 border-b-0 py-2"
+			}),
+			/* @__PURE__ */ c(n, {
+				className: "gap-2 pt-4",
+				children: [/* @__PURE__ */ s("div", {
+					className: "flex size-9 shrink-0 items-center justify-center rounded-lg",
+					style: {
+						background: C,
+						color: w
+					},
+					children: !v && f
+				}), v ? /* @__PURE__ */ s("div", {
+					role: "status",
+					"aria-label": y,
+					className: "flex flex-col gap-4 pt-1",
+					children: [
+						100,
+						80,
+						59,
+						29
+					].map((e) => /* @__PURE__ */ s("div", {
+						className: "h-[14px] animate-pulse rounded-lg",
+						style: {
+							width: `${e}%`,
+							background: C
+						}
+					}, e))
+				}) : /* @__PURE__ */ c(o, { children: [
+					m !== void 0 && /* @__PURE__ */ s("p", {
+						className: "truncate text-sm font-semibold leading-6 text-[var(--ui-text-on-surface-primary)]",
+						children: m
+					}),
+					h !== void 0 && /* @__PURE__ */ s("p", {
+						className: "text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]",
+						children: h
+					}),
+					(g !== void 0 || _ !== void 0) && /* @__PURE__ */ c("div", {
+						className: "flex items-baseline gap-1",
+						children: [g !== void 0 && /* @__PURE__ */ s("span", {
+							className: "text-2xl font-semibold leading-8 text-[var(--ui-text-on-surface-primary)]",
+							children: g
+						}), _ !== void 0 && /* @__PURE__ */ s("span", {
+							className: "text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]",
+							children: _
+						})]
+					})
+				] })]
+			}),
+			b !== void 0 && /* @__PURE__ */ s(r, {
+				className: "mt-auto",
+				children: b
+			})
+		]
+	});
+});
+d.displayName = "CardWidget";
+//#endregion
+export { d as CardWidget };
+
+//# sourceMappingURL=card-widget.js.map

package/dist/components/ui/card-widget-carousel/card-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-widget.js","names":[],"sources":["../../../../src/components/ui/card-widget-carousel/card-widget.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';\n\nconst statusBgToken = {\n  danger: 'var(--ui-background-status-danger)',\n  warning: 'var(--ui-background-status-warning)',\n  info: 'var(--ui-background-status-info)',\n} as const;\n\nconst statusGlyphToken = {\n  danger: 'var(--ui-glyph-on-status-danger)',\n  warning: 'var(--ui-glyph-on-status-warning)',\n  info: 'var(--ui-glyph-on-status-info)',\n} as const;\n\nexport type CardWidgetStatus = keyof typeof statusBgToken;\n\nexport interface CardWidgetProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Semantic status — drives the icon-box background and icon glyph color. */\n  status?: CardWidgetStatus;\n  /** The 16 px icon placed inside the status-colored icon box. */\n  icon?: React.ReactNode;\n  /** Card header title (the widget/category name, e.g. \"Phishing attacks\"). */\n  header?: string;\n  /** Insight title in the body (14 px, semibold). Hidden while `skeleton` is true. */\n  title?: string;\n  /** Supporting description (12 px). Hidden while `skeleton` is true. */\n  description?: string;\n  /**\n   * Primary value / metric (24 px, semibold). Accepts a string or any node.\n   * Hidden while `skeleton` is true.\n   */\n  metric?: React.ReactNode;\n  /** Small caption beside the metric (12 px). Hidden while `skeleton` is true. */\n  caption?: string;\n  /**\n   * When true the body shows animated placeholder lines instead of\n   * `title` / `description` / `metric` / `caption`.\n   */\n  skeleton?: boolean;\n  /**\n   * Accessible label for the skeleton loading indicator (`aria-label`).\n   * Defaults to `'Loading'`. Localize when deploying in a non-English context.\n   */\n  loadingLabel?: string;\n  /**\n   * Content rendered in the card footer (action buttons). Omit the prop to\n   * hide the footer entirely.\n   */\n  footer?: React.ReactNode;\n}\n\nconst CardWidget = React.forwardRef<HTMLDivElement, CardWidgetProps>(\n  (\n    {\n      className,\n      status = 'info',\n      icon,\n      header,\n      title,\n      description,\n      metric,\n      caption,\n      skeleton = false,\n      loadingLabel = 'Loading',\n      footer,\n      ...props\n    },\n    ref\n  ) => {\n    const bg = statusBgToken[status];\n    const glyph = statusGlyphToken[status];\n\n    return (\n      <Card\n        ref={ref}\n        className={cn('flex w-72 shrink-0 flex-col', className)}\n        {...props}\n      >\n        {header !== undefined && (\n          <CardHeader title={header} className=\"min-h-12 border-b-0 py-2\" />\n        )}\n\n        <CardContent className=\"gap-2 pt-4\">\n          <div\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-lg\"\n            style={{ background: bg, color: glyph }}\n          >\n            {!skeleton && icon}\n          </div>\n\n          {skeleton ? (\n            <div role=\"status\" aria-label={loadingLabel} className=\"flex flex-col gap-4 pt-1\">\n              {[100, 80, 59, 29].map((pct) => (\n                <div\n                  key={pct}\n                  className=\"h-[14px] animate-pulse rounded-lg\"\n                  style={{ width: `${pct}%`, background: bg }}\n                />\n              ))}\n            </div>\n          ) : (\n            <>\n              {title !== undefined && (\n                <p className=\"truncate text-sm font-semibold leading-6 text-[var(--ui-text-on-surface-primary)]\">\n                  {title}\n                </p>\n              )}\n              {description !== undefined && (\n                <p className=\"text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]\">\n                  {description}\n                </p>\n              )}\n              {(metric !== undefined || caption !== undefined) && (\n                <div className=\"flex items-baseline gap-1\">\n                  {metric !== undefined && (\n                    <span className=\"text-2xl font-semibold leading-8 text-[var(--ui-text-on-surface-primary)]\">\n                      {metric}\n                    </span>\n                  )}\n                  {caption !== undefined && (\n                    <span className=\"text-xs leading-4 text-[var(--ui-text-on-surface-secondary)]\">\n                      {caption}\n                    </span>\n                  )}\n                </div>\n              )}\n            </>\n          )}\n        </CardContent>\n\n        {footer !== undefined && (\n          <CardFooter className=\"mt-auto\">{footer}</CardFooter>\n        )}\n      </Card>\n    );\n  }\n);\nCardWidget.displayName = 'CardWidget';\n\nexport { CardWidget };\n"],"mappings":";;;;;AAKA,IAAM,IAAgB;CACpB,QAAQ;CACR,SAAS;CACT,MAAM;AACR,GAEM,IAAmB;CACvB,QAAQ;CACR,SAAS;CACT,MAAM;AACR,GAuCM,IAAa,EAAM,YAErB,EACE,cACA,YAAS,QACT,SACA,WACA,UACA,gBACA,WACA,YACA,cAAW,IACX,kBAAe,WACf,WACA,GAAG,KAEL,MACG;CACH,IAAM,IAAK,EAAc,IACnB,IAAQ,EAAiB;CAE/B,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EAAG,+BAA+B,CAAS;EACtD,GAAI;EAHN,UAAA;GAKG,MAAW,KAAA,KACV,kBAAC,GAAD;IAAY,OAAO;IAAQ,WAAU;GAA4B,CAAA;GAGnE,kBAAC,GAAD;IAAa,WAAU;IAAvB,UAAA,CACE,kBAAC,OAAD;KACE,WAAU;KACV,OAAO;MAAE,YAAY;MAAI,OAAO;KAAM;KAErC,UAAA,CAAC,KAAY;IACX,CAAA,GAEJ,IACC,kBAAC,OAAD;KAAK,MAAK;KAAS,cAAY;KAAc,WAAU;KACpD,UAAA;MAAC;MAAK;MAAI;MAAI;KAAE,CAAC,CAAC,KAAK,MACtB,kBAAC,OAAD;MAEE,WAAU;MACV,OAAO;OAAE,OAAO,GAAG,EAAI;OAAI,YAAY;MAAG;KAC3C,GAHM,CAGN,CACF;IACE,CAAA,IAEL,kBAAA,GAAA,EAAA,UAAA;KACG,MAAU,KAAA,KACT,kBAAC,KAAD;MAAG,WAAU;MACV,UAAA;KACA,CAAA;KAEJ,MAAgB,KAAA,KACf,kBAAC,KAAD;MAAG,WAAU;MACV,UAAA;KACA,CAAA;MAEH,MAAW,KAAA,KAAa,MAAY,KAAA,MACpC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACG,MAAW,KAAA,KACV,kBAAC,QAAD;OAAM,WAAU;OACb,UAAA;MACG,CAAA,GAEP,MAAY,KAAA,KACX,kBAAC,QAAD;OAAM,WAAU;OACb,UAAA;MACG,CAAA,CAEL;;IAEP,EAAA,CAAA,CAEO;;GAEZ,MAAW,KAAA,KACV,kBAAC,GAAD;IAAY,WAAU;IAAW,UAAA;GAAmB,CAAA;EAElD;;AAEV,CACF;AACA,EAAW,cAAc"}

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 `Meter`\n// (one value per row, stacked into 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  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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"}