pixelize-design-library 2.2.16 → 2.2.18

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/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, }: ButtonProps): React.JSX.Element;
+declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, }: ButtonProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Button>;
 export default _default;

package/dist/Components/Button/Button.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 function Button(_a) {
-    var label = _a.label, children = _a.children, onClick = _a.onClick, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, width = _a.width, sx = _a.sx, colorScheme = _a.colorScheme, ref = _a.ref, border = _a.border, borderRadius = _a.borderRadius;
-    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius }, children !== null && children !== void 0 ? children : label));
+    var label = _a.label, children = _a.children, onClick = _a.onClick, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, width = _a.width, sx = _a.sx, colorScheme = _a.colorScheme, ref = _a.ref, border = _a.border, borderRadius = _a.borderRadius, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children !== null && children !== void 0 ? children : label));
 }
 exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/ButtonProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius"> & {
+export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave"> & {
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs" | "xl";

package/dist/Components/Card/PaymentCard/PaymentCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { PaymentCardProps } from "./PaymentCardProps";
-declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, }: PaymentCardProps) => React.JSX.Element;
+declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, }: PaymentCardProps) => React.JSX.Element;
 export default PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -18,6 +18,7 @@ var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../../Button/Button"));
 var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     if (isActive) {
         return {
@@ -51,7 +52,7 @@ var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     };
 };
 var PaymentCard = function (_a) {
-    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover;
+    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _d = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _d.badgeText, badgeColor = _d.badgeColor, buttonColor = _d.buttonColor, buttonColor50 = _d.buttonColor50;
     var variantStyles = plan.buttonVariant === "outline"
@@ -78,8 +79,8 @@ var PaymentCard = function (_a) {
                         react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
                         react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax))),
                 react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 3 }, plan.description)),
-            !isActive && (react_1.default.createElement(react_2.Button, __assign({ w: "full", variant: plan.buttonVariant, mb: 6, onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
-            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
+            !isActive && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
+            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
                 react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))));
 };

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -6,6 +6,7 @@ export type PaymentCardProps = {
     billingCycle: "monthly" | "yearly";
     onSelect?: (planId: number) => void;
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
+    buttonLoading?: number;
 };
 export type Plan = {
     plan_id: number;
@@ -20,4 +21,5 @@ export type Plan = {
     buttonText: string;
     buttonVariant: "solid" | "outline" | "link";
     popular?: boolean;
+    buttonLoadingText?: string;
 };

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.16",
+  "version": "2.2.18",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/Assets/defaultLogo.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useCustomTheme } from "../Theme/useCustomTheme";
-
-const DefaultLogo = () => {
-  const theme = useCustomTheme();
-  return (
-    <svg
-      width="12.09"
-      height="15.95"
-      viewBox="0 0 31 29"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
-        fill={theme.colors.black}
-      />
-      <path
-        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
-        fill={theme.colors.black}
-      />
-      <path
-        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
-        fill={theme.colors.black}
-      />
-    </svg>
-
-  )
-};
-
-export default DefaultLogo;

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 {};