pixelize-design-library 1.0.58 → 1.0.59

package/dist/Components/Accordion/Accordion.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { AccordionProps } from "./AccordionProps";
-export declare const Accordion: ({}: AccordionProps) => React.JSX.Element;
+export declare const Accordion: ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }: AccordionProps) => React.JSX.Element;

package/dist/Components/Accordion/Accordion.js

@@ -1,11 +1,41 @@
 "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 __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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
 var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
 var Accordion = function (_a) {
-    return (react_1.default.createElement("div", null, "Accordion"));
+    var allowMultiple = _a.allowMultiple, allowToggle = _a.allowToggle, index = _a.index, onChange = _a.onChange, reduceMotion = _a.reduceMotion, items = _a.items, rest = __rest(_a, ["allowMultiple", "allowToggle", "index", "onChange", "reduceMotion", "items"]);
+    return (react_1.default.createElement(react_2.Accordion, __assign({ allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion }, rest), items.map(function (item, idx) {
+        var _a, _b, _c;
+        return (react_1.default.createElement(react_2.AccordionItem, __assign({ key: idx }, item.itemProps, { sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle }),
+            react_1.default.createElement("h2", null,
+                react_1.default.createElement(react_2.AccordionButton, __assign({}, item.buttonProps, { sx: __assign(__assign({}, (_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle), { border: "1px solid #cdc9c9", backgroundColor: "white", borderRadius: "4px" }) }), item.header)),
+            react_1.default.createElement(react_2.AccordionPanel, __assign({}, item.panelProps, { sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle }), item.content)));
+    })));
 };
 exports.Accordion = Accordion;

package/dist/Components/Accordion/AccordionProps.d.ts

@@ -1 +1,16 @@
-export type AccordionProps = {};
+/// <reference types="react" />
+import { AccordionProps as ChakraAccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps } from "@chakra-ui/react";
+export type AccordionProps = ChakraAccordionProps & {
+    items: {
+        header: React.ReactNode;
+        content: React.ReactNode;
+        buttonProps?: AccordionButtonProps;
+        panelProps?: AccordionPanelProps;
+        itemProps?: AccordionItemProps;
+        customStyles?: {
+            buttonStyle?: React.CSSProperties;
+            panelStyle?: React.CSSProperties;
+            itemStyle?: React.CSSProperties;
+        };
+    }[];
+};

package/dist/Components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AlertDialogsProps } from "./AlertDialogProps";
+declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, }: AlertDialogsProps) => React.JSX.Element;
+export default AlertDialog;

package/dist/Components/AlertDialog/AlertDialog.js

@@ -0,0 +1,20 @@
+"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 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var AlertDialog = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style;
+    return (react_2.default.createElement(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: true },
+        react_2.default.createElement(react_1.AlertDialogOverlay, null),
+        react_2.default.createElement(react_1.AlertDialogContent, null,
+            react_2.default.createElement(react_1.AlertDialogHeader, { sx: headerStyle }, title),
+            react_2.default.createElement(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }),
+            react_2.default.createElement(react_1.AlertDialogBody, { sx: bodyStyle }, content),
+            react_2.default.createElement(react_1.AlertDialogFooter, { sx: footerStyle },
+                react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, sx: button1Style }, cancelButtonText),
+                react_2.default.createElement(react_1.Button, { colorScheme: "red", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, sx: button2Style }, confirmButtonText)))));
+};
+exports.default = AlertDialog;

package/dist/Components/AlertDialog/AlertDialogProps.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
+export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
+    title: string;
+    content: string;
+    isCentered?: boolean;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    isConfirmLoading?: boolean;
+    onConfirm: () => void;
+    headerStyle?: React.CSSProperties;
+    bodyStyle?: React.CSSProperties;
+    footerStyle?: React.CSSProperties;
+    closeButtonStyle?: React.CSSProperties;
+    button1Style?: React.CSSProperties;
+    button2Style?: React.CSSProperties;
+};

package/dist/Components/AlertDialog/AlertDialogProps.js

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

package/dist/Components/Dropdown/DropDown.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { DropdownProps } from "./DropdownProps";
-declare const Dropdown: ({ ButtonText, options, handleOptionSelect, dropdownType, text, textDropdownIcon, }: DropdownProps) => React.JSX.Element;
+declare const Dropdown: ({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType, text, DropdownIcon, isVisibleIconShow, buttonProps, }: DropdownProps) => React.JSX.Element;
 export default Dropdown;

package/dist/Components/Dropdown/DropDown.js

@@ -1,7 +1,14 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+var __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;
@@ -26,74 +33,52 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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("react");
-var styled_1 = __importDefault(require("@emotion/styled"));
+var react_2 = require("@chakra-ui/react");
 var fi_1 = require("react-icons/fi");
-var react_3 = require("@emotion/react");
-var showAnimation = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-var closeAnimation = (0, react_3.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n"], ["\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n"])));
-var DropdownContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  // font-size: 1rem;\n  // font-weight: 300;\n"], ["\n  position: relative;\n  display: inline-block;\n  // font-size: 1rem;\n  // font-weight: 300;\n"])));
-var DropdownButton = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: #000000;\n  padding: 0.3rem 2rem;\n  border: none;\n  cursor: pointer;\n  border: 1px solid #3182ce;\n  width: 100%;\n  margin-bottom: 2%;\n  &:hover {\n    //  background-color: #c9dff8;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: #000000;\n  padding: 0.3rem 2rem;\n  border: none;\n  cursor: pointer;\n  border: 1px solid #3182ce;\n  width: 100%;\n  margin-bottom: 2%;\n  &:hover {\n    //  background-color: #c9dff8;\n  }\n"])));
-var DropdownContent = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background-color: #f9f9f9;\n  border: 1px solid #3182ce;\n  width: 100%;\n  min-width: 200px;\n  width: fit-content;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 5;\n  top: 100%;\n  &.show {\n    display: block;\n    animation: ", " 0.3s forwards;\n  }\n  &.close {\n    animation: ", " 0.3s forwards;\n  }\n"], ["\n  display: none;\n  position: absolute;\n  background-color: #f9f9f9;\n  border: 1px solid #3182ce;\n  width: 100%;\n  min-width: 200px;\n  width: fit-content;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 5;\n  top: 100%;\n  &.show {\n    display: block;\n    animation: ", " 0.3s forwards;\n  }\n  &.close {\n    animation: ", " 0.3s forwards;\n  }\n"])), showAnimation, closeAnimation);
-var ListItem = styled_1.default.li(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: black;\n  padding: 5px 10px;\n  text-decoration: none;\n  display: block;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  &:hover {\n    background-color: #f1f1f1;\n    color: #3182ce;\n  }\n"], ["\n  color: black;\n  padding: 5px 10px;\n  text-decoration: none;\n  display: block;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  &:hover {\n    background-color: #f1f1f1;\n    color: #3182ce;\n  }\n"])));
-var LiParent = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var ImageContainer = styled_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  // margin-left: ", ";\n  padding-right: ", ";\n  color: #3182ce;\n  svg {\n    transition: transform 0.3s ease;\n    transform: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  // margin-left: ", ";\n  padding-right: ", ";\n  color: #3182ce;\n  svg {\n    transition: transform 0.3s ease;\n    transform: ", ";\n  }\n"])), function (_a) {
-    var Position = _a.Position;
-    return (Position === "button" ? "0" : "0.5rem");
-}, function (_a) {
-    var Position = _a.Position;
-    return (Position === "button" ? "0.2rem" : "0");
-}, function (_a) {
-    var isVisible = _a.isVisible;
-    return isVisible ? "rotate(180deg)" : "rotate(0deg)";
-});
-var DropdownText = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-bottom: 2%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  margin-bottom: 2%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var TextContent = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  max-width: 12rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: 0.5rem;\n"], ["\n  max-width: 12rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-left: 0.5rem;\n"])));
+var framer_motion_1 = require("framer-motion");
+var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
 var Dropdown = function (_a) {
-    var ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, textDropdownIcon = _a.textDropdownIcon;
-    var _c = (0, react_2.useState)(false), isVisible = _c[0], setIsVisible = _c[1];
-    var toggleDropdown = function () { return setIsVisible(!isVisible); };
+    var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps;
+    var _d = (0, react_2.useDisclosure)(), isOpen = _d.isOpen, onToggle = _d.onToggle, onClose = _d.onClose;
     var dropdownRef = (0, react_1.useRef)(null);
     var handleListItemClick = function (optionId, optionLabel) {
-        setIsVisible(false);
+        onClose();
         handleOptionSelect(optionId, optionLabel);
     };
     (0, react_1.useEffect)(function () {
         var handleClickOutside = function (event) {
             if (dropdownRef.current &&
                 !dropdownRef.current.contains(event.target)) {
-                setIsVisible(false);
+                onClose();
             }
         };
         document.addEventListener("mousedown", handleClickOutside);
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [dropdownRef]);
-    var dropDownToogleOption = function () {
-        var ButtonToogle = (react_1.default.createElement(DropdownButton, { onClick: toggleDropdown },
-            ButtonText,
-            "\u00A0",
-            react_1.default.createElement(ImageContainer, { isVisible: isVisible },
-                react_1.default.createElement(fi_1.FiChevronDown, null))));
-        var TextToggle = (react_1.default.createElement(DropdownText, { onClick: toggleDropdown },
-            react_1.default.createElement(ImageContainer, { isVisible: false, Position: "button" }, textDropdownIcon),
-            text));
-        return dropdownType === "button" ? ButtonToogle : TextToggle;
+    }, [dropdownRef, onClose]);
+    var dropDownToggleOption = function () {
+        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: dropDownButtonStyle, rightIcon: isVisibleIconShow ? react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" }) : undefined }, buttonProps),
+            DropdownIcon,
+            " \u00A0 ",
+            ButtonText));
+        var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", style: dropDownButtonStyle, cursor: "pointer" },
+            DropdownIcon,
+            " \u00A0 ",
+            text,
+            " \u00A0",
+            isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown })));
+        return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
-    var DropdownContentRunder = function () {
-        return (react_1.default.createElement("ul", null, options.map(function (option) { return (react_1.default.createElement(ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); } }, option.image && (react_1.default.createElement(LiParent, null,
-            react_1.default.createElement(ImageContainer, { isVisible: false }, option.image),
-            react_1.default.createElement(TextContent, null, option.label))))); })));
+    var DropdownContentRender = function () {
+        return (react_1.default.createElement(react_2.List, { bg: "white", border: "1px solid", borderColor: "blue.500", shadow: "md", p: 2, mt: 2, minWidth: "200px" }, options.map(function (option) { return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: 2, _hover: { bg: "gray.100", color: "blue.500" }, display: "flex", alignItems: "center", cursor: "pointer" },
+            (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: "1.5rem", mr: 2 })),
+            react_1.default.createElement(react_2.Box, { as: "span", isTruncated: true }, option.label))); })));
     };
-    return (react_1.default.createElement(DropdownContainer, { ref: dropdownRef },
-        dropDownToogleOption(),
-        react_1.default.createElement(DropdownContent, { className: isVisible ? "show" : "" }, DropdownContentRunder())));
+    return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", width: "100%" },
+        dropDownToggleOption(),
+        isOpen && (react_1.default.createElement(MotionBox, { position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 } }, DropdownContentRender()))));
 };
 exports.default = Dropdown;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -1,15 +1,19 @@
 /// <reference types="react" />
+import { ButtonProps } from "@chakra-ui/react";
 export type DropdownProps = {
     ButtonText?: string;
     options: Option[];
     handleOptionSelect: (id: string | number, label: string) => void;
     dropdownType?: "button" | "text";
     text?: string;
-    textDropdownIcon?: JSX.Element;
+    DropdownIcon?: JSX.Element;
+    dropDownButtonStyle?: React.CSSProperties;
+    isVisibleIconShow?: boolean;
+    buttonProps?: ButtonProps;
 };
 type Option = {
     id: string | number;
     label: string;
-    image?: JSX.Element;
+    image?: React.ElementType;
 };
 export {};

package/dist/Components/Modal/Modal.js

@@ -9,14 +9,6 @@ function Modal(_a) {
     var size = _a.size, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.overlaybg, overlaybg = _c === void 0 ? "blackAlpha.300" : _c, _d = _a.overlaybackdropFilter, overlaybackdropFilter = _d === void 0 ? "blur(10px) hue-rotate(90deg)" : _d, overlaybackdropInvert = _a.overlaybackdropInvert, overlaybackdropBlur = _a.overlaybackdropBlur, isCentered = _a.isCentered, finalFocusRef = _a.finalFocusRef, blockScrollOnMount = _a.blockScrollOnMount, initialFocusRef = _a.initialFocusRef, closeOnOverlayClick = _a.closeOnOverlayClick, motionPreset = _a.motionPreset, scrollBehavior = _a.scrollBehavior, children = _a.children, isLoading = _a.isLoading;
     if (!isOpen)
         return react_1.default.createElement(react_1.default.Fragment, null);
-    // const filterChildren = (type: string) => {
-    //   return React.Children.map(children, (child) => {
-    //     if (child.type === type) return child.props.children;
-    //   }).filter(Boolean)[0]; // Get the first (and should be only) element's children
-    // };
-    // const headerContent = filterChildren("header");
-    // const bodyContent = filterChildren("body");
-    // const footerContent = filterChildren("footer");
     var isReactElement = function (child) {
         return child !== null && typeof child === "object" && "type" in child;
     };

package/dist/Components/SelectSearch/SelectSearch.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,26 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 styled_1 = __importDefault(require("@emotion/styled"));
 var react_2 = require("@chakra-ui/react");
-var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
-var Label = styled_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n"])));
-var Input = styled_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  cursor: pointer;\n  &:hover {\n    border-color: #3182ce;\n  }\n  &:focus-visible,\n  &:focus {\n    border-color: #3182ce;\n    outline: none;\n  }\n"], ["\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  cursor: pointer;\n  &:hover {\n    border-color: #3182ce;\n  }\n  &:focus-visible,\n  &:focus {\n    border-color: #3182ce;\n    outline: none;\n  }\n"])));
-var Dropdown = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  left: 0;\n  right: 0;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background: white;\n  max-height: 150px;\n  overflow-y: auto;\n  z-index: 1000;\n  #max-width: 50%;\n"], ["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  left: 0;\n  right: 0;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background: white;\n  max-height: 150px;\n  overflow-y: auto;\n  z-index: 1000;\n  #max-width: 50%;\n"])), function (props) { return (props.position === "below" ? "100%" : "auto"); }, function (props) { return (props.position === "above" ? "100%" : "auto"); });
-var Option = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 8px;\n  cursor: pointer;\n  &:hover {\n    background: #3182ce24;\n  }\n"], ["\n  padding: 8px;\n  cursor: pointer;\n  &:hover {\n    background: #3182ce24;\n  }\n"])));
-var NoOptions = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 8px;\n  color: #999;\n"], ["\n  padding: 8px;\n  color: #999;\n"])));
-var Loading = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 8px;\n  text-align: center;\n  color: #3182ce;\n  align-item: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  padding: 8px;\n  text-align: center;\n  color: #3182ce;\n  align-item: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 function SelectSearch(_a) {
     var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c;
     var _d = (0, react_1.useState)(initialSelectedOption ? initialSelectedOption.label : ""), inputValue = _d[0], setInputValue = _d[1];
     var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
     var _f = (0, react_1.useState)("below"), position = _f[0], setPosition = _f[1];
-    // const [dropdownTop, setDropdownTop] = useState(0);
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (option) {
@@ -78,15 +62,12 @@ function SelectSearch(_a) {
             var spaceAbove = inputRect.top + window.scrollY;
             if (spaceBelow >= dropdownRect.height) {
                 setPosition("below");
-                console.log("below");
             }
             else if (spaceAbove >= dropdownRect.height) {
                 setPosition("above");
-                console.log("above");
             }
             else {
                 setPosition("below");
-                console.log("below");
             }
         }
     };
@@ -121,14 +102,11 @@ function SelectSearch(_a) {
             window.removeEventListener("resize", handleResize);
         };
     }, [isOpen]);
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(Label, null, label),
-        react_1.default.createElement(Input, { ref: inputRef, value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: handleInputChange, placeholder: "Select option", onKeyDown: handleKeyDown, id: id, type: "text", name: name, style: inputStyle }),
-        isOpen && (react_1.default.createElement(Dropdown, { ref: dropdownRef, style: dropdownStyle, position: position }, isOptionLoading ? (react_1.default.createElement(Loading, null,
-            react_1.default.createElement(react_2.Spinner, { thickness: "2px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "sm" }),
-            " ",
-            "\u00A0",
-            loadingText)) : (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0 ? (filteredOptions.map(function (option) { return (react_1.default.createElement(Option, { key: option.id, onClick: function () { return handleOptionClick(option); } }, option.label)); })) : (react_1.default.createElement(NoOptions, null, "No options found"))))));
+    return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative" },
+        react_1.default.createElement(react_2.FormLabel, { htmlFor: id, mb: 2, fontWeight: "bold" }, label),
+        react_1.default.createElement(react_2.Input, { ref: inputRef, value: inputValue, onClick: function () { return setIsOpen(true); }, onChange: handleInputChange, placeholder: "Select option", onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" } }),
+        isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, 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 }, isOptionLoading ? (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))) : (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0 ? (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); } }, option.label)); })) : (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"))))));
 }
 exports.default = SelectSearch;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/Layout.js

@@ -73,6 +73,9 @@ var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker")
 var Search_1 = __importDefault(require("./Components/Search/Search"));
 var Timeline_1 = __importDefault(require("./Components/Timeline/Timeline"));
 var SelectSearch_1 = __importDefault(require("./Components/SelectSearch/SelectSearch"));
+var Accordion_1 = require("./Components/Accordion/Accordion");
+var fa_1 = require("react-icons/fa");
+var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
 var Layout = function () {
     var navmenus = [
         { title: "Account Settings", url: "myaccount" },
@@ -258,11 +261,11 @@ var Layout = function () {
     var exportOptionss = (0, react_2.useMemo)(function () { return [
         // { id: "PDF", label: "Export as PDF", image: <FiChevronUp /> },
         // { id: "XLS", label: "Export as XLS" },
-        { id: 1, label: "Upload file", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
-        { id: 2, label: "Documents", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
-        { id: 3, label: "CRM workDrive", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
-        { id: 4, label: "Other Cloud Drives", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
-        { id: 5, label: "Link(URL)", image: react_2.default.createElement(fi_1.FiChevronUp, null) },
+        { id: 1, label: "Upload file" },
+        { id: 2, label: "Documents", image: fi_1.FiChevronUp },
+        { id: 3, label: "CRM workDrive", image: fi_1.FiChevronUp },
+        { id: 4, label: "Other Cloud Drives", image: fi_1.FiChevronUp },
+        { id: 5, label: "Link(URL)", image: fi_1.FiChevronUp },
     ]; }, []);
     var data = (0, react_2.useMemo)(function () { return Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); }); }, []);
     var categories = (0, react_2.useMemo)(function () { return data.map(function (_, index) { return "Category ".concat(index + 1); }); }, [data]);
@@ -388,6 +391,11 @@ var Layout = function () {
     var handleSelectClick = function (option) {
         console.log("Selected option:", option);
     };
+    var _q = (0, react_2.useState)(false), alertActive = _q[0], setAlertActive = _q[1];
+    var leastDestructiveRef = react_2.default.useRef();
+    var handleAlert = function () {
+        setAlertActive(!alertActive);
+    };
     return (react_2.default.createElement(react_1.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden" },
         react_2.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
         react_2.default.createElement(react_1.Flex, null,
@@ -541,9 +549,18 @@ var Layout = function () {
                             console.log("isActive", isActive);
                         } }),
                     react_2.default.createElement("br", null),
-                    react_2.default.createElement(DropDown_1.default, { ButtonText: "Visibility", options: exportOptionss, dropdownType: "button", text: "Visibility", textDropdownIcon: react_2.default.createElement(icons_1.ChevronRightIcon, { color: "gray.500" }), handleOptionSelect: function (id, label) {
+                    react_2.default.createElement(DropDown_1.default, { ButtonText: "Visibility", options: exportOptionss, 
+                        // dropDownButtonStyle={{ color: "red" }}
+                        dropdownType: "text", text: "Visibility", DropdownIcon: react_2.default.createElement(fi_1.FiMoreHorizontal, { color: "gray.500" }), handleOptionSelect: function (id, label) {
                             console.log("optionid", id, label);
                         } }),
+                    react_2.default.createElement("br", null),
+                    react_2.default.createElement("br", null),
+                    react_2.default.createElement(DropDown_1.default, { ButtonText: "hello", options: exportOptionss, 
+                        // dropDownButtonStyle={{ color: "red" }}
+                        DropdownIcon: react_2.default.createElement(fi_1.FiMoreHorizontal, { color: "gray.500" }), dropdownType: "button", handleOptionSelect: function (id, label) {
+                            console.log("optionid", id, label);
+                        }, buttonProps: { variant: "solid", colorScheme: "red" }, isVisibleIconShow: true }),
                     react_2.default.createElement("div", null,
                         react_2.default.createElement("br", null),
                         react_2.default.createElement("br", null)),
@@ -585,8 +602,6 @@ var Layout = function () {
                     react_2.default.createElement(Timeline_1.default, { timelineEvents: timeline }),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("br", null),
-                    react_2.default.createElement("br", null),
-                    react_2.default.createElement("br", null),
                     react_2.default.createElement(SelectSearch_1.default, { options: [
                             { id: "1", label: "Option 1" },
                             { id: "2", label: "select 2" },
@@ -596,14 +611,42 @@ var Layout = function () {
                             },
                         ], inputOnchange: function (value) {
                             console.log(value);
-                        }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: handleSelectClick, name: "hai", isOptionLoading: true }),
-                    react_2.default.createElement("br", null),
-                    react_2.default.createElement("br", null),
+                        }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: handleSelectClick, name: "hai", 
+                        // isOptionLoading={true}
+                        label: "SelectSearch" }),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("br", null),
+                    react_2.default.createElement(react_1.Text, null, "Accordion"),
+                    react_2.default.createElement(Accordion_1.Accordion, { allowToggle: true, items: [
+                            {
+                                header: (react_2.default.createElement(react_2.default.Fragment, null,
+                                    react_2.default.createElement(react_1.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
+                                    react_2.default.createElement(fa_1.FaChevronDown, { style: { marginRight: "8px" } }))),
+                                content: (react_2.default.createElement("div", null,
+                                    react_2.default.createElement(react_1.Text, null, "This is text inside Section 1."),
+                                    react_2.default.createElement(react_1.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
+                                    react_2.default.createElement(react_1.Flex, { mt: 2 },
+                                        react_2.default.createElement(react_1.Box, { flex: "1", bg: "blue.200", p: 4 }, "Box 1"),
+                                        react_2.default.createElement(react_1.Box, { flex: "1", bg: "green.200", p: 4, ml: 2 }, "Box 2")))),
+                            },
+                            {
+                                header: (react_2.default.createElement(react_2.default.Fragment, null,
+                                    react_2.default.createElement(react_1.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
+                                    react_2.default.createElement(fa_1.FaChevronDown, { style: { marginRight: "8px" } }))),
+                                content: (react_2.default.createElement("div", null,
+                                    react_2.default.createElement(react_1.Text, null, "This is text inside Section 1."),
+                                    react_2.default.createElement(react_1.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
+                                    react_2.default.createElement(react_1.Flex, { mt: 2 },
+                                        react_2.default.createElement(react_1.Box, { flex: "1", bg: "blue.200", p: 4 }, "Box 1"),
+                                        react_2.default.createElement(react_1.Box, { flex: "1", bg: "green.200", p: 4, ml: 2 }, "Box 2")))),
+                            },
+                        ] }),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("br", null),
-                    react_2.default.createElement("br", null))))));
+                    react_2.default.createElement(react_1.Button, { onClick: function () {
+                            setAlertActive(true);
+                        } }, "AlertDialog"),
+                    react_2.default.createElement(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: "hellobody", onConfirm: function () { return console.log("isenable"); } }))))));
 };
 exports.default = Layout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.58",
+  "version": "1.0.59",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -76,4 +76,4 @@
       "prettier --write"
     ]
   }
-}
+}