pixelize-design-library 2.2.15 → 2.2.17

package/dist/Components/AlertDialog/AlertDialog.js

@@ -14,7 +14,7 @@ var AlertDialog = function (_a) {
             react_2.default.createElement(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }),
             react_2.default.createElement(react_1.AlertDialogBody, { sx: bodyStyle }, content),
             react_2.default.createElement(react_1.AlertDialogFooter, { sx: footerStyle },
-                react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, size: "sm", sx: button1Style }, cancelButtonText),
-                react_2.default.createElement(react_1.Button, { colorScheme: confirmButtonColor, onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style }, confirmButtonText)))));
+                react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style }, cancelButtonText),
+                react_2.default.createElement(react_1.Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style }, confirmButtonText)))));
 };
 exports.default = AlertDialog;

package/dist/Components/Dropdown/DropDown.js

@@ -39,7 +39,7 @@ 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 = framer_motion_1.motion.create((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
+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)();

package/dist/Components/FileUploader/FileUploader.d.ts

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

package/dist/Components/FileUploader/FileUploader.js

@@ -0,0 +1,146 @@
+"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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var Toaster_1 = require("../Toaster/Toaster");
+var FileUploader = function (_a) {
+    var _b = _a.maxFiles, maxFiles = _b === void 0 ? 10 : _b, _c = _a.maxTotalSize, maxTotalSize = _c === void 0 ? 20 : _c, onFilesChange = _a.onFilesChange, _d = _a.acceptTypes, acceptTypes = _d === void 0 ? ["jpeg", "jpg", "png"] : _d;
+    var showToast = (0, Toaster_1.useToaster)().showToast;
+    var _e = (0, react_1.useState)([]), uploadedFiles = _e[0], setUploadedFiles = _e[1];
+    var _f = (0, react_1.useState)(false), setIsDragOver = _f[1];
+    // const [error, setError] = useState<string | null>(null);
+    var fileInputRef = (0, react_1.useRef)(null);
+    var totalSize = uploadedFiles.reduce(function (acc, f) { return acc + f.size; }, 0);
+    var maxTotalBytes = maxTotalSize * 1024 * 1024;
+    var formatFileSize = function (bytes) {
+        if (bytes === 0)
+            return "0 KB";
+        var k = 1024;
+        var sizes = ["Bytes", "KB", "MB"];
+        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        return "".concat((bytes / Math.pow(k, i)).toFixed(2), " ").concat(sizes[i]);
+    };
+    var handleFiles = function (files) {
+        // setError(null);
+        var newFiles = Array.from(files).map(function (file) { return ({
+            id: Math.random().toString(36).substring(2),
+            name: file.name,
+            size: file.size,
+            previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : "",
+        }); });
+        var combinedFiles = __spreadArray(__spreadArray([], uploadedFiles, true), newFiles, true).slice(0, maxFiles);
+        var totalSizeBytes = combinedFiles.reduce(function (acc, f) { return acc + f.size; }, 0);
+        if (totalSizeBytes > maxTotalBytes) {
+            showToast({
+                title: "Total file size exceeds ".concat(maxTotalSize, " MB limit."),
+                duration: 3000,
+                status: "error",
+            });
+            return;
+        }
+        setUploadedFiles(combinedFiles);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(combinedFiles);
+    };
+    var handleFileInput = function (e) {
+        if (e.target.files) {
+            handleFiles(e.target.files);
+            e.target.value = ""; // fix: reopen file dialog for same files
+        }
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        setIsDragOver(false);
+        if (e.dataTransfer.files)
+            handleFiles(e.dataTransfer.files);
+    };
+    var handleDragOver = function (e) {
+        e.preventDefault();
+        setIsDragOver(true);
+    };
+    var handleDragLeave = function () { return setIsDragOver(false); };
+    var removeFile = function (id) {
+        var filtered = uploadedFiles.filter(function (f) { return f.id !== id; });
+        setUploadedFiles(filtered);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(filtered);
+    };
+    var handleBrowseClick = function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    // ✅ Convert ["png","pdf","zip"] → ".png,.pdf,.zip" for input accept
+    var acceptString = acceptTypes.map(function (ext) { return ".".concat(ext); }).join(",");
+    return (react_1.default.createElement(react_2.Box, { maxW: "500px", mx: "auto", p: 6 },
+        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600", mb: 4 },
+            "Files Uploaded:",
+            " ",
+            react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "medium", color: "blue.500" },
+                uploadedFiles.length,
+                " / ",
+                maxFiles),
+            " ",
+            "| Total size:",
+            " ",
+            react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "medium" },
+                formatFileSize(totalSize),
+                " / ",
+                maxTotalSize,
+                " MB")),
+        react_1.default.createElement(react_2.Box, { border: "1px dashed", borderColor: "gray.300", borderRadius: "md", p: 1, mt: 1, mb: 1 },
+            uploadedFiles.length > 0 && (react_1.default.createElement(react_2.Box, null,
+                react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3 }, uploadedFiles.map(function (file) {
+                    var _a;
+                    return (react_1.default.createElement(react_2.Flex, { key: file.id, align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: "gray.50" },
+                        react_1.default.createElement(react_2.HStack, { spacing: 3, flex: "1", minW: "0" },
+                            file.previewUrl ? (react_1.default.createElement(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : (react_1.default.createElement(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: "gray.600" }, (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase())),
+                            react_1.default.createElement(react_2.Box, { minW: "0" },
+                                react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1 }, file.name),
+                                react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600" },
+                                    "(",
+                                    formatFileSize(file.size),
+                                    ")"))),
+                        react_1.default.createElement(react_2.HStack, { spacing: 1 },
+                            react_1.default.createElement(react_2.Tooltip, { label: "Remove" },
+                                react_1.default.createElement(react_2.IconButton, { "aria-label": "Remove", icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: function () { return removeFile(file.id); } })))));
+                })))),
+            react_1.default.createElement("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }),
+            react_1.default.createElement(react_2.Box, { p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, transition: "all 0.2s", onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", onClick: handleBrowseClick },
+                react_1.default.createElement(react_2.Box, null,
+                    react_1.default.createElement(react_2.Text, { fontWeight: "medium", fontSize: "md" },
+                        "Drag and drop the files here, or",
+                        react_1.default.createElement(react_2.Box, { as: "span", color: "blue.400", ml: 1 }, "Click here"))),
+                react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" },
+                    "Supported formats: ",
+                    acceptTypes.map(function (t) { return t.toUpperCase(); }).join(", "),
+                    ".")))));
+};
+exports.default = FileUploader;

package/dist/Components/FileUploader/FileUploaderProps.d.ts

@@ -0,0 +1,13 @@
+export type UploadedFile = {
+    id: string;
+    name: string;
+    size: number;
+    type?: string;
+    previewUrl?: string;
+};
+export type FileUploaderProps = {
+    maxFiles?: number;
+    maxTotalSize?: number;
+    acceptTypes?: string[];
+    onFilesChange?: (files: UploadedFile[]) => void;
+};

package/dist/Components/MultiSelect/MultiSelect.js

@@ -117,7 +117,7 @@ function MultiSelect(_a) {
                         ? (_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error
                         : (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary),
             } },
-            options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", borderRadius: "full", variant: "subtle", colorScheme: "blue" },
+            options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", borderRadius: "full", variant: "subtle", colorScheme: "primary" },
                 react_1.default.createElement(react_2.TagLabel, null, option.label),
                 react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); }),
             react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", flex: "1", style: __assign(__assign({}, inputStyle), { backgroundColor: "transparent", fontWeight: 500, color: theme.colors.gray[700], fontSize: 15, letterSpacing: 0.3 }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),

package/dist/Components/Notification/Notification.d.ts

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

package/dist/Components/Notification/Notification.js

@@ -0,0 +1,131 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Notification = function (_a) {
+    var notification = _a.notification, onClose = _a.onClose;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var bgColor = theme.colors.white;
+    var borderColor = theme.colors.gray[200];
+    var textColor = theme.colors.gray[700];
+    var titleColor = theme.colors.gray[800];
+    var warningColor = theme.colors.semantic.warning;
+    var errorColor = theme.colors.semantic.error;
+    var successColor = theme.colors.semantic.success;
+    var startDate = notification.startDate
+        ? new Date(notification.startDate)
+        : null;
+    // 🧮 Calculate time difference
+    var _b = (0, react_1.useMemo)(function () {
+        var targetDate = notification.dueDate
+            ? new Date(notification.dueDate)
+            : notification.endDate
+                ? new Date(notification.endDate)
+                : null;
+        if (!targetDate)
+            return { timeLabel: "", diffDays: null };
+        var now = new Date();
+        var diffMs = targetDate.getTime() - now.getTime();
+        var diffMinutes = Math.floor(diffMs / (1000 * 60));
+        var diffHours = diffMinutes / 60;
+        var diffDays = diffHours / 24;
+        var toTitle = function (text) {
+            if (!text)
+                return "Item";
+            return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+        };
+        var typeLabel = toTitle(notification.type);
+        var label = "";
+        if (diffMs < 0) {
+            // 🔴 Overdue / Ended
+            var overdueMinutes = Math.abs(diffMinutes);
+            if (overdueMinutes < 60)
+                label = "".concat(typeLabel, " overdue by ").concat(overdueMinutes, " minute").concat(overdueMinutes === 1 ? "" : "s", " ago");
+            else if (overdueMinutes < 1440)
+                label = "".concat(typeLabel, " overdue by ").concat(Math.floor(overdueMinutes / 60), " hour").concat(Math.floor(overdueMinutes / 60) === 1 ? "" : "s", " ago");
+            else
+                label = "".concat(typeLabel, " overdue by ").concat(Math.floor(overdueMinutes / 1440), " day").concat(Math.floor(overdueMinutes / 1440) === 1 ? "" : "s", " ago");
+        }
+        else {
+            // 🟢 Upcoming
+            if (diffMinutes < 60)
+                label = "".concat(typeLabel, " due in ").concat(diffMinutes, " minute").concat(diffMinutes === 1 ? "" : "s");
+            else if (diffHours < 24)
+                label = "".concat(typeLabel, " due in ").concat(Math.floor(diffHours), " hour").concat(Math.floor(diffHours) === 1 ? "" : "s");
+            else
+                label = "".concat(typeLabel, " due in ").concat(Math.ceil(diffDays), " day").concat(Math.ceil(diffDays) === 1 ? "" : "s");
+        }
+        return { timeLabel: label, diffDays: diffDays };
+    }, [notification.dueDate, notification.endDate, notification.type]), timeLabel = _b.timeLabel, diffDays = _b.diffDays;
+    // 🟡 Status color indicator
+    var getStatusColor = function () {
+        if (diffDays === null)
+            return theme.colors.gray[400];
+        if (diffDays < 0)
+            return errorColor; // Overdue
+        if (diffDays <= 0.04)
+            return warningColor; // Less than 1 hour
+        if (diffDays <= 1)
+            return theme.colors.yellow[400]; // Within a day
+        return successColor; // Future
+    };
+    var TimeIcon = diffDays !== null && diffDays < 0 ? lucide_react_1.AlertCircle : lucide_react_1.Clock;
+    var formattedStart = (startDate === null || startDate === void 0 ? void 0 : startDate.toLocaleString("en-US", {
+        day: "2-digit",
+        month: "short",
+        hour: "2-digit",
+        minute: "2-digit",
+    })) || "";
+    return (react_1.default.createElement(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md", transform: "translateY(-2px)" }, transition: "all 0.2s ease", position: "relative" },
+        onClose && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: function (e) {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onClose();
+                }
+            }, tabIndex: 0, p: 1, borderRadius: "md", _hover: { bg: theme.colors.red[100], color: theme.colors.red[500], transform: "scale(1.1)" }, transition: "all 0.2s ease" },
+            react_1.default.createElement(lucide_react_1.X, { size: 16 }))),
+        react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, w: "100%" },
+            react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                react_1.default.createElement(react_2.Icon, { as: TimeIcon, color: theme.colors.orange[400], boxSize: 4 }),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.orange[500], fontWeight: "semibold" }, timeLabel)),
+            react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
+                react_1.default.createElement(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }),
+                react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
+                    react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor }, notification.title),
+                    notification.description && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: textColor }, notification.description)))),
+            react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
+            react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
+                react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Calendar, color: theme.colors.gray[400], boxSize: 4 }),
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, formattedStart)),
+                react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.User, color: theme.colors.gray[400], boxSize: 4 }),
+                    notification.host && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, notification.host))),
+                react_1.default.createElement(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" })))));
+};
+exports.default = Notification;

package/dist/Components/Notification/NotificationProps.d.ts

@@ -0,0 +1,16 @@
+export type NotificationData = {
+    id: string;
+    title: string;
+    startDate: string;
+    dueDate?: string;
+    endDate?: string;
+    host?: string;
+    description?: string;
+    status?: string;
+    type?: string;
+};
+export type NotificationProps = {
+    notification: NotificationData;
+    onClose?: () => void;
+    showStatus?: boolean;
+};

package/dist/index.d.ts

@@ -14,6 +14,7 @@ import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Dra
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
 import FileUpload from "./Components/FileUpload/FileUpload";
+import FileUploader from "./Components/FileUploader/FileUploader";
 import FormWrapper from "./Components/Form/FormWrapper";
 import Header from "./Components/Header/Header";
 import HeaderActions from "./Components/Header/HeaderActions";
@@ -57,5 +58,6 @@ import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
 import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
 import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
 import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import Notification from "./Components/Notification/Notification";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = 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.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = 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 = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = void 0;
+exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = 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 = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -64,6 +64,8 @@ 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 FileUploader_1 = __importDefault(require("./Components/FileUploader/FileUploader"));
+exports.FileUploader = FileUploader_1.default;
 var FormWrapper_1 = __importDefault(require("./Components/Form/FormWrapper"));
 exports.FormWrapper = FormWrapper_1.default;
 var Header_1 = __importDefault(require("./Components/Header/Header"));
@@ -157,4 +159,6 @@ var PaymentCard_1 = __importDefault(require("./Components/Card/PaymentCard/Payme
 exports.PaymentCard = PaymentCard_1.default;
 var ApexLineChart_1 = __importDefault(require("./Components/Apexcharts/ApexLineChart/ApexLineChart"));
 exports.ApexLineChart = ApexLineChart_1.default;
+var Notification_1 = __importDefault(require("./Components/Notification/Notification"));
+exports.Notification = Notification_1.default;
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.15",
+  "version": "2.2.17",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.d.ts

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

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js

@@ -1,6 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react';
-// import ApexBarChart from './ApexBarChart';
-// import { ApexBarChartProps } from './ApexBarChartProps';
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { ApexDonutChartProps } from "./ApexDonutChartProps";
-declare const ApexDonutChart: ({ data, labels, title, titlePosition, height, width, donutColors, chartColor, titleStyle, legendStyle, }: ApexDonutChartProps) => React.JSX.Element;
-export default ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.js

@@ -1,58 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-var ApexDonutChart = function (_a) {
-    var _b;
-    var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _d = _a.height, height = _d === void 0 ? 400 : _d, _e = _a.width, width = _e === void 0 ? 500 : _e, donutColors = _a.donutColors, chartColor = _a.chartColor, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
-        color: "#3182ce",
-        fontSize: "16px",
-        fontWeight: 600,
-        fontFamily: "Arial",
-    } : _f, _g = _a.legendStyle, legendStyle = _g === void 0 ? {
-        colors: "#000",
-        position: "bottom",
-        useSeriesColors: false,
-    } : _g;
-    var options = {
-        chart: {
-            type: "donut",
-        },
-        labels: labels,
-        colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"],
-        legend: {
-            position: legendStyle.position,
-            labels: {
-                colors: legendStyle.colors,
-                useSeriesColors: legendStyle.useSeriesColors,
-            },
-        },
-        title: {
-            text: title,
-            align: titlePosition,
-            style: __assign(__assign({}, titleStyle), { fontSize: (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize)
-                    ? String(titleStyle.fontSize) // ✅ ensures string if number passed
-                    : undefined }),
-        },
-        dataLabels: {
-            enabled: true,
-        },
-    };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "donut", height: height, width: width })));
-};
-exports.default = ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.d.ts

@@ -1,21 +0,0 @@
-export type ApexDonutChartProps = {
-    data: number[];
-    labels: string[];
-    title?: string;
-    titlePosition?: "left" | "center" | "right";
-    height?: number;
-    width?: number;
-    donutColors?: string[];
-    chartColor?: string[];
-    titleStyle?: {
-        color?: string;
-        fontSize?: string | number;
-        fontWeight?: number | string;
-        fontFamily?: string;
-    };
-    legendStyle?: {
-        colors?: string | string[];
-        useSeriesColors?: boolean;
-        position?: "top" | "right" | "bottom" | "left";
-    };
-};

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.d.ts

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

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.js

@@ -1,6 +0,0 @@
-"use strict";
-// import React from 'react';
-// import { StoryFn, Meta } from '@storybook/react';
-// import ApexPieChart from './ApexPieChart';
-// import { ApexPieChartProps } from './ApexPieChartProps';
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/InputTextArea/InputTextArea.stories.d.ts

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

package/dist/Components/InputTextArea/InputTextArea.stories.js

@@ -1,7 +0,0 @@
-"use strict";
-// import React from "react";
-// import type { Meta, StoryObj } from "@storybook/react/*";
-// import { InputTextAreaProps } from "./InputTextAreaProps";
-// import InputTextArea from "./InputTextArea";
-// import { useState } from "react";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/KaTable/CustomHeader.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-type CustomHeaderProps = {
-    column: any;
-    onSortChange?: (sortState: string, columnName: string) => void;
-    menuItems?: Array<{
-        label: string;
-        onClick: () => void;
-        submenu?: any[];
-    }>;
-    isSort?: boolean;
-    sortDirection: string;
-};
-declare const CustomHeader: React.MemoExoticComponent<({ column, onSortChange, menuItems, isSort, sortDirection, }: CustomHeaderProps) => React.JSX.Element>;
-export default CustomHeader;

package/dist/Components/KaTable/CustomHeader.js

@@ -1,69 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var bs_1 = require("react-icons/bs");
-var fa_1 = require("react-icons/fa");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var CustomHeader = (0, react_1.memo)(function (_a) {
-    var column = _a.column, onSortChange = _a.onSortChange, menuItems = _a.menuItems, isSort = _a.isSort, sortDirection = _a.sortDirection;
-    var handleSortClick = (0, react_1.useCallback)(function () {
-        var sortOrder = "none";
-        if (sortDirection === "none")
-            sortOrder = "asc";
-        else if (sortDirection === "asc")
-            sortOrder = "desc";
-        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(sortOrder, column.key);
-    }, [sortDirection, column.key, onSortChange]);
-    return (react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center" },
-        react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, column.title),
-        react_1.default.createElement(react_2.Flex, { alignItems: "center" },
-            isSort && (react_1.default.createElement(SortingIcon, { sortState: sortDirection, handleSortClick: handleSortClick })),
-            menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (react_1.default.createElement(react_2.Menu, null,
-                react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", _hover: { bg: "none" }, _active: { bg: "none" } }),
-                react_1.default.createElement(react_2.Portal, null,
-                    react_1.default.createElement(react_2.MenuList, null, menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                        react_1.default.createElement(react_2.MenuItem, { onClick: function () { return item === null || item === void 0 ? void 0 : item.onClick(); } }, item.label),
-                        item.submenu && react_1.default.createElement(Submenu, { items: item.submenu }))); }))))) : null)));
-});
-var SortingIcon = (0, react_1.memo)(function (_a) {
-    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-        sortState === "none" && react_1.default.createElement(fa_1.FaSort, { size: 14 }),
-        sortState === "asc" && react_1.default.createElement(fa_1.FaCaretUp, { size: 14 }),
-        sortState === "desc" && react_1.default.createElement(fa_1.FaCaretDown, { size: 14 })));
-});
-var Submenu = (0, react_1.memo)(function (_a) {
-    var items = _a.items;
-    return (react_1.default.createElement(react_2.MenuGroup, null, items.map(function (subItem, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function () { return (subItem === null || subItem === void 0 ? void 0 : subItem.onClick) && (subItem === null || subItem === void 0 ? void 0 : subItem.onClick()); }, sx: {
-            pl: 6,
-            fontSize: "sm",
-            color: "gray.600",
-            _hover: { bg: "gray.100", color: "gray.800" }, // Hover styles
-        } }, subItem.label)); })));
-});
-exports.default = CustomHeader;