pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -1,78 +1,38 @@
 "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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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 });
-exports.default = NoteTextArea;
-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 countWords = function (text) {
-    if (text === void 0) { text = ""; }
-    var t = text.trim();
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const activationKey_1 = require("../Common/activationKey");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const countWords = (text = "") => {
+    const t = text.trim();
     if (!t)
         return 0;
     return t.split(/\s+/).length;
 };
-function NoteTextArea(_a) {
-    var _b;
-    var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref, _h = _a.customPlaceholder, customPlaceholder = _h === void 0 ? "Add a note..." : _h, _j = _a.cancelButtonHide, cancelButtonHide = _j === void 0 ? false : _j;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var noteAreaRef = (0, react_1.useRef)(null);
-    var _k = (0, react_1.useState)(false), isActive = _k[0], setIsActive = _k[1];
-    var _l = (0, react_1.useState)(""), noteValue = _l[0], setNoteValue = _l[1];
-    var _m = (0, react_1.useState)(""), titleValue = _m[0], setTitleValue = _m[1];
-    var _o = (0, react_1.useState)(false), titleShow = _o[0], setTitleShow = _o[1];
-    var _p = (0, react_1.useState)([]), files = _p[0], setFiles = _p[1];
-    var _q = (0, react_1.useState)(""), fileError = _q[0], setFileError = _q[1];
-    var _r = (0, react_1.useState)(false), isSaveDisabled = _r[0], setIsSaveDisabled = _r[1];
-    (0, react_1.useEffect)(function () {
-        setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
-    }, [titleValue, maxNoteWordCount]);
-    (0, react_1.useEffect)(function () {
-        setIsSaveDisabled(countWords(noteValue) > maxNoteWordCount);
-    }, [noteValue, maxNoteWordCount]);
-    (0, react_1.useEffect)(function () {
+/** Self-contained note composer (optional title + textarea + Save); `ref` forwards to the primary textarea. */
+const NoteTextArea = (0, react_1.forwardRef)(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, customPlaceholder = "Add a note...", cancelButtonHide = false, titleAriaLabel = "Note title", noteAriaLabel = customPlaceholder, }, ref) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const noteAreaRef = (0, react_1.useRef)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const mergedNoteRef = (0, react_2.useMergeRefs)(noteAreaRef, ref);
+    const fileInputId = `note-text-area-file-${(0, react_1.useId)().replace(/:/g, "")}`;
+    const [isActive, setIsActive] = (0, react_1.useState)(false);
+    const [noteValue, setNoteValue] = (0, react_1.useState)("");
+    const [titleValue, setTitleValue] = (0, react_1.useState)("");
+    const [titleShow, setTitleShow] = (0, react_1.useState)(false);
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [fileError, setFileError] = (0, react_1.useState)("");
+    (0, react_1.useEffect)(() => {
         if (isEditable) {
             setIsActive(true);
             if (value)
@@ -85,7 +45,7 @@ function NoteTextArea(_a) {
                 setFiles(Array.isArray(file) ? file : []);
         }
     }, [value, title, file, isEditable]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!saveButtonLoading) {
             if (!isEditable) {
                 setIsActive(false);
@@ -98,21 +58,21 @@ function NoteTextArea(_a) {
         if (isEditable)
             setIsActive(true);
     }, [saveButtonLoading, isEditable]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (isActive && noteAreaRef.current) {
             noteAreaRef.current.style.height = "auto";
-            noteAreaRef.current.style.height = "".concat(noteAreaRef.current.scrollHeight, "px");
+            noteAreaRef.current.style.height = `${noteAreaRef.current.scrollHeight}px`;
             noteAreaRef.current.focus();
         }
     }, [isActive]);
-    var adjustHeight = function () {
-        var t = noteAreaRef.current;
+    const adjustHeight = () => {
+        const t = noteAreaRef.current;
         if (!t)
             return;
         t.style.height = "auto";
-        t.style.height = "".concat(t.scrollHeight, "px");
+        t.style.height = `${t.scrollHeight}px`;
     };
-    var handleTextArea = function () {
+    const handleTextArea = () => {
         setIsActive(true);
         if (!isEditable) {
             setNoteValue("");
@@ -121,7 +81,8 @@ function NoteTextArea(_a) {
             setFiles([]);
         }
     };
-    var handleCloseTextArea = function () {
+    const openFilePicker = () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
+    const handleCloseTextArea = () => {
         setIsActive(false);
         handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel(!isActive);
         if (!isEditable) {
@@ -132,8 +93,8 @@ function NoteTextArea(_a) {
         }
         setFileError("");
     };
-    var handleNoteChange = function (e) {
-        var value = e.target.value;
+    const handleNoteChange = (e) => {
+        const value = e.target.value;
         // Allow typing, but prevent updating state with only spaces
         if (value.trim() === "" && value !== "")
             return;
@@ -141,82 +102,59 @@ function NoteTextArea(_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         adjustHeight();
     };
-    var formatBytes = function (bytes, decimals) {
-        if (decimals === void 0) { decimals = 2; }
+    const formatBytes = (bytes, decimals = 2) => {
         if (bytes === 0)
             return "0 Bytes";
-        var k = 1024;
-        var dm = decimals < 0 ? 0 : decimals;
-        var sizes = ["Bytes", "KB", "MB", "GB"];
-        var i = Math.floor(Math.log(bytes) / Math.log(k));
+        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];
     };
-    var shortenFileName = function (name, maxLength) {
-        if (maxLength === void 0) { maxLength = 24; }
-        var extension = name.substring(name.lastIndexOf("."));
+    const shortenFileName = (name, maxLength = 24) => {
+        const extension = name.substring(name.lastIndexOf("."));
         if (name.length <= maxLength)
             return name;
-        var nameWithoutExtension = name.replace(extension, "");
-        var start = nameWithoutExtension.substring(0, maxLength - extension.length - 3);
-        return "".concat(start, "...").concat(extension);
+        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;
+    const isSaveDisabled = isOverLimit || countWords(titleValue) > maxNoteWordCount;
+    const activeBandBg = (0, planeStep_1.bandOn)(theme.colors.gray[50], theme.colors.background[50]);
+    const collapsedHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.background[50]);
+    const activeControlHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], activeBandBg);
+    const chipBg = (0, planeStep_1.bandOn)(theme.colors.gray[100], activeBandBg);
+    const chipInk = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, chipBg, accentText_1.AA_NORMAL_TEXT);
+    const chipRemoveHoverBg = (0, planeStep_1.bandOn)(theme.colors.gray[200], chipBg);
+    // NOTE: drawn inset because the rounded shell clips overflow.
+    const placeholderFocusRing = {
+        outline: "2px solid transparent",
+        boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors),
     };
-    return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: "0.25rem", overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[300] : theme.colors.gray[200], bg: isActive ? theme.colors.gray[50] : "transparent", boxShadow: isActive ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary) : "none" },
-        !isActive && (react_1.default.createElement(react_2.Flex, { px: 4, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: "0.25rem", minH: "44px" },
-            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, customPlaceholder))),
-        isActive && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Box, { bg: theme.colors.white },
-                titleShow && (react_1.default.createElement(react_2.Input, { ref: inputRef, value: titleValue, onChange: function (e) {
-                        if (e.target.value.length === 0)
-                            setTitleShow(false);
-                        setTitleValue(e.target.value);
-                    }, placeholder: "Add a title...", variant: "unstyled", pl: 3, fontWeight: 500, fontSize: "0.95rem", _placeholder: {
-                        fontStyle: "italic",
-                        color: theme.colors.gray[300],
-                        background: theme.colors.white,
-                    } })),
-                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "80px", pl: 3, pt: 2, position: "relative" },
-                    react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "80px", _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
-            react_1.default.createElement(react_2.Divider, null),
-            react_1.default.createElement(react_2.Box, { px: 4, py: 3 },
-                react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", w: "100%" },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, minW: 0 },
-                        react_1.default.createElement(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", gap: 2 },
-                            react_1.default.createElement(lucide_react_1.Paperclip, { size: 18 })),
-                        react_1.default.createElement(react_2.Box, { h: "18px", w: "1px", bg: theme.colors.gray[200] }),
-                        !titleShow ? (react_1.default.createElement(react_2.Text, { onClick: function () { return setTitleShow(true); }, cursor: "pointer", color: theme.colors.gray[600], fontWeight: 500, fontSize: "sm" }, "Add a Title")) : (react_1.default.createElement(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue },
-                            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "200px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, titleValue || "Title")))),
-                    react_1.default.createElement(react_2.Flex, { gap: 3, align: "center", ml: "auto", flexShrink: 0 },
-                        cancelButtonHide ? null : (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"))),
-                        react_1.default.createElement(react_2.Button, { colorScheme: "purple", borderRadius: "8px", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
-                            saveButtonLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null,
-                            "Save"))),
-                react_1.default.createElement(react_2.Flex, { mt: 3, gap: 2, align: "center", color: theme.colors.gray[600], fontSize: "sm" },
-                    react_1.default.createElement(react_2.Text, { fontWeight: 600 }, "Note:"),
-                    react_1.default.createElement(react_2.Text, null,
-                        "You can add up to ",
-                        maxNoteWordCount,
-                        " words only")),
-                react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
-                        var newFiles = Array.from(e.target.files || []);
-                        var validFiles = newFiles.filter(function (f) { return f.size <= maxFileSize; });
-                        var invalidFiles = newFiles.filter(function (f) { return f.size > maxFileSize; });
-                        if (invalidFiles.length > 0) {
-                            setFileError("".concat(maxFilesSizeError, " ").concat(formatBytes(maxFileSize), "."));
-                        }
-                        else {
-                            setFileError("");
-                        }
-                        if (validFiles.length > 0) {
-                            setFiles(function (prev) { return __spreadArray(__spreadArray([], prev, true), validFiles, true); });
-                        }
-                    }, multiple: true }),
-                fileError && (react_1.default.createElement(react_2.Text, { color: theme.colors.red[500], mt: 2, fontSize: "sm" }, fileError)),
-                files.length > 0 && (react_1.default.createElement(react_2.Box, { mt: 3 }, files.map(function (f, idx) { return (react_1.default.createElement(react_2.Flex, { key: idx, align: "center", justify: "space-between", w: "320px", mb: 2 },
-                    react_1.default.createElement(react_2.Flex, { gap: 3, align: "center" },
-                        react_1.default.createElement(react_2.Text, { fontSize: "sm" }, shortenFileName(f.name)),
-                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, formatBytes(f.size))),
-                    react_1.default.createElement(lucide_react_1.X, { size: 16, cursor: "pointer", color: theme.colors.red[600], onClick: function () {
-                            return setFiles(function (prev) { return prev.filter(function (fileItem) { return fileItem !== f; }); });
-                        } }))); }))))))));
-}
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? activeBandBg : theme.colors.background[50], transition: (0, motion_1.transitionFor)(["border-color"]), children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", role: "button", tabIndex: 0, onClick: handleTextArea, onKeyDown: (0, activationKey_1.onActivationKey)(handleTextArea), _focusVisible: placeholderFocusRing, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: collapsedHoverBg }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: titleValue, onChange: (e) => {
+                                            if (e.target.value.length === 0)
+                                                setTitleShow(false);
+                                            setTitleValue(e.target.value);
+                                        }, placeholder: "Add a title...", "aria-label": titleAriaLabel, variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "sm", color: theme.colors.text[700], _placeholder: {
+                                            color: (0, placeholderInk_1.placeholderInk)(theme.colors),
+                                        } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: mergedNoteRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, "aria-label": noteAriaLabel, variant: "unstyled", resize: "none", minH: "76px", fontSize: "xs", color: theme.colors.text[700], _placeholder: {
+                                        color: (0, placeholderInk_1.placeholderInk)(theme.colors),
+                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", role: "button", tabIndex: 0, "aria-label": "Attach files", onClick: openFilePicker, onKeyDown: (0, activationKey_1.onActivationKey)(openFilePicker), _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: activeControlHoverBg }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, id: fileInputId, 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 && ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: chipBg, maxW: "100%", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.File, { size: 13, color: chipInk }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: chipInk, whiteSpace: "nowrap", children: formatBytes(f.size) }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": `Remove ${f.name}`, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: chipInk, transition: (0, motion_1.transitionFor)(["background-color", "color"]), _hover: { bg: chipRemoveHoverBg, color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }) })] }, idx))) }))] })] }))] }));
+});
+NoteTextArea.displayName = "NoteTextArea";
+exports.default = NoteTextArea;

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -1,18 +1,37 @@
-import { LegacyRef } from "react";
+/** Plain Chakra Textarea + title + file attach, not a rich text editor — no formatting toolbar despite the "note" naming. Use Editor for HTML content. */
 export type NoteTextAreaProps = {
-    width: number | string;
-    handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
+    /** Width of the whole composer; a number is px, a string is any CSS length. Defaults to "100%". */
+    width?: number | string;
+    /** Save click with note, title and files; `resetState` is never passed. */
+    handleSubmit: (noteValue: string, titleValue: string, file: File[], 
+    /** @deprecated Never passed; remove it from your handler. */
+    resetState: void) => void;
+    /** Seeds the note only while isEditable is true; not a controlled value. */
     value?: string;
+    /** Seeds and reveals the title input only while isEditable is true. */
     title?: string;
+    /** Seeds the attachments only while isEditable is true. */
     file?: File[];
+    /** Edit mode: opens expanded, seeds value/title/file, and keeps them after saving. */
     isEditable?: boolean;
-    handleCancel?: (isActive: boolean) => void;
-    saveButtonLoading: boolean;
+    /** Fires on Cancel. */
+    handleCancel?: (/** @deprecated Always false; do not read it. */ isActive: boolean) => void;
+    /** Any transition to false while isEditable is not true clears the note, title and files — including after a failed save, not just success. */
+    saveButtonLoading?: boolean;
+    /** Per-file byte limit, default 1 MB; larger files are skipped with an error line. */
     maxFileSize?: number;
+    /** Error prefix; the formatted limit and a full stop are appended. */
     maxFilesSizeError?: string;
+    /** Disables Save when the note or the title exceeds this many words (default 15); the counter shows note words only. */
     maxNoteWordCount?: number;
+    /** Note text after each edit; whitespace-only input is rejected and not reported. */
     onChange?: (value: string) => void;
-    ref?: LegacyRef<HTMLInputElement>;
+    /** Collapsed prompt and textarea placeholder; also the default noteAriaLabel. */
     customPlaceholder?: string;
+    /** Hides Cancel; the composer then collapses only after a save completes. */
     cancelButtonHide?: boolean;
+    /** Accessible name for the title input. Defaults to `"Note title"`. */
+    titleAriaLabel?: string;
+    /** Accessible name for the note textarea. Defaults to `customPlaceholder`. */
+    noteAriaLabel?: string;
 };

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

@@ -1,4 +1,4 @@
-import React from "react";
 import { NotificationProps } from "./NotificationProps";
-declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, colors, }: NotificationProps) => React.JSX.Element;
+/** Date-driven countdown card ("due in 3 days" / "overdue by 2 hours"). For inbox-style rows use `NotificationItem`, which cannot render a future date. */
+declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, colors, }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 export default Notification;