pixelize-design-library 2.1.16 → 2.1.17

package/dist/Components/Drawer/Drawer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { DrawerProps } from "./DrawerProps";
+export declare const DrawerHeader: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const DrawerBody: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const DrawerFooter: React.FC<{
+    children: React.ReactNode;
+}>;
+export default function Drawer({ isOpen, onClose, placement, size, id, variant, children, }: DrawerProps): React.JSX.Element;

package/dist/Components/Drawer/Drawer.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var DrawerHeader = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.DrawerHeader = DrawerHeader;
+var DrawerBody = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.DrawerBody = DrawerBody;
+var DrawerFooter = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.DrawerFooter = DrawerFooter;
+function Drawer(_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.placement, placement = _b === void 0 ? "right" : _b, _c = _a.size, size = _c === void 0 ? "xl" : _c, id = _a.id, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, children = _a.children;
+    var isReactElement = function (child) {
+        return child !== null && typeof child === "object" && "type" in child;
+    };
+    var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.DrawerHeader; });
+    var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.DrawerBody; });
+    var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.DrawerFooter; });
+    return (react_1.default.createElement(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id },
+        react_1.default.createElement(react_2.DrawerOverlay, null),
+        react_1.default.createElement(react_2.DrawerContent, null,
+            react_1.default.createElement(react_2.DrawerCloseButton, null),
+            header && (react_1.default.createElement(react_2.DrawerHeader, { borderBottomWidth: "1px" }, header)),
+            react_1.default.createElement(react_2.DrawerBody, null, body && body),
+            footer && react_1.default.createElement(react_2.DrawerFooter, { borderTopWidth: "1px" }, footer))));
+}
+exports.default = Drawer;

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DrawerProps as ChakraDrawerProps } from "@chakra-ui/react";
+export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant"> & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    placement?: "top" | "right" | "bottom" | "left";
+    vaiant?: "solid" | "outline" | "ghost" | "link";
+    children?: React.ReactNode;
+};

package/dist/Components/Drawer/DrawerProps.js

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropdownProps } from "./DropdownProps";
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default Dropdown;

package/dist/Components/Dropdown/DropDown.js

@@ -0,0 +1,97 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var framer_motion_1 = require("framer-motion");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
+var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
+var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
+    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, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, _d = _a.optionsSize, optionsSize = _d === void 0 ? "lg" : _d, _e = _a.divider, divider = _e === void 0 ? false : _e;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onToggle = _f.onToggle, onClose = _f.onClose;
+    var dropdownRef = (0, react_1.useRef)(null);
+    var handleListItemClick = function (optionId, optionLabel) {
+        onClose();
+        handleOptionSelect(optionId, optionLabel);
+    };
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [dropdownRef, onClose]);
+    var dropDownToggleOption = function () {
+        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: __assign({ backgroundColor: theme.colors.primary[500] }, dropDownButtonStyle), rightIcon: isVisibleIconShow ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown, 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,
+            " ",
+            text,
+            isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown })));
+        return dropdownType === "button" ? ButtonToggle : TextToggle;
+    };
+    var DropdownContentRender = function () {
+        var _a, _b, _c;
+        return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light, border: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), borderRadius: theme.radii.md, shadow: theme.shadows.lg, py: 2, mt: "0.2rem", minWidth: "200px", style: ListStyle }, options.map(function (option) {
+            var _a;
+            return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: optionsSize === "sm" ? 1 : 2, px: 2, _hover: {
+                    bg: theme.colors.gray[100],
+                    color: theme.colors.blue[500],
+                }, display: "flex", alignItems: "center", cursor: "pointer", style: ItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
+                    "&:last-child": {
+                        borderBottom: "none",
+                    },
+                } },
+                (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: optionsSize === "sm" ? "1.1rem" : "1.5rem", mr: 2, style: ImageStyle })),
+                react_1.default.createElement(react_2.Box, { as: "span", fontSize: optionsSize === "sm" ? "14px" : "16px", isTruncated: true, style: LabelStyle }, option.label)));
+        })));
+    };
+    return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block" },
+        dropDownToggleOption(),
+        isOpen && (react_1.default.createElement(MotionBox, { ref: ref, position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, style: headStyle }, DropdownContentRender()))));
+});
+Dropdown.displayName = "Dropdown";
+exports.default = Dropdown;

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

@@ -0,0 +1,26 @@
+/// <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;
+    DropdownIcon?: JSX.Element;
+    dropDownButtonStyle?: React.CSSProperties;
+    isVisibleIconShow?: boolean;
+    buttonProps?: ButtonProps;
+    headStyle?: React.CSSProperties;
+    ListStyle?: React.CSSProperties;
+    ItemStyle?: React.CSSProperties;
+    LabelStyle?: React.CSSProperties;
+    ImageStyle?: React.CSSProperties;
+    optionsSize?: "sm" | "md";
+    divider?: boolean;
+};
+type Option = {
+    id: string | number;
+    label: string;
+    image?: React.ElementType;
+};
+export {};

package/dist/Components/Dropdown/DropdownProps.js

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

package/dist/Components/Editor/Editor.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { EditorProps } from "./EditorProps";
+export default function Editor({ value, config, editorRef, className, onChange, onBlur, }: EditorProps): React.JSX.Element;

package/dist/Components/Editor/Editor.js

@@ -0,0 +1,12 @@
+"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 jodit_react_1 = __importDefault(require("jodit-react"));
+function Editor(_a) {
+    var value = _a.value, config = _a.config, editorRef = _a.editorRef, className = _a.className, onChange = _a.onChange, onBlur = _a.onBlur;
+    return (react_1.default.createElement(jodit_react_1.default, { config: config, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }));
+}
+exports.default = Editor;

package/dist/Components/Editor/EditorProps.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IJoditEditorProps } from "jodit-react";
+export type EditorProps = Pick<IJoditEditorProps, "value" | "config" | "className" | "onChange" | "onBlur"> & {
+    editorRef?: React.RefObject<any>;
+};

package/dist/Components/Editor/EditorProps.js

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

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
+export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React.JSX.Element;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -0,0 +1,44 @@
+"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 useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var lucide_react_1 = require("lucide-react");
+function VerifyEmailOtp(_a) {
+    var resendMail = _a.resendMail, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement("div", { style: styles },
+        react_1.default.createElement("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "3%",
+            } },
+            react_1.default.createElement("div", { style: { padding: "3%" } },
+                react_1.default.createElement(lucide_react_1.MailCheck, { size: "100", color: theme.colors.primary[500] })),
+            react_1.default.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" } }, title),
+            react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
+                description,
+                react_1.default.createElement("br", null),
+                " your new Pixel Account"),
+            react_1.default.createElement("div", { style: { marginBottom: "2%" } },
+                react_1.default.createElement(react_2.HStack, null,
+                    react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))),
+            react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
+                "Didn't receive the code?",
+                " ",
+                react_1.default.createElement("button", { onClick: function () { return resendMail(); }, style: {
+                        background: "none",
+                        color: theme.colors.primary[700],
+                        border: "none",
+                        padding: "0",
+                        font: "inherit",
+                        cursor: "pointer",
+                        outline: "inherit",
+                    } }, "Resend Code")))));
+}
+exports.default = VerifyEmailOtp;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type VerifyEmailOtpProps = {
+    resendMail: () => void;
+    onChange: (value: string) => void;
+    onComplete: (value: string) => void;
+    placeholder?: string;
+    pins: number;
+    title: string;
+    description: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    styles?: React.CSSProperties;
+};

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.js

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

package/dist/Components/FileUpload/FileUpload.d.ts

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

package/dist/Components/FileUpload/FileUpload.js

@@ -0,0 +1,156 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var react_dropzone_1 = require("react-dropzone");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var constants_1 = require("./constants");
+var Modal_1 = __importStar(require("../Modal/Modal"));
+var FileUpload = function (_a) {
+    var _b, _c, _d, _e;
+    var onFilesUploaded = _a.onFilesUploaded, uploadedFiles = _a.uploadedFiles, onRemoveFile = _a.onRemoveFile, _f = _a.acceptTypes, acceptTypes = _f === void 0 ? [".jpg", ".png"] : _f, _g = _a.maxSizeKB, maxSizeKB = _g === void 0 ? 5 : _g, _h = _a.maxFiles, maxFiles = _h === void 0 ? undefined : _h, _j = _a.progress, progress = _j === void 0 ? {} : _j;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _k = (0, react_2.useDisclosure)(), isOpen = _k.isOpen, onOpen = _k.onOpen, onClose = _k.onClose;
+    var _l = react_1.default.useState(null), previewUrl = _l[0], setPreviewUrl = _l[1];
+    var _m = react_1.default.useState(null), previewTitle = _m[0], setPreviewTitle = _m[1];
+    var _o = react_1.default.useState([]), errors = _o[0], setErrors = _o[1];
+    var bg = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50];
+    var border = (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    var mappedAccept = acceptTypes.reduce(function (acc, ext) {
+        var mime = constants_1.mimeMap[ext];
+        if (mime) {
+            acc[mime] = []; // File dropzone format
+        }
+        return acc;
+    }, {});
+    var onDrop = (0, react_1.useCallback)(function (acceptedFiles) {
+        setErrors([]);
+        var totalFiles = uploadedFiles.length + acceptedFiles.length;
+        if (maxFiles && totalFiles > maxFiles) {
+            setErrors([
+                "Maximum ".concat(maxFiles, " files allowed. You already uploaded ").concat(uploadedFiles.length, "."),
+            ]);
+            return;
+        }
+        onFilesUploaded(acceptedFiles);
+    }, [onFilesUploaded, uploadedFiles, maxFiles]);
+    var _p = (0, react_dropzone_1.useDropzone)({
+        onDrop: onDrop,
+        accept: mappedAccept,
+        maxSize: maxSizeKB * 1024,
+        maxFiles: maxFiles,
+        onDropRejected: function (rejectedFiles) {
+            var messages = rejectedFiles.flatMap(function (rejected) {
+                return rejected.errors.map(function (err) {
+                    if (err.code === "file-too-large") {
+                        return "File \"".concat(rejected.file.name, "\" is too large. Max size is ").concat((0, constants_1.toMB)(maxSizeKB), ".");
+                    }
+                    else if (err.code === "file-invalid-type") {
+                        return "File \"".concat(rejected.file.name, "\" is not an accepted file type.");
+                    }
+                    else {
+                        return "File \"".concat(rejected.file.name, "\" was rejected: ").concat(err.message);
+                    }
+                });
+            });
+            setErrors(messages);
+        },
+    }), getRootProps = _p.getRootProps, getInputProps = _p.getInputProps;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
+            react_1.default.createElement(react_2.Box, __assign({}, getRootProps(), { border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[100] }, position: "relative" }),
+                react_1.default.createElement("input", __assign({}, getInputProps())),
+                react_1.default.createElement(react_2.VStack, { spacing: 2 },
+                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }),
+                    react_1.default.createElement(react_2.Text, { fontWeight: "medium" }, "Drag and drop files here"),
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500] },
+                        acceptTypes.join(", "),
+                        " up to ",
+                        (0, constants_1.toMB)(maxSizeKB),
+                        " ",
+                        maxFiles ? "- ".concat(maxFiles, " file(s) max") : ""))),
+            errors.length > 0 && (react_1.default.createElement(react_2.Box, null, errors.map(function (err, idx) {
+                var _a;
+                return (react_1.default.createElement(react_2.Text, { key: idx, fontSize: "sm", color: (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[600] }, err));
+            }))),
+            uploadedFiles.length > 0 && (react_1.default.createElement(react_2.Box, null,
+                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
+                    react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4 }, "Uploaded Files")),
+                react_1.default.createElement(react_2.List, { spacing: 2 }, uploadedFiles.map(function (file, index) {
+                    var _a, _b, _c, _d, _e, _f;
+                    return (react_1.default.createElement(react_2.Box, { key: index, borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors === null || colors === void 0 ? void 0 : colors.white },
+                        react_1.default.createElement(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center" },
+                            react_1.default.createElement(react_2.HStack, { spacing: 3, flex: "1" },
+                                file.type.startsWith("image/") ? (react_1.default.createElement(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+                                        ".hover-icon": {
+                                            opacity: 1,
+                                            bg: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16],
+                                        },
+                                    }, onClick: function () {
+                                        setPreviewUrl(URL.createObjectURL(file));
+                                        setPreviewTitle(file.name);
+                                        onOpen();
+                                    } },
+                                    react_1.default.createElement("img", { src: URL.createObjectURL(file), alt: file.name, style: {
+                                            width: "100%",
+                                            height: "100%",
+                                            objectFit: "cover",
+                                            borderRadius: "0.25rem",
+                                        } }),
+                                    react_1.default.createElement(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0 },
+                                        react_1.default.createElement(lucide_react_1.Eye, { color: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100] })))) : (react_1.default.createElement(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_d = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _d === void 0 ? void 0 : _d[500], boxSize: 8 })),
+                                react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
+                                    react_1.default.createElement(react_2.Text, { fontSize: "sm", noOfLines: 1 }, file.name),
+                                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500] },
+                                        (0, constants_1.toMB)(file.size / 1024),
+                                        " \u2022",
+                                        " ",
+                                        file.type || "Unknown type"))),
+                            onRemoveFile && (react_1.default.createElement(react_2.CloseButton, { onClick: function () { return onRemoveFile(file); }, size: "sm", color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600] }))),
+                        (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (react_1.default.createElement(react_2.Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: 5 }))));
+                }))))),
+        react_1.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () {
+                onClose();
+                setPreviewUrl(null);
+                setPreviewTitle(null);
+            }, size: "xl", isCentered: true },
+            react_1.default.createElement(Modal_1.ModalHeader, null,
+                react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 16, textTransform: "uppercase" }, previewTitle)),
+            react_1.default.createElement(Modal_1.ModalBody, null, previewUrl && (react_1.default.createElement(react_2.Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" }))))));
+};
+exports.default = FileUpload;

package/dist/Components/FileUpload/FileUploadProps.d.ts

@@ -0,0 +1,11 @@
+export type MimeExtension = '.jpg' | '.jpeg' | '.png' | '.gif' | '.webp' | '.svg' | '.pdf' | '.doc' | '.docx' | '.xls' | '.xlsx' | '.ppt' | '.pptx' | '.txt' | '.mp4' | '.mov' | '.mp3' | '.wav' | '.zip' | '.rar' | '.7z';
+export type MimeMap = Record<MimeExtension, string>;
+export type FileUploaderProps = {
+    onFilesUploaded: (files: File[]) => void;
+    uploadedFiles: File[];
+    onRemoveFile?: (file: File) => void;
+    acceptTypes?: MimeExtension[];
+    maxSizeKB?: number;
+    maxFiles?: number;
+    progress?: Record<string, number>;
+};

package/dist/Components/FileUpload/FileUploadProps.js

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

package/dist/Components/FileUpload/constants.d.ts

@@ -0,0 +1,3 @@
+import { MimeMap } from "./FileUploadProps";
+export declare const mimeMap: MimeMap;
+export declare const toMB: (size: number) => string;

package/dist/Components/FileUpload/constants.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toMB = exports.mimeMap = void 0;
+exports.mimeMap = {
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.svg': 'image/svg+xml',
+    '.pdf': 'application/pdf',
+    '.doc': 'application/msword',
+    '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    '.xls': 'application/vnd.ms-excel',
+    '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    '.ppt': 'application/vnd.ms-powerpoint',
+    '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    '.txt': 'text/plain',
+    '.mp4': 'video/mp4',
+    '.mov': 'video/quicktime',
+    '.mp3': 'audio/mpeg',
+    '.wav': 'audio/wav',
+    '.zip': 'application/zip',
+    '.rar': 'application/vnd.rar',
+    '.7z': 'application/x-7z-compressed',
+};
+var toMB = function (size) { return "".concat((size / 1024).toFixed(2), " MB"); };
+exports.toMB = toMB;

package/dist/Components/Form/FormWrapper.d.ts

@@ -0,0 +1,7 @@
+import React, { ElementType } from "react";
+declare const FormWrapper: ({ icon, text, children, }: {
+    icon?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    text?: string | undefined;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default FormWrapper;

package/dist/Components/Form/FormWrapper.js

@@ -0,0 +1,19 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FormWrapper = function (_a) {
+    var _b, _c, _d, _e;
+    var icon = _a.icon, text = _a.text, children = _a.children;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_2.default.createElement(react_1.Box, null,
+        react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2 },
+            icon && react_2.default.createElement(react_1.Icon, { as: icon, size: "1rem", color: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500] }),
+            text && (react_2.default.createElement(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: (_c = colors === null || colors === void 0 ? void 0 : colors.header) === null || _c === void 0 ? void 0 : _c[500] }, text))),
+        react_2.default.createElement(react_1.Box, { borderRadius: "0.25rem", bg: colors === null || colors === void 0 ? void 0 : colors.white, border: "0.075rem solid ".concat((_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500]), boxShadow: "0 0.063rem 0.125rem 0 ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary), p: "1.5rem" }, children)));
+};
+exports.default = FormWrapper;

package/dist/Components/Header/Header.d.ts

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

package/dist/Components/Header/Header.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var react_2 = __importStar(require("react"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var desktopMenu_1 = __importDefault(require("./components/desktopMenu"));
+var mobileMenu_1 = __importDefault(require("./components/mobileMenu"));
+var Header = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var logo = _a.logo, menuItems = _a.menuItems, rightSlot = _a.rightSlot, active = _a.active, colors = _a.colors;
+    var _k = (0, react_1.useDisclosure)(), isOpen = _k.isOpen, onOpen = _k.onOpen, onClose = _k.onClose;
+    var _l = (0, react_2.useState)(null), hoveredMenu = _l[0], setHoveredMenu = _l[1];
+    var themeColor = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var bg = (_b = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _b !== void 0 ? _b : (_c = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _c === void 0 ? void 0 : _c[700];
+    var color = (_d = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _d !== void 0 ? _d : (_e = themeColor === null || themeColor === void 0 ? void 0 : themeColor.background) === null || _e === void 0 ? void 0 : _e[100];
+    var activeBg = (_f = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _f !== void 0 ? _f : (_g = themeColor === null || themeColor === void 0 ? void 0 : themeColor.primary) === null || _g === void 0 ? void 0 : _g[400];
+    var hoverBg = (_h = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _h !== void 0 ? _h : (_j = themeColor === null || themeColor === void 0 ? void 0 : themeColor.gray) === null || _j === void 0 ? void 0 : _j[500];
+    var isActive = function (href) { return href && active === href; };
+    return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", 
+        //   position="sticky"
+        //   top="0"
+        zIndex: 1000 },
+        react_2.default.createElement(react_1.Flex, { h: 16, align: "center", mx: "auto" },
+            react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
+            react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlot, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color }),
+            react_2.default.createElement(react_1.HStack, { spacing: 4, display: { base: "none", md: "flex" } }, rightSlot),
+            react_2.default.createElement(react_1.IconButton, { variant: "unstyled", icon: react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full" }, isOpen ? react_2.default.createElement(lucide_react_1.X, { size: 20 }) : react_2.default.createElement(lucide_react_1.MenuIcon, { size: 20 })), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? onClose : onOpen })),
+        react_2.default.createElement(mobileMenu_1.default, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlot })));
+};
+exports.default = Header;