pixelize-design-library 2.4.1-beta.9 → 2.4.2-beta.0

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

@@ -13,44 +13,42 @@ const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [openFilterId, setOpenFilterId] = (0, react_2.useState)(null);
-    const RenderCheckbox = (0, react_2.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
-    }, [
-        checked,
-        freezedTextColor,
-        handleCheckbox,
-        isLoading,
-        isSelecting,
-        noBorders,
-        theme.colors,
-    ]);
-    const RenderConent = (0, react_2.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
-    }, [noBorders, theme.colors]);
-    const RenderView = (0, react_2.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
-    }, [noBorders, theme.colors, isActionFreeze]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, children: [isContent && (0, jsx_runtime_1.jsx)(RenderConent, {}), isCheckbox && (0, jsx_runtime_1.jsx)(RenderCheckbox, {}), columns.map((header, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
                 return ((0, jsx_runtime_1.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));
-            }), isLink && (0, jsx_runtime_1.jsx)(RenderView, {})] }));
+            }), isLink && (0, jsx_runtime_1.jsx)(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 exports.default = (0, react_2.memo)(TableHeader);
-const SortingIcon = (0, react_2.memo)(({ sortState, handleSortClick, }) => {
+const SelectAllCell = (0, react_2.memo)(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
+});
+const ContentSpacerCell = (0, react_2.memo)(({ noBorders }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+});
+const ViewSpacerCell = (0, react_2.memo)(({ noBorders, isActionFreeze, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+});
+const SortingIcon = (0, react_2.memo)(({ label, sortState, isVisible, handleSortClick, }) => {
     var _a, _b, _c, _d, _e, _f;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, onClick: handleSortClick, transition: "color 0.2s ease-in-out", color: theme.colors.gray[600], _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.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.gray[600], _hover: {
+            opacity: 1,
             color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50]),
         }, children: [sortState === "none" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { size: 14 }), sortState === "asc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), sortState === "desc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 })] }));
 });
 const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     const [isHovered, setIsHovered] = (0, react_2.useState)(false);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isFrozen = header.isFreeze;
@@ -87,22 +85,17 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbo
         document.addEventListener("mousemove", onMouseMove);
         document.addEventListener("mouseup", onMouseUp);
     };
-    const Sorting = (0, react_2.useCallback)(({ isSorting, header }) => {
-        var _a;
-        return ((0, jsx_runtime_1.jsx)(SortingIcon, { sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", 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);
-            } }));
-    }, [handleSort]);
-    const isFiltersEnabled = (isHovered && header.isSort) ||
-        ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${(_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.boxborder) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, (_q = (_p = (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.table) === null || _o === void 0 ? void 0 : _o.hover) === null || _p === void 0 ? void 0 : _p[200]) !== null && _q !== void 0 ? _q : (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s[50]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", children: [isFiltersEnabled && ((0, jsx_runtime_1.jsx)(Sorting, { isSorting: isSorting, header: header })), sortPriority > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_v = (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.primary) === null || _u === void 0 ? void 0 : _u.opacity) === null || _v === void 0 ? void 0 : _v[16], color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.primary) === null || _x === void 0 ? void 0 : _x[600], children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
+    const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${(_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.boxborder) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, (_q = (_p = (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.table) === null || _o === void 0 ? void 0 : _o.hover) === null || _p === void 0 ? void 0 : _p[200]) !== null && _q !== void 0 ? _q : (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s[50]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", children: [header.isSort && ((0, jsx_runtime_1.jsx)(SortingIcon, { label: String(header.label), sortState: (_t = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _t !== void 0 ? _t : "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 && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_w = (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.primary) === null || _v === void 0 ? void 0 : _v.opacity) === null || _w === void 0 ? void 0 : _w[16], color: (_y = (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.primary) === null || _y === void 0 ? void 0 : _y[600], children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
                                 ...prev,
                                 [header.id]: searchVal,
                             })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {

package/dist/Components/Table/components/TableLoading.d.ts

@@ -6,4 +6,3 @@ export declare const TableBodyLoading: ({ noOfColumns, borderColor, rowsCount, r
     rowsCount?: number;
     rowHeight?: number;
 }) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TableLoading.d.ts.map

package/dist/Components/Table/components/TableSearch.d.ts

@@ -4,4 +4,3 @@ interface TableSearchProps {
 }
 declare const TableSearch: React.FC<TableSearchProps>;
 export default TableSearch;
-//# sourceMappingURL=TableSearch.d.ts.map

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

@@ -31,6 +31,6 @@ const TableSearch = ({ onSearch }) => {
         setQuery(value);
         handleDebounce(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Search", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 5, color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], onClick: handleSearchClick, _hover: { color: (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500] } }) })), showInput ? ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_c = colors === null || colors === void 0 ? void 0 : colors.border) === null || _c === void 0 ? void 0 : _c[500], _focus: { borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500] }, autoFocus: true }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X, color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Search", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], onClick: handleSearchClick, _hover: { color: (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500] } }) })), showInput ? ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_c = colors === null || colors === void 0 ? void 0 : colors.border) === null || _c === void 0 ? void 0 : _c[500], _focus: { borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500] }, autoFocus: true }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
 };
 exports.default = TableSearch;

package/dist/Components/Table/components/tableRowHoverStyle.d.ts

@@ -11,4 +11,3 @@ import type { PaletteProps } from "../../../Theme/tokens/types";
  * `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
  */
 export declare const getTableRowHoverStyle: (colors: PaletteProps, isDark: boolean) => Record<string, string>;
-//# sourceMappingURL=tableRowHoverStyle.d.ts.map

package/dist/Components/Table/filterTypes.d.ts

@@ -2,4 +2,3 @@
  * Column / sidebar filter payloads (dynamic keys, heterogeneous values).
  */
 export type FilterValues = Record<string, unknown>;
-//# sourceMappingURL=filterTypes.d.ts.map

package/dist/Components/Table/filters/ActiveFilters.d.ts

@@ -7,4 +7,3 @@ interface ActiveFiltersProps {
 }
 declare const ActiveFilters: React.FC<ActiveFiltersProps>;
 export default ActiveFilters;
-//# sourceMappingURL=ActiveFilters.d.ts.map

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

@@ -78,11 +78,11 @@ const ActiveFilters = react_1.default.memo(({ columns, columnsSearch, setColumns
             },
             '&::-webkit-scrollbar-track': {
                 background: theme.colors.gray[100],
-                borderRadius: '3px',
+                borderRadius: 'base',
             },
             '&::-webkit-scrollbar-thumb': {
                 background: theme.colors.gray[400],
-                borderRadius: '3px',
+                borderRadius: 'base',
             },
             '&::-webkit-scrollbar-thumb:hover': {
                 background: theme.colors.gray[500],

package/dist/Components/Table/filters/CompactSelect.d.ts

@@ -13,4 +13,3 @@ type Props = {
 };
 declare const CompactSelect: React.FC<Props>;
 export default CompactSelect;
-//# sourceMappingURL=CompactSelect.d.ts.map

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

@@ -16,7 +16,39 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
             return options;
         return options.filter((o) => (o.label || "").toLowerCase().includes(q));
     }, [query, options]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.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: "gray.300", bg: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "0.25rem", onClick: () => setIsOpen((prev) => !prev), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12 })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100", children: [filtered.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: () => {
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const optionRefs = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => setActiveIndex(0), [query, isOpen]);
+    const focusOption = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const handleListKeyDown = (0, react_1.useCallback)((e) => {
+        if (filtered.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filtered.length) % filtered.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filtered.length - 1);
+        }
+    }, [activeIndex, filtered.length, focusOption]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.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: "gray.300", bg: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "base", onClick: () => setIsOpen((prev) => !prev), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12 })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.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" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100", onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => ((0, jsx_runtime_1.jsx)(react_2.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: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: () => {
                                                 onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
                                                 setIsOpen(false);
                                                 setQuery("");

package/dist/Components/Table/filters/LeftFilterPane.d.ts

@@ -38,4 +38,3 @@ export type LeftFilterPaneProps = {
 };
 declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading, filterMode, }: LeftFilterPaneProps) => import("react/jsx-runtime").JSX.Element;
 export default LeftFilterPane;
-//# sourceMappingURL=LeftFilterPane.d.ts.map

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

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

package/dist/Components/Table/filters/SelectOperationControls.d.ts

@@ -5,4 +5,3 @@ export declare function SelectOperationControls({ operator, onOperatorChange, si
     ml?: string | number;
     mt?: string | number;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SelectOperationControls.d.ts.map

package/dist/Components/Table/filters/TableFilters.d.ts

@@ -4,4 +4,3 @@ declare const TableFilters: import("react").MemoExoticComponent<({ header, setCo
     onOpen?: () => void;
 }) => import("react/jsx-runtime").JSX.Element>;
 export default TableFilters;
-//# sourceMappingURL=TableFilters.d.ts.map

package/dist/Components/Table/filters/TextOperationControls.d.ts

@@ -9,4 +9,3 @@ export declare function TextOperationControls({ operator, value, onOperatorChang
     ml?: string | number;
     mt?: string | number;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TextOperationControls.d.ts.map

package/dist/Components/Table/hooks/useDebounce.d.ts

@@ -1,3 +1,2 @@
 declare const useDebounce: (callback: (...args: unknown[]) => void, delay: number) => (...args: unknown[]) => void;
 export default useDebounce;
-//# sourceMappingURL=useDebounce.d.ts.map

package/dist/Components/Table/hooks/useTable.d.ts

@@ -46,4 +46,3 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     selectAllRowsRef: import("react").MutableRefObject<DataObject[] | null>;
 };
 export default useTable;
-//# sourceMappingURL=useTable.d.ts.map

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

@@ -150,6 +150,8 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
     selectionRef.current = selection;
     const onSelectionRef = (0, react_1.useRef)(onSelection);
     onSelectionRef.current = onSelection;
+    const tableDataRef = (0, react_1.useRef)(tableData);
+    tableDataRef.current = tableData;
     // Rows that "select all" should toggle. Defaults to `tableData`, but in grouped
     // "load more" mode the parent points this at the accumulated/rendered rows so
     // select-all covers everything on screen (not just the latest page).
@@ -158,7 +160,7 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
         var _a, _b;
         const current = selectionRef.current;
         if (id === 0) {
-            const rows = (_a = selectAllRowsRef.current) !== null && _a !== void 0 ? _a : tableData;
+            const rows = (_a = selectAllRowsRef.current) !== null && _a !== void 0 ? _a : tableDataRef.current;
             const ids = rows.map((item) => item.id);
             const idSet = new Set(ids);
             const currentSet = new Set(current);
@@ -186,7 +188,9 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
             setSelection(selectedItems);
             (_b = onSelectionRef.current) === null || _b === void 0 ? void 0 : _b.call(onSelectionRef, selectedItems);
         }
-    }, [tableData]);
+    }, 
+    // Empty deps: rows/selection come from refs, so memoized rows survive a new `data`.
+    []);
     const handleColumnPreferences = (columns, extra = {}) => {
         setColumnsList(columns);
         if (savePreferences) {

package/dist/Components/Table/settings/ManageColumns.d.ts

@@ -10,4 +10,3 @@ declare const ManageColumns: ({ columns, items, setItems, childInputMethodsRef,
     childInputMethodsRef: React.Ref<ManageColumnsMethods>;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ManageColumns;
-//# sourceMappingURL=ManageColumns.d.ts.map

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

@@ -33,6 +33,16 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
         setItems(newItems);
     };
     const handleDragEnd = () => setDraggedItemIndex(null);
+    // Keyboard/single-pointer alternative to the drag reorder (WCAG 2.1.1, 2.5.7).
+    const moveItem = (itemId, offset) => {
+        const realIndex = items.findIndex((i) => i.id === itemId);
+        const target = realIndex + offset;
+        if (realIndex === -1 || target < 0 || target >= items.length)
+            return;
+        const newItems = [...items];
+        [newItems[realIndex], newItems[target]] = [newItems[target], newItems[realIndex]];
+        setItems(newItems);
+    };
     // Fix: use the item's actual index in `items`, not the filtered list index
     const toggleCheckbox = (itemId) => {
         const realIndex = items.findIndex((i) => i.id === itemId);
@@ -68,11 +78,11 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                     "&::-webkit-scrollbar": { width: "3px", height: "3px" },
                     "&::-webkit-scrollbar-track": {
                         background: theme.colors.gray[100],
-                        borderRadius: "2px",
+                        borderRadius: "sm",
                     },
                     "&::-webkit-scrollbar-thumb": {
                         background: theme.colors.gray[400],
-                        borderRadius: "2px",
+                        borderRadius: "sm",
                     },
                     "&::-webkit-scrollbar-thumb:hover": {
                         background: theme.colors.gray[500],
@@ -82,6 +92,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                 }, children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
                     const isDraggingThisItem = draggedItemIndex === index;
                     const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
+                    const realIndex = items.findIndex((i) => i.id === item.id);
                     return ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
                             ? theme.colors.primary[100]
                             : isDropZone
@@ -91,11 +102,9 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                             : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
                             bg: theme.colors.gray[50],
                             borderColor: theme.colors.border[200],
-                        }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Drag", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }), variant: "ghost", size: "xs", cursor: "grab", mr: 1, minW: "auto", h: "auto", p: 0, 
-                                // color={theme.colors.gray[300]}
-                                _hover: { color: theme.colors.gray[500], bg: "transparent" } }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                        }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
-                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 })] }, item.id));
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} up`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} down`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
                 })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: "gray.500", textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 exports.default = ManageColumns;

package/dist/Components/Table/settings/TableSettings.d.ts

@@ -8,4 +8,3 @@ declare const TableSettings: ({ columns, onSave, density, onDensityChange, group
     groupBy?: string | number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TableSettings;
-//# sourceMappingURL=TableSettings.d.ts.map

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

@@ -50,20 +50,20 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
         },
         _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[600] },
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table Settings", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table Settings", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Table settings", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: {
                         transform: "scale(1.1)",
                         color: (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[500]
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem" }) }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { pt: 4, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), (0, jsx_runtime_1.jsxs)(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.border) === null || _m === void 0 ? void 0 : _m[200], children: [(0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Density" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Manage Columns" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Group" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
+                    } }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { pt: 4, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), (0, jsx_runtime_1.jsxs)(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.border) === null || _m === void 0 ? void 0 : _m[200], children: [(0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Density" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Manage Columns" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Group" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
                                             "&::-webkit-scrollbar": { width: "3px", height: "3px" },
-                                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "2px" },
-                                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "2px" },
+                                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "sm" },
+                                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "sm" },
                                             "&::-webkit-scrollbar-thumb:hover": { background: theme.colors.gray[500] },
                                             scrollbarWidth: "thin",
                                             scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
                                         }, children: (0, jsx_runtime_1.jsxs)(react_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 1, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             var _a;
                                                             const selected = density === opt.value;
-                                                            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.gray[500], children: opt.desc })] })] }, opt.value));
+                                                            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.gray[500], children: opt.desc })] })] }, opt.value));
                                                         }) }) }), (0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
                                                             "& [role='listitem'], & > div > div": {
                                                                 py: "4px !important",
@@ -81,7 +81,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 .map((opt) => {
                                                                 var _a, _b;
                                                                 const selected = selectedGroup === opt.id;
-                                                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: () => setSelectedGroup(opt.id), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_b = opt.id) !== null && _b !== void 0 ? _b : "__none__")));
+                                                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: () => setSelectedGroup(opt.id), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_b = opt.id) !== null && _b !== void 0 ? _b : "__none__")));
                                                             }) })] })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.border) === null || _p === void 0 ? void 0 : _p[200], pt: 3, pb: 3, px: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 exports.default = TableSettings;

package/dist/Components/Tag/Tag.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { TagProps } from "./TagProps";
 declare const Tag: React.FC<TagProps>;
 export default Tag;
-//# sourceMappingURL=Tag.d.ts.map

package/dist/Components/Tag/Tag.js

@@ -11,13 +11,10 @@ const ICON_SIZE = {
 };
 const Tag = ({ label, colorScheme = "primary", variant = "solid", size = "md", icon, onTagClick, onIconClick, }) => {
     const isInteractive = !!onTagClick;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: isInteractive ? "pointer" : "default", role: isInteractive ? "button" : undefined, "aria-label": isInteractive ? label : undefined, onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: [(0, jsx_runtime_1.jsx)(react_1.TagLabel, { children: label }), icon && ((0, jsx_runtime_1.jsx)(react_1.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], cursor: onIconClick ? "pointer" : "default", onClick: (e) => {
-                    e.stopPropagation();
-                    onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
-                }, transition: "all 0.2s ease", _hover: {
-                    opacity: 0.8,
-                    transform: "scale(1.05)",
-                    cursor: onIconClick ? "pointer" : "default",
-                } }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", children: [isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { as: "button", type: "button", cursor: "pointer", onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: label })) : ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { children: label })), icon &&
+                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, onClick: (e) => {
+                        e.stopPropagation();
+                        onIconClick();
+                    }, display: "inline-flex", alignItems: "center", ml: "0.25rem", transition: "all 0.2s ease", _hover: { opacity: 0.8, transform: "scale(1.05)" }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_1.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
 };
 exports.default = Tag;

package/dist/Components/Tag/Tag.styles.d.ts

@@ -1,3 +1,2 @@
 import { ComponentMultiStyleConfig } from "@chakra-ui/react";
 export declare const Tag: ComponentMultiStyleConfig;
-//# sourceMappingURL=Tag.styles.d.ts.map

package/dist/Components/Tag/Tag.styles.js

@@ -38,8 +38,8 @@ exports.Tag = {
         solid: ({ theme, colorScheme = "primary" }) => {
             var _a, _b, _c, _d;
             const c = swatch(theme, colorScheme);
-            const white = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff";
-            const black = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.black) !== null && _d !== void 0 ? _d : "#000";
+            const white = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_WHITE;
+            const black = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.black) !== null && _d !== void 0 ? _d : accentText_1.DEFAULT_BLACK;
             const fill = c[500];
             const hoverFill = c[600];
             const activeFill = c[700];
@@ -71,7 +71,7 @@ exports.Tag = {
         outline: ({ theme, colorScheme = "primary" }) => {
             var _a, _b, _c;
             const c = swatch(theme, colorScheme);
-            const canvas = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff";
+            const canvas = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : accentText_1.DEFAULT_CANVAS;
             return {
                 container: {
                     border: "0.094rem solid",

package/dist/Components/Tag/TagProps.d.ts

@@ -11,4 +11,3 @@ export interface TagProps {
     size?: TagSize;
     variant?: TagVariant;
 }
-//# sourceMappingURL=TagProps.d.ts.map

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,4 +1,3 @@
 import { TimelineProps } from "./TimelineProps";
 declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
 export default Timeline;
-//# sourceMappingURL=Timeline.d.ts.map