@acronis-platform/ui-react 5.2.0 → 5.3.1

package/dist/components/ui/table/table-view-options.js

@@ -1,38 +1,93 @@
-import { ButtonIcon as e } from "../button-icon/button-icon.js";
-import { Button as t } from "../button/button.js";
-import { Checkbox as n } from "../checkbox/checkbox.js";
-import { DropdownMenu as r, DropdownMenuContent as i, DropdownMenuGroup as a, DropdownMenuItem as o, DropdownMenuTrigger as s } from "../dropdown-menu/dropdown-menu.js";
-import "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { CogIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as e } from "../../../lib/utils.js";
+import { ButtonIcon as t } from "../button-icon/button-icon.js";
+import { Button as n } from "../button/button.js";
+import { InputSelectSearch as r } from "../input-select/input-select.js";
+import { Checkbox as i } from "../checkbox/checkbox.js";
+import { DropdownMenu as a, DropdownMenuContent as o, DropdownMenuGroup as s, DropdownMenuItem as c, DropdownMenuTrigger as l } from "../dropdown-menu/dropdown-menu.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { CogIcon as p } from "@acronis-platform/icons-react/stroke-mono";
 //#region src/components/ui/table/table-view-options.tsx
-function d({ columns: d, onToggle: f, triggerLabel: p = "View", iconOnly: m = !1, triggerAriaLabel: h = "Column settings" }) {
-	return /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ l(s, {
-		render: m ? /* @__PURE__ */ c(e, { "aria-label": h }) : /* @__PURE__ */ c(t, {
-			variant: "secondary",
-			className: "h-8 shrink-0 gap-2"
-		}),
-		children: [/* @__PURE__ */ c(u, {}), !m && p]
-	}), /* @__PURE__ */ c(i, {
-		align: "end",
-		className: "w-[150px]",
-		children: /* @__PURE__ */ c(a, { children: d.map((e) => /* @__PURE__ */ l(o, {
-			role: "menuitemcheckbox",
-			"aria-checked": !e.hidden,
-			closeOnClick: !1,
-			onClick: () => f(e.id),
-			className: "items-center",
-			children: [/* @__PURE__ */ c(n, {
-				checked: !e.hidden,
-				"aria-hidden": !0,
-				tabIndex: -1,
-				className: "pointer-events-none"
-			}), e.label]
-		}, e.id)) })
-	})] });
+function m(e) {
+	let t = /* @__PURE__ */ new Map();
+	return e.forEach((e) => {
+		let n = t.get(e.category);
+		n ? n.push(e) : t.set(e.category, [e]);
+	}), Array.from(t, ([e, t]) => ({
+		category: e,
+		columns: t
+	}));
 }
-d.displayName = "TableViewOptions";
+function h({ columns: h, onToggle: g, triggerLabel: _ = "View", iconOnly: v = !1, triggerAriaLabel: y = "Column settings", searchPlaceholder: b = "Search columns", showAllLabel: x = "Show all", noResultsLabel: S = "No columns found." }) {
+	let [C, w] = u.useState(""), T = u.useId(), E = C.trim().toLocaleLowerCase(), D = u.useMemo(() => m(h).map((e) => ({
+		...e,
+		visibleColumns: E ? e.columns.filter((e) => e.label.toLocaleLowerCase().includes(E)) : e.columns
+	})).filter((e) => e.visibleColumns.length > 0), [h, E]);
+	return /* @__PURE__ */ f(a, {
+		onOpenChange: (e) => !e && w(""),
+		children: [/* @__PURE__ */ f(l, {
+			render: v ? /* @__PURE__ */ d(t, { "aria-label": y }) : /* @__PURE__ */ d(n, {
+				variant: "secondary",
+				className: "h-8 shrink-0 gap-2"
+			}),
+			children: [/* @__PURE__ */ d(p, {}), !v && _]
+		}), /* @__PURE__ */ f(o, {
+			align: "end",
+			className: "max-h-[var(--available-height)] w-[300px] gap-0 rounded-[var(--ui-input-select-dropdown-container-border-radius)] border-[length:var(--ui-input-select-dropdown-container-border-width)] border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] px-[var(--ui-input-select-dropdown-container-padding-x)] py-[var(--ui-input-select-dropdown-container-padding-y)]",
+			children: [/* @__PURE__ */ d("div", {
+				className: "border-b border-[var(--ui-input-select-dropdown-section-container-border-color)]",
+				children: /* @__PURE__ */ d(r, {
+					"aria-label": b,
+					placeholder: b,
+					value: C,
+					onChange: (e) => w(e.currentTarget.value)
+				})
+			}), D.length > 0 ? D.map((t, r) => {
+				let a = t.category ? `${T}-group-${r}` : void 0, o = t.category ? `${T}-show-all-${r}` : void 0;
+				return /* @__PURE__ */ f(s, {
+					"aria-labelledby": a,
+					className: e("gap-[var(--ui-input-select-dropdown-section-list-gap)] overflow-visible px-0 py-[var(--ui-input-select-dropdown-section-container-padding-y)]", r === 0 ? "[&:not(:first-child)]:border-t-0" : "[&:not(:first-child)]:border-t-[length:var(--ui-input-select-dropdown-section-container-border-width)] [&:not(:first-child)]:border-[var(--ui-input-select-dropdown-section-container-border-color)]"),
+					children: [t.category && /* @__PURE__ */ f("div", {
+						className: "flex w-full items-center justify-between px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)]",
+						children: [/* @__PURE__ */ d("span", {
+							id: a,
+							className: "text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]",
+							children: t.category
+						}), /* @__PURE__ */ d(n, {
+							variant: "ghost",
+							className: "ms-auto h-6 shrink-0",
+							"aria-labelledby": `${o} ${a}`,
+							onClick: () => {
+								t.columns.filter((e) => e.hidden).forEach((e) => g(e.id));
+							},
+							children: /* @__PURE__ */ d("span", {
+								id: o,
+								children: x
+							})
+						})]
+					}), t.visibleColumns.map((e) => /* @__PURE__ */ f(c, {
+						role: "menuitemcheckbox",
+						"aria-checked": !e.hidden,
+						closeOnClick: !1,
+						onClick: () => g(e.id),
+						className: "min-h-[var(--ui-input-select-dropdown-item-global-container-height)] items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] font-normal text-[var(--ui-input-select-dropdown-item-global-label-color)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)] data-[highlighted]:active:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
+						children: [/* @__PURE__ */ d(i, {
+							checked: !e.hidden,
+							"aria-hidden": !0,
+							tabIndex: -1,
+							className: "pointer-events-none"
+						}), e.label]
+					}, e.id))]
+				}, t.category ?? "__uncategorized");
+			}) : /* @__PURE__ */ d("div", {
+				className: "px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]",
+				children: S
+			})]
+		})]
+	});
+}
+h.displayName = "TableViewOptions";
 //#endregion
-export { d as TableViewOptions };
+export { h as TableViewOptions };
 
 //# sourceMappingURL=table-view-options.js.map

package/dist/components/ui/table/table-view-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-view-options.js","names":[],"sources":["../../../../src/components/ui/table/table-view-options.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Checkbox } from '../checkbox';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\nexport interface TableColumnVisibility {\n  /** Stable column identifier. */\n  id: string;\n  /** Human-readable label shown in the menu. */\n  label: string;\n  /** Whether the column is currently hidden. */\n  hidden: boolean;\n}\n\nexport interface TableViewOptionsProps {\n  /** The toggleable columns and their current visibility. */\n  columns: TableColumnVisibility[];\n  /** Invoked with the column id whose visibility was toggled. */\n  onToggle: (id: string) => void;\n  /** Trigger label. Defaults to `View`. Ignored when `iconOnly`. */\n  triggerLabel?: React.ReactNode;\n  /**\n   * Render the trigger as a cog-only icon button instead of a labelled\n   * `Button` — the shape that fits the 48px `TableSettingsCell` column.\n   */\n  iconOnly?: boolean;\n  /** Accessible name of the `iconOnly` trigger. Override to localize. */\n  triggerAriaLabel?: string;\n}\n\n// TanStack-independent show/hide-columns dropdown extracted from\n// `DataTableViewOptions`'s UI. Driven by a plain `{ id, label, hidden }[]` +\n// `onToggle`, so it pairs with the `Table` primitives; `DataTableViewOptions`\n// can later become a thin TanStack adapter over this part.\n//\n// Each row shows a real `Checkbox` box beside the column name, per the design.\n// That box is presentation only (`aria-hidden`, not focusable, click-through):\n// the accessible control is the `menuitemcheckbox` row itself, which carries\n// `aria-checked` and the click handler.\nfunction TableViewOptions({\n  columns,\n  onToggle,\n  triggerLabel = 'View',\n  iconOnly = false,\n  triggerAriaLabel = 'Column settings',\n}: TableViewOptionsProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          iconOnly ? (\n            <ButtonIcon aria-label={triggerAriaLabel} />\n          ) : (\n            <Button variant=\"secondary\" className=\"h-8 shrink-0 gap-2\" />\n          )\n        }\n      >\n        <CogIcon />\n        {!iconOnly && triggerLabel}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n        <DropdownMenuGroup>\n          {columns.map((column) => (\n            <DropdownMenuItem\n              key={column.id}\n              role=\"menuitemcheckbox\"\n              aria-checked={!column.hidden}\n              closeOnClick={false}\n              onClick={() => onToggle(column.id)}\n              className=\"items-center\"\n            >\n              <Checkbox\n                checked={!column.hidden}\n                aria-hidden\n                tabIndex={-1}\n                className=\"pointer-events-none\"\n              />\n              {column.label}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\nTableViewOptions.displayName = 'TableViewOptions';\n\nexport { TableViewOptions };\n"],"mappings":";;;;;;;;AAgDA,SAAS,EAAiB,EACxB,YACA,aACA,kBAAe,QACf,cAAW,IACX,sBAAmB,qBACK;CACxB,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,QACE,IACE,kBAAC,GAAD,EAAY,cAAY,EAAmB,CAAA,IAE3C,kBAAC,GAAD;GAAQ,SAAQ;GAAY,WAAU;EAAsB,CAAA;EALlE,UAAA,CASE,kBAAC,GAAD,CAAU,CAAA,GACT,CAAC,KAAY,CACK;CACrB,CAAA,GAAA,kBAAC,GAAD;EAAqB,OAAM;EAAM,WAAU;EACzC,UAAA,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAEE,MAAK;GACL,gBAAc,CAAC,EAAO;GACtB,cAAc;GACd,eAAe,EAAS,EAAO,EAAE;GACjC,WAAU;GANZ,UAAA,CAQE,kBAAC,GAAD;IACE,SAAS,CAAC,EAAO;IACjB,eAAA;IACA,UAAU;IACV,WAAU;GACX,CAAA,GACA,EAAO,KACQ;EAdX,GAAA,EAAO,EAcI,CACnB,EACgB,CAAA;CACA,CAAA,CACT,EAAA,CAAA;AAElB;AACA,EAAiB,cAAc"}
+{"version":3,"file":"table-view-options.js","names":[],"sources":["../../../../src/components/ui/table/table-view-options.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Checkbox } from '../checkbox';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\nimport { InputSelectSearch } from '../input-select';\n\nexport interface TableColumnVisibility {\n  /** Stable column identifier. */\n  id: string;\n  /** Human-readable label shown in the menu. */\n  label: string;\n  /** Whether the column is currently hidden. */\n  hidden: boolean;\n  /** Optional section name used to group related columns in the dropdown. */\n  category?: string;\n}\n\nexport interface TableViewOptionsProps {\n  /** The toggleable columns and their current visibility. */\n  columns: TableColumnVisibility[];\n  /** Invoked with the column id whose visibility was toggled. */\n  onToggle: (id: string) => void;\n  /** Trigger label. Defaults to `View`. Ignored when `iconOnly`. */\n  triggerLabel?: React.ReactNode;\n  /**\n   * Render the trigger as a cog-only icon button instead of a labelled\n   * `Button` — the shape that fits the 48px `TableSettingsCell` column.\n   */\n  iconOnly?: boolean;\n  /** Accessible name of the `iconOnly` trigger. Override to localize. */\n  triggerAriaLabel?: string;\n  /** Placeholder and accessible name of the column filter. */\n  searchPlaceholder?: string;\n  /** Label of the action that reveals every column in a category. */\n  showAllLabel?: React.ReactNode;\n  /** Empty state shown when no column matches the search query. */\n  noResultsLabel?: React.ReactNode;\n}\n\ninterface ColumnGroup {\n  category?: string;\n  columns: TableColumnVisibility[];\n}\n\nfunction groupColumns(columns: TableColumnVisibility[]): ColumnGroup[] {\n  const groups = new Map<string | undefined, TableColumnVisibility[]>();\n\n  columns.forEach((column) => {\n    const group = groups.get(column.category);\n    if (group) {\n      group.push(column);\n    } else {\n      groups.set(column.category, [column]);\n    }\n  });\n\n  return Array.from(groups, ([category, groupedColumns]) => ({\n    category,\n    columns: groupedColumns,\n  }));\n}\n\n// TanStack-independent show/hide-columns dropdown extracted from\n// `DataTableViewOptions`'s UI. Driven by a plain `{ id, label, hidden }[]` +\n// `onToggle`, so it pairs with the `Table` primitives; `DataTableViewOptions`\n// can later become a thin TanStack adapter over this part.\n//\n// Each row shows a real `Checkbox` box beside the column name, per the design.\n// That box is presentation only (`aria-hidden`, not focusable, click-through):\n// the accessible control is the `menuitemcheckbox` row itself, which carries\n// `aria-checked` and the click handler.\n//\n// Although this is behaviorally a menu, its visual design is the multiple-value\n// InputSelect dropdown: a filter row, optional named sections with per-section\n// \"show all\" actions, and neutral regular-weight checkbox rows. Keep the Base UI\n// Menu semantics while reusing that generated token tier for presentation.\nfunction TableViewOptions({\n  columns,\n  onToggle,\n  triggerLabel = 'View',\n  iconOnly = false,\n  triggerAriaLabel = 'Column settings',\n  searchPlaceholder = 'Search columns',\n  showAllLabel = 'Show all',\n  noResultsLabel = 'No columns found.',\n}: TableViewOptionsProps) {\n  const [query, setQuery] = React.useState('');\n  const groupIdPrefix = React.useId();\n  const normalizedQuery = query.trim().toLocaleLowerCase();\n  const groups = React.useMemo(\n    () =>\n      groupColumns(columns)\n        .map((group) => ({\n          ...group,\n          visibleColumns: normalizedQuery\n            ? group.columns.filter((column) =>\n                column.label.toLocaleLowerCase().includes(normalizedQuery)\n              )\n            : group.columns,\n        }))\n        .filter((group) => group.visibleColumns.length > 0),\n    [columns, normalizedQuery]\n  );\n\n  return (\n    <DropdownMenu onOpenChange={(open) => !open && setQuery('')}>\n      <DropdownMenuTrigger\n        render={\n          iconOnly ? (\n            <ButtonIcon aria-label={triggerAriaLabel} />\n          ) : (\n            <Button variant=\"secondary\" className=\"h-8 shrink-0 gap-2\" />\n          )\n        }\n      >\n        <CogIcon />\n        {!iconOnly && triggerLabel}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align=\"end\"\n        className=\"max-h-[var(--available-height)] w-[300px] gap-0 rounded-[var(--ui-input-select-dropdown-container-border-radius)] border-[length:var(--ui-input-select-dropdown-container-border-width)] border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] px-[var(--ui-input-select-dropdown-container-padding-x)] py-[var(--ui-input-select-dropdown-container-padding-y)]\"\n      >\n        <div className=\"border-b border-[var(--ui-input-select-dropdown-section-container-border-color)]\">\n          <InputSelectSearch\n            aria-label={searchPlaceholder}\n            placeholder={searchPlaceholder}\n            value={query}\n            onChange={(event) => setQuery(event.currentTarget.value)}\n          />\n        </div>\n        {groups.length > 0 ? (\n          groups.map((group, groupIndex) => {\n            const groupLabelId = group.category\n              ? `${groupIdPrefix}-group-${groupIndex}`\n              : undefined;\n            const showAllLabelId = group.category\n              ? `${groupIdPrefix}-show-all-${groupIndex}`\n              : undefined;\n\n            return (\n              <DropdownMenuGroup\n                key={group.category ?? '__uncategorized'}\n                aria-labelledby={groupLabelId}\n                className={cn(\n                  'gap-[var(--ui-input-select-dropdown-section-list-gap)] overflow-visible px-0 py-[var(--ui-input-select-dropdown-section-container-padding-y)]',\n                  groupIndex === 0\n                    ? '[&:not(:first-child)]:border-t-0'\n                    : '[&:not(:first-child)]:border-t-[length:var(--ui-input-select-dropdown-section-container-border-width)] [&:not(:first-child)]:border-[var(--ui-input-select-dropdown-section-container-border-color)]'\n                )}\n              >\n                {group.category && (\n                  <div className=\"flex w-full items-center justify-between px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)]\">\n                    <span\n                      id={groupLabelId}\n                      className=\"text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]\"\n                    >\n                      {group.category}\n                    </span>\n                    <Button\n                      variant=\"ghost\"\n                      className=\"ms-auto h-6 shrink-0\"\n                      aria-labelledby={`${showAllLabelId} ${groupLabelId}`}\n                      onClick={() => {\n                        group.columns\n                          .filter((column) => column.hidden)\n                          .forEach((column) => onToggle(column.id));\n                      }}\n                    >\n                      <span id={showAllLabelId}>{showAllLabel}</span>\n                    </Button>\n                  </div>\n                )}\n                {group.visibleColumns.map((column) => (\n                  <DropdownMenuItem\n                    key={column.id}\n                    role=\"menuitemcheckbox\"\n                    aria-checked={!column.hidden}\n                    closeOnClick={false}\n                    onClick={() => onToggle(column.id)}\n                    className=\"min-h-[var(--ui-input-select-dropdown-item-global-container-height)] items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] font-normal text-[var(--ui-input-select-dropdown-item-global-label-color)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)] data-[highlighted]:active:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]\"\n                  >\n                    <Checkbox\n                      checked={!column.hidden}\n                      aria-hidden\n                      tabIndex={-1}\n                      className=\"pointer-events-none\"\n                    />\n                    {column.label}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            );\n          })\n        ) : (\n          <div className=\"px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]\">\n            {noResultsLabel}\n          </div>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\nTableViewOptions.displayName = 'TableViewOptions';\n\nexport { TableViewOptions };\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives, reconciled against the Table design in the\n// ui-react Figma (canvas 2948-2416; assembled example 4567-6801, part state\n// matrices TableHeaderCell 3427-207 / TableDataCell 4536-97 / TableDataRow\n// 4536-699 / TableSettings 3698-497 / TableActions 4536-414 / TableCheckbox\n// 3698-746). A `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell     -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row      -> --ui-table-global-row-{border-color,border-width,border-style},\n//                 --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • head     -> --ui-table-header-{label-color,gap}, --ui-table-header-cell-color-{idle,hover,active}\n//   • data     -> --ui-table-data-cell-color-{idle,hover,active}, --ui-table-data-value-color-{idle,disabled}\n//   • sort     -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • focus    -> --ui-focus-primary (the kit-wide 3px focus ring, radius/radius-4)\n// Per the design, the header/settings/actions cells tint on hover and press at\n// the *cell* level (not on an inner control), so the interaction tokens sit on\n// the `<th>`/`<td>` and the focus ring is drawn on the cell via `has-[…]`.\n//\n// The design's cell content (tags, status dots, links) stays consumer\n// composition — `--ui-table-global-cell-{tag,icon}-margin-y` and\n// --ui-table-data-gap describe that content's own insets, not a part contract,\n// so no wrapper part is invented for them here.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        // The design documents a keyboard-nav focus state on the row itself\n        // (a ring spanning the full row). Rows aren't focusable by default, so\n        // this only paints once a consumer makes them focusable (`tabIndex`).\n        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return <ArrowUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  if (direction === 'desc') {\n    return <ArrowDownIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-active)]')} />;\n  }\n  return <ArrowsDownUpIcon className={cn(size, 'text-[var(--ui-table-header-sort-icon-color-inactive)]')} />;\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        // Per the design, a sortable header tints the whole cell on hover/press\n        // and draws the focus ring on the cell, not on the inner control.\n        sortable &&\n          'cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] transition-colors [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableSelectCellProps\n  extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the select-all cell of the header row (`<th>`) instead of a row's\n   * selection cell (`<td>`).\n   */\n  header?: boolean;\n}\n\n/**\n * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column\n * holding a label-less `Checkbox`. Only the leading padding is applied, matching\n * the design (16px padding + a 16px box), so the checkbox sits flush against the\n * first data cell.\n */\nconst TableSelectCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableSelectCellProps\n>(({ className, header, ...props }, ref) => {\n  const Comp = header ? 'th' : 'td';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle transition-colors',\n        header\n          ? 'bg-[var(--ui-table-header-cell-color-idle)]'\n          : 'bg-[var(--ui-table-data-cell-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableSelectCell.displayName = 'TableSelectCell';\n\nexport interface TableActionsCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Suppress this row's actions because a selection is in play — the cell\n   * still reserves its 48px column (so the grid doesn't reflow) but renders no\n   * children and no hover/press tint. Per the design, that means any row is\n   * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from\n   * the data-table part) rather than re-deriving the threshold.\n   */\n  bulkSelectionActive?: boolean;\n}\n\n/**\n * The trailing row-actions cell (design part `TableActions`) — a fixed 48px\n * column, end-aligned, holding the consumer's overflow trigger (e.g. a\n * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself\n * carries the hover/press tint and the focus ring, per the design.\n */\nconst TableActionsCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableActionsCellProps\n>(({ className, bulkSelectionActive, children, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]',\n      !bulkSelectionActive &&\n        'rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  >\n    {bulkSelectionActive ? null : children}\n  </td>\n));\nTableActionsCell.displayName = 'TableActionsCell';\n\n/**\n * The trailing header cell holding the column-settings trigger (design part\n * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's\n * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what\n * the trigger opens (a column-visibility menu) is the consumer's choice —\n * `TableViewOptions` is the ready-made one.\n */\nconst TableSettingsCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTableSettingsCell.displayName = 'TableSettingsCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableSelectCell,\n  TableActionsCell,\n  TableSettingsCell,\n  TableCaption,\n};\n"],"mappings":"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"}
+{"version":3,"file":"table.js","names":[],"sources":["../../../../src/components/ui/table/table.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ArrowsDownUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Composable table primitives, reconciled against the Table design in the\n// ui-react Figma (canvas 2948-2416; assembled example 4567-6801, part state\n// matrices TableHeaderCell 3427-207 / TableDataCell 4536-97 / TableDataRow\n// 4536-699 / TableSettings 3698-497 / TableActions 4536-414 / TableCheckbox\n// 3698-746). A `--ui-table-*` token tier already exists, so these parts theme\n// directly from it (imported in styles/index.css):\n//   • cell     -> --ui-table-global-cell-{padding-x,padding-y,min-height}\n//   • row      -> --ui-table-global-row-{border-color,border-width,border-style},\n//                 --ui-table-data-row-color-{idle,hover,active}  (active = selected)\n//   • head     -> --ui-table-header-{label-color,gap}, --ui-table-header-cell-color-{idle,hover,active}\n//   • data     -> --ui-table-data-cell-color-{idle,hover,active}, --ui-table-data-value-color-{idle,disabled}\n//   • sort     -> --ui-table-header-sort-icon-{color-active,color-inactive,size}\n//   • focus    -> --ui-focus-primary (the kit-wide 3px focus ring, radius/radius-4)\n// Per the design, the header/settings/actions cells tint on hover and press at\n// the *cell* level (not on an inner control), so the interaction tokens sit on\n// the `<th>`/`<td>` and the focus ring is drawn on the cell via `has-[…]`.\n//\n// The design's cell content (tags, status dots, links) stays consumer\n// composition — `--ui-table-global-cell-{tag,icon}-margin-y` and\n// --ui-table-data-gap describe that content's own insets, not a part contract,\n// so no wrapper part is invented for them here.\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom border-collapse text-sm text-[var(--ui-table-data-value-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(className)} {...props} />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn('[&_tr:last-child]:border-0', className)}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t-[length:var(--ui-table-global-row-border-width)] [border-top-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] font-medium [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Mark the row as selected — applies the active row token + `data-state`. */\n  selected?: boolean;\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, selected, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-state={selected ? 'selected' : undefined}\n      className={cn(\n        'border-b-[length:var(--ui-table-global-row-border-width)] [border-bottom-style:var(--ui-table-global-row-border-style)] border-[color:var(--ui-table-global-row-border-color)] bg-[var(--ui-table-data-row-color-idle)] transition-colors hover:bg-[var(--ui-table-data-row-color-hover)] data-[state=selected]:bg-[var(--ui-table-data-row-color-active)]',\n        // The design documents a keyboard-nav focus state on the row itself\n        // (a ring spanning the full row). Rows aren't focusable by default, so\n        // this only paints once a consumer makes them focusable (`tabIndex`).\n        'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableRow.displayName = 'TableRow';\n\ntype SortDirection = 'asc' | 'desc' | false;\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Render the column as sortable — adds a sort affordance and `aria-sort`. */\n  sortable?: boolean;\n  /** Current sort direction for this column (`false` = sortable but unsorted). */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates a sortable header (click / Enter / Space). */\n  onSort?: () => void;\n  /**\n   * Allow the header to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the cell grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nfunction SortIcon({ direction }: { direction: SortDirection }) {\n  const size = 'size-[var(--ui-table-header-sort-icon-size)]';\n  if (direction === 'asc') {\n    return (\n      <ArrowUpIcon\n        className={cn(\n          size,\n          'text-[var(--ui-table-header-sort-icon-color-active)]'\n        )}\n      />\n    );\n  }\n  if (direction === 'desc') {\n    return (\n      <ArrowDownIcon\n        className={cn(\n          size,\n          'text-[var(--ui-table-header-sort-icon-color-active)]'\n        )}\n      />\n    );\n  }\n  return (\n    <ArrowsDownUpIcon\n      className={cn(\n        size,\n        'text-[var(--ui-table-header-sort-icon-color-inactive)]'\n      )}\n    />\n  );\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  (\n    {\n      className,\n      children,\n      sortable,\n      sortDirection = false,\n      onSort,\n      wrap,\n      ...props\n    },\n    ref\n  ) => (\n    <th\n      ref={ref}\n      aria-sort={\n        sortDirection === 'asc'\n          ? 'ascending'\n          : sortDirection === 'desc'\n            ? 'descending'\n            : sortable\n              ? 'none'\n              : undefined\n      }\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] text-start align-middle text-sm font-semibold leading-6 text-[var(--ui-table-header-label-color)] bg-[var(--ui-table-header-cell-color-idle)] [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        // Per the design, a sortable header tints the whole cell on hover/press\n        // and draws the focus ring on the cell, not on the inner control.\n        sortable &&\n          'cursor-pointer rounded-sm transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n      {...props}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className=\"flex w-full cursor-pointer items-center gap-[var(--ui-table-header-gap)] text-start outline-none\"\n        >\n          {children}\n          <SortIcon direction={sortDirection} />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n);\nTableHead.displayName = 'TableHead';\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Allow the cell to wrap onto multiple lines (`whitespace-normal`) and drop\n   * the fixed row height so the row grows to fit its content.\n   */\n  wrap?: boolean;\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, wrap, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle text-sm leading-6 bg-[var(--ui-table-data-cell-color-idle)] transition-colors [&:has([role=checkbox])]:pe-0',\n        wrap\n          ? 'whitespace-normal'\n          : 'h-[var(--ui-table-global-cell-min-height)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nTableCell.displayName = 'TableCell';\n\nexport interface TableSelectCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Render the select-all cell of the header row (`<th>`) instead of a row's\n   * selection cell (`<td>`).\n   */\n  header?: boolean;\n}\n\n/**\n * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column\n * holding a label-less `Checkbox`. Only the leading padding is applied, matching\n * the design (16px padding + a 16px box), so the checkbox sits flush against the\n * first data cell.\n */\nconst TableSelectCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableSelectCellProps\n>(({ className, header, ...props }, ref) => {\n  const Comp = header ? 'th' : 'td';\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\n        'w-8 h-[var(--ui-table-global-cell-min-height)] ps-[var(--ui-table-global-cell-padding-x)] py-[var(--ui-table-global-cell-padding-y)] align-middle transition-colors',\n        header\n          ? 'bg-[var(--ui-table-header-cell-color-idle)]'\n          : 'bg-[var(--ui-table-data-cell-color-idle)]',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nTableSelectCell.displayName = 'TableSelectCell';\n\nexport interface TableActionsCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /**\n   * Suppress this row's actions because a selection is in play — the cell\n   * still reserves its 48px column (so the grid doesn't reflow) but renders no\n   * children and no hover/press tint. Per the design, that means any row is\n   * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from\n   * the data-table part) rather than re-deriving the threshold.\n   */\n  bulkSelectionActive?: boolean;\n}\n\n/**\n * The trailing row-actions cell (design part `TableActions`) — a fixed 48px\n * column, end-aligned, holding the consumer's overflow trigger (e.g. a\n * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself\n * carries the hover/press tint and the focus ring, per the design.\n */\nconst TableActionsCell = React.forwardRef<\n  HTMLTableCellElement,\n  TableActionsCellProps\n>(({ className, bulkSelectionActive, children, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle bg-[var(--ui-table-data-cell-color-idle)]',\n      !bulkSelectionActive &&\n        'rounded-sm transition-colors hover:bg-[var(--ui-table-data-cell-color-hover)] active:bg-[var(--ui-table-data-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  >\n    {bulkSelectionActive ? null : children}\n  </td>\n));\nTableActionsCell.displayName = 'TableActionsCell';\n\n/**\n * The trailing header cell holding the column-settings trigger (design part\n * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's\n * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what\n * the trigger opens (a column-visibility menu) is the consumer's choice —\n * `TableViewOptions` is the ready-made one.\n */\nconst TableSettingsCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'w-12 h-[var(--ui-table-global-cell-min-height)] px-[var(--ui-table-global-cell-padding-x)] text-end align-middle rounded-sm transition-colors bg-[var(--ui-table-header-cell-color-idle)] hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nTableSettingsCell.displayName = 'TableSettingsCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableSelectCell,\n  TableActionsCell,\n  TableSettingsCell,\n  TableCaption,\n};\n"],"mappings":";;;;;AA+BA,IAAM,IAAQ,EAAM,YAGjB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAK,WAAU;CACb,UAAA,kBAAC,SAAD;EACO;EACL,WAAW,EACT,8FACA,CACF;EACA,GAAI;CACL,CAAA;AACE,CAAA,CACN;AACD,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,CAAS;CAAG,GAAI;AAAQ,CAAA,CACxD;AACD,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,CAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EACT,kNACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAO1B,IAAM,IAAW,EAAM,YACpB,EAAE,cAAW,aAAU,GAAG,KAAS,MAClC,kBAAC,MAAD;CACO;CACL,cAAY,IAAW,aAAa,KAAA;CACpC,WAAW,EACT,8VAIA,6HACA,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAS,cAAc;AAkBvB,SAAS,EAAS,EAAE,gBAA2C;CAC7D,IAAM,IAAO;CAqBb,OApBI,MAAc,QAEd,kBAAC,GAAD,EACE,WAAW,EACT,GACA,sDACF,EACD,CAAA,IAGD,MAAc,SAEd,kBAAC,GAAD,EACE,WAAW,EACT,GACA,sDACF,EACD,CAAA,IAIH,kBAAC,GAAD,EACE,WAAW,EACT,GACA,wDACF,EACD,CAAA;AAEL;AAEA,IAAM,IAAY,EAAM,YAEpB,EACE,cACA,aACA,aACA,mBAAgB,IAChB,WACA,SACA,GAAG,KAEL,MAEA,kBAAC,MAAD;CACO;CACL,aACE,MAAkB,QACd,cACA,MAAkB,SAChB,eACA,IACE,SACA,KAAA;CAEV,WAAW,EACT,qQACA,IACI,sBACA,8CAGJ,KACE,2QACF,CACF;CACA,GAAI;CAEH,UAAA,IACC,kBAAC,UAAD;EACE,MAAK;EACL,SAAS;EACT,WAAU;EAHZ,UAAA,CAKG,GACD,kBAAC,GAAD,EAAU,WAAW,EAAgB,CAAA,CAC/B;CAER,CAAA,IAAA;AAEA,CAAA,CAER;AACA,EAAU,cAAc;AAUxB,IAAM,IAAY,EAAM,YACrB,EAAE,cAAW,SAAM,GAAG,KAAS,MAC9B,kBAAC,MAAD;CACO;CACL,WAAW,EACT,kNACA,IACI,sBACA,8CACJ,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAU,cAAc;AAgBxB,IAAM,IAAkB,EAAM,YAG3B,EAAE,cAAW,WAAQ,GAAG,KAAS,MAGhC,kBAFW,IAAS,OAAO,MAE3B;CACO;CACL,WAAW,EACT,uKACA,IACI,gDACA,6CACJ,CACF;CACA,GAAI;AACL,CAAA,CAEJ;AACD,EAAgB,cAAc;AAmB9B,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,wBAAqB,aAAU,GAAG,KAAS,MACzD,kBAAC,MAAD;CACO;CACL,WAAW,EACT,8JACA,CAAC,KACC,wPACF,CACF;CACA,GAAI;CAEH,UAAA,IAAsB,OAAO;AAC5B,CAAA,CACL;AACD,EAAiB,cAAc;AAS/B,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EACT,yZACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAkB,cAAc;AAEhC,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,sCAAsC,CAAS;CAC7D,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc"}

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

@@ -1,16 +1,16 @@
 "use client";
 import { cn as e } from "../../../lib/utils.js";
-import { ChartContainer as t, ChartLegendContent as n, ChartStyle as r, ChartTooltip as i, ChartTooltipContent as a, resolveChartColors as o } from "../chart/chart.js";
-import { resolveAnimation as s } from "../chart/chart-format.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Treemap as d } from "recharts";
+import { ChartContainer as t, ChartLegendContent as n, ChartStyle as r, ChartTooltip as i, ChartTooltipContent as a, resolveChartColors as o, toCssKey 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 f = {
+var p = {
 	type: "diverging",
 	pair: "blue-orange"
-}, p = 2, m = 0, h = 64, g = 43, _ = 58;
-function v(e) {
+}, m = 2, h = 0, g = 64, _ = 43, v = 58;
+function y(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 [];
@@ -19,127 +19,127 @@ function v(e) {
 	});
 	return a.length ? a.join(r) : void 0;
 }
-var y = {
+var b = {
 	"bottom-start": "justify-end text-start",
 	"top-start": "justify-start text-start",
 	center: "justify-center text-center"
 };
-function b({ x: t = 0, y: n = 0, width: r = 0, height: i = 0, name: a, primaryLabel: o, secondaryLabel: s, showLabels: c = !0, labelAlign: d = "center", fillTone: f = "dark" }) {
-	if (!a) return /* @__PURE__ */ l("g", {});
-	let v = t + p, b = n + p, x = Math.max(0, r - 4), S = Math.max(0, i - 4), C = c && x > h && S >= g, w = C && s && S >= _ ? s : void 0;
-	return /* @__PURE__ */ u("g", { children: [/* @__PURE__ */ l("rect", {
-		x: v,
-		y: b,
-		width: x,
-		height: S,
-		rx: m,
-		style: { fill: `var(--color-${a})` }
-	}), C && /* @__PURE__ */ l("foreignObject", {
-		x: v,
-		y: b,
-		width: x,
-		height: S,
+function x({ x: t = 0, y: n = 0, width: r = 0, height: i = 0, name: a, primaryLabel: o, secondaryLabel: c, showLabels: l = !0, labelAlign: f = "center", fillTone: p = "dark" }) {
+	if (!a) return /* @__PURE__ */ u("g", {});
+	let y = t + m, x = n + m, S = Math.max(0, r - 4), C = Math.max(0, i - 4), w = l && S > g && C >= _, T = w && c && C >= v ? c : void 0;
+	return /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("rect", {
+		x: y,
+		y: x,
+		width: S,
+		height: C,
+		rx: h,
+		style: { fill: `var(--color-${s(a)})` }
+	}), w && /* @__PURE__ */ u("foreignObject", {
+		x: y,
+		y: x,
+		width: S,
+		height: C,
 		className: "pointer-events-none",
-		children: /* @__PURE__ */ u("div", {
-			className: e("flex size-full flex-col overflow-hidden p-3", f === "pale" ? "text-[var(--ui-text-on-surface-primary)]" : f === "inverts" ? "text-[var(--ui-text-on-status-strong-primary)]" : "text-[var(--ui-text-on-status-strong-neutral)]", y[d]),
-			children: [/* @__PURE__ */ l("span", {
+		children: /* @__PURE__ */ d("div", {
+			className: e("flex size-full flex-col overflow-hidden p-3", p === "pale" ? "text-[var(--ui-text-on-surface-primary)]" : p === "inverts" ? "text-[var(--ui-text-on-status-strong-primary)]" : "text-[var(--ui-text-on-status-strong-neutral)]", b[f]),
+			children: [/* @__PURE__ */ u("span", {
 				className: "truncate text-sm",
 				children: o ?? a
-			}), w && /* @__PURE__ */ l("span", {
+			}), T && /* @__PURE__ */ u("span", {
 				className: "truncate text-[11px]",
-				children: w
+				children: T
 			})]
 		})
 	})] });
 }
-var x = c.forwardRef(({ className: p, config: m, palette: h = f, data: g, dataKey: _, nameKey: y, aspectRatio: x = 4 / 3, showLabels: S = !0, labelAlign: C = "center", secondaryKeys: w, 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 = s({
-		animate: j,
-		animationDuration: M,
-		animationBegin: N,
-		animationEasing: P
-	}), R = c.useMemo(() => {
-		let e = o(m, h);
-		return g.map((t) => {
-			let n = String(t[y]), r = w?.length ? v({
+var S = l.forwardRef(({ className: m, config: h, palette: g = p, data: _, dataKey: v, nameKey: b, aspectRatio: S = 4 / 3, showLabels: C = !0, labelAlign: w = "center", secondaryKeys: T, secondaryFormatter: E, secondarySeparator: D = " · ", showTooltip: O = !0, showLegend: k = !1, legendPos: A = "bottom", tooltipContent: j, animate: M, animationDuration: N, animationBegin: P, animationEasing: F, ...I }, L) => {
+	let R = c({
+		animate: M,
+		animationDuration: N,
+		animationBegin: P,
+		animationEasing: F
+	}), z = l.useMemo(() => {
+		let e = o(h, g);
+		return _.map((t) => {
+			let n = String(t[b]), r = T?.length ? y({
 				row: t,
-				keys: w,
-				separator: E,
-				formatter: T
-			}) : void 0, i = m[n]?.label, a = (e[n]?.color ?? "").replace(/^var\(|\)$/g, ""), o = /-(?:a[12]|b[12]|sequential-[a-z]+-[12])$/.test(a), s = /-sequential-[a-z]+-[78]$/.test(a), c = o ? "pale" : s ? "inverts" : "dark";
+				keys: T,
+				separator: D,
+				formatter: E
+			}) : void 0, i = h[n]?.label, a = (e[n]?.color ?? "").replace(/^var\(|\)$/g, ""), o = /-(?:a[12]|b[12]|sequential-[a-z]+-[12])$/.test(a), c = /-sequential-[a-z]+-[78]$/.test(a), l = o ? "pale" : c ? "inverts" : "dark";
 			return {
 				...t,
-				fill: `var(--color-${n})`,
-				fillTone: c,
+				fill: `var(--color-${s(n)})`,
+				fillTone: l,
 				...typeof i == "string" ? { primaryLabel: i } : {},
 				...r ? { secondaryLabel: r } : {}
 			};
 		});
 	}, [
-		m,
-		g,
-		y,
 		h,
+		_,
+		b,
+		g,
+		E,
 		T,
-		w,
-		E
-	]), z = c.useMemo(() => {
+		D
+	]), B = l.useMemo(() => {
 		let e = /* @__PURE__ */ new Set();
-		return R.flatMap((t) => {
-			let n = String(t[y]);
+		return z.flatMap((t) => {
+			let n = String(t[b]);
 			return e.has(n) ? [] : (e.add(n), [{
 				value: n,
-				dataKey: y,
+				dataKey: b,
 				type: "rect",
 				color: String(t.fill),
 				payload: t
 			}]);
 		});
-	}, [y, R]), B = `chart-${c.useId().replace(/:/g, "")}`, V = O ? /* @__PURE__ */ u("div", {
-		"data-chart": B,
+	}, [b, z]), V = `chart-${l.useId().replace(/:/g, "")}`, H = k ? /* @__PURE__ */ d("div", {
+		"data-chart": V,
 		className: "text-xs",
-		children: [/* @__PURE__ */ l(r, {
-			id: B,
-			config: o(m, h)
-		}), /* @__PURE__ */ l(n, {
-			config: m,
-			payload: z,
-			verticalAlign: k,
-			nameKey: y
+		children: [/* @__PURE__ */ u(r, {
+			id: V,
+			config: o(h, g)
+		}), /* @__PURE__ */ u(n, {
+			config: h,
+			payload: B,
+			verticalAlign: A,
+			nameKey: b
 		})]
 	}) : null;
-	return /* @__PURE__ */ u("div", {
-		ref: I,
-		className: e(O && "flex flex-col", p),
-		...F,
+	return /* @__PURE__ */ d("div", {
+		ref: L,
+		className: e(k && "flex flex-col", m),
+		...I,
 		children: [
-			k === "top" && V,
-			/* @__PURE__ */ l(t, {
-				config: m,
-				palette: h,
-				className: O ? "min-h-0 w-full flex-1" : "size-full",
-				children: /* @__PURE__ */ l(d, {
-					data: R,
-					dataKey: _,
-					nameKey: y,
-					aspectRatio: x,
-					...L,
-					content: /* @__PURE__ */ l(b, {
-						showLabels: S,
-						labelAlign: C
+			A === "top" && H,
+			/* @__PURE__ */ u(t, {
+				config: h,
+				palette: g,
+				className: k ? "min-h-0 w-full flex-1" : "size-full",
+				children: /* @__PURE__ */ u(f, {
+					data: z,
+					dataKey: v,
+					nameKey: b,
+					aspectRatio: S,
+					...R,
+					content: /* @__PURE__ */ u(x, {
+						showLabels: C,
+						labelAlign: w
 					}),
-					children: D && /* @__PURE__ */ l(i, { content: A ?? /* @__PURE__ */ l(a, {
-						nameKey: y,
+					children: O && /* @__PURE__ */ u(i, { content: j ?? /* @__PURE__ */ u(a, {
+						nameKey: b,
 						hideLabel: !0
 					}) })
 				})
 			}),
-			k === "bottom" && V
+			A === "bottom" && H
 		]
 	});
 });
-x.displayName = "Treemap";
+S.displayName = "Treemap";
 //#endregion
-export { x as Treemap, b as TreemapCell, v as treemapSecondaryLabel };
+export { S as Treemap, x as TreemapCell, y as treemapSecondaryLabel };
 
 //# sourceMappingURL=treemap.js.map

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

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