pixelize-design-library 2.0.21 → 2.1.1

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,130 @@
+"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 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;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _j = react_1.default.useState([]), errors = _j[0], setErrors = _j[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 _k = (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 = _k.getRootProps, getInputProps = _k.getInputProps;
+    return (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] } }),
+            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;
+                return (react_1.default.createElement(react_2.ListItem, { key: index, display: "flex", justifyContent: "space-between", alignItems: "center", 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.HStack, { spacing: 3, flex: "1" },
+                        file.type.startsWith("image/") ? (react_1.default.createElement(react_2.Box, { boxSize: "40px" },
+                            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.ListIcon, { as: lucide_react_1.FileText, color: (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[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: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[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: (_c = colors === null || colors === void 0 ? void 0 : colors.red) === null || _c === void 0 ? void 0 : _c[600] }))));
+            }))))));
+};
+exports.default = FileUpload;

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

@@ -0,0 +1,10 @@
+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;
+};

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/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;

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+type SubItem = {
+    label: string;
+    href: string;
+    badge?: {
+        label: string;
+        colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
+    };
+    onClick?: () => void;
+};
+type MenuItemProp = {
+    label: string;
+    href?: string;
+    badge?: {
+        label: string;
+        colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
+    };
+    onClick?: () => void;
+    children?: SubItem[];
+};
+export type HeaderProps = {
+    logo: React.ReactNode;
+    menuItems: MenuItemProp[];
+    rightSlot?: React.ReactNode;
+    active?: string;
+    colors?: {
+        bg: string;
+        color: string;
+        active: string;
+        hover: string;
+    };
+};
+export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
+    setHoveredMenu: (menu: string | null) => void;
+    isActive: (href?: string) => boolean | "" | undefined;
+    activeBg: string;
+    hoveredMenu: string | null;
+    hoverBg: string;
+    color: string;
+};
+export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
+    isOpen: boolean;
+};
+export {};

package/dist/Components/Header/HeaderProps.js

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { DesktopMenuProps } from "../HeaderProps";
+declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, }: DesktopMenuProps) => React.JSX.Element;
+export default DesktopMenu;

package/dist/Components/Header/components/desktopMenu.js

@@ -0,0 +1,33 @@
+"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 lucide_react_1 = require("lucide-react");
+var react_2 = __importDefault(require("react"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var DesktopMenu = function (_a) {
+    var menuItems = _a.menuItems, rightSlot = _a.rightSlot, setHoveredMenu = _a.setHoveredMenu, isActive = _a.isActive, activeBg = _a.activeBg, hoveredMenu = _a.hoveredMenu, hoverBg = _a.hoverBg, color = _a.color;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0 }, menuItems.map(function (item) {
+        var _a, _b, _c, _d;
+        var hasChildren = !!item.children;
+        var isHovered = hoveredMenu === item.label;
+        return (react_2.default.createElement(react_1.Box, { key: item.label, position: "relative", onMouseEnter: function () { return hasChildren && setHoveredMenu(item.label); }, onMouseLeave: function () { return hasChildren && setHoveredMenu(null); } },
+            react_2.default.createElement(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 }) : undefined, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, color: color },
+                react_2.default.createElement(react_1.VStack, { spacing: 0 },
+                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                    react_2.default.createElement(react_1.Text, null, item.label))),
+            hasChildren && (react_2.default.createElement(react_1.Collapse, { in: isHovered, animateOpacity: true },
+                react_2.default.createElement(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10 },
+                    react_2.default.createElement(react_1.Stack, { spacing: 1, p: 2 }, (_d = item.children) === null || _d === void 0 ? void 0 : _d.map(function (subItem) {
+                        var _a, _b, _c;
+                        return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                            react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
+                                subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", alignItems: "end" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                                react_2.default.createElement(react_1.Text, null, subItem.label))));
+                    })))))));
+    })));
+};
+exports.default = DesktopMenu;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { MobileMenuProps } from "../HeaderProps";
+declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, }: MobileMenuProps) => React.JSX.Element;
+export default MobileMenu;

package/dist/Components/Header/components/mobileMenu.js

@@ -0,0 +1,32 @@
+"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 MobileMenu = function (_a) {
+    var menuItems = _a.menuItems, isOpen = _a.isOpen, isActive = _a.isActive, hoverBg = _a.hoverBg, activeBg = _a.activeBg, color = _a.color, rightSlot = _a.rightSlot;
+    return (react_2.default.createElement(react_1.Collapse, { in: isOpen, animateOpacity: true },
+        react_2.default.createElement(react_1.Box, { pb: 4, display: { md: "none" } },
+            react_2.default.createElement(react_1.Stack, { spacing: 4 },
+                menuItems.map(function (item) {
+                    var _a, _b, _c, _d, _e;
+                    return item.children ? (react_2.default.createElement(react_1.Box, { key: item.label, px: 2 },
+                        react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
+                            item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, item.badge.label)),
+                            react_2.default.createElement(react_1.Text, { fontWeight: "medium" }, item.label)),
+                        react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1 }, item.children.map(function (subItem) {
+                            var _a, _b, _c;
+                            return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                                react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
+                                    subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                                    react_2.default.createElement(react_1.Text, null, subItem.label))));
+                        })))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: item.onClick, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                        react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
+                            item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
+                            react_2.default.createElement(react_1.Text, null, item.label))));
+                }),
+                rightSlot && react_2.default.createElement(react_1.Box, { mt: 4 }, rightSlot)))));
+};
+exports.default = MobileMenu;

package/dist/Components/Reorder/Reorder.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ReorderItem, ReorderListProps } from "./ReorderProps";
+declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, }: ReorderListProps<T>) => JSX.Element;
+export default ReorderList;

package/dist/Components/Reorder/Reorder.js

@@ -0,0 +1,50 @@
+"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 dnd_1 = require("@hello-pangea/dnd");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ReorderList = function (_a) {
+    var _b = _a.label, label = _b === void 0 ? "" : _b, items = _a.items, onReorder = _a.onReorder;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var handleDragEnd = function (result) {
+        if (!result.destination)
+            return;
+        var reordered = Array.from(items);
+        var moved = reordered.splice(result.source.index, 1)[0];
+        reordered.splice(result.destination.index, 0, moved);
+        onReorder(reordered);
+    };
+    return (react_1.default.createElement(react_2.Box, { 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.Box, { display: "flex", alignItems: "center", gap: 2 },
+            react_1.default.createElement(lucide_react_1.BetweenHorizonalStart, null),
+            react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4 }, label)),
+        react_1.default.createElement(react_2.Divider, null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: handleDragEnd },
+            react_1.default.createElement(dnd_1.Droppable, { droppableId: "item-list", direction: "horizontal" }, function (provided) { return (react_1.default.createElement(react_2.HStack, __assign({ ref: provided.innerRef }, provided.droppableProps, { spacing: 4, overflowX: "auto" }),
+                items.map(function (item, index) { return (react_1.default.createElement(dnd_1.Draggable, { key: item.id, draggableId: item.id, index: index }, function (provided) {
+                    var _a, _b, _c;
+                    return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { position: "relative", border: "0.063rem solid", borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[300], borderRadius: "md", overflow: "hidden" }),
+                        react_1.default.createElement(react_2.Image, { src: item.previewUrl, alt: (_b = item.name) !== null && _b !== void 0 ? _b : "item-".concat(index), boxSize: "7.5rem", objectFit: "cover" }),
+                        react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.GripVertical, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[500] }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }),
+                        react_1.default.createElement(react_2.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1 }, index + 1)));
+                })); }),
+                provided.placeholder)); }))));
+};
+exports.default = ReorderList;

package/dist/Components/Reorder/ReorderProps.d.ts

@@ -0,0 +1,10 @@
+export interface ReorderItem {
+    id: string;
+    previewUrl: string;
+    name?: string;
+}
+export interface ReorderListProps<T extends ReorderItem> {
+    label?: string;
+    items: T[];
+    onReorder: (items: T[]) => void;
+}

package/dist/Components/Reorder/ReorderProps.js

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

package/dist/Components/SearchSelect/SearchSelect.js

@@ -82,9 +82,7 @@ var SearchSelect = function (_a) {
         : normalizeSingleValue(value)
             ? [normalizeSingleValue(value)]
             : [];
-    var filteredOptions = options.filter(function (option) {
-        return option.label.toLowerCase().includes(inputValue.toLowerCase());
-    });
+    var filteredOptions = options.filter(function (option) { var _a, _b; return (_b = (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); });
     (0, react_1.useEffect)(function () {
         var delayDebounce = setTimeout(function () {
             onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
@@ -191,9 +189,7 @@ var SearchSelect = function (_a) {
                         react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_e = (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
                         customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
                     customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
-                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 20, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem" // height instead of vertical padding
-                            , px: "0.75rem" // light internal spacing
-                            , fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
+                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 20, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem", px: "0.75rem", fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
                                 e.stopPropagation();
                                 handleCustomSelect(item);
                             } }, item.label)); })))))),
@@ -202,7 +198,7 @@ var SearchSelect = function (_a) {
                             ? item.label.slice(0, chip.maxText) + '…'
                             : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
                     : selectedValues.length === 1 &&
-                        inputValue === '' && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800] }, selectedValues[0].label)),
+                        inputValue === '' && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0 }, selectedValues[0].label)),
                 (chip === null || chip === void 0 ? void 0 : chip.maxChips) &&
                     isMultiple &&
                     selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
@@ -219,7 +215,6 @@ var SearchSelect = function (_a) {
                                 _focus: { boxShadow: 'none', bg: 'transparent' },
                             } }))),
                     isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "sm" })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: "sm", onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function (e) {
-                            console.log('Toggle clicked');
                             e.preventDefault();
                             e.stopPropagation();
                             setIsOpen(function (prev) { return !prev; });

package/dist/Layout.js

@@ -62,6 +62,8 @@ var TInput_1 = __importDefault(require("./Pages/TInput"));
 var kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
 var Tag_1 = __importDefault(require("./Components/Tag/Tag"));
 var lucide_react_1 = require("lucide-react");
+var Header_1 = __importDefault(require("./Components/Header/Header"));
+var fileUpload_1 = require("./Pages/fileUpload");
 var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
@@ -149,6 +151,43 @@ var Layout = function () {
                 return react_2.default.createElement(TInput_1.default, null);
             case "/kanban":
                 return react_2.default.createElement(kanbanboard_1.default, null);
+            case "/header":
+                return (react_2.default.createElement(Header_1.default, { logo: react_2.default.createElement(react_1.Box, { fontSize: "xl", fontWeight: "bold" }, "MyApp"), 
+                    // colorScheme="gray"
+                    active: "/", menuItems: [
+                        { label: "Home", href: "/" },
+                        {
+                            label: "Products",
+                            // badge: {
+                            //   label: "new",
+                            //   colorScheme: "red",
+                            // },
+                            children: [
+                                {
+                                    label: "AI Tools",
+                                    href: "/products/ai",
+                                    badge: {
+                                        label: "new",
+                                        colorScheme: "blackAlpha",
+                                    },
+                                },
+                                {
+                                    label: "APIs",
+                                    href: "/products/apis",
+                                    badge: { label: "coming soon", colorScheme: "green" },
+                                },
+                            ],
+                        },
+                        {
+                            label: "Docs",
+                            href: "/docs",
+                            badge: { label: "updated", colorScheme: "yellow" },
+                        },
+                    ], rightSlot: react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.default.createElement(react_1.Button, { variant: "ghost", colorScheme: "purple" }, "Login"),
+                        react_2.default.createElement(react_1.Button, { colorScheme: "purple" }, "Sign Up")) }));
+            case "/upload":
+                return react_2.default.createElement(fileUpload_1.FileUploader, null);
             case "/tag":
                 return (react_2.default.createElement(Tag_1.default, { label: "tag", icon: lucide_react_1.Home, size: "md", colorScheme: "gray", onIconClick: function () { return console.log("Icon"); }, onTagClick: function () { return console.log("Tag"); } }));
             case "/":
@@ -158,44 +197,47 @@ var Layout = function () {
     return (react_2.default.createElement("div", null,
         react_2.default.createElement("nav", null,
             react_2.default.createElement(react_1.HStack, { spacing: 3, flexWrap: "wrap", alignItems: "center" },
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline" }, "Home"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline" }, "AlertDialog"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline" }, "Accordion"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/"); }, variant: "outline", size: "sm" }, "Home"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/alertdialog"); }, variant: "outline", size: "sm" }, "AlertDialog"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/accordion"); }, variant: "outline", size: "sm" }, "Accordion"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectsearch"); }, variant: "outline", size: "sm" }, "Selectsearch"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/searchSelect"); }, variant: "outline" }, "searchSelect"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/selectSearch"); }, variant: "outline" }, "selectSearch"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline" }, "Timeline"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline" }, "Search"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline" }, "Datepicker"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/multiselect"); }, variant: "outline" }, "Multiselect"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/drawer"); }, variant: "outline" }, "Drawer"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/verifyEmail"); }, variant: "outline" }, "VerifyEmail"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/editor"); }, variant: "outline" }, "Editor"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/dropdown"); }, variant: "outline" }, "Dropdown"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notearea"); }, variant: "outline" }, "Notearea"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/switch"); }, variant: "outline" }, "Switch"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/photoViewer"); }, variant: "outline" }, "PhotoViewer"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/charts"); }, variant: "outline" }, "Charts"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tooltip"); }, variant: "outline" }, "Tooltip"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/card"); }, variant: "outline" }, "Card"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/pininput"); }, variant: "outline" }, "PinInputs"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/numberinput"); }, variant: "outline" }, "NumberInput"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/progressbar"); }, variant: "outline" }, "Progressbar"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/button"); }, variant: "outline" }, "Button"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/radio"); }, variant: "outline" }, "RadioButton"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/skeleton"); }, variant: "outline" }, "Skeleton"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/textarea"); }, variant: "outline" }, "Textarea"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/select"); }, variant: "outline" }, "Select"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); }, variant: "outline" }, "Modal"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); }, variant: "outline" }, "Checkbox"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); }, variant: "outline" }, "Toster"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); }, variant: "outline" }, "Input"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline" }, "Table"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline" }, "Kanban"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tag"); }, variant: "outline" }, "Tag")),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/timeline"); }, variant: "outline", size: "sm" }, "Timeline"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/search"); }, variant: "outline", size: "sm" }, "Search"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/datepicker"); }, variant: "outline", size: "sm" }, "Datepicker"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/multiselect"); }, variant: "outline", size: "sm" }, "Multiselect"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/drawer"); }, variant: "outline", size: "sm" }, "Drawer"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/verifyEmail"); }, variant: "outline", size: "sm" }, "VerifyEmail"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/editor"); }, variant: "outline", size: "sm" }, "Editor"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/dropdown"); }, variant: "outline", size: "sm" }, "Dropdown"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/notearea"); }, variant: "outline", size: "sm" }, "Notearea"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/switch"); }, variant: "outline", size: "sm" }, "Switch"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/photoViewer"); }, variant: "outline", size: "sm" }, "PhotoViewer"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/charts"); }, variant: "outline", size: "sm" }, "Charts"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tooltip"); }, variant: "outline", size: "sm" }, "Tooltip"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/card"); }, variant: "outline", size: "sm" }, "Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/pininput"); }, variant: "outline", size: "sm" }, "PinInputs"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/numberinput"); }, variant: "outline", size: "sm" }, "NumberInput"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/progressbar"); }, variant: "outline", size: "sm" }, "Progressbar"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/button"); }, variant: "outline", size: "sm" }, "Button"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/radio"); }, variant: "outline", size: "sm" }, "RadioButton"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/skeleton"); }, variant: "outline", size: "sm" }, "Skeleton"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/textarea"); }, variant: "outline", size: "sm" }, "Textarea"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/select"); }, variant: "outline", size: "sm" }, "Select"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); }, variant: "outline", size: "sm" }, "Modal"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); }, variant: "outline", size: "sm" }, "Checkbox"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); }, variant: "outline", size: "sm" }, "Toster"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); }, variant: "outline", size: "sm" }, "Input"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline", size: "sm" }, "Table"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline", size: "sm" }, "Kanban"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tag"); }, variant: "outline", size: "sm" }, "Tag"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/header"); }, variant: "outline", size: "sm" }, "Header"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "sm" }, "File Upload")),
             react_2.default.createElement("br", null),
             react_2.default.createElement("br", null),
             react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); }, variant: "outline" }, "Input"),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); }, variant: "outline", size: "sm" }, "Input"),
             react_2.default.createElement("button", { onClick: function () { return switchTheme("theme2"); } }, "Switch to Theme 2")),
         react_2.default.createElement("br", null),
         react_2.default.createElement("br", null),

package/dist/Pages/fileUpload.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FileUploader: () => React.JSX.Element;

package/dist/Pages/fileUpload.js

@@ -0,0 +1,65 @@
+"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 __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 });
+exports.FileUploader = void 0;
+var react_1 = __importStar(require("react"));
+var FileUpload_1 = __importDefault(require("../Components/FileUpload/FileUpload"));
+var Reorder_1 = __importDefault(require("../Components/Reorder/Reorder"));
+var imageList = [
+    { id: "1", previewUrl: "https://picsum.photos/id/1011/100", name: "Image 1" },
+    { id: "2", previewUrl: "https://picsum.photos/id/1012/100", name: "Image 2" },
+    { id: "3", previewUrl: "https://picsum.photos/id/1013/100", name: "Image 3" },
+    { id: "4", previewUrl: "https://picsum.photos/id/1011/100", name: "Image 1" },
+];
+var FileUploader = function () {
+    var _a = (0, react_1.useState)([]), file = _a[0], setFile = _a[1];
+    var _b = (0, react_1.useState)(imageList), list = _b[0], setList = _b[1];
+    var handleFiles = function (files) {
+        setFile(files);
+        var uploadedImages = files.map(function (f, i) { return ({
+            id: "".concat(i + 11),
+            name: f.name,
+            previewUrl: URL.createObjectURL(f),
+        }); });
+        setList(__spreadArray(__spreadArray([], imageList, true), uploadedImages, true));
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(FileUpload_1.default, { onFilesUploaded: function (files) { return handleFiles(files); }, uploadedFiles: file, onRemoveFile: function (file) { return console.log("SDFSDf", file); }, acceptTypes: [".webp", ".pdf", ".zip"], maxSizeKB: 512 }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Reorder_1.default, { items: list, onReorder: function (files) { return setList(files); }, label: "Reorder" })));
+};
+exports.FileUploader = FileUploader;

package/dist/Pages/searchSelect.js

@@ -87,13 +87,15 @@ var SearchSelect = function () {
     var _b = (0, react_1.useState)(rrr(1, 50)), soptions = _b[0], setSoptions = _b[1]; // initial 50
     var _c = (0, react_1.useState)(""), search = _c[0], setSearch = _c[1];
     var _d = (0, react_1.useState)(false), paginationLoading = _d[0], setpaginationLoading = _d[1];
-    var _e = (0, react_1.useState)({ id: "3", label: "Hariharan J" }), customSelectValue = _e[0], setCustomSelectValue = _e[1];
+    var _e = (0, react_1.useState)({}), customSelectValue = _e[0], setCustomSelectValue = _e[1];
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(SearchSelect_1.default
         // width={"250px"}
         , { 
             // width={"250px"}
-            label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: function (val) {
+            label: "Users", id: "user-select", options: soptions, value: selectedOptions, 
+            // isMultiple
+            onSelect: function (val) {
                 console.log("val", val);
                 setselectedOptions(val);
             }, onSearch: function (query) { return setSearch(query); }, searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./bootstrap";
 import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
@@ -11,7 +12,9 @@ import DatePicker from "./Components/DatePicker/DatePicker";
 import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Drawer/Drawer";
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
+import FileUpload from "./Components/FileUpload/FileUpload";
 import FormWrapper from "./Components/Form/FormWrapper";
+import Header from "./Components/Header/Header";
 import HeaderActions from "./Components/Header/HeaderActions";
 import InputTextArea from "./Components/InputTextArea/InputTextArea";
 import KanbanBoard from "./Components/KanbanBoard/KanbanBoard";
@@ -26,6 +29,7 @@ import ProfileCard, { ProfileCardHeader, ProfileCardBody, ProfileCardFooter } fr
 import ProfilePhotoViewer from "./Components/ProfilePhotoViewer/ProfilePhotoViewer";
 import ProgressBar from "./Components/ProgressBar/ProgressBar";
 import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioButton";
+import Reorder from "./Components/Reorder/Reorder";
 import Search from "./Components/Search/Search";
 import Select from "./Components/Select/Select";
 import SearchSelect from "./Components/SearchSelect/SearchSelect";
@@ -45,5 +49,5 @@ import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FormWrapper, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -1,5 +1,4 @@
 "use strict";
-// import "./bootstrap";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -27,8 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.FormWrapper = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = void 0;
+exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = void 0;
+require("./bootstrap");
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -58,8 +58,12 @@ var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));
 exports.Dropdown = DropDown_1.default;
 var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
 exports.Editor = Editor_1.default;
+var FileUpload_1 = __importDefault(require("./Components/FileUpload/FileUpload"));
+exports.FileUpload = FileUpload_1.default;
 var FormWrapper_1 = __importDefault(require("./Components/Form/FormWrapper"));
 exports.FormWrapper = FormWrapper_1.default;
+var Header_1 = __importDefault(require("./Components/Header/Header"));
+exports.Header = Header_1.default;
 var HeaderActions_1 = __importDefault(require("./Components/Header/HeaderActions"));
 exports.HeaderActions = HeaderActions_1.default;
 var InputTextArea_1 = __importDefault(require("./Components/InputTextArea/InputTextArea"));
@@ -95,6 +99,8 @@ exports.ProgressBar = ProgressBar_1.default;
 var RadioButton_1 = require("./Components/RadioButton/RadioButton");
 Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioButton_1.RadioButton; } });
 Object.defineProperty(exports, "RadioButtonGroup", { enumerable: true, get: function () { return RadioButton_1.RadioButtonGroup; } });
+var Reorder_1 = __importDefault(require("./Components/Reorder/Reorder"));
+exports.Reorder = Reorder_1.default;
 var Search_1 = __importDefault(require("./Components/Search/Search"));
 exports.Search = Search_1.default;
 var Select_1 = __importDefault(require("./Components/Select/Select"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.0.21",
+  "version": "2.1.1",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -17,7 +17,8 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-scripts": "^5.0.1",
-    "react-window": "^1.8.11"
+    "react-window": "^1.8.11",
+    "react-dropzone": "^14.3.8"
   },
   "scripts": {
     "start": "react-scripts start",