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

package/dist/Components/FileUpload/FileUpload.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,124 +32,113 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var react_dropzone_1 = require("react-dropzone");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var constants_1 = require("./constants");
-var Modal_1 = __importStar(require("../Modal/Modal"));
-var FileUpload = function (_a) {
-    var _b, _c, _d, _e;
-    var onFilesUploaded = _a.onFilesUploaded, uploadedFiles = _a.uploadedFiles, onRemoveFile = _a.onRemoveFile, _f = _a.acceptTypes, acceptTypes = _f === void 0 ? [".jpg", ".png"] : _f, _g = _a.maxSizeKB, maxSizeKB = _g === void 0 ? 5 : _g, _h = _a.maxFiles, maxFiles = _h === void 0 ? undefined : _h, _j = _a.progress, progress = _j === void 0 ? {} : _j;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _k = (0, react_2.useDisclosure)(), isOpen = _k.isOpen, onOpen = _k.onOpen, onClose = _k.onClose;
-    var _l = react_1.default.useState(null), previewUrl = _l[0], setPreviewUrl = _l[1];
-    var _m = react_1.default.useState(null), previewTitle = _m[0], setPreviewTitle = _m[1];
-    var _o = react_1.default.useState([]), errors = _o[0], setErrors = _o[1];
-    var bg = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50];
-    var border = (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[300];
-    var mappedAccept = acceptTypes.reduce(function (acc, ext) {
-        var mime = constants_1.mimeMap[ext];
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const react_dropzone_1 = require("react-dropzone");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const constants_1 = require("./constants");
+const useObjectUrl_1 = require("./useObjectUrl");
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const activationKey_1 = require("../Common/activationKey");
+const DROP_PROMPT = "Drag and drop files here";
+const FileThumbnail = ({ file, radius, onPreview, }) => {
+    const url = (0, useObjectUrl_1.useObjectUrl)(file);
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const preview = () => url && onPreview(url);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "button", tabIndex: 0, "aria-label": `Preview ${file.name}`, boxSize: "2.5rem", cursor: "pointer", position: "relative", _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), _hover: {
+            ".hover-icon": {
+                opacity: 1,
+                bg: "blackAlpha.500",
+            },
+        }, onClick: preview, onKeyDown: (0, activationKey_1.onActivationKey)(() => preview()), children: [(0, jsx_runtime_1.jsx)("img", { src: url, alt: file.name, style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius: radius,
+                } }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { color: "white" }) })] }));
+};
+/** Controlled drop zone — you own the `uploadedFiles`/File[] state; `maxSizeKB` defaults to 5 MB. */
+const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = constants_1.DEFAULT_MAX_SIZE_KB, maxFiles = undefined, progress = {}, size = "md", inputAriaLabel = "Upload files", id, label, isRequired = false, isDisabled = false, error = false, errorMessage, helperText, }) => {
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const compact = size === "sm";
+    const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const [previewUrl, setPreviewUrl] = react_1.default.useState(null);
+    const [previewTitle, setPreviewTitle] = react_1.default.useState(null);
+    const [errors, setErrors] = react_1.default.useState([]);
+    const border = error ? colors.semanticText.error : colors.boxborder[500];
+    const limitParts = [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""];
+    const limits = limitParts.join("").trim();
+    const mappedAccept = acceptTypes.reduce((acc, ext) => {
+        const mime = constants_1.mimeMap[ext];
         if (mime) {
             acc[mime] = []; // File dropzone format
         }
         return acc;
     }, {});
-    var onDrop = (0, react_1.useCallback)(function (acceptedFiles) {
+    const onDrop = (0, react_1.useCallback)((acceptedFiles) => {
         setErrors([]);
-        var totalFiles = uploadedFiles.length + acceptedFiles.length;
+        const totalFiles = uploadedFiles.length + acceptedFiles.length;
         if (maxFiles && totalFiles > maxFiles) {
             setErrors([
-                "Maximum ".concat(maxFiles, " files allowed. You already uploaded ").concat(uploadedFiles.length, "."),
+                `Maximum ${maxFiles} files allowed. You already uploaded ${uploadedFiles.length}.`,
             ]);
             return;
         }
         onFilesUploaded(acceptedFiles);
     }, [onFilesUploaded, uploadedFiles, maxFiles]);
-    var _p = (0, react_dropzone_1.useDropzone)({
-        onDrop: onDrop,
+    const { getRootProps, getInputProps } = (0, react_dropzone_1.useDropzone)({
+        onDrop,
         accept: mappedAccept,
         maxSize: maxSizeKB * 1024,
-        maxFiles: maxFiles,
-        onDropRejected: function (rejectedFiles) {
-            var messages = rejectedFiles.flatMap(function (rejected) {
-                return rejected.errors.map(function (err) {
-                    if (err.code === "file-too-large") {
-                        return "File \"".concat(rejected.file.name, "\" is too large. Max size is ").concat((0, constants_1.toMB)(maxSizeKB), ".");
-                    }
-                    else if (err.code === "file-invalid-type") {
-                        return "File \"".concat(rejected.file.name, "\" is not an accepted file type.");
-                    }
-                    else {
-                        return "File \"".concat(rejected.file.name, "\" was rejected: ").concat(err.message);
-                    }
-                });
-            });
+        maxFiles,
+        disabled: isDisabled,
+        onDropRejected: (rejectedFiles) => {
+            const messages = rejectedFiles.flatMap((rejected) => rejected.errors.map((err) => {
+                if (err.code === "file-too-large") {
+                    return `File "${rejected.file.name}" is too large. Max size is ${(0, constants_1.toMB)(maxSizeKB)}.`;
+                }
+                else if (err.code === "file-invalid-type") {
+                    return `File "${rejected.file.name}" is not an accepted file type.`;
+                }
+                else {
+                    return `File "${rejected.file.name}" was rejected: ${err.message}`;
+                }
+            }));
             setErrors(messages);
         },
-    }), getRootProps = _p.getRootProps, getInputProps = _p.getInputProps;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
-            react_1.default.createElement(react_2.Box, __assign({}, getRootProps(), { border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[100] }, position: "relative" }),
-                react_1.default.createElement("input", __assign({}, getInputProps())),
-                react_1.default.createElement(react_2.VStack, { spacing: 2 },
-                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }),
-                    react_1.default.createElement(react_2.Text, { fontWeight: "medium" }, "Drag and drop files here"),
-                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500] },
-                        acceptTypes.join(", "),
-                        " up to ",
-                        (0, constants_1.toMB)(maxSizeKB),
-                        " ",
-                        maxFiles ? "- ".concat(maxFiles, " file(s) max") : ""))),
-            errors.length > 0 && (react_1.default.createElement(react_2.Box, null, errors.map(function (err, idx) {
-                var _a;
-                return (react_1.default.createElement(react_2.Text, { key: idx, fontSize: "sm", color: (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[600] }, err));
-            }))),
-            uploadedFiles.length > 0 && (react_1.default.createElement(react_2.Box, null,
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                    react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4 }, "Uploaded Files")),
-                react_1.default.createElement(react_2.List, { spacing: 2 }, uploadedFiles.map(function (file, index) {
-                    var _a, _b, _c, _d, _e, _f;
-                    return (react_1.default.createElement(react_2.Box, { key: index, borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors === null || colors === void 0 ? void 0 : colors.white },
-                        react_1.default.createElement(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center" },
-                            react_1.default.createElement(react_2.HStack, { spacing: 3, flex: "1" },
-                                file.type.startsWith("image/") ? (react_1.default.createElement(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
-                                        ".hover-icon": {
-                                            opacity: 1,
-                                            bg: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16],
-                                        },
-                                    }, onClick: function () {
-                                        setPreviewUrl(URL.createObjectURL(file));
-                                        setPreviewTitle(file.name);
-                                        onOpen();
-                                    } },
-                                    react_1.default.createElement("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                            width: "100%",
-                                            height: "100%",
-                                            objectFit: "cover",
-                                            borderRadius: "0.25rem",
-                                        } }),
-                                    react_1.default.createElement(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0 },
-                                        react_1.default.createElement(lucide_react_1.Eye, { color: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100] })))) : (react_1.default.createElement(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_d = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _d === void 0 ? void 0 : _d[500], boxSize: 8 })),
-                                react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
-                                    react_1.default.createElement(react_2.Text, { fontSize: "sm", noOfLines: 1 }, file.name),
-                                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500] },
-                                        (0, constants_1.toMB)(file.size / 1024),
-                                        " \u2022",
-                                        " ",
-                                        file.type || "Unknown type"))),
-                            onRemoveFile && (react_1.default.createElement(react_2.CloseButton, { onClick: function () { return onRemoveFile(file); }, size: "sm", color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600] }))),
-                        (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (react_1.default.createElement(react_2.Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: 5 }))));
-                }))))),
-        react_1.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () {
-                onClose();
-                setPreviewUrl(null);
-                setPreviewTitle(null);
-            }, size: "xl", isCentered: true },
-            react_1.default.createElement(Modal_1.ModalHeader, null,
-                react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 16, textTransform: "uppercase" }, previewTitle)),
-            react_1.default.createElement(Modal_1.ModalBody, null, previewUrl && (react_1.default.createElement(react_2.Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" }))))));
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired })), (0, jsx_runtime_1.jsx)(react_2.Box, { ...getRootProps({
+                                    role: "button",
+                                    "aria-label": `${label !== null && label !== void 0 ? label : inputAriaLabel}, ${DROP_PROMPT} ${limits}`,
+                                    "aria-describedby": ids.describedBy,
+                                    "aria-disabled": isDisabled || undefined,
+                                }), border: "1px dashed", borderColor: border, borderRadius: fieldStyles_1.FIELD_RADIUS, p: compact ? 3 : 10, textAlign: "center", bg: isDisabled ? colors.background[100] : colors.background[50], color: isDisabled ? colors.textMuted : undefined, cursor: isDisabled ? "not-allowed" : "pointer", transition: fieldStyles_1.FIELD_TRANSITION, _hover: isDisabled ? undefined : { bg: colors.background[100] }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), position: "relative", children: (0, jsx_runtime_1.jsxs)(react_2.Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: compact ? 4 : 6 }), (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 0, align: compact ? "start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 500, fontSize: compact ? "sm" : "md", color: colors.textMuted, children: DROP_PROMPT }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: limitParts })] })] }) }), (0, jsx_runtime_1.jsx)("input", { ...getInputProps({
+                                    id: ids.inputId,
+                                    disabled: isDisabled,
+                                    "aria-label": label ? undefined : inputAriaLabel,
+                                    "aria-describedby": ids.describedBy,
+                                }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }), errors.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: errors.map((err, idx) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "sm", lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 2, children: uploadedFiles.map((file, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { borderWidth: borderWidths_1.BORDER_WIDTHS.hairline, borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? ((0, jsx_runtime_1.jsx)(FileThumbnail, { file: file, radius: radii.base, onPreview: (url) => {
+                                                                setPreviewUrl(url);
+                                                                setPreviewTitle(file.name);
+                                                                onOpen();
+                                                            } })) : ((0, jsx_runtime_1.jsx)(react_2.ListIcon, { as: lucide_react_1.FileText, color: (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.background[50]), boxSize: 8 })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: [(0, constants_1.toMB)(file.size / 1024), " \u2022", " ", file.type || "Unknown type"] })] })] }), onRemoveFile && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: () => onRemoveFile(file), size: "sm", color: colors.semanticText.error }))] }), (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && ((0, jsx_runtime_1.jsx)(react_2.Progress, { "aria-label": `Upload progress for ${file.name}`, value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: "md" }))] }, index))) })] }))] }), (0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: () => {
+                    onClose();
+                    setPreviewUrl(null);
+                    setPreviewTitle(null);
+                }, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "md", textTransform: "uppercase", children: previewTitle }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: previewUrl && ((0, jsx_runtime_1.jsx)(react_2.Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" })) })] })] }));
 };
 exports.default = FileUpload;

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

@@ -1,11 +1,39 @@
-export type MimeExtension = '.jpg' | '.jpeg' | '.png' | '.gif' | '.webp' | '.svg' | '.pdf' | '.doc' | '.docx' | '.xls' | '.xlsx' | '.ppt' | '.pptx' | '.txt' | '.mp4' | '.mov' | '.mp3' | '.wav' | '.zip' | '.rar' | '.7z';
+/** File extensions FileUpload accepts via `acceptTypes`; each must have a mapping in `mimeMap`. */
+export type MimeExtension = '.jpg' | '.jpeg' | '.png' | '.gif' | '.webp' | '.svg' | '.pdf' | '.doc' | '.docx' | '.xls' | '.xlsx' | '.ppt' | '.pptx' | '.txt' | '.csv' | '.mp4' | '.mov' | '.mp3' | '.wav' | '.zip' | '.rar' | '.7z';
+/** Extension-to-MIME-type lookup consumed by react-dropzone's `accept` option; see `mimeMap` in constants.ts. */
 export type MimeMap = Record<MimeExtension, string>;
+/** Props for FileUpload, a controlled drop zone; the caller owns `uploadedFiles` state. */
 export type FileUploaderProps = {
+    /** Receives only the newly accepted files, not the full list; append them to `uploadedFiles` yourself. */
     onFilesUploaded: (files: File[]) => void;
+    /** Files listed below the drop zone; also counted against `maxFiles`. */
     uploadedFiles: File[];
+    /** Shows a remove button per file when set; the caller must drop it from `uploadedFiles`. */
     onRemoveFile?: (file: File) => void;
+    /** Allowed extensions; defaults to `[".jpg", ".png"]`. Rejected files get an inline message. */
     acceptTypes?: MimeExtension[];
+    /** Max size per file in KB (not MB); defaults to 5120 (5 MB). */
     maxSizeKB?: number;
+    /** Cap on total files including already-uploaded ones; a drop that exceeds it is rejected whole. */
     maxFiles?: number;
+    /** `sm` is a compact single-row drop zone; defaults to `md`. */
+    size?: 'sm' | 'md';
+    /** Upload percent (0-100) keyed by `file.name`; a bar shows only for listed keys. */
     progress?: Record<string, number>;
+    /** Names the drop zone when there is no `label`; its visible text is appended, so the name always holds it. */
+    inputAriaLabel?: string;
+    /** Id for the file input; auto-generated when omitted. */
+    id?: string;
+    /** Visible label above the drop zone; also names it for screen readers, ahead of the zone's own text. */
+    label?: string;
+    /** Shows the required asterisk on `label`. */
+    isRequired?: boolean;
+    /** Blocks click, drop and keyboard activation, and greys the drop zone. */
+    isDisabled?: boolean;
+    /** Paints the drop zone's border in the error colour and shows `errorMessage`. */
+    error?: boolean;
+    /** Shown under the drop zone while `error` is true. */
+    errorMessage?: string;
+    /** Shown under the drop zone when there is no error. */
+    helperText?: string;
 };

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

@@ -1,3 +1,4 @@
 import { MimeMap } from "./FileUploadProps";
 export declare const mimeMap: MimeMap;
+export declare const DEFAULT_MAX_SIZE_KB: number;
 export declare const toMB: (size: number) => string;

package/dist/Components/FileUpload/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toMB = exports.mimeMap = void 0;
+exports.toMB = exports.DEFAULT_MAX_SIZE_KB = exports.mimeMap = void 0;
 exports.mimeMap = {
     '.jpg': 'image/jpeg',
     '.jpeg': 'image/jpeg',
@@ -16,6 +16,7 @@ exports.mimeMap = {
     '.ppt': 'application/vnd.ms-powerpoint',
     '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
     '.txt': 'text/plain',
+    '.csv': 'text/csv',
     '.mp4': 'video/mp4',
     '.mov': 'video/quicktime',
     '.mp3': 'audio/mpeg',
@@ -24,5 +25,6 @@ exports.mimeMap = {
     '.rar': 'application/vnd.rar',
     '.7z': 'application/x-7z-compressed',
 };
-var toMB = function (size) { return "".concat((size / 1024).toFixed(2), " MB"); };
+exports.DEFAULT_MAX_SIZE_KB = 5 * 1024;
+const toMB = (size) => `${(size / 1024).toFixed(2)} MB`;
 exports.toMB = toMB;

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

@@ -0,0 +1 @@
+export declare const useObjectUrl: (file: Blob) => string | undefined;

package/dist/Components/FileUpload/useObjectUrl.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useObjectUrl = void 0;
+const react_1 = require("react");
+const useObjectUrl = (file) => {
+    const [url, setUrl] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const created = URL.createObjectURL(file);
+        setUrl(created);
+        return () => URL.revokeObjectURL(created);
+    }, [file]);
+    return url;
+};
+exports.useObjectUrl = useObjectUrl;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { FileUploaderProps } from "./FileUploaderProps";
+/** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
 declare const FileUploader: React.FC<FileUploaderProps>;
 export default FileUploader;

package/dist/Components/FileUploader/FileUploader.js

@@ -1,81 +1,53 @@
 "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 });
-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) {
+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 Toaster_1 = require("../Toaster/Toaster");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const activationKey_1 = require("../Common/activationKey");
+const revokePreviews = (files) => files.forEach((f) => f.previewUrl && URL.revokeObjectURL(f.previewUrl));
+/** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
+const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
+    const { showToast } = (0, Toaster_1.useToaster)();
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const accentColor = (0, accentText_1.accentTextOnCanvas)(colors.blue, colors.backgroundColor.main);
+    const [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
+    const [isDragOver, setIsDragOver] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const filesRef = (0, react_1.useRef)(uploadedFiles);
+    filesRef.current = uploadedFiles;
+    (0, react_1.useEffect)(() => () => revokePreviews(filesRef.current), []);
+    const totalSize = uploadedFiles.reduce((acc, f) => acc + f.size, 0);
+    const maxTotalBytes = maxTotalSize * 1024 * 1024;
+    const formatFileSize = (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]);
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
     };
-    var handleFiles = function (files) {
+    const handleFiles = (files) => {
         // setError(null);
-        var newFiles = Array.from(files).map(function (file) { return ({
+        const newFiles = Array.from(files).map((file) => ({
             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);
+        }));
+        const combinedFiles = [...uploadedFiles, ...newFiles].slice(0, maxFiles);
+        const totalSizeBytes = combinedFiles.reduce((acc, f) => acc + f.size, 0);
+        revokePreviews(newFiles.filter((f) => !combinedFiles.includes(f)));
         if (totalSizeBytes > maxTotalBytes) {
+            revokePreviews(newFiles);
             showToast({
-                title: "Total file size exceeds ".concat(maxTotalSize, " MB limit."),
+                title: `Total file size exceeds ${maxTotalSize} MB limit.`,
                 duration: 3000,
                 status: "error",
             });
@@ -84,73 +56,35 @@ var FileUploader = function (_a) {
         setUploadedFiles(combinedFiles);
         onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(combinedFiles);
     };
-    var handleFileInput = function (e) {
+    const handleFileInput = (e) => {
         if (e.target.files) {
             handleFiles(e.target.files);
             e.target.value = ""; // fix: reopen file dialog for same files
         }
     };
-    var handleDrop = function (e) {
+    const handleDrop = (e) => {
         e.preventDefault();
         setIsDragOver(false);
         if (e.dataTransfer.files)
             handleFiles(e.dataTransfer.files);
     };
-    var handleDragOver = function (e) {
+    const handleDragOver = (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; });
+    const handleDragLeave = () => setIsDragOver(false);
+    const removeFile = (id) => {
+        const filtered = uploadedFiles.filter((f) => f.id !== id);
+        revokePreviews(uploadedFiles.filter((f) => 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(); };
+    const handleBrowseClick = () => { 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(", "),
-                    ".")))));
+    const acceptString = acceptTypes.map((ext) => `.${ext}`).join(",");
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "500px", mx: "auto", p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, mb: 4, children: ["Files Uploaded:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 500, color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 500, children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "file-uploader-dropzone", border: "1px dashed", borderColor: isDragOver ? colors.primary[500] : colors.boxborder[500], bg: isDragOver ? colors.backgroundColor.muted : undefined, borderRadius: fieldStyles_1.FIELD_RADIUS, transition: (0, motion_1.transitionFor)(["border-color", "background-color"]), p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
+                                var _a;
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: colors.boxborder[500], borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: colors.backgroundColor.muted, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: colors.textMuted, children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                            }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "file-uploader-drop-target", p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", role: "button", tabIndex: 0, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: handleBrowseClick, onKeyDown: (0, activationKey_1.onActivationKey)(() => handleBrowseClick()), children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: 500, fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 exports.default = FileUploader;

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

@@ -1,13 +1,24 @@
+/** Metadata only, not a real File/Blob — previewUrl is a blob: URL for images; there is no way to recover the original File. */
 export type UploadedFile = {
+    /** Random per pick, not derived from the file; the same file re-added gets a new id. */
     id: string;
+    /** Original file name with extension; its extension also labels the tile of a non-image file. */
     name: string;
+    /** Bytes, while `maxTotalSize` is in MB. */
     size: number;
+    /** @deprecated FileUploader never sets it; always undefined. Read the extension from `name`. */
     type?: string;
+    /** A blob: URL for images, an empty string for every other file. */
     previewUrl?: string;
 };
+/** Same name as FileUpload's own, unrelated props type — this one is not exported from the package; only FileUpload's ships publicly. */
 export type FileUploaderProps = {
+    /** Defaults to 10; files past the cap are silently dropped, no toast. */
     maxFiles?: number;
+    /** Total MB cap, default 20; an over-limit batch is rejected whole with a toast. */
     maxTotalSize?: number;
+    /** Extensions without dots, default jpeg/jpg/png; filters the picker only, drops are never checked. */
     acceptTypes?: string[];
+    /** Whole list after each add or remove; the uploader revokes the blob of a removed or rejected image; revoke the rest yourself when done. */
     onFilesChange?: (files: UploadedFile[]) => void;
 };

package/dist/Components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,4 @@
+import type { FilterBarProps } from "./FilterBarProps";
+/** Toolbar row: search + filter controls left, summary + actions right, active filters as chips below. */
+declare const FilterBar: ({ search, searchLabel, children, actions, summary, activeFilters, onRemoveFilter, onClearAll, ...rest }: FilterBarProps) => import("react/jsx-runtime").JSX.Element;
+export default FilterBar;