pixelize-design-library 2.4.2 → 3.0.0

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

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, IconButton, Td, Text, Tr } from "@chakra-ui/react";
 import { ChevronDown, ChevronRight, Plus } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.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.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: "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: `${BORDER_WIDTHS.hairline} 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: "px", 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

@@ -1,58 +1,72 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Spinner, Th, Tr } from "@chakra-ui/react";
-import { memo, useState } from "react";
+import { memo, useCallback, useState } from "react";
 import { calculateLeftOffset } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import TableFilters from "../filters/TableFilters.js";
+import { columnLabelText } from "../columnLabel.js";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
+import Skeletons from "../../Skeletons/Skeletons.js";
 import { useTableVariant } from "../variants/TableVariantContext.js";
-const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
+import { DETAIL_SLOT_PX, RowDetailHeaderCell } from "./rowDetail.js";
+import { LOADING_PLACEHOLDER_COLUMNS } from "./TableLoading.js";
+const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
+const NEXT_SORT = { none: "asc", asc: "desc", desc: "none" };
+const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail = false, 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) => {
+    const variant = useTableVariant();
+    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 })), hasDetail && (_jsx(RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), isLoading && !columns.some((header) => !(header === null || header === void 0 ? void 0 : header.isHidden)) && (_jsx(LoadingHeaderCells, { noBorders: noBorders })), 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, detailWidth: hasDetail ? DETAIL_SLOT_PX : 0, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, columnLabelText(header)));
             }), 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();
     const variant = useTableVariant();
-    return (_jsx(Th, { 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: variant.slot.centered ? "center" : "flex-start", 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" })) }) }));
+    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: "sm", fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} 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, isDisabled: isLoading, isIndeterminate: checked === "indeterminate" })) }) }));
 });
+const LoadingHeaderCells = ({ noBorders }) => {
+    const variant = useTableVariant();
+    return (_jsx(_Fragment, { children: Array.from({ length: LOADING_PLACEHOLDER_COLUMNS }, (_, i) => (_jsx(Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: _jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full" }) }, i))) }));
+};
 const ContentSpacerCell = memo(({ noBorders }) => {
     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 }));
+    return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
 });
 const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
     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 }));
+    return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} 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();
     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: "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: {
+    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, 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, detailWidth = 0, 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) + detailWidth
         : undefined;
     const isSorting = header.isSort
         ? columnsSort.find((o) => o.column === header.id)
         : undefined;
+    const sortState = (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none";
     const activeSorts = columnsSort.filter((o) => o.direction !== "none");
     const sortPriority = activeSorts.length > 1 && isSorting && isSorting.direction !== "none"
         ? activeSorts.findIndex((o) => o.column === header.id) + 1
@@ -62,7 +76,13 @@ 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 handleSortClick = useCallback(() => handleSort(header.id, NEXT_SORT[sortState]), [handleSort, header.id, sortState]);
+    const handleSearch = useCallback((searchVal) => setColumnsSearch((prev) => ({ ...prev, [header.id]: searchVal })), [setColumnsSearch, header.id]);
+    const handleFilterClose = useCallback(() => {
+        setIsHovered(false);
+        setOpenFilterId(null);
+    }, [setOpenFilterId]);
+    const handleFilterOpen = useCallback(() => setOpenFilterId(header.id), [setOpenFilterId, header.id]);
     const handleMouseDown = (e) => {
         const parentBox = e.target
             .parentElement;
@@ -88,22 +108,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
         isSortActive ||
         openFilterId === header.id ||
         !!columnsSearch[header.id];
-    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+    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" : `${BORDER_WIDTHS.hairline} 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: "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", opacity: showActions ? 1 : 0, transition: "opacity 0.2s ease-in-out", _focusWithin: { opacity: 1 }, 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: () => {
-                                let direction = "asc";
-                                if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
-                                    direction = "desc";
-                                }
-                                else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
-                                    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, variant.header.bg), children: sortPriority })), _jsx(TableFilters, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
-                                ...prev,
-                                [header.id]: searchVal,
-                            })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {
-                                setIsHovered(false);
-                                setOpenFilterId(null);
-                            }, isOpen: openFilterId === header.id, onOpen: () => setOpenFilterId(header.id) })] }), _jsx("div", { className: "resize-handle", onMouseDown: handleMouseDown })] }) }, index + 1));
+            : `${BORDER_WIDTHS.hairline} 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: columnLabelText(header), sortState: sortState, isVisible: isHovered || isSortActive, handleSortClick: handleSortClick })), 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: handleSearch, columnsSearch: columnsSearch[header.id] || "", onClose: handleFilterClose, isOpen: openFilterId === header.id, onOpen: handleFilterOpen })] }), _jsx("div", { className: "resize-handle", onMouseDown: handleMouseDown })] }) }, index + 1));
 });

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

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Skeleton, SkeletonText, Table, Tbody, Td, Th, Thead, Tr, } from "@chakra-ui/react";
+import { Box, SkeletonText, Table, Tbody, Td, Th, Thead, Tr, } from "@chakra-ui/react";
+import Skeletons from "../../Skeletons/Skeletons.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+const CHECKBOX_PLACEHOLDER_STYLE = { display: "inline-block", verticalAlign: "middle" };
 const TableLoading = () => {
-    return (_jsx(Box, { overflowX: "auto", p: 4, children: _jsxs(Table, { variant: "simple", width: "full", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) })] }) }), _jsx(Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
+    return (_jsx(Box, { overflowX: "auto", p: 4, children: _jsxs(Table, { variant: "simple", width: "full", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) })] }) }), _jsx(Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
 };
 export default TableLoading;
-export const TableBodyLoading = ({ noOfColumns, borderColor, rowsCount = 4, rowHeight = 45, }) => {
-    return (_jsx(_Fragment, { children: Array.from({ length: rowsCount }).map((_, index) => {
-            return (_jsx(Tr, { children: _jsx(Td, { colSpan: noOfColumns, textAlign: "center", border: `1px solid ${borderColor}`, px: 2, pt: 2, pb: 0, height: `${rowHeight}px`, boxSizing: "border-box", children: _jsx(Skeleton, { height: "15px", variant: "shine" }) }) }, index));
-        }) }));
+export const LOADING_PLACEHOLDER_COLUMNS = 4;
+const BAR_WIDTHS = ["72%", "58%", "84%", "46%", "66%", "78%"];
+export const TableBodyLoading = ({ noOfColumns, cells, borderColor, rowsCount = 4, rowHeight = 45, }) => {
+    const layout = cells !== null && cells !== void 0 ? cells : Array.from({ length: noOfColumns }, () => "bar");
+    return (_jsx(_Fragment, { children: Array.from({ length: rowsCount }).map((_, row) => (_jsx(Tr, { "aria-hidden": "true", children: layout.map((kind, col) => (_jsxs(Td, { px: kind === "checkbox" ? 0 : 3, py: 0, height: `${rowHeight}px`, boxSizing: "border-box", border: "none", borderBottom: `${BORDER_WIDTHS.hairline} solid ${borderColor}`, textAlign: kind === "checkbox" ? "center" : undefined, children: [kind === "checkbox" && (_jsx(Skeletons, { type: "skeleton", height: "1rem", width: "1rem", borderRadius: "sm", style: CHECKBOX_PLACEHOLDER_STYLE })), kind === "bar" && (_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: BAR_WIDTHS[(row * 3 + col) % BAR_WIDTHS.length], borderRadius: "full" }))] }, col))) }, row))) }));
 };

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.boxborder[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/rowDetail.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, IconButton, Td, Th, Tr, VisuallyHidden } from "@chakra-ui/react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+export const DETAIL_SLOT_PX = 40;
+export const detailDomIds = (prefix, rowId) => {
+    const safe = `${prefix}-${rowId}`.replace(/\s+/g, "_");
+    return { cellId: `${safe}-cell`, detailId: `${safe}-detail` };
+};
+export const RowDetailHeaderCell = ({ left, bg, ruleColor, noBorders, }) => (_jsx(Th, { scope: "col", w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${DETAIL_SLOT_PX}px`, p: 0, boxSizing: "border-box", backgroundColor: bg, position: "sticky", left: `${left}px`, zIndex: 9, className: "columns sticky-columns", borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${ruleColor}`, children: _jsx(VisuallyHidden, { children: "Row details" }) }));
+export const RowDetailToggle = ({ isOpen, detailId, color, theme, onToggle }) => (_jsx(IconButton, { "aria-label": isOpen ? "Collapse row details" : "Expand row details", "aria-expanded": isOpen, "aria-controls": detailId, icon: isOpen ? _jsx(ChevronDown, { size: 16 }) : _jsx(ChevronRight, { size: 16 }), color: color, size: "sm", variant: "ghost", onClick: onToggle, _focusVisible: focusVisibleRing(theme.colors) }));
+export const RowDetailRow = forwardRef(({ id, labelledBy, colSpan, bg, borderColor, noBorders, children }, ref) => (_jsx(Tr, { ref: ref, id: id, "aria-labelledby": labelledBy, children: _jsx(Td, { colSpan: colSpan, p: 0, bg: bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${borderColor}`, children: _jsx(Box, { px: 4, py: 3, children: children }) }) })));
+RowDetailRow.displayName = "RowDetailRow";

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

@@ -0,0 +1,16 @@
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../../Theme/chakra/focusRing.styles.js";
+const TOP = [0, 1];
+const BOTTOM = [0, -1];
+const LEFT = [1, 0];
+const RIGHT = [-1, 0];
+const RING_BAND = FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH;
+const band = ([x, y], width, color) => `inset ${x * width}px ${y * width}px 0 0 ${color}`;
+const edgeShadow = (edges, { ring, halo }) => [...edges.map((edge) => band(edge, RING_BAND, ring)), ...edges.map((edge) => band(edge, FOCUS_RING_WIDTH, halo))].join(", ");
+// NOTE: each cell draws its slice, so sticky cells keep the ring above scrolled content.
+export const rowFocusRingSx = (colors) => ({
+    "&:focus-visible": { outline: "2px solid transparent", outlineOffset: "-2px" },
+    "&:focus-visible > td": { boxShadow: edgeShadow([TOP, BOTTOM], colors.focusRing) },
+    "&:focus-visible > td:first-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, LEFT], colors.focusRing) },
+    "&:focus-visible > td:last-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, RIGHT], colors.focusRing) },
+    "&:focus-visible > td:only-of-type": { boxShadow: edgeShadow([TOP, BOTTOM, LEFT, RIGHT], colors.focusRing) },
+});

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

@@ -0,0 +1,66 @@
+import { useEffect, useMemo } from "react";
+export const createRowMeasurer = (onHeights) => {
+    const rowOf = new Map();
+    const heightOf = new Map();
+    const elementsOf = new Map();
+    let observer = null;
+    const totalOf = (id) => {
+        var _a, _b;
+        let total = 0;
+        for (const el of (_a = elementsOf.get(id)) !== null && _a !== void 0 ? _a : [])
+            total += (_b = heightOf.get(el)) !== null && _b !== void 0 ? _b : 0;
+        return total;
+    };
+    const onResize = (entries) => {
+        const touched = new Set();
+        for (const { target } of entries) {
+            const id = rowOf.get(target);
+            if (id === undefined)
+                continue;
+            heightOf.set(target, target.offsetHeight);
+            touched.add(id);
+        }
+        const heights = new Map();
+        touched.forEach((id) => {
+            const total = totalOf(id);
+            if (total > 0)
+                heights.set(id, total);
+        });
+        if (heights.size > 0)
+            onHeights(heights);
+    };
+    const untrack = (id, elements) => {
+        for (const el of elements) {
+            observer === null || observer === void 0 ? void 0 : observer.unobserve(el);
+            rowOf.delete(el);
+            heightOf.delete(el);
+        }
+        if (elementsOf.get(id) === elements)
+            elementsOf.delete(id);
+    };
+    return {
+        track(id, elements) {
+            elementsOf.set(id, elements);
+            if (typeof ResizeObserver === "undefined")
+                return () => untrack(id, elements);
+            observer !== null && observer !== void 0 ? observer : (observer = new ResizeObserver(onResize));
+            for (const el of elements) {
+                rowOf.set(el, id);
+                observer.observe(el);
+            }
+            return () => untrack(id, elements);
+        },
+        dispose() {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            observer = null;
+            rowOf.clear();
+            heightOf.clear();
+            elementsOf.clear();
+        },
+    };
+};
+export const useRowMeasurer = (onHeights) => {
+    const measurer = useMemo(() => createRowMeasurer(onHeights), [onHeights]);
+    useEffect(() => () => measurer.dispose(), [measurer]);
+    return measurer;
+};

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

@@ -0,0 +1,11 @@
+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 MAX_TABLE_HEIGHT = 500;
+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

@@ -3,15 +3,22 @@ import React, { useCallback, useMemo } from "react";
 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 { accentTextOnCanvas, isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../../Theme/tokens/builders/planeStep.js";
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
-import VeritcalDivider from "../../Divider/Divider.js";
+import { focusVisibleStyles } from "../../../Theme/chakra/focusRing.styles.js";
+import { columnLabelText } from "../columnLabel.js";
+import VerticalDivider from "../../Divider/Divider.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
 const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
     const theme = useCustomTheme();
+    const stripFill = bandOn(theme.colors.background[100], theme.colors.background[50]);
+    const filterTone = resolveSoftTone(theme.colors, theme.colors.primary, isDarkCanvas(theme.colors.backgroundColor.main) ? stripFill : undefined);
     const columnLabelMap = useMemo(() => {
         const map = new Map();
         for (const col of columns) {
-            map.set(col.id, col.label);
+            map.set(col.id, columnLabelText(col));
         }
         return map;
     }, [columns]);
@@ -35,10 +42,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: stripFill, 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(VerticalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: filterTone.bg, borderRadius: "full", border: `${BORDER_WIDTHS.hairline} 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, stripFill), 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;

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

@@ -1,11 +1,24 @@
 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 { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
+import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
+import { optionRowSpec, OPTION_ROW_RADIUS } from "../../../Theme/tokens/primitives/optionRowSizes.js";
+import { optionRowCursorSx, optionRowInk, optionRowWeight } from "../../Select/optionRowInk.js";
+import { useExclusiveOverlay } from "../../../Hooks/useExclusiveOverlay.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.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 +51,21 @@ 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: `${BORDER_WIDTHS.hairline} 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: raisedRule(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                            const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
+                                            const isActive = i === activeIndex;
+                                            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), bg: "transparent", ...optionRowCursorSx(rowBackgrounds), 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/FilterDatePicker.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useState } from "react";
+import Skeletons from "../../Skeletons/Skeletons.js";
+import { lazyWithRetry } from "../../../Utils/lazyWithRetry.js";
+import { CONTROL_SIZES } from "../../../Theme/tokens/primitives/controlSizes.js";
+let loadedPicker = null;
+const loadDatePicker = () => import("../../DatePicker/DatePicker.js").then((mod) => {
+    loadedPicker = mod.default;
+    return mod;
+});
+const LazyDatePicker = lazyWithRetry(loadDatePicker);
+export const preloadFilterDatePicker = () => {
+    if (!loadedPicker)
+        loadDatePicker().catch(() => undefined);
+};
+/** The Table's date filter control; DatePicker and date-fns load on first use. */
+export default function FilterDatePicker(props) {
+    const [DatePicker] = useState(() => loadedPicker !== null && loadedPicker !== void 0 ? loadedPicker : LazyDatePicker);
+    return (_jsx(Suspense, { fallback: _jsx(Skeletons, { type: "skeleton", height: CONTROL_SIZES.sm.height, borderRadius: "md" }), children: _jsx(DatePicker, { ...props }) }));
+}

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

@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, Input, InputGroup, InputLeftElement, InputRightElement, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, VStack, Button, Flex, Icon, IconButton, HStack, } from "@chakra-ui/react";
 import { Search, X } from "lucide-react";
 import { motion } from "framer-motion";
+import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
 import { useOutsideClick } from "@chakra-ui/react";
 import CheckBox from "../../Checkbox/Checkbox.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
@@ -10,7 +11,8 @@ import { RadioButtonGroup } from "../../RadioButton/RadioButton.js";
 import { TextOperationControls } from "./TextOperationControls.js";
 import { SelectOperationControls } from "./SelectOperationControls.js";
 import CompactSelect from "./CompactSelect.js";
-import DatePicker from "../../DatePicker/DatePicker.js";
+import FilterDatePicker, { preloadFilterDatePicker } from "./FilterDatePicker.js";
+import { bandOn, cardRule } from "../../../Theme/tokens/builders/planeStep.js";
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 const getSectionItems = (selected, sectionId) => {
     const value = selected[sectionId];
@@ -45,7 +47,7 @@ const ActiveItemControls = ({ activeItem, sec, setTextOperator, setTextValue })
     if (!activeItem)
         return null;
     if (activeItem.type === "date") {
-        return (_jsx(DatePicker, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
+        return (_jsx(FilterDatePicker, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
     }
     if (activeItem.type === "text") {
         return (_jsx(TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, activeItem.id, op), onValueChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
@@ -83,14 +85,20 @@ const SectionContent = ({ sec, selected, toggleItem, setTextOperator, setTextVal
                             textOverflow: "ellipsis",
                             ".chakra-checkbox__control": { width: "12px", height: "12px", mt: "2px" },
                             ".chakra-checkbox__label": { lineHeight: "1rem", whiteSpace: "normal", wordBreak: "break-word" },
-                        } }), checked && it.type === "date" && (_jsx(Box, { ml: "1.25rem", children: _jsx(DatePicker, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && (_jsx(TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), onValueChange: (val) => setTextValue(sec.id, it.id, val) })), checked && (it.type === "select" || it.type === "user") && (_jsxs(Box, { children: [_jsx(SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), _jsx(Box, { mt: 2, ml: "1.25rem", children: _jsx(CompactSelect, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: (option) => setTextValue(sec.id, it.id, option) }) })] }))] }, it.id));
+                        } }), checked && it.type === "date" && (_jsx(Box, { ml: "1.25rem", children: _jsx(FilterDatePicker, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && (_jsx(TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), onValueChange: (val) => setTextValue(sec.id, it.id, val) })), checked && (it.type === "select" || it.type === "user") && (_jsxs(Box, { children: [_jsx(SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), _jsx(Box, { mt: 2, ml: "1.25rem", children: _jsx(CompactSelect, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: (option) => setTextValue(sec.id, it.id, option) }) })] }))] }, it.id));
         }) }));
 };
 // ─── Main Component ───────────────────────────────────────────────────────────
 const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading = false, filterMode = "sidebar", }) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
     const [isSearching, setIsSearching] = useState(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search));
     const [localSelected, setLocalSelected] = useState({});
     const searchRef = useRef(null);
+    const hasDateItem = sections.some((sec) => { var _a; return (_a = sec.items) === null || _a === void 0 ? void 0 : _a.some((item) => item.type === "date"); });
+    useEffect(() => {
+        if (hasDateItem)
+            preloadFilterDatePicker();
+    }, [hasDateItem]);
     useEffect(() => {
         setLocalSelected(selectedProp || {});
         if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)
@@ -164,10 +172,10 @@ const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: se
             return (_jsx(Box, { p: 4, textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No filters found" }) }));
         }
         if (filteredSections.length > 1) {
-            return (_jsx(Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => (_jsxs(AccordionItem, { border: "none", children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 3, py: 2, _expanded: { bg: theme.colors.background[100] }, children: [_jsx(SectionLabel, { label: sec.label, flex: true, theme: theme }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
+            return (_jsx(Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => (_jsxs(AccordionItem, { border: "none", children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 3, py: 2, _expanded: { bg: bandOn(theme.colors.background[100], theme.colors.background[50]) }, children: [_jsx(SectionLabel, { label: sec.label, flex: true, theme: theme }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
         }
-        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 filteredSections.map((sec) => (_jsxs(Box, { children: [_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: cardRule(theme.colors), 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: cardRule(theme.colors), borderRadius: "xl", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: cardRule(theme.colors), 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: prefersReducedMotion ? false : { 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: cardRule(theme.colors), 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)) }) }));
 }