pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

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

@@ -13,7 +13,7 @@ import Pagination from "./components/Pagination.js";
 import TableHeader from "./components/TableHeader.js";
 import TableBody from "./components/TableBody.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { MOTION_MS, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { motionTransition, transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT, MAX_TABLE_HEIGHT, TOOLBAR_HEIGHT, pxOf, rowHeightFor } from "./components/rowMetrics.js";
@@ -26,15 +26,17 @@ import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, p
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
 import TableSettings from "./settings/TableSettings.js";
 import HeaderActions from "./components/HeaderActions.js";
-import VeritcalDivider from "../Divider/Divider.js";
+import VerticalDivider from "../Divider/Divider.js";
 import TableSearch from "./components/TableSearch.js";
 import ActiveFilters from "./filters/ActiveFilters.js";
 import Button from "../Button/Button.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { Filter, EllipsisVertical, X, RefreshCw } from "lucide-react";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 const MotionBox = motion(Box);
 // NOTE: MOTION_EASE as framer bezier points; the motion tokens have no points form yet.
-const PANE_EASE = [0.2, 0, 0, 1];
+const PANE_TRANSITION = { type: "tween", ...motionTransition("base") };
+const PANE_TRANSITION_INSTANT = { ...PANE_TRANSITION, duration: 0 };
 /** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
 export default function Table({ data, columns, onSelection, isLoading, isCheckbox = false, freezedBgColor, freezedTextColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
     url: "",
@@ -387,7 +389,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { "data-testid": "filter-sidebar-pane", initial: false, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", ease: PANE_EASE, duration: prefersReducedMotion ? 0 : MOTION_MS.base / 1000 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: cardRule(theme.colors), style: { height: TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${cardRule(theme.colors)}`, children: [[
+      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { "data-testid": "filter-sidebar-pane", initial: false, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: prefersReducedMotion ? PANE_TRANSITION_INSTANT : PANE_TRANSITION, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: cardRule(theme.colors), style: { height: TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `${BORDER_WIDTHS.hairline} solid ${cardRule(theme.colors)}`, children: [[
                                                 filterSidebar && (_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Box, { as: "button", type: "button", "aria-label": "Filter", "aria-haspopup": filterMode === "modal" ? "dialog" : undefined, "aria-expanded": filterMode === "modal"
                                                                     ? isFilterModalOpen
                                                                     : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
@@ -421,7 +423,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                 headerActions && (_jsx(HeaderActions, { actions: headerActions, selections: selection }, "actions")),
                                             ]
                                                 .filter(Boolean)
-                                                .flatMap((tool, i) => (i === 0 ? [tool] : [_jsx(VeritcalDivider, {}, `divider-${i}`), tool])), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
+                                                .flatMap((tool, i) => (i === 0 ? [tool] : [_jsx(VerticalDivider, {}, `divider-${i}`), tool])), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
                                                                     }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.surfaceRaised, boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, minH: !isTableLoading ? tableMinH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
                                             ...scrollShadowStyles(theme.colors.background[50]),
@@ -451,5 +453,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${cardRule(theme.colors)}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `${BORDER_WIDTHS.hairline} solid ${cardRule(theme.colors)}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

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

@@ -4,8 +4,10 @@ import { SquarePen, Trash2 } from "lucide-react";
 import React from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
-import VeritcalDivider from "../../Divider/Divider.js";
+import VerticalDivider from "../../Divider/Divider.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { bandOn } from "../../../Theme/tokens/builders/planeStep.js";
+const hoverFill = (colors) => bandOn(colors.background[100], colors.background[50]);
 const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
     const { colors } = useCustomTheme();
     const styledIcon = icon ? React.cloneElement(icon, {
@@ -16,8 +18,8 @@ const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hov
     const isButton = !!onClick && !customComponent;
     return (_jsxs(Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: colors.text[500], px: 2, py: 1, borderRadius: "lg", _hover: isHoverEnabled
             ? {
-                color: hoverColor ? hoverColor : accentTextOnCanvas(colors.primary, colors.background[100]),
-                bg: colors.background[100],
+                color: hoverColor ? hoverColor : accentTextOnCanvas(colors.primary, hoverFill(colors)),
+                bg: hoverFill(colors),
             }
             : {}, transition: transitionFor(["color", "background-color"], "base"), children: [customComponent, styledIcon, " ", name] }));
 };
@@ -33,9 +35,9 @@ const HeaderActions = ({ actions, selections, }) => {
                     return (_jsx(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
                 }
                 return null;
-            }), hasSelections && (_jsxs(_Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && (_jsx(ListItem, { icon: _jsx(Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && (_jsx(ListItem, { icon: _jsx(SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: accentTextOnCanvas(colors.primary, colors.background[100]) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
+            }), hasSelections && (_jsxs(_Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && (_jsx(ListItem, { icon: _jsx(Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && (_jsx(ListItem, { icon: _jsx(SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: accentTextOnCanvas(colors.primary, hoverFill(colors)) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
                         if ("type" in item && item.type === "divider") {
-                            return _jsx(VeritcalDivider, {}, index);
+                            return _jsx(VerticalDivider, {}, index);
                         }
                         const actionItem = item;
                         if (!actionItem.isStatic) {

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

@@ -18,6 +18,9 @@ import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import { DETAIL_SLOT_PX, RowDetailRow, RowDetailToggle, detailDomIds } from "./rowDetail.js";
 import { useRowMeasurer } from "./rowMeasurer.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+import { onActivationKey } from "../../Common/activationKey.js";
+import { rowFocusRingSx } from "./rowFocusRing.js";
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -50,6 +53,7 @@ const StatusCell = ({ value, onSolid, align, }) => (_jsx(Box, { display: "flex",
 // the group header already uses, so an override hex behaves identically in both.
 const StatusPill = ({ value, soft, ink, radius, }) => (_jsx(Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
+const NO_OFFSETS = [];
 const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, rowDetail, isDetailOpen = false, detailLeft = 0, detailColSpan = 0, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, measurer, }) => {
     const mainRowRef = useRef(null);
     const expandedRowRef = useRef(null);
@@ -75,6 +79,12 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
             });
         }
     }, [row, onRowClick]);
+    const keyboardHeader = onRowClick && !isLoading ? columns.find((c) => !c.isHidden && !c.node) : undefined;
+    const handleRowKeyDown = useCallback((event) => {
+        if (event.target !== event.currentTarget || event.repeat || !keyboardHeader)
+            return;
+        onActivationKey(() => handleCellClick(keyboardHeader))(event);
+    }, [keyboardHeader, handleCellClick]);
     const variant = useTableVariant();
     const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
     const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
@@ -85,6 +95,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
         : accentSx;
     const restsOnIndex = variant.slot.rest === "index";
     const rowSx = {
+        ...(keyboardHeader ? rowFocusRingSx(theme.colors) : {}),
         ...(variant.row.hoverScope === "row"
             ? { "&:hover > td[data-hoverable='true']": { backgroundColor: variant.row.hoverBg } }
             : {}),
@@ -111,7 +122,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
     const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
     const restBg = isStriped ? variant.row.stripeBg : theme.colors.background[50];
-    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: transitionFor(["opacity"], "base"), sx: { ...rowSx, ...reducedMotionSx() }, children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: _jsxs(Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && (_jsx(Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: transitionFor(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: rowIndex + 1 })), _jsx(Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && (_jsx(Td, { w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && (_jsx(RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
+    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, tabIndex: keyboardHeader ? 0 : undefined, onKeyDown: keyboardHeader ? handleRowKeyDown : undefined, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: transitionFor(["opacity"], "base"), sx: { ...rowSx, ...reducedMotionSx() }, children: [isContent && (_jsx(Td, { w: "6", p: 0, fontSize: "sm", background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, {})) : (_jsx(ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: _jsxs(Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && (_jsx(Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: transitionFor(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: rowIndex + 1 })), _jsx(Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && (_jsx(Td, { w: `${DETAIL_SLOT_PX}px`, minW: `${DETAIL_SLOT_PX}px`, maxW: `${DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && (_jsx(RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
                         var _a, _b, _c, _d;
                         if (header.isHidden)
                             return null;
@@ -126,14 +137,14 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
                         const bleedBg = statusColor === null || statusColor === void 0 ? void 0 : statusColor.soft;
                         const bleedInk = statusColor === null || statusColor === void 0 ? void 0 : statusColor.text;
                         const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
-                        return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, id: hasDetail && headerIndex === firstDataColIndex ? detailIds === null || detailIds === void 0 ? void 0 : detailIds.cellId : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
+                        return (_jsx(Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, id: hasDetail && headerIndex === firstDataColIndex ? detailIds === null || detailIds === void 0 ? void 0 : detailIds.cellId : undefined, onClick: () => handleCellClick(header), fontSize: "sm", fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
                                 ? "none"
-                                : `0.063rem solid ${isFrozen || isChecked
+                                : `${BORDER_WIDTHS.hairline} solid ${isFrozen || isChecked
                                     ? variant.row.frozenRuleColor
                                     : variant.row.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isBleed ? bleedInk : variant.cells.ink, "data-hoverable": canHover ? "true" : "false", _hover: variant.row.hoverScope === "row" || !canHover
                                 ? EMPTY_HOVER
                                 : hoverStyle, children: isBleed ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: bleedInk, align: header.align })) : isStatus && statusColor ? (_jsx(StatusPill, { value: normalizeTableCellValue(row[header.id]), soft: statusColor.soft, ink: resolvePillInk(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
-                    }), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : restBg, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
+                    }), isLink && (_jsx(Td, { w: 2, p: 0, fontSize: "sm", background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : restBg, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
                         (isLink ? 1 : 0), p: 2, children: _jsx(Box, { p: 2, bg: theme.colors.background[50], borderRadius: "lg", children: rowContent(row) }) }) })), detailOpen && detailIds && (_jsx(RowDetailRow, { ref: detailRowRef, id: detailIds.detailId, labelledBy: detailIds.cellId, colSpan: detailColSpan, bg: theme.colors.backgroundColor.secondary, borderColor: variant.row.ruleColor, noBorders: noBorders, children: detailNode }))] }));
@@ -303,11 +314,14 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         (isContent ? 1 : 0) +
         (rowDetail ? 1 : 0) +
         (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink, rowDetail]);
+    const hasFrozenColumn = useMemo(() => columns.some((column) => column.isFreeze), [columns]);
     const leftOffsets = useMemo(() => {
+        if (!hasFrozenColumn)
+            return NO_OFFSETS;
         const checkboxOffset = (isCheckbox ? slotWidth : 0) + detailWidth;
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
-    }, [columnWidths, isCheckbox, slotWidth, detailWidth]);
-    const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
+    }, [hasFrozenColumn, columnWidths, isCheckbox, slotWidth, detailWidth]);
+    const borderStyle = useMemo(() => noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
     const selectedBg = variant.row.selectedBg;
@@ -425,7 +439,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
         return (_jsxs(_Fragment, { children: [gTopPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
                     var _a;
-                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: groupVirtualize && rowDetail ? measurer : undefined }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
+                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: rowDetail ? detailLeft : 0, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: groupVirtualize && rowDetail ? measurer : undefined }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
                 }), gBottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
     }
     return (_jsxs(_Fragment, { children: [isLoading && data.length > 0 && (_jsx(Tr, { children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: _jsx(Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: _jsx(Spinner, { size: "sm", color: theme.colors.accentText }) }) }) })), shouldVirtualize && topPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: topPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
@@ -434,7 +448,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
                 const rowIndex = startRow + index;
                 const isExpanded = expandedRows.has(rowIndex);
                 const isChecked = selectionsSet.has(getRowId(row));
-                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: shouldVirtualize ? measurer : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
+                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: rowDetail ? detailLeft : 0, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: shouldVirtualize ? measurer : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
             }), shouldVirtualize && bottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
 };
 export default TableBody;

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

@@ -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: "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"] }))] }) }) }));
+    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,6 +1,6 @@
 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";
@@ -17,6 +17,7 @@ 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);
     const variant = useTableVariant();
@@ -30,7 +31,7 @@ export default memo(TableHeader);
 const SelectAllCell = memo(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = useCustomTheme();
     const variant = useTableVariant();
-    return (_jsx(Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isDisabled: isLoading, 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();
@@ -38,11 +39,11 @@ const LoadingHeaderCells = ({ noBorders }) => {
 };
 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();
@@ -65,6 +66,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, detailWidth
     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
@@ -74,6 +76,13 @@ const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, detailWidth
         : (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc"
             ? "descending"
             : undefined;
+    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;
@@ -99,22 +108,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, slotWidth, detailWidth
         isSortActive ||
         openFilterId === header.id ||
         !!columnsSearch[header.id];
-    return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffset}px` : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+    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: 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: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
-                                let direction = "asc";
-                                if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
-                                    direction = "desc";
-                                }
-                                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/rowDetail.js

@@ -3,12 +3,13 @@ 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" : `0.063rem solid ${ruleColor}`, children: _jsx(VisuallyHidden, { children: "Row details" }) }));
+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" : `0.063rem solid ${borderColor}`, children: _jsx(Box, { px: 4, py: 3, children: children }) }) })));
+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/filters/ActiveFilters.js

@@ -3,15 +3,18 @@ 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 { focusVisibleStyles } from "../../../Theme/chakra/focusRing.styles.js";
 import { columnLabelText } from "../columnLabel.js";
-import VeritcalDivider from "../../Divider/Divider.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 filterTone = resolveSoftTone(theme.colors, theme.colors.primary);
+    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) {
@@ -39,9 +42,9 @@ 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: filterTone.bg, borderRadius: "full", border: `0.063rem solid ${filterTone.border}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: filterTone.fg, whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
+    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, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                            }, 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", borderRadius: "sm", sx: focusVisibleStyles(theme.colors), children: "Clear All" }))] }) }));
 });

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

@@ -8,6 +8,7 @@ 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]);
@@ -50,7 +51,7 @@ 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: "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) => {
+    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);

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: "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" })] }))] }));
+    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;