pixelize-design-library 2.3.1-beta.1 → 2.3.1-beta.3

package/dist/Components/Toaster/Toaster.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -37,50 +41,65 @@ exports.useToaster = void 0;
 exports.default = ToasterProvider;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+var react_3 = require("@emotion/react");
+var lucide_react_1 = require("lucide-react");
 var ToasterContext = (0, react_1.createContext)(undefined);
+var shrink = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: scaleX(1); }\n  to { transform: scaleX(0); }\n"], ["\n  from { transform: scaleX(1); }\n  to { transform: scaleX(0); }\n"])));
 function ToasterProvider(_a) {
+    var _b;
     var children = _a.children;
     var toast = (0, react_2.useToast)();
     var theme = (0, react_2.useTheme)();
+    var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
     var showToast = function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var title = _a.title, description = _a.description, _m = _a.status, status = _m === void 0 ? "info" : _m, _o = _a.duration, duration = _o === void 0 ? 5000 : _o, _p = _a.isClosable, isClosable = _p === void 0 ? true : _p, _q = _a.position, position = _q === void 0 ? "top-right" : _q, onClose = _a.onClose;
-        var statusColors = {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var title = _a.title, description = _a.description, _t = _a.status, status = _t === void 0 ? "info" : _t, _u = _a.duration, duration = _u === void 0 ? 5000 : _u, _v = _a.isClosable, isClosable = _v === void 0 ? true : _v, _w = _a.position, position = _w === void 0 ? "top-right" : _w, onClose = _a.onClose;
+        // Status → semantic color scale + icon (falls back to legacy palettes).
+        var statusConfig = {
             success: {
-                bg: (_b = theme.colors.green) === null || _b === void 0 ? void 0 : _b[50],
-                border: (_c = theme.colors.green) === null || _c === void 0 ? void 0 : _c[300],
+                scale: (_c = (_b = c.semantic) === null || _b === void 0 ? void 0 : _b.success) !== null && _c !== void 0 ? _c : c.green,
+                icon: react_1.default.createElement(lucide_react_1.CheckCircle2, { size: 18 }),
             },
             error: {
-                bg: (_d = theme.colors.red) === null || _d === void 0 ? void 0 : _d[50],
-                border: (_e = theme.colors.red) === null || _e === void 0 ? void 0 : _e[300],
+                scale: (_e = (_d = c.semantic) === null || _d === void 0 ? void 0 : _d.error) !== null && _e !== void 0 ? _e : c.red,
+                icon: react_1.default.createElement(lucide_react_1.XCircle, { size: 18 }),
             },
             warning: {
-                bg: (_f = theme.colors.yellow) === null || _f === void 0 ? void 0 : _f[50],
-                border: (_g = theme.colors.yellow) === null || _g === void 0 ? void 0 : _g[300],
+                scale: (_h = (_g = (_f = c.semantic) === null || _f === void 0 ? void 0 : _f.warning) !== null && _g !== void 0 ? _g : c.yellow) !== null && _h !== void 0 ? _h : c.orange,
+                icon: react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 }),
             },
             info: {
-                bg: (_h = theme.colors.blue) === null || _h === void 0 ? void 0 : _h[50],
-                border: (_j = theme.colors.blue) === null || _j === void 0 ? void 0 : _j[300],
+                scale: (_k = (_j = c.semantic) === null || _j === void 0 ? void 0 : _j.info) !== null && _k !== void 0 ? _k : c.blue,
+                icon: react_1.default.createElement(lucide_react_1.Info, { size: 18 }),
             },
             loading: {
-                bg: (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[50],
-                border: (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[300],
+                scale: (_l = c.primary) !== null && _l !== void 0 ? _l : c.gray,
+                icon: react_1.default.createElement(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
             },
         };
-        var colors = statusColors[status];
+        var _x = (_m = statusConfig[status]) !== null && _m !== void 0 ? _m : statusConfig.info, scale = _x.scale, icon = _x.icon;
+        var solid = (_o = scale === null || scale === void 0 ? void 0 : scale[500]) !== null && _o !== void 0 ? _o : (_p = c.gray) === null || _p === void 0 ? void 0 : _p[500];
+        var soft = (_q = scale === null || scale === void 0 ? void 0 : scale[50]) !== null && _q !== void 0 ? _q : (_r = c.gray) === null || _r === void 0 ? void 0 : _r[50];
+        var accent = (_s = scale === null || scale === void 0 ? void 0 : scale[600]) !== null && _s !== void 0 ? _s : solid;
+        var showProgress = typeof duration === "number" && duration > 0;
         toast({
             duration: duration,
             isClosable: isClosable,
             position: position,
             onCloseComplete: onClose,
             render: function (_a) {
+                var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
                 var onClose = _a.onClose;
-                return (react_1.default.createElement(react_2.Box, { bg: colors.bg, border: "0.063rem solid", borderColor: colors.border, boxShadow: "md", borderRadius: "md", p: 4, minW: "22.5rem" },
-                    react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "flex-start" },
-                        react_1.default.createElement(react_2.Box, null,
-                            react_1.default.createElement(react_2.Text, { fontWeight: "semibold", mb: "0.25rem" }, title),
-                            react_1.default.createElement(react_2.Text, { fontSize: "sm" }, description)),
-                        isClosable && (react_1.default.createElement(react_2.CloseButton, { onClick: onClose, size: "sm", mt: 1, ml: 4 })))));
+                return (react_1.default.createElement(react_2.Box, { position: "relative", bg: (_b = c.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: (_g = (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.lg) !== null && _g !== void 0 ? _g : "lg", borderRadius: "0.75rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem" },
+                    react_1.default.createElement(react_2.Flex, { p: 3.5, gap: 3, align: "center" },
+                        react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent }, icon),
+                        react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                            title && (react_1.default.createElement(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_j = (_h = c.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[800] }, title)),
+                            description && (react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_m = (_l = c.gray) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : (_o = c.text) === null || _o === void 0 ? void 0 : _o[600], mt: title ? "0.125rem" : 0 }, description))),
+                        isClosable && (react_1.default.createElement(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_p = c.gray) === null || _p === void 0 ? void 0 : _p[500], borderRadius: "md", _hover: { bg: (_q = c.gray) === null || _q === void 0 ? void 0 : _q[100], color: (_r = c.gray) === null || _r === void 0 ? void 0 : _r[700] } }))),
+                    showProgress && (react_1.default.createElement(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, transformOrigin: "left", sx: {
+                            animation: "".concat(shrink, " ").concat(duration, "ms linear forwards"),
+                        } }))));
             },
         });
     };
@@ -94,3 +113,4 @@ var useToaster = function () {
     return context;
 };
 exports.useToaster = useToaster;
+var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.3.1-beta.1",
+  "version": "2.3.1-beta.3",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/App.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import "./global.css";
-declare function App(): React.JSX.Element;
-export default App;

package/dist/App.js

@@ -1,131 +0,0 @@
-"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 __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 __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 lucide_react_1 = require("lucide-react");
-var Loading_1 = __importDefault(require("./Components/Loading/Loading"));
-var SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
-var NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
-var Layout_1 = __importDefault(require("./Layout"));
-require("./global.css");
-// --- Static demo data (module scope so it isn't re-created each render) ------
-var menu = [
-    {
-        id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "", group: "Main",
-        secondaryItems: [
-            { id: 11, title: "SubMenu", url: "submenu1", icon: lucide_react_1.Cuboid, badge: { count: 10, color: "red", radius: "5px", variant: "outline" } },
-            { id: 12, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
-        ],
-    },
-    {
-        id: 2, title: "AlertDialog", icon: lucide_react_1.Calendar, url: "alertdialog",
-        badge: { count: 10, color: "red", radius: "5px", variant: "outline" },
-    },
-    {
-        id: 3, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
-        subMenu: [
-            { id: 31, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.FileText },
-            { id: 32, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Link2, badge: { count: 10, color: "red", radius: "5px", variant: "subtle" } },
-        ],
-    },
-    {
-        id: 4, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
-        subMenu: [
-            { id: 33, title: "SubMenu1", url: "submenu1" },
-            { id: 34, title: "SubMenu2", url: "submenu2" },
-        ],
-    },
-    {
-        id: 8, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu", group: "Tools",
-        subMenu: [
-            { id: 41, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.Cuboid },
-            { id: 42, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
-        ],
-    },
-];
-var navmenus = [
-    { title: "Account Settings", url: "myaccount", icon: react_1.default.createElement(lucide_react_1.Cuboid, null) },
-    { title: "Reset password", url: "resetpassword" },
-    { title: "Billing", url: "billing" },
-    { title: "Notifications", url: "notifications" },
-];
-function useWindowSize() {
-    var _a = (0, react_1.useState)({ width: 0, height: 0 }), windowSize = _a[0], setWindowSize = _a[1];
-    (0, react_1.useEffect)(function () {
-        var handleResize = function () {
-            return setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-        };
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return function () { return window.removeEventListener("resize", handleResize); };
-    }, []);
-    return windowSize;
-}
-function App() {
-    var _a = useWindowSize(), width = _a.width, height = _a.height;
-    var _b = (0, react_1.useState)(false), toggle = _b[0], changeToggle = _b[1];
-    var _c = (0, react_1.useState)(2), activeMenu = _c[0], setActiveMenu = _c[1];
-    var _d = (0, react_1.useState)(null), activeSecondaryItem = _d[0], setActiveSecondaryItem = _d[1];
-    var _e = (0, react_1.useState)(true), hideSidebar = _e[0], setHideSidebar = _e[1];
-    var handleMenuClick = function (menu) {
-        setActiveMenu(menu === null || menu === void 0 ? void 0 : menu.id);
-        setActiveSecondaryItem(null);
-    };
-    var handleSecondaryNavClick = function (item) {
-        var _a, _b;
-        setActiveSecondaryItem((_b = (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : null);
-    };
-    var handleNavOnClick = function (_title) { };
-    var handleLogout = function () { };
-    return (react_1.default.createElement("div", { className: "App" },
-        react_1.default.createElement(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
-            react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
-            react_1.default.createElement(react_2.Flex, null,
-                react_1.default.createElement(react_2.Box, { display: hideSidebar ? "block" : "none" },
-                    react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, handleSecondaryNavClick: handleSecondaryNavClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, companyName: "PIXELIZE Technologies Pvt., Ltd.", selectedSecondaryItem: activeSecondaryItem })),
-                react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
-                    react_1.default.createElement(NavigationBar_1.default, { key: "navbar", userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", userRole: "Admin", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", sideBarToggole: hideSidebar, onSideBarToggole: function () { return setHideSidebar(function (prev) { return !prev; }); }, navigationBarText: {
-                            text: react_1.default.createElement(react_1.default.Fragment, null, "Dashboard"),
-                            onIconClick: function () { },
-                        }, moreIcon: react_1.default.createElement(lucide_react_1.Calendar, null) }),
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement(react_2.Box, { p: "50px", height: height - 160, overflowY: "scroll", width: width - 75 },
-                        react_1.default.createElement(Layout_1.default, null)))))));
-}
-exports.default = App;

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

@@ -1,15 +0,0 @@
-import React from "react";
-export type Options = {
-    id: string | number;
-    label: string;
-};
-type Props = {
-    options: Options[];
-    value?: Options;
-    placeholder?: string;
-    height?: string | number;
-    onSelect?: (option: Options) => void;
-    size?: "xs" | "sm";
-};
-declare const CompactSelect: React.FC<Props>;
-export default CompactSelect;

package/dist/Components/Table/CompactSelect.js

@@ -1,69 +0,0 @@
-"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 __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;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var CompactSelect = function (_a) {
-    var options = _a.options, value = _a.value, _b = _a.placeholder, placeholder = _b === void 0 ? "Select" : _b, _c = _a.height, height = _c === void 0 ? "22px" : _c, onSelect = _a.onSelect, _d = _a.size, size = _d === void 0 ? "xs" : _d;
-    var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = (0, react_1.useState)(""), query = _f[0], setQuery = _f[1];
-    var filtered = (0, react_1.useMemo)(function () {
-        var q = query.trim().toLowerCase();
-        if (!q)
-            return options;
-        return options.filter(function (o) { return (o.label || "").toLowerCase().includes(q); });
-    }, [query, options]);
-    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, placement: "bottom-start" },
-        react_1.default.createElement(react_2.PopoverTrigger, null,
-            react_1.default.createElement(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? "".concat(height, "px") : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: "gray.300", bg: "white", borderRadius: "0.25rem", onClick: function () { return setIsOpen(function (prev) { return !prev; }); } },
-                react_1.default.createElement(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left" }, (value === null || value === void 0 ? void 0 : value.label) || placeholder),
-                isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 12 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 12 }))),
-        react_1.default.createElement(react_2.Portal, null,
-            react_1.default.createElement(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600 },
-                react_1.default.createElement(react_2.PopoverBody, { p: 2 },
-                    react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" },
-                        react_1.default.createElement(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: function (e) { return setQuery(e.target.value); }, sx: { fontSize: "0.75rem", height: "22px" } }),
-                        react_1.default.createElement(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100" },
-                            filtered.map(function (opt) { return (react_1.default.createElement(react_2.Box, { key: opt.id, px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: function () {
-                                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
-                                    setIsOpen(false);
-                                    setQuery("");
-                                } },
-                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem" }, opt.label))); }),
-                            filtered.length === 0 && (react_1.default.createElement(react_2.Box, { px: 2, py: 2 },
-                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: "gray.500" }, "No results"))))))))));
-};
-exports.default = CompactSelect;

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

@@ -1,9 +0,0 @@
-import React from "react";
-import { TableHeaderProps } from "../TableProps";
-interface ActiveFiltersProps {
-    columns: TableHeaderProps[];
-    columnsSearch: Record<string, string>;
-    setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
-}
-declare const ActiveFilters: React.FC<ActiveFiltersProps>;
-export default ActiveFilters;

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

@@ -1,132 +0,0 @@
-"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 __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 lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var Divider_1 = __importDefault(require("../../Divider/Divider"));
-var ActiveFilters = react_1.default.memo(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var columns = _a.columns, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var columnLabelMap = (0, react_1.useMemo)(function () {
-        var map = new Map();
-        for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
-            var col = columns_1[_i];
-            map.set(col.id, col.label);
-        }
-        return map;
-    }, [columns]);
-    var activeFilters = (0, react_1.useMemo)(function () {
-        return Object.entries(columnsSearch)
-            .filter(function (_a) {
-            var _ = _a[0], value = _a[1];
-            return value && value.trim() !== "";
-        })
-            .map(function (_a) {
-            var columnId = _a[0], value = _a[1];
-            return ({
-                columnId: columnId,
-                label: columnLabelMap.get(columnId) || columnId,
-                value: value.trim(),
-            });
-        });
-    }, [columnsSearch, columnLabelMap]);
-    var handleRemoveFilter = (0, react_1.useCallback)(function (columnId) {
-        setColumnsSearch(function (prev) {
-            var newSearch = __assign({}, prev);
-            delete newSearch[columnId];
-            return newSearch;
-        });
-    }, [setColumnsSearch]);
-    var handleClearAll = (0, react_1.useCallback)(function () {
-        setColumnsSearch({});
-    }, [setColumnsSearch]);
-    if (activeFilters.length === 0) {
-        return null;
-    }
-    return (react_1.default.createElement(react_2.Box, { px: 2, py: 1, bg: ((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[100]) || ((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[50]), overflowX: "auto", sx: {
-            '&::-webkit-scrollbar': {
-                height: '6px',
-            },
-            '&::-webkit-scrollbar-track': {
-                background: theme.colors.gray[100],
-                borderRadius: '3px',
-            },
-            '&::-webkit-scrollbar-thumb': {
-                background: theme.colors.gray[400],
-                borderRadius: '3px',
-            },
-            '&::-webkit-scrollbar-thumb:hover': {
-                background: theme.colors.gray[500],
-            },
-            scrollbarWidth: 'thin',
-            scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
-        } },
-        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content" },
-            activeFilters.length > 0 && react_1.default.createElement(Divider_1.default, null),
-            activeFilters.map(function (filter) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                return (react_1.default.createElement(react_2.Flex, { key: filter.columnId, alignItems: "center", gap: 1, px: 2, py: 1, bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.blue) === null || _b === void 0 ? void 0 : _b[50]) || ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[50]), borderRadius: "md", border: "0.063rem solid ".concat(((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[200]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[200])), flexShrink: 0 },
-                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[700], whiteSpace: "nowrap" },
-                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: 600 },
-                            filter.label,
-                            ":"),
-                        " ",
-                        filter.value),
-                    react_1.default.createElement(react_2.IconButton, { "aria-label": "Remove filter for ".concat(filter.label), icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", onClick: function () { return handleRemoveFilter(filter.columnId); }, _hover: {
-                            bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.blue) === null || _m === void 0 ? void 0 : _m[100]) || ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[100]),
-                        }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })));
-            }),
-            activeFilters.length > 1 && (react_1.default.createElement(react_2.Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: ((_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.blue) === null || _g === void 0 ? void 0 : _g[600]) || ((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
-                    textDecoration: "underline",
-                }, flexShrink: 0, whiteSpace: "nowrap" }, "Clear All")))));
-});
-exports.default = ActiveFilters;

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

@@ -1,7 +0,0 @@
-import React from "react";
-import { TableFiltersProps } from "../TableProps";
-declare const TableFilters: React.MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }: TableFiltersProps & {
-    isOpen?: boolean;
-    onOpen?: () => void;
-}) => React.JSX.Element>;
-export default TableFilters;

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

@@ -1,89 +0,0 @@
-"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 __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;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var TableFilters = (0, react_1.memo)(function (_a) {
-    var _b, _c;
-    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose, isOpen = _a.isOpen, onOpen = _a.onOpen;
-    var theme = (0, react_2.useTheme)();
-    var searchRef = (0, react_1.useRef)(null);
-    var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
-    var setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
-    setColumnsSearchRef.current = setColumnsSearch;
-    var debounceTimerRef = (0, react_1.useRef)(null);
-    var debouncedSearch = (0, react_1.useCallback)(function (value) {
-        if (debounceTimerRef.current)
-            clearTimeout(debounceTimerRef.current);
-        debounceTimerRef.current = setTimeout(function () {
-            setColumnsSearchRef.current(value);
-        }, 700);
-    }, []);
-    (0, react_1.useEffect)(function () {
-        if (columnsSearch.length && searchRef.current) {
-            searchRef.current.value = columnsSearch;
-        }
-        /* eslint-disable */
-    }, [refreshDataOnOpen]);
-    // Auto-focus input when popover opens
-    (0, react_1.useEffect)(function () {
-        if (isOpen && searchRef.current) {
-            // Small delay to ensure popover is fully rendered
-            setTimeout(function () {
-                var _a;
-                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 100);
-        }
-    }, [isOpen]);
-    var handleOpen = function () {
-        setRefreshDataOnOpen(function (prev) { return !prev; });
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    };
-    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen },
-        react_1.default.createElement(react_2.PopoverTrigger, null,
-            react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
-        react_1.default.createElement(react_2.Portal, null,
-            react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
-                react_1.default.createElement(react_2.PopoverBody, { p: 2 },
-                    react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
-                        react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
-                            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
-                        react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
-                                e.stopPropagation();
-                                debouncedSearch(e.target.value);
-                            }, onFocus: function (e) { return e.stopPropagation(); } })))))));
-});
-exports.default = TableFilters;

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

@@ -1,2 +0,0 @@
-declare const useDebounce: (callback: Function, delay: number) => (...args: any[]) => void;
-export default useDebounce;

package/dist/Components/Table/Components/useDebounce.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-// First, create a custom debounce hook
-var useDebounce = function (callback, delay) {
-    var timeoutRef = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
-        return function () {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    var debouncedCallback = (0, react_1.useCallback)(function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(function () {
-            callback.apply(void 0, args);
-        }, delay);
-    }, [callback, delay]);
-    return debouncedCallback;
-};
-exports.default = useDebounce;