pixelize-design-library 2.1.16 → 2.1.17

package/dist/Components/Select/SelectProps.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { SelectProps } from "@chakra-ui/react";
+export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "colorScheme"> & {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    options: OptionProp[];
+    width?: string | number;
+    height?: string | number;
+    onChange: (selectedOption: OptionProp | undefined) => void;
+    formControlStyle?: React.CSSProperties;
+    isInformation?: boolean;
+    informationMessage?: string;
+    selectStyle?: React.CSSProperties;
+};
+export type OptionProp = {
+    id: string | number;
+    label: string | number;
+};

package/dist/Components/Select/SelectProps.js

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

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SelectSearchProps } from "./SelectSearchProps";
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, isBottomIcon, errorMessage, BottomIcon, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }: Readonly<SelectSearchProps>): React.JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -0,0 +1,239 @@
+"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.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+export type SelectSearchProps = {
+    options: selectOptions[];
+    isSearchEnabled?: boolean;
+    initialSelectedOption?: selectOptions | null;
+    onOptionSelect?: (option: selectOptions) => void;
+    onOptionMultiSelect?: (option: selectOptions[]) => void;
+    inputOnchange: (value: string | number) => void;
+    id?: string;
+    name?: string;
+    label?: string;
+    inputStyle?: React.CSSProperties;
+    dropdownStyle?: React.CSSProperties;
+    boxStyle?: React.CSSProperties;
+    isOptionLoading?: boolean;
+    loadingText?: string;
+    placeholder?: string;
+    searchQuery: string | null;
+    isInformation?: boolean;
+    informationMessage?: string;
+    rightIcon?: React.ReactNode;
+    rightElementStyle?: {};
+    isMultipleSelect?: boolean;
+    isRequired?: boolean | undefined;
+    error?: boolean | undefined;
+    isProfile?: boolean | undefined;
+    isColorOptions?: boolean | undefined;
+    errorMessage?: string | undefined;
+    isBottomIcon?: boolean | undefined;
+    BottomIcon?: boolean | undefined | JSX.Element;
+    BottomIconStyle?: React.CSSProperties;
+    BottomText?: string | number;
+    BottomTextColor?: React.CSSProperties;
+    handleBottomClick?: () => void;
+};
+export type selectOptions = {
+    id: string;
+    label: string;
+    email?: string;
+    profileUrl?: string;
+    color?: string;
+};

package/dist/Components/SelectSearch/SelectSearchProps.js

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

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarProps } from "./SideBarProps";
+export default function Sidebar({ menus, activeMenu, handleMenuClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, }: SidebarProps): React.JSX.Element;

package/dist/Components/SideBar/SideBar.js

@@ -0,0 +1,55 @@
+"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.d.ts

@@ -0,0 +1,29 @@
+export type SidebarProps = {
+    menus: MenuProps[];
+    activeMenu: string;
+    handleMenuClick?: (menu: MenuProps) => void;
+    toggle: boolean;
+    changeToggle: () => void;
+    logo?: string;
+    companyName: string;
+    isDisableAddNew?: boolean;
+    onAddNewClick?: () => void;
+    selectedSubMenu?: string | null;
+};
+export type MenuProps = {
+    id: string | number;
+    title: string;
+    icon: any;
+    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;
+};

package/dist/Components/SideBar/SideBarProps.js

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

package/dist/Components/SideBar/Sidebar.stories.d.ts

@@ -0,0 +1 @@
+export {};

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

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