pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/esm/Components/Modal/Modal.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Modal as ChakraModal, ModalOverlay, ModalContent, ModalHeader as ChakraModalHeader, ModalCloseButton, ModalBody as ChakraModalBody, ModalFooter as ChakraModalFooter, Spinner, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+export const ModalHeader = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export const ModalBody = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export const ModalFooter = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export default function Modal({ size, isOpen = false, onClose, overlaybg = "blackAlpha.300", overlaybackdropFilter = "blur(10px) hue-rotate(90deg)", overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }) {
+    const theme = useCustomTheme();
+    if (!isOpen)
+        return _jsx(_Fragment, {});
+    const isReactElement = (child) => {
+        return child !== null && typeof child === "object" && "type" in child;
+    };
+    const header = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ModalHeader);
+    const body = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ModalBody);
+    const footer = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ModalFooter);
+    return (_jsxs(ChakraModal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [_jsx(ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), _jsx(ModalContent, { children: isLoading ? (_jsx("div", { style: {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        height: "100%",
+                        width: "100%",
+                        padding: "25%",
+                    }, children: _jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: theme.colors.gray[200], color: theme.colors.accentText, size: "xl" }) })) : (_jsxs(_Fragment, { children: [header && _jsx(ChakraModalHeader, { children: header }), _jsx(ModalCloseButton, {}), _jsx(ChakraModalBody, { children: body }), footer && _jsx(ChakraModalFooter, { children: footer })] })) })] }));
+}

package/dist/esm/Components/Modal/ModalProps.js

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

package/dist/esm/Components/MoreItems/MoreItems.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, SimpleGrid, Text, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = false, columns = 2, minWidth = "260px", triggerMaxWidth = "250px", trigger = "hover", placement = "bottom-start", }) => {
+    const theme = useCustomTheme();
+    const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
+    if (count <= 0)
+        return triggerText ? _jsx(_Fragment, { children: triggerText }) : null;
+    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: theme.colors.primary[100] }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+                // Chakra defaults this surface to `colors.gray.700` in dark, which against the
+                // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
+                bg: theme.colors.background[50], boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [_jsx(PopoverArrow, { bg: theme.colors.background[50] }), _jsx(PopoverBody, { p: 3, children: _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                                var _a, _b, _c;
+                                const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : theme.colors.textMuted;
+                                return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && (_jsx(Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), _jsx(Text, { fontSize: "13px", color: theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));
+                            }) }) })] })] }));
+};
+export default MoreItems;

package/dist/esm/Components/MoreItems/MoreItemsProps.js

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

package/dist/esm/Components/MultiSelect/MultiSelect.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, } from "react";
+import { Box, Flex, Input, } from "@chakra-ui/react";
+import { TextLabel } from "../Common/FormLabel.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { getSearchSelectSizeStyles, } from "../SearchSelect/searchSelectSize.js";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import HelperText from "../Common/HelperText.js";
+import Tag from "../Tag/Tag.js";
+import { X } from "lucide-react";
+const generateUniqueId = (() => {
+    let counter = 0;
+    return () => {
+        counter += 1;
+        return `${Date.now()}-${counter}`;
+    };
+})();
+export default function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, size = "md", inputStyle, helperText, error, errorMessage, }) {
+    const theme = useCustomTheme();
+    const s = getSearchSelectSizeStyles((size || "md"));
+    const options = value;
+    const [inputValue, setInputValue] = useState("");
+    const [localError, setLocalError] = useState("");
+    const inputRef = useRef(null);
+    const handleInputChange = useCallback((e) => {
+        setInputValue(e.target.value);
+        setLocalError("");
+    }, []);
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter" && inputValue.trim() !== "") {
+            if (!validateEmail(inputValue)) {
+                setLocalError("Invalid email address");
+                return;
+            }
+            const existingOption = options.find((option) => option.label === inputValue);
+            if (!existingOption) {
+                const newOption = { id: generateUniqueId(), label: inputValue };
+                onValueChange([...options, newOption]);
+                setInputValue("");
+            }
+        }
+        else if (e.key === "Backspace" && inputValue === "") {
+            onValueChange(options.slice(0, -1));
+        }
+    };
+    const handleRemove = useCallback((optionToRemove) => {
+        onValueChange(options.filter((option) => option.id !== optionToRemove.id));
+    }, [options, onValueChange]);
+    return (_jsxs(Box, { width: width, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", 
+                // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named
+                // surface up to `muted` (lightest); [500] fails there, [800] clears all with margin.
+                borderColor: error || localError
+                    ? theme.colors.semanticText.error
+                    : theme.colors.boxborder[800], borderRadius: "lg", bg: theme.colors.gray[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
+                    borderColor: error || localError
+                        ? theme.colors.semanticText.error
+                        : theme.colors.primary[500],
+                    boxShadow: `0 0 0 0.125rem ${error || localError
+                        ? theme.colors.boxShadow.error
+                        : theme.colors.boxShadow.primary}`,
+                }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
+                            backgroundColor: "transparent",
+                            ...inputStyle,
+                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (error || localError) && (_jsx(ErrorMessage, { errorMessage: localError || errorMessage })), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+}

package/dist/esm/Components/MultiSelect/MultiSelectProps.js

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

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Box, Button, Center, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Stack, Text, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import { CircleArrowLeft, LogOut, PanelLeftClose, PanelRightClose, } from "lucide-react";
+// Roomy enough to hover without aiming: the glyph is only 1.25rem.
+const SIDEBAR_TOGGLE_HIT = "2.5rem";
+export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, }) {
+    const theme = useCustomTheme();
+    // For a near-neutral brand (e.g. zinc), `primary[50]` is itself a pale near-white tint — on
+    // the menu's own near-white surface that measured as low as ~1.02:1, an invisible hover.
+    const menuHoverBg = resolveHoverTint(theme.colors.primary[50], theme.colors.backgroundColor.light);
+    const barHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.backgroundColor.light);
+    const menuHoverInk = accentTextOnCanvas(theme.colors.primary, menuHoverBg);
+    const dangerTone = resolveStatusTone(theme.colors.semantic.error, isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light");
+    // Shared rounded pill affordance for the bar's icon controls.
+    const iconButtonStyle = {
+        w: "1.75rem",
+        h: "1.75rem",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "md",
+        cursor: "pointer",
+        border: "none",
+        bg: "transparent",
+        transition: "background 0.15s",
+        _hover: { bg: barHoverBg },
+    };
+    const menuItemStyle = {
+        bg: "transparent",
+        borderRadius: "lg",
+        // Chakra's MenuItem is width:100%, so mx added 12px and forced a horizontal scrollbar.
+        w: "calc(100% - 0.75rem)",
+        mx: "0.375rem",
+        px: "0.625rem",
+        py: "0.5rem",
+        fontWeight: 500,
+        fontSize: "13px",
+        color: theme.colors.text[900],
+        gap: theme.space["2"],
+        transition: "background 0.12s",
+        _hover: { bg: menuHoverBg, color: menuHoverInk },
+        _focus: { bg: menuHoverBg, color: menuHoverInk },
+        _active: { bg: menuHoverBg, color: menuHoverInk },
+    };
+    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.border[500], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(Text, { color: accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+                                        // Without a cap one long title stretches the whole dropdown; titles truncate instead.
+                                        maxW: "18rem", bg: theme.colors.backgroundColor.light, 
+                                        // Chakra's MenuItem renders `background: var(--menu-bg)` at rest; its MenuList
+                                        // baseStyle hardcodes that var to "#fff" (gated behind `_dark`, which this theme-swap
+                                        // app never triggers). The `bg` prop above only recolors the list itself, not the
+                                        // inherited var, so items fall back to white until hover/focus — set the var too.
+                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: theme.colors.boxborder[500], borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Center, { pt: 4, pb: 2, children: _jsx(Avatar, { size: "xl", name: userName, src: userAvathar }) }), _jsxs(Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && (_jsx(Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), _jsx(MenuDivider, { borderColor: theme.colors.border[500] }), _jsx(Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                                        var _a, _b, _c, _d;
+                                                        return (_jsxs(MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), _jsx(Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
+                                                    }) }), _jsx(MenuDivider, { borderColor: theme.colors.border[500] }), _jsxs(MenuItem, { onClick: handleLogout, sx: {
+                                                        ...menuItemStyle,
+                                                        color: theme.colors.semanticText.error,
+                                                        _hover: { bg: dangerTone.bg, color: dangerTone.fg },
+                                                        _focus: { bg: dangerTone.bg, color: dangerTone.fg },
+                                                        _active: { bg: dangerTone.bg, color: dangerTone.fg },
+                                                    }, children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: _jsx(LogOut, { size: 16 }) }), _jsx(Box, { minW: 0, isTruncated: true, title: String(logoutText !== null && logoutText !== void 0 ? logoutText : ""), children: logoutText })] })] }) })] })] }) })] }) }));
+}

package/dist/esm/Components/NavigationBar/NavigationBarProps.js

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

package/dist/esm/Components/NoteTextArea/NoteTextArea.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Text, Input, Textarea, Button, Divider, Spinner, Tooltip, } from "@chakra-ui/react";
+import { Paperclip, X, SquarePen, File as FileIcon } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { FIELD_RADIUS } from "../Common/fieldStyles.js";
+const countWords = (text = "") => {
+    const t = text.trim();
+    if (!t)
+        return 0;
+    return t.split(/\s+/).length;
+};
+export default function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title, file, isEditable = false, saveButtonLoading, maxFileSize = 1 * 1024 * 1024, maxFilesSizeError = "Some files are too large. Maximum allowed size is", maxNoteWordCount = 15, onChange, ref: inputRef, customPlaceholder = "Add a note...", cancelButtonHide = false, }) {
+    const theme = useCustomTheme();
+    const noteAreaRef = useRef(null);
+    const [isActive, setIsActive] = useState(false);
+    const [noteValue, setNoteValue] = useState("");
+    const [titleValue, setTitleValue] = useState("");
+    const [titleShow, setTitleShow] = useState(false);
+    const [files, setFiles] = useState([]);
+    const [fileError, setFileError] = useState("");
+    const [isSaveDisabled, setIsSaveDisabled] = useState(false);
+    useEffect(() => {
+        setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
+    }, [titleValue, maxNoteWordCount]);
+    useEffect(() => {
+        setIsSaveDisabled(countWords(noteValue) > maxNoteWordCount);
+    }, [noteValue, maxNoteWordCount]);
+    useEffect(() => {
+        if (isEditable) {
+            setIsActive(true);
+            if (value)
+                setNoteValue(value);
+            if (title) {
+                setTitleValue(title);
+                setTitleShow(true);
+            }
+            if (file)
+                setFiles(Array.isArray(file) ? file : []);
+        }
+    }, [value, title, file, isEditable]);
+    useEffect(() => {
+        if (!saveButtonLoading) {
+            if (!isEditable) {
+                setIsActive(false);
+                setNoteValue("");
+                setTitleValue("");
+                setTitleShow(false);
+                setFiles([]);
+            }
+        }
+        if (isEditable)
+            setIsActive(true);
+    }, [saveButtonLoading, isEditable]);
+    useEffect(() => {
+        if (isActive && noteAreaRef.current) {
+            noteAreaRef.current.style.height = "auto";
+            noteAreaRef.current.style.height = `${noteAreaRef.current.scrollHeight}px`;
+            noteAreaRef.current.focus();
+        }
+    }, [isActive]);
+    const adjustHeight = () => {
+        const t = noteAreaRef.current;
+        if (!t)
+            return;
+        t.style.height = "auto";
+        t.style.height = `${t.scrollHeight}px`;
+    };
+    const handleTextArea = () => {
+        setIsActive(true);
+        if (!isEditable) {
+            setNoteValue("");
+            setTitleValue("");
+            setTitleShow(false);
+            setFiles([]);
+        }
+    };
+    const handleCloseTextArea = () => {
+        setIsActive(false);
+        handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel(!isActive);
+        if (!isEditable) {
+            setNoteValue("");
+            setTitleValue("");
+            setTitleShow(false);
+            setFiles([]);
+        }
+        setFileError("");
+    };
+    const handleNoteChange = (e) => {
+        const value = e.target.value;
+        // Allow typing, but prevent updating state with only spaces
+        if (value.trim() === "" && value !== "")
+            return;
+        setNoteValue(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        adjustHeight();
+    };
+    const formatBytes = (bytes, decimals = 2) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ["Bytes", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    };
+    const shortenFileName = (name, maxLength = 24) => {
+        const extension = name.substring(name.lastIndexOf("."));
+        if (name.length <= maxLength)
+            return name;
+        const nameWithoutExtension = name.replace(extension, "");
+        const start = nameWithoutExtension.substring(0, maxLength - extension.length - 3);
+        return `${start}...${extension}`;
+    };
+    const noteWordCount = countWords(noteValue);
+    const isOverLimit = noteWordCount > maxNoteWordCount;
+    return (_jsxs(Box, { w: width, borderRadius: FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: "border-color 0.2s", children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: theme.colors.gray[50] }, children: [_jsx(SquarePen, { size: 16, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { bg: theme.colors.background[50], children: [titleShow && (_jsxs(_Fragment, { children: [_jsx(Input, { ref: inputRef, value: titleValue, onChange: (e) => {
+                                            if (e.target.value.length === 0)
+                                                setTitleShow(false);
+                                            setTitleValue(e.target.value);
+                                        }, placeholder: "Add a title...", variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "0.875rem", color: theme.colors.text[700], _placeholder: {
+                                            fontStyle: "italic",
+                                            color: theme.colors.textMuted,
+                                        } }), _jsx(Divider, { borderColor: theme.colors.gray[200] })] })), _jsx(Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: _jsx(Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: { fontStyle: "italic", color: theme.colors.textMuted }, style: { overflow: "hidden" }, p: 0 }) })] }), _jsx(Divider, { borderColor: theme.colors.gray[200] }), _jsxs(Box, { px: 3, py: 2.5, children: [_jsxs(Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: _jsx(Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] }, children: _jsx(Paperclip, { size: 16 }) }) }), _jsx(Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? (_jsx(Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] }, children: "+ Add a title" })) : (_jsx(Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), _jsxs(Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [_jsxs(Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : (_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), _jsxs(Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? (_jsx(Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), _jsx("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: (e) => {
+                                    const newFiles = Array.from(e.target.files || []);
+                                    const validFiles = newFiles.filter((f) => f.size <= maxFileSize);
+                                    const invalidFiles = newFiles.filter((f) => f.size > maxFileSize);
+                                    if (invalidFiles.length > 0) {
+                                        setFileError(`${maxFilesSizeError} ${formatBytes(maxFileSize)}.`);
+                                    }
+                                    else {
+                                        setFileError("");
+                                    }
+                                    if (validFiles.length > 0) {
+                                        setFiles((prev) => [...prev, ...validFiles]);
+                                    }
+                                }, multiple: true }), fileError && (_jsx(Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && (_jsx(Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => (_jsxs(Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: theme.colors.textMuted }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.textMuted, transition: "all 0.15s", _hover: { bg: theme.colors.gray[200], color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
+}

package/dist/esm/Components/NoteTextArea/NoteTextAreaProps.js

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

package/dist/esm/Components/Notification/Notification.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, VStack, HStack, Text, Icon, Avatar, Divider, Skeleton, SkeletonCircle, } from "@chakra-ui/react";
+import { Clock, AlertCircle, Calendar, X, User } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = useCustomTheme();
+    const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
+    const closeTone = resolveStatusTone(theme.colors.semantic.error, mode);
+    const bgColor = (_a = colors === null || colors === void 0 ? void 0 : colors.bgColor) !== null && _a !== void 0 ? _a : theme.colors.background[50];
+    const borderColor = (_b = colors === null || colors === void 0 ? void 0 : colors.borderColor) !== null && _b !== void 0 ? _b : theme.colors.boxborder[200];
+    const textColor = (_c = colors === null || colors === void 0 ? void 0 : colors.textColor) !== null && _c !== void 0 ? _c : theme.colors.text[700];
+    const titleColor = (_d = colors === null || colors === void 0 ? void 0 : colors.titleColor) !== null && _d !== void 0 ? _d : theme.colors.text[800];
+    // The dot is a graphic on the canvas: `semantic[tone][500]` measures under 3:1 there.
+    const warningColor = (_e = colors === null || colors === void 0 ? void 0 : colors.warningColor) !== null && _e !== void 0 ? _e : theme.colors.semanticText.warning;
+    const errorColor = (_f = colors === null || colors === void 0 ? void 0 : colors.errorColor) !== null && _f !== void 0 ? _f : theme.colors.semanticText.error;
+    const successColor = (_g = colors === null || colors === void 0 ? void 0 : colors.successColor) !== null && _g !== void 0 ? _g : theme.colors.semanticText.success;
+    const startDate = useMemo(() => notification.startDate
+        ? new Date(notification.startDate)
+        : null, [notification.startDate]);
+    const { timeLabel, diffDays } = useMemo(() => {
+        const targetDate = notification.dueDate
+            ? new Date(notification.dueDate)
+            : notification.endDate
+                ? new Date(notification.endDate)
+                : null;
+        if (!targetDate)
+            return { timeLabel: "", diffDays: null };
+        const now = new Date();
+        const diffMs = targetDate.getTime() - now.getTime();
+        const diffMinutes = Math.floor(diffMs / (1000 * 60));
+        const diffHours = diffMinutes / 60;
+        const diffDays = diffHours / 24;
+        const toTitle = (text) => {
+            if (!text)
+                return "Item";
+            return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+        };
+        const typeLabel = toTitle(notification.type);
+        let label;
+        if (diffMs < 0) {
+            const overdueMinutes = Math.abs(diffMinutes);
+            if (overdueMinutes < 60)
+                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"} ago`;
+            else if (overdueMinutes < 1440)
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"} ago`;
+            else
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"} ago`;
+        }
+        else {
+            if (diffMinutes < 60)
+                label = `${typeLabel} due in ${diffMinutes} minute${diffMinutes === 1 ? "" : "s"}`;
+            else if (diffHours < 24)
+                label = `${typeLabel} due in ${Math.floor(diffHours)} hour${Math.floor(diffHours) === 1 ? "" : "s"}`;
+            else
+                label = `${typeLabel} due in ${Math.ceil(diffDays)} day${Math.ceil(diffDays) === 1 ? "" : "s"}`;
+        }
+        return { timeLabel: label, diffDays };
+    }, [notification.dueDate, notification.endDate, notification.type]);
+    const getStatusColor = () => {
+        if (diffDays === null)
+            return theme.colors.textMuted;
+        if (diffDays < 0)
+            return errorColor;
+        if (diffDays <= 0.04)
+            return warningColor;
+        if (diffDays <= 1)
+            return accentTextOnCanvas(theme.colors.yellow, bgColor);
+        return successColor;
+    };
+    const TimeIcon = diffDays !== null && diffDays < 0 ? AlertCircle : Clock;
+    const formattedStartDateTime = useMemo(() => {
+        if (!startDate)
+            return "";
+        const options = notification.type === "meeting"
+            ? {
+                day: "2-digit",
+                month: "short",
+                hour: "2-digit",
+                minute: "2-digit",
+            }
+            : {
+                day: "2-digit",
+                month: "short",
+                year: "numeric",
+            };
+        return startDate.toLocaleString("en-US", options);
+    }, [startDate, notification.type]);
+    // 🔄 If loading, show skeleton
+    if (isLoading) {
+        return (_jsx(Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", children: _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(SkeletonCircle, { size: "4" }), _jsx(Skeleton, { height: "14px", width: "60%" })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(SkeletonCircle, { size: "8" }), _jsxs(VStack, { align: "start", spacing: 1, flex: "1", children: [_jsx(Skeleton, { height: "16px", width: "70%" }), _jsx(Skeleton, { height: "12px", width: "50%" })] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "40%" }), _jsx(Skeleton, { height: "12px", width: "30%" })] })] }) }));
+    }
+    // 🧩 Normal render
+    return (_jsxs(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", children: [onClose && (_jsx(Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onClose();
+                    }
+                }, tabIndex: 0, p: 1, borderRadius: "md", _hover: {
+                    bg: closeTone.bg,
+                    color: closeTone.fg,
+                    transform: "scale(1.1)",
+                }, transition: "all 0.2s ease", children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: accentTextOnCanvas(theme.colors.orange, bgColor), boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.orange, bgColor), fontWeight: "semibold", children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontWeight: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), children: notification.title }), notification.description && (_jsx(Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: Calendar, color: theme.colors.textMuted, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: formattedStartDateTime })] }), _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: User, color: theme.colors.textMuted, boxSize: 4 }), notification.host && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: notification.host }))] }), showStatus && (_jsx(Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
+};
+export default Notification;

package/dist/esm/Components/Notification/NotificationProps.js

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

package/dist/esm/Components/NumberInput/NumberInput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberDecrementStepper, NumberIncrementStepper, NumberInput as ChakraNumberInput, NumberInputField, NumberInputStepper, FormControl, } from "@chakra-ui/react";
+import { forwardRef } from "react";
+import { TextLabel } from "../Common/FormLabel.js";
+const NumberInput = forwardRef(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, ...props }, ref) {
+    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(ChakraNumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, ...props, children: [_jsx(NumberInputField, { ref: ref }), _jsxs(NumberInputStepper, { children: [_jsx(NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, children: NumberIncrementStepperChildren }), _jsx(NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, children: NumberDecrementStepperChildren })] })] })] }));
+});
+export default NumberInput;

package/dist/esm/Components/NumberInput/NumberInput.styles.js

@@ -0,0 +1,84 @@
+export const NumberInput = {
+    baseStyle: {
+        field: {
+            fontWeight: 500,
+            fontSize: "0.875rem",
+            letterSpacing: "0.044rem",
+            pt: "0.813rem",
+            pb: "0.813rem",
+            borderRadius: "lg",
+            transition: "border-color 0.2s, box-shadow 0.2s",
+            _placeholder: {
+                fontStyle: "italic",
+            },
+        },
+    },
+    sizes: {
+        md: {
+            field: {
+                h: "2.75rem",
+                fontSize: "0.875rem",
+            },
+        },
+    },
+    variants: {
+        outline: (props) => {
+            const { theme } = props;
+            const errorColor = theme.colors.semanticText.error;
+            const borderColor = theme.colors.boxborder[500];
+            const shadowPrimary = theme.colors.boxShadow.primary;
+            const shadowError = theme.colors.boxShadow.error;
+            const primary = theme.colors.primary[500];
+            return {
+                field: {
+                    bg: theme.colors.gray[50],
+                    border: "0.063rem solid",
+                    borderColor,
+                    _placeholder: {
+                        color: theme.colors.textMuted,
+                    },
+                    _hover: {
+                        borderColor: primary,
+                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _focus: {
+                        borderColor: primary,
+                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _invalid: {
+                        borderColor: errorColor,
+                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        _hover: {
+                            borderColor: errorColor,
+                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                        _focus: {
+                            borderColor: errorColor,
+                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                    },
+                    _readOnly: {
+                        boxShadow: 'inherit',
+                    },
+                    _disabled: {
+                        bg: theme.colors.gray[100],
+                        opacity: 1,
+                        cursor: "not-allowed",
+                        _hover: {
+                            border: "0.063rem solid",
+                            borderColor,
+                        },
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/esm/Components/NumberInput/NumberInputProps.js

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