@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/tooltip/tooltip.js

@@ -1,58 +1,36 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as u from "react";
-import { Tooltip as o } from "@base-ui/react/tooltip";
-import { cn as v } from "../../../lib/utils.js";
-import { usePortalContainer as x } from "../../../lib/portal-container.js";
-function C(i) {
-  return /* @__PURE__ */ t(o.Provider, { delay: 300, ...i });
+import { cn as e } from "../../../lib/utils.js";
+import { usePortalContainer as t } from "../../../lib/portal-container.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Tooltip as i } from "@base-ui/react/tooltip";
+//#region src/components/ui/tooltip/tooltip.tsx
+function a(e) {
+	return /* @__PURE__ */ r(i.Provider, {
+		delay: 300,
+		...e
+	});
 }
-const h = o.Root, y = o.Trigger, f = u.forwardRef(
-  ({
-    className: i,
-    sideOffset: r = 6,
-    side: n = "top",
-    align: e = "center",
-    anchor: a,
-    portalContainer: l,
-    keepMounted: p,
-    ...c
-  }, d) => {
-    const m = x(), s = l ?? m;
-    return /* @__PURE__ */ t(
-      o.Portal,
-      {
-        container: s,
-        keepMounted: p,
-        children: /* @__PURE__ */ t(
-          o.Positioner,
-          {
-            sideOffset: r,
-            side: n,
-            align: e,
-            anchor: a,
-            className: "z-50",
-            children: /* @__PURE__ */ t(
-              o.Popup,
-              {
-                ref: d,
-                className: v(
-                  "max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]",
-                  i
-                ),
-                ...c
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-f.displayName = "TooltipContent";
-export {
-  h as Tooltip,
-  f as TooltipContent,
-  C as TooltipProvider,
-  y as TooltipTrigger
-};
-//# sourceMappingURL=tooltip.js.map
+var o = i.Root, s = i.Trigger, c = n.forwardRef(({ className: n, sideOffset: a = 6, side: o = "top", align: s = "center", anchor: c, portalContainer: l, keepMounted: u, ...d }, f) => {
+	let p = t(), m = l ?? p;
+	return /* @__PURE__ */ r(i.Portal, {
+		container: m,
+		keepMounted: u,
+		children: /* @__PURE__ */ r(i.Positioner, {
+			sideOffset: a,
+			side: o,
+			align: s,
+			anchor: c,
+			className: "z-50",
+			children: /* @__PURE__ */ r(i.Popup, {
+				ref: f,
+				className: e("max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]", n),
+				...d
+			})
+		})
+	});
+});
+c.displayName = "TooltipContent";
+//#endregion
+export { o as Tooltip, c as TooltipContent, a as TooltipProvider, s as TooltipTrigger };
+
+//# sourceMappingURL=tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A contextual hint shown on hover/focus of its trigger. Wraps the Base UI\n// Tooltip primitive; the popup is themed with the `--ui-tooltip-*` token tier\n// (a dark, ~90%-opaque bubble with a light label, 12/8px padding, 4px radius,\n// 48–256px width). No arrow — matching the Figma design. Wrap the whole app (or\n// a region) in `TooltipProvider` to share open/close delays across tooltips.\n\nfunction TooltipProvider(props: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return <TooltipPrimitive.Provider delay={300} {...props} />;\n}\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Popup> & {\n    sideOffset?: number;\n    side?: TooltipPrimitive.Positioner.Props['side'];\n    align?: TooltipPrimitive.Positioner.Props['align'];\n    /**\n     * Override what the popup is positioned against — defaults to the\n     * `TooltipTrigger` element. Useful when the hover/focus trigger is\n     * narrower than the element the tooltip should visually align to (e.g. a\n     * truncating label inside a full-width row, where the tooltip should\n     * anchor to the row's edge, not the label's).\n     */\n    anchor?: TooltipPrimitive.Positioner.Props['anchor'];\n    portalContainer?: TooltipPrimitive.Portal.Props['container'];\n    keepMounted?: TooltipPrimitive.Portal.Props['keepMounted'];\n  }\n>(\n  (\n    {\n      className,\n      sideOffset = 6,\n      side = 'top',\n      align = 'center',\n      anchor,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <TooltipPrimitive.Portal\n      container={resolvedContainer}\n      keepMounted={keepMounted}\n    >\n      <TooltipPrimitive.Positioner\n        sideOffset={sideOffset}\n        side={side}\n        align={align}\n        anchor={anchor}\n        className=\"z-50\"\n      >\n        <TooltipPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]',\n            className\n          )}\n          {...props}\n        />\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n    );\n  }\n);\nTooltipContent.displayName = 'TooltipContent';\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipProvider","props","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","React","className","sideOffset","side","align","anchor","portalContainer","keepMounted","ref","ctxContainer","usePortalContainer","resolvedContainer","jsx","cn"],"mappings":";;;;;AAYA,SAASA,EAAgBC,GAA+D;AACtF,2BAAQC,EAAiB,UAAjB,EAA0B,OAAO,KAAM,GAAGD,GAAO;AAC3D;AAEA,MAAME,IAAUD,EAAiB,MAE3BE,IAAiBF,EAAiB,SAElCG,IAAiBC,EAAM;AAAA,EAkB3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGZ;AAAA,EAAA,GAELa,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBL,KAAmBG;AAE7C,WACA,gBAAAG;AAAA,MAAChB,EAAiB;AAAA,MAAjB;AAAA,QACC,WAAWe;AAAA,QACX,aAAAJ;AAAA,QAEA,UAAA,gBAAAK;AAAA,UAAChB,EAAiB;AAAA,UAAjB;AAAA,YACC,YAAAM;AAAA,YACA,MAAAC;AAAA,YACA,OAAAC;AAAA,YACA,QAAAC;AAAA,YACA,WAAU;AAAA,YAEV,UAAA,gBAAAO;AAAA,cAAChB,EAAiB;AAAA,cAAjB;AAAA,gBACC,KAAAY;AAAA,gBACA,WAAWK;AAAA,kBACT;AAAA,kBACAZ;AAAA,gBAAA;AAAA,gBAED,GAAGN;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGJ;AACF;AACAI,EAAe,cAAc;"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A contextual hint shown on hover/focus of its trigger. Wraps the Base UI\n// Tooltip primitive; the popup is themed with the `--ui-tooltip-*` token tier\n// (a dark, ~90%-opaque bubble with a light label, 12/8px padding, 4px radius,\n// 48–256px width). No arrow — matching the Figma design. Wrap the whole app (or\n// a region) in `TooltipProvider` to share open/close delays across tooltips.\n\nfunction TooltipProvider(props: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return <TooltipPrimitive.Provider delay={300} {...props} />;\n}\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Popup> & {\n    sideOffset?: number;\n    side?: TooltipPrimitive.Positioner.Props['side'];\n    align?: TooltipPrimitive.Positioner.Props['align'];\n    /**\n     * Override what the popup is positioned against — defaults to the\n     * `TooltipTrigger` element. Useful when the hover/focus trigger is\n     * narrower than the element the tooltip should visually align to (e.g. a\n     * truncating label inside a full-width row, where the tooltip should\n     * anchor to the row's edge, not the label's).\n     */\n    anchor?: TooltipPrimitive.Positioner.Props['anchor'];\n    portalContainer?: TooltipPrimitive.Portal.Props['container'];\n    keepMounted?: TooltipPrimitive.Portal.Props['keepMounted'];\n  }\n>(\n  (\n    {\n      className,\n      sideOffset = 6,\n      side = 'top',\n      align = 'center',\n      anchor,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <TooltipPrimitive.Portal\n      container={resolvedContainer}\n      keepMounted={keepMounted}\n    >\n      <TooltipPrimitive.Positioner\n        sideOffset={sideOffset}\n        side={side}\n        align={align}\n        anchor={anchor}\n        className=\"z-50\"\n      >\n        <TooltipPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]',\n            className\n          )}\n          {...props}\n        />\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n    );\n  }\n);\nTooltipContent.displayName = 'TooltipContent';\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;;;;AAYA,SAAS,EAAgB,GAA+D;CACtF,OAAO,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;EAAK,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAM,IAAU,EAAiB,MAE3B,IAAiB,EAAiB,SAElC,IAAiB,EAAM,YAmBzB,EACE,cACA,gBAAa,GACb,UAAO,OACP,WAAQ,UACR,WACA,oBACA,gBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAe,EAAmB,GAClC,IAAoB,KAAmB;CAE7C,OACA,kBAAC,EAAiB,QAAlB;EACE,WAAW;EACE;EAEb,UAAA,kBAAC,EAAiB,YAAlB;GACc;GACN;GACC;GACC;GACR,WAAU;GAEV,UAAA,kBAAC,EAAiB,OAAlB;IACO;IACL,WAAW,EACT,mVACA,CACF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE3B,CACF;AACA,EAAe,cAAc"}

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

@@ -1,216 +1,138 @@
-import { jsxs as I, jsx as e } from "react/jsx-runtime";
-import * as E from "react";
-import { Treemap as Y } from "recharts";
-import { cn as b } from "../../../lib/utils.js";
-import { resolveAnimation as k, CHART_LABEL_FONT_SIZE as w } from "../chart/chart-format.js";
-import { ChartStyle as z, resolveChartColors as F, ChartLegendContent as P, ChartContainer as U, ChartTooltip as Z, ChartTooltipContent as X } from "../chart/chart.js";
-import { CHART_DEFAULT_PALETTE as q } from "../chart/chart-palette.js";
-const T = 2, J = 6, Q = 12, g = 4 / 3, V = 11, y = Math.ceil(w * g), K = Math.ceil(
-  V * g
-), tt = 64, S = Q * 2 + y, et = S + K;
-function rt(L) {
-  const { row: o, keys: l, separator: s, formatter: n } = L, t = l.flatMap((i, _) => {
-    const a = o[i];
-    if (a == null || a === "") return [];
-    const r = n ? n(a, _) : String(a);
-    return r === "" ? [] : [r];
-  });
-  return t.length ? t.join(s) : void 0;
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { CHART_DEFAULT_PALETTE as t } from "../chart/chart-palette.js";
+import { ChartContainer as n, ChartLegendContent as r, ChartStyle as i, ChartTooltip as a, ChartTooltipContent as o, resolveChartColors as s } from "../chart/chart.js";
+import { resolveAnimation as c } from "../chart/chart-format.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Treemap as f } from "recharts";
+//#region src/components/ui/treemap/treemap.tsx
+var p = 2, m = 6, h = 4 / 3, g = 11, _ = Math.ceil(12 * h), v = Math.ceil(g * h), y = 64, b = 24 + _, x = b + v;
+function S(e) {
+	let { row: t, keys: n, separator: r, formatter: i } = e, a = n.flatMap((e, n) => {
+		let r = t[e];
+		if (r == null || r === "") return [];
+		let a = i ? i(r, n) : String(r);
+		return a === "" ? [] : [a];
+	});
+	return a.length ? a.join(r) : void 0;
 }
-const ot = {
-  "bottom-start": "justify-end text-start",
-  "top-start": "justify-start text-start",
-  center: "justify-center text-center"
+var C = {
+	"bottom-start": "justify-end text-start",
+	"top-start": "justify-start text-start",
+	center: "justify-center text-center"
 };
-function nt({
-  x: L = 0,
-  y: o = 0,
-  width: l = 0,
-  height: s = 0,
-  name: n,
-  primaryLabel: t,
-  secondaryLabel: i,
-  showLabels: _ = !0,
-  labelAlign: a = "bottom-start"
-}) {
-  if (!n) return /* @__PURE__ */ e("g", {});
-  const r = L + T, x = o + T, c = Math.max(0, l - T * 2), m = Math.max(0, s - T * 2), p = _ && c > tt && m >= S, f = p && i && m >= et ? i : void 0;
-  return /* @__PURE__ */ I("g", { children: [
-    /* @__PURE__ */ e(
-      "rect",
-      {
-        x: r,
-        y: x,
-        width: c,
-        height: m,
-        rx: J,
-        style: { fill: `var(--color-${n})` }
-      }
-    ),
-    p && // Decorative: the hover that opens the tooltip belongs to the tile, so the
-    // label must not swallow it.
-    /* @__PURE__ */ e(
-      "foreignObject",
-      {
-        x: r,
-        y: x,
-        width: c,
-        height: m,
-        className: "pointer-events-none",
-        children: /* @__PURE__ */ I(
-          "div",
-          {
-            className: b(
-              // 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)]",
-              ot[a]
-            ),
-            children: [
-              /* @__PURE__ */ e("span", { className: "truncate text-xs font-semibold", children: t ?? n }),
-              f && /* @__PURE__ */ e("span", { className: "truncate text-[11px]", children: f })
-            ]
-          }
-        )
-      }
-    )
-  ] });
+function w({ x: t = 0, y: n = 0, width: r = 0, height: i = 0, name: a, primaryLabel: o, secondaryLabel: s, showLabels: c = !0, labelAlign: l = "bottom-start" }) {
+	if (!a) return /* @__PURE__ */ u("g", {});
+	let f = t + p, h = n + p, g = Math.max(0, r - 4), _ = Math.max(0, i - 4), v = c && g > y && _ >= b, S = v && s && _ >= x ? s : void 0;
+	return /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("rect", {
+		x: f,
+		y: h,
+		width: g,
+		height: _,
+		rx: m,
+		style: { fill: `var(--color-${a})` }
+	}), v && /* @__PURE__ */ u("foreignObject", {
+		x: f,
+		y: h,
+		width: g,
+		height: _,
+		className: "pointer-events-none",
+		children: /* @__PURE__ */ d("div", {
+			className: e("flex size-full flex-col overflow-hidden p-3", "text-[var(--ui-text-on-status-strong-neutral)]", C[l]),
+			children: [/* @__PURE__ */ u("span", {
+				className: "truncate text-xs font-semibold",
+				children: o ?? a
+			}), S && /* @__PURE__ */ u("span", {
+				className: "truncate text-[11px]",
+				children: S
+			})]
+		})
+	})] });
 }
-const at = E.forwardRef(
-  ({
-    className: L,
-    config: o,
-    palette: l,
-    data: s,
-    dataKey: n,
-    nameKey: t,
-    aspectRatio: i = 4 / 3,
-    showLabels: _ = !0,
-    labelAlign: a = "bottom-start",
-    secondaryKeys: r,
-    secondaryFormatter: x,
-    secondarySeparator: c = " · ",
-    showTooltip: m = !0,
-    showLegend: p = !1,
-    legendPos: f = "bottom",
-    tooltipContent: M,
-    animate: R,
-    animationDuration: D,
-    animationBegin: G,
-    animationEasing: j,
-    ...O
-  }, B) => {
-    const $ = k({
-      animate: R,
-      animationDuration: D,
-      animationBegin: G,
-      animationEasing: j
-    }), N = E.useMemo(
-      () => s.map((h) => {
-        var H;
-        const u = String(h[t]), d = r != null && r.length ? rt({
-          row: h,
-          keys: r,
-          separator: c,
-          formatter: x
-        }) : void 0, v = (H = o[u]) == null ? void 0 : H.label;
-        return {
-          ...h,
-          fill: `var(--color-${u})`,
-          ...typeof v == "string" ? { primaryLabel: v } : {},
-          ...d ? { secondaryLabel: d } : {}
-        };
-      }),
-      [
-        o,
-        s,
-        t,
-        x,
-        r,
-        c
-      ]
-    ), W = E.useMemo(() => {
-      const h = /* @__PURE__ */ new Set();
-      return N.flatMap((u) => {
-        const d = String(u[t]);
-        return h.has(d) ? [] : (h.add(d), [
-          {
-            value: d,
-            dataKey: t,
-            type: "rect",
-            color: String(u.fill),
-            payload: u
-          }
-        ]);
-      });
-    }, [t, N]), C = `chart-${E.useId().replace(/:/g, "")}`, A = p ? /* @__PURE__ */ I("div", { "data-chart": C, className: "text-xs", children: [
-      /* @__PURE__ */ e(
-        z,
-        {
-          id: C,
-          config: F(o, l ?? q)
-        }
-      ),
-      /* @__PURE__ */ e(
-        P,
-        {
-          config: o,
-          payload: W,
-          verticalAlign: f,
-          nameKey: t
-        }
-      )
-    ] }) : null;
-    return /* @__PURE__ */ I(
-      "div",
-      {
-        ref: B,
-        className: b(p && "flex flex-col", L),
-        ...O,
-        children: [
-          f === "top" && A,
-          /* @__PURE__ */ e(
-            U,
-            {
-              config: o,
-              palette: l,
-              className: p ? "min-h-0 w-full flex-1" : "size-full",
-              children: /* @__PURE__ */ e(
-                Y,
-                {
-                  data: N,
-                  dataKey: n,
-                  nameKey: t,
-                  aspectRatio: i,
-                  ...$,
-                  content: /* @__PURE__ */ e(nt, { showLabels: _, labelAlign: a }),
-                  children: m && /* @__PURE__ */ e(
-                    Z,
-                    {
-                      content: M ?? /* @__PURE__ */ e(X, { nameKey: t, hideLabel: !0 })
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          f === "bottom" && A
-        ]
-      }
-    );
-  }
-);
-at.displayName = "Treemap";
-export {
-  at as Treemap,
-  nt as TreemapCell,
-  rt as treemapSecondaryLabel
-};
-//# sourceMappingURL=treemap.js.map
+var T = l.forwardRef(({ className: p, config: m, palette: h, data: g, dataKey: _, nameKey: v, aspectRatio: y = 4 / 3, showLabels: b = !0, labelAlign: x = "bottom-start", secondaryKeys: C, secondaryFormatter: T, secondarySeparator: E = " · ", showTooltip: D = !0, showLegend: O = !1, legendPos: k = "bottom", tooltipContent: A, animate: j, animationDuration: M, animationBegin: N, animationEasing: P, ...F }, I) => {
+	let L = c({
+		animate: j,
+		animationDuration: M,
+		animationBegin: N,
+		animationEasing: P
+	}), R = l.useMemo(() => g.map((e) => {
+		let t = String(e[v]), n = C?.length ? S({
+			row: e,
+			keys: C,
+			separator: E,
+			formatter: T
+		}) : void 0, r = m[t]?.label;
+		return {
+			...e,
+			fill: `var(--color-${t})`,
+			...typeof r == "string" ? { primaryLabel: r } : {},
+			...n ? { secondaryLabel: n } : {}
+		};
+	}), [
+		m,
+		g,
+		v,
+		T,
+		C,
+		E
+	]), z = l.useMemo(() => {
+		let e = /* @__PURE__ */ new Set();
+		return R.flatMap((t) => {
+			let n = String(t[v]);
+			return e.has(n) ? [] : (e.add(n), [{
+				value: n,
+				dataKey: v,
+				type: "rect",
+				color: String(t.fill),
+				payload: t
+			}]);
+		});
+	}, [v, R]), B = `chart-${l.useId().replace(/:/g, "")}`, V = O ? /* @__PURE__ */ d("div", {
+		"data-chart": B,
+		className: "text-xs",
+		children: [/* @__PURE__ */ u(i, {
+			id: B,
+			config: s(m, h ?? t)
+		}), /* @__PURE__ */ u(r, {
+			config: m,
+			payload: z,
+			verticalAlign: k,
+			nameKey: v
+		})]
+	}) : null;
+	return /* @__PURE__ */ d("div", {
+		ref: I,
+		className: e(O && "flex flex-col", p),
+		...F,
+		children: [
+			k === "top" && V,
+			/* @__PURE__ */ u(n, {
+				config: m,
+				palette: h,
+				className: O ? "min-h-0 w-full flex-1" : "size-full",
+				children: /* @__PURE__ */ u(f, {
+					data: R,
+					dataKey: _,
+					nameKey: v,
+					aspectRatio: y,
+					...L,
+					content: /* @__PURE__ */ u(w, {
+						showLabels: b,
+						labelAlign: x
+					}),
+					children: D && /* @__PURE__ */ u(a, { content: A ?? /* @__PURE__ */ u(o, {
+						nameKey: v,
+						hideLabel: !0
+					}) })
+				})
+			}),
+			k === "bottom" && V
+		]
+	});
+});
+T.displayName = "Treemap";
+//#endregion
+export { T as Treemap, w as TreemapCell, S 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';\nimport type { LegendPayload } from 'recharts/types/component/DefaultLegendContent';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegendContent,\n  ChartStyle,\n  resolveChartColors,\n  CHART_DEFAULT_PALETTE,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  CHART_LABEL_FONT_SIZE,\n  type ChartConfig,\n  type ChartPalette,\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   * 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 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      palette,\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\n          id={legendChartId}\n          config={resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE)}\n        />\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          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"],"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","palette","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","resolveChartColors","CHART_DEFAULT_PALETTE","ChartLegendContent","ChartContainer","RechartsTreemap","ChartTooltip","ChartTooltipContent"],"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  CHART_DEFAULT_PALETTE,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  CHART_LABEL_FONT_SIZE,\n  type ChartConfig,\n  type ChartPalette,\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   * 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 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      palette,\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\n          id={legendChartId}\n          config={resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE)}\n        />\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          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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"}