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

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

@@ -1,11 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverBody, VStack, Portal } from "@chakra-ui/react";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronUp, Check } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { optionRowSpec, OPTION_ROW_RADIUS } from "../../../Theme/tokens/primitives/optionRowSizes.js";
+import { optionRowInk, optionRowWeight } from "../../Select/optionRowInk.js";
+import { useExclusiveOverlay } from "../../../Hooks/useExclusiveOverlay.js";
 const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
     const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    const spec = optionRowSpec("xs");
     const [isOpen, setIsOpen] = useState(false);
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, () => setIsOpen(false));
+    const openDropdown = () => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    };
     const [query, setQuery] = useState("");
     const filtered = useMemo(() => {
         const q = query.trim().toLowerCase();
@@ -38,17 +49,30 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    return (_jsxs(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "base", onClick: () => setIsOpen((prev) => !prev), children: [_jsx(Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? _jsx(ChevronUp, { size: 12 }) : _jsx(ChevronDown, { size: 12 })] }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 2, children: _jsxs(VStack, { spacing: 2, align: "stretch", children: [_jsx(Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "lg", onClick: () => (isOpen ? setIsOpen(false) : openDropdown()), children: [_jsx(Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? _jsx(ChevronUp, { size: 12 }) : _jsx(ChevronDown, { size: 12 })] }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(VStack, { spacing: 2, align: "stretch", children: [_jsx(Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "ArrowDown" && filtered.length > 0) {
                                             e.preventDefault();
                                             focusOption(0);
                                         }
-                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => (_jsx(Box, { as: "button", type: "button", role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.id) === opt.id, tabIndex: i === activeIndex ? 0 : -1, ref: (el) => {
-                                                optionRefs.current[i] = el;
-                                            }, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", _hover: { bg: theme.colors.background[100] }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? theme.colors.background[200] : theme.colors.transparent, onClick: () => {
-                                                onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
-                                                setIsOpen(false);
-                                                setQuery("");
-                                            }, children: _jsx(Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id))), filtered.length === 0 && (_jsx(Box, { px: 2, py: 2, children: _jsx(Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                            const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
+                                            const isActive = i === activeIndex;
+                                            const rowBg = selected
+                                                ? isActive
+                                                    ? rowBackgrounds.selectedActive
+                                                    : rowBackgrounds.selected
+                                                : isActive
+                                                    ? rowBackgrounds.active
+                                                    : theme.colors.transparent;
+                                            return (_jsxs(Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
+                                                    optionRefs.current[i] = el;
+                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", color: optionRowInk(theme.colors, selected), fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), _hover: {
+                                                    bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
+                                                }, bg: rowBg, onClick: () => {
+                                                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
+                                                    setIsOpen(false);
+                                                    setQuery("");
+                                                }, children: [_jsx(Text, { flex: 1, minW: 0, isTruncated: true, children: opt.label }), selected && (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, opt.id));
+                                        }), filtered.length === 0 && (_jsx(Box, { px: 2, py: 2, children: _jsx(Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
 };
 export default CompactSelect;

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

@@ -168,6 +168,6 @@ const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: se
         }
         return filteredSections.map((sec) => (_jsxs(Box, { children: [_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsx(SectionLabel, { label: sec.label, theme: theme }) }), _jsx(Box, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
     };
-    return (_jsxs(Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: !isSearching ? (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", children: title }), _jsx(IconButton, { "aria-label": "Search filters", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : (_jsx(motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 16, color: theme.colors.text[500] }) }), _jsx(Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && (_jsx(InputRightElement, { children: _jsx(IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: _jsx(X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), _jsx(Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && (_jsxs(HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [_jsx(Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), _jsx(Button, { flex: 1, colorScheme: "primary", color: theme.colors.onPrimary, size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
+    return (_jsxs(Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: !isSearching ? (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", children: title }), _jsx(IconButton, { "aria-label": "Search filters", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : (_jsx(motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 16, color: theme.colors.text[500] }) }), _jsx(Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && (_jsx(InputRightElement, { children: _jsx(IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: _jsx(X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), _jsx(Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && (_jsxs(HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [_jsx(Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), _jsx(Button, { flex: 1, colorScheme: "primary", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
 };
 export default LeftFilterPane;

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

@@ -1,5 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, VStack } from "@chakra-ui/react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VStack } from "@chakra-ui/react";
+import Select from "../../Select/Select.js";
+const OPERATOR_OPTIONS = [
+    { id: "is", label: "is" },
+    { id: "is not", label: "is not" },
+];
 export function SelectOperationControls({ operator, onOperatorChange, size = "xs", ml = "1.25rem", mt = 2, }) {
-    return (_jsx(VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: _jsxs(Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "90px", children: [_jsx("option", { value: "is", children: "is" }), _jsx("option", { value: "is not", children: "is not" })] }) }));
+    return (_jsx(VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: _jsx(Select, { native: false, isSearchable: false, "aria-label": "Operator", size: size, width: "90px", options: OPERATOR_OPTIONS, value: operator, onChange: (option) => option && onOperatorChange(String(option.id)) }) }));
 }

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

@@ -36,7 +36,7 @@ const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, i
         setRefreshDataOnOpen((prev) => !prev);
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     };
-    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${header.label}...`, size: "xs", ref: searchRef, onChange: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": `Filter ${header.label}`, icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${header.label}...`, size: "xs", ref: searchRef, onChange: (e) => {
                                         e.stopPropagation();
                                         debouncedSearch(e.target.value);
                                     }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));

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

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, Input, VStack } from "@chakra-ui/react";
+import { VStack } from "@chakra-ui/react";
+import { useMemo } from "react";
+import Select from "../../Select/Select.js";
+import TextInput from "../../Input/TextInput.js";
 export const TEXT_OPERATORS = [
     "is",
     "is not",
@@ -12,5 +15,6 @@ export const TEXT_OPERATORS = [
 ];
 export const requiresValue = (op) => !(op === "is empty" || op === "is not empty");
 export function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size = "xs", ml = "1.25rem", mt = 2, }) {
-    return (_jsxs(VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [_jsx(Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "110px", children: TEXT_OPERATORS.map((op) => (_jsx("option", { value: op, children: op }, op))) }), requiresValue(operator) && (_jsx(Input, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "100%" }))] }));
+    const options = useMemo(() => TEXT_OPERATORS.map((op) => ({ id: op, label: op })), []);
+    return (_jsxs(VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [_jsx(Select, { native: false, isSearchable: false, "aria-label": "Operator", size: size, width: "110px", options: options, value: operator, onChange: (option) => option && onOperatorChange(String(option.id)) }), requiresValue(operator) && (_jsx(TextInput, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), width: "100%" }))] }));
 }

package/dist/esm/Components/Table/hooks/useTable.js

@@ -1,25 +1,39 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { SortMultiColumnData } from "../../../Utils/table.js";
-const defaultPageSize = 20;
+import { searchAndSortData, SortMultiColumnData } from "../../../Utils/table.js";
+export const DEFAULT_PAGE_SIZE = 20;
+const defaultPageSize = DEFAULT_PAGE_SIZE;
 const mergeColumnWithPreference = (pref, originalCol) => {
+    var _a;
     if (!pref || typeof pref !== "object") {
         return { ...originalCol };
     }
     const next = { ...originalCol };
-    if (typeof pref.isHidden === "boolean") {
-        next.isHidden = pref.isHidden;
-    }
+    next.isHidden =
+        typeof pref.isHidden === "boolean" ? pref.isHidden : (_a = originalCol === null || originalCol === void 0 ? void 0 : originalCol.isHidden) !== null && _a !== void 0 ? _a : false;
     if (typeof pref.label === "string" || typeof pref.label === "number") {
         next.label = pref.label;
     }
     return next;
 };
-const useTable = ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }) => {
+const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }) => {
     var _a, _b;
-    const theme = useCustomTheme();
     const headerRefs = useRef([]);
+    const slotObserver = useRef(null);
     const [columnWidths, setColumnWidths] = useState([]);
+    const [slotWidth, setSlotWidth] = useState(0);
+    // Frozen columns butt against the select-all cell, so its width is watched, not assumed.
+    const slotRef = useCallback((node) => {
+        var _a;
+        (_a = slotObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        slotObserver.current = null;
+        if (!node) {
+            setSlotWidth(0);
+            return;
+        }
+        const observer = new ResizeObserver(() => setSlotWidth(node.offsetWidth));
+        observer.observe(node);
+        slotObserver.current = observer;
+    }, []);
     const [selection, setSelection] = useState(selections !== null && selections !== void 0 ? selections : []);
     const [columnsSort, setColumnsSort] = useState([]);
     const [currentPage, setCurrentPage] = useState(0);
@@ -63,53 +77,65 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
             }));
         }
     }, [tablePreferences, columns, defaultVisibleColumns]);
-    const tableContainerStyles = useMemo(() => ({
-        borderRadius: "10px 0 0 10px",
-        borderWidth: "0px 0px 0px 5px",
-        borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : theme.colors.boxborder[500],
-        boxShadow: theme.shadows.lg,
-        maxHeight: "50vh",
-        overflowY: "auto",
-    }), [tableBorderColor, theme]);
-    const prevIsContent = useRef(false);
-    const prevIsLink = useRef(false);
     const isContent = useMemo(() => {
-        const result = tableData.some((o) => o.content);
-        prevIsContent.current = result;
-        return result;
+        return tableData.some((o) => o.content);
     }, [tableData.length === 0 ? 0 : (_a = tableData[0]) === null || _a === void 0 ? void 0 : _a.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
     const isLink = useMemo(() => {
-        const result = tableData.some((o) => o.onLink || o.onDelete || o.onEdit);
-        prevIsLink.current = result;
-        return result;
+        return tableData.some((o) => o.onLink || o.onDelete || o.onEdit);
     }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(() => {
         const widths = headerRefs.current.map((ref) => (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
         setColumnWidths(widths);
     }, []);
+    const prevLengthRef = useRef(tableData.length);
+    useEffect(() => {
+        if (prevLengthRef.current === tableData.length)
+            return;
+        prevLengthRef.current = tableData.length;
+        if (!isServerPagination)
+            setCurrentPage(0);
+    }, [tableData.length, isServerPagination]);
+    const hasColumnSearch = useMemo(() => Object.values(columnsSearch).some((value) => value.trim() !== ""), [columnsSearch]);
+    // Column search runs before the page slice, or it would only ever see one page.
+    const searchedData = useMemo(() => (hasColumnSearch ? searchAndSortData(tableData, columnsSearch) : tableData), [hasColumnSearch, columnsSearch, tableData]);
     const pages = useMemo(() => {
         if (isServerPagination) {
             return Math.ceil(totalRecords / (rowsPerPage || 1));
         }
-        return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
+        return isPagination ? Math.ceil(searchedData.length / rowsPerPage) : 0;
     }, [
         isPagination,
         rowsPerPage,
-        tableData.length,
+        searchedData.length,
         totalRecords,
         isServerPagination,
     ]);
     const startRow = useMemo(() => (!isPagination ? 0 : currentPage * rowsPerPage), [currentPage, isPagination, rowsPerPage]);
-    const endRow = useMemo(() => (!isPagination ? tableData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, tableData.length]);
+    const endRow = useMemo(() => (!isPagination ? searchedData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, searchedData.length]);
     const filteredData = useMemo(() => {
         if (isServerPagination) {
-            return tableData;
+            return searchedData;
         }
-        const sortedData = SortMultiColumnData(tableData, columnsSort);
+        const sortedData = SortMultiColumnData(searchedData, columnsSort);
         return sortedData.slice(startRow, endRow);
-    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
-    const handlePageSizeChange = (event) => {
-        const value = Number(event.target.value);
+    }, [columnsSort, startRow, endRow, searchedData, isServerPagination]);
+    const searchKey = useMemo(() => JSON.stringify(columnsSearch), [columnsSearch]);
+    const prevSearchKey = useRef(searchKey);
+    useEffect(() => {
+        if (prevSearchKey.current === searchKey)
+            return;
+        prevSearchKey.current = searchKey;
+        setCurrentPage(0);
+    }, [searchKey]);
+    // A narrower result set can strand the user on a page that no longer exists.
+    useEffect(() => {
+        if (isServerPagination || !isPagination)
+            return;
+        const lastPage = Math.max(0, pages - 1);
+        setCurrentPage((page) => Math.min(page, lastPage));
+    }, [pages, isServerPagination, isPagination]);
+    const handlePageSizeChange = (size) => {
+        const value = Number(size);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
         if (onNoOfRowsPerPageChange) {
             onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
@@ -198,14 +224,16 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
     };
     return {
         tableData,
-        tableContainerStyles,
         isContent,
         isLink,
         headerRefs,
         columnWidths,
+        slotRef,
+        slotWidth,
         handleSort,
         handleCheckbox,
         filteredData,
+        searchedData,
         startRow,
         endRow,
         selection,

package/dist/esm/Components/Table/settings/ManageColumns.js

@@ -4,9 +4,13 @@ import { Box, Flex, IconButton, Input, List, ListItem, Text, } from "@chakra-ui/
 import Checkbox from "../../Checkbox/Checkbox.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
 import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
     const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     const [searchTerm, setSearchTerm] = useState("");
     const [draggedItemIndex, setDraggedItemIndex] = useState(null);
     const [error, setError] = useState(null);
@@ -70,22 +74,22 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
             setError(null);
         }
     };
-    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "lg", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: accentTextOnCanvas(theme.colors.red, theme.colors.red[50]), fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "lg" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.backgroundColor.subtle, px: 2, py: 1, borderRadius: "lg", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
                     const isDraggingThisItem = draggedItemIndex === index;
                     const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
                     const realIndex = items.findIndex((i) => i.id === item.id);
                     return (_jsxs(ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
                             ? theme.colors.primary[100]
                             : isDropZone
-                                ? theme.colors.primary[50]
-                                : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
+                                ? rowBackgrounds.selected
+                                : "transparent", display: "flex", alignItems: "center", borderRadius: "lg", border: "1px solid", borderColor: isDraggingThisItem
                             ? theme.colors.primary[400]
-                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
-                            bg: theme.colors.gray[50],
-                            borderColor: theme.colors.border[200],
-                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
-                                    color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
-                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
-                })) : (_jsx(Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: transitionFor(["background-color", "border-color"]), _hover: {
+                            bg: rowBackgrounds.active,
+                            borderColor: theme.colors.boxborder[200],
+                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                                    color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
+                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                })) : (_jsx(Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 export default ManageColumns;

package/dist/esm/Components/Table/settings/TableSettings.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, IconButton, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Tabs, TabList, TabPanels, Tab, TabPanel, Text, } from "@chakra-ui/react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { motion } from "framer-motion";
 import ManageColumns from "./ManageColumns.js";
 import Button from "../../Button/Button.js";
@@ -8,6 +8,8 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { Settings, Check } from "lucide-react";
 import ToolTip from "../../ToolTip/ToolTip.js";
+import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 const MotionModalContent = motion(ModalContent);
 const DENSITY_OPTIONS = [
     { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
@@ -16,6 +18,7 @@ const DENSITY_OPTIONS = [
 ];
 const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
     const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     const childInputMethodsRef = useRef({});
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(0);
@@ -45,12 +48,12 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
         },
         _hover: { color: theme.colors.text[600] },
     };
-    return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
+    return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: transitionFor(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
                         color: theme.colors.accentText
-                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.border[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
-                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
+                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
                                                             "& [role='listitem'], & > div > div": {
                                                                 py: "4px !important",
@@ -68,7 +71,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
-                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
-                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.border[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 export default TableSettings;

package/dist/esm/Components/Table/variants/TableVariantContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext, useMemo } from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { classicPreset } from "./classic.js";
+const TableVariantContext = createContext(null);
+export const TableVariantProvider = TableVariantContext.Provider;
+/** No provider means the table as it always was — the default is a variant, not a gap. */
+export function useTableVariant() {
+    const provided = useContext(TableVariantContext);
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
+    return useMemo(() => provided !== null && provided !== void 0 ? provided : classicPreset(theme.colors, isDark), [provided, theme.colors, isDark]);
+}

package/dist/esm/Components/Table/variants/classic.js

@@ -0,0 +1,45 @@
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
+import { stripeFill } from "./stripe.js";
+/**
+ * The table as it shipped. Pinned by snapshot: every value here is read off the
+ * live component, so adding a variant cannot move it.
+ */
+export const classicPreset = (colors, isDark) => {
+    const headerBg = colors.table.hover[200];
+    return {
+        header: {
+            bg: headerBg,
+            ink: accentTextOnCanvas(colors.secondary, headerBg),
+            fontSize: 13,
+            fontWeight: 600,
+            textTransform: "capitalize",
+            letterSpacing: "normal",
+            height: "45px",
+            ruleColor: colors.boxborder[200],
+            showColumnRule: true,
+            actions: "always",
+        },
+        row: {
+            hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
+            hoverScope: "cell",
+            ruleColor: colors.boxborder[200],
+            frozenRuleColor: colors.boxborder[300],
+            selectedBg: colors.primary.opacity[16],
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: false,
+            stripeBg: stripeFill(colors),
+        },
+        slot: {
+            width: "6",
+            rest: "checkbox",
+            indexInk: colors.textMuted,
+            centered: false,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "bleed",
+            pillRadius: "0",
+        },
+    };
+};

package/dist/esm/Components/Table/variants/index.js

@@ -0,0 +1,9 @@
+import { classicPreset } from "./classic.js";
+import { studioPreset } from "./studio.js";
+/** Adding a variant is one file and one union member — no component changes. */
+export const TABLE_VARIANTS = {
+    classic: classicPreset,
+    studio: studioPreset,
+};
+export * from "./tokens.js";
+export { classicPreset, studioPreset };

package/dist/esm/Components/Table/variants/pillInk.js

@@ -0,0 +1,18 @@
+import { AA_NORMAL_TEXT } from "../../../Theme/tokens/builders/accentText.js";
+import { compositeOver } from "../../../Theme/tokens/builders/color.js";
+import { liftToContrast } from "../../../Theme/tokens/builders/outlineRung.js";
+const cache = new Map();
+/**
+ * A consumer `statusColors` hex is a FILL, and `pickTableColor` hands it straight back as ink
+ * over a 13%-alpha tint of itself — legible reversed out of a solid cell, ~1.9:1 on a pill.
+ * The palette path is already resolved by `resolveStatusTone`; this rescues the override path.
+ */
+export function resolvePillInk(ink, soft, surface) {
+    const key = `${ink}|${soft}|${surface}`;
+    const hit = cache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const resolved = liftToContrast(ink, compositeOver(soft, surface), AA_NORMAL_TEXT);
+    cache.set(key, resolved);
+    return resolved;
+}

package/dist/esm/Components/Table/variants/stripe.js

@@ -0,0 +1,3 @@
+import { liftToContrast } from "../../../Theme/tokens/builders/outlineRung.js";
+export const STRIPE_STEP = 1.04;
+export const stripeFill = (colors) => liftToContrast(colors.table.hover[50], colors.background[50], STRIPE_STEP);

package/dist/esm/Components/Table/variants/studio.js

@@ -0,0 +1,48 @@
+import { CHROME_RULE, MIN_PERCEPTIBLE_STEP, liftToContrast, } from "../../../Theme/tokens/builders/outlineRung.js";
+import { getTableRowHoverStyle } from "../components/tableRowHoverStyle.js";
+import { stripeFill } from "./stripe.js";
+/**
+ * Quieter chrome, one rule instead of a grid, and a slot that rests on the row
+ * number. Every colour is lifted against the surface it actually sits on.
+ */
+export const studioPreset = (colors, isDark) => {
+    const surface = colors.background[50];
+    // Studio drops the per-column rule, so the one line left has to be visible on
+    // every brand — `boxborder[200]` measures as low as 1.09:1 on some of them.
+    const rule = liftToContrast(colors.boxborder[200], surface, CHROME_RULE);
+    return {
+        header: {
+            bg: surface,
+            ink: colors.text[500],
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            height: "40px",
+            ruleColor: rule,
+            showColumnRule: false,
+            actions: "hover",
+        },
+        row: {
+            hoverBg: getTableRowHoverStyle(colors, isDark).backgroundColor,
+            hoverScope: "row",
+            ruleColor: rule,
+            frozenRuleColor: rule,
+            selectedBg: liftToContrast(colors.primary[50], surface, MIN_PERCEPTIBLE_STEP),
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: true,
+            stripeBg: stripeFill(colors),
+        },
+        slot: {
+            width: "3.5rem",
+            rest: "index",
+            indexInk: colors.textMuted,
+            centered: true,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "pill",
+            pillRadius: "0.375rem",
+        },
+    };
+};

package/dist/esm/Components/Table/variants/tokens.js

@@ -0,0 +1 @@
+export {};