pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

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

@@ -0,0 +1,227 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { SortMultiColumnData } from "../../../Utils/table";
+const defaultPageSize = 20;
+const mergeColumnWithPreference = (pref, originalCol) => {
+    if (!pref || typeof pref !== "object") {
+        return { ...originalCol };
+    }
+    const next = { ...originalCol };
+    if (typeof pref.isHidden === "boolean") {
+        next.isHidden = pref.isHidden;
+    }
+    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, }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const headerRefs = useRef([]);
+    const [columnWidths, setColumnWidths] = useState([]);
+    const [selection, setSelection] = useState(selections !== null && selections !== void 0 ? selections : []);
+    const [columnsSort, setColumnsSort] = useState([]);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize);
+    // Keep the internal page size in sync with the `noOfRowsPerPage` prop when the
+    // consumer changes it (e.g. a page-size control outside the table).
+    useEffect(() => {
+        if (noOfRowsPerPage !== undefined) {
+            setRowsPerPage(noOfRowsPerPage);
+        }
+    }, [noOfRowsPerPage]);
+    const tableData = data;
+    const [columnsList, setColumnsList] = useState(() => {
+        return columns.map((col, i) => {
+            var _a;
+            return ({
+                ...col,
+                isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
+            });
+        });
+    });
+    useEffect(() => {
+        var _a;
+        const columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
+        if (Array.isArray(columnPreference) && columnPreference.length > 0) {
+            const mergedColumns = columnPreference.map((originalCol) => {
+                const prefCol = columns.find((c) => c.id === originalCol.id);
+                return prefCol
+                    ? mergeColumnWithPreference(originalCol, prefCol)
+                    : { ...originalCol };
+            });
+            setColumnsList(mergedColumns);
+        }
+        else {
+            setColumnsList(columns.map((col, i) => {
+                var _a;
+                return ({
+                    ...col,
+                    isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
+                });
+            }));
+        }
+    }, [tablePreferences, columns, defaultVisibleColumns]);
+    const tableContainerStyles = useMemo(() => {
+        var _a;
+        return ({
+            borderRadius: "10px 0 0 10px",
+            borderWidth: "0px 0px 0px 5px",
+            borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[500],
+            boxShadow: theme.shadows.lg,
+            maxHeight: "50vh",
+            overflowY: "auto",
+        });
+    }, [tableBorderColor, theme]);
+    const prevIsContent = useRef(false);
+    const prevIsLink = useRef(false);
+    const isContent = useMemo(() => {
+        const result = tableData.some((o) => o.content);
+        prevIsContent.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_a = tableData[0]) === null || _a === void 0 ? void 0 : _a.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    const isLink = useMemo(() => {
+        const result = tableData.some((o) => o.onLink || o.onDelete || o.onEdit);
+        prevIsLink.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        const widths = headerRefs.current.map((ref) => (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
+        setColumnWidths(widths);
+    }, []);
+    const pages = useMemo(() => {
+        if (isServerPagination) {
+            return Math.ceil(totalRecords / (rowsPerPage || 1));
+        }
+        return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
+    }, [
+        isPagination,
+        rowsPerPage,
+        tableData.length,
+        totalRecords,
+        isServerPagination,
+    ]);
+    const startRow = useMemo(() => (!isPagination ? 0 : currentPage * rowsPerPage), [currentPage, isPagination, rowsPerPage]);
+    const endRow = useMemo(() => (!isPagination ? tableData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, tableData.length]);
+    const filteredData = useMemo(() => {
+        if (isServerPagination) {
+            return tableData;
+        }
+        const sortedData = SortMultiColumnData(tableData, columnsSort);
+        return sortedData.slice(startRow, endRow);
+    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
+    const handlePageSizeChange = (event) => {
+        const value = Number(event.target.value);
+        setRowsPerPage(value !== 0 ? value : defaultPageSize);
+        if (onNoOfRowsPerPageChange) {
+            onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
+        }
+        setCurrentPage(0);
+    };
+    const handleSort = useCallback((field, sort) => {
+        if (!sort)
+            return;
+        setColumnsSort((prev) => {
+            const newSortState = [...prev];
+            const existingIndex = newSortState.findIndex((s) => s.column === field);
+            if (existingIndex === -1) {
+                newSortState.push({
+                    column: field,
+                    direction: "asc",
+                });
+            }
+            else {
+                newSortState[existingIndex] = {
+                    ...newSortState[existingIndex],
+                    direction: sort,
+                };
+            }
+            return newSortState;
+        });
+    }, []);
+    useEffect(() => {
+        setSelection(selections !== null && selections !== void 0 ? selections : []);
+    }, [selections]);
+    const [isSelecting, setIsSelecting] = useState(false);
+    const selectionRef = useRef(selection);
+    selectionRef.current = selection;
+    const onSelectionRef = useRef(onSelection);
+    onSelectionRef.current = onSelection;
+    const tableDataRef = 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).
+    const selectAllRowsRef = useRef(null);
+    const handleCheckbox = useCallback((id) => {
+        var _a, _b;
+        const current = selectionRef.current;
+        if (id === 0) {
+            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);
+            const allSelected = ids.length > 0 && ids.every((i) => currentSet.has(i));
+            setIsSelecting(true);
+            setTimeout(() => {
+                var _a;
+                // Toggle the rendered rows while preserving any selection outside them.
+                const selectedItems = allSelected
+                    ? current.filter((i) => !idSet.has(i))
+                    : Array.from(new Set([...current, ...ids]));
+                setSelection(selectedItems);
+                (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
+                setIsSelecting(false);
+            }, 0);
+        }
+        else {
+            let selectedItems;
+            if (current.includes(id)) {
+                selectedItems = current.filter((item) => item !== id);
+            }
+            else {
+                selectedItems = [...current, id];
+            }
+            setSelection(selectedItems);
+            (_b = onSelectionRef.current) === null || _b === void 0 ? void 0 : _b.call(onSelectionRef, selectedItems);
+        }
+    }, 
+    // Empty deps: rows/selection come from refs, so memoized rows survive a new `data`.
+    []);
+    const handleColumnPreferences = (columns, extra = {}) => {
+        setColumnsList(columns);
+        if (savePreferences) {
+            savePreferences({
+                ...tablePreferences,
+                columns: columns,
+                ...extra,
+            });
+        }
+    };
+    return {
+        tableData,
+        tableContainerStyles,
+        isContent,
+        isLink,
+        headerRefs,
+        columnWidths,
+        handleSort,
+        handleCheckbox,
+        filteredData,
+        startRow,
+        endRow,
+        selection,
+        columnsSort,
+        handlePageSizeChange,
+        pages,
+        currentPage,
+        rowsPerPage,
+        setCurrentPage,
+        columnsList,
+        handleColumnPreferences,
+        isSelecting,
+        selectAllRowsRef,
+    };
+};
+export default useTable;

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useMemo, useState, useEffect } from "react";
+import { Box, Flex, IconButton, Input, List, ListItem, Text, } from "@chakra-ui/react";
+import Checkbox from "../../Checkbox/Checkbox";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
+const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
+    const theme = useCustomTheme();
+    const [searchTerm, setSearchTerm] = useState("");
+    const [draggedItemIndex, setDraggedItemIndex] = useState(null);
+    const [error, setError] = useState(null);
+    const visibleCount = useMemo(() => items.filter((i) => !i.isHidden).length, [items]);
+    useEffect(() => {
+        setItems(columns);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columns]);
+    useImperativeHandle(childInputMethodsRef, () => ({ getManageColumnsData: () => items }), [items]);
+    const handleDragStart = (index) => setDraggedItemIndex(index);
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        if (draggedItemIndex === null || draggedItemIndex === index)
+            return;
+        const newItems = [...items];
+        const draggedItem = newItems[draggedItemIndex];
+        newItems.splice(draggedItemIndex, 1);
+        newItems.splice(index, 0, draggedItem);
+        setDraggedItemIndex(index);
+        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);
+        if (realIndex === -1)
+            return;
+        const currentVisibleCount = items.filter((i) => !i.isHidden).length;
+        if (!items[realIndex].isHidden && currentVisibleCount === 2) {
+            setError("At least two columns must remain visible.");
+            return;
+        }
+        const newItems = [...items];
+        newItems[realIndex] = {
+            ...newItems[realIndex],
+            isHidden: !newItems[realIndex].isHidden,
+        };
+        setItems(newItems);
+        setError(null);
+    };
+    const filteredItems = items.filter((item) => item.label.toString().toLowerCase().includes(searchTerm.toLowerCase()));
+    const allChecked = items.every((item) => !item.isHidden);
+    const someChecked = items.some((item) => !item.isHidden) && !allChecked;
+    const handleSelectAll = () => {
+        if (allChecked) {
+            setItems(items.map((item, i) => ({ ...item, isHidden: i >= 2 })));
+            setError("At least two columns must remain visible.");
+        }
+        else {
+            setItems(items.map((item) => ({ ...item, isHidden: false })));
+            setError(null);
+        }
+    };
+    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: {
+                    "&::-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-thumb:hover": {
+                        background: theme.colors.gray[500],
+                    },
+                    scrollbarWidth: "thin",
+                    scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+                }, children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+                    const isDraggingThisItem = draggedItemIndex === index;
+                    const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
+                    const realIndex = items.findIndex((i) => i.id === item.id);
+                    return (_jsxs(ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
+                            ? theme.colors.primary[100]
+                            : isDropZone
+                                ? theme.colors.primary[50]
+                                : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
+                            ? theme.colors.primary[400]
+                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
+                            bg: theme.colors.gray[50],
+                            borderColor: theme.colors.border[200],
+                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                                    color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
+                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                })) : (_jsx(Text, { color: "gray.500", textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+};
+export default ManageColumns;

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, IconButton, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Tabs, TabList, TabPanels, Tab, TabPanel, Text, } from "@chakra-ui/react";
+import { useCallback, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import ManageColumns from "./ManageColumns";
+import Button from "../../Button/Button";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { Settings, Check } from "lucide-react";
+import ToolTip from "../../ToolTip/ToolTip";
+const MotionModalContent = motion(ModalContent);
+const DENSITY_OPTIONS = [
+    { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
+    { value: "normal", label: "Normal", desc: "Balanced default spacing" },
+    { value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
+];
+const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const theme = useCustomTheme();
+    const childInputMethodsRef = useRef({});
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [items, setItems] = useState(columns);
+    // Group selection is applied on Save (not live), per "click Apply to group".
+    const [selectedGroup, setSelectedGroup] = useState(groupBy);
+    const handleSave = useCallback(() => {
+        onSave(items, selectedGroup);
+        setSettingsOpen(false);
+    }, [onSave, items, selectedGroup]);
+    const handleOpen = useCallback(() => {
+        setItems(columns);
+        setSelectedGroup(groupBy);
+        setSettingsOpen(true);
+    }, [columns, groupBy]);
+    const tabStyle = {
+        fontSize: "13px",
+        fontWeight: 500,
+        px: 4,
+        py: 2,
+        borderBottom: "2px solid transparent",
+        color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[400],
+        _selected: {
+            borderBottom: `2px solid ${theme.colors.primary[600]}`,
+            color: theme.colors.primary[600],
+            fontWeight: 600,
+        },
+        _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[600] },
+    };
+    return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: (_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]
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _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: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.border) === null || _m === void 0 ? void 0 : _m[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
+                                            "&::-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-thumb:hover": { background: theme.colors.gray[500] },
+                                            scrollbarWidth: "thin",
+                                            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+                                        }, children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                                                            var _a;
+                                                            const selected = density === opt.value;
+                                                            return (_jsxs(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: [_jsx(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 && _jsx(Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.gray[500], children: opt.desc })] })] }, opt.value));
+                                                        }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
+                                                            "& [role='listitem'], & > div > div": {
+                                                                py: "4px !important",
+                                                                minHeight: "unset !important",
+                                                            },
+                                                            "& label": { fontSize: "13px !important" },
+                                                            "& .chakra-checkbox": { gap: "8px !important" },
+                                                            "& .chakra-checkbox__label": { fontSize: "13px !important" },
+                                                            "& [draggable]": { py: "5px !important" },
+                                                        }, children: _jsx(ManageColumns, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), _jsxs(TabPanel, { px: 0, py: 1, children: [_jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], mb: 2, children: "Group rows by a column. Click Save to apply." }), _jsx(Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
+                                                                // Only columns that declare a `columnType` are groupable.
+                                                                ...columns
+                                                                    .filter((c) => !!c.columnType && !c.isHidden)
+                                                                    .map((c) => ({ id: c.id, label: String(c.label) }))]
+                                                                .map((opt) => {
+                                                                var _a, _b;
+                                                                const selected = selectedGroup === opt.id;
+                                                                return (_jsxs(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: [_jsx(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 && _jsx(Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), _jsx(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__")));
+                                                            }) })] })] }) })] }), _jsxs(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: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+};
+export default TableSettings;

package/dist/esm/Components/Tag/Tag.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon, Tag as ChakraTag, TagLabel, TagRightIcon } from "@chakra-ui/react";
+// Icon size scales with the tag size so the right icon stays proportional.
+const ICON_SIZE = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1em",
+    lg: "1.1em",
+};
+const Tag = ({ label, colorScheme = "primary", variant = "solid", size = "md", icon, onTagClick, onIconClick, }) => {
+    const isInteractive = !!onTagClick;
+    return (_jsxs(ChakraTag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", children: [isInteractive ? (_jsx(TagLabel, { as: "button", type: "button", cursor: "pointer", onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: label })) : (_jsx(TagLabel, { children: label })), icon &&
+                (onIconClick ? (_jsx(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: _jsx(Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : (_jsx(TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
+};
+export default Tag;

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

@@ -0,0 +1,91 @@
+import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText";
+// Resolve a colorScheme key to a numeric swatch from the theme. All supported
+// colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
+// gray so an unknown/missing key can never throw at render time.
+const swatch = (theme, colorScheme = "primary") => { var _a, _b, _c, _d; return (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {}; };
+// Chakra Tag is a multipart component (container / label / closeButton); styling
+// is keyed under those parts, so it needs a multi-style config with `parts`.
+export const Tag = {
+    parts: ["container", "label", "closeButton"],
+    baseStyle: {
+        container: {
+            borderRadius: "full",
+            fontWeight: 600,
+            lineHeight: 1.2,
+            display: "inline-flex",
+            alignItems: "center",
+            transition: "background 0.15s ease, color 0.15s ease, border-color 0.15s ease",
+        },
+    },
+    sizes: {
+        xs: {
+            container: { fontSize: "0.6875rem", px: 2, py: 0.5, minH: "1.25rem" },
+        },
+        sm: {
+            container: { fontSize: "0.75rem", px: 2.5, py: 1, minH: "1.5rem" },
+        },
+        md: {
+            container: { fontSize: "0.8125rem", px: 3, py: 1, minH: "1.75rem" },
+        },
+        lg: {
+            container: { fontSize: "0.9375rem", px: 3.5, py: 1.5, minH: "2rem" },
+        },
+    },
+    variants: {
+        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 fill = c[500];
+            const hoverFill = c[600];
+            const activeFill = c[700];
+            return {
+                container: {
+                    bg: fill,
+                    color: onFilled(fill, white, black),
+                    _hover: { bg: hoverFill, color: onFilled(hoverFill, white, black) },
+                    _active: { bg: activeFill, color: onFilled(activeFill, white, black) },
+                },
+            };
+        },
+        subtle: ({ theme, colorScheme = "primary" }) => {
+            const c = swatch(theme, colorScheme);
+            const bg = c[50];
+            return {
+                container: {
+                    bg,
+                    // A fixed [700] fails AA against [50] for some hues (orange 3.89, borderline green
+                    // 4.39) — walk the scale's own rungs against this specific tint instead.
+                    color: accentTextOnCanvas(c, bg),
+                    border: "0.063rem solid",
+                    borderColor: c[100],
+                    _hover: { bg: c[100] },
+                    _active: { bg: c[200] },
+                },
+            };
+        },
+        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";
+            return {
+                container: {
+                    border: "0.094rem solid",
+                    borderColor: c[500],
+                    // Text sits directly on the page canvas here — a fixed [600] failed AA for several
+                    // hues (orange 2.51, green 2.94, red 4.09); use the canvas-text helper instead.
+                    color: accentTextOnCanvas(c, canvas),
+                    bg: "transparent",
+                    _hover: { bg: c[50] },
+                    _active: { bg: c[100] },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        size: "md",
+        variant: "solid",
+        colorScheme: "primary",
+    },
+};

package/dist/esm/Components/Tag/TagProps.js

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