@raydenui/ui 0.9.7 → 0.10.0

package/dist/components/EmptyStateIllustration/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.illustrationNames = exports.EmptyStateIllustration = void 0;
+var EmptyStateIllustration_1 = require("./EmptyStateIllustration.cjs");
+Object.defineProperty(exports, "EmptyStateIllustration", { enumerable: true, get: function () { return EmptyStateIllustration_1.EmptyStateIllustration; } });
+var illustrations_1 = require("./illustrations.cjs");
+Object.defineProperty(exports, "illustrationNames", { enumerable: true, get: function () { return illustrations_1.illustrationNames; } });

package/dist/components/EmptyStateIllustration/index.js

@@ -0,0 +1,2 @@
+export { EmptyStateIllustration } from "./EmptyStateIllustration.js";
+export { illustrationNames } from "./illustrations.js";

package/dist/components/FileUpload/FileUpload.cjs

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUpload = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const Badge_1 = require("../Badge/index.cjs");
+const FileUploadDropZone_1 = require("./FileUploadDropZone.cjs");
+const FileUploadItem_1 = require("./FileUploadItem.cjs");
+// ─── Component ───────────────────────────────────────────────────
+exports.FileUpload = (0, react_1.forwardRef)(({ multiple = false, accept, maxSize, maxFiles, title = "Upload Documents", description, files, onFilesChange, onUpload, onError, disabled = false, onRemove, onRetry, onDownload, showHeader = false, onClose, className, ...rest }, ref) => {
+    const [rejections, setRejections] = (0, react_1.useState)([]);
+    const id = (0, react_1.useId)();
+    const sequence = (0, react_1.useRef)(0);
+    // Derive drop zone state for single-file mode
+    const deriveDropZoneState = () => {
+        if (!multiple && files.length > 0) {
+            const file = files[0];
+            if (file?.status === "uploading")
+                return "uploading";
+            if (file?.status === "complete")
+                return "success";
+            if (file?.status === "error")
+                return "error";
+        }
+        return "default";
+    };
+    const dropZoneState = deriveDropZoneState();
+    // Get uploading file info for drop zone
+    const uploadingFile = !multiple && files.length > 0 && files[0]?.status === "uploading"
+        ? {
+            name: files[0].name,
+            type: files[0].type,
+            progress: files[0].progress ?? 0,
+        }
+        : undefined;
+    const errorMessage = !multiple && files.length > 0 && files[0]?.status === "error" ? files[0].error : undefined;
+    const handleFilesSelected = (0, react_1.useCallback)((fileList) => {
+        if (disabled)
+            return;
+        const errors = [];
+        const accepted = [];
+        const types = accept
+            ?.split(",")
+            .map((type) => type.trim().toLowerCase())
+            .filter(Boolean) ?? [];
+        const capacity = multiple
+            ? Math.max(0, (maxFiles ?? Infinity) - files.length)
+            : Math.min(1, maxFiles ?? 1);
+        for (const file of Array.from(fileList)) {
+            let reason = "";
+            if (types.length &&
+                !types.some((type) => type.startsWith(".")
+                    ? file.name.toLowerCase().endsWith(type)
+                    : type.endsWith("/*")
+                        ? file.type.toLowerCase().startsWith(type.slice(0, -1))
+                        : file.type.toLowerCase() === type)) {
+                reason = `Choose a supported file type (${accept}).`;
+            }
+            else if (maxSize !== undefined && file.size > maxSize) {
+                const limit = maxSize < 1024 ? `${maxSize} byte` : `${Math.round(maxSize / 1024)} KB`;
+                reason = `File exceeds the ${limit} size limit.`;
+            }
+            else if (accepted.length >= capacity) {
+                reason = `You can select ${multiple ? (maxFiles ?? "no more") : 1} ${multiple ? "files" : "file"}. Remove a file before adding another.`;
+            }
+            if (reason) {
+                errors.push(`${file.name}: ${reason}`);
+                continue;
+            }
+            accepted.push({
+                file,
+                item: {
+                    id: `${id}-${++sequence.current}`,
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                    status: "pending",
+                },
+            });
+        }
+        setRejections(errors);
+        errors.forEach((message) => onError?.(message));
+        if (!accepted.length)
+            return;
+        onFilesChange(multiple
+            ? [...files, ...accepted.map(({ item }) => item)]
+            : accepted.map(({ item }) => item));
+        accepted.forEach(({ file, item }) => onUpload?.(file, item));
+    }, [disabled, accept, multiple, maxFiles, maxSize, files, id, onFilesChange, onUpload, onError]);
+    const removeFile = (fileId) => {
+        onFilesChange(files.filter((file) => file.id !== fileId));
+        onRemove?.(fileId);
+    };
+    const handleClear = (0, react_1.useCallback)(() => {
+        if (!multiple && files.length > 0) {
+            onFilesChange([]);
+            onRemove?.(files[0].id);
+        }
+    }, [multiple, files, onRemove, onFilesChange]);
+    const handleRetry = (0, react_1.useCallback)(() => {
+        if (!multiple && files.length > 0) {
+            onRetry?.(files[0].id);
+        }
+    }, [multiple, files, onRetry]);
+    // In multiple mode, separate completed/in-progress files for display
+    const completedFiles = multiple
+        ? files.filter((f) => f.status === "complete" || f.status === "error")
+        : [];
+    const activeFiles = multiple
+        ? files.filter((f) => f.status === "uploading" || f.status === "pending")
+        : [];
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col gap-7 rounded-[10px] bg-surface p-4 sm:p-8 shadow-soft-xs", className), ...rest, children: [showHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-body-lg font-semibold text-grey-800", children: title }), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, className: "flex size-7 items-center justify-center rounded-md text-on-surface-muted hover:bg-grey-100 cursor-pointer", "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "multiply", size: "md" }) }))] })), (0, jsx_runtime_1.jsx)(FileUploadDropZone_1.FileUploadDropZone, { state: dropZoneState, description: description, accept: accept, multiple: multiple, disabled: disabled, uploadingFile: uploadingFile, errorMessage: errorMessage, onFilesSelected: handleFilesSelected, onClear: handleClear, onRetry: handleRetry }), rejections.length > 0 && ((0, jsx_runtime_1.jsx)("div", { role: "alert", className: "space-y-1 text-sm text-feedback-error", children: rejections.map((message) => ((0, jsx_runtime_1.jsx)("p", { children: message }, message))) })), !multiple && files[0]?.status === "pending" && ((0, jsx_runtime_1.jsx)(FileUploadItem_1.FileUploadItem, { file: files[0], onRemove: removeFile })), multiple && activeFiles.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: activeFiles.map((file) => ((0, jsx_runtime_1.jsx)(FileUploadItem_1.FileUploadItem, { file: file, onRemove: removeFile, onRetry: onRetry, onDownload: onDownload }, file.id))) })), multiple && completedFiles.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-body-md font-medium text-grey-800", children: "Uploaded Files" }), (0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: "orange", type: "filled", size: "sm", children: completedFiles.length })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: completedFiles.map((file) => ((0, jsx_runtime_1.jsx)(FileUploadItem_1.FileUploadItem, { file: file, onRemove: removeFile, onRetry: onRetry, onDownload: onDownload }, file.id))) })] }))] }));
+});
+exports.FileUpload.displayName = "FileUpload";

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useId, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { Icon } from "../Icon/index.js";
+import { Badge } from "../Badge/index.js";
+import { FileUploadDropZone } from "./FileUploadDropZone.js";
+import { FileUploadItem } from "./FileUploadItem.js";
+// ─── Component ───────────────────────────────────────────────────
+export const FileUpload = forwardRef(({ multiple = false, accept, maxSize, maxFiles, title = "Upload Documents", description, files, onFilesChange, onUpload, onError, disabled = false, onRemove, onRetry, onDownload, showHeader = false, onClose, className, ...rest }, ref) => {
+    const [rejections, setRejections] = useState([]);
+    const id = useId();
+    const sequence = useRef(0);
+    // Derive drop zone state for single-file mode
+    const deriveDropZoneState = () => {
+        if (!multiple && files.length > 0) {
+            const file = files[0];
+            if (file?.status === "uploading")
+                return "uploading";
+            if (file?.status === "complete")
+                return "success";
+            if (file?.status === "error")
+                return "error";
+        }
+        return "default";
+    };
+    const dropZoneState = deriveDropZoneState();
+    // Get uploading file info for drop zone
+    const uploadingFile = !multiple && files.length > 0 && files[0]?.status === "uploading"
+        ? {
+            name: files[0].name,
+            type: files[0].type,
+            progress: files[0].progress ?? 0,
+        }
+        : undefined;
+    const errorMessage = !multiple && files.length > 0 && files[0]?.status === "error" ? files[0].error : undefined;
+    const handleFilesSelected = useCallback((fileList) => {
+        if (disabled)
+            return;
+        const errors = [];
+        const accepted = [];
+        const types = accept
+            ?.split(",")
+            .map((type) => type.trim().toLowerCase())
+            .filter(Boolean) ?? [];
+        const capacity = multiple
+            ? Math.max(0, (maxFiles ?? Infinity) - files.length)
+            : Math.min(1, maxFiles ?? 1);
+        for (const file of Array.from(fileList)) {
+            let reason = "";
+            if (types.length &&
+                !types.some((type) => type.startsWith(".")
+                    ? file.name.toLowerCase().endsWith(type)
+                    : type.endsWith("/*")
+                        ? file.type.toLowerCase().startsWith(type.slice(0, -1))
+                        : file.type.toLowerCase() === type)) {
+                reason = `Choose a supported file type (${accept}).`;
+            }
+            else if (maxSize !== undefined && file.size > maxSize) {
+                const limit = maxSize < 1024 ? `${maxSize} byte` : `${Math.round(maxSize / 1024)} KB`;
+                reason = `File exceeds the ${limit} size limit.`;
+            }
+            else if (accepted.length >= capacity) {
+                reason = `You can select ${multiple ? (maxFiles ?? "no more") : 1} ${multiple ? "files" : "file"}. Remove a file before adding another.`;
+            }
+            if (reason) {
+                errors.push(`${file.name}: ${reason}`);
+                continue;
+            }
+            accepted.push({
+                file,
+                item: {
+                    id: `${id}-${++sequence.current}`,
+                    name: file.name,
+                    size: file.size,
+                    type: file.type,
+                    status: "pending",
+                },
+            });
+        }
+        setRejections(errors);
+        errors.forEach((message) => onError?.(message));
+        if (!accepted.length)
+            return;
+        onFilesChange(multiple
+            ? [...files, ...accepted.map(({ item }) => item)]
+            : accepted.map(({ item }) => item));
+        accepted.forEach(({ file, item }) => onUpload?.(file, item));
+    }, [disabled, accept, multiple, maxFiles, maxSize, files, id, onFilesChange, onUpload, onError]);
+    const removeFile = (fileId) => {
+        onFilesChange(files.filter((file) => file.id !== fileId));
+        onRemove?.(fileId);
+    };
+    const handleClear = useCallback(() => {
+        if (!multiple && files.length > 0) {
+            onFilesChange([]);
+            onRemove?.(files[0].id);
+        }
+    }, [multiple, files, onRemove, onFilesChange]);
+    const handleRetry = useCallback(() => {
+        if (!multiple && files.length > 0) {
+            onRetry?.(files[0].id);
+        }
+    }, [multiple, files, onRetry]);
+    // In multiple mode, separate completed/in-progress files for display
+    const completedFiles = multiple
+        ? files.filter((f) => f.status === "complete" || f.status === "error")
+        : [];
+    const activeFiles = multiple
+        ? files.filter((f) => f.status === "uploading" || f.status === "pending")
+        : [];
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col gap-7 rounded-[10px] bg-surface p-4 sm:p-8 shadow-soft-xs", className), ...rest, children: [showHeader && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-body-lg font-semibold text-grey-800", children: title }), onClose && (_jsx("button", { type: "button", onClick: onClose, className: "flex size-7 items-center justify-center rounded-md text-on-surface-muted hover:bg-grey-100 cursor-pointer", "aria-label": "Close", children: _jsx(Icon, { name: "multiply", size: "md" }) }))] })), _jsx(FileUploadDropZone, { state: dropZoneState, description: description, accept: accept, multiple: multiple, disabled: disabled, uploadingFile: uploadingFile, errorMessage: errorMessage, onFilesSelected: handleFilesSelected, onClear: handleClear, onRetry: handleRetry }), rejections.length > 0 && (_jsx("div", { role: "alert", className: "space-y-1 text-sm text-feedback-error", children: rejections.map((message) => (_jsx("p", { children: message }, message))) })), !multiple && files[0]?.status === "pending" && (_jsx(FileUploadItem, { file: files[0], onRemove: removeFile })), multiple && activeFiles.length > 0 && (_jsx("div", { className: "flex flex-col", children: activeFiles.map((file) => (_jsx(FileUploadItem, { file: file, onRemove: removeFile, onRetry: onRetry, onDownload: onDownload }, file.id))) })), multiple && completedFiles.length > 0 && (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-body-md font-medium text-grey-800", children: "Uploaded Files" }), _jsx(Badge, { color: "orange", type: "filled", size: "sm", children: completedFiles.length })] }), _jsx("div", { className: "flex flex-col", children: completedFiles.map((file) => (_jsx(FileUploadItem, { file: file, onRemove: removeFile, onRetry: onRetry, onDownload: onDownload }, file.id))) })] }))] }));
+});
+FileUpload.displayName = "FileUpload";

package/dist/components/FileUpload/FileUploadDropZone.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadDropZone = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const Button_1 = require("../Button/index.cjs");
+const ProgressBar_1 = require("../ProgressBar/index.cjs");
+const FileUploadIcons_1 = require("./FileUploadIcons.cjs");
+// ─── Component ───────────────────────────────────────────────────
+exports.FileUploadDropZone = (0, react_1.forwardRef)(({ state: controlledState, description, accept, multiple = false, disabled = false, uploadingFile, errorMessage, onFilesSelected, onClear, onRetry, className, ...rest }, ref) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [dragCounter, setDragCounter] = (0, react_1.useState)(0);
+    // Derive state: if dragging and state is default, show dragging
+    const isDragging = dragCounter > 0;
+    const state = isDragging && (controlledState === "default" || !controlledState)
+        ? "dragging"
+        : (controlledState ?? "default");
+    const handleBrowse = () => {
+        if (!disabled)
+            inputRef.current?.click();
+    };
+    const handleFileChange = (e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            onFilesSelected?.(e.target.files);
+            // Reset the input so the same file can be re-selected
+            e.target.value = "";
+        }
+    };
+    const handleDragEnter = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter((c) => c + 1);
+    }, []);
+    const handleDragLeave = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter((c) => c - 1);
+    }, []);
+    const handleDragOver = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter(0);
+        if (!disabled && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            onFilesSelected?.(e.dataTransfer.files);
+        }
+    }, [onFilesSelected, disabled]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: "region", "aria-label": "File upload dropzone", className: (0, cn_1.cn)("flex flex-col items-center justify-center rounded-xl p-4 sm:p-8 transition-colors", state === "dragging"
+            ? "border-2 border-dashed border-primary-400 bg-primary-50/10"
+            : state === "uploading" || state === "success" || state === "error"
+                ? "border border-grey-200 bg-surface"
+                : "border-2 border-dashed border-control-border bg-surface", className), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, ...rest, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, disabled: disabled, onChange: handleFileChange, className: "sr-only", tabIndex: -1, "aria-label": multiple ? "Choose files to upload" : "Choose file to upload" }), (state === "default" || state === "dragging") && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)(FileUploadIcons_1.UploadStateIcon, { state: "default", size: 56, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-body-sm font-medium text-on-surface-secondary", children: ["Click to upload ", (0, jsx_runtime_1.jsx)("span", { className: "text-on-surface-secondary", children: "or drag and drop" })] }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-body-xs text-on-surface-secondary", children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", disabled: disabled, variant: "primary", size: "sm", onClick: handleBrowse, children: "Browse Files" })] })), state === "uploading" && uploadingFile && ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center gap-4", "aria-live": "polite", "aria-atomic": "true", children: [(0, jsx_runtime_1.jsx)(FileUploadIcons_1.FileTypeIcon, { type: (0, FileUploadIcons_1.getFileType)(uploadingFile.name), "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full max-w-xs flex-col gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-body-sm font-medium text-on-surface-body truncate", children: uploadingFile.name }), (0, jsx_runtime_1.jsxs)("span", { className: "text-body-xs font-medium text-on-surface-muted ml-2 shrink-0", "aria-label": `Upload progress: ${Math.round(uploadingFile.progress)} percent`, children: [Math.round(uploadingFile.progress), "%"] })] }), (0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { value: uploadingFile.progress, size: "sm", showPercentage: false, "aria-label": `Uploading ${uploadingFile.name}` })] })] })), state === "success" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", role: "status", children: [(0, jsx_runtime_1.jsx)(FileUploadIcons_1.UploadStateIcon, { state: "success", size: 56, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center gap-1", children: (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold text-grey-800", children: "Document Uploaded Successfully" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClear, className: "text-body-xs font-semibold text-primary-500 cursor-pointer hover:text-primary-400", children: "Clear Upload" })] })), state === "error" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-4", role: "alert", children: [(0, jsx_runtime_1.jsx)(FileUploadIcons_1.UploadStateIcon, { state: "error", size: 56, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-sm font-semibold text-grey-800", children: "Failed to Upload" }), errorMessage && ((0, jsx_runtime_1.jsx)("p", { className: "text-body-xs text-on-surface-secondary", children: errorMessage }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onRetry, className: "text-body-xs font-semibold text-primary-500 cursor-pointer hover:text-primary-400", children: "Try Again" })] }))] }));
+});
+exports.FileUploadDropZone.displayName = "FileUploadDropZone";

package/dist/components/FileUpload/FileUploadDropZone.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useCallback } from "react";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../Button/index.js";
+import { ProgressBar } from "../ProgressBar/index.js";
+import { FileTypeIcon, UploadStateIcon, getFileType } from "./FileUploadIcons.js";
+// ─── Component ───────────────────────────────────────────────────
+export const FileUploadDropZone = forwardRef(({ state: controlledState, description, accept, multiple = false, disabled = false, uploadingFile, errorMessage, onFilesSelected, onClear, onRetry, className, ...rest }, ref) => {
+    const inputRef = useRef(null);
+    const [dragCounter, setDragCounter] = useState(0);
+    // Derive state: if dragging and state is default, show dragging
+    const isDragging = dragCounter > 0;
+    const state = isDragging && (controlledState === "default" || !controlledState)
+        ? "dragging"
+        : (controlledState ?? "default");
+    const handleBrowse = () => {
+        if (!disabled)
+            inputRef.current?.click();
+    };
+    const handleFileChange = (e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            onFilesSelected?.(e.target.files);
+            // Reset the input so the same file can be re-selected
+            e.target.value = "";
+        }
+    };
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter((c) => c + 1);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter((c) => c - 1);
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragCounter(0);
+        if (!disabled && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            onFilesSelected?.(e.dataTransfer.files);
+        }
+    }, [onFilesSelected, disabled]);
+    return (_jsxs("div", { ref: ref, role: "region", "aria-label": "File upload dropzone", className: cn("flex flex-col items-center justify-center rounded-xl p-4 sm:p-8 transition-colors", state === "dragging"
+            ? "border-2 border-dashed border-primary-400 bg-primary-50/10"
+            : state === "uploading" || state === "success" || state === "error"
+                ? "border border-grey-200 bg-surface"
+                : "border-2 border-dashed border-control-border bg-surface", className), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, ...rest, children: [_jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, disabled: disabled, onChange: handleFileChange, className: "sr-only", tabIndex: -1, "aria-label": multiple ? "Choose files to upload" : "Choose file to upload" }), (state === "default" || state === "dragging") && (_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx(UploadStateIcon, { state: "default", size: 56, "aria-hidden": "true" }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsxs("p", { className: "text-body-sm font-medium text-on-surface-secondary", children: ["Click to upload ", _jsx("span", { className: "text-on-surface-secondary", children: "or drag and drop" })] }), description && (_jsx("p", { className: "text-body-xs text-on-surface-secondary", children: description }))] }), _jsx(Button, { type: "button", disabled: disabled, variant: "primary", size: "sm", onClick: handleBrowse, children: "Browse Files" })] })), state === "uploading" && uploadingFile && (_jsxs("div", { className: "flex w-full flex-col items-center gap-4", "aria-live": "polite", "aria-atomic": "true", children: [_jsx(FileTypeIcon, { type: getFileType(uploadingFile.name), "aria-hidden": "true" }), _jsxs("div", { className: "flex w-full max-w-xs flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-body-sm font-medium text-on-surface-body truncate", children: uploadingFile.name }), _jsxs("span", { className: "text-body-xs font-medium text-on-surface-muted ml-2 shrink-0", "aria-label": `Upload progress: ${Math.round(uploadingFile.progress)} percent`, children: [Math.round(uploadingFile.progress), "%"] })] }), _jsx(ProgressBar, { value: uploadingFile.progress, size: "sm", showPercentage: false, "aria-label": `Uploading ${uploadingFile.name}` })] })] })), state === "success" && (_jsxs("div", { className: "flex flex-col items-center gap-4", role: "status", children: [_jsx(UploadStateIcon, { state: "success", size: 56, "aria-hidden": "true" }), _jsx("div", { className: "flex flex-col items-center gap-1", children: _jsx("p", { className: "text-body-sm font-semibold text-grey-800", children: "Document Uploaded Successfully" }) }), _jsx("button", { type: "button", onClick: onClear, className: "text-body-xs font-semibold text-primary-500 cursor-pointer hover:text-primary-400", children: "Clear Upload" })] })), state === "error" && (_jsxs("div", { className: "flex flex-col items-center gap-4", role: "alert", children: [_jsx(UploadStateIcon, { state: "error", size: 56, "aria-hidden": "true" }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("p", { className: "text-body-sm font-semibold text-grey-800", children: "Failed to Upload" }), errorMessage && (_jsx("p", { className: "text-body-xs text-on-surface-secondary", children: errorMessage }))] }), _jsx("button", { type: "button", onClick: onRetry, className: "text-body-xs font-semibold text-primary-500 cursor-pointer hover:text-primary-400", children: "Try Again" })] }))] }));
+});
+FileUploadDropZone.displayName = "FileUploadDropZone";

package/dist/components/FileUpload/FileUploadIcons.cjs

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileTypeIcon = FileTypeIcon;
+exports.UploadStateIcon = UploadStateIcon;
+exports.getFileType = getFileType;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../utils/cn.cjs");
+// ─── SVG Data ────────────────────────────────────────────────────
+// File type SVGs (24×24) from icon-assets/filetypes/
+// Each is a document icon with a colored label bar in the lower half.
+const fileTypeSvgs = {
+    pdf: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#CC400C"/><path d="M4.6637 17.9091V12.0909H6.84551C7.29248 12.0909 7.66748 12.1742 7.97051 12.3409C8.27544 12.5075 8.50555 12.7367 8.66086 13.0284C8.81805 13.3182 8.89665 13.6477 8.89665 14.017C8.89665 14.3901 8.81805 14.7216 8.66086 15.0113C8.50366 15.3011 8.27165 15.5293 7.96483 15.696C7.65801 15.8608 7.28017 15.9432 6.83131 15.9432H5.38529V15.0767H6.68926C6.95063 15.0767 7.16464 15.0312 7.33131 14.9403C7.49798 14.8494 7.62108 14.7244 7.70063 14.5653C7.78207 14.4062 7.82279 14.2235 7.82279 14.017C7.82279 13.8106 7.78207 13.6288 7.70063 13.4716C7.62108 13.3144 7.49703 13.1922 7.32847 13.1051C7.1618 13.0161 6.94684 12.9716 6.68358 12.9716H5.71767V17.9091H4.6637Z" fill="white"/><path d="M11.7837 17.9091H9.81213V12.0909H11.8235C12.4011 12.0909 12.8974 12.2074 13.3121 12.4403C13.7288 12.6714 14.0489 13.0038 14.2724 13.4375C14.4958 13.8712 14.6076 14.3901 14.6076 14.9943C14.6076 15.6004 14.4949 16.1212 14.2695 16.5568C14.046 16.9924 13.7231 17.3267 13.3008 17.5596C12.8803 17.7926 12.3746 17.9091 11.7837 17.9091ZM10.8661 16.9971H11.7326C12.1379 16.9971 12.476 16.9233 12.7468 16.7755C13.0176 16.6259 13.2212 16.4034 13.3576 16.1079C13.494 15.8106 13.5621 15.4394 13.5621 14.9943C13.5621 14.5492 13.494 14.1799 13.3576 13.8863C13.2212 13.5909 13.0195 13.3702 12.7525 13.2244C12.4873 13.0767 12.1578 13.0028 11.7638 13.0028H10.8661V16.9971Z" fill="white"/><path d="M15.609 17.9091V12.0909H19.3363V12.9744H16.663V14.5539H19.0806V15.4375H16.663V17.9091H15.609Z" fill="white"/>`,
+    png: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#1671D9"/><path d="M4.01527 18V12.1818H6.19709C6.64406 12.1818 7.01906 12.2652 7.32209 12.4318C7.62701 12.5985 7.85713 12.8277 8.01243 13.1193C8.16963 13.4091 8.24822 13.7386 8.24822 14.108C8.24822 14.4811 8.16963 14.8125 8.01243 15.1023C7.85523 15.392 7.62322 15.6203 7.31641 15.7869C7.00959 15.9517 6.63175 16.0341 6.18288 16.0341H4.73686V15.1676H6.04084C6.3022 15.1676 6.51622 15.1222 6.68288 15.0312C6.84955 14.9403 6.97266 14.8153 7.0522 14.6562C7.13364 14.4972 7.17436 14.3144 7.17436 14.108C7.17436 13.9015 7.13364 13.7197 7.0522 13.5625C6.97266 13.4053 6.8486 13.2831 6.68004 13.196C6.51338 13.107 6.29841 13.0625 6.03516 13.0625H5.06925V18H4.01527ZM13.945 12.1818V18H13.0075L10.266 14.0369H10.2177V18H9.16371V12.1818H10.1069L12.8455 16.1477H12.8967V12.1818H13.945ZM18.9911 14.0398C18.9438 13.8864 18.8784 13.7491 18.7951 13.6278C18.7137 13.5047 18.6152 13.3996 18.4996 13.3125C18.386 13.2254 18.2553 13.16 18.1076 13.1165C17.9599 13.071 17.7989 13.0483 17.6246 13.0483C17.3121 13.0483 17.0337 13.1269 16.7894 13.2841C16.5451 13.4413 16.3529 13.6723 16.2127 13.9773C16.0745 14.2803 16.0053 14.6496 16.0053 15.0852C16.0053 15.5246 16.0745 15.8968 16.2127 16.2017C16.351 16.5066 16.5432 16.7386 16.7894 16.8977C17.0356 17.0549 17.3216 17.1335 17.6474 17.1335C17.9428 17.1335 18.1985 17.0767 18.4144 16.9631C18.6322 16.8494 18.7998 16.6884 18.9173 16.4801C19.0347 16.2699 19.0934 16.0237 19.0934 15.7415L19.332 15.7784H17.7525V14.9545H20.1133V15.6534C20.1133 16.1515 20.0072 16.5824 19.7951 16.946C19.583 17.3097 19.2913 17.59 18.9201 17.7869C18.5489 17.982 18.1228 18.0795 17.6417 18.0795C17.1057 18.0795 16.6351 17.9593 16.2298 17.7188C15.8263 17.4763 15.511 17.1326 15.2837 16.6875C15.0584 16.2405 14.9457 15.7102 14.9457 15.0966C14.9457 14.6269 15.012 14.2074 15.1445 13.8381C15.279 13.4688 15.4665 13.1553 15.707 12.8977C15.9476 12.6383 16.2298 12.4413 16.5536 12.3068C16.8775 12.1705 17.2298 12.1023 17.6104 12.1023C17.9324 12.1023 18.2326 12.1496 18.511 12.2443C18.7894 12.3371 19.0366 12.4697 19.2525 12.642C19.4703 12.8144 19.6493 13.0189 19.7894 13.2557C19.9296 13.4924 20.0214 13.7538 20.065 14.0398H18.9911Z" fill="white"/>`,
+    jpg: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#C548F1"/><path d="M7.03338 12.1818H8.07884V16.2727C8.07694 16.6477 7.9974 16.9706 7.8402 17.2415C7.683 17.5104 7.4633 17.7178 7.18111 17.8636C6.9008 18.0076 6.5741 18.0795 6.20099 18.0795C5.86009 18.0795 5.55327 18.0189 5.28054 17.8977C5.00971 17.7746 4.79474 17.5928 4.63565 17.3523C4.47656 17.1117 4.39702 16.8125 4.39702 16.4545H5.44531C5.44721 16.6117 5.4813 16.7472 5.54759 16.8608C5.61577 16.9744 5.70952 17.0616 5.82884 17.1222C5.94815 17.1828 6.08546 17.2131 6.24077 17.2131C6.40933 17.2131 6.55232 17.178 6.66974 17.108C6.78717 17.036 6.87618 16.9299 6.93679 16.7898C6.99929 16.6496 7.03149 16.4773 7.03338 16.2727V12.1818ZM9.2223 18V12.1818H11.4041C11.8511 12.1818 12.2261 12.2652 12.5291 12.4318C12.834 12.5985 13.0642 12.8277 13.2195 13.1193C13.3767 13.4091 13.4553 13.7386 13.4553 14.108C13.4553 14.4811 13.3767 14.8125 13.2195 15.1023C13.0623 15.392 12.8303 15.6203 12.5234 15.7869C12.2166 15.9517 11.8388 16.0341 11.3899 16.0341H9.94389V15.1676H11.2479C11.5092 15.1676 11.7232 15.1222 11.8899 15.0312C12.0566 14.9403 12.1797 14.8153 12.2592 14.6562C12.3407 14.4972 12.3814 14.3144 12.3814 14.108C12.3814 13.9015 12.3407 13.7197 12.2592 13.5625C12.1797 13.4053 12.0556 13.2831 11.8871 13.196C11.7204 13.107 11.5054 13.0625 11.2422 13.0625H10.2763V18H9.2223ZM18.2685 14.0398C18.2211 13.8864 18.1558 13.7491 18.0724 13.6278C17.991 13.5047 17.8925 13.3996 17.777 13.3125C17.6634 13.2254 17.5327 13.16 17.3849 13.1165C17.2372 13.071 17.0762 13.0483 16.902 13.0483C16.5895 13.0483 16.3111 13.1269 16.0668 13.2841C15.8224 13.4413 15.6302 13.6723 15.4901 13.9773C15.3518 14.2803 15.2827 14.6496 15.2827 15.0852C15.2827 15.5246 15.3518 15.8968 15.4901 16.2017C15.6283 16.5066 15.8205 16.7386 16.0668 16.8977C16.313 17.0549 16.599 17.1335 16.9247 17.1335C17.2202 17.1335 17.4759 17.0767 17.6918 16.9631C17.9096 16.8494 18.0772 16.6884 18.1946 16.4801C18.312 16.2699 18.3707 16.0237 18.3707 15.7415L18.6094 15.7784H17.0298V14.9545H19.3906V15.6534C19.3906 16.1515 19.2846 16.5824 19.0724 16.946C18.8603 17.3097 18.5687 17.59 18.1974 17.7869C17.8262 17.982 17.4001 18.0795 16.919 18.0795C16.383 18.0795 15.9124 17.9593 15.5071 17.7188C15.1037 17.4763 14.7884 17.1326 14.5611 16.6875C14.3357 16.2405 14.223 15.7102 14.223 15.0966C14.223 14.6269 14.2893 14.2074 14.4219 13.8381C14.5563 13.4688 14.7438 13.1553 14.9844 12.8977C15.2249 12.6383 15.5071 12.4413 15.831 12.3068C16.1548 12.1705 16.5071 12.1023 16.8878 12.1023C17.2098 12.1023 17.5099 12.1496 17.7884 12.2443C18.0668 12.3371 18.3139 12.4697 18.5298 12.642C18.7476 12.8144 18.9266 13.0189 19.0668 13.2557C19.2069 13.4924 19.2988 13.7538 19.3423 14.0398H18.2685Z" fill="white"/>`,
+    gif: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#F77A4A"/><path d="M10.0107 14.0398C9.96331 13.8864 9.89796 13.7491 9.81463 13.6278C9.73319 13.5047 9.63471 13.3996 9.51918 13.3125C9.40554 13.2254 9.27486 13.16 9.12713 13.1165C8.9794 13.071 8.81842 13.0483 8.64418 13.0483C8.33168 13.0483 8.05327 13.1269 7.80895 13.2841C7.56463 13.4413 7.3724 13.6723 7.23224 13.9773C7.09399 14.2803 7.02486 14.6496 7.02486 15.0852C7.02486 15.5246 7.09399 15.8968 7.23224 16.2017C7.3705 16.5066 7.56274 16.7386 7.80895 16.8977C8.05516 17.0549 8.34115 17.1335 8.6669 17.1335C8.96236 17.1335 9.21804 17.0767 9.43395 16.9631C9.65175 16.8494 9.81937 16.6884 9.93679 16.4801C10.0542 16.2699 10.1129 16.0237 10.1129 15.7415L10.3516 15.7784H8.77202V14.9545H11.1328V15.6534C11.1328 16.1515 11.0268 16.5824 10.8146 16.946C10.6025 17.3097 10.3108 17.59 9.93963 17.7869C9.56842 17.982 9.14228 18.0795 8.66122 18.0795C8.12524 18.0795 7.65459 17.9593 7.24929 17.7188C6.84588 17.4763 6.53054 17.1326 6.30327 16.6875C6.07789 16.2405 5.9652 15.7102 5.9652 15.0966C5.9652 14.6269 6.03149 14.2074 6.16406 13.8381C6.29853 13.4688 6.48603 13.1553 6.72656 12.8977C6.96709 12.6383 7.24929 12.4413 7.57315 12.3068C7.89702 12.1705 8.24929 12.1023 8.62997 12.1023C8.95194 12.1023 9.25213 12.1496 9.53054 12.2443C9.80895 12.3371 10.0561 12.4697 10.272 12.642C10.4898 12.8144 10.6688 13.0189 10.8089 13.2557C10.9491 13.4924 11.041 13.7538 11.0845 14.0398H10.0107ZM13.206 12.1818V18H12.152V12.1818H13.206ZM14.3473 18V12.1818H18.0746V13.0653H15.4013V14.6449H17.8189V15.5284H15.4013V18H14.3473Z" fill="white"/>`,
+    xls: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#0F973D"/><path d="M5.82955 12.1818L7.1108 14.3125H7.15625L8.44318 12.1818H9.64489L7.85227 15.0909L9.6733 18H8.4517L7.15625 15.8835H7.1108L5.81534 18H4.59943L6.4375 15.0909L4.62216 12.1818H5.82955ZM10.4723 18V12.1818H11.5263V17.1165H14.0888V18H10.4723ZM18.1655 13.7812C18.139 13.5331 18.0272 13.34 17.8303 13.2017C17.6352 13.0634 17.3814 12.9943 17.0689 12.9943C16.8492 12.9943 16.6607 13.0275 16.5036 13.0938C16.3464 13.16 16.2261 13.25 16.1428 13.3636C16.0594 13.4773 16.0168 13.607 16.0149 13.7528C16.0149 13.8741 16.0424 13.9792 16.0973 14.0682C16.1541 14.1572 16.2308 14.233 16.3274 14.2955C16.424 14.3561 16.531 14.4072 16.6484 14.4489C16.7659 14.4905 16.8842 14.5256 17.0036 14.554L17.549 14.6903C17.7687 14.7415 17.9799 14.8106 18.1825 14.8977C18.3871 14.9848 18.5698 15.0947 18.7308 15.2273C18.8937 15.3598 19.0225 15.5199 19.1172 15.7074C19.2119 15.8949 19.2592 16.1146 19.2592 16.3665C19.2592 16.7074 19.1721 17.0076 18.9979 17.267C18.8236 17.5246 18.5717 17.7263 18.2422 17.8722C17.9145 18.0161 17.5178 18.0881 17.0518 18.0881C16.5992 18.0881 16.2062 18.018 15.8729 17.8778C15.5414 17.7377 15.282 17.5331 15.0945 17.2642C14.9089 16.9953 14.8085 16.6676 14.7933 16.2812H15.8303C15.8454 16.4839 15.9079 16.6525 16.0178 16.7869C16.1276 16.9214 16.2706 17.0218 16.4467 17.0881C16.6248 17.1544 16.8236 17.1875 17.0433 17.1875C17.2725 17.1875 17.4732 17.1534 17.6456 17.0852C17.8198 17.0152 17.9562 16.9186 18.0547 16.7955C18.1532 16.6705 18.2034 16.5246 18.2053 16.358C18.2034 16.2064 18.1589 16.0814 18.0717 15.983C17.9846 15.8826 17.8625 15.7992 17.7053 15.733C17.55 15.6648 17.3681 15.6042 17.1598 15.5511L16.4979 15.3807C16.0187 15.2576 15.6399 15.071 15.3615 14.821C15.085 14.5691 14.9467 14.2348 14.9467 13.8182C14.9467 13.4754 15.0395 13.1752 15.2251 12.9176C15.4126 12.66 15.6674 12.4602 15.9893 12.3182C16.3113 12.1742 16.6759 12.1023 17.0831 12.1023C17.496 12.1023 17.8577 12.1742 18.1683 12.3182C18.4808 12.4602 18.7261 12.6581 18.9041 12.9119C19.0821 13.1638 19.174 13.4536 19.1797 13.7812H18.1655Z" fill="white"/>`,
+    mp3: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#6D56F8"/><path d="M3.76918 12.1818H5.05895L6.78622 16.3977H6.8544L8.58168 12.1818H9.87145V18H8.86009V14.0028H8.80611L7.19815 17.983H6.44247L4.83452 13.9943H4.78054V18H3.76918V12.1818ZM11.0192 18V12.1818H13.201C13.648 12.1818 14.023 12.2652 14.326 12.4318C14.6309 12.5985 14.861 12.8277 15.0163 13.1193C15.1735 13.4091 15.2521 13.7386 15.2521 14.108C15.2521 14.4811 15.1735 14.8125 15.0163 15.1023C14.8591 15.392 14.6271 15.6203 14.3203 15.7869C14.0135 15.9517 13.6357 16.0341 13.1868 16.0341H11.7408V15.1676H13.0447C13.3061 15.1676 13.5201 15.1222 13.6868 15.0312C13.8535 14.9403 13.9766 14.8153 14.0561 14.6562C14.1375 14.4972 14.1783 14.3144 14.1783 14.108C14.1783 13.9015 14.1375 13.7197 14.0561 13.5625C13.9766 13.4053 13.8525 13.2831 13.6839 13.196C13.5173 13.107 13.3023 13.0625 13.0391 13.0625H12.0732V18H11.0192ZM18.1989 18.0795C17.7898 18.0795 17.4261 18.0095 17.108 17.8693C16.7917 17.7292 16.5417 17.5341 16.358 17.2841C16.1742 17.0341 16.0767 16.7453 16.0653 16.4176H17.1335C17.143 16.5748 17.1951 16.7121 17.2898 16.8295C17.3845 16.9451 17.5104 17.035 17.6676 17.0994C17.8248 17.1638 18.0009 17.196 18.196 17.196C18.4044 17.196 18.589 17.16 18.75 17.0881C18.911 17.0142 19.0369 16.9119 19.1278 16.7812C19.2188 16.6506 19.2633 16.5 19.2614 16.3295C19.2633 16.1534 19.2178 15.9981 19.125 15.8636C19.0322 15.7292 18.8977 15.6241 18.7216 15.5483C18.5473 15.4725 18.3371 15.4347 18.0909 15.4347H17.5767V14.6222H18.0909C18.2936 14.6222 18.4706 14.5871 18.6222 14.517C18.7756 14.447 18.8958 14.3485 18.983 14.2216C19.0701 14.0928 19.1127 13.9441 19.1108 13.7756C19.1127 13.6108 19.0758 13.4678 19 13.3466C18.9261 13.2235 18.821 13.1278 18.6847 13.0597C18.5502 12.9915 18.392 12.9574 18.2102 12.9574C18.0322 12.9574 17.8674 12.9896 17.7159 13.054C17.5644 13.1184 17.4422 13.2102 17.3494 13.3295C17.2566 13.447 17.2074 13.5871 17.2017 13.75H16.1875C16.1951 13.4242 16.2888 13.1383 16.4688 12.892C16.6506 12.6439 16.893 12.4508 17.196 12.3125C17.4991 12.1723 17.839 12.1023 18.2159 12.1023C18.6042 12.1023 18.9413 12.1752 19.2273 12.321C19.5152 12.465 19.7377 12.6591 19.8949 12.9034C20.0521 13.1477 20.1307 13.4176 20.1307 13.7131C20.1326 14.0407 20.036 14.3153 19.8409 14.5369C19.6477 14.7585 19.3939 14.9034 19.0795 14.9716V15.017C19.4886 15.0739 19.8021 15.2254 20.0199 15.4716C20.2396 15.7159 20.3485 16.0199 20.3466 16.3835C20.3466 16.7093 20.2538 17.0009 20.0682 17.2585C19.8845 17.5142 19.6307 17.715 19.3068 17.8608C18.9848 18.0066 18.6155 18.0795 18.1989 18.0795Z" fill="white"/>`,
+    generic: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#98A2B3"/>`,
+};
+const uploadStateSvgs = {
+    default: `<circle cx="16" cy="16" r="16" fill="#F0F2F5"/><path d="M12 14.3333C12 12.3083 13.6416 10.6666 15.6667 10.6666C17.4605 10.6666 18.9547 11.9554 19.2714 13.6578C19.3158 13.8965 19.4865 14.0922 19.7169 14.1686C21.0441 14.6088 22 15.8603 22 17.3333C22 19.1743 20.5076 20.6666 18.6667 20.6666C18.2985 20.6666 18 20.9651 18 21.3333C18 21.7015 18.2985 22 18.6667 22C21.244 22 23.3334 19.9106 23.3334 17.3333C23.3334 15.405 22.1642 13.7513 20.4976 13.0397C19.9273 10.9053 17.9812 9.33331 15.6667 9.33331C12.9053 9.33331 10.6667 11.5719 10.6667 14.3333C10.6667 14.4002 10.668 14.4667 10.6706 14.533C9.47367 15.2236 8.66669 16.5169 8.66669 18C8.66669 20.2091 10.4575 22 12.6667 22C13.0349 22 13.3334 21.7015 13.3334 21.3333C13.3334 20.9651 13.0349 20.6666 12.6667 20.6666C11.1939 20.6666 10 19.4727 10 18C10 16.8951 10.6721 15.9456 11.6325 15.5411C11.9103 15.424 12.0751 15.135 12.0341 14.8363C12.0117 14.6722 12 14.5043 12 14.3333Z" fill="#475367"/><path d="M15.5571 17.5017C15.8097 17.2772 16.1903 17.2772 16.4429 17.5017L17.4429 18.3906C17.7181 18.6352 17.7429 19.0566 17.4983 19.3318C17.2843 19.5725 16.935 19.6216 16.6667 19.4664V22.6666C16.6667 23.0348 16.3682 23.3333 16 23.3333C15.6318 23.3333 15.3334 23.0348 15.3334 22.6666V19.4664C15.065 19.6216 14.7157 19.5725 14.5017 19.3318C14.2571 19.0566 14.2819 18.6352 14.5571 18.3906L15.5571 17.5017Z" fill="#475367"/>`,
+    success: `<circle cx="16" cy="16" r="16" fill="#E7F6EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 23.5C20.1421 23.5 23.5 20.1421 23.5 16C23.5 11.8579 20.1421 8.5 16 8.5C11.8579 8.5 8.5 11.8579 8.5 16C8.5 20.1421 11.8579 23.5 16 23.5ZM19.0628 14.9479C19.4022 14.637 19.4254 14.1099 19.1145 13.7705C18.8037 13.4311 18.2766 13.4079 17.9372 13.7188L14.8604 16.5366L14.0628 15.8062C13.7234 15.4953 13.1963 15.5185 12.8855 15.8579C12.5746 16.1973 12.5978 16.7244 12.9372 17.0352L14.2976 18.2812C14.6161 18.5729 15.1047 18.5729 15.4233 18.2812L19.0628 14.9479Z" fill="#0F973D"/>`,
+    warning: `<circle cx="16" cy="16" r="16" fill="#FEF6E7"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.5 16C23.5 20.1421 20.1421 23.5 16 23.5C11.8579 23.5 8.5 20.1421 8.5 16C8.5 11.8579 11.8579 8.5 16 8.5C20.1421 8.5 23.5 11.8579 23.5 16ZM16 11C16.4602 11 16.8333 11.3731 16.8333 11.8333V17.6667C16.8333 18.1269 16.4602 18.5 16 18.5C15.5398 18.5 15.1667 18.1269 15.1667 17.6667L15.1667 11.8333C15.1667 11.3731 15.5398 11 16 11ZM14.9583 19.9583C14.9583 20.5336 15.4247 21 16 21C16.5753 21 17.0417 20.5336 17.0417 19.9583C17.0417 19.383 16.5753 18.9167 16 18.9167C15.4247 18.9167 14.9583 19.383 14.9583 19.9583Z" fill="#F3A218"/>`,
+    error: `<circle cx="16" cy="16" r="16" fill="#FBEAE9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.2054 18.7851L14.4129 10.9364C15.0822 9.68788 16.9178 9.68788 17.5871 10.9364L21.7946 18.7851C22.4164 19.9451 21.5517 21.3333 20.2074 21.3333H11.7926C10.4483 21.3333 9.58363 19.9451 10.2054 18.7851ZM16 12C16.3682 12 16.6667 12.2985 16.6667 12.6667V17.3333C16.6667 17.7015 16.3682 18 16 18C15.6318 18 15.3333 17.7015 15.3333 17.3333V12.6667C15.3333 12.2985 15.6318 12 16 12ZM15.1667 19.1667C15.1667 19.6269 15.5398 20 16 20C16.4602 20 16.8333 19.6269 16.8333 19.1667C16.8333 18.7064 16.4602 18.3333 16 18.3333C15.5398 18.3333 15.1667 18.7064 15.1667 19.1667Z" fill="#D42620"/>`,
+};
+// ─── File Type Icon (24×24) ──────────────────────────────────────
+function FileTypeIcon({ type, className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: (0, cn_1.cn)("shrink-0", className), dangerouslySetInnerHTML: { __html: fileTypeSvgs[type] } }));
+}
+// ─── Upload State Icon (32×32, scalable) ─────────────────────────
+function UploadStateIcon({ state, size = 32, className, }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: (0, cn_1.cn)("shrink-0", className), dangerouslySetInnerHTML: { __html: uploadStateSvgs[state] } }));
+}
+// ─── Helper: filename → FileTypeName ─────────────────────────────
+function getFileType(filename) {
+    const ext = filename.split(".").pop()?.toLowerCase();
+    switch (ext) {
+        case "png":
+            return "png";
+        case "jpg":
+        case "jpeg":
+            return "jpg";
+        case "gif":
+            return "gif";
+        case "xls":
+        case "xlsx":
+            return "xls";
+        case "mp3":
+            return "mp3";
+        case "pdf":
+            return "pdf";
+        default:
+            return "generic";
+    }
+}

package/dist/components/FileUpload/FileUploadIcons.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+// ─── SVG Data ────────────────────────────────────────────────────
+// File type SVGs (24×24) from icon-assets/filetypes/
+// Each is a document icon with a colored label bar in the lower half.
+const fileTypeSvgs = {
+    pdf: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#CC400C"/><path d="M4.6637 17.9091V12.0909H6.84551C7.29248 12.0909 7.66748 12.1742 7.97051 12.3409C8.27544 12.5075 8.50555 12.7367 8.66086 13.0284C8.81805 13.3182 8.89665 13.6477 8.89665 14.017C8.89665 14.3901 8.81805 14.7216 8.66086 15.0113C8.50366 15.3011 8.27165 15.5293 7.96483 15.696C7.65801 15.8608 7.28017 15.9432 6.83131 15.9432H5.38529V15.0767H6.68926C6.95063 15.0767 7.16464 15.0312 7.33131 14.9403C7.49798 14.8494 7.62108 14.7244 7.70063 14.5653C7.78207 14.4062 7.82279 14.2235 7.82279 14.017C7.82279 13.8106 7.78207 13.6288 7.70063 13.4716C7.62108 13.3144 7.49703 13.1922 7.32847 13.1051C7.1618 13.0161 6.94684 12.9716 6.68358 12.9716H5.71767V17.9091H4.6637Z" fill="white"/><path d="M11.7837 17.9091H9.81213V12.0909H11.8235C12.4011 12.0909 12.8974 12.2074 13.3121 12.4403C13.7288 12.6714 14.0489 13.0038 14.2724 13.4375C14.4958 13.8712 14.6076 14.3901 14.6076 14.9943C14.6076 15.6004 14.4949 16.1212 14.2695 16.5568C14.046 16.9924 13.7231 17.3267 13.3008 17.5596C12.8803 17.7926 12.3746 17.9091 11.7837 17.9091ZM10.8661 16.9971H11.7326C12.1379 16.9971 12.476 16.9233 12.7468 16.7755C13.0176 16.6259 13.2212 16.4034 13.3576 16.1079C13.494 15.8106 13.5621 15.4394 13.5621 14.9943C13.5621 14.5492 13.494 14.1799 13.3576 13.8863C13.2212 13.5909 13.0195 13.3702 12.7525 13.2244C12.4873 13.0767 12.1578 13.0028 11.7638 13.0028H10.8661V16.9971Z" fill="white"/><path d="M15.609 17.9091V12.0909H19.3363V12.9744H16.663V14.5539H19.0806V15.4375H16.663V17.9091H15.609Z" fill="white"/>`,
+    png: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#1671D9"/><path d="M4.01527 18V12.1818H6.19709C6.64406 12.1818 7.01906 12.2652 7.32209 12.4318C7.62701 12.5985 7.85713 12.8277 8.01243 13.1193C8.16963 13.4091 8.24822 13.7386 8.24822 14.108C8.24822 14.4811 8.16963 14.8125 8.01243 15.1023C7.85523 15.392 7.62322 15.6203 7.31641 15.7869C7.00959 15.9517 6.63175 16.0341 6.18288 16.0341H4.73686V15.1676H6.04084C6.3022 15.1676 6.51622 15.1222 6.68288 15.0312C6.84955 14.9403 6.97266 14.8153 7.0522 14.6562C7.13364 14.4972 7.17436 14.3144 7.17436 14.108C7.17436 13.9015 7.13364 13.7197 7.0522 13.5625C6.97266 13.4053 6.8486 13.2831 6.68004 13.196C6.51338 13.107 6.29841 13.0625 6.03516 13.0625H5.06925V18H4.01527ZM13.945 12.1818V18H13.0075L10.266 14.0369H10.2177V18H9.16371V12.1818H10.1069L12.8455 16.1477H12.8967V12.1818H13.945ZM18.9911 14.0398C18.9438 13.8864 18.8784 13.7491 18.7951 13.6278C18.7137 13.5047 18.6152 13.3996 18.4996 13.3125C18.386 13.2254 18.2553 13.16 18.1076 13.1165C17.9599 13.071 17.7989 13.0483 17.6246 13.0483C17.3121 13.0483 17.0337 13.1269 16.7894 13.2841C16.5451 13.4413 16.3529 13.6723 16.2127 13.9773C16.0745 14.2803 16.0053 14.6496 16.0053 15.0852C16.0053 15.5246 16.0745 15.8968 16.2127 16.2017C16.351 16.5066 16.5432 16.7386 16.7894 16.8977C17.0356 17.0549 17.3216 17.1335 17.6474 17.1335C17.9428 17.1335 18.1985 17.0767 18.4144 16.9631C18.6322 16.8494 18.7998 16.6884 18.9173 16.4801C19.0347 16.2699 19.0934 16.0237 19.0934 15.7415L19.332 15.7784H17.7525V14.9545H20.1133V15.6534C20.1133 16.1515 20.0072 16.5824 19.7951 16.946C19.583 17.3097 19.2913 17.59 18.9201 17.7869C18.5489 17.982 18.1228 18.0795 17.6417 18.0795C17.1057 18.0795 16.6351 17.9593 16.2298 17.7188C15.8263 17.4763 15.511 17.1326 15.2837 16.6875C15.0584 16.2405 14.9457 15.7102 14.9457 15.0966C14.9457 14.6269 15.012 14.2074 15.1445 13.8381C15.279 13.4688 15.4665 13.1553 15.707 12.8977C15.9476 12.6383 16.2298 12.4413 16.5536 12.3068C16.8775 12.1705 17.2298 12.1023 17.6104 12.1023C17.9324 12.1023 18.2326 12.1496 18.511 12.2443C18.7894 12.3371 19.0366 12.4697 19.2525 12.642C19.4703 12.8144 19.6493 13.0189 19.7894 13.2557C19.9296 13.4924 20.0214 13.7538 20.065 14.0398H18.9911Z" fill="white"/>`,
+    jpg: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#C548F1"/><path d="M7.03338 12.1818H8.07884V16.2727C8.07694 16.6477 7.9974 16.9706 7.8402 17.2415C7.683 17.5104 7.4633 17.7178 7.18111 17.8636C6.9008 18.0076 6.5741 18.0795 6.20099 18.0795C5.86009 18.0795 5.55327 18.0189 5.28054 17.8977C5.00971 17.7746 4.79474 17.5928 4.63565 17.3523C4.47656 17.1117 4.39702 16.8125 4.39702 16.4545H5.44531C5.44721 16.6117 5.4813 16.7472 5.54759 16.8608C5.61577 16.9744 5.70952 17.0616 5.82884 17.1222C5.94815 17.1828 6.08546 17.2131 6.24077 17.2131C6.40933 17.2131 6.55232 17.178 6.66974 17.108C6.78717 17.036 6.87618 16.9299 6.93679 16.7898C6.99929 16.6496 7.03149 16.4773 7.03338 16.2727V12.1818ZM9.2223 18V12.1818H11.4041C11.8511 12.1818 12.2261 12.2652 12.5291 12.4318C12.834 12.5985 13.0642 12.8277 13.2195 13.1193C13.3767 13.4091 13.4553 13.7386 13.4553 14.108C13.4553 14.4811 13.3767 14.8125 13.2195 15.1023C13.0623 15.392 12.8303 15.6203 12.5234 15.7869C12.2166 15.9517 11.8388 16.0341 11.3899 16.0341H9.94389V15.1676H11.2479C11.5092 15.1676 11.7232 15.1222 11.8899 15.0312C12.0566 14.9403 12.1797 14.8153 12.2592 14.6562C12.3407 14.4972 12.3814 14.3144 12.3814 14.108C12.3814 13.9015 12.3407 13.7197 12.2592 13.5625C12.1797 13.4053 12.0556 13.2831 11.8871 13.196C11.7204 13.107 11.5054 13.0625 11.2422 13.0625H10.2763V18H9.2223ZM18.2685 14.0398C18.2211 13.8864 18.1558 13.7491 18.0724 13.6278C17.991 13.5047 17.8925 13.3996 17.777 13.3125C17.6634 13.2254 17.5327 13.16 17.3849 13.1165C17.2372 13.071 17.0762 13.0483 16.902 13.0483C16.5895 13.0483 16.3111 13.1269 16.0668 13.2841C15.8224 13.4413 15.6302 13.6723 15.4901 13.9773C15.3518 14.2803 15.2827 14.6496 15.2827 15.0852C15.2827 15.5246 15.3518 15.8968 15.4901 16.2017C15.6283 16.5066 15.8205 16.7386 16.0668 16.8977C16.313 17.0549 16.599 17.1335 16.9247 17.1335C17.2202 17.1335 17.4759 17.0767 17.6918 16.9631C17.9096 16.8494 18.0772 16.6884 18.1946 16.4801C18.312 16.2699 18.3707 16.0237 18.3707 15.7415L18.6094 15.7784H17.0298V14.9545H19.3906V15.6534C19.3906 16.1515 19.2846 16.5824 19.0724 16.946C18.8603 17.3097 18.5687 17.59 18.1974 17.7869C17.8262 17.982 17.4001 18.0795 16.919 18.0795C16.383 18.0795 15.9124 17.9593 15.5071 17.7188C15.1037 17.4763 14.7884 17.1326 14.5611 16.6875C14.3357 16.2405 14.223 15.7102 14.223 15.0966C14.223 14.6269 14.2893 14.2074 14.4219 13.8381C14.5563 13.4688 14.7438 13.1553 14.9844 12.8977C15.2249 12.6383 15.5071 12.4413 15.831 12.3068C16.1548 12.1705 16.5071 12.1023 16.8878 12.1023C17.2098 12.1023 17.5099 12.1496 17.7884 12.2443C18.0668 12.3371 18.3139 12.4697 18.5298 12.642C18.7476 12.8144 18.9266 13.0189 19.0668 13.2557C19.2069 13.4924 19.2988 13.7538 19.3423 14.0398H18.2685Z" fill="white"/>`,
+    gif: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#F77A4A"/><path d="M10.0107 14.0398C9.96331 13.8864 9.89796 13.7491 9.81463 13.6278C9.73319 13.5047 9.63471 13.3996 9.51918 13.3125C9.40554 13.2254 9.27486 13.16 9.12713 13.1165C8.9794 13.071 8.81842 13.0483 8.64418 13.0483C8.33168 13.0483 8.05327 13.1269 7.80895 13.2841C7.56463 13.4413 7.3724 13.6723 7.23224 13.9773C7.09399 14.2803 7.02486 14.6496 7.02486 15.0852C7.02486 15.5246 7.09399 15.8968 7.23224 16.2017C7.3705 16.5066 7.56274 16.7386 7.80895 16.8977C8.05516 17.0549 8.34115 17.1335 8.6669 17.1335C8.96236 17.1335 9.21804 17.0767 9.43395 16.9631C9.65175 16.8494 9.81937 16.6884 9.93679 16.4801C10.0542 16.2699 10.1129 16.0237 10.1129 15.7415L10.3516 15.7784H8.77202V14.9545H11.1328V15.6534C11.1328 16.1515 11.0268 16.5824 10.8146 16.946C10.6025 17.3097 10.3108 17.59 9.93963 17.7869C9.56842 17.982 9.14228 18.0795 8.66122 18.0795C8.12524 18.0795 7.65459 17.9593 7.24929 17.7188C6.84588 17.4763 6.53054 17.1326 6.30327 16.6875C6.07789 16.2405 5.9652 15.7102 5.9652 15.0966C5.9652 14.6269 6.03149 14.2074 6.16406 13.8381C6.29853 13.4688 6.48603 13.1553 6.72656 12.8977C6.96709 12.6383 7.24929 12.4413 7.57315 12.3068C7.89702 12.1705 8.24929 12.1023 8.62997 12.1023C8.95194 12.1023 9.25213 12.1496 9.53054 12.2443C9.80895 12.3371 10.0561 12.4697 10.272 12.642C10.4898 12.8144 10.6688 13.0189 10.8089 13.2557C10.9491 13.4924 11.041 13.7538 11.0845 14.0398H10.0107ZM13.206 12.1818V18H12.152V12.1818H13.206ZM14.3473 18V12.1818H18.0746V13.0653H15.4013V14.6449H17.8189V15.5284H15.4013V18H14.3473Z" fill="white"/>`,
+    xls: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#0F973D"/><path d="M5.82955 12.1818L7.1108 14.3125H7.15625L8.44318 12.1818H9.64489L7.85227 15.0909L9.6733 18H8.4517L7.15625 15.8835H7.1108L5.81534 18H4.59943L6.4375 15.0909L4.62216 12.1818H5.82955ZM10.4723 18V12.1818H11.5263V17.1165H14.0888V18H10.4723ZM18.1655 13.7812C18.139 13.5331 18.0272 13.34 17.8303 13.2017C17.6352 13.0634 17.3814 12.9943 17.0689 12.9943C16.8492 12.9943 16.6607 13.0275 16.5036 13.0938C16.3464 13.16 16.2261 13.25 16.1428 13.3636C16.0594 13.4773 16.0168 13.607 16.0149 13.7528C16.0149 13.8741 16.0424 13.9792 16.0973 14.0682C16.1541 14.1572 16.2308 14.233 16.3274 14.2955C16.424 14.3561 16.531 14.4072 16.6484 14.4489C16.7659 14.4905 16.8842 14.5256 17.0036 14.554L17.549 14.6903C17.7687 14.7415 17.9799 14.8106 18.1825 14.8977C18.3871 14.9848 18.5698 15.0947 18.7308 15.2273C18.8937 15.3598 19.0225 15.5199 19.1172 15.7074C19.2119 15.8949 19.2592 16.1146 19.2592 16.3665C19.2592 16.7074 19.1721 17.0076 18.9979 17.267C18.8236 17.5246 18.5717 17.7263 18.2422 17.8722C17.9145 18.0161 17.5178 18.0881 17.0518 18.0881C16.5992 18.0881 16.2062 18.018 15.8729 17.8778C15.5414 17.7377 15.282 17.5331 15.0945 17.2642C14.9089 16.9953 14.8085 16.6676 14.7933 16.2812H15.8303C15.8454 16.4839 15.9079 16.6525 16.0178 16.7869C16.1276 16.9214 16.2706 17.0218 16.4467 17.0881C16.6248 17.1544 16.8236 17.1875 17.0433 17.1875C17.2725 17.1875 17.4732 17.1534 17.6456 17.0852C17.8198 17.0152 17.9562 16.9186 18.0547 16.7955C18.1532 16.6705 18.2034 16.5246 18.2053 16.358C18.2034 16.2064 18.1589 16.0814 18.0717 15.983C17.9846 15.8826 17.8625 15.7992 17.7053 15.733C17.55 15.6648 17.3681 15.6042 17.1598 15.5511L16.4979 15.3807C16.0187 15.2576 15.6399 15.071 15.3615 14.821C15.085 14.5691 14.9467 14.2348 14.9467 13.8182C14.9467 13.4754 15.0395 13.1752 15.2251 12.9176C15.4126 12.66 15.6674 12.4602 15.9893 12.3182C16.3113 12.1742 16.6759 12.1023 17.0831 12.1023C17.496 12.1023 17.8577 12.1742 18.1683 12.3182C18.4808 12.4602 18.7261 12.6581 18.9041 12.9119C19.0821 13.1638 19.174 13.4536 19.1797 13.7812H18.1655Z" fill="white"/>`,
+    mp3: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#6D56F8"/><path d="M3.76918 12.1818H5.05895L6.78622 16.3977H6.8544L8.58168 12.1818H9.87145V18H8.86009V14.0028H8.80611L7.19815 17.983H6.44247L4.83452 13.9943H4.78054V18H3.76918V12.1818ZM11.0192 18V12.1818H13.201C13.648 12.1818 14.023 12.2652 14.326 12.4318C14.6309 12.5985 14.861 12.8277 15.0163 13.1193C15.1735 13.4091 15.2521 13.7386 15.2521 14.108C15.2521 14.4811 15.1735 14.8125 15.0163 15.1023C14.8591 15.392 14.6271 15.6203 14.3203 15.7869C14.0135 15.9517 13.6357 16.0341 13.1868 16.0341H11.7408V15.1676H13.0447C13.3061 15.1676 13.5201 15.1222 13.6868 15.0312C13.8535 14.9403 13.9766 14.8153 14.0561 14.6562C14.1375 14.4972 14.1783 14.3144 14.1783 14.108C14.1783 13.9015 14.1375 13.7197 14.0561 13.5625C13.9766 13.4053 13.8525 13.2831 13.6839 13.196C13.5173 13.107 13.3023 13.0625 13.0391 13.0625H12.0732V18H11.0192ZM18.1989 18.0795C17.7898 18.0795 17.4261 18.0095 17.108 17.8693C16.7917 17.7292 16.5417 17.5341 16.358 17.2841C16.1742 17.0341 16.0767 16.7453 16.0653 16.4176H17.1335C17.143 16.5748 17.1951 16.7121 17.2898 16.8295C17.3845 16.9451 17.5104 17.035 17.6676 17.0994C17.8248 17.1638 18.0009 17.196 18.196 17.196C18.4044 17.196 18.589 17.16 18.75 17.0881C18.911 17.0142 19.0369 16.9119 19.1278 16.7812C19.2188 16.6506 19.2633 16.5 19.2614 16.3295C19.2633 16.1534 19.2178 15.9981 19.125 15.8636C19.0322 15.7292 18.8977 15.6241 18.7216 15.5483C18.5473 15.4725 18.3371 15.4347 18.0909 15.4347H17.5767V14.6222H18.0909C18.2936 14.6222 18.4706 14.5871 18.6222 14.517C18.7756 14.447 18.8958 14.3485 18.983 14.2216C19.0701 14.0928 19.1127 13.9441 19.1108 13.7756C19.1127 13.6108 19.0758 13.4678 19 13.3466C18.9261 13.2235 18.821 13.1278 18.6847 13.0597C18.5502 12.9915 18.392 12.9574 18.2102 12.9574C18.0322 12.9574 17.8674 12.9896 17.7159 13.054C17.5644 13.1184 17.4422 13.2102 17.3494 13.3295C17.2566 13.447 17.2074 13.5871 17.2017 13.75H16.1875C16.1951 13.4242 16.2888 13.1383 16.4688 12.892C16.6506 12.6439 16.893 12.4508 17.196 12.3125C17.4991 12.1723 17.839 12.1023 18.2159 12.1023C18.6042 12.1023 18.9413 12.1752 19.2273 12.321C19.5152 12.465 19.7377 12.6591 19.8949 12.9034C20.0521 13.1477 20.1307 13.4176 20.1307 13.7131C20.1326 14.0407 20.036 14.3153 19.8409 14.5369C19.6477 14.7585 19.3939 14.9034 19.0795 14.9716V15.017C19.4886 15.0739 19.8021 15.2254 20.0199 15.4716C20.2396 15.7159 20.3485 16.0199 20.3466 16.3835C20.3466 16.7093 20.2538 17.0009 20.0682 17.2585C19.8845 17.5142 19.6307 17.715 19.3068 17.8608C18.9848 18.0066 18.6155 18.0795 18.1989 18.0795Z" fill="white"/>`,
+    generic: `<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C2.44772 0 2 0.447716 2 1V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V4L18 0H3Z" fill="#E4E7EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 0V4H22L18 0Z" fill="#98A2B3"/><rect x="1" y="10" width="22" height="10" rx="1" fill="#98A2B3"/>`,
+};
+const uploadStateSvgs = {
+    default: `<circle cx="16" cy="16" r="16" fill="#F0F2F5"/><path d="M12 14.3333C12 12.3083 13.6416 10.6666 15.6667 10.6666C17.4605 10.6666 18.9547 11.9554 19.2714 13.6578C19.3158 13.8965 19.4865 14.0922 19.7169 14.1686C21.0441 14.6088 22 15.8603 22 17.3333C22 19.1743 20.5076 20.6666 18.6667 20.6666C18.2985 20.6666 18 20.9651 18 21.3333C18 21.7015 18.2985 22 18.6667 22C21.244 22 23.3334 19.9106 23.3334 17.3333C23.3334 15.405 22.1642 13.7513 20.4976 13.0397C19.9273 10.9053 17.9812 9.33331 15.6667 9.33331C12.9053 9.33331 10.6667 11.5719 10.6667 14.3333C10.6667 14.4002 10.668 14.4667 10.6706 14.533C9.47367 15.2236 8.66669 16.5169 8.66669 18C8.66669 20.2091 10.4575 22 12.6667 22C13.0349 22 13.3334 21.7015 13.3334 21.3333C13.3334 20.9651 13.0349 20.6666 12.6667 20.6666C11.1939 20.6666 10 19.4727 10 18C10 16.8951 10.6721 15.9456 11.6325 15.5411C11.9103 15.424 12.0751 15.135 12.0341 14.8363C12.0117 14.6722 12 14.5043 12 14.3333Z" fill="#475367"/><path d="M15.5571 17.5017C15.8097 17.2772 16.1903 17.2772 16.4429 17.5017L17.4429 18.3906C17.7181 18.6352 17.7429 19.0566 17.4983 19.3318C17.2843 19.5725 16.935 19.6216 16.6667 19.4664V22.6666C16.6667 23.0348 16.3682 23.3333 16 23.3333C15.6318 23.3333 15.3334 23.0348 15.3334 22.6666V19.4664C15.065 19.6216 14.7157 19.5725 14.5017 19.3318C14.2571 19.0566 14.2819 18.6352 14.5571 18.3906L15.5571 17.5017Z" fill="#475367"/>`,
+    success: `<circle cx="16" cy="16" r="16" fill="#E7F6EC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 23.5C20.1421 23.5 23.5 20.1421 23.5 16C23.5 11.8579 20.1421 8.5 16 8.5C11.8579 8.5 8.5 11.8579 8.5 16C8.5 20.1421 11.8579 23.5 16 23.5ZM19.0628 14.9479C19.4022 14.637 19.4254 14.1099 19.1145 13.7705C18.8037 13.4311 18.2766 13.4079 17.9372 13.7188L14.8604 16.5366L14.0628 15.8062C13.7234 15.4953 13.1963 15.5185 12.8855 15.8579C12.5746 16.1973 12.5978 16.7244 12.9372 17.0352L14.2976 18.2812C14.6161 18.5729 15.1047 18.5729 15.4233 18.2812L19.0628 14.9479Z" fill="#0F973D"/>`,
+    warning: `<circle cx="16" cy="16" r="16" fill="#FEF6E7"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.5 16C23.5 20.1421 20.1421 23.5 16 23.5C11.8579 23.5 8.5 20.1421 8.5 16C8.5 11.8579 11.8579 8.5 16 8.5C20.1421 8.5 23.5 11.8579 23.5 16ZM16 11C16.4602 11 16.8333 11.3731 16.8333 11.8333V17.6667C16.8333 18.1269 16.4602 18.5 16 18.5C15.5398 18.5 15.1667 18.1269 15.1667 17.6667L15.1667 11.8333C15.1667 11.3731 15.5398 11 16 11ZM14.9583 19.9583C14.9583 20.5336 15.4247 21 16 21C16.5753 21 17.0417 20.5336 17.0417 19.9583C17.0417 19.383 16.5753 18.9167 16 18.9167C15.4247 18.9167 14.9583 19.383 14.9583 19.9583Z" fill="#F3A218"/>`,
+    error: `<circle cx="16" cy="16" r="16" fill="#FBEAE9"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.2054 18.7851L14.4129 10.9364C15.0822 9.68788 16.9178 9.68788 17.5871 10.9364L21.7946 18.7851C22.4164 19.9451 21.5517 21.3333 20.2074 21.3333H11.7926C10.4483 21.3333 9.58363 19.9451 10.2054 18.7851ZM16 12C16.3682 12 16.6667 12.2985 16.6667 12.6667V17.3333C16.6667 17.7015 16.3682 18 16 18C15.6318 18 15.3333 17.7015 15.3333 17.3333V12.6667C15.3333 12.2985 15.6318 12 16 12ZM15.1667 19.1667C15.1667 19.6269 15.5398 20 16 20C16.4602 20 16.8333 19.6269 16.8333 19.1667C16.8333 18.7064 16.4602 18.3333 16 18.3333C15.5398 18.3333 15.1667 18.7064 15.1667 19.1667Z" fill="#D42620"/>`,
+};
+// ─── File Type Icon (24×24) ──────────────────────────────────────
+export function FileTypeIcon({ type, className }) {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("shrink-0", className), dangerouslySetInnerHTML: { __html: fileTypeSvgs[type] } }));
+}
+// ─── Upload State Icon (32×32, scalable) ─────────────────────────
+export function UploadStateIcon({ state, size = 32, className, }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("shrink-0", className), dangerouslySetInnerHTML: { __html: uploadStateSvgs[state] } }));
+}
+// ─── Helper: filename → FileTypeName ─────────────────────────────
+export function getFileType(filename) {
+    const ext = filename.split(".").pop()?.toLowerCase();
+    switch (ext) {
+        case "png":
+            return "png";
+        case "jpg":
+        case "jpeg":
+            return "jpg";
+        case "gif":
+            return "gif";
+        case "xls":
+        case "xlsx":
+            return "xls";
+        case "mp3":
+            return "mp3";
+        case "pdf":
+            return "pdf";
+        default:
+            return "generic";
+    }
+}

package/dist/components/FileUpload/FileUploadItem.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const ProgressCircle_1 = require("../ProgressCircle/index.cjs");
+const FileUploadIcons_1 = require("./FileUploadIcons.cjs");
+// ─── Helpers ─────────────────────────────────────────────────────
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const value = bytes / Math.pow(k, i);
+    return `${value % 1 === 0 ? value : value.toFixed(1)} ${sizes[i]}`;
+}
+function formatDate(date) {
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+}
+// ─── Component ───────────────────────────────────────────────────
+exports.FileUploadItem = (0, react_1.forwardRef)(({ file, onRemove, onRetry, onDownload, className, ...rest }, ref) => {
+    const fileType = (0, FileUploadIcons_1.getFileType)(file.name);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex items-center gap-3 py-3 border-b border-grey-100 last:border-b-0", className), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg border border-grey-200 bg-surface", children: (0, jsx_runtime_1.jsx)(FileUploadIcons_1.FileTypeIcon, { type: fileType }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate text-body-sm font-semibold text-grey-800", children: file.name }), file.status === "error" ? ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-feedback-error", children: file.error ?? "Failed to upload" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs text-on-surface-secondary", children: file.status === "complete" && file.uploadedAt
+                            ? `${formatDate(file.uploadedAt)} \u2022 ${formatFileSize(file.size)}`
+                            : formatFileSize(file.size) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [file.status === "pending" && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "flex size-7 items-center justify-center rounded-md text-on-surface-muted hover:bg-grey-100 cursor-pointer", "aria-label": `Remove ${file.name}`, onClick: () => onRemove?.(file.id), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "multiply", size: "md" }) })), file.status === "uploading" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ProgressCircle_1.ProgressCircle, { value: file.progress ?? 0, size: "xs", showText: true, label: `Uploading ${file.name}` }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onRemove?.(file.id), className: "flex size-7 items-center justify-center rounded-md text-on-surface-secondary hover:bg-grey-100 cursor-pointer", "aria-label": "Cancel upload", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "multiply", size: "sm" }) })] })), file.status === "complete" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onRemove?.(file.id), className: "flex size-7 items-center justify-center rounded-md text-on-surface-secondary hover:bg-grey-100 cursor-pointer", "aria-label": "Delete file", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "bin", size: "md" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onDownload?.(file.id), className: "flex size-7 items-center justify-center rounded-md text-on-surface-secondary hover:bg-grey-100 cursor-pointer", "aria-label": "Download file", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "download", size: "md" }) })] })), file.status === "error" && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onRetry?.(file.id), className: "text-body-xs font-semibold text-primary-500 cursor-pointer hover:text-primary-400", children: "Try again" }))] })] }));
+});
+exports.FileUploadItem.displayName = "FileUploadItem";