pixelize-design-library 2.3.7 → 2.3.8

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

@@ -1,166 +1,100 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var lucide_react_1 = require("lucide-react");
-var ManageColumns = function (_a) {
-    var columns = _a.columns, items = _a.items, setItems = _a.setItems, childInputMethodsRef = _a.childInputMethodsRef;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _b = (0, react_1.useState)(""), searchTerm = _b[0], setSearchTerm = _b[1];
-    var _c = (0, react_1.useState)(null), draggedItemIndex = _c[0], setDraggedItemIndex = _c[1];
-    var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
-    var visibleCount = (0, react_1.useMemo)(function () { return items.filter(function (i) { return !i.isHidden; }).length; }, [items]);
-    (0, react_1.useEffect)(function () {
+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 lucide_react_1 = require("lucide-react");
+const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    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);
-    }, [columns]);
-    (0, react_1.useImperativeHandle)(childInputMethodsRef, function () { return ({ getManageColumnsData: function () { return items; } }); }, [items]);
-    var handleDragStart = function (index) { return setDraggedItemIndex(index); };
-    var handleDragOver = function (e, index) {
+    }, [columns, setItems]);
+    (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;
-        var newItems = __spreadArray([], items, true);
-        var draggedItem = newItems[draggedItemIndex];
+        const newItems = [...items];
+        const draggedItem = newItems[draggedItemIndex];
         newItems.splice(draggedItemIndex, 1);
         newItems.splice(index, 0, draggedItem);
         setDraggedItemIndex(index);
         setItems(newItems);
     };
-    var handleDragEnd = function () { return setDraggedItemIndex(null); };
+    const handleDragEnd = () => setDraggedItemIndex(null);
     // Fix: use the item's actual index in `items`, not the filtered list index
-    var toggleCheckbox = function (itemId) {
-        var realIndex = items.findIndex(function (i) { return i.id === itemId; });
+    const toggleCheckbox = (itemId) => {
+        const realIndex = items.findIndex((i) => i.id === itemId);
         if (realIndex === -1)
             return;
-        var currentVisibleCount = items.filter(function (i) { return !i.isHidden; }).length;
+        const currentVisibleCount = items.filter((i) => !i.isHidden).length;
         if (!items[realIndex].isHidden && currentVisibleCount === 2) {
             setError("At least two columns must remain visible.");
             return;
         }
-        var newItems = __spreadArray([], items, true);
-        newItems[realIndex] = __assign(__assign({}, newItems[realIndex]), { isHidden: !newItems[realIndex].isHidden });
+        const newItems = [...items];
+        newItems[realIndex] = {
+            ...newItems[realIndex],
+            isHidden: !newItems[realIndex].isHidden,
+        };
         setItems(newItems);
         setError(null);
     };
-    var filteredItems = items.filter(function (item) {
-        return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
-    });
-    var allChecked = items.every(function (item) { return !item.isHidden; });
-    var someChecked = items.some(function (item) { return !item.isHidden; }) && !allChecked;
-    var handleSelectAll = function () {
+    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(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2 })); }));
+            setItems(items.map((item, i) => ({ ...item, isHidden: i >= 2 })));
             setError("At least two columns must remain visible.");
         }
         else {
-            setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: false })); }));
+            setItems(items.map((item) => ({ ...item, isHidden: false })));
             setError(null);
         }
     };
-    return (react_1.default.createElement(react_2.Box, { mt: 2 },
-        error && (react_1.default.createElement(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200] },
-            react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500 }, error))),
-        react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, size: "sm", borderRadius: "md" }),
-        !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md" },
-            react_1.default.createElement(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
-        react_1.default.createElement(react_2.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: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
-            } }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) {
-            var isDraggingThisItem = draggedItemIndex === index;
-            var isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
-            return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return 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" } },
-                react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, { size: 14 }), variant: "ghost", size: "xs", cursor: "grab", mr: 1, minW: "auto", h: "auto", p: 0, 
-                    // color={theme.colors.gray[300]}
-                    _hover: { color: theme.colors.gray[500], bg: "transparent" } }),
-                react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(item.id); }, size: "sm", labelSx: {
-                        color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
-                    } }),
-                react_1.default.createElement(react_2.Text, { fontSize: "12px", color: theme.colors.gray[400], ml: 'auto' }, index + 1)));
-        })) : (react_1.default.createElement(react_2.Text, { color: "gray.400", textAlign: "center", fontSize: "sm", py: 6 }, "No columns found"))),
-        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[400], mt: 2, textAlign: "right" },
-            visibleCount,
-            " / ",
-            items.length,
-            " visible")));
+    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: theme.colors.red[600], 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: {
+                    "&::-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;
+                    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
+                                ? 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: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Drag", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }), variant: "ghost", size: "xs", cursor: "grab", mr: 1, minW: "auto", h: "auto", p: 0, 
+                                // color={theme.colors.gray[300]}
+                                _hover: { color: theme.colors.gray[500], bg: "transparent" } }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                                    color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[400], ml: 'auto', children: index + 1 })] }, item.id));
+                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: "gray.400", textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[400], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 exports.default = ManageColumns;

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { TableDensity, TableProps } from "../TableProps";
 declare const TableSettings: ({ columns, onSave, density, onDensityChange, groupBy, }: {
     columns: TableProps["columns"];
@@ -7,5 +6,6 @@ declare const TableSettings: ({ columns, onSave, density, onDensityChange, group
     density?: TableDensity;
     onDensityChange?: (d: TableDensity) => void;
     groupBy?: string | number;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TableSettings;
+//# sourceMappingURL=TableSettings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSettings.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/settings/TableSettings.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAazD,QAAA,MAAM,aAAa,GAAI,yDAMpB;IACD,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,MAAM,EAAE,CACN,cAAc,EAAE,UAAU,CAAC,SAAS,CAAC,EACrC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KACjC,IAAI,CAAC;IACV,aAAa,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B,4CAsQA,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,170 +1,87 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importStar(require("react"));
-var framer_motion_1 = require("framer-motion");
-var ManageColumns_1 = __importDefault(require("./ManageColumns"));
-var Button_1 = __importDefault(require("../../Button/Button"));
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var lucide_react_1 = require("lucide-react");
-var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
-var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
-var DENSITY_OPTIONS = [
+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 lucide_react_1 = require("lucide-react");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+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" },
     { value: "normal", label: "Normal", desc: "Balanced default spacing" },
     { value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
 ];
-var TableSettings = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    var columns = _a.columns, onSave = _a.onSave, _r = _a.density, density = _r === void 0 ? "normal" : _r, onDensityChange = _a.onDensityChange, groupBy = _a.groupBy;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var childInputMethodsRef = (0, react_2.useRef)({});
-    var _s = (0, react_2.useState)(false), settingsOpen = _s[0], setSettingsOpen = _s[1];
-    var _t = (0, react_2.useState)(0), selectedIndex = _t[0], setSelectedIndex = _t[1];
-    var _u = (0, react_2.useState)(columns), items = _u[0], setItems = _u[1];
+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 = (0, useCustomTheme_1.useCustomTheme)();
+    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".
-    var _v = (0, react_2.useState)(groupBy), selectedGroup = _v[0], setSelectedGroup = _v[1];
-    var handleSave = (0, react_2.useCallback)(function () {
+    const [selectedGroup, setSelectedGroup] = (0, react_2.useState)(groupBy);
+    const handleSave = (0, react_2.useCallback)(() => {
         onSave(items, selectedGroup);
         setSettingsOpen(false);
     }, [onSave, items, selectedGroup]);
-    var handleOpen = (0, react_2.useCallback)(function () {
+    const handleOpen = (0, react_2.useCallback)(() => {
         setItems(columns);
         setSelectedGroup(groupBy);
         setSettingsOpen(true);
     }, [columns, groupBy]);
-    var tabStyle = {
+    const tabStyle = {
         fontSize: "13px",
         fontWeight: 500,
         px: 4,
         py: 2,
         borderBottom: "2px solid transparent",
-        color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[400],
+        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 ".concat(theme.colors.primary[600]),
+            borderBottom: `2px solid ${theme.colors.primary[600]}`,
             color: theme.colors.primary[600],
             fontWeight: 600,
         },
-        _hover: { color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[600] },
+        _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[600] },
     };
-    return (react_2.default.createElement(react_1.Box, null,
-        react_2.default.createElement(ToolTip_1.default, { label: "Table Settings", placement: "top" },
-            react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.text) === null || _g === void 0 ? void 0 : _g[500], _hover: {
-                    transform: "scale(1.1)",
-                    color: (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500]
-                } },
-                react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem" }))),
-        react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
-            react_2.default.createElement(react_1.ModalOverlay, null),
-            react_2.default.createElement(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: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], overflow: "hidden" },
-                react_2.default.createElement(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }),
-                react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0 },
-                    react_2.default.createElement(react_1.Box, { pt: 4, px: 4 },
-                        react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3 }, "Table Settings"),
-                        react_2.default.createElement(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.border) === null || _o === void 0 ? void 0 : _o[200] },
-                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Density"),
-                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Manage Columns"),
-                            react_2.default.createElement(react_1.Tab, __assign({}, tabStyle), "Group"))),
-                    react_2.default.createElement(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
-                            "&::-webkit-scrollbar": { width: "3px", height: "3px" },
-                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "2px" },
-                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "2px" },
-                            "&::-webkit-scrollbar-thumb:hover": { background: theme.colors.gray[500] },
-                            scrollbarWidth: "thin",
-                            scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
-                        } },
-                        react_2.default.createElement(react_1.TabPanels, null,
-                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 1 },
-                                react_2.default.createElement(react_1.Flex, { direction: "column", gap: 2 }, DENSITY_OPTIONS.map(function (opt) {
-                                    var _a;
-                                    var selected = density === opt.value;
-                                    return (react_2.default.createElement(react_1.Flex, { as: "button", type: "button", key: opt.value, 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: function () { return onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value); } },
-                                        react_2.default.createElement(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, selected && react_2.default.createElement(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 })),
-                                        react_2.default.createElement(react_1.Box, { textAlign: "left" },
-                                            react_2.default.createElement(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700] }, opt.label),
-                                            react_2.default.createElement(react_1.Text, { fontSize: "11px", color: theme.colors.gray[500] }, opt.desc))));
-                                }))),
-                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 0 },
-                                react_2.default.createElement(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" },
-                                    } },
-                                    react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))),
-                            react_2.default.createElement(react_1.TabPanel, { px: 0, py: 1 },
-                                react_2.default.createElement(react_1.Text, { fontSize: "12px", color: theme.colors.gray[500], mb: 2 }, "Group rows by a column. Click Save to apply."),
-                                react_2.default.createElement(react_1.Flex, { direction: "column", gap: 2 }, __spreadArray([{ id: undefined, label: "None (no grouping)" }], columns
-                                    .filter(function (c) { return !!c.columnType && !c.isHidden; })
-                                    .map(function (c) { return ({ id: c.id, label: String(c.label) }); }), true).map(function (opt) {
-                                    var _a, _b;
-                                    var selected = selectedGroup === opt.id;
-                                    return (react_2.default.createElement(react_1.Flex, { as: "button", type: "button", key: String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__"), align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: function () { return setSelectedGroup(opt.id); } },
-                                        react_2.default.createElement(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, selected && react_2.default.createElement(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 })),
-                                        react_2.default.createElement(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left" }, opt.label)));
-                                })))))),
-                react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.border) === null || _q === void 0 ? void 0 : _q[200], pt: 3, pb: 3, px: 4 },
-                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "red" }),
-                    react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table Settings", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: {
+                        transform: "scale(1.1)",
+                        color: (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[500]
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem" }) }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { pt: 4, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), (0, jsx_runtime_1.jsxs)(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.border) === null || _m === void 0 ? void 0 : _m[200], children: [(0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Density" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Manage Columns" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Group" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
+                                            "&::-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: (0, jsx_runtime_1.jsxs)(react_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 1, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                                                            var _a;
+                                                            const selected = density === opt.value;
+                                                            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.gray[500], children: opt.desc })] })] }, opt.value));
+                                                        }) }) }), (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: "12px", color: theme.colors.gray[500], 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: String(c.label) }))]
+                                                                .map((opt) => {
+                                                                var _a, _b;
+                                                                const selected = selectedGroup === opt.id;
+                                                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "0.5rem", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: () => setSelectedGroup(opt.id), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_b = opt.id) !== null && _b !== void 0 ? _b : "__none__")));
+                                                            }) })] })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.border) === null || _p === void 0 ? void 0 : _p[200], pt: 3, pb: 3, px: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 exports.default = TableSettings;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAW,MAAM,YAAY,CAAC;AAU/C,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA0C3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/Components/Tag/Tag.js

@@ -1,29 +1,23 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
 // Icon size scales with the tag size so the right icon stays proportional.
-var ICON_SIZE = {
+const ICON_SIZE = {
     xs: "0.75rem",
     sm: "0.875rem",
     md: "1em",
     lg: "1.1em",
 };
-var Tag = function (_a) {
-    var label = _a.label, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b, _c = _a.variant, variant = _c === void 0 ? "solid" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, icon = _a.icon, onTagClick = _a.onTagClick, onIconClick = _a.onIconClick;
-    var isInteractive = !!onTagClick;
-    return (react_1.default.createElement(react_2.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: isInteractive ? "pointer" : "default", role: isInteractive ? "button" : undefined, "aria-label": isInteractive ? label : undefined, onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(); } },
-        react_1.default.createElement(react_2.TagLabel, null, label),
-        icon && (react_1.default.createElement(react_2.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], cursor: onIconClick ? "pointer" : "default", onClick: function (e) {
-                e.stopPropagation();
-                onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
-            }, transition: "all 0.2s ease", _hover: {
-                opacity: 0.8,
-                transform: "scale(1.05)",
-                cursor: onIconClick ? "pointer" : "default",
-            } }))));
+const Tag = ({ label, colorScheme = "primary", variant = "solid", size = "md", icon, onTagClick, onIconClick, }) => {
+    const isInteractive = !!onTagClick;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: isInteractive ? "pointer" : "default", role: isInteractive ? "button" : undefined, "aria-label": isInteractive ? label : undefined, onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: [(0, jsx_runtime_1.jsx)(react_1.TagLabel, { children: label }), icon && ((0, jsx_runtime_1.jsx)(react_1.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], cursor: onIconClick ? "pointer" : "default", onClick: (e) => {
+                    e.stopPropagation();
+                    onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
+                }, transition: "all 0.2s ease", _hover: {
+                    opacity: 0.8,
+                    transform: "scale(1.05)",
+                    cursor: onIconClick ? "pointer" : "default",
+                } }))] }));
 };
 exports.default = Tag;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Tag/Tag.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAW7D,eAAO,MAAM,GAAG,EAAE,yBAsEjB,CAAC"}