pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/esm/Components/Table/components/TableBody.js

@@ -3,30 +3,50 @@ import { Box, IconButton, Spinner, Td, Tr } from "@chakra-ui/react";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { normalizeTableCellValue, buildTablePalette, pickTableColor } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { onFilled, isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import { TableBodyLoading } from "./TableLoading.js";
 import TableActions from "./TableActions.js";
-import { getTableRowHoverStyle } from "./tableRowHoverStyle.js";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
 import TableGroupRow from "./TableGroupRow.js";
-// Density → row height (px) + cell vertical padding. The padding (not just the
-// min-height) is what drives perceived row size, so compact tightens both.
-const DENSITY_CONFIG = {
-    compact: { height: 32, py: "0.125rem" },
-    normal: { height: 40, py: "0.5rem" },
-    comfortable: { height: 52, py: "0.875rem" },
-};
+import { useTableVariant } from "../variants/TableVariantContext.js";
+import { resolvePillInk } from "../variants/pillInk.js";
+import EmptyState from "../../EmptyState/EmptyState.js";
+import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT } from "./rowMetrics.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
     : undefined;
+// Smallest index i in [0, total] where offsets[i+1] > target; offsets is sorted.
+export const findFirstVisibleIndex = (offsets, total, target) => {
+    let lo = 0;
+    let hi = total;
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (offsets[mid + 1] <= target) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    return lo;
+};
 // Monday-style status cell: the whole cell is filled with the status color and
 // the label is centered in whichever of white/black clears AA against that fill —
 // the fill can be a consumer hex we can't know in advance is light or dark.
-const StatusCell = ({ value, onSolid }) => (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+const BLEED_JUSTIFY = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+};
+const StatusCell = ({ value, onSolid, align, }) => (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: BLEED_JUSTIFY[align !== null && align !== void 0 ? align : "center"], w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: align !== null && align !== void 0 ? align : "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+// Studio's status cell: a contained chip on the tone's soft rung. Same tone pair
+// the group header already uses, so an override hex behaves identically in both.
+const StatusPill = ({ value, soft, ink, radius, }) => (_jsx(Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
-const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
+const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
     // Measured-height virtualization: report this row's real height (main + any
     // expanded panel) so the windower can place variable/expandable rows exactly.
     const mainRowRef = useRef(null);
@@ -63,16 +83,40 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
             onRowClick(row, { label: header.label, id: header.id });
         }
     }, [row, onRowClick]);
+    const variant = useTableVariant();
     const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
     const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
+    // A selected row earns the leading bar only where a group accent isn't already
+    // claiming that edge — the group's identity is the scarcer signal.
+    const leadSx = variant.row.showSelectedBar && isChecked && !accentColor
+        ? `inset 3px 0 0 ${variant.row.selectedBarColor}`
+        : accentSx;
+    const restsOnIndex = variant.slot.rest === "index";
+    const rowSx = {
+        ...(variant.row.hoverScope === "row"
+            ? { "&:hover > td[data-hoverable='true']": { backgroundColor: variant.row.hoverBg } }
+            : {}),
+        // opacity, not display: a hidden-by-display checkbox leaves the a11y tree and
+        // cannot be tabbed to, so `:focus-within` would never fire to bring it back.
+        ...(restsOnIndex
+            ? {
+                "& .table-slot-box": { opacity: isChecked ? 1 : 0 },
+                "& .table-slot-index": { opacity: isChecked ? 0 : 1 },
+                "&:hover .table-slot-box, &:focus-within .table-slot-box": { opacity: 1 },
+                "&:hover .table-slot-index, &:focus-within .table-slot-index": { opacity: 0 },
+            }
+            : {}),
+    };
     // Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
     // as one piece with its header (and so sticky cells cover scrolling content).
     const frozenCellBg = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.table.hover[100];
     const cellStyles = row.cellStyle;
     const rowStyle = row.rowStyle;
+    const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
-    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: !!(row === null || row === void 0 ? void 0 : row.content) && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: "6", fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
-                        var _a, _b, _c;
+    const restBg = isStriped ? variant.row.stripeBg : theme.colors.background[50];
+    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: transitionFor(["opacity"], "base"), sx: { ...rowSx, ...reducedMotionSx() }, children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: _jsxs(Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && (_jsx(Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: transitionFor(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: rowIndex + 1 })), _jsx(Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), columns.map((header, headerIndex) => {
+                        var _a, _b, _c, _d;
                         if (header.isHidden)
                             return null;
                         const isFrozen = header.isFreeze;
@@ -80,27 +124,37 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
                         const isStatus = header.type === "status" && !header.node;
                         const rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
                         const statusColor = isStatus
-                            ? pickTableColor(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus], theme)
+                            ? (_c = (_b = header.statusPalette) === null || _b === void 0 ? void 0 : _b[rawStatus]) !== null && _c !== void 0 ? _c : pickTableColor(rawStatus, palette, (_d = header.statusColors) === null || _d === void 0 ? void 0 : _d[rawStatus], theme)
                             : null;
-                        // Guards a `statusColor` built by an older external caller that predates `onSolid`.
-                        const statusOnSolid = statusColor
-                            ? (_c = statusColor.onSolid) !== null && _c !== void 0 ? _c : onFilled(statusColor.solid, theme.colors.white, theme.colors.black)
-                            : undefined;
-                        return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : theme.colors.background[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                        const isBleed = variant.cells.statusFill === "bleed" && !!statusColor;
+                        const bleedBg = statusColor === null || statusColor === void 0 ? void 0 : statusColor.soft;
+                        const bleedInk = statusColor === null || statusColor === void 0 ? void 0 : statusColor.text;
+                        const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
+                        return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
                                 ? "none"
-                                : `0.063rem solid ${theme.colors.boxborder[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? statusOnSolid : theme.colors.text[500], _hover: isStatus && statusColor
+                                : `0.063rem solid ${isFrozen || isChecked
+                                    ? variant.row.frozenRuleColor
+                                    : variant.row.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isBleed ? bleedInk : variant.cells.ink, "data-hoverable": canHover ? "true" : "false", _hover: variant.row.hoverScope === "row" || !canHover
                                 ? EMPTY_HOVER
-                                : (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle
-                                    ? EMPTY_HOVER
-                                    : hoverStyle, children: isStatus && statusColor ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: statusOnSolid })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
-                    }), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : theme.colors.background[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
+                                : hoverStyle, children: isBleed ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: bleedInk, align: header.align })) : isStatus && statusColor ? (_jsx(StatusPill, { value: normalizeTableCellValue(row[header.id]), soft: statusColor.soft, ink: resolvePillInk(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
+                    }), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : restBg, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
-                        (isLink ? 1 : 0), p: 2, children: _jsx(Box, { p: 2, bg: theme.colors.background[50], borderRadius: "md", children: rowContent(row) }) }) }))] }));
+                        (isLink ? 1 : 0), p: 2, children: _jsx(Box, { p: 2, bg: theme.colors.background[50], borderRadius: "lg", children: rowContent(row) }) }) }))] }));
 });
-const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }) => {
-    var _a, _b, _c;
+const isStructuredEmpty = (value) => !!value && typeof value === "object" && !React.isValidElement(value);
+const TableEmpty = ({ emptyState }) => {
+    const structured = isStructuredEmpty(emptyState) ? emptyState : undefined;
+    const iconNode = structured === null || structured === void 0 ? void 0 : structured.icon;
+    const icon = useMemo(() => (iconNode ? () => _jsx(_Fragment, { children: iconNode }) : undefined), [iconNode]);
+    if (emptyState && !structured)
+        return _jsx(_Fragment, { children: emptyState });
+    return (_jsx(EmptyState, { size: "sm", minH: `${EMPTY_STATE_HEIGHT}px`, title: structured === null || structured === void 0 ? void 0 : structured.title, description: structured === null || structured === void 0 ? void 0 : structured.description, icon: icon }));
+};
+const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe = false, accentColors, groups, onAddItem, emptyState, }) => {
+    var _a;
     const theme = useCustomTheme();
+    const variant = useTableVariant();
     const [expandedRows, setExpandedRows] = useState(new Set());
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
     const toggleGroup = useCallback((value) => {
@@ -117,22 +171,10 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
     }, []);
     const selectionsSet = useMemo(() => new Set(selections), [selections]);
     const palette = useMemo(() => buildTablePalette(theme), [theme]);
-    const densityConfig = (_a = DENSITY_CONFIG[density !== null && density !== void 0 ? density : "normal"]) !== null && _a !== void 0 ? _a : DENSITY_CONFIG.normal;
-    const rowHeight = densityConfig.height;
-    const cellPy = densityConfig.py;
-    // --- Row virtualization ---------------------------------------------------
-    // Rows are a fixed 45px tall (see the `height={45}` on every <Td/> below),
-    // and the scroll viewport is capped at ~500px, so only ~11 rows are ever
-    // visible. Mounting all 50/100 page rows is what makes paging freeze. We
-    // render only the rows inside the viewport (+ overscan) and reserve the
-    // remaining height with empty spacer rows. Spacer rows (rather than CSS
-    // transforms) keep the table in normal flow so the sticky header and
-    // `position: sticky` frozen columns keep working.
-    // Expandable `content` rows are supported via measured heights (see
-    // `measuredHeights` / `onMeasure` below) — each rendered row reports its real
-    // height, so the window places variable/expanded rows exactly.
+    const { height: rowHeight, py: cellPy } = DENSITY_ROWS[density !== null && density !== void 0 ? density : "normal"];
+    // Windowing: only rows inside the viewport (+ overscan) mount; spacer rows (not transforms)
+    // reserve the rest so sticky header/frozen columns keep working. Rows report measured heights.
     const ROW_HEIGHT = rowHeight;
-    const GROUP_HEADER_H = 42;
     const OVERSCAN = 6;
     const VIRTUALIZE_THRESHOLD = 30;
     const ESTIMATED_EXPAND = 120; // assumed extra height for an expanded-but-not-yet-measured row
@@ -158,7 +200,15 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (!el || !(shouldVirtualize || groupVirtualize))
             return;
-        const onScroll = () => setScrollTop(el.scrollTop);
+        let rafId = null;
+        const onScroll = () => {
+            if (rafId != null)
+                return;
+            rafId = requestAnimationFrame(() => {
+                rafId = null;
+                setScrollTop(el.scrollTop);
+            });
+        };
         const measure = () => setViewportH(el.clientHeight);
         measure();
         setScrollTop(el.scrollTop);
@@ -167,23 +217,30 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         return () => {
             el.removeEventListener("scroll", onScroll);
             window.removeEventListener("resize", measure);
+            if (rafId != null)
+                cancelAnimationFrame(rafId);
         };
     }, [scrollContainerRef, shouldVirtualize, groupVirtualize, data.length, groupRowCount]);
-    // New page: jump back to the top so the window recomputes from row 0.
+    // Reset only on a real page change, never merely from the virtualization
+    // threshold flipping or rows being appended (infinite scroll/load-more).
+    const sliceKey = `${startRow}|${rowsPerPage}`;
+    const prevSliceKeyRef = useRef(sliceKey);
     useEffect(() => {
-        if (!shouldVirtualize)
+        const changed = prevSliceKeyRef.current !== sliceKey;
+        prevSliceKeyRef.current = sliceKey;
+        if (!changed)
             return;
         const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (el)
             el.scrollTop = 0;
         setScrollTop(0);
-    }, [startRow, shouldVirtualize, scrollContainerRef]);
+    }, [sliceKey, scrollContainerRef]);
     const total = data.length;
     // Prefix-sum offsets using measured heights (exact for rendered rows) and
     // estimates for not-yet-measured rows (ROW_HEIGHT, + ESTIMATED_EXPAND if expanded).
     // Independent of scrollTop, so scrolling reuses it instead of rebuilding it.
     const offsets = useMemo(() => {
-        if (!shouldVirtualize)
+        if (!shouldVirtualize || groups)
             return null;
         const acc = new Array(total + 1);
         acc[0] = 0;
@@ -196,7 +253,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
             acc[i + 1] = acc[i] + h;
         }
         return acc;
-    }, [shouldVirtualize, total, data, measuredHeights, expandedRows, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
+    }, [shouldVirtualize, groups, total, data, measuredHeights, expandedRows, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
     let firstIndex = 0;
     let lastIndex = total;
     let topPad = 0;
@@ -206,9 +263,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         const totalH = offsets[total];
         const top = scrollTop - OVERSCAN * ROW_HEIGHT;
         const bottom = scrollTop + vh + OVERSCAN * ROW_HEIGHT;
-        firstIndex = 0;
-        while (firstIndex < total && offsets[firstIndex + 1] <= top)
-            firstIndex++;
+        firstIndex = findFirstVisibleIndex(offsets, total, top);
         lastIndex = firstIndex;
         while (lastIndex < total && offsets[lastIndex] < bottom)
             lastIndex++;
@@ -243,20 +298,19 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         (isContent ? 1 : 0) +
         (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink]);
     const leftOffsets = useMemo(() => {
-        const checkboxOffset = isCheckbox ? 50 : 0;
+        const checkboxOffset = isCheckbox ? slotWidth : 0;
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
-    }, [columnWidths, isCheckbox]);
-    const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, [noBorders, theme.colors.border]);
+    }, [columnWidths, isCheckbox, slotWidth]);
+    const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
-    const selectedBg = theme.colors.primary.opacity[16];
+    const selectedBg = variant.row.selectedBg;
     // Sticky/frozen cells overlay scrolling content, so their selected background
     // must be OPAQUE — paint the (translucent) tint over an opaque base.
     const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${theme.colors.background[50]}`;
     // Dark mode lifts the hover fill to `table.hover[500]`; `[300]` sits ~1.2:1 from the canvas.
     // No ink flip needed — see `tableRowHoverStyle.ts`.
-    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
-    const hoverStyle = useMemo(() => getTableRowHoverStyle(theme.colors, isDark), [theme.colors, isDark]);
+    const hoverStyle = useMemo(() => ({ backgroundColor: variant.row.hoverBg }), [variant.row.hoverBg]);
     // Flatten groups → one sequence of header/row items so it can be windowed.
     // Independent of scrollTop, so scrolling reuses it instead of re-flattening.
     const groupItems = useMemo(() => {
@@ -266,8 +320,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         for (const g of groups) {
             list.push({ kind: "header", g });
             if (!collapsedGroups.has(g.value)) {
-                for (const row of g.rows)
-                    list.push({ kind: "row", g, row });
+                g.rows.forEach((row, pos) => list.push({ kind: "row", g, row, pos }));
             }
         }
         return list;
@@ -275,7 +328,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
     const groupMetrics = useMemo(() => {
         if (!groupItems || !groupVirtualize)
             return null;
-        const heights = groupItems.map((it) => (it.kind === "header" ? GROUP_HEADER_H : rowHeight));
+        const heights = groupItems.map((it) => (it.kind === "header" ? GROUP_HEADER_HEIGHT : rowHeight));
         const offsets = [];
         let acc = 0;
         for (const h of heights) {
@@ -283,14 +336,44 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
             acc += h;
         }
         return { heights, offsets, totalH: acc };
-    }, [groupItems, groupVirtualize, rowHeight, GROUP_HEADER_H]);
+    }, [groupItems, groupVirtualize, rowHeight]);
+    // Clamp scrollTop back when a shorter data set leaves it past the new content height.
+    useEffect(() => {
+        const totalH = shouldVirtualize && offsets ? offsets[total] : groupVirtualize && groupMetrics ? groupMetrics.totalH : null;
+        if (totalH == null)
+            return;
+        const maxScrollTop = Math.max(0, totalH - viewportH);
+        if (scrollTop > maxScrollTop) {
+            const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+            if (el)
+                el.scrollTop = maxScrollTop;
+            setScrollTop(maxScrollTop);
+        }
+    }, [shouldVirtualize, offsets, total, groupVirtualize, groupMetrics, viewportH, scrollTop, scrollContainerRef]);
+    // Prune measured heights for rows no longer in data so the map stays bounded.
+    useEffect(() => {
+        setMeasuredHeights((prev) => {
+            if (prev.size === 0)
+                return prev;
+            const ids = new Set(data.map(getRowId));
+            let changed = false;
+            const next = new Map();
+            prev.forEach((h, id) => {
+                if (ids.has(id)) {
+                    next.set(id, h);
+                }
+                else {
+                    changed = true;
+                }
+            });
+            return changed ? next : prev;
+        });
+    }, [data]);
     if (isLoading && data.length === 0) {
-        return (_jsx(TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[200], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
+        return (_jsx(TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[200], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
     }
     if (!isLoading && data.length === 0) {
-        const isStructured = emptyState && typeof emptyState === "object" && !React.isValidElement(emptyState);
-        const es = isStructured ? emptyState : null;
-        return (_jsx(Tr, { backgroundColor: theme.colors.background[50], children: _jsx(Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 10, border: "none", children: emptyState && !isStructured ? emptyState : (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: theme.colors.textMuted, children: [(es === null || es === void 0 ? void 0 : es.icon) && _jsx(Box, { fontSize: "1.75rem", color: theme.colors.textMuted, children: es.icon }), _jsx(Box, { fontSize: "0.95rem", fontWeight: 600, color: theme.colors.text[700], children: (_b = es === null || es === void 0 ? void 0 : es.title) !== null && _b !== void 0 ? _b : "No data found" }), (es === null || es === void 0 ? void 0 : es.description) && (_jsx(Box, { fontSize: "0.8125rem", color: theme.colors.textMuted, children: es.description }))] })) }) }));
+        return (_jsx(Tr, { backgroundColor: theme.colors.background[50], children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", children: _jsx(TableEmpty, { emptyState: emptyState }) }) }));
     }
     // --- Monday-style grouped board render (virtualized when large) -----------
     if (groups) {
@@ -314,13 +397,13 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
                     break;
                 }
             }
-            gTopPad = (_c = offsets[firstI]) !== null && _c !== void 0 ? _c : 0;
+            gTopPad = (_a = offsets[firstI]) !== null && _a !== void 0 ? _a : 0;
             gBottomPad = totalH - (lastI > firstI ? offsets[lastI - 1] + heights[lastI - 1] : gTopPad);
         }
         const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
         return (_jsxs(_Fragment, { children: [gTopPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
                     var _a;
-                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, index: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
+                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
                 }), gBottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
     }
     return (_jsxs(_Fragment, { children: [isLoading && data.length > 0 && (_jsx(Tr, { children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: _jsx(Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: _jsx(Spinner, { size: "sm", color: theme.colors.accentText }) }) }) })), shouldVirtualize && topPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: topPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
@@ -329,7 +412,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
                 const rowIndex = startRow + index;
                 const isExpanded = expandedRows.has(rowIndex);
                 const isChecked = selectionsSet.has(getRowId(row));
-                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
+                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
             }), shouldVirtualize && bottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
 };
 export default TableBody;

package/dist/esm/Components/Table/components/TableGroupRow.js

@@ -5,6 +5,6 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 /** Monday-style colored, collapsible group header row. */
 export const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
     const theme = useCustomTheme();
-    return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.border[500]}`, children: [_jsx(IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), _jsx(Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [_jsx(Plus, { size: 14 }), " Add item"] }))] }) }) }));
+    return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [_jsx(IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), _jsx(Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "lg", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [_jsx(Plus, { size: 14 }), " Add item"] }))] }) }) }));
 };
 export default TableGroupRow;

package/dist/esm/Components/Table/components/TableHeader.js

@@ -7,44 +7,50 @@ import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js
 import TableFilters from "../filters/TableFilters.js";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
-const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
+import { useTableVariant } from "../variants/TableVariantContext.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
+const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
+const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = useState(null);
-    return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
+    return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
-                return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
+                return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
             }), isLink && _jsx(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 export default memo(TableHeader);
-const SelectAllCell = memo(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
+const SelectAllCell = memo(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: theme.colors.table.hover[200], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
+    const variant = useTableVariant();
+    return (_jsx(Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }) }));
 });
 const ContentSpacerCell = memo(({ noBorders }) => {
-    const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+    const variant = useTableVariant();
+    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
 });
 const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
-    const theme = useCustomTheme();
-    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+    const variant = useTableVariant();
+    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
 });
 const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
     const theme = useCustomTheme();
-    return (_jsxs(Box, { as: "button", type: "button", "aria-label": `Sort by ${label}`, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, p: 0, border: "none", bg: "transparent", lineHeight: "1", onClick: handleSortClick, transition: "color 0.2s ease-in-out, opacity 0.2s ease-in-out", 
-        // Kept out of view until hover/focus so the header looks exactly as it did,
-        // while staying in the DOM and reachable by Tab.
-        opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1 }, color: theme.colors.textMuted, _hover: {
+    const variant = useTableVariant();
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": `Sort by ${label}`, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, p: 0, border: "none", bg: "transparent", lineHeight: "1", onClick: handleSortClick, transition: transitionFor(["color", "opacity"], "base"), sx: reducedMotionSx(), borderRadius: "sm", opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1, ...focusVisibleRing(theme.colors) }, color: theme.colors.textMuted, _hover: {
             opacity: 1,
-            color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]),
+            color: accentTextOnCanvas(theme.colors.secondary, variant.header.bg),
         }, children: [sortState === "none" && _jsx(ChevronsUpDown, { size: 14 }), sortState === "asc" && _jsx(ChevronUp, { size: 14 }), sortState === "desc" && _jsx(ChevronDown, { size: 14 })] }));
 });
-const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
-    var _a;
+const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
+    var _a, _b;
     const [isHovered, setIsHovered] = useState(false);
     const theme = useCustomTheme();
+    const variant = useTableVariant();
     const isFrozen = header.isFreeze;
+    const align = (_a = header.align) !== null && _a !== void 0 ? _a : "start";
     const leftOffset = isFrozen
-        ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? 50 : 0)
+        ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? slotWidth : 0)
         : undefined;
     const isSorting = header.isSort
         ? columnsSort.find((o) => o.column === header.id)
@@ -58,7 +64,6 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
         : (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc"
             ? "descending"
             : undefined;
-    // const TextColor = isFrozen ? freezedTextColor : headerTextColor;
     const handleMouseDown = (e) => {
         const parentBox = e.target
             .parentElement;
@@ -77,7 +82,16 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
         document.addEventListener("mouseup", onMouseUp);
     };
     const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
-    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: theme.colors.table.hover[200], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [_jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
+    // Studio keeps the kebab out of the resting header — nine of them read louder than
+    // the labels. A column that is filtering or sorting keeps its control on show.
+    const showActions = variant.header.actions === "always" ||
+        isHovered ||
+        isSortActive ||
+        openFilterId === header.id ||
+        !!columnsSearch[header.id];
+    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffset}px` : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+            ? "none"
+            : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [_jsx(Box, { textAlign: align, textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", opacity: showActions ? 1 : 0, transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), _focusWithin: { opacity: 1 }, children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
                                 let direction = "asc";
                                 if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
                                     direction = "desc";
@@ -86,7 +100,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
                                     direction = "none";
                                 }
                                 handleSort(header.id, direction);
-                            } })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, theme.colors.table.hover[200]), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
+                            } })), sortPriority > 0 && (_jsx(Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: theme.colors.primary.opacity[16], color: accentTextOnCanvas(theme.colors.primary, variant.header.bg), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
                                 ...prev,
                                 [header.id]: searchVal,
                             })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {

package/dist/esm/Components/Table/components/TableSearch.js

@@ -25,6 +25,6 @@ const TableSearch = ({ onSearch }) => {
         setQuery(value);
         handleDebounce(value);
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.border[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { size: "sm", maxW: "12.5rem", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "lg", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "100%", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
 };
 export default TableSearch;

package/dist/esm/Components/Table/components/rowMetrics.js

@@ -0,0 +1,10 @@
+export const DENSITY_ROWS = {
+    compact: { height: 32, py: "0.125rem" },
+    normal: { height: 40, py: "0.5rem" },
+    comfortable: { height: 52, py: "0.875rem" },
+};
+export const TOOLBAR_HEIGHT = 45;
+export const GROUP_HEADER_HEIGHT = 42;
+export const EMPTY_STATE_HEIGHT = 200;
+export const rowHeightFor = (density) => DENSITY_ROWS[density !== null && density !== void 0 ? density : "normal"].height;
+export const pxOf = (length) => parseFloat(length);

package/dist/esm/Components/Table/filters/ActiveFilters.js

@@ -4,10 +4,13 @@ import { Box, Flex, Text, IconButton } from "@chakra-ui/react";
 import { X } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { focusVisibleStyles } from "../../../Theme/chakra/focusRing.styles.js";
 import VeritcalDivider from "../../Divider/Divider.js";
 const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
     const theme = useCustomTheme();
+    const filterTone = resolveSoftTone(theme.colors, theme.colors.primary);
     const columnLabelMap = useMemo(() => {
         const map = new Map();
         for (const col of columns) {
@@ -35,10 +38,10 @@ const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, })
     if (activeFilters.length === 0) {
         return null;
     }
-    return (_jsx(Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: theme.colors.blue[50], borderRadius: "md", border: `0.063rem solid ${theme.colors.blue[200]}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.blue[50]), whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
-                                bg: theme.colors.blue[100],
-                            }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && (_jsx(Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+    return (_jsx(Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: filterTone.bg, borderRadius: "full", border: `0.063rem solid ${filterTone.border}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: filterTone.fg, whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
+                                bg: filterTone.hoverBg,
+                            }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && (_jsx(Box, { as: "button", type: "button", className: "clear-all-text", "aria-label": "Clear all filters", fontSize: "sm", bg: "transparent", border: "none", p: 0, color: accentTextOnCanvas(theme.colors.primary, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
                         textDecoration: "underline",
-                    }, flexShrink: 0, whiteSpace: "nowrap", children: "Clear All" }))] }) }));
+                    }, flexShrink: 0, whiteSpace: "nowrap", borderRadius: "sm", sx: focusVisibleStyles(theme.colors), children: "Clear All" }))] }) }));
 });
 export default ActiveFilters;