@acronis-platform/ui-react 5.5.1 → 5.5.3

package/dist/components/ui/treemap/treemap.js

@@ -52,13 +52,13 @@ function x({ x: t = 0, y: n = 0, width: r = 0, height: i = 0, name: a, primaryLa
 		})
 	})] });
 }
-var S = l.forwardRef(({ className: m, config: h, palette: g = p, data: _, dataKey: v, nameKey: b, aspectRatio: S = 4 / 3, showLabels: C = !0, labelAlign: w = "center", secondaryKeys: T, secondaryFormatter: E, secondarySeparator: D = " · ", showTooltip: O = !0, showLegend: k = !1, legendPos: A = "bottom", legendFontSize: j, tooltipContent: M, animate: N, animationDuration: P, animationBegin: F, animationEasing: I, ...L }, R) => {
-	let z = c({
-		animate: N,
-		animationDuration: P,
-		animationBegin: F,
-		animationEasing: I
-	}), B = l.useMemo(() => {
+var S = l.forwardRef(({ className: m, config: h, palette: g = p, data: _, dataKey: v, nameKey: b, aspectRatio: S = 4 / 3, showLabels: C = !0, labelAlign: w = "center", secondaryKeys: T, secondaryFormatter: E, secondarySeparator: D = " · ", showTooltip: O = !0, showLegend: k = !1, legendPos: A = "bottom", legendFontSize: j, legendAriaLabel: M, tooltipContent: N, animate: P, animationDuration: F, animationBegin: I, animationEasing: L, ...R }, z) => {
+	let B = c({
+		animate: P,
+		animationDuration: F,
+		animationBegin: I,
+		animationEasing: L
+	}), V = l.useMemo(() => {
 		let e = o(h, g);
 		return _.map((t) => {
 			let n = String(t[b]), r = T?.length ? y({
@@ -83,9 +83,9 @@ var S = l.forwardRef(({ className: m, config: h, palette: g = p, data: _, dataKe
 		E,
 		T,
 		D
-	]), V = l.useMemo(() => {
+	]), H = l.useMemo(() => {
 		let e = /* @__PURE__ */ new Set();
-		return B.flatMap((t) => {
+		return V.flatMap((t) => {
 			let n = String(t[b]);
 			return e.has(n) ? [] : (e.add(n), [{
 				value: n,
@@ -95,46 +95,47 @@ var S = l.forwardRef(({ className: m, config: h, palette: g = p, data: _, dataKe
 				payload: t
 			}]);
 		});
-	}, [b, B]), H = `chart-${l.useId().replace(/:/g, "")}`, U = k ? /* @__PURE__ */ d("div", {
-		"data-chart": H,
+	}, [b, V]), U = `chart-${l.useId().replace(/:/g, "")}`, W = k ? /* @__PURE__ */ d("div", {
+		"data-chart": U,
 		children: [/* @__PURE__ */ u(r, {
-			id: H,
+			id: U,
 			config: o(h, g)
 		}), /* @__PURE__ */ u(n, {
 			config: h,
-			payload: V,
+			payload: H,
 			verticalAlign: A,
 			nameKey: b,
-			fontSize: j
+			fontSize: j,
+			ariaLabel: M
 		})]
 	}) : null;
 	return /* @__PURE__ */ d("div", {
-		ref: R,
+		ref: z,
 		className: e(k && "flex flex-col", m),
-		...L,
+		...R,
 		children: [
-			A === "top" && U,
+			A === "top" && W,
 			/* @__PURE__ */ u(t, {
 				config: h,
 				palette: g,
 				className: k ? "min-h-0 w-full flex-1" : "size-full",
 				children: /* @__PURE__ */ u(f, {
-					data: B,
+					data: V,
 					dataKey: v,
 					nameKey: b,
 					aspectRatio: S,
-					...z,
+					...B,
 					content: /* @__PURE__ */ u(x, {
 						showLabels: C,
 						labelAlign: w
 					}),
-					children: O && /* @__PURE__ */ u(i, { content: M ?? /* @__PURE__ */ u(a, {
+					children: O && /* @__PURE__ */ u(i, { content: N ?? /* @__PURE__ */ u(a, {
 						nameKey: b,
 						hideLabel: !0
 					}) })
 				})
 			}),
-			A === "bottom" && U
+			A === "bottom" && W
 		]
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"treemap.js","names":[],"sources":["../../../../src/components/ui/treemap/treemap.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Treemap as RechartsTreemap } from 'recharts';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegendContent,\n  ChartStyle,\n  resolveChartColors,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  toCssKey,\n  type ChartConfig,\n  type ChartLegendFontSize,\n  type ChartPalette,\n  type ChartAnimationProps,\n  type TickFormatter,\n} from '../chart';\n\n// Treemap-specific default: the diverging palette shows the two-sided distribution\n// that a treemap is most commonly used for, and its adaptive text (auto-computed\n// from resolved token names below) works correctly out of the box.\nconst TREEMAP_DEFAULT_PALETTE: ChartPalette = { type: 'diverging', pair: 'blue-orange' };\n\n// A typed recharts composition over the shared `Chart` primitives. A treemap is\n// the odd one out: a single `Treemap` element with no axes/grid, themed through a\n// custom `content` cell renderer (recharts' default paints every cell the same\n// fill and has no token hooks) — and that renderer, not a `LabelList`, owns the\n// on-cell labels, so the fit/clamp logic lives here. Like Scatter/Composed/\n// RadialBar there's no CVA variant — a treemap's knobs are geometry\n// (`aspectRatio`) and the data, not a visual \"mode\". v1 is a flat treemap (a list\n// of leaves).\n\n/**\n * Where a cell's label block sits inside its rectangle. Named logically, not\n * physically: the corner variants anchor to the tile's *start* edge, so they\n * mirror under `dir=\"rtl\"`. `bottom-start` is the design's placement; `center`\n * is what the chart drew before the block had a second line.\n */\nexport type TreemapLabelAlign = 'bottom-start' | 'top-start' | 'center';\n\n// Cell shape: each tile is inset by the gap on every side, so neighbouring tiles\n// are separated by the surface showing through rather than by a stroke, and the\n// corners are rounded.\nconst CELL_GAP = 2;\nconst CELL_RADIUS = 0;\n\n// Label geometry, in px. The block's own layout is CSS (see the renderer); these\n// are the heights the tile has to clear for a label to fit *without being\n// clipped* — one line, or two.\n//\n// Line boxes, not font sizes: Tailwind's `--text-sm--line-height` is 4/3, so the\n// `text-sm` title renders a ~19px line box, and the second line inherits that same\n// ratio (an arbitrary `text-[11px]` sets font-size only) for ~14.7px. Measuring by\n// font size instead would let a tile pass the threshold and still have the block's\n// `overflow-hidden` eat the top of the first line.\nconst CELL_PADDING = 12;\nconst LINE_HEIGHT_RATIO = 4 / 3;\nconst TITLE_FONT_SIZE = 14; // text-sm\nconst SECONDARY_FONT_SIZE = 11;\nconst TITLE_LINE_HEIGHT = Math.ceil(TITLE_FONT_SIZE * LINE_HEIGHT_RATIO);\nconst SECONDARY_LINE_HEIGHT = Math.ceil(\n  SECONDARY_FONT_SIZE * LINE_HEIGHT_RATIO\n);\n\n// The smallest tile that gets a label at all, and the height a second line\n// additionally needs. Below the first threshold a cell stays blank rather than\n// showing a stub — the label would be wider than the tile it names.\nconst MIN_LABEL_WIDTH = 64;\nconst MIN_LABEL_HEIGHT = CELL_PADDING * 2 + TITLE_LINE_HEIGHT;\nconst MIN_TWO_LINE_HEIGHT = MIN_LABEL_HEIGHT + SECONDARY_LINE_HEIGHT;\n\n/**\n * Compose a cell's second line out of the caller's `secondaryKeys`. Empty and\n * missing fields are skipped rather than printed as a gap, so one row without\n * the field doesn't leave a dangling separator.\n */\nexport function treemapSecondaryLabel(options: {\n  row: Record<string, string | number>;\n  keys: readonly string[];\n  separator: string;\n  formatter?: TickFormatter;\n}): string | undefined {\n  const { row, keys, separator, formatter } = options;\n  const parts = keys.flatMap((key, index) => {\n    const value = row[key];\n    if (value == null || value === '') return [];\n    // Emptiness is re-checked *after* formatting, not just on the raw value: a\n    // formatter that blanks a field it doesn't want to show (a zero, a sentinel)\n    // would otherwise contribute an empty part and put back the dangling\n    // separator this function exists to avoid.\n    const part = formatter ? formatter(value, index) : String(value);\n    return part === '' ? [] : [part];\n  });\n  return parts.length ? parts.join(separator) : undefined;\n}\n\ninterface TreemapCellProps {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  // recharts injects the node's resolved `name` (from nameKey) + value, plus\n  // every other field on the row — which is how the two stamped labels arrive.\n  name?: string;\n  /** The leaf's display name — its `config` label, stamped onto the row by `Treemap`. */\n  primaryLabel?: string;\n  /** The label's precomputed second line, stamped onto each row by `Treemap`. */\n  secondaryLabel?: string;\n  showLabels?: boolean;\n  labelAlign?: TreemapLabelAlign;\n  /**\n   * How the leaf's fill relates to text contrast. Stamped by `Treemap` onto each\n   * row before recharts hands it to the cell renderer. Auto-computed from the\n   * resolved token name suffix:\n   *\n   * - `'dark'` — saturated/dark in both themes → always white text.\n   * - `'pale'` — pale in both themes → always dark text (via theme-adaptive token).\n   * - `'inverts'` — dark in light, pale in dark (sequential stops 7–8 whose\n   *   `light-dark()` values mirror across themes) → white text in light, dark text\n   *   in dark, achieved by a `light-dark()` color value in CSS.\n   */\n  fillTone?: 'dark' | 'pale' | 'inverts';\n}\n\n// How the label block sits in its tile. `text-start`/`text-center` and the\n// block-axis `justify-*` are what make the corner-anchored variants mirror under\n// `dir=\"rtl\"` — the same logical utilities every other component uses, which is\n// why the label is HTML in a `foreignObject` rather than SVG `<text>`:\n// `x`/`text-anchor` are physical, so a mirrored label would need the direction\n// read in JS and applied by hand.\n//\n// Every variant leaves the cross axis on the default `items-stretch`, including\n// `center`. Centering the line is `text-center`'s job, not `items-center`'s:\n// `items-center` would size each line to its own text instead of to the tile, and\n// a `truncate` line only ellipsizes when it is the *tile* that constrains it — a\n// shrink-to-fit line is never narrower than its text, so it would silently\n// overflow and be hard-clipped on both edges instead.\nconst LABEL_ALIGN_CLASS: Record<TreemapLabelAlign, string> = {\n  'bottom-start': 'justify-end text-start',\n  'top-start': 'justify-start text-start',\n  center: 'justify-center text-center',\n};\n\n// Cell renderer: fill each rounded rect from its `--color-<name>` var, inset it so\n// the surface shows through between tiles, and lay the label block over it — the\n// leaf's name, plus the stamped second line when the tile is tall enough. Passed to\n// `Treemap.content`; recharts clones it with each node's geometry + row fields.\nexport function TreemapCell({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  primaryLabel,\n  secondaryLabel,\n  showLabels = true,\n  labelAlign = 'center',\n  fillTone = 'dark',\n}: TreemapCellProps) {\n  // recharts invokes `content` for the synthetic root node too (full chart\n  // dimensions, empty name). Skip any name-less node — otherwise its rect has no\n  // `--color-<name>` fill and paints the SVG-default black behind everything\n  // (invisible when leaves cover it, a black box on empty data).\n  if (!name) return <g />;\n  // The tile, not the node: the label sits inside the inset rect, so the gutter\n  // never eats into its padding.\n  const tileX = x + CELL_GAP;\n  const tileY = y + CELL_GAP;\n  const tileWidth = Math.max(0, width - CELL_GAP * 2);\n  const tileHeight = Math.max(0, height - CELL_GAP * 2);\n\n  // `>=` on the heights: they are exact fits (padding + line boxes), so a tile\n  // that measures one of them exactly has room for that label. The width is a\n  // judgement call about how narrow a label is still worth reading, not a fit, so\n  // it stays a strict `>`.\n  const canLabel =\n    showLabels && tileWidth > MIN_LABEL_WIDTH && tileHeight >= MIN_LABEL_HEIGHT;\n  const secondary =\n    canLabel && secondaryLabel && tileHeight >= MIN_TWO_LINE_HEIGHT\n      ? secondaryLabel\n      : undefined;\n\n  return (\n    <g>\n      <rect\n        x={tileX}\n        y={tileY}\n        width={tileWidth}\n        height={tileHeight}\n        rx={CELL_RADIUS}\n        style={{ fill: `var(--color-${toCssKey(name)})` }}\n      />\n      {canLabel && (\n        // Decorative: the hover that opens the tooltip belongs to the tile, so the\n        // label must not swallow it.\n        <foreignObject\n          x={tileX}\n          y={tileY}\n          width={tileWidth}\n          height={tileHeight}\n          className=\"pointer-events-none\"\n        >\n          <div\n            className={cn(\n              // Each line truncates with a real ellipsis — CSS measures the text,\n              // so nothing has to estimate how much of it fits.\n              'flex size-full flex-col overflow-hidden p-3',\n              // Adaptive text — three tones:\n              // • dark: saturated in both themes → white text (on-strong-neutral).\n              // • pale: pale in both themes → on-surface-primary (dark↔light).\n              // • inverts: dark in light, pale in dark (sequential 7–8 whose\n              //   light-dark() values mirror) → on-strong-primary, which is\n              //   light-dark(near-white, near-black) — the exact inverse.\n              fillTone === 'pale'\n                ? 'text-[var(--ui-text-on-surface-primary)]'\n                : fillTone === 'inverts'\n                  ? 'text-[var(--ui-text-on-status-strong-primary)]'\n                  : 'text-[var(--ui-text-on-status-strong-neutral)]',\n              LABEL_ALIGN_CLASS[labelAlign]\n            )}\n          >\n            <span className=\"truncate text-sm\">\n              {primaryLabel ?? name}\n            </span>\n            {secondary && (\n              <span className=\"truncate text-[11px]\">{secondary}</span>\n            )}\n          </div>\n        </foreignObject>\n      )}\n    </g>\n  );\n}\n\nexport interface TreemapProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /**\n   * Row-per-leaf data. Each object holds the leaf's `nameKey` label + its\n   * `dataKey` numeric size.\n   *\n   * `fill`, `primaryLabel` and `secondaryLabel` are reserved: the chart stamps\n   * them onto a copy of each row to carry the cell color and the two label lines\n   * through to the renderer (recharts hands the whole row to `content`, so\n   * anything the cell needs has to be on it). A row of your own carrying one of\n   * those names may end up driving what the tile paints.\n   */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-leaf map of `label` / `icon` / `tone`, keyed by the leaf's `nameKey`\n   * value (imported from the shared `Chart` primitives). Turned into\n   * `--color-<name>` custom properties. Series take their colour from the\n   * container's `palette`; each entry maps a key to a `label` and an optional\n   * `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each leaf's rectangle. */\n  dataKey: string;\n  /**\n   * Label field that names each leaf (drives the on-cell label, legend, tooltip,\n   * and `--color-<name>` lookup). Values should be unique; they are sanitized\n   * automatically to a valid CSS custom-property fragment (CSS-safe keys are\n   * preferred to avoid dev-mode warnings).\n   */\n  nameKey: string;\n  /** Width-to-height ratio the tiling targets. */\n  aspectRatio?: number;\n  /** Render each leaf's label inside its cell (when it fits). */\n  showLabels?: boolean;\n  /**\n   * Where a cell's label sits. Defaults to `center` — the Figma-canonical placement.\n   * `bottom-start` anchors the block to the tile's bottom start corner; `top-start`\n   * to the top start corner. The corner variants are named for the tile's *start* edge\n   * because they mirror under `dir=\"rtl\"`.\n   */\n  labelAlign?: TreemapLabelAlign;\n  /**\n   * Fields whose values make up a second label line under the leaf's name — e.g.\n   * `[dataKey]` for the size, or `['size', 'count']` for a value and a count. The\n   * line is dropped on cells too short to hold it.\n   */\n  secondaryKeys?: readonly string[];\n  /**\n   * Format each secondary value. Receives the field's index in `secondaryKeys`\n   * as its second argument, so one formatter can cover fields of different kinds.\n   */\n  secondaryFormatter?: TickFormatter;\n  /** Separator drawn between multiple secondary values. */\n  secondarySeparator?: string;\n  showTooltip?: boolean;\n  /**\n   * Render the legend — one entry per leaf. Off by default: a treemap labels its\n   * cells, so the legend is for the case where the tiles are too small to.\n   */\n  showLegend?: boolean;\n  /** Which edge the legend sits on. */\n  legendPos?: 'top' | 'bottom';\n  /**\n   * Font size of the legend text. Defaults to `'xs'` — the size the legend has\n   * always rendered at. See `ChartLegendFontSize`.\n   */\n  legendFontSize?: ChartLegendFontSize;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-cell rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst Treemap = React.forwardRef<HTMLDivElement, TreemapProps>(\n  (\n    {\n      className,\n      config,\n      palette = TREEMAP_DEFAULT_PALETTE,\n      data,\n      dataKey,\n      nameKey,\n      aspectRatio = 4 / 3,\n      showLabels = true,\n      labelAlign = 'center',\n      secondaryKeys,\n      secondaryFormatter,\n      secondarySeparator = ' · ',\n      showTooltip = true,\n      showLegend = false,\n      legendPos = 'bottom',\n      legendFontSize,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n    // hover resolves the cell color in the tooltip — recharts' Treemap carries no\n    // per-cell color on the tooltip payload item — and with its `secondaryLabel`,\n    // which reaches the cell renderer the same way: recharts hands the whole row\n    // to `content`, so a composed label has to be on the row before it gets there.\n    const seriesData: Record<string, string | number | boolean>[] =\n      React.useMemo(\n        () => {\n          // Auto fill-tone detection: resolve each leaf's token name and classify\n          // it by suffix. Token values are light-dark() pairs, so a runtime\n          // luminance check would be theme-fragile — the suffix is stable.\n          const resolvedColors = resolveChartColors(config, palette);\n          return data.map((row) => {\n            const name = String(row[nameKey]);\n            const secondaryLabel = secondaryKeys?.length\n              ? treemapSecondaryLabel({\n                  row,\n                  keys: secondaryKeys,\n                  separator: secondarySeparator,\n                  formatter: secondaryFormatter,\n                })\n              : undefined;\n            // The on-cell name is the leaf's `config` label, so a cell reads like its\n            // legend entry and tooltip row do. It matters more here than elsewhere:\n            // the raw `nameKey` value is sanitized before use in `--color-<name>`,\n            // so a leaf whose display name has a space in it can be keyed by that name\n            // while the human-readable label still comes from the `config` entry. Only\n            // a string label can go in SVG text; a `ReactNode` one falls back to the key.\n            const label = config[name]?.label;\n            const rawToken = (resolvedColors[name]?.color ?? '').replace(\n              /^var\\(|\\)$/g,\n              ''\n            );\n            // Diverging: a1/a2/b1/b2 are pale; a3/b3 are dark.\n            // Sequential: stops 1–2 are pale (in light) / dark (in dark); stops\n            // 7–8 invert (dark in light, pale in dark). Stops 3–6 stay dark in\n            // both themes.\n            const isPale = /-(?:a[12]|b[12]|sequential-[a-z]+-[12])$/.test(rawToken);\n            const inverts = /-sequential-[a-z]+-[78]$/.test(rawToken);\n            const fillTone: 'dark' | 'pale' | 'inverts' = isPale\n              ? 'pale'\n              : inverts\n                ? 'inverts'\n                : 'dark';\n            return {\n              ...row,\n              fill: `var(--color-${toCssKey(name)})`,\n              fillTone,\n              ...(typeof label === 'string' ? { primaryLabel: label } : {}),\n              ...(secondaryLabel ? { secondaryLabel } : {}),\n            };\n          });\n        },\n        [\n          config,\n          data,\n          nameKey,\n          palette,\n          secondaryFormatter,\n          secondaryKeys,\n          secondarySeparator,\n        ]\n      );\n\n    // recharts 3 builds the legend payload from the graphical item, and `Treemap`\n    // — unlike Bar/Line/Area/Pie/Radar/RadialBar/Scatter — never registers one,\n    // so a `<Legend>` inside a `Treemap` renders empty. The payload is synthesized\n    // from the leaves instead and handed to the shared `ChartLegendContent`, which\n    // keeps the treemap on the same legend markers, labels and `config` lookup as\n    // every other chart. `payload` carries the row so each entry resolves its own\n    // `config` entry via `nameKey`.\n    //\n    // One entry per *distinct* leaf name: same-named leaves deliberately share a\n    // `--color-<name>`/`config` entry, so a second entry would repeat the first\n    // verbatim — and `ChartLegendContent` keys its entries on `value`, so it would\n    // also be a duplicate React key.\n    const legendPayload = React.useMemo<LegendPayload[]>(() => {\n      const seen = new Set<string>();\n      return seriesData.flatMap((row) => {\n        const value = String(row[nameKey]);\n        if (seen.has(value)) return [];\n        seen.add(value);\n        return [\n          {\n            value,\n            dataKey: nameKey,\n            type: 'rect' as const,\n            color: String(row.fill),\n            payload: row,\n          },\n        ];\n      });\n    }, [nameKey, seriesData]);\n\n    // Every other chart type lets recharts shrink the plot area by the legend's\n    // measured size, but recharts' `Treemap` tiles the *full* chart surface and\n    // ignores the legend entirely — a `<Legend>` inside one paints over the tiles.\n    // So the legend is not a `<Legend>` at all: the shared `ChartLegendContent` is\n    // rendered straight into a row of its own beside the plot, on the same markers,\n    // labels and `config` lookup as every other chart's legend, and normal flow\n    // gives it the height it needs (one row, or several once it wraps) and takes\n    // that height off the tiled surface.\n    //\n    // Rendering it here rather than inside the plot is also what keeps the tiling\n    // correct: recharts' `Treemap` reads its container **once** (it opts out of the\n    // responsive path, because its own stroke-width rounding makes that loop), and a\n    // `<Legend>` can only render after the chart has a size — so the box it read\n    // would always be the one from before its own legend existed, a legend-row too\n    // tall, and the bottom row of tiles would be laid out under the clip. The row is\n    // its final height on the first render instead, so that one read is the right one.\n    //\n    // The row sits outside `ChartContainer`, so it takes `config` as a prop (the\n    // container's context doesn't reach it) and re-emits the `--color-<name>`\n    // properties its swatches resolve against under its own `data-chart` id.\n    const legendChartId = `chart-${React.useId().replace(/:/g, '')}`;\n    const legendRow = showLegend ? (\n      <div data-chart={legendChartId}>\n        <ChartStyle\n          id={legendChartId}\n          config={resolveChartColors(config, palette)}\n        />\n        <ChartLegendContent\n          config={config}\n          payload={legendPayload}\n          verticalAlign={legendPos}\n          nameKey={nameKey}\n          fontSize={legendFontSize}\n        />\n      </div>\n    ) : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(showLegend && 'flex flex-col', className)}\n        {...props}\n      >\n        {legendPos === 'top' && legendRow}\n        <ChartContainer\n          config={config}\n          palette={palette}\n          // `size-full` fills the caller's box; with a legend row beside it the\n          // height comes from the flex line instead, so the tiles give up exactly\n          // the room the legend takes.\n          className={showLegend ? 'min-h-0 w-full flex-1' : 'size-full'}\n        >\n          <RechartsTreemap\n            data={seriesData}\n            dataKey={dataKey}\n            nameKey={nameKey}\n            aspectRatio={aspectRatio}\n            {...animation}\n            content={\n              <TreemapCell showLabels={showLabels} labelAlign={labelAlign} />\n            }\n          >\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n          </RechartsTreemap>\n        </ChartContainer>\n        {legendPos === 'bottom' && legendRow}\n      </div>\n    );\n  }\n);\nTreemap.displayName = 'Treemap';\n\nexport { Treemap };\n"],"mappings":"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"}
+{"version":3,"file":"treemap.js","names":[],"sources":["../../../../src/components/ui/treemap/treemap.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Treemap as RechartsTreemap } from 'recharts';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegendContent,\n  ChartStyle,\n  resolveChartColors,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  toCssKey,\n  type ChartConfig,\n  type ChartLegendFontSize,\n  type ChartLegendAriaLabelProps,\n  type ChartPalette,\n  type ChartAnimationProps,\n  type TickFormatter,\n} from '../chart';\n\n// Treemap-specific default: the diverging palette shows the two-sided distribution\n// that a treemap is most commonly used for, and its adaptive text (auto-computed\n// from resolved token names below) works correctly out of the box.\nconst TREEMAP_DEFAULT_PALETTE: ChartPalette = { type: 'diverging', pair: 'blue-orange' };\n\n// A typed recharts composition over the shared `Chart` primitives. A treemap is\n// the odd one out: a single `Treemap` element with no axes/grid, themed through a\n// custom `content` cell renderer (recharts' default paints every cell the same\n// fill and has no token hooks) — and that renderer, not a `LabelList`, owns the\n// on-cell labels, so the fit/clamp logic lives here. Like Scatter/Composed/\n// RadialBar there's no CVA variant — a treemap's knobs are geometry\n// (`aspectRatio`) and the data, not a visual \"mode\". v1 is a flat treemap (a list\n// of leaves).\n\n/**\n * Where a cell's label block sits inside its rectangle. Named logically, not\n * physically: the corner variants anchor to the tile's *start* edge, so they\n * mirror under `dir=\"rtl\"`. `bottom-start` is the design's placement; `center`\n * is what the chart drew before the block had a second line.\n */\nexport type TreemapLabelAlign = 'bottom-start' | 'top-start' | 'center';\n\n// Cell shape: each tile is inset by the gap on every side, so neighbouring tiles\n// are separated by the surface showing through rather than by a stroke, and the\n// corners are rounded.\nconst CELL_GAP = 2;\nconst CELL_RADIUS = 0;\n\n// Label geometry, in px. The block's own layout is CSS (see the renderer); these\n// are the heights the tile has to clear for a label to fit *without being\n// clipped* — one line, or two.\n//\n// Line boxes, not font sizes: Tailwind's `--text-sm--line-height` is 4/3, so the\n// `text-sm` title renders a ~19px line box, and the second line inherits that same\n// ratio (an arbitrary `text-[11px]` sets font-size only) for ~14.7px. Measuring by\n// font size instead would let a tile pass the threshold and still have the block's\n// `overflow-hidden` eat the top of the first line.\nconst CELL_PADDING = 12;\nconst LINE_HEIGHT_RATIO = 4 / 3;\nconst TITLE_FONT_SIZE = 14; // text-sm\nconst SECONDARY_FONT_SIZE = 11;\nconst TITLE_LINE_HEIGHT = Math.ceil(TITLE_FONT_SIZE * LINE_HEIGHT_RATIO);\nconst SECONDARY_LINE_HEIGHT = Math.ceil(\n  SECONDARY_FONT_SIZE * LINE_HEIGHT_RATIO\n);\n\n// The smallest tile that gets a label at all, and the height a second line\n// additionally needs. Below the first threshold a cell stays blank rather than\n// showing a stub — the label would be wider than the tile it names.\nconst MIN_LABEL_WIDTH = 64;\nconst MIN_LABEL_HEIGHT = CELL_PADDING * 2 + TITLE_LINE_HEIGHT;\nconst MIN_TWO_LINE_HEIGHT = MIN_LABEL_HEIGHT + SECONDARY_LINE_HEIGHT;\n\n/**\n * Compose a cell's second line out of the caller's `secondaryKeys`. Empty and\n * missing fields are skipped rather than printed as a gap, so one row without\n * the field doesn't leave a dangling separator.\n */\nexport function treemapSecondaryLabel(options: {\n  row: Record<string, string | number>;\n  keys: readonly string[];\n  separator: string;\n  formatter?: TickFormatter;\n}): string | undefined {\n  const { row, keys, separator, formatter } = options;\n  const parts = keys.flatMap((key, index) => {\n    const value = row[key];\n    if (value == null || value === '') return [];\n    // Emptiness is re-checked *after* formatting, not just on the raw value: a\n    // formatter that blanks a field it doesn't want to show (a zero, a sentinel)\n    // would otherwise contribute an empty part and put back the dangling\n    // separator this function exists to avoid.\n    const part = formatter ? formatter(value, index) : String(value);\n    return part === '' ? [] : [part];\n  });\n  return parts.length ? parts.join(separator) : undefined;\n}\n\ninterface TreemapCellProps {\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  // recharts injects the node's resolved `name` (from nameKey) + value, plus\n  // every other field on the row — which is how the two stamped labels arrive.\n  name?: string;\n  /** The leaf's display name — its `config` label, stamped onto the row by `Treemap`. */\n  primaryLabel?: string;\n  /** The label's precomputed second line, stamped onto each row by `Treemap`. */\n  secondaryLabel?: string;\n  showLabels?: boolean;\n  labelAlign?: TreemapLabelAlign;\n  /**\n   * How the leaf's fill relates to text contrast. Stamped by `Treemap` onto each\n   * row before recharts hands it to the cell renderer. Auto-computed from the\n   * resolved token name suffix:\n   *\n   * - `'dark'` — saturated/dark in both themes → always white text.\n   * - `'pale'` — pale in both themes → always dark text (via theme-adaptive token).\n   * - `'inverts'` — dark in light, pale in dark (sequential stops 7–8 whose\n   *   `light-dark()` values mirror across themes) → white text in light, dark text\n   *   in dark, achieved by a `light-dark()` color value in CSS.\n   */\n  fillTone?: 'dark' | 'pale' | 'inverts';\n}\n\n// How the label block sits in its tile. `text-start`/`text-center` and the\n// block-axis `justify-*` are what make the corner-anchored variants mirror under\n// `dir=\"rtl\"` — the same logical utilities every other component uses, which is\n// why the label is HTML in a `foreignObject` rather than SVG `<text>`:\n// `x`/`text-anchor` are physical, so a mirrored label would need the direction\n// read in JS and applied by hand.\n//\n// Every variant leaves the cross axis on the default `items-stretch`, including\n// `center`. Centering the line is `text-center`'s job, not `items-center`'s:\n// `items-center` would size each line to its own text instead of to the tile, and\n// a `truncate` line only ellipsizes when it is the *tile* that constrains it — a\n// shrink-to-fit line is never narrower than its text, so it would silently\n// overflow and be hard-clipped on both edges instead.\nconst LABEL_ALIGN_CLASS: Record<TreemapLabelAlign, string> = {\n  'bottom-start': 'justify-end text-start',\n  'top-start': 'justify-start text-start',\n  center: 'justify-center text-center',\n};\n\n// Cell renderer: fill each rounded rect from its `--color-<name>` var, inset it so\n// the surface shows through between tiles, and lay the label block over it — the\n// leaf's name, plus the stamped second line when the tile is tall enough. Passed to\n// `Treemap.content`; recharts clones it with each node's geometry + row fields.\nexport function TreemapCell({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  primaryLabel,\n  secondaryLabel,\n  showLabels = true,\n  labelAlign = 'center',\n  fillTone = 'dark',\n}: TreemapCellProps) {\n  // recharts invokes `content` for the synthetic root node too (full chart\n  // dimensions, empty name). Skip any name-less node — otherwise its rect has no\n  // `--color-<name>` fill and paints the SVG-default black behind everything\n  // (invisible when leaves cover it, a black box on empty data).\n  if (!name) return <g />;\n  // The tile, not the node: the label sits inside the inset rect, so the gutter\n  // never eats into its padding.\n  const tileX = x + CELL_GAP;\n  const tileY = y + CELL_GAP;\n  const tileWidth = Math.max(0, width - CELL_GAP * 2);\n  const tileHeight = Math.max(0, height - CELL_GAP * 2);\n\n  // `>=` on the heights: they are exact fits (padding + line boxes), so a tile\n  // that measures one of them exactly has room for that label. The width is a\n  // judgement call about how narrow a label is still worth reading, not a fit, so\n  // it stays a strict `>`.\n  const canLabel =\n    showLabels && tileWidth > MIN_LABEL_WIDTH && tileHeight >= MIN_LABEL_HEIGHT;\n  const secondary =\n    canLabel && secondaryLabel && tileHeight >= MIN_TWO_LINE_HEIGHT\n      ? secondaryLabel\n      : undefined;\n\n  return (\n    <g>\n      <rect\n        x={tileX}\n        y={tileY}\n        width={tileWidth}\n        height={tileHeight}\n        rx={CELL_RADIUS}\n        style={{ fill: `var(--color-${toCssKey(name)})` }}\n      />\n      {canLabel && (\n        // Decorative: the hover that opens the tooltip belongs to the tile, so the\n        // label must not swallow it.\n        <foreignObject\n          x={tileX}\n          y={tileY}\n          width={tileWidth}\n          height={tileHeight}\n          className=\"pointer-events-none\"\n        >\n          <div\n            className={cn(\n              // Each line truncates with a real ellipsis — CSS measures the text,\n              // so nothing has to estimate how much of it fits.\n              'flex size-full flex-col overflow-hidden p-3',\n              // Adaptive text — three tones:\n              // • dark: saturated in both themes → white text (on-strong-neutral).\n              // • pale: pale in both themes → on-surface-primary (dark↔light).\n              // • inverts: dark in light, pale in dark (sequential 7–8 whose\n              //   light-dark() values mirror) → on-strong-primary, which is\n              //   light-dark(near-white, near-black) — the exact inverse.\n              fillTone === 'pale'\n                ? 'text-[var(--ui-text-on-surface-primary)]'\n                : fillTone === 'inverts'\n                  ? 'text-[var(--ui-text-on-status-strong-primary)]'\n                  : 'text-[var(--ui-text-on-status-strong-neutral)]',\n              LABEL_ALIGN_CLASS[labelAlign]\n            )}\n          >\n            <span className=\"truncate text-sm\">\n              {primaryLabel ?? name}\n            </span>\n            {secondary && (\n              <span className=\"truncate text-[11px]\">{secondary}</span>\n            )}\n          </div>\n        </foreignObject>\n      )}\n    </g>\n  );\n}\n\nexport interface TreemapProps\n  extends\n    Omit<React.ComponentProps<'div'>, 'children'>,\n    ChartAnimationProps,\n    ChartLegendAriaLabelProps {\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  /**\n   * Row-per-leaf data. Each object holds the leaf's `nameKey` label + its\n   * `dataKey` numeric size.\n   *\n   * `fill`, `primaryLabel` and `secondaryLabel` are reserved: the chart stamps\n   * them onto a copy of each row to carry the cell color and the two label lines\n   * through to the renderer (recharts hands the whole row to `content`, so\n   * anything the cell needs has to be on it). A row of your own carrying one of\n   * those names may end up driving what the tile paints.\n   */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-leaf map of `label` / `icon` / `tone`, keyed by the leaf's `nameKey`\n   * value (imported from the shared `Chart` primitives). Turned into\n   * `--color-<name>` custom properties. Series take their colour from the\n   * container's `palette`; each entry maps a key to a `label` and an optional\n   * `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each leaf's rectangle. */\n  dataKey: string;\n  /**\n   * Label field that names each leaf (drives the on-cell label, legend, tooltip,\n   * and `--color-<name>` lookup). Values should be unique; they are sanitized\n   * automatically to a valid CSS custom-property fragment (CSS-safe keys are\n   * preferred to avoid dev-mode warnings).\n   */\n  nameKey: string;\n  /** Width-to-height ratio the tiling targets. */\n  aspectRatio?: number;\n  /** Render each leaf's label inside its cell (when it fits). */\n  showLabels?: boolean;\n  /**\n   * Where a cell's label sits. Defaults to `center` — the Figma-canonical placement.\n   * `bottom-start` anchors the block to the tile's bottom start corner; `top-start`\n   * to the top start corner. The corner variants are named for the tile's *start* edge\n   * because they mirror under `dir=\"rtl\"`.\n   */\n  labelAlign?: TreemapLabelAlign;\n  /**\n   * Fields whose values make up a second label line under the leaf's name — e.g.\n   * `[dataKey]` for the size, or `['size', 'count']` for a value and a count. The\n   * line is dropped on cells too short to hold it.\n   */\n  secondaryKeys?: readonly string[];\n  /**\n   * Format each secondary value. Receives the field's index in `secondaryKeys`\n   * as its second argument, so one formatter can cover fields of different kinds.\n   */\n  secondaryFormatter?: TickFormatter;\n  /** Separator drawn between multiple secondary values. */\n  secondarySeparator?: string;\n  showTooltip?: boolean;\n  /**\n   * Render the legend — one entry per leaf. Off by default: a treemap labels its\n   * cells, so the legend is for the case where the tiles are too small to.\n   */\n  showLegend?: boolean;\n  /** Which edge the legend sits on. */\n  legendPos?: 'top' | 'bottom';\n  /**\n   * Font size of the legend text. Defaults to `'xs'` — the size the legend has\n   * always rendered at. See `ChartLegendFontSize`.\n   */\n  legendFontSize?: ChartLegendFontSize;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-cell rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst Treemap = React.forwardRef<HTMLDivElement, TreemapProps>(\n  (\n    {\n      className,\n      config,\n      palette = TREEMAP_DEFAULT_PALETTE,\n      data,\n      dataKey,\n      nameKey,\n      aspectRatio = 4 / 3,\n      showLabels = true,\n      labelAlign = 'center',\n      secondaryKeys,\n      secondaryFormatter,\n      secondarySeparator = ' · ',\n      showTooltip = true,\n      showLegend = false,\n      legendPos = 'bottom',\n      legendFontSize,\n      legendAriaLabel,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n    // hover resolves the cell color in the tooltip — recharts' Treemap carries no\n    // per-cell color on the tooltip payload item — and with its `secondaryLabel`,\n    // which reaches the cell renderer the same way: recharts hands the whole row\n    // to `content`, so a composed label has to be on the row before it gets there.\n    const seriesData: Record<string, string | number | boolean>[] =\n      React.useMemo(\n        () => {\n          // Auto fill-tone detection: resolve each leaf's token name and classify\n          // it by suffix. Token values are light-dark() pairs, so a runtime\n          // luminance check would be theme-fragile — the suffix is stable.\n          const resolvedColors = resolveChartColors(config, palette);\n          return data.map((row) => {\n            const name = String(row[nameKey]);\n            const secondaryLabel = secondaryKeys?.length\n              ? treemapSecondaryLabel({\n                  row,\n                  keys: secondaryKeys,\n                  separator: secondarySeparator,\n                  formatter: secondaryFormatter,\n                })\n              : undefined;\n            // The on-cell name is the leaf's `config` label, so a cell reads like its\n            // legend entry and tooltip row do. It matters more here than elsewhere:\n            // the raw `nameKey` value is sanitized before use in `--color-<name>`,\n            // so a leaf whose display name has a space in it can be keyed by that name\n            // while the human-readable label still comes from the `config` entry. Only\n            // a string label can go in SVG text; a `ReactNode` one falls back to the key.\n            const label = config[name]?.label;\n            const rawToken = (resolvedColors[name]?.color ?? '').replace(\n              /^var\\(|\\)$/g,\n              ''\n            );\n            // Diverging: a1/a2/b1/b2 are pale; a3/b3 are dark.\n            // Sequential: stops 1–2 are pale (in light) / dark (in dark); stops\n            // 7–8 invert (dark in light, pale in dark). Stops 3–6 stay dark in\n            // both themes.\n            const isPale = /-(?:a[12]|b[12]|sequential-[a-z]+-[12])$/.test(rawToken);\n            const inverts = /-sequential-[a-z]+-[78]$/.test(rawToken);\n            const fillTone: 'dark' | 'pale' | 'inverts' = isPale\n              ? 'pale'\n              : inverts\n                ? 'inverts'\n                : 'dark';\n            return {\n              ...row,\n              fill: `var(--color-${toCssKey(name)})`,\n              fillTone,\n              ...(typeof label === 'string' ? { primaryLabel: label } : {}),\n              ...(secondaryLabel ? { secondaryLabel } : {}),\n            };\n          });\n        },\n        [\n          config,\n          data,\n          nameKey,\n          palette,\n          secondaryFormatter,\n          secondaryKeys,\n          secondarySeparator,\n        ]\n      );\n\n    // recharts 3 builds the legend payload from the graphical item, and `Treemap`\n    // — unlike Bar/Line/Area/Pie/Radar/RadialBar/Scatter — never registers one,\n    // so a `<Legend>` inside a `Treemap` renders empty. The payload is synthesized\n    // from the leaves instead and handed to the shared `ChartLegendContent`, which\n    // keeps the treemap on the same legend markers, labels and `config` lookup as\n    // every other chart. `payload` carries the row so each entry resolves its own\n    // `config` entry via `nameKey`.\n    //\n    // One entry per *distinct* leaf name: same-named leaves deliberately share a\n    // `--color-<name>`/`config` entry, so a second entry would repeat the first\n    // verbatim — and `ChartLegendContent` keys its entries on `value`, so it would\n    // also be a duplicate React key.\n    const legendPayload = React.useMemo<LegendPayload[]>(() => {\n      const seen = new Set<string>();\n      return seriesData.flatMap((row) => {\n        const value = String(row[nameKey]);\n        if (seen.has(value)) return [];\n        seen.add(value);\n        return [\n          {\n            value,\n            dataKey: nameKey,\n            type: 'rect' as const,\n            color: String(row.fill),\n            payload: row,\n          },\n        ];\n      });\n    }, [nameKey, seriesData]);\n\n    // Every other chart type lets recharts shrink the plot area by the legend's\n    // measured size, but recharts' `Treemap` tiles the *full* chart surface and\n    // ignores the legend entirely — a `<Legend>` inside one paints over the tiles.\n    // So the legend is not a `<Legend>` at all: the shared `ChartLegendContent` is\n    // rendered straight into a row of its own beside the plot, on the same markers,\n    // labels and `config` lookup as every other chart's legend, and normal flow\n    // gives it the height it needs (one row, or several once it wraps) and takes\n    // that height off the tiled surface.\n    //\n    // Rendering it here rather than inside the plot is also what keeps the tiling\n    // correct: recharts' `Treemap` reads its container **once** (it opts out of the\n    // responsive path, because its own stroke-width rounding makes that loop), and a\n    // `<Legend>` can only render after the chart has a size — so the box it read\n    // would always be the one from before its own legend existed, a legend-row too\n    // tall, and the bottom row of tiles would be laid out under the clip. The row is\n    // its final height on the first render instead, so that one read is the right one.\n    //\n    // The row sits outside `ChartContainer`, so it takes `config` as a prop (the\n    // container's context doesn't reach it) and re-emits the `--color-<name>`\n    // properties its swatches resolve against under its own `data-chart` id.\n    const legendChartId = `chart-${React.useId().replace(/:/g, '')}`;\n    const legendRow = showLegend ? (\n      <div data-chart={legendChartId}>\n        <ChartStyle\n          id={legendChartId}\n          config={resolveChartColors(config, palette)}\n        />\n        <ChartLegendContent\n          config={config}\n          payload={legendPayload}\n          verticalAlign={legendPos}\n          nameKey={nameKey}\n          fontSize={legendFontSize}\n          ariaLabel={legendAriaLabel}\n        />\n      </div>\n    ) : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(showLegend && 'flex flex-col', className)}\n        {...props}\n      >\n        {legendPos === 'top' && legendRow}\n        <ChartContainer\n          config={config}\n          palette={palette}\n          // `size-full` fills the caller's box; with a legend row beside it the\n          // height comes from the flex line instead, so the tiles give up exactly\n          // the room the legend takes.\n          className={showLegend ? 'min-h-0 w-full flex-1' : 'size-full'}\n        >\n          <RechartsTreemap\n            data={seriesData}\n            dataKey={dataKey}\n            nameKey={nameKey}\n            aspectRatio={aspectRatio}\n            {...animation}\n            content={\n              <TreemapCell showLabels={showLabels} labelAlign={labelAlign} />\n            }\n          >\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n          </RechartsTreemap>\n        </ChartContainer>\n        {legendPos === 'bottom' && legendRow}\n      </div>\n    );\n  }\n);\nTreemap.displayName = 'Treemap';\n\nexport { Treemap };\n"],"mappings":"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"}

package/dist/llms/area-chart.md

@@ -120,6 +120,7 @@ across brands until the real data-viz palette lands.
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
 | `showLegend` | `boolean` | `true` | no | Render the legend. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text. |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `showXAxis` | `boolean` | `true` | no | Render the X axis (its ticks and title). Set false to hide it. |
 | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |

package/dist/llms/bar-chart.md

@@ -190,6 +190,7 @@ across brands until the real data-viz palette lands.
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip — recharts' for `vertical`, the per-row tooltip for `horizontal`. |
 | `showLegend` | `boolean` | `true` | no | Render the legend. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text. |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the vertical bar chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `showXAxis` | `boolean` | `true` | no | Render the X axis (its ticks and title). Set false to hide it. |
 | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |

package/dist/llms/chart.md

@@ -105,6 +105,7 @@ the chart primitives (`BarChart`, `Bar`, …) directly from `recharts`.
 | `hideIndicator` | `boolean` | `false` | no | Hide the per-series color dot in the tooltip. |
 | `hideIcon` | `boolean` | `false` | no | Hide the per-series icon in the legend (use the color swatch). |
 | `fontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text — labels, and the right-hand values of the list variant. |
+| `ariaLabel` | `string` | `'Chart legend'` | no | Accessible name for the legend group. The group is keyboard-focusable only while its content overflows its height cap. |
 | `nameKey` | `string` | — | no | Config key to resolve each series' label from the payload. |
 | `labelKey` | `string` | — | no | Config key to resolve the tooltip's heading label. |
 
@@ -161,6 +162,18 @@ Scenario: Legend font size
   And the 'list' variant sizes both its labels and its right-hand values
 ```
 
+```gherkin
+Scenario: Scroll a long legend
+  Given a legend whose entries exceed its visible height cap
+  Then the default variant shows up to three complete wrapped rows
+  And the 'list' variant shows up to eight complete rows
+  And extra entries remain available through vertical scrolling
+  And the legend wrapper is a named group with the accessible name 'Chart legend' by default
+  And the wrapper enters the tab order only while its content overflows
+  When ariaLabel is set on ChartLegendContent
+  Then that value names the legend group
+```
+
 ```gherkin
 Scenario: Default palette
   Given a ChartContainer with no explicit palette prop
@@ -179,6 +192,14 @@ Scenario: Default palette
 - Do **not** rely on color alone to distinguish series. The legend pairs each
   color swatch with a text label, and the tooltip shows series names next to
   values — keep both visible (don't `hideLabel` + `hideIndicator` together).
+- The legend is a named `group`, not a landmark, so multiple charts do not add
+  duplicate regions to landmark navigation. Its accessible name defaults to
+  `Chart legend`; set `ariaLabel` on `ChartLegendContent` or `legendAriaLabel` on
+  a chart to localize or distinguish it from other legends.
+- A legend enters the keyboard tab order only when entries overflow its height
+  cap. Focus it and use the browser's native scrolling keys to reach hidden
+  entries; a visible focus ring marks the scrollable group. Legends that fit do
+  not add a tab stop.
 - The tooltip surface uses `--ui-background-surface-primary` with
   `--ui-text-on-surface-primary` values and `--ui-text-on-surface-secondary`
   labels; axis ticks use the muted token. These meet contrast in light and dark.

package/dist/llms/composed-chart.md

@@ -223,6 +223,7 @@ across brands until the real data-viz palette lands.
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
 | `showLegend` | `boolean` | `true` | no | Render the legend. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text. |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `showXAxis` | `boolean` | `true` | no | Render the X axis (its ticks and title). Set false to hide it. |
 | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |

package/dist/llms/confidence-cone.md

@@ -126,6 +126,7 @@ Make the actual and forecast lines meet by giving the hand-off point both an
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip (the band series is filtered out of it). |
 | `showLegend` | `boolean` | `true` | no | Render the legend (the band series is filtered out of it). |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text. |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `showXAxis` | `boolean` | `true` | no | Render the X axis (its ticks and title). Set false to hide it. |
 | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |

package/dist/llms/funnel-chart.md

@@ -161,6 +161,7 @@ names every stage. Turn them on when a funnel is shown without its legend.
 | `percentFormatter` | `(value: number | string, index?: number) => string` | — | no | Format the conversion share behind the percent formats. Receives the share as a fraction (0.52); defaults to a one-decimal bare percentage ("52.0%"). Replace it for a locale that doesn't write a bare percent sign. |
 | `showLegend` | `boolean` | `true` | no | Render the stage list beside the plot — one two-column row per visible stage, a sibling of the plot rather than a renderer legend. On by default, because it is where the design's funnel names its stages. With it off the row centres its lone plot. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text (stage names and values). |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `legendValueFormatter` | `(value: string | number) => string` | — | no | Format the value in each legend row — the stage's dataKey number. Omit to stringify the raw value. |
 | `stageSettings` | `Record<string, { color?: string; hidden?: boolean }>` | — | no | Per-stage overrides keyed by the stage's nameKey value. `color` replaces that stage's palette stop, in the funnel and in its legend marker; `hidden` drops the stage from the funnel, its labels, the legend, and the conversion percentages. |
 | `showActiveShape` | `boolean` | `false` | no | Outline the hovered segment, rather than changing its fill, so it keeps the color that ties it to its legend entry and label. |

package/dist/llms/line-chart.md

@@ -119,6 +119,7 @@ across brands until the real data-viz palette lands.
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
 | `showLegend` | `boolean` | `true` | no | Render the legend. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text. |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `showXAxis` | `boolean` | `true` | no | Render the X axis (its ticks and title). Set false to hide it. |
 | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |

package/dist/llms/pie-chart.md

@@ -116,6 +116,7 @@ real data-viz palette lands.
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
 | `showLegend` | `boolean` | `true` | no | Render the legend. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text (labels and values). |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `legendValueFormatter` | `(value: string | number) => string` | — | no | Format each slice's value in the list legend. Omit to stringify the raw value. |
 | `margin` | `{ top?: number; right?: number; bottom?: number; left?: number }` | — | no | Plot-area margin, in px. Omit to use the renderer's default (5 on every side). |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Takes precedence over tooltipFormat. Ignored when showTooltip is false. |

package/dist/llms/radar-chart.md

@@ -126,6 +126,7 @@ across brands until the real data-viz palette lands.
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
 | `showLegend` | `boolean` | `true` | no | Render the legend. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text. |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `animate` | `boolean` | `false` | no | Enable entrance animation. Off by default so output/baselines are unchanged. |
 | `animationDuration` | `number` | — | no | Animation duration in ms. |

package/dist/llms/radial-bar-chart.md

@@ -133,6 +133,7 @@ real data-viz palette lands.
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
 | `showLegend` | `boolean` | `true` | no | Render the legend. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text (labels and values). |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `legendValueFormatter` | `(value: string | number) => string` | — | no | Format each arc's value in the list legend. Ignored in multi-metric mode (values are per-row, not per-series). |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `animate` | `boolean` | `false` | no | Enable entrance animation. Off by default so output/baselines are unchanged. |

package/dist/llms/scatter-chart.md

@@ -120,6 +120,7 @@ across brands until the real data-viz palette lands.
 | `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
 | `showLegend` | `boolean` | `true` | no | Render the legend. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text. |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `showXAxis` | `boolean` | `true` | no | Render the X axis (its ticks and title). Set false to hide it. |
 | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |

package/dist/llms/treemap.md

@@ -109,6 +109,7 @@ so light/dark and brand overrides come for free.
 | `showLegend` | `boolean` | `false` | no | Render the legend — one entry per distinct leaf name. Off by default: a treemap labels its own cells. |
 | `legendPos` | `'top' | 'bottom'` | `'bottom'` | no | Which edge the legend sits on. |
 | `legendFontSize` | `'xs' | 'sm' | 'base' | 'lg' | 'xl'` | `'xs'` | no | Font size of the legend text. |
+| `legendAriaLabel` | `string` | `'Chart legend'` | no | Accessible name for the chart's legend group. Give each chart a distinct name when several legends appear on the same page. |
 | `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
 | `animate` | `boolean` | `false` | no | Enable entrance animation. Off by default so output/baselines are unchanged. |
 | `animationDuration` | `number` | — | no | Animation duration in ms. |

package/dist/llms.txt

@@ -1,6 +1,6 @@
 # Acronis UI Kit for React — LLM Reference
 
-> `@acronis-platform/ui-react` v5.5.1
+> `@acronis-platform/ui-react` v5.5.3
 
 Machine-readable component reference compiled from framework-agnostic specs.
 Each entry links to a self-contained markdown file with props, behavior,

package/dist/src/components/ui/area-chart/area-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartConfig, ChartLegendFontSize, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
+import { ChartConfig, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const areaChartVariants: (props?: ({
     layout?: "single" | "stacked" | null | undefined;
@@ -33,7 +33,7 @@ export interface AreaChartAreaSettings {
     /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */
     labelPosition?: CartesianLabelPosition;
 }
-export interface AreaChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof areaChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+export interface AreaChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof areaChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps, ChartLegendAriaLabelProps {
     /**
      * The dataviz palette this chart's series are painted from. Series that
      * state no `color` of their own take a stop of it. See `ChartPalette`.

package/dist/src/components/ui/bar-chart/bar-chart.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { BarShapeProps } from 'recharts/types/cartesian/Bar';
-import { ChartLegend, ChartTooltip, ChartConfig, ChartLegendFontSize, ChartPalette, ChartStatusTone, ChartReferenceLine, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
+import { ChartLegend, ChartTooltip, ChartConfig, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartPalette, ChartStatusTone, ChartReferenceLine, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const barChartVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
@@ -99,9 +99,10 @@ export declare function NormalizedTooltipContent({ content, dataKeys, ...props }
  * in `dataKeys` order the legend would silently reorder itself depending on
  * which bar-styling props happen to be set.
  */
-export declare function NormalizedLegendContent({ dataKeys, fontSize, ...props }: Partial<LegendRenderProps> & {
+export declare function NormalizedLegendContent({ dataKeys, fontSize, legendAriaLabel, ...props }: Partial<LegendRenderProps> & {
     dataKeys: string[];
     fontSize?: ChartLegendFontSize;
+    legendAriaLabel?: string;
 }): import("react/jsx-runtime").JSX.Element;
 /** Paint overrides recharts spreads over a bar to mark it as the active one. */
 interface BarPaintOverride {
@@ -123,7 +124,7 @@ export declare function createTrackShape({ inRange, trackFill, paint, }: {
  * tooltip and legend. This is the default — `orientation` is only spelled out
  * to discriminate it from the horizontal mode below.
  */
-export interface BarChartVerticalProps extends Omit<React.ComponentProps<'div'>, 'children'>, Omit<VariantProps<typeof barChartVariants>, 'orientation'>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+export interface BarChartVerticalProps extends Omit<React.ComponentProps<'div'>, 'children'>, Omit<VariantProps<typeof barChartVariants>, 'orientation'>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps, ChartLegendAriaLabelProps {
     /** Selects the recharts bar chart. Omit it — this is the default. */
     orientation?: 'vertical';
     /**

package/dist/src/components/ui/chart/chart.d.ts

@@ -58,6 +58,8 @@ export type ChartTooltipContentProps = Partial<TooltipContentProps<ValueType, Na
 export type ChartLegendFontSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl';
 export type ChartLegendContentProps = {
     className?: string;
+    /** Accessible name for the legend group. */
+    ariaLabel?: string;
     hideIcon?: boolean;
     verticalAlign?: LegendProps['verticalAlign'];
     payload?: LegendPayload[];
@@ -76,10 +78,10 @@ export type ChartLegendContentProps = {
      */
     config?: ChartConfig;
     /**
-     * `default` — the current horizontal wrap layout (one row of chips).
-     * `list` — a vertical list where each entry is `[dot] [label flex-1] [value]`,
-     * matching the Figma donut/radial widget legend. Use alongside a manually-built
-     * `payload` passed from outside the chart's recharts composition.
+     * `default` — horizontal wrapped chips; scrolls after three rows (76px at
+     * `xs`). `list` — vertical `[dot] [label flex-1] [value]` rows; scrolls after
+     * eight rows (128px at `xs`). Both caps scale with `fontSize`; `className` can
+     * override the cap.
      */
     variant?: 'default' | 'list';
     /**
@@ -100,6 +102,14 @@ export type ChartLegendContentProps = {
      */
     valueClassName?: string;
 };
+/** Accessible-name prop shared by chart components that render a legend. */
+export interface ChartLegendAriaLabelProps {
+    /**
+     * Accessible name for this chart's legend. Defaults to `Chart legend`; give
+     * each chart a distinct name when several legends appear on the same page.
+     */
+    legendAriaLabel?: string;
+}
 export interface ChartContainerProps extends React.ComponentProps<'div'> {
     /**
      * The series this chart draws, keyed by data field.
@@ -129,5 +139,5 @@ declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
 export type ChartTooltipContentType = React.ComponentProps<typeof ChartTooltip>['content'];
 declare function ChartTooltipContent({ active, payload, label, className, hideLabel, hideIndicator, labelFormatter, formatter, labelClassName, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, fontSize, valueKey, valueFormatter, valueClassName, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartLegendContent({ className, ariaLabel, hideIcon, payload, verticalAlign, nameKey, config: configFromProps, variant, fontSize, valueKey, valueFormatter, valueClassName, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/src/components/ui/chart/index.d.ts

@@ -1,5 +1,5 @@
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, resolveChartColors, toCssKey, } from './chart';
-export type { ChartConfig, ResolvedChartConfig, ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartLegendFontSize, ChartTooltipContentType, } from './chart';
+export type { ChartConfig, ResolvedChartConfig, ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartTooltipContentType, } from './chart';
 export { CHART_CATEGORICAL_TOKENS, CHART_SEQUENTIAL_TOKENS, CHART_DIVERGING_TOKENS, CHART_STATUS_TOKENS, CHART_DEFAULT_PALETTE, listPaletteStops, listPaletteChoices, resolveSeriesColor, findDuplicateTones, } from './chart-palette';
 export type { ChartPalette, ChartSeriesTone, ChartSequentialRamp, ChartDivergingPair, ChartDivergingSide, ChartStatusTone, ResolveSeriesColorOptions, } from './chart-palette';
 export { formatCompactNumber, formatPercent, createTickFormatter, resolveAxisDomain, resolveRotatedTickAnchor, resolveXAxisHeight, resolveXAxisTitle, resolveYAxisTitle, resolveCategoryRange, resolveAnimation, toLabelFormatter, resolveLabelFillClass, resolveCartesianLabelPosition, resolveBrushProps, resolveChartReferenceValue, resolveReferenceLineProps, toReferenceLineList, CHART_REFERENCE_LINE_STROKE, CHART_LABEL_MARGIN, CHART_LABEL_FILL_CLASS, CHART_LABEL_FILL_ON_SERIES_CLASS, CHART_LABEL_FONT_SIZE, CHART_BRUSH_HEIGHT, CHART_BRUSH_ARIA_LABEL, dropProjectionPayload, } from './chart-format';

package/dist/src/components/ui/composed-chart/composed-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartConfig, ChartLegendFontSize, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition, ChartYAxisTarget, SecondaryYAxisProps } from '../chart';
+import { ChartConfig, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCategoryRange, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition, ChartYAxisTarget, SecondaryYAxisProps } from '../chart';
 import * as React from 'react';
 declare const composedChartVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
@@ -107,7 +107,7 @@ export interface ComposedChartReferenceArea extends ChartCategoryRange {
     /** Caption above the band. */
     label?: string;
 }
-export interface ComposedChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof composedChartVariants>, CartesianChartProps, SecondaryYAxisProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+export interface ComposedChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof composedChartVariants>, CartesianChartProps, SecondaryYAxisProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps, ChartLegendAriaLabelProps {
     /**
      * The dataviz palette this chart's series are painted from. Series that
      * state no `color` of their own take a stop of it. See `ChartPalette`.

package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig, ChartLegendFontSize, ChartPalette, CartesianChartProps, ChartAnimationProps } from '../chart';
+import { ChartTooltip, ChartConfig, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartPalette, CartesianChartProps, ChartAnimationProps } from '../chart';
 import * as React from 'react';
 /**
  * Drop every synthetic cone-band range series from a recharts tooltip/legend
@@ -81,7 +81,7 @@ export interface ConfidenceConeReferenceLine {
  * object shape — Storybook can't split a union's required args between `meta.args`
  * and a story's. Not re-exported from `index.ts`; not part of the public API.
  */
-export interface ConfidenceConeBaseProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, ChartAnimationProps {
+export interface ConfidenceConeBaseProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, ChartAnimationProps, ChartLegendAriaLabelProps {
     /**
      * The dataviz palette this chart's series are painted from. Series that
      * state no `color` of their own take a stop of it. See `ChartPalette`.

package/dist/src/components/ui/funnel-chart/funnel-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartAnimationProps, ChartConfig, ChartLegendFontSize, ChartPalette, TickFormatter } from '../chart';
+import { ChartTooltip, ChartAnimationProps, ChartConfig, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartPalette, TickFormatter } from '../chart';
 import * as React from 'react';
 declare const funnelChartVariants: (props?: ({
     lastShape?: "triangle" | "rectangle" | null | undefined;
@@ -191,7 +191,7 @@ export declare function funnelChartLabelText(options: {
     formatter?: TickFormatter;
     percentFormatter?: TickFormatter;
 }): string;
-export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof funnelChartVariants>, ChartAnimationProps {
+export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof funnelChartVariants>, ChartAnimationProps, ChartLegendAriaLabelProps {
     /**
      * The dataviz palette the stages are painted from — the only source of a
      * stage's colour, bar a per-stage `stageSettings.color`. Defaults to

package/dist/src/components/ui/line-chart/line-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig, ChartLegendFontSize, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
+import { ChartTooltip, ChartConfig, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartPalette, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const lineChartVariants: (props?: ({
     curve?: "step" | "linear" | "monotone" | "natural" | "basis" | "stepBefore" | "stepAfter" | null | undefined;
@@ -54,7 +54,7 @@ export interface LineChartLineSettings {
     /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */
     labelPosition?: CartesianLabelPosition;
 }
-export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
+export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps, ChartLegendAriaLabelProps {
     /**
      * The dataviz palette this chart's series are painted from. Series that
      * state no `color` of their own take a stop of it. See `ChartPalette`.

package/dist/src/components/ui/pie-chart/pie-chart.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ChartTooltip, ChartConfig, ChartLegendFontSize, ChartPalette, ChartTooltipContentProps, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
+import { ChartTooltip, ChartConfig, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartPalette, ChartTooltipContentProps, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
 import * as React from 'react';
 declare const pieChartVariants: (props?: ({
     shape?: "donut" | "pie" | null | undefined;
@@ -80,7 +80,7 @@ export interface PieChartCenterLabel {
     /** Caption rendered under the value. */
     label?: string | number;
 }
-export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants>, ChartAnimationProps, ChartDataLabelProps {
+export interface PieChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof pieChartVariants>, ChartAnimationProps, ChartDataLabelProps, ChartLegendAriaLabelProps {
     /**
      * The dataviz palette this chart's series are painted from. Series that
      * state no `color` of their own take a stop of it. See `ChartPalette`.

package/dist/src/components/ui/radar-chart/radar-chart.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { AxisDomainItem } from 'recharts';
-import { ChartTooltip, ChartConfig, ChartLegendFontSize, ChartPalette, ChartAnimationProps, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
+import { ChartTooltip, ChartConfig, ChartLegendFontSize, ChartLegendAriaLabelProps, ChartPalette, ChartAnimationProps, ChartDataLabelProps, CartesianLabelPosition } from '../chart';
 import * as React from 'react';
 declare const radarChartVariants: (props?: ({
     gridType?: "circle" | "polygon" | null | undefined;
@@ -78,7 +78,7 @@ export interface RadarSeriesStyle {
  * keeps reading its config color.
  */
 export declare function radarSeriesStyle(key: string, settings: RadarChartSeriesSettings | undefined, defaults: RadarSeriesDefaults): RadarSeriesStyle;
-export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof radarChartVariants>, ChartAnimationProps, ChartDataLabelProps {
+export interface RadarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof radarChartVariants>, ChartAnimationProps, ChartDataLabelProps, ChartLegendAriaLabelProps {
     /**
      * The dataviz palette this chart's series are painted from. Series that
      * state no `color` of their own take a stop of it. See `ChartPalette`.