pixelize-design-library 1.1.93 → 1.1.95

package/dist/Components/SideBar/SideBar.js

@@ -1,72 +1,55 @@
 "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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+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 __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_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var Sidebar_1 = require("../../Constants/Sidebar");
 var lucide_react_1 = require("lucide-react");
+var MenuItems_1 = __importDefault(require("./components/MenuItems"));
+var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 function Sidebar(_a) {
-    var _b, _c;
-    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName;
+    var _b;
+    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var RenderMenuItems = (0, react_1.useCallback)(function () {
-        return (react_1.default.createElement(react_1.default.Fragment, null, menus.map(function (menu) {
-            var _a, _b;
-            return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
-                react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title && !toggle
-                        ? theme.colors.primary[500]
-                        : "none", paddingLeft: toggle ? "" : "20px", 
-                    // borderRadius={8}
-                    _hover: {
-                        textDecor: "none",
-                        backgroundColor: !toggle && theme.colors.primary[500],
-                        color: toggle ? (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary[500] : theme.colors.white,
-                    }, _active: { color: theme.colors.white }, w: "98%", onClick: function () { return handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu); }, mt: "5px", className: "custom-link", width: toggle ? "none" : "100%" },
-                    react_1.default.createElement(react_2.MenuButton, { w: "100%", p: "12px", fontWeight: 700 },
-                        react_1.default.createElement(react_2.Flex, { gap: "10px" },
-                            react_1.default.createElement(react_2.Icon, { as: menu.icon, fontSize: "18px", color: activeMenu === menu.title
-                                    ? toggle
-                                        ? theme.colors.primary["500"]
-                                        : "white"
-                                    : "" }),
-                            react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: "14px", color: activeMenu === menu.title ? (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white : "" }, menu.title)))),
-                menu.subMenu && (react_1.default.createElement(react_2.MenuList, { py: 0, border: "none", ml: toggle ? 3 : 6, boxShadow: "0 4px 12px 0 rgba(0, 0, 0, 0.05)" },
-                    react_1.default.createElement(react_2.Flex, { pos: "absolute", mt: "calc(100px - 70px)", ml: "-10px", width: 0, height: 0, borderTop: "10px solid transparent", borderBottom: "10px solid transparent", borderRight: "10px solid #3182CE" }),
-                    menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); })))));
-        })));
-    }, [activeMenu, menus, handleMenuClick, toggle, theme.colors]);
-    return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
-        react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: "center", as: "nav", h: "100vh" },
-            logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, alignItems: "center", gap: 5 },
-                react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo" }),
-                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 20, fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
-                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
-            react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
-                react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
-            react_1.default.createElement(react_2.Flex, { mt: 50, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
-                react_1.default.createElement(RenderMenuItems, null)))));
+    return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "4.688rem" : "15.625rem", flexDir: "column", justifyContent: "space-between", background: theme.colors.sidebar.background[500] },
+        react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
+            logo ? (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "left", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
+                react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
+                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 18, fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))) : (react_1.default.createElement(react_2.Flex, { my: 3.5, alignItems: "center", gap: "0.625rem", pl: toggle ? 0 : "0.625rem" },
+                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
+                    react_1.default.createElement(defaultLogo_1.default, null)),
+                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, display: toggle ? "none" : "flex", lineHeight: 2 }, companyName))),
+            react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
+            react_1.default.createElement(react_2.Flex
+            // mt={5}
+            , { 
+                // mt={5}
+                flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
+                react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign({}, Sidebar_1.FlexCss) },
+                    react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu })),
+                react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
+                !isDisableAddNew && (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", 
+                    // mt="1rem"
+                    cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onAddNewClick },
+                    react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
+                        react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New"))),
+                react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: changeToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
+                    react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse"))))));
 }
 exports.default = Sidebar;

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -1,19 +1,29 @@
 export type SidebarProps = {
-    menus: Menu[];
+    menus: MenuProps[];
     activeMenu: string;
-    handleMenuClick?: (menu: Menu) => void;
+    handleMenuClick?: (menu: MenuProps) => void;
     toggle: boolean;
     changeToggle: () => void;
     logo?: string;
     companyName: string;
+    isDisableAddNew?: boolean;
+    onAddNewClick?: () => void;
+    selectedSubMenu?: string | null;
 };
-type Menu = {
+export type MenuProps = {
+    id: string | number;
     title: string;
     icon: any;
     url: string;
-    subMenu?: {
-        title: string;
-        url: string;
-    }[];
+    disabled?: boolean;
+    locked?: boolean;
+    badge?: string | number;
+    subMenu?: MenuProps[];
+};
+export type RenderMenuType = {
+    menus: MenuProps[];
+    activeMenu: string;
+    handleMenuClick: (menu: MenuProps) => void;
+    toggle: boolean;
+    selectedSubMenu?: string | null;
 };
-export {};

package/dist/Components/SideBar/components/MenuItemBox.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { MenuProps } from "../SideBarProps";
+interface Props {
+    menu: MenuProps;
+    activeMenu: string | number;
+    toggle: boolean;
+    handleClick?: (menu: MenuProps) => void;
+    selectedSubMenu?: string | null;
+}
+declare const MenuItemBox: React.FC<Props>;
+export default MenuItemBox;

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -0,0 +1,116 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var TextTruncation_1 = __importDefault(require("./TextTruncation"));
+var MenuItemBox = function (_a) {
+    var menu = _a.menu, activeMenu = _a.activeMenu, toggle = _a.toggle, handleClick = _a.handleClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var title = menu.title, icon = menu.icon, disabled = menu.disabled, locked = menu.locked, badge = menu.badge, subMenu = menu.subMenu;
+    var hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
+    var isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) { return sub.id === activeMenu; });
+    var isParentActive = activeMenu === menu.id;
+    var isAnyActive = isParentActive || isChildActive;
+    var handleToggleSubMenu = function () {
+        if (!disabled && hasSubMenu) {
+            setIsOpen(!isOpen);
+        }
+        else if (!disabled) {
+            handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
+        }
+    };
+    var commonStyles = {
+        w: "100%",
+        px: "1.5rem",
+        py: "0.75rem",
+        fontWeight: "medium",
+        backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent",
+        color: disabled ? "gray.400" : theme.colors.white,
+        _hover: disabled
+            ? {}
+            : {
+                backgroundColor: theme.colors.primary[700],
+            },
+        pl: toggle ? "1.6875rem" : undefined,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.6 : 1,
+    };
+    var buttonContent = (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", justify: "space-between" },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", overflow: "auto" },
+            react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1.25rem", color: disabled ? theme.colors.gray[400] : theme.colors.white }),
+            !toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "1rem", flex: "1" }, title))),
+        !toggle && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.375rem" },
+            badge && (react_1.default.createElement(react_2.Badge, { colorScheme: "teal", fontSize: "0.625rem", variant: "subtle" }, badge)),
+            locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" }),
+            hasSubMenu && (react_1.default.createElement(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", onClick: function (e) {
+                    e.stopPropagation();
+                    handleToggleSubMenu();
+                } }))))));
+    if (toggle) {
+        // Collapsed sidebar: show Popover
+        return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
+            react_1.default.createElement(react_2.PopoverTrigger, null,
+                react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: handleToggleSubMenu }), buttonContent)),
+            react_1.default.createElement(react_2.Portal, null,
+                react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
+                    react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem", color: "white" },
+                        react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: handleToggleSubMenu }), buttonContent),
+        hasSubMenu && (react_1.default.createElement(react_2.Collapse, { in: isOpen, animateOpacity: true },
+            react_1.default.createElement(react_2.Box, null, subMenu.map(function (sub) {
+                var isSubActive = activeMenu === sub.id;
+                return (react_1.default.createElement(react_2.Box, { key: sub.id || sub.title, py: "0.5rem", px: "1.25rem", pl: "3.3rem", fontSize: "0.875rem", backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent", borderLeft: isSubActive
+                        ? "0.188rem solid ".concat(theme.colors.background[300])
+                        : "0.188rem solid transparent", _hover: {
+                        backgroundColor: theme.colors.primary[700],
+                    }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: function () { return !sub.disabled && (handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub)); }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", color: theme.colors.white },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
+                        react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem" }),
+                        react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", open: isOpen }, sub.title)),
+                    sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : sub.badge ? (react_1.default.createElement(react_2.Badge, { colorScheme: "teal", fontSize: "0.625rem", variant: "subtle" }, sub.badge)) : null));
+            }))))));
+};
+exports.default = MenuItemBox;

package/dist/Components/SideBar/components/MenuItems.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RenderMenuType } from "../SideBarProps";
+declare const MenuItems: React.FC<RenderMenuType>;
+export default MenuItems;

package/dist/Components/SideBar/components/MenuItems.js

@@ -0,0 +1,13 @@
+"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");
+var MenuItemBox_1 = __importDefault(require("./MenuItemBox"));
+var MenuItems = function (_a) {
+    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, selectedSubMenu = _a.selectedSubMenu;
+    return (react_1.default.createElement(react_2.Box, null, menus.map(function (menu) { return (react_1.default.createElement(MenuItemBox_1.default, { key: menu.title, menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu })); })));
+};
+exports.default = MenuItems;

package/dist/Components/SideBar/components/MenuPopoverContent.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { MenuProps } from "../SideBarProps";
+interface Props {
+    menu: MenuProps;
+    handleMenuClick?: (menu: MenuProps) => void;
+    activeMenu?: string | number;
+}
+declare const MenuPopoverContent: React.FC<Props>;
+export default MenuPopoverContent;

package/dist/Components/SideBar/components/MenuPopoverContent.js

@@ -0,0 +1,37 @@
+"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");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var TextTruncation_1 = __importDefault(require("./TextTruncation"));
+var MenuPopoverContent = function (_a) {
+    var menu = _a.menu, handleMenuClick = _a.handleMenuClick, activeMenu = _a.activeMenu;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var title = menu.title, subMenu = menu.subMenu, badge = menu.badge, locked = menu.locked;
+    var isAnySubActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) { return sub.id === activeMenu; });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", mb: (subMenu === null || subMenu === void 0 ? void 0 : subMenu.length) ? "0.5rem" : 0 },
+            react_1.default.createElement(TextTruncation_1.default, { fontWeight: "medium", fontSize: "1rem", flex: "1" }, title),
+            badge && (react_1.default.createElement(react_2.Badge, { colorScheme: "teal", fontSize: "0.625rem", variant: "subtle" }, badge)),
+            locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })), subMenu === null || subMenu === void 0 ? void 0 :
+        subMenu.map(function (sub) {
+            var isSubActive = activeMenu === sub.id;
+            return (react_1.default.createElement(react_2.Flex, { key: sub.id || sub.title, onClick: function () { return !sub.disabled && (handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub)); }, px: "1rem", py: "0.5rem", align: "center", justify: "space-between", gap: "0.75rem", _hover: {
+                    bg: !sub.disabled ? theme.colors.primary[500] : "transparent",
+                    cursor: !sub.disabled ? "pointer" : "not-allowed",
+                }, bg: isAnySubActive
+                    ? theme.colors.primary[500]
+                    : theme.colors.primary[700], borderLeft: isSubActive
+                    ? "0.188rem solid ".concat(theme.colors.background[300])
+                    : "0.188rem solid transparent", color: "white", opacity: sub.disabled ? 0.5 : 1, pointerEvents: sub.disabled ? "none" : "auto" },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
+                    react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem" }),
+                    react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", flex: 1 }, sub.title)),
+                sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : sub.badge ? (react_1.default.createElement(react_2.Badge, { colorScheme: "teal", fontSize: "0.625rem", variant: "subtle" }, sub.badge)) : null));
+        })));
+};
+exports.default = MenuPopoverContent;

package/dist/Components/SideBar/components/TextTruncation.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TextProps } from "@chakra-ui/react";
+interface TruncatedTextWithTooltipProps extends TextProps {
+    children: string;
+    open?: boolean;
+}
+declare const TruncatedTextWithTooltip: React.FC<TruncatedTextWithTooltipProps>;
+export default TruncatedTextWithTooltip;

package/dist/Components/SideBar/components/TextTruncation.js

@@ -0,0 +1,65 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var TruncatedTextWithTooltip = function (_a) {
+    var children = _a.children, _b = _a.open, open = _b === void 0 ? false : _b, props = __rest(_a, ["children", "open"]);
+    var textRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(false), isTruncated = _c[0], setIsTruncated = _c[1];
+    (0, react_1.useEffect)(function () {
+        requestAnimationFrame(function () {
+            var el = textRef.current;
+            if (el) {
+                setIsTruncated(el.scrollWidth > el.clientWidth);
+            }
+        });
+    }, [children, open]);
+    return (react_1.default.createElement(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right" },
+        react_1.default.createElement(react_2.Text, __assign({ ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, props), children)));
+};
+exports.default = TruncatedTextWithTooltip;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { HeaderActionsProps } from "../TableProps";
+declare const HeaderActions: ({ actions, selections, }: {
+    actions?: HeaderActionsProps | undefined;
+    selections: (string | number)[];
+}) => React.JSX.Element;
+export default HeaderActions;

package/dist/Components/Table/Components/HeaderActions.js

@@ -0,0 +1,45 @@
+"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 __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 lucide_react_1 = require("lucide-react");
+var react_2 = __importDefault(require("react"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var ListItem = function (_a) {
+    var _b;
+    var icon = _a.icon, name = _a.name, onClick = _a.onClick, selections = _a.selections;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var styledIcon = react_2.default.cloneElement(icon, {
+        color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500],
+        size: "1.25rem",
+    });
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", onClick: function () { return onClick && onClick(selections); }, cursor: "pointer" },
+        styledIcon,
+        " ",
+        name));
+};
+var HeaderActions = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var actions = _a.actions, selections = _a.selections;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_2.default.createElement(react_1.Box, { display: "flex", gap: 4, fontSize: "0.875rem", fontWeight: 400, color: (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b[500] },
+        ((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, null), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections })),
+        ((_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, null), name: "Mass Update", onClick: (_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.onClick, selections: selections })),
+        ((_g = actions === null || actions === void 0 ? void 0 : actions.items) === null || _g === void 0 ? void 0 : _g.length)
+            ? (_h = actions === null || actions === void 0 ? void 0 : actions.items) === null || _h === void 0 ? void 0 : _h.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
+            : null));
+};
+exports.default = HeaderActions;

package/dist/Components/Table/Components/Pagination.js

@@ -12,26 +12,21 @@ var Pagination = function (_a) {
     var pageSizeOptions = (0, table_1.pageSizeCalculation)(dataLength);
     var isLeftDisabled = currentPage === 0;
     var isRightDisabled = currentPage >= pages - 1;
-    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", mt: 4 },
-        react_1.default.createElement(react_2.Text, { mr: 4, fontSize: 12 }, paginationText),
-        !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, mr: 4, size: "xs", width: 20 },
+    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center" },
+        !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20 },
             dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
             pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); }))),
         react_1.default.createElement(react_2.Flex, null,
-            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
                 react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),
-            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
                 react_1.default.createElement(lucide_react_1.ChevronLeft, null)),
-            react_1.default.createElement(react_2.Text, { mx: 1, mt: 3, fontSize: 12 },
-                "Page ",
-                currentPage + 1,
-                " of ",
-                pages),
-            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
+            react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12 }, paginationText),
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
                     return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
                 } },
                 react_1.default.createElement(lucide_react_1.ChevronRight, null)),
-            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
                 react_1.default.createElement(lucide_react_1.ChevronsRight, null)))));
 };
 exports.default = Pagination;

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableBodyPageProps } from "../TableProps";
-declare const TableBody: ({ data, isCheckbox, columns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, }: TableBodyPageProps) => React.JSX.Element;
+declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, }: TableBodyPageProps) => React.JSX.Element;
 export default TableBody;