pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PAGE_SIZE = void 0;
+const react_1 = require("react");
+const table_1 = require("../../../Utils/table");
+const columnLabel_1 = require("../columnLabel");
+exports.DEFAULT_PAGE_SIZE = 20;
+const defaultPageSize = exports.DEFAULT_PAGE_SIZE;
+const mergeColumnWithPreference = (pref, originalCol) => {
+    var _a;
+    if (!pref || typeof pref !== "object") {
+        return { ...originalCol };
+    }
+    const next = { ...originalCol };
+    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 ((0, columnLabel_1.isPrimitiveLabel)(pref.label) && (0, columnLabel_1.isPrimitiveLabel)(originalCol === null || originalCol === void 0 ? void 0 : originalCol.label)) {
+        next.label = pref.label;
+    }
+    return next;
+};
+const sameColumn = (a, b) => {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
+};
+const sameColumns = (a, b) => a === b || (a.length === b.length && a.every((col, i) => sameColumn(col, b[i])));
+const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }) => {
+    const headerRefs = (0, react_1.useRef)([]);
+    const slotObserver = (0, react_1.useRef)(null);
+    const [columnWidths, setColumnWidths] = (0, react_1.useState)([]);
+    const [slotWidth, setSlotWidth] = (0, react_1.useState)(0);
+    // Frozen columns butt against the select-all cell, so its width is watched, not assumed.
+    const slotRef = (0, react_1.useCallback)((node) => {
+        var _a;
+        (_a = slotObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        slotObserver.current = null;
+        if (!node) {
+            setSlotWidth(0);
+            return;
+        }
+        const observer = new ResizeObserver(() => setSlotWidth(node.offsetWidth));
+        observer.observe(node);
+        slotObserver.current = observer;
+    }, []);
+    const [selection, setSelection] = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []);
+    const [columnsSort, setColumnsSort] = (0, react_1.useState)([]);
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
+    const [rowsPerPage, setRowsPerPage] = (0, react_1.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).
+    (0, react_1.useEffect)(() => {
+        if (noOfRowsPerPage !== undefined) {
+            setRowsPerPage(noOfRowsPerPage);
+        }
+    }, [noOfRowsPerPage]);
+    const tableData = data;
+    const [columnsList, setColumnsList] = (0, react_1.useState)(() => {
+        return columns.map((col, i) => {
+            var _a;
+            return ({
+                ...col,
+                isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
+            });
+        });
+    });
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
+        const next = Array.isArray(columnPreference) && columnPreference.length > 0
+            ? columnPreference.map((originalCol) => {
+                const prefCol = columns.find((c) => c.id === originalCol.id);
+                return prefCol
+                    ? mergeColumnWithPreference(originalCol, prefCol)
+                    : { ...originalCol };
+            })
+            : columns.map((col, i) => {
+                var _a;
+                return ({
+                    ...col,
+                    isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
+                });
+            });
+        // NOTE: an equal list keeps its identity so memoised rows skip re-rendering.
+        setColumnsList((prev) => (sameColumns(prev, next) ? prev : next));
+    }, [tablePreferences, columns, defaultVisibleColumns]);
+    const { isContent, isLink } = (0, react_1.useMemo)(() => {
+        let content = false;
+        let link = false;
+        for (const row of tableData) {
+            content = content || Boolean(row.content);
+            link = link || Boolean(row.onLink || row.onDelete || row.onEdit);
+            if (content && link)
+                break;
+        }
+        return { isContent: content, isLink: link };
+    }, [tableData]);
+    (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 hasColumnSearch = (0, react_1.useMemo)(() => Object.values(columnsSearch).some((value) => value.trim() !== ""), [columnsSearch]);
+    // Column search runs before the page slice, or it would only ever see one page.
+    const searchedData = (0, react_1.useMemo)(() => (hasColumnSearch ? (0, table_1.searchAndSortData)(tableData, columnsSearch) : tableData), [hasColumnSearch, columnsSearch, tableData]);
+    const pages = (0, react_1.useMemo)(() => {
+        if (isServerPagination) {
+            return Math.ceil(totalRecords / (rowsPerPage || 1));
+        }
+        return isPagination ? Math.ceil(searchedData.length / rowsPerPage) : 0;
+    }, [
+        isPagination,
+        rowsPerPage,
+        searchedData.length,
+        totalRecords,
+        isServerPagination,
+    ]);
+    const startRow = (0, react_1.useMemo)(() => (!isPagination ? 0 : currentPage * rowsPerPage), [currentPage, isPagination, rowsPerPage]);
+    const endRow = (0, react_1.useMemo)(() => (!isPagination ? searchedData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, searchedData.length]);
+    const filteredData = (0, react_1.useMemo)(() => {
+        if (isServerPagination) {
+            return searchedData;
+        }
+        const sortedData = (0, table_1.SortMultiColumnData)(searchedData, columnsSort);
+        return sortedData.slice(startRow, endRow);
+    }, [columnsSort, startRow, endRow, searchedData, isServerPagination]);
+    const searchKey = (0, react_1.useMemo)(() => JSON.stringify(columnsSearch), [columnsSearch]);
+    const prevSearchKey = (0, react_1.useRef)(searchKey);
+    (0, react_1.useEffect)(() => {
+        if (prevSearchKey.current === searchKey)
+            return;
+        prevSearchKey.current = searchKey;
+        setCurrentPage(0);
+    }, [searchKey]);
+    // A narrower result set can strand the user on a page that no longer exists.
+    (0, react_1.useEffect)(() => {
+        if (isServerPagination || !isPagination)
+            return;
+        const lastPage = Math.max(0, pages - 1);
+        setCurrentPage((page) => Math.min(page, lastPage));
+    }, [pages, isServerPagination, isPagination]);
+    const handlePageSizeChange = (size) => {
+        const value = Number(size);
+        setRowsPerPage(value !== 0 ? value : defaultPageSize);
+        if (onNoOfRowsPerPageChange) {
+            onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
+        }
+        setCurrentPage(0);
+    };
+    const handleSort = (0, react_1.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;
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setSelection(selections !== null && selections !== void 0 ? selections : []);
+    }, [selections]);
+    const [isSelecting, setIsSelecting] = (0, react_1.useState)(false);
+    const selectionRef = (0, react_1.useRef)(selection);
+    selectionRef.current = selection;
+    const onSelectionRef = (0, react_1.useRef)(onSelection);
+    onSelectionRef.current = onSelection;
+    const tableDataRef = (0, react_1.useRef)(tableData);
+    tableDataRef.current = tableData;
+    // Rows that "select all" should toggle. Defaults to `tableData`, but in grouped
+    // "load more" mode the parent points this at the accumulated/rendered rows so
+    // select-all covers everything on screen (not just the latest page).
+    const selectAllRowsRef = (0, react_1.useRef)(null);
+    const handleCheckbox = (0, react_1.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: (0, columnLabel_1.toSavedColumns)(columns),
+                ...extra,
+            });
+        }
+    };
+    return {
+        tableData,
+        isContent,
+        isLink,
+        headerRefs,
+        columnWidths,
+        slotRef,
+        slotWidth,
+        handleSort,
+        handleCheckbox,
+        filteredData,
+        searchedData,
+        startRow,
+        endRow,
+        selection,
+        columnsSort,
+        handlePageSizeChange,
+        pages,
+        currentPage,
+        rowsPerPage,
+        setCurrentPage,
+        columnsList,
+        handleColumnPreferences,
+        isSelecting,
+        selectAllRowsRef,
+    };
+};
+exports.default = useTable;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+type ManageColumnsMethods = {
+    getManageColumnsData: () => TableProps["columns"];
+};
+declare const ManageColumns: ({ columns, items, setItems, childInputMethodsRef, }: {
+    columns: TableProps["columns"];
+    items: TableProps["columns"];
+    setItems: React.Dispatch<React.SetStateAction<TableProps["columns"]>>;
+    childInputMethodsRef: React.Ref<ManageColumnsMethods>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ManageColumns;

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

@@ -0,0 +1,102 @@
+"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 Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const columnLabel_1 = require("../columnLabel");
+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]);
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+    const [draggedItemIndex, setDraggedItemIndex] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const visibleCount = (0, react_1.useMemo)(() => items.filter((i) => !i.isHidden).length, [items]);
+    (0, react_1.useEffect)(() => {
+        setItems(columns);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columns]);
+    (0, react_1.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) => (0, columnLabel_1.columnLabelText)(item).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 ((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);
+                    return ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
+                            ? theme.colors.primary[100]
+                            : isDropZone
+                                ? rowBackgrounds.selected
+                                : "transparent", display: "flex", alignItems: "center", borderRadius: "lg", border: "1px solid", borderColor: isDraggingThisItem
+                            ? theme.colors.primary[400]
+                            : "transparent", cursor: "grab", fontSize: "xs-plus", px: 2, py: "3px", mb: "3px", transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: {
+                            bg: rowBackgrounds.active,
+                            borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors),
+                        }, _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: (0, columnLabel_1.columnLabelText)(item), 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: "xs", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${(0, columnLabel_1.columnLabelText)(item)} 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 ${(0, columnLabel_1.columnLabelText)(item)} 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.d.ts

@@ -0,0 +1,10 @@
+import { TableDensity, TableProps } from "../TableProps";
+declare const TableSettings: ({ columns, onSave, density, onDensityChange, groupBy, }: {
+    columns: TableProps["columns"];
+    onSave: (updatedColumns: TableProps["columns"], groupBy: string | number | undefined) => void;
+    tableSettings?: TableProps["tableSettings"];
+    density?: TableDensity;
+    onDensityChange?: (d: TableDensity) => void;
+    groupBy?: string | number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TableSettings;

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

@@ -0,0 +1,88 @@
+"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("@chakra-ui/react");
+const react_2 = require("react");
+const framer_motion_1 = require("framer-motion");
+const ManageColumns_1 = __importDefault(require("./ManageColumns"));
+const Button_1 = __importDefault(require("../../Button/Button"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const columnLabel_1 = require("../columnLabel");
+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 motion_2 = require("../../../Theme/chakra/motion");
+const MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
+const SHEET_ENTER = (0, motion_1.motionTransition)("enter", "out");
+const SHEET_EXIT = (0, motion_1.motionTransition)("exit", "in");
+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, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const sheetOffset = (0, motion_2.usePrefersReducedMotion)() ? 0 : "-100%";
+    const rowBackgrounds = (0, react_2.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const childInputMethodsRef = (0, react_2.useRef)({});
+    const [settingsOpen, setSettingsOpen] = (0, react_2.useState)(false);
+    const [selectedIndex, setSelectedIndex] = (0, react_2.useState)(0);
+    const [items, setItems] = (0, react_2.useState)(columns);
+    // Group selection is applied on Save (not live), per "click Apply to group".
+    const [selectedGroup, setSelectedGroup] = (0, react_2.useState)(groupBy);
+    const handleSave = (0, react_2.useCallback)(() => {
+        onSave(items, selectedGroup);
+        setSettingsOpen(false);
+    }, [onSave, items, selectedGroup]);
+    const handleOpen = (0, react_2.useCallback)(() => {
+        setItems(columns);
+        setSelectedGroup(groupBy);
+        setSettingsOpen(true);
+    }, [columns, groupBy]);
+    const tabStyle = {
+        fontSize: "xs-plus",
+        fontWeight: 500,
+        px: 4,
+        py: 2,
+        borderBottom: "2px solid transparent",
+        color: theme.colors.textMuted,
+        _selected: {
+            borderBottom: `2px solid ${theme.colors.accentText}`,
+            color: theme.colors.accentText,
+            fontWeight: 600,
+        },
+        _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: (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: { 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: sheetOffset, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: sheetOffset, opacity: 0, transition: SHEET_EXIT }, transition: SHEET_ENTER, 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: (0, surfaceRaised_1.raisedRule)(theme.colors), 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 : (0, surfaceRaised_1.raisedRule)(theme.colors), 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: "xs-plus", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", 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",
+                                                                minHeight: "unset !important",
+                                                            },
+                                                            "& label": { fontSize: "13px !important" },
+                                                            "& .chakra-checkbox": { gap: "8px !important" },
+                                                            "& .chakra-checkbox__label": { fontSize: "13px !important" },
+                                                            "& [draggable]": { py: "5px !important" },
+                                                        }, children: (0, jsx_runtime_1.jsx)(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), (0, jsx_runtime_1.jsxs)(react_1.TabPanel, { px: 0, py: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: theme.colors.textMuted, mb: 2, children: "Group rows by a column. Click Save to apply." }), (0, jsx_runtime_1.jsx)(react_1.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: (0, columnLabel_1.columnLabelText)(c) }))]
+                                                                .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 : (0, surfaceRaised_1.raisedRule)(theme.colors), 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: "xs-plus", 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: (0, surfaceRaised_1.raisedRule)(theme.colors), 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/TableVariantContext.d.ts

@@ -0,0 +1,4 @@
+import type { TableVariantTokens } from "./tokens";
+export declare const TableVariantProvider: import("react").Provider<TableVariantTokens | null>;
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
+export declare function useTableVariant(): TableVariantTokens;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableVariantProvider = void 0;
+exports.useTableVariant = useTableVariant;
+const react_1 = require("react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const studio_1 = require("./studio");
+const TableVariantContext = (0, react_1.createContext)(null);
+exports.TableVariantProvider = TableVariantContext.Provider;
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
+function useTableVariant() {
+    const provided = (0, react_1.useContext)(TableVariantContext);
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
+    return (0, react_1.useMemo)(() => provided !== null && provided !== void 0 ? provided : (0, studio_1.studioPreset)(theme.colors, isDark), [provided, theme.colors, isDark]);
+}

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

@@ -0,0 +1,6 @@
+import type { TableVariantPreset } from "./tokens";
+/**
+ * The table as it shipped. Pinned by snapshot: every value here is read off the
+ * live component, so adding a variant cannot move it.
+ */
+export declare const classicPreset: TableVariantPreset;

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classicPreset = void 0;
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+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.
+ */
+const classicPreset = (colors, isDark) => {
+    const headerBg = colors.table.hover[200];
+    return {
+        header: {
+            bg: headerBg,
+            ink: (0, accentText_1.accentTextOnCanvas)(colors.secondary, headerBg),
+            fontSize: 13,
+            fontWeight: 600,
+            textTransform: "capitalize",
+            letterSpacing: "normal",
+            height: "45px",
+            ruleColor: (0, planeStep_1.cardRule)(colors),
+            showColumnRule: true,
+            actions: "always",
+        },
+        row: {
+            hoverBg: (0, tableRowHoverStyle_1.getTableRowHoverStyle)(colors, isDark).backgroundColor,
+            hoverScope: "cell",
+            ruleColor: (0, planeStep_1.cardRule)(colors),
+            frozenRuleColor: colors.boxborder[300],
+            selectedBg: colors.primary.opacity[16],
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: false,
+            stripeBg: (0, stripe_1.stripeFill)(colors),
+        },
+        slot: {
+            width: "6",
+            rest: "checkbox",
+            indexInk: colors.textMuted,
+            centered: false,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "bleed",
+            pillRadius: "0",
+        },
+    };
+};
+exports.classicPreset = classicPreset;

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

@@ -0,0 +1,7 @@
+import { classicPreset } from "./classic";
+import { studioPreset } from "./studio";
+import type { TableVariant, TableVariantPreset } from "./tokens";
+/** Adding a variant is one file and one union member — no component changes. */
+export declare const TABLE_VARIANTS: Record<TableVariant, TableVariantPreset>;
+export * from "./tokens";
+export { classicPreset, studioPreset };

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

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioPreset = exports.classicPreset = exports.TABLE_VARIANTS = void 0;
+const classic_1 = require("./classic");
+Object.defineProperty(exports, "classicPreset", { enumerable: true, get: function () { return classic_1.classicPreset; } });
+const studio_1 = require("./studio");
+Object.defineProperty(exports, "studioPreset", { enumerable: true, get: function () { return studio_1.studioPreset; } });
+/** Adding a variant is one file and one union member — no component changes. */
+exports.TABLE_VARIANTS = {
+    classic: classic_1.classicPreset,
+    studio: studio_1.studioPreset,
+};
+__exportStar(require("./tokens"), exports);

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

@@ -0,0 +1,6 @@
+/**
+ * A consumer `statusColors` hex is a FILL, and `pickTableColor` hands it straight back as ink
+ * over a 13%-alpha tint of itself — legible reversed out of a solid cell, ~1.9:1 on a pill.
+ * The palette path is already resolved by `resolveStatusTone`; this rescues the override path.
+ */
+export declare function resolvePillInk(ink: string, soft: string, surface: string): string;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvePillInk = resolvePillInk;
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const color_1 = require("../../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../../Theme/tokens/builders/outlineRung");
+const cache = new Map();
+/**
+ * A consumer `statusColors` hex is a FILL, and `pickTableColor` hands it straight back as ink
+ * over a 13%-alpha tint of itself — legible reversed out of a solid cell, ~1.9:1 on a pill.
+ * The palette path is already resolved by `resolveStatusTone`; this rescues the override path.
+ */
+function resolvePillInk(ink, soft, surface) {
+    const key = `${ink}|${soft}|${surface}`;
+    const hit = cache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const resolved = (0, outlineRung_1.liftToContrast)(ink, (0, color_1.compositeOver)(soft, surface), accentText_1.AA_NORMAL_TEXT);
+    cache.set(key, resolved);
+    return resolved;
+}

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;