pixelize-design-library 2.1.7 → 2.1.8

package/dist/Components/SelectSearch/SelectSearch.js

@@ -1,239 +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 (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 __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 FormLabel_1 = require("../Common/FormLabel");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var lucide_react_1 = require("lucide-react");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var RenderOptions = function (_a) {
-    var isOptionLoading = _a.isOptionLoading, filteredOptions = _a.filteredOptions, loadingText = _a.loadingText, handleOptionClick = _a.handleOptionClick, isProfile = _a.isProfile, isColorOptions = _a.isColorOptions;
-    if (isOptionLoading) {
-        return (react_1.default.createElement(react_2.VStack, { py: 2 },
-            react_1.default.createElement(react_2.Spinner, { size: "sm", color: "blue.500" }),
-            react_1.default.createElement(react_2.Text, { color: "blue.500" }, loadingText)));
-    }
-    if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-        return (react_1.default.createElement(react_1.default.Fragment, null, filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: "blue.50" }, onClick: function () { return handleOptionClick(option); }, display: "flex", alignItems: "center", gap: "0.5rem" },
-            isProfile && (react_1.default.createElement(react_2.Box, null,
-                react_1.default.createElement(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }))),
-            isColorOptions && (react_1.default.createElement(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })),
-            react_1.default.createElement(react_2.Box, null,
-                react_1.default.createElement(react_2.Box, null, option.label),
-                option.email && (react_1.default.createElement(react_2.Box, { fontSize: 12, color: "gray.400" }, option.email))))); })));
-    }
-    return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
-};
-function SelectSearch(_a) {
-    var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.isProfile, isProfile = _j === void 0 ? false : _j, _k = _a.isBottomIcon, isBottomIcon = _k === void 0 ? false : _k, errorMessage = _a.errorMessage, 
-    // BottomIconStyle,
-    _l = _a.BottomIcon, 
-    // BottomIconStyle,
-    BottomIcon = _l === void 0 ? false : _l, BottomText = _a.BottomText, handleBottomClick = _a.handleBottomClick, BottomTextColor = _a.BottomTextColor, isColorOptions = _a.isColorOptions;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _m = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _m[0], setSelectedOptions = _m[1];
-    var _o = (0, react_1.useState)(searchQuery), inputValue = _o[0], setInputValue = _o[1];
-    var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
-    var _q = (0, react_1.useState)("below"), position = _q[0], setPosition = _q[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var dropdownRef = (0, react_1.useRef)(null);
-    // const filteredOptions = useMemo(() => {
-    //   return options.filter((option) => {
-    //     const optionLabel = option.label || '';
-    //     const searchValue = inputValue || '';
-    //     return optionLabel.toLowerCase().includes(searchValue.toLowerCase());
-    //   });
-    // }, [options, inputValue]);
-    var filteredOptions = (0, react_1.useMemo)(function () {
-        return options.filter(function (option) {
-            // First filter out already selected options
-            // const isNotSelected = !selectedOptions.some(
-            //   (selected) => selected.id === option.id
-            // );
-            var isNotSelected = isMultipleSelect
-                ? !selectedOptions.some(function (selected) { return selected.id === option.id; })
-                : true;
-            // Then apply the search filter
-            var optionLabel = option.label || "";
-            var searchValue = inputValue || "";
-            return (isNotSelected &&
-                optionLabel.toLowerCase().includes(searchValue.toLowerCase()));
-        });
-    }, [options, inputValue, isMultipleSelect, selectedOptions]);
-    // const filteredOptions = useMemo(() => {
-    //   return options.filter((option) =>
-    //     option.label?.toLowerCase().includes((inputValue ?? "")?.toLowerCase())
-    //   );
-    // }, [options, inputValue]);
-    //   const handleOptionClick = useCallback(
-    //     (option: selectOptions) => {
-    //       if (isMultipleSelect) {
-    //         setSelectedOptions((prev) => {
-    //           const isSelected = prev.some((selected) => selected.id === option.id);
-    //           const newSelected = isSelected
-    //             ? prev.filter((selected) => selected.id !== option.id)
-    //             : [...prev, option];
-    //           setInputValue("");
-    //           if (onOptionMultiSelect) {
-    //             onOptionMultiSelect(newSelected);
-    //           }
-    //           return newSelected;
-    //         });
-    //       } else {
-    //         setInputValue(option.label);
-    //         setIsOpen(false);
-    //         if (onOptionSelect) {
-    //           onOptionSelect(option);
-    //         }
-    //       }
-    //     },
-    //     [isMultipleSelect, onOptionSelect, onOptionMultiSelect]
-    //   );
-    var handleOptionClick = (0, react_1.useCallback)(function (option) {
-        if (isMultipleSelect) {
-            setSelectedOptions(function (prev) {
-                var isSelected = prev.some(function (selected) { return selected.id === option.id; });
-                var newSelected = isSelected
-                    ? prev.filter(function (selected) { return selected.id !== option.id; })
-                    : __spreadArray(__spreadArray([], prev, true), [option], false);
-                // Update the input value and notify the parent
-                setInputValue("");
-                if (onOptionMultiSelect) {
-                    // Call the prop to update state in the parent component
-                    // Note: This should not directly set the state in SelectSearch
-                    setTimeout(function () { return onOptionMultiSelect(newSelected); }, 0);
-                }
-                return newSelected;
-            });
-        }
-        else {
-            setInputValue(option.label);
-            setIsOpen(false);
-            if (onOptionSelect) {
-                onOptionSelect(option);
-            }
-        }
-    }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect]);
-    var handleRemoveOption = function (option) {
-        setSelectedOptions(function (prev) {
-            return prev.filter(function (selected) { return selected.id !== option.id; });
-        });
-        if (onOptionMultiSelect) {
-            onOptionMultiSelect(selectedOptions.filter(function (selected) { return selected.id !== option.id; }));
-            setInputValue("");
-        }
-    };
-    var handleInputChange = function (value) {
-        setInputValue(value);
-        inputOnchange(value);
-    };
-    var handleKeyDown = function (e) {
-        if (e.key === "Enter") {
-            var matchingOption = options.find(function (option) { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
-            if (matchingOption) {
-                handleOptionClick(matchingOption);
-            }
-        }
-    };
-    var updateDropdownPosition = function () {
-        if (inputRef.current && dropdownRef.current) {
-            var inputRect = inputRef.current.getBoundingClientRect();
-            var dropdownRect = dropdownRef.current.getBoundingClientRect();
-            var viewportHeight = window.innerHeight;
-            var spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
-            var spaceAbove = inputRect.top + window.scrollY;
-            if (spaceBelow >= dropdownRect.height) {
-                setPosition("below");
-            }
-            else if (spaceAbove >= dropdownRect.height) {
-                setPosition("above");
-            }
-            else {
-                setPosition("below");
-            }
-        }
-    };
-    (0, react_1.useEffect)(function () {
-        if (isOpen) {
-            updateDropdownPosition();
-        }
-        var handleClickOutside = function (event) {
-            if (inputRef.current &&
-                dropdownRef.current &&
-                !inputRef.current.contains(event.target) &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.FormControl, { isInvalid: error },
-            react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
-                label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-                isMultipleSelect && selectedOptions.length > 0 && (react_1.default.createElement(react_2.HStack, { spacing: 2, mb: 2 }, selectedOptions.map(function (option) { return (react_1.default.createElement(react_2.Tag, { size: "md", key: option.id, borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] } },
-                    react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
-                    react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
-                react_1.default.createElement(react_2.InputGroup, null,
-                    react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "2px solid #DC143C" : "2px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: error ? "none" : "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 600, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? "2px solid #DC143C" : "1px solid #e2e8f0" }) }),
-                    rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
-                isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 },
-                    react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions }),
-                    react_1.default.createElement("hr", null),
-                    isBottomIcon && (react_1.default.createElement(react_2.Box, { position: "sticky", bottom: 0, background: "white", display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: "1px solid lightgray" },
-                        react_1.default.createElement(react_2.Box, null, BottomIcon ? BottomIcon : react_1.default.createElement(lucide_react_1.PlusIcon, { size: "1rem" })),
-                        react_1.default.createElement(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
-                                ? BottomTextColor
-                                : theme.colors.primary[500], padding: "8px 8px" }, BottomText || "Add New"))))),
-                error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })))));
-}
-exports.default = SelectSearch;

package/dist/Components/SelectSearch/SelectSearchProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SideBar/SideBar.js

@@ -1,55 +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 __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 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;
-    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)();
-    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, overflowX: "hidden" },
-                react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: 'all 0.3s ease' }) },
-                    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.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SideBar/Sidebar.stories.js

@@ -1,7 +0,0 @@
-"use strict";
-// import React, { useState } from 'react';
-// import { StoryFn, Meta } from '@storybook/react/types-6-0';
-// import Sidebar from './SideBar';
-// import { SidebarProps } from './SideBarProps';
-// import { fn } from '@storybook/test';
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,116 +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 (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.js

@@ -1,13 +0,0 @@
-"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.js

@@ -1,37 +0,0 @@
-"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.js

@@ -1,77 +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 (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 shadowRef = (0, react_1.useRef)(null);
-    var _c = (0, react_1.useState)(false), isTruncated = _c[0], setIsTruncated = _c[1];
-    (0, react_1.useEffect)(function () {
-        var checkTruncation = function () {
-            var textEl = textRef.current;
-            var shadowEl = shadowRef.current;
-            if (textEl && shadowEl) {
-                var visibleWidth = textEl.offsetWidth;
-                var fullTextWidth = shadowEl.scrollWidth;
-                setIsTruncated(fullTextWidth > visibleWidth);
-            }
-        };
-        checkTruncation();
-        var resizeObserver = new ResizeObserver(checkTruncation);
-        if (textRef.current) {
-            resizeObserver.observe(textRef.current);
-        }
-        return function () { return resizeObserver.disconnect(); };
-    }, [children]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        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", maxW: "100%" }, props), children)),
-        react_1.default.createElement(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py }, children)));
-};
-exports.default = TruncatedTextWithTooltip;

package/dist/Components/Skeletons/Skeleton.stories.js

@@ -1,7 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { Meta, StoryFn } from '@storybook/react';
-// import Skeletons from './Skeletons'; // adjust the import path as necessary
-// import { ChakraProvider } from '@chakra-ui/react';
-// import { SkeletonProps } from './SkeletonProps'; // adjust the import path as necessary
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Skeletons/SkeletonProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Skeletons/Skeletons.js

@@ -1,15 +0,0 @@
-"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");
-function Skeletons(_a) {
-    var startColor = _a.startColor, endColor = _a.endColor, _b = _a.height, height = _b === void 0 ? "20px" : _b, isLoaded = _a.isLoaded, bg = _a.bg, color = _a.color, fadeDuration = _a.fadeDuration, children = _a.children, type = _a.type, speed = _a.speed, size = _a.size, mt = _a.mt, noOfLines = _a.noOfLines, spacing = _a.spacing, skeletonHeight = _a.skeletonHeight, width = _a.width;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        type === "skeleton" && (react_1.default.createElement(react_2.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width }, children)),
-        type === "circle" && react_1.default.createElement(react_2.SkeletonCircle, { size: size, speed: speed }),
-        type === "text" && (react_1.default.createElement(react_2.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))));
-}
-exports.default = Skeletons;