pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/FilePreview/FilePreview.js

@@ -10,8 +10,19 @@ const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const color_1 = require("../../Theme/tokens/builders/color");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BASE_TRANSFORM_TRANSITION = (0, motion_1.transitionFor)(["transform"], "base");
+const OPACITY_TRANSITION = (0, motion_1.transitionFor)(["opacity"]);
 const MotionContent = (0, framer_motion_1.motion)(react_2.ModalContent);
+const blackScrim = (black, opacity) => {
+    const { r, g, b } = (0, color_1.hexToRgb)(black);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
 const inferKind = (url, fileName) => {
     const src = (fileName || url).split("?")[0].toLowerCase();
     if (/\.(png|jpe?g|gif|webp|svg|bmp|avif)$/.test(src))
@@ -39,8 +50,10 @@ const downloadFile = async (fileUrl, fileName) => {
         window.open(fileUrl, "_blank", "noopener,noreferrer");
     }
 };
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
 const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const downloadFill = (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
     const [zoom, setZoom] = (0, react_1.useState)(1);
     const [rotation, setRotation] = (0, react_1.useState)(0);
     const kind = fileType || inferKind(fileUrl, fileName);
@@ -54,7 +67,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
     };
     const renderBody = () => {
         if (kind === "image") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: "transform 0.2s ease", objectFit: "contain" }) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: BASE_TRANSFORM_TRANSITION, objectFit: "contain" }) }));
         }
         if (kind === "pdf") {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "lg" }));
@@ -62,15 +75,9 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
         if (kind === "video") {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
         }
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[500], color: theme.colors.onPrimary, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: downloadFill.fill, color: downloadFill.color, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: "blackAlpha.600", backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(MotionContent
-            // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
-            // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-            , { 
-                // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
-                // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.MotionConfig, { reducedMotion: "user", children: (0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors) }), (0, jsx_runtime_1.jsxs)(MotionContent, { bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }) }));
 };
 exports.FilePreview = FilePreview;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
@@ -78,7 +85,7 @@ const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px",
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const kind = fileType || inferKind(fileUrl, fileName);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-label": `Preview ${fileName || "file"}`, "data-group": true, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", position: "absolute", inset: 0, align: "center", justify: "center", bg: blackScrim(theme.colors.black, 0.5), color: theme.colors.white, opacity: 0, transition: OPACITY_TRANSITION, _groupHover: { opacity: 1 }, _groupFocusVisible: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
 };
 exports.FilePreviewTrigger = FilePreviewTrigger;
 exports.default = exports.FilePreview;

package/dist/Components/FilePreview/FilePreviewProps.d.ts

@@ -1,10 +1,14 @@
+/** Preview renderer to use; "other" falls back to a download-only panel. */
 export type FilePreviewKind = "image" | "pdf" | "video" | "other";
+/** Props for FilePreview, a modal viewer that infers image/pdf/video/other from the file extension. */
 export interface FilePreviewProps {
+    /** Shows the modal. */
     isOpen: boolean;
+    /** Called on close button, Escape or overlay click. */
     onClose: () => void;
-    /** URL of the file to preview. */
+    /** Changing this while isOpen stays true does NOT reset zoom/rotation — remount via key={fileUrl}. */
     fileUrl: string;
-    /** Display name (also used as the download filename). */
+    /** Drives kind-detection instead of fileUrl when set — a name with no extension forces the no-preview fallback. */
     fileName?: string;
     /** Force a renderer. When omitted it is inferred from the file extension. */
     fileType?: FilePreviewKind;
@@ -13,14 +17,18 @@ export interface FilePreviewProps {
     /** Modal size. */
     size?: "md" | "lg" | "xl" | "2xl" | "full";
 }
+/** Props for FilePreviewTrigger — a thumbnail button that opens FilePreview in a modal. */
 export interface FilePreviewTriggerProps {
     /** URL of the file. */
     fileUrl: string;
+    /** Names the button "Preview <fileName>" ("Preview file" when omitted) and drives kind detection. */
     fileName?: string;
+    /** Forces a renderer; inferred from the file extension when omitted. */
     fileType?: FilePreviewKind;
     /** Thumbnail max width. */
     thumbWidth?: string;
     /** Thumbnail max height. */
     thumbHeight?: string;
+    /** Hides the download action inside the opened preview. */
     hideDownload?: boolean;
 }

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { FileUploaderProps } from "./FileUploadProps";
+/** Controlled drop zone — you own the `uploadedFiles`/File[] state; `maxSizeKB` defaults to 5 MB. */
 declare const FileUpload: React.FC<FileUploaderProps>;
 export default FileUpload;

package/dist/Components/FileUpload/FileUpload.js

@@ -32,6 +32,9 @@ 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 });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
@@ -41,15 +44,44 @@ 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 FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes = [".jpg", ".png"], maxSizeKB = 5, maxFiles = undefined, progress = {}, }) => {
+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 bg = colors.gray[50];
-    const border = colors.boxborder[500];
+    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) {
@@ -73,6 +105,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
         accept: mappedAccept,
         maxSize: maxSizeKB * 1024,
         maxFiles,
+        disabled: isDisabled,
         onDropRejected: (rejectedFiles) => {
             const messages = rejectedFiles.flatMap((rejected) => rejected.errors.map((err) => {
                 if (err.code === "file-too-large") {
@@ -88,24 +121,24 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
             setErrors(messages);
         },
     });
-    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, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...getInputProps() }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "medium", children: "Drag and drop files here" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", (0, constants_1.toMB)(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] }), 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: 14, 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.Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.ListItem, { 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.jsxs)(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
-                                                                ".hover-icon": {
-                                                                    opacity: 1,
-                                                                    bg: colors.secondary.opacity[16],
-                                                                },
-                                                            }, onClick: () => {
-                                                                setPreviewUrl(URL.createObjectURL(file));
+    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();
-                                                            }, children: [(0, jsx_runtime_1.jsx)("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                                                        width: "100%",
-                                                                        height: "100%",
-                                                                        objectFit: "cover",
-                                                                        borderRadius: radii.base,
-                                                                    } }), (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: colors.background[100] }) })] })) : ((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, { 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: () => {
+                                                            } })) : ((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: 16, 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" })) })] })] }));
+                }, 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',
 };
+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

@@ -7,14 +7,22 @@ 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 [, setIsDragOver] = (0, react_1.useState)(false);
-    // const [error, setError] = useState<string | null>(null);
+    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) => {
@@ -35,7 +43,9 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
         }));
         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 ${maxTotalSize} MB limit.`,
                 duration: 3000,
@@ -65,15 +75,16 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     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);
     };
     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
     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: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px dashed", borderColor: colors.boxborder[500], borderRadius: "md", 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) => {
+    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.gray[200], 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: "medium", 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, { 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, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "medium", 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(", "), "."] })] })] })] }));
+                                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;

package/dist/Components/FilterBar/FilterBar.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Toolbar row: search + filter controls left, summary + actions right, active filters as chips below. */
+const FilterBar = ({ search, searchLabel = "Search", children, actions, summary, activeFilters = [], onRemoveFilter, onClearAll, ...rest }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { ...rest, direction: "column", gap: 2, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, wrap: "wrap", align: "center", children: [search && ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "search", "aria-label": searchLabel, children: search })), children, (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 2, align: "center", wrap: "wrap", ml: { base: 0, md: "auto" }, children: [summary && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: colors.textMuted, whiteSpace: "nowrap", children: summary })), actions] })] }), activeFilters.length > 0 && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 1.5, wrap: "wrap", align: "center", children: [activeFilters.map((filter) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: filter.label, colorScheme: "gray", icon: onRemoveFilter ? lucide_react_1.X : undefined, onIconClick: onRemoveFilter ? () => onRemoveFilter(filter.id) : undefined }, filter.id))), onClearAll && (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: "Clear all", onClick: onClearAll })] }))] }));
+};
+exports.default = FilterBar;

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

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** One active filter chip; label is what's shown, id identifies it for removal. */
+export interface FilterBarActiveFilter {
+    /** Passed to `onRemoveFilter` when this chip's remove icon is clicked. */
+    id: string | number;
+    /** Chip text. */
+    label: string;
+}
+/** Search + filters + actions toolbar row; other `<div>` attributes land on the root. */
+export interface FilterBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "children" | "dangerouslySetInnerHTML"> {
+    /** Search control, e.g. a TextInput or Search — rendered first in the row. */
+    search?: ReactNode;
+    /** Accessible name for the `role="search"` landmark wrapping `search`. Defaults to `"Search"`; does not by itself name the control inside — give that its own label. */
+    searchLabel?: string;
+    /** Filter controls (SelectV2, DatePicker, …), rendered after `search`. */
+    children?: ReactNode;
+    /** Right-aligned controls after the summary, e.g. a "Filters" or "Export" Button. */
+    actions?: ReactNode;
+    /** Muted count text before `actions`, e.g. "600 deals". */
+    summary?: ReactNode;
+    /** Chips shown below the row for each currently-applied filter. */
+    activeFilters?: FilterBarActiveFilter[];
+    /** Called with a chip's id when its remove icon is clicked; chips render read-only without it. */
+    onRemoveFilter?: (id: string | number) => void;
+    /** Shows a ghost "Clear all" button after the chips when set. */
+    onClearAll?: () => void;
+}

package/dist/Components/FilterBar/FilterBarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/FilterSidebar/FilterSidebar.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { FilterValues } from "../Table/filterTypes";
+import { type FilterRange } from "./RangeSection";
 export type FilterOption = {
     id: string;
     label: string;
@@ -10,31 +11,31 @@ export type FilterSection = {
     label: string;
     options?: FilterOption[];
     searchable?: boolean;
-    range?: {
-        min: number;
-        max: number;
-        step?: number;
-        values?: number[];
-        unit?: string;
-    };
+    range?: FilterRange;
     initiallyExpanded?: boolean;
     type?: "checkboxes" | "radio";
+    /** @deprecated Dead — never read; radio mode comes from `type: "radio"` or `radio`, checkboxes is the default. */
     checkboxes?: boolean;
     radio?: boolean;
 };
 export type SelectedFilters = FilterValues;
+/** Sectioned filter list; live through `onChange`, controlled only when both `selected` and `onChange` are set. */
 export type FilterSidebarProps = {
     sidebarOptions: FilterSection[];
+    /** Passing this alone (no onChange) makes every filter click silently inert — state is computed, then discarded. */
     selected?: SelectedFilters;
     onChange?: (selected: SelectedFilters) => void;
+    /** @deprecated Dead — never called; every change is already live through `onChange`. */
     onApply?: (selected: SelectedFilters) => void;
     maxVisible?: number;
     width?: string | number;
     variant?: "minimal" | "cards";
     containerHeight?: number | string;
     containerPadding?: number | string;
+    /** @deprecated Dead — never read; has no effect. */
     headerPadding?: number;
     panelPadding?: number;
+    /** @deprecated Dead — never read; the range slider is always the native-input one. */
     sliderMode?: "chakra" | "native";
     clearAllButton?: boolean;
     onClearAllHandler?: () => void;