@acronis-platform/ui-react 0.58.0 → 0.61.0

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

@@ -1,83 +1,207 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import * as x from "react";
-import { Treemap as T } from "recharts";
-import { cn as C } from "../../../lib/utils.js";
-import { ChartContainer as h, ChartTooltip as v, ChartTooltipContent as N } from "../chart/chart.js";
-function b({
-  x: o = 0,
-  y: l = 0,
-  width: t = 0,
-  height: a = 0,
-  name: e,
-  showLabels: s = !0
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import * as I from "react";
+import { Treemap as W } from "recharts";
+import { cn as H } from "../../../lib/utils.js";
+import { resolveAnimation as Y, CHART_LABEL_FONT_SIZE as k } from "../chart/chart-format.js";
+import { ChartContainer as w, ChartTooltip as z, ChartTooltipContent as Z, ChartStyle as F, ChartLegendContent as P } from "../chart/chart.js";
+const E = 2, U = 6, X = 12, S = 4 / 3, q = 11, J = Math.ceil(k * S), Q = Math.ceil(
+  q * S
+), V = 64, g = X * 2 + J, y = g + Q;
+function K(h) {
+  const { row: n, keys: l, separator: f, formatter: t } = h, s = l.flatMap((i, d) => {
+    const e = n[i];
+    if (e == null || e === "") return [];
+    const o = t ? t(e, d) : String(e);
+    return o === "" ? [] : [o];
+  });
+  return s.length ? s.join(f) : void 0;
+}
+const tt = {
+  "bottom-start": "justify-end text-start",
+  "top-start": "justify-start text-start",
+  center: "justify-center text-center"
+};
+function et({
+  x: h = 0,
+  y: n = 0,
+  width: l = 0,
+  height: f = 0,
+  name: t,
+  primaryLabel: s,
+  secondaryLabel: i,
+  showLabels: d = !0,
+  labelAlign: e = "bottom-start"
 }) {
-  if (!e) return /* @__PURE__ */ r("g", {});
-  const i = s && t > 64 && a > 28;
-  return /* @__PURE__ */ u("g", { children: [
+  if (!t) return /* @__PURE__ */ r("g", {});
+  const o = h + E, x = n + E, L = Math.max(0, l - E * 2), a = Math.max(0, f - E * 2), c = d && L > V && a >= g, _ = c && i && a >= y ? i : void 0;
+  return /* @__PURE__ */ N("g", { children: [
     /* @__PURE__ */ r(
       "rect",
       {
         x: o,
-        y: l,
-        width: t,
+        y: x,
+        width: L,
         height: a,
-        strokeWidth: 2,
-        className: "stroke-background",
-        style: { fill: `var(--color-${e})` }
+        rx: U,
+        style: { fill: `var(--color-${t})` }
       }
     ),
-    i && /* @__PURE__ */ r(
-      "text",
+    c && // Decorative: the hover that opens the tooltip belongs to the tile, so the
+    // label must not swallow it.
+    /* @__PURE__ */ r(
+      "foreignObject",
       {
-        x: o + t / 2,
-        y: l + a / 2,
-        textAnchor: "middle",
-        dominantBaseline: "middle",
-        className: "fill-[var(--ui-text-on-status-strong-neutral)] text-xs",
-        children: e
+        x: o,
+        y: x,
+        width: L,
+        height: a,
+        className: "pointer-events-none",
+        children: /* @__PURE__ */ N(
+          "div",
+          {
+            className: H(
+              // Each line truncates with a real ellipsis — CSS measures the text,
+              // so nothing has to estimate how much of it fits.
+              "flex size-full flex-col overflow-hidden p-3",
+              // The design system's "text on a strong colored surface" token
+              // (constant white in both themes) — reads over the saturated series
+              // colors without hardcoding a color. The weight, not a second color,
+              // carries the hierarchy over the second line: the on-strong
+              // *secondary* text token resolves to a dark grey in dark mode, which
+              // a cell's fill stays saturated behind.
+              "text-[var(--ui-text-on-status-strong-neutral)]",
+              tt[e]
+            ),
+            children: [
+              /* @__PURE__ */ r("span", { className: "truncate text-xs font-semibold", children: s ?? t }),
+              _ && /* @__PURE__ */ r("span", { className: "truncate text-[11px]", children: _ })
+            ]
+          }
+        )
       }
     )
   ] });
 }
-const k = x.forwardRef(
+const rt = I.forwardRef(
   ({
-    className: o,
-    config: l,
-    data: t,
-    dataKey: a,
-    nameKey: e,
+    className: h,
+    config: n,
+    data: l,
+    dataKey: f,
+    nameKey: t,
     aspectRatio: s = 4 / 3,
     showLabels: i = !0,
-    showTooltip: c = !0,
-    tooltipContent: m,
-    ...d
-  }, p) => {
-    const f = t.map((n) => ({
-      ...n,
-      fill: `var(--color-${n[e]})`
-    }));
-    return /* @__PURE__ */ r("div", { ref: p, className: C(o), ...d, children: /* @__PURE__ */ r(h, { config: l, className: "size-full", children: /* @__PURE__ */ r(
-      T,
-      {
-        data: f,
-        dataKey: a,
-        nameKey: e,
-        aspectRatio: s,
-        isAnimationActive: !1,
-        content: /* @__PURE__ */ r(b, { showLabels: i }),
-        children: c && /* @__PURE__ */ r(
-          v,
+    labelAlign: d = "bottom-start",
+    secondaryKeys: e,
+    secondaryFormatter: o,
+    secondarySeparator: x = " · ",
+    showTooltip: L = !0,
+    showLegend: a = !1,
+    legendPos: c = "bottom",
+    tooltipContent: _,
+    animate: M,
+    animationDuration: G,
+    animationBegin: R,
+    animationEasing: j,
+    ...D
+  }, O) => {
+    const B = Y({
+      animate: M,
+      animationDuration: G,
+      animationBegin: R,
+      animationEasing: j
+    }), T = I.useMemo(
+      () => l.map((p) => {
+        var b;
+        const m = String(p[t]), u = e != null && e.length ? K({
+          row: p,
+          keys: e,
+          separator: x,
+          formatter: o
+        }) : void 0, A = (b = n[m]) == null ? void 0 : b.label;
+        return {
+          ...p,
+          fill: `var(--color-${m})`,
+          ...typeof A == "string" ? { primaryLabel: A } : {},
+          ...u ? { secondaryLabel: u } : {}
+        };
+      }),
+      [
+        n,
+        l,
+        t,
+        o,
+        e,
+        x
+      ]
+    ), $ = I.useMemo(() => {
+      const p = /* @__PURE__ */ new Set();
+      return T.flatMap((m) => {
+        const u = String(m[t]);
+        return p.has(u) ? [] : (p.add(u), [
           {
-            content: m ?? /* @__PURE__ */ r(N, { nameKey: e, hideLabel: !0 })
+            value: u,
+            dataKey: t,
+            type: "rect",
+            color: String(m.fill),
+            payload: m
           }
-        )
+        ]);
+      });
+    }, [t, T]), C = `chart-${I.useId().replace(/:/g, "")}`, v = a ? /* @__PURE__ */ N("div", { "data-chart": C, className: "text-xs", children: [
+      /* @__PURE__ */ r(F, { id: C, config: n }),
+      /* @__PURE__ */ r(
+        P,
+        {
+          config: n,
+          payload: $,
+          verticalAlign: c,
+          nameKey: t
+        }
+      )
+    ] }) : null;
+    return /* @__PURE__ */ N(
+      "div",
+      {
+        ref: O,
+        className: H(a && "flex flex-col", h),
+        ...D,
+        children: [
+          c === "top" && v,
+          /* @__PURE__ */ r(
+            w,
+            {
+              config: n,
+              className: a ? "min-h-0 w-full flex-1" : "size-full",
+              children: /* @__PURE__ */ r(
+                W,
+                {
+                  data: T,
+                  dataKey: f,
+                  nameKey: t,
+                  aspectRatio: s,
+                  ...B,
+                  content: /* @__PURE__ */ r(et, { showLabels: i, labelAlign: d }),
+                  children: L && /* @__PURE__ */ r(
+                    z,
+                    {
+                      content: _ ?? /* @__PURE__ */ r(Z, { nameKey: t, hideLabel: !0 })
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          c === "bottom" && v
+        ]
       }
-    ) }) });
+    );
   }
 );
-k.displayName = "Treemap";
+rt.displayName = "Treemap";
 export {
-  k as Treemap,
-  b as TreemapCell
+  rt as Treemap,
+  et as TreemapCell,
+  K as treemapSecondaryLabel
 };
 //# sourceMappingURL=treemap.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"treemap.js","sources":["../../../../src/components/ui/treemap/treemap.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Treemap as RechartsTreemap } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\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/legend, themed\n// through a custom `content` cell renderer (recharts' default paints every cell\n// the same fill and has no token hooks). Like Scatter/Composed/RadialBar there's\n// no CVA variant — a treemap's knobs are geometry (`aspectRatio`) and the data,\n// not a visual \"mode\". v1 is a flat treemap (a list of leaves).\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.\n  name?: string;\n  showLabels?: boolean;\n}\n\n// Cell renderer: fill each rect from its `--color-<name>` var, separate cells\n// with the surface color, and center a white label (readable over the saturated\n// series colors) when the cell is big enough. Passed to `Treemap.content`;\n// recharts clones it with each node's geometry + `name`.\nexport function TreemapCell({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  showLabels = true,\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  const canLabel = showLabels && width > 64 && height > 28;\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        strokeWidth={2}\n        className=\"stroke-background\"\n        style={{ fill: `var(--color-${name})` }}\n      />\n      {canLabel && (\n        <text\n          x={x + width / 2}\n          y={y + height / 2}\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          // The design system's \"text on a strong colored surface\" token\n          // (constant white in both themes) — reads over the saturated series\n          // colors without hardcoding a color.\n          className=\"fill-[var(--ui-text-on-status-strong-neutral)] text-xs\"\n        >\n          {name}\n        </text>\n      )}\n    </g>\n  );\n}\n\nexport interface TreemapProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Row-per-leaf data. Each object holds the leaf's `nameKey` label + its `dataKey` numeric size. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-leaf map of `label` / `color`, keyed by the leaf's `nameKey` value\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\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, tooltip, and\n   * `--color-<name>` lookup). Values should be unique and CSS-safe (they become\n   * part of a custom-property name).\n   */\n  nameKey: string;\n  /** Width-to-height ratio the tiling targets. */\n  aspectRatio?: number;\n  /** Render each leaf's name inside its cell (when it fits). */\n  showLabels?: boolean;\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting, per-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      data,\n      dataKey,\n      nameKey,\n      aspectRatio = 4 / 3,\n      showLabels = true,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\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.\n    const seriesData: Record<string, string | number>[] = data.map((row) => ({\n      ...row,\n      fill: `var(--color-${row[nameKey]})`,\n    }));\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer config={config} className=\"size-full\">\n          <RechartsTreemap\n            data={seriesData}\n            dataKey={dataKey}\n            nameKey={nameKey}\n            aspectRatio={aspectRatio}\n            isAnimationActive={false}\n            content={<TreemapCell showLabels={showLabels} />}\n          >\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n          </RechartsTreemap>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nTreemap.displayName = 'Treemap';\n\nexport { Treemap };\n"],"names":["TreemapCell","x","y","width","height","name","showLabels","jsx","canLabel","Treemap","React","className","config","data","dataKey","nameKey","aspectRatio","showTooltip","tooltipContent","props","ref","seriesData","row","cn","ChartContainer","RechartsTreemap","ChartTooltip","ChartTooltipContent"],"mappings":";;;;;AAkCO,SAASA,EAAY;AAAA,EAC1B,GAAAC,IAAI;AAAA,EACJ,GAAAC,IAAI;AAAA,EACJ,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,MAAAC;AAAA,EACA,YAAAC,IAAa;AACf,GAAqB;AAKnB,MAAI,CAACD,EAAM,QAAO,gBAAAE,EAAC,KAAA,CAAA,CAAE;AACrB,QAAMC,IAAWF,KAAcH,IAAQ,MAAMC,IAAS;AACtD,2BACG,KAAA,EACC,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAAN;AAAA,QACA,GAAAC;AAAA,QACA,OAAAC;AAAA,QACA,QAAAC;AAAA,QACA,aAAa;AAAA,QACb,WAAU;AAAA,QACV,OAAO,EAAE,MAAM,eAAeC,CAAI,IAAA;AAAA,MAAI;AAAA,IAAA;AAAA,IAEvCG,KACC,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAGN,IAAIE,IAAQ;AAAA,QACf,GAAGD,IAAIE,IAAS;AAAA,QAChB,YAAW;AAAA,QACX,kBAAiB;AAAA,QAIjB,WAAU;AAAA,QAET,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;AAmCA,MAAMI,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc,IAAI;AAAA,IAClB,YAAAV,IAAa;AAAA,IACb,aAAAW,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAgDR,EAAK,IAAI,CAACS,OAAS;AAAA,MACvE,GAAGA;AAAA,MACH,MAAM,eAAeA,EAAIP,CAAO,CAAC;AAAA,IAAA,EACjC;AAEF,WACE,gBAAAR,EAAC,OAAA,EAAI,KAAAa,GAAU,WAAWG,EAAGZ,CAAS,GAAI,GAAGQ,GAC3C,UAAA,gBAAAZ,EAACiB,GAAA,EAAe,QAAAZ,GAAgB,WAAU,aACxC,UAAA,gBAAAL;AAAA,MAACkB;AAAAA,MAAA;AAAA,QACC,MAAMJ;AAAA,QACN,SAAAP;AAAA,QACA,SAAAC;AAAA,QACA,aAAAC;AAAA,QACA,mBAAmB;AAAA,QACnB,SAAS,gBAAAT,EAACP,GAAA,EAAY,YAAAM,EAAA,CAAwB;AAAA,QAE7C,UAAAW,KACC,gBAAAV;AAAA,UAACmB;AAAA,UAAA;AAAA,YACC,SACER,KACE,gBAAAX,EAACoB,GAAA,EAAoB,SAAAZ,GAAkB,WAAS,GAAA,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MAGvD;AAAA,IAAA,GAGN,EAAA,CACF;AAAA,EAEJ;AACF;AACAN,EAAQ,cAAc;"}
+{"version":3,"file":"treemap.js","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  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  CHART_LABEL_FONT_SIZE,\n  type ChartConfig,\n  type ChartAnimationProps,\n  type TickFormatter,\n} from '../chart';\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 = 6;\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-xs--line-height` is 4/3, so the\n// `text-xs` title renders a 16px 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 SECONDARY_FONT_SIZE = 11;\nconst TITLE_LINE_HEIGHT = Math.ceil(CHART_LABEL_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\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 = 'bottom-start',\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-${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              // The design system's \"text on a strong colored surface\" token\n              // (constant white in both themes) — reads over the saturated series\n              // colors without hardcoding a color. The weight, not a second color,\n              // carries the hierarchy over the second line: the on-strong\n              // *secondary* text token resolves to a dark grey in dark mode, which\n              // a cell's fill stays saturated behind.\n              'text-[var(--ui-text-on-status-strong-neutral)]',\n              LABEL_ALIGN_CLASS[labelAlign]\n            )}\n          >\n            <span className=\"truncate text-xs font-semibold\">\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   * 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` / `color`, keyed by the leaf's `nameKey` value\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\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 and CSS-safe (they\n   * become part of a custom-property name).\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 `bottom-start` — the design's\n   * placement, which keeps the label anchored to a tile corner as the tiling\n   * reflows. `top-start` anchors it to the opposite corner; `center` centers the\n   * block in the tile. 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   * 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      data,\n      dataKey,\n      nameKey,\n      aspectRatio = 4 / 3,\n      showLabels = true,\n      labelAlign = 'bottom-start',\n      secondaryKeys,\n      secondaryFormatter,\n      secondarySeparator = ' · ',\n      showTooltip = true,\n      showLegend = false,\n      legendPos = 'bottom',\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>[] = React.useMemo(\n      () =>\n        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 has to be CSS-safe (it becomes part of\n          // `--color-<name>`), so a leaf whose display name has a space in it is\n          // keyed by a slug — and the slug is not what belongs on the tile. Only a\n          // string label can go in SVG text; a `ReactNode` one falls back to the key.\n          const label = config[name]?.label;\n          return {\n            ...row,\n            fill: `var(--color-${name})`,\n            ...(typeof label === 'string' ? { primaryLabel: label } : {}),\n            ...(secondaryLabel ? { secondaryLabel } : {}),\n          };\n        }),\n      [\n        config,\n        data,\n        nameKey,\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} className=\"text-xs\">\n        <ChartStyle id={legendChartId} config={config} />\n        <ChartLegendContent\n          config={config}\n          payload={legendPayload}\n          verticalAlign={legendPos}\n          nameKey={nameKey}\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          // `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"],"names":["CELL_GAP","CELL_RADIUS","CELL_PADDING","LINE_HEIGHT_RATIO","SECONDARY_FONT_SIZE","TITLE_LINE_HEIGHT","CHART_LABEL_FONT_SIZE","SECONDARY_LINE_HEIGHT","MIN_LABEL_WIDTH","MIN_LABEL_HEIGHT","MIN_TWO_LINE_HEIGHT","treemapSecondaryLabel","options","row","keys","separator","formatter","parts","key","index","value","part","LABEL_ALIGN_CLASS","TreemapCell","x","y","width","height","name","primaryLabel","secondaryLabel","showLabels","labelAlign","jsx","tileX","tileY","tileWidth","tileHeight","canLabel","secondary","jsxs","cn","Treemap","React","className","config","data","dataKey","nameKey","aspectRatio","secondaryKeys","secondaryFormatter","secondarySeparator","showTooltip","showLegend","legendPos","tooltipContent","animate","animationDuration","animationBegin","animationEasing","props","ref","animation","resolveAnimation","seriesData","label","_a","legendPayload","seen","legendChartId","legendRow","ChartStyle","ChartLegendContent","ChartContainer","RechartsTreemap","ChartTooltip","ChartTooltipContent"],"mappings":"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"}