pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pxOf = exports.rowHeightFor = exports.CHECKBOX_SLOT_OFFSET = exports.EMPTY_STATE_HEIGHT = exports.GROUP_HEADER_HEIGHT = exports.TOOLBAR_HEIGHT = exports.DENSITY_ROWS = void 0;
+exports.DENSITY_ROWS = {
+    compact: { height: 32, py: "0.125rem" },
+    normal: { height: 40, py: "0.5rem" },
+    comfortable: { height: 52, py: "0.875rem" },
+};
+exports.TOOLBAR_HEIGHT = 45;
+exports.GROUP_HEADER_HEIGHT = 42;
+exports.EMPTY_STATE_HEIGHT = 200;
+exports.CHECKBOX_SLOT_OFFSET = 50;
+const rowHeightFor = (density) => exports.DENSITY_ROWS[density !== null && density !== void 0 ? density : "normal"].height;
+exports.rowHeightFor = rowHeightFor;
+const pxOf = (length) => parseFloat(length);
+exports.pxOf = pxOf;

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

@@ -42,10 +42,13 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const ActiveFilters = react_1.default.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const filterTone = (0, tone_1.resolveSoftTone)(theme.colors, theme.colors.primary);
     const columnLabelMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         for (const col of columns) {
@@ -73,10 +76,10 @@ const ActiveFilters = react_1.default.memo(({ columns, columnsSearch, setColumns
     if (activeFilters.length === 0) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), activeFilters.map((filter) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: theme.colors.blue[50], borderRadius: "md", border: `0.063rem solid ${theme.colors.blue[200]}`, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.blue, theme.colors.blue[50]), whiteSpace: "nowrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
-                                bg: theme.colors.blue[100],
-                            }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.blue, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), activeFilters.map((filter) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: filterTone.bg, borderRadius: "full", border: `0.063rem solid ${filterTone.border}`, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: filterTone.fg, whiteSpace: "nowrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", className: "clear-all-text", "aria-label": "Clear all filters", fontSize: "sm", bg: "transparent", border: "none", p: 0, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
                         textDecoration: "underline",
-                    }, flexShrink: 0, whiteSpace: "nowrap", children: "Clear All" }))] }) }));
+                    }, flexShrink: 0, whiteSpace: "nowrap", borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: "Clear All" }))] }) }));
 });
 exports.default = ActiveFilters;

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

@@ -48,7 +48,7 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
             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: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "base", onClick: () => (isOpen ? setIsOpen(false) : openDropdown()), children: [(0, jsx_runtime_1.jsx)(react_2.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 ? (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, bg: theme.colors.background[50], 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) => {
+    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: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "lg", onClick: () => (isOpen ? setIsOpen(false) : openDropdown()), children: [(0, jsx_runtime_1.jsx)(react_2.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 ? (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, bg: theme.colors.surfaceRaised, 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);

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

@@ -206,6 +206,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: theme.colors.boxborder[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: theme.colors.background[50], borderRight: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[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: theme.colors.text[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: theme.colors.text[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: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[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", 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: 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: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[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: theme.colors.text[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: theme.colors.text[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: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[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", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
 };
 exports.default = LeftFilterPane;

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

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

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

@@ -1,6 +1,5 @@
 import { ColumnSortingProps, DataObject, TableHeaderProps } from "../TableProps";
 type UseTableProps = {
-    tableBorderColor?: string;
     data: DataObject[];
     isPagination: boolean;
     selections?: (string | number)[];
@@ -14,16 +13,8 @@ type UseTableProps = {
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
     defaultVisibleColumns?: number;
 };
-declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }: UseTableProps) => {
+declare const useTable: ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }: UseTableProps) => {
     tableData: DataObject[];
-    tableContainerStyles: {
-        borderRadius: string;
-        borderWidth: string;
-        borderColor: string;
-        boxShadow: string;
-        maxHeight: string;
-        overflowY: string;
-    };
     isContent: boolean;
     isLink: boolean;
     headerRefs: import("react").MutableRefObject<(HTMLTableCellElement | null)[]>;

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

@@ -1,25 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const table_1 = require("../../../Utils/table");
 const defaultPageSize = 20;
 const mergeColumnWithPreference = (pref, originalCol) => {
+    var _a;
     if (!pref || typeof pref !== "object") {
         return { ...originalCol };
     }
     const next = { ...originalCol };
-    if (typeof pref.isHidden === "boolean") {
-        next.isHidden = pref.isHidden;
-    }
+    next.isHidden =
+        typeof pref.isHidden === "boolean" ? pref.isHidden : (_a = originalCol === null || originalCol === void 0 ? void 0 : originalCol.isHidden) !== null && _a !== void 0 ? _a : false;
     if (typeof pref.label === "string" || typeof pref.label === "number") {
         next.label = pref.label;
     }
     return next;
 };
-const useTable = ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }) => {
+const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }) => {
     var _a, _b;
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const headerRefs = (0, react_1.useRef)([]);
     const [columnWidths, setColumnWidths] = (0, react_1.useState)([]);
     const [selection, setSelection] = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []);
@@ -65,30 +63,24 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
             }));
         }
     }, [tablePreferences, columns, defaultVisibleColumns]);
-    const tableContainerStyles = (0, react_1.useMemo)(() => ({
-        borderRadius: "10px 0 0 10px",
-        borderWidth: "0px 0px 0px 5px",
-        borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : theme.colors.boxborder[500],
-        boxShadow: theme.shadows.lg,
-        maxHeight: "50vh",
-        overflowY: "auto",
-    }), [tableBorderColor, theme]);
-    const prevIsContent = (0, react_1.useRef)(false);
-    const prevIsLink = (0, react_1.useRef)(false);
     const isContent = (0, react_1.useMemo)(() => {
-        const result = tableData.some((o) => o.content);
-        prevIsContent.current = result;
-        return result;
+        return tableData.some((o) => o.content);
     }, [tableData.length === 0 ? 0 : (_a = tableData[0]) === null || _a === void 0 ? void 0 : _a.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
     const isLink = (0, react_1.useMemo)(() => {
-        const result = tableData.some((o) => o.onLink || o.onDelete || o.onEdit);
-        prevIsLink.current = result;
-        return result;
+        return tableData.some((o) => o.onLink || o.onDelete || o.onEdit);
     }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
     (0, react_1.useEffect)(() => {
         const widths = headerRefs.current.map((ref) => (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
         setColumnWidths(widths);
     }, []);
+    const prevLengthRef = (0, react_1.useRef)(tableData.length);
+    (0, react_1.useEffect)(() => {
+        if (prevLengthRef.current === tableData.length)
+            return;
+        prevLengthRef.current = tableData.length;
+        if (!isServerPagination)
+            setCurrentPage(0);
+    }, [tableData.length, isServerPagination]);
     const pages = (0, react_1.useMemo)(() => {
         if (isServerPagination) {
             return Math.ceil(totalRecords / (rowsPerPage || 1));
@@ -200,7 +192,6 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
     };
     return {
         tableData,
-        tableContainerStyles,
         isContent,
         isLink,
         headerRefs,

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

@@ -12,6 +12,7 @@ const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
 const lucide_react_1 = require("lucide-react");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
@@ -78,7 +79,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
             setError(null);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 2, children: [error && ((0, jsx_runtime_1.jsx)(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.red[50]), fontSize: "xs", fontWeight: 500, children: error }) })), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 2, children: [error && ((0, jsx_runtime_1.jsx)(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "lg", border: "1px solid", borderColor: theme.colors.red[200], children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.red[50]), fontSize: "xs", fontWeight: 500, children: error }) })), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "lg" }), !searchTerm.length && ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.backgroundColor.subtle, px: 2, py: 1, borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
                     const isDraggingThisItem = draggedItemIndex === index;
                     const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
                     const realIndex = items.findIndex((i) => i.id === item.id);
@@ -86,14 +87,14 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                             ? theme.colors.primary[100]
                             : isDropZone
                                 ? rowBackgrounds.selected
-                                : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
+                                : "transparent", display: "flex", alignItems: "center", borderRadius: "lg", border: "1px solid", borderColor: isDraggingThisItem
                             ? theme.colors.primary[400]
-                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
+                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: {
                             bg: rowBackgrounds.active,
                             borderColor: theme.colors.boxborder[200],
-                        }, _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: {
+                        }, _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.textMuted }, 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.textMuted : theme.colors.text[700],
-                                } }), (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: theme.colors.textMuted, 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"] })] }));
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.textMuted, 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.textMuted, 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.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 exports.default = ManageColumns;

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

@@ -14,6 +14,7 @@ const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
 const DENSITY_OPTIONS = [
     { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
@@ -52,12 +53,12 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
         },
         _hover: { color: theme.colors.text[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.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: theme.colors.text[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: (0, motion_1.transitionFor)(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
                         color: theme.colors.accentText
-                    } }) }), (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: theme.colors.background[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: theme.colors.boxborder[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, scrollbar_1.scrollbarStyles)(theme.colors), 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) => {
+                    } }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [(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: theme.colors.boxborder[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, scrollbar_1.scrollbarStyles)(theme.colors), 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) => {
                                                             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: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, 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.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, 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.textMuted, 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.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, 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.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, 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.textMuted, 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",
@@ -75,7 +76,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 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: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, 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.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, 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((_a = opt.id) !== null && _a !== void 0 ? _a : "__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.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, 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.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, 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((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
                                                             }) })] })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[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/Table/variants/classic.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.classicPreset = void 0;
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const tableRowHoverStyle_1 = require("../components/tableRowHoverStyle");
+const stripe_1 = require("./stripe");
 /**
  * The table as it shipped. Pinned by snapshot: every value here is read off the
  * live component, so adding a variant cannot move it.
@@ -30,6 +31,7 @@ const classicPreset = (colors, isDark) => {
             selectedBg: colors.primary.opacity[16],
             selectedBarColor: colors.primary[500],
             showSelectedBar: false,
+            stripeBg: (0, stripe_1.stripeFill)(colors),
         },
         slot: {
             width: "6",

package/dist/Components/Table/variants/stripe.d.ts

@@ -0,0 +1,3 @@
+import type { PaletteProps } from "../../../Theme/tokens/types";
+export declare const STRIPE_STEP = 1.04;
+export declare const stripeFill: (colors: PaletteProps) => string;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripeFill = exports.STRIPE_STEP = void 0;
+const outlineRung_1 = require("../../../Theme/tokens/builders/outlineRung");
+exports.STRIPE_STEP = 1.04;
+const stripeFill = (colors) => (0, outlineRung_1.liftToContrast)(colors.table.hover[50], colors.background[50], exports.STRIPE_STEP);
+exports.stripeFill = stripeFill;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.studioPreset = void 0;
 const outlineRung_1 = require("../../../Theme/tokens/builders/outlineRung");
 const tableRowHoverStyle_1 = require("../components/tableRowHoverStyle");
+const stripe_1 = require("./stripe");
 /**
  * Quieter chrome, one rule instead of a grid, and a slot that rests on the row
  * number. Every colour is lifted against the surface it actually sits on.
@@ -33,6 +34,7 @@ const studioPreset = (colors, isDark) => {
             selectedBg: (0, outlineRung_1.liftToContrast)(colors.primary[50], surface, outlineRung_1.MIN_PERCEPTIBLE_STEP),
             selectedBarColor: colors.primary[500],
             showSelectedBar: true,
+            stripeBg: (0, stripe_1.stripeFill)(colors),
         },
         slot: {
             width: "3.5rem",

package/dist/Components/Table/variants/tokens.d.ts

@@ -33,6 +33,8 @@ export type TableVariantTokens = {
         selectedBg: string;
         selectedBarColor: string;
         showSelectedBar: boolean;
+        /** Zebra fill for odd rows when `stripe` is on; a quiet step below `hoverBg`. */
+        stripeBg: string;
     };
     slot: {
         width: string;

package/dist/Components/Tabs/Tabs.d.ts

@@ -0,0 +1,3 @@
+import type { TabsProps } from "./TabsProps";
+declare const Tabs: ({ items, children, value, defaultValue, onChange, variant, size, colorScheme, orientation, activationMode, isLazy, isFitted, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;

package/dist/Components/Tabs/Tabs.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const TabsContext_1 = require("./TabsContext");
+const TabList_1 = __importDefault(require("./components/TabList"));
+const Tab_1 = __importDefault(require("./components/Tab"));
+const TabPanels_1 = __importDefault(require("./components/TabPanels"));
+const TabPanel_1 = __importDefault(require("./components/TabPanel"));
+const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line", size = "sm", colorScheme = "primary", orientation = "horizontal", activationMode = "automatic", isLazy = false, isFitted = false, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) => {
+    const generatedId = (0, react_1.useId)();
+    const baseId = id !== null && id !== void 0 ? id : generatedId;
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = (0, react_1.useState)(() => { var _a; return defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_a = items === null || items === void 0 ? void 0 : items.find((item) => !item.isDisabled)) === null || _a === void 0 ? void 0 : _a.id; });
+    const selectedId = isControlled ? value : internalValue;
+    const [focusedId, setFocusedId] = (0, react_1.useState)(selectedId);
+    const [hasPanels, setHasPanels] = (0, react_1.useState)(() => !!(items === null || items === void 0 ? void 0 : items.some((item) => item.content !== undefined)));
+    (0, react_1.useEffect)(() => {
+        setFocusedId(selectedId);
+    }, [selectedId]);
+    const select = (0, react_1.useCallback)((next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        setFocusedId(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [isControlled, onChange]);
+    const focusTab = (0, react_1.useCallback)((next) => setFocusedId(next), []);
+    const registerPanels = (0, react_1.useCallback)(() => setHasPanels(true), []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        baseId,
+        selectedId,
+        focusedId,
+        select,
+        focusTab,
+        hasPanels,
+        registerPanels,
+        orientation,
+        activationMode,
+        variant,
+        size,
+        colorScheme,
+        isLazy,
+        isFitted,
+    }), [
+        baseId,
+        selectedId,
+        focusedId,
+        select,
+        focusTab,
+        hasPanels,
+        registerPanels,
+        orientation,
+        activationMode,
+        variant,
+        size,
+        colorScheme,
+        isLazy,
+        isFitted,
+    ]);
+    if (children) {
+        return (0, jsx_runtime_1.jsx)(TabsContext_1.TabsContext.Provider, { value: contextValue, children: children });
+    }
+    const hasContent = !!(items === null || items === void 0 ? void 0 : items.some((item) => item.content !== undefined));
+    return ((0, jsx_runtime_1.jsx)(TabsContext_1.TabsContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: orientation === "vertical" ? "row" : "column", alignItems: orientation === "vertical" ? "flex-start" : undefined, gap: orientation === "vertical" ? 4 : 2, children: [(0, jsx_runtime_1.jsx)(TabList_1.default, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items === null || items === void 0 ? void 0 : items.map((item) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: item.id, icon: item.icon, count: item.count, isDisabled: item.isDisabled, children: item.label }, item.id))) }), hasContent ? ((0, jsx_runtime_1.jsx)(TabPanels_1.default, { children: items === null || items === void 0 ? void 0 : items.filter((item) => item.content !== undefined).map((item) => ((0, jsx_runtime_1.jsx)(TabPanel_1.default, { value: item.id, children: item.content }, item.id))) })) : null] }) }));
+};
+exports.default = Tabs;

package/dist/Components/Tabs/TabsContext.d.ts

@@ -0,0 +1,22 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+import type { TabActivationMode, TabsColorScheme, TabsOrientation, TabsVariant } from "./TabsProps";
+export interface TabsContextValue {
+    baseId: string;
+    selectedId: string | undefined;
+    focusedId: string | undefined;
+    select: (value: string) => void;
+    focusTab: (value: string) => void;
+    hasPanels: boolean;
+    registerPanels: () => void;
+    orientation: TabsOrientation;
+    activationMode: TabActivationMode;
+    variant: TabsVariant;
+    size: ControlSize;
+    colorScheme: TabsColorScheme;
+    isLazy: boolean;
+    isFitted: boolean;
+}
+export declare const TabsContext: import("react").Context<TabsContextValue | undefined>;
+export declare const useTabsContext: () => TabsContextValue;
+export declare const tabId: (baseId: string, value: string) => string;
+export declare const panelId: (baseId: string, value: string) => string;

package/dist/Components/Tabs/TabsContext.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelId = exports.tabId = exports.useTabsContext = exports.TabsContext = void 0;
+const react_1 = require("react");
+exports.TabsContext = (0, react_1.createContext)(undefined);
+const useTabsContext = () => {
+    const ctx = (0, react_1.useContext)(exports.TabsContext);
+    if (!ctx)
+        throw new Error("Tabs.List/Tab/Panels/Panel must be rendered inside <Tabs>");
+    return ctx;
+};
+exports.useTabsContext = useTabsContext;
+const tabId = (baseId, value) => `${baseId}-tab-${value}`;
+exports.tabId = tabId;
+const panelId = (baseId, value) => `${baseId}-panel-${value}`;
+exports.panelId = panelId;

package/dist/Components/Tabs/TabsProps.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Visual treatment; follows the repo's solid/subtle/outline/ghost/line vocabulary. Defaults to "line". */
+export type TabsVariant = "solid" | "subtle" | "outline" | "ghost" | "line";
+/** Arrow-key direction and tablist layout axis. */
+export type TabsOrientation = "horizontal" | "vertical";
+/** "automatic" (default) selects a tab as focus reaches it; "manual" only selects on Enter/Space/click. */
+export type TabActivationMode = "automatic" | "manual";
+/** Category colour for the selected tab's ink/fill and its count badge. */
+export type TabsColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+/** One entry in the declarative `items` API; omit `content` when panels are rendered elsewhere (e.g. a route). */
+export interface TabItem {
+    id: string;
+    label: ReactNode;
+    /** Decorative — rendered aria-hidden, never a substitute for `label`. */
+    icon?: ReactNode;
+    /** Renders a soft count badge after the label; omit for no badge. */
+    count?: number | string;
+    isDisabled?: boolean;
+    /** Panel body for this tab; if no item in `items` sets one, no panel container is rendered at all. */
+    content?: ReactNode;
+}
+/** Themed, accessible tabs. Pass `items` for the declarative API, or `children` (TabList/Tab/TabPanels/TabPanel) to compose by hand. */
+export interface TabsProps {
+    /** Declarative API — builds TabList/Tab/TabPanels/TabPanel for you. Ignored when `children` is passed. */
+    items?: TabItem[];
+    /** Composed API — render TabList/Tab/TabPanels/TabPanel yourself; `items` is ignored. */
+    children?: ReactNode;
+    /** Controlled selected tab id; pass with `onChange`. */
+    value?: string;
+    /** Uncontrolled initial tab id; with `items` and neither this nor `value`, the first enabled tab is selected. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    variant?: TabsVariant;
+    /** Defaults to "sm", matching every other control in this library. */
+    size?: ControlSize;
+    colorScheme?: TabsColorScheme;
+    orientation?: TabsOrientation;
+    activationMode?: TabActivationMode;
+    /** Keeps an unselected panel unmounted until its tab is first selected; stays mounted after that. */
+    isLazy?: boolean;
+    /** Tabs share the tablist's width/height equally instead of sizing to their own content. */
+    isFitted?: boolean;
+    /** Stable id prefix for the generated tab/panel ids; auto-generated via useId() when omitted. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+/** Composed-API tablist wrapper; renders `Tab` children and owns keyboard navigation + overflow scroll. */
+export interface TabListProps {
+    children: ReactNode;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+/** Composed-API single tab button; read from the nearest `<Tabs>` context for variant/size/colours. */
+export interface TabProps {
+    /** Must match a TabPanel's `value` to be controllable/reachable by aria-controls. */
+    value: string;
+    children: ReactNode;
+    /** Decorative — rendered aria-hidden. */
+    icon?: ReactNode;
+    count?: number | string;
+    isDisabled?: boolean;
+}
+/** Composed-API panel wrapper; renders `TabPanel` children and registers that this Tabs instance has panels. */
+export interface TabPanelsProps {
+    children: ReactNode;
+}
+/** Composed-API panel body; hidden (and, with isLazy, unmounted) whenever its `value` isn't selected. */
+export interface TabPanelProps {
+    /** Must match the Tab's `value` this panel belongs to. */
+    value: string;
+    children?: ReactNode;
+}

package/dist/Components/Tabs/TabsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Tabs/components/CountBadge.d.ts

@@ -0,0 +1,12 @@
+import type { ColorScale, PaletteProps } from "../../../Theme/tokens/types";
+import type { ControlSize } from "../../../Theme/tokens/primitives/controlSizes";
+export interface CountBadgeProps {
+    count: number | string;
+    colors: PaletteProps;
+    scale: ColorScale;
+    /** Surface the badge actually sits on — the page canvas, or the tab's own solid fill when selected. */
+    surface: string;
+    size: ControlSize;
+}
+declare const CountBadge: ({ count, colors, scale, surface, size }: CountBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default CountBadge;

package/dist/Components/Tabs/components/CountBadge.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const BADGE_FONT_SIZE = {
+    xs: "0.625rem",
+    sm: "0.6875rem",
+    md: "0.75rem",
+    lg: "0.8125rem",
+};
+// Same resolveSoftTone(colors, scale, surface) pattern as SideBar/Header's own count badges.
+const CountBadge = ({ count, colors, scale, surface, size }) => {
+    const tone = (0, tone_1.resolveSoftTone)(colors, scale, surface);
+    return ((0, jsx_runtime_1.jsx)(react_1.Badge, { as: "span", bg: tone.bg, color: tone.fg, fontSize: BADGE_FONT_SIZE[size], fontWeight: 600, borderRadius: "full", px: "0.375rem", minW: "1.25rem", textAlign: "center", lineHeight: "1.4", flexShrink: 0, children: count }));
+};
+exports.default = CountBadge;

package/dist/Components/Tabs/components/Tab.d.ts

@@ -0,0 +1,3 @@
+import type { TabProps } from "../TabsProps";
+declare const Tab: ({ value, children, icon, count, isDisabled }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export default Tab;