@freightos/freightwind 2.1.3 → 2.1.6

package/dist/esm/components/multiple-files-upload.js

@@ -0,0 +1,192 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, } from 'react';
+import { useDirection } from '@radix-ui/react-direction';
+import { cn } from '../lib/utils';
+import { iconMap } from '../lib/icon-utils';
+import { useStableId } from '../lib/use-stable-id';
+import { hasValidExtension } from '../lib/file-extensions';
+// ─── Defaults ─────────────────────────────────────────────────────────────────
+const DEFAULT_LABELS = {
+    idleTitle: 'Upload your document',
+    idleSubtitle: 'Click or drag your file here',
+    uploading: 'Uploading…',
+    forbidden: {
+        multiple: { title: 'Oops!', subtitle: 'Too many files' },
+        type: { title: 'Oops!', subtitle: 'Unsupported file format' },
+        size: { title: 'Oops!', subtitle: 'File is too large' },
+        extension: { title: 'Oops!', subtitle: 'Invalid file extension' },
+        custom: { title: 'Oops!', subtitle: 'This file is not allowed' },
+    },
+};
+const identity = (k) => k;
+// ─── Validation helpers ───────────────────────────────────────────────────────
+const EXT_TO_MIME = {
+    '.pdf': ['application/pdf'],
+    '.png': ['image/png'],
+    '.jpg': ['image/jpeg'],
+    '.jpeg': ['image/jpeg'],
+    '.gif': ['image/gif'],
+    '.webp': ['image/webp'],
+    '.svg': ['image/svg+xml'],
+    '.xlsx': ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+    '.xls': ['application/vnd.ms-excel'],
+    '.csv': ['text/csv', 'application/csv', 'text/plain'],
+    '.doc': ['application/msword'],
+    '.docx': ['application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+    '.txt': ['text/plain'],
+    '.zip': ['application/zip', 'application/x-zip-compressed'],
+};
+function mimeMatchesAccept(mime, accept) {
+    return accept.some((rule) => {
+        if (rule.endsWith('/*'))
+            return mime.startsWith(rule.slice(0, -1));
+        if (rule.startsWith('.'))
+            return (EXT_TO_MIME[rule.toLowerCase()] ?? []).includes(mime);
+        return mime === rule;
+    });
+}
+function extMatchesAccept(filename, accept) {
+    const dot = filename.lastIndexOf('.');
+    if (dot < 0)
+        return false;
+    const ext = filename.slice(dot).toLowerCase();
+    return accept.some((rule) => rule.toLowerCase() === ext);
+}
+function fileMatchesAccept(file, accept) {
+    return mimeMatchesAccept(file.type, accept) || extMatchesAccept(file.name, accept);
+}
+function validateDragItems(items, { maxFiles, accept, alreadyHeld = 0 }) {
+    if (maxFiles != null && items.length + alreadyHeld > maxFiles)
+        return { ok: false, reason: 'multiple' };
+    if (accept && accept.length > 0) {
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (!item || item.kind !== 'file')
+                continue;
+            if (!mimeMatchesAccept(item.type, accept))
+                return { ok: false, reason: 'type' };
+        }
+    }
+    return { ok: true };
+}
+function validatePickedFile(file, { accept, maxSize }) {
+    if (!hasValidExtension(file.name))
+        return { ok: false, reason: 'extension' };
+    if (accept && accept.length > 0 && !fileMatchesAccept(file, accept))
+        return { ok: false, reason: 'type' };
+    if (maxSize != null && file.size > maxSize)
+        return { ok: false, reason: 'size' };
+    return { ok: true };
+}
+// ─── Component ─────────────────────────────────────────────────────────────────
+export const MultipleFilesUpload = forwardRef(function MultipleFilesUpload({ dataTestId, files = [], accept, maxFiles, maxSize, isDisabled = false, isFillContainer = false, labels, t = identity, onUpload, onRemove, onForbidden, ariaLabel, defaultUploading = false, defaultForbidden, className, ...rest }, ref) {
+    const inputId = useStableId('multi-upload');
+    const dir = useDirection();
+    const [isUploading, setIsUploading] = useState(defaultUploading);
+    const [forbiddenReason, setForbiddenReason] = useState(defaultForbidden ?? null);
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    const mergedForbidden = { ...DEFAULT_LABELS.forbidden, ...(labels?.forbidden ?? {}) };
+    const fbCopy = mergedForbidden[forbiddenReason ?? 'multiple'];
+    const acceptAttr = accept?.join(',');
+    const hasFiles = files.length > 0;
+    const hasErrors = files.some((e) => e.status === 'error');
+    const handleDragEnter = (e) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        const result = validateDragItems(e.dataTransfer.items, { maxFiles, accept, alreadyHeld: files.length });
+        if (!result.ok) {
+            setForbiddenReason(result.reason);
+            onForbidden?.(result.reason);
+        }
+    };
+    const handleDragLeave = (e) => {
+        if (e.currentTarget.contains(e.relatedTarget))
+            return;
+        setForbiddenReason(null);
+    };
+    const handleDrop = (e) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        setForbiddenReason(null);
+        const dropped = Array.from(e.dataTransfer.files);
+        if (maxFiles != null && dropped.length + files.length > maxFiles) {
+            setForbiddenReason('multiple');
+            onForbidden?.('multiple');
+            return;
+        }
+        for (const f of dropped) {
+            const result = validatePickedFile(f, { accept, maxSize });
+            if (!result.ok) {
+                setForbiddenReason(result.reason);
+                onForbidden?.(result.reason);
+                return;
+            }
+        }
+        triggerUpload(dropped);
+    };
+    const handleNativeChange = (e) => {
+        const selected = Array.from(e.target.files ?? []);
+        e.target.value = '';
+        if (maxFiles != null && selected.length + files.length > maxFiles) {
+            setForbiddenReason('multiple');
+            onForbidden?.('multiple');
+            return;
+        }
+        for (const f of selected) {
+            const result = validatePickedFile(f, { accept, maxSize });
+            if (!result.ok) {
+                setForbiddenReason(result.reason);
+                onForbidden?.(result.reason);
+                return;
+            }
+        }
+        setForbiddenReason(null);
+        triggerUpload(selected);
+    };
+    const triggerUpload = (selected) => {
+        if (selected.length === 0)
+            return;
+        onUpload?.(selected, (v) => setIsUploading(v));
+    };
+    const handleRemoveClick = (e, file) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove?.(file);
+    };
+    const DocumentIcon = iconMap['document'];
+    const SpinnerIcon = iconMap['loading'];
+    const CheckIcon = iconMap['check-circled'];
+    const ErrorIcon = iconMap['clear-circled'];
+    const BlockIcon = iconMap['block'];
+    const TrashIcon = iconMap['trash'];
+    const renderDropzoneContent = () => {
+        if (isUploading) {
+            return (_jsx(SpinnerIcon, { size: "md", role: "status", "aria-label": t(mergedLabels.uploading), className: "animate-spin text-fds-blue-30 rtl:direction-[reverse]", "data-test-id": `${dataTestId}-uploading-indicator` }));
+        }
+        if (forbiddenReason) {
+            return (_jsxs(_Fragment, { children: [_jsx(BlockIcon, { size: "md", className: "shrink-0 text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), _jsxs("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", "aria-live": "polite", children: [_jsx("span", { className: "text-fds-sm font-fds-regular leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-title`, children: t(fbCopy?.title ?? '') }), _jsx("span", { className: "text-fds-xs font-fds-bold leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-subtitle`, children: t(fbCopy?.subtitle ?? '') })] })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(DocumentIcon, { size: "md", className: "shrink-0 text-fds-gray-80 rtl:scale-x-[-1] dark:text-fds-gray-20", "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), _jsxs("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", children: [_jsx("span", { className: "text-fds-sm font-fds-regular leading-fds-body text-fds-gray-80 dark:text-fds-gray-20", "data-test-id": `${dataTestId}-idle-title`, children: t(mergedLabels.idleTitle) }), _jsx("span", { className: "text-fds-xs font-fds-bold leading-fds-body text-fds-gray-80 dark:text-fds-gray-20", "data-test-id": `${dataTestId}-idle-subtitle`, children: t(mergedLabels.idleSubtitle) })] })] }));
+    };
+    const renderFileRow = (entry, index) => {
+        const isSuccess = entry.status === 'success';
+        const RowIcon = isSuccess ? CheckIcon : ErrorIcon;
+        const iconColor = isSuccess ? 'text-fds-green-30' : 'text-fds-red-30';
+        const textColor = isSuccess ? 'text-fds-blue-30' : 'text-fds-red-30';
+        return (_jsxs("div", { className: "flex h-[40px] w-full items-center gap-fds-sm", "data-test-id": `${dataTestId}-file-row-${index}`, children: [_jsx(RowIcon, { size: "sm", className: cn('shrink-0', iconColor), "aria-hidden": true, "data-test-id": `${dataTestId}-file-status-${index}` }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-fds-base font-fds-regular leading-fds-body', textColor), title: entry.file.name, "data-test-id": `${dataTestId}-filename-${index}`, children: entry.file.name }), !isDisabled && (_jsx("button", { type: "button", onClick: (e) => handleRemoveClick(e, entry.file), "aria-label": t(`Remove ${entry.file.name}`), "data-test-id": `${dataTestId}-trash-${index}`, className: "inline-flex h-[40px] w-[63px] shrink-0 items-center justify-center cursor-pointer text-fds-red-30 hover:bg-fds-red-05 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fds-red-30 dark:hover:bg-fds-red-30/10", children: _jsx(TrashIcon, { size: "sm", "aria-hidden": true }) }))] }, `${entry.file.name}-${index}`));
+    };
+    const dropzoneBorderClass = forbiddenReason
+        ? 'upload-dash-fluid-red'
+        : isUploading
+            ? 'border border-solid border-fds-gray-30 dark:border-fds-gray-70'
+            : hasErrors && hasFiles
+                ? 'border border-solid border-fds-red-30 dark:border-fds-red-30'
+                : hasFiles
+                    ? 'border border-solid border-fds-blue-30 dark:border-fds-blue-30'
+                    : 'upload-dash-fluid';
+    const dropzoneHeight = isFillContainer ? 'h-[147px]' : 'h-[69px]';
+    return (_jsxs("div", { ref: ref, dir: dir, "data-test-id": dataTestId, "data-state": isUploading ? 'uploading' : hasErrors ? 'errors' : hasFiles ? 'success' : forbiddenReason ? 'forbidden' : 'default', className: cn('relative flex flex-col rounded-fds-md bg-white p-[24px] gap-[10px] dark:bg-fds-gray-95', isFillContainer ? 'w-full' : 'w-[433px]', isDisabled && 'pointer-events-none opacity-60', className), ...rest, children: [_jsxs("label", { htmlFor: inputId, "aria-label": ariaLabel ?? t(mergedLabels.idleTitle), "aria-disabled": isDisabled || undefined, "aria-busy": isUploading || undefined, className: cn('fw-base relative flex w-full cursor-pointer select-none items-center gap-fds-sm rounded-fds-md p-fds-lg transition-colors', 'bg-fds-gray-10 dark:bg-fds-gray-90', dropzoneHeight, dropzoneBorderClass, isDisabled && 'cursor-not-allowed', isUploading && 'cursor-uploading justify-center', forbiddenReason && 'cursor-not-allowed justify-center'), onDragEnter: handleDragEnter, onDragOver: (e) => e.preventDefault(), onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { id: inputId, type: "file", accept: acceptAttr, multiple: maxFiles == null || maxFiles > 1, disabled: isDisabled, className: "sr-only", onChange: handleNativeChange, "data-test-id": `${dataTestId}-input` }), renderDropzoneContent()] }), hasFiles && !isUploading && (_jsx("div", { className: "flex w-full flex-col", "data-test-id": `${dataTestId}-file-list`, children: files.map((entry, i) => renderFileRow(entry, i)) }))] }));
+});

package/dist/esm/components/upload.js

@@ -0,0 +1,330 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, } from 'react';
+import { cva } from 'class-variance-authority';
+import { useDirection } from '@radix-ui/react-direction';
+import { cn } from '../lib/utils';
+import { iconMap } from '../lib/icon-utils';
+import { useStableId } from '../lib/use-stable-id';
+import { hasValidExtension } from '../lib/file-extensions';
+const uploadVariants = cva('fw-base group relative flex select-none rounded-fds-md outline-none transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-fds-blue-30 has-[:focus-visible]:ring-offset-2', {
+    variants: {
+        variant: {
+            rectangle: 'items-center gap-fds-sm p-fds-lg',
+            square: 'h-[99px] w-[100px] flex-col items-center justify-center gap-[10px] px-[26px] py-[23px]',
+            'square-lg': 'h-[238px] w-[285px] flex-col items-center justify-center gap-fds-lg p-fds-xl',
+        },
+        state: {
+            default: 'cursor-pointer justify-center bg-fds-gray-10 dark:bg-fds-gray-90',
+            forbidden: 'cursor-not-allowed justify-center bg-fds-gray-10 dark:bg-fds-gray-90',
+            uploading: 'cursor-uploading justify-center border border-solid border-fds-gray-30 bg-fds-gray-10 dark:border-fds-gray-70 dark:bg-fds-gray-90',
+            'uploading-spinner': 'cursor-uploading justify-center border border-solid border-fds-gray-30 bg-fds-gray-10 dark:border-fds-gray-70 dark:bg-fds-gray-90',
+            success: 'cursor-pointer border border-solid border-fds-blue-30 bg-fds-gray-10 hover:border-fds-blue-40 dark:border-fds-blue-30 dark:bg-fds-gray-90',
+            error: 'cursor-not-allowed border border-solid border-fds-red-30 bg-fds-gray-10 dark:border-fds-red-30 dark:bg-fds-gray-90',
+            disabled: 'cursor-not-allowed-gray border border-solid border-fds-gray-30 bg-fds-gray-10 text-fds-gray-50 [&_*]:pointer-events-none dark:border-fds-gray-70 dark:bg-fds-gray-90 dark:text-fds-gray-50',
+        },
+    },
+    defaultVariants: { variant: 'rectangle', state: 'default' },
+});
+const DEFAULT_LABELS = {
+    idleTitle: 'Upload your document',
+    idleSubtitle: 'Click or drag your file here',
+    idleCompact: 'Upload',
+    idleDragDrop: 'Drag and drop your file',
+    uploading: 'Uploading…',
+    forbidden: {
+        multiple: { title: 'Oops!', subtitle: 'You can only drag one file', compact: 'Oops!' },
+        type: { title: 'Oops!', subtitle: 'Unsupported file format', compact: 'Oops!' },
+        size: { title: 'Oops!', subtitle: 'File is too large', compact: 'Oops!' },
+        extension: { title: 'Oops!', subtitle: 'Invalid file extension', compact: 'Oops!' },
+        custom: { title: 'Oops!', subtitle: 'This file is not allowed', compact: 'Oops!' },
+    },
+};
+const DEFAULT_ICONS = {
+    idleRectangle: 'document',
+    idleSquare: 'plus',
+    forbidden: 'block',
+    success: 'check-circled',
+    error: 'clear-circled',
+    uploading: 'loading',
+    remove: 'trash',
+};
+const identity = (k) => k;
+function truncateMiddle(name, max) {
+    if (name.length <= max)
+        return name;
+    const dot = name.lastIndexOf('.');
+    const ext = dot > 0 ? name.slice(dot) : '';
+    const head = name.slice(0, Math.max(2, Math.floor((max - ext.length - 1) / 2)));
+    return `${head}…${ext || name.slice(-Math.max(2, Math.floor(max / 2)))}`;
+}
+function buildFileLabel(allFiles, isSquare) {
+    const names = allFiles.map((f) => f.name);
+    const tooltip = names.join('\n');
+    if (names.length === 1) {
+        return { display: isSquare ? truncateMiddle(names[0], 12) : names[0], tooltip };
+    }
+    const shown = names.slice(0, 2).map((n) => truncateMiddle(n, 12));
+    const extra = names.length - 2;
+    const display = shown.join(', ') + (extra > 0 ? `, +${extra}` : '');
+    return { display, tooltip };
+}
+const EXT_TO_MIME = {
+    '.pdf': ['application/pdf'],
+    '.png': ['image/png'],
+    '.jpg': ['image/jpeg'],
+    '.jpeg': ['image/jpeg'],
+    '.gif': ['image/gif'],
+    '.webp': ['image/webp'],
+    '.svg': ['image/svg+xml'],
+    '.xlsx': ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+    '.xls': ['application/vnd.ms-excel'],
+    '.csv': ['text/csv', 'application/csv', 'text/plain'],
+    '.doc': ['application/msword'],
+    '.docx': ['application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+    '.txt': ['text/plain'],
+    '.zip': ['application/zip', 'application/x-zip-compressed'],
+};
+function mimeMatchesAccept(mime, accept) {
+    return accept.some((rule) => {
+        if (rule.endsWith('/*'))
+            return mime.startsWith(rule.slice(0, -1));
+        if (rule.startsWith('.'))
+            return (EXT_TO_MIME[rule.toLowerCase()] ?? []).includes(mime);
+        return mime === rule;
+    });
+}
+function extMatchesAccept(filename, accept) {
+    const dot = filename.lastIndexOf('.');
+    if (dot < 0)
+        return false;
+    const ext = filename.slice(dot).toLowerCase();
+    return accept.some((rule) => rule.toLowerCase() === ext);
+}
+function fileMatchesAccept(file, accept) {
+    return mimeMatchesAccept(file.type, accept) || extMatchesAccept(file.name, accept);
+}
+function validateDragItems(items, { maxFiles, accept, alreadyHeld = 0 }) {
+    const limit = maxFiles ?? 1;
+    if (items.length + alreadyHeld > limit)
+        return { ok: false, reason: 'multiple' };
+    if (accept && accept.length > 0) {
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (!item || item.kind !== 'file')
+                continue;
+            if (!mimeMatchesAccept(item.type, accept))
+                return { ok: false, reason: 'type' };
+        }
+    }
+    return { ok: true };
+}
+function validatePickedFile(file, { accept, maxSize }) {
+    if (!hasValidExtension(file.name))
+        return { ok: false, reason: 'extension' };
+    if (accept && accept.length > 0 && !fileMatchesAccept(file, accept)) {
+        return { ok: false, reason: 'type' };
+    }
+    if (maxSize != null && file.size > maxSize)
+        return { ok: false, reason: 'size' };
+    return { ok: true };
+}
+export const Upload = forwardRef(function Upload({ dataTestId, variant = 'rectangle', value, files: filesProp, maxFiles, accept, maxSize, isError = false, isDisabled = false, isFillContainer = false, labels, t = identity, onUpload, onRemove, onForbidden, ariaLabel, defaultUploading = false, defaultUploadProgress, defaultForbidden, uploadingStyle = 'progress', className, ...rest }, ref) {
+    const inputId = useStableId('upload');
+    const dir = useDirection();
+    const [forbiddenReason, setForbiddenReason] = useState(defaultForbidden ?? null);
+    const [isUploading, setIsUploading] = useState(defaultUploading);
+    const [uploadProgress, setUploadProgress] = useState(defaultUploadProgress ?? null);
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    const mergedForbidden = {
+        ...DEFAULT_LABELS.forbidden,
+        ...(labels?.forbidden ?? {}),
+    };
+    const fbCopy = mergedForbidden[forbiddenReason ?? 'multiple'];
+    const allFiles = filesProp ?? (value ? [value] : []);
+    const hasFiles = allFiles.length > 0;
+    const effectiveState = isDisabled
+        ? 'disabled'
+        : forbiddenReason
+            ? 'forbidden'
+            : isUploading
+                ? uploadingStyle === 'spinner' ? 'uploading-spinner' : 'uploading'
+                : isError
+                    ? 'error'
+                    : hasFiles
+                        ? 'success'
+                        : 'default';
+    const isSquare = variant === 'square';
+    const isSquareLg = variant === 'square-lg';
+    const isSquareAny = isSquare || isSquareLg;
+    const isMultiple = maxFiles == null || maxFiles > 1;
+    const acceptAttr = accept?.join(',');
+    const triggerUpload = (selected) => {
+        if (selected.length === 0)
+            return;
+        onUpload?.(selected, (v, progress) => {
+            setIsUploading(v);
+            setUploadProgress(v && progress !== undefined ? progress : null);
+        });
+    };
+    const handleDragEnter = (e) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        const result = validateDragItems(e.dataTransfer.items, { maxFiles, accept: accept, alreadyHeld: allFiles.length });
+        if (!result.ok) {
+            setForbiddenReason(result.reason);
+            onForbidden?.(result.reason);
+        }
+    };
+    const handleDragLeave = (e) => {
+        if (e.currentTarget.contains(e.relatedTarget))
+            return;
+        setForbiddenReason(null);
+    };
+    const handleDrop = (e) => {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        setForbiddenReason(null);
+        const dropped = Array.from(e.dataTransfer.files);
+        const limit = maxFiles ?? 1;
+        if (dropped.length + allFiles.length > limit) {
+            setForbiddenReason('multiple');
+            onForbidden?.('multiple');
+            return;
+        }
+        for (const f of dropped) {
+            const result = validatePickedFile(f, { accept: accept, maxSize });
+            if (!result.ok) {
+                setForbiddenReason(result.reason);
+                onForbidden?.(result.reason);
+                return;
+            }
+        }
+        triggerUpload(dropped);
+    };
+    const handleNativeChange = (e) => {
+        const selected = Array.from(e.target.files ?? []);
+        e.target.value = '';
+        const limit = maxFiles ?? 1;
+        if (selected.length + allFiles.length > limit) {
+            setForbiddenReason('multiple');
+            onForbidden?.('multiple');
+            return;
+        }
+        for (const f of selected) {
+            const result = validatePickedFile(f, { accept: accept, maxSize });
+            if (!result.ok) {
+                setForbiddenReason(result.reason);
+                onForbidden?.(result.reason);
+                return;
+            }
+        }
+        setForbiddenReason(null);
+        triggerUpload(selected);
+    };
+    const handleRemoveClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove?.();
+    };
+    const renderIdle = () => {
+        const idleIconName = isSquareAny ? DEFAULT_ICONS.idleSquare : DEFAULT_ICONS.idleRectangle;
+        const IconCmp = iconMap[idleIconName];
+        const tone = effectiveState === 'disabled'
+            ? 'text-fds-gray-50 dark:text-fds-gray-50'
+            : 'text-fds-gray-80 dark:text-fds-gray-20';
+        if (isSquareLg) {
+            return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { className: cn('w-[40px] h-[40px]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), _jsx("span", { className: cn('text-fds-base font-fds-regular leading-fds-body text-center', tone), "data-test-id": `${dataTestId}-idle-compact`, children: t(mergedLabels.idleDragDrop) })] }));
+        }
+        if (!isSquare) {
+            return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { size: "md", className: cn('shrink-0 rtl:scale-x-[-1]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), _jsxs("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", children: [_jsx("span", { className: cn('w-[130px] text-fds-sm font-fds-regular leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-title`, children: t(mergedLabels.idleTitle) }), _jsx("span", { className: cn('w-[132px] text-fds-xs font-fds-bold leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-subtitle`, children: t(mergedLabels.idleSubtitle) })] })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { className: cn('w-[18.67px] h-[18.67px]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), _jsx("span", { className: cn('w-12 text-fds-base font-fds-regular leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-compact`, children: t(mergedLabels.idleCompact) })] }));
+    };
+    const renderForbidden = () => {
+        const IconCmp = iconMap[DEFAULT_ICONS.forbidden];
+        if (!isSquareAny) {
+            return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { size: "md", className: "shrink-0 text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), _jsxs("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", "aria-live": "polite", children: [_jsx("span", { className: "w-[130px] text-fds-sm font-fds-regular leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-title`, children: t(fbCopy?.title ?? '') }), _jsx("span", { className: "w-[132px] text-fds-xs font-fds-bold leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-subtitle`, children: t(fbCopy?.subtitle ?? '') })] })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(IconCmp, { size: "lg", className: "text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), _jsx("span", { className: "text-fds-base font-fds-regular leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-compact`, children: t(mergedLabels.idleCompact) })] }));
+    };
+    const renderUploading = () => {
+        const SpinnerIcon = iconMap[DEFAULT_ICONS.uploading];
+        if (uploadingStyle === 'spinner') {
+            return isSquareLg ? (_jsx(SpinnerIcon, { className: "w-10 h-10 animate-spin text-fds-blue-30 rtl:direction-[reverse]", role: "status", "aria-label": t(mergedLabels.uploading), "data-test-id": `${dataTestId}-uploading-indicator` })) : (_jsx(SpinnerIcon, { size: "lg", role: "status", "aria-label": t(mergedLabels.uploading), className: "animate-spin text-fds-blue-30 rtl:direction-[reverse]", "data-test-id": `${dataTestId}-uploading-indicator` }));
+        }
+        return (_jsxs("div", { className: "flex w-full flex-col gap-fds-sm", "data-test-id": `${dataTestId}-uploading-indicator`, children: [_jsx("span", { className: cn('font-fds-regular leading-fds-body text-fds-gray-80 dark:text-fds-gray-20', isSquareAny ? 'w-full text-fds-base' : 'w-[67px] text-fds-sm'), children: t(mergedLabels.uploading) }), _jsx("div", { className: cn('relative h-0.5 overflow-hidden rounded-[6px] bg-fds-gray-20 dark:bg-fds-gray-70', isSquareAny ? 'w-full' : 'w-[165px]'), role: "progressbar", "aria-valuenow": uploadProgress !== null ? Math.round(uploadProgress * 100) : undefined, "aria-valuemin": uploadProgress !== null ? 0 : undefined, "aria-valuemax": uploadProgress !== null ? 100 : undefined, "aria-label": t(mergedLabels.uploading), children: _jsx("div", { className: cn('absolute inset-y-0 start-0 rounded-[6px] bg-fds-green-30 upload-progress-bar', uploadProgress === null
+                            ? 'w-1/2 animate-[uploading-progress_1.4s_ease-in-out_infinite]'
+                            : 'transition-[width] duration-200 ease-in-out'), style: uploadProgress !== null ? { width: `${uploadProgress * 100}%` } : undefined }) })] }));
+    };
+    const renderFilled = (tone) => {
+        const tokenColor = tone === 'success'
+            ? 'text-fds-blue-30'
+            : tone === 'error'
+                ? 'text-fds-red-30'
+                : 'text-fds-gray-30 dark:text-fds-gray-50';
+        const accent = tone === 'success'
+            ? 'text-fds-green-30'
+            : tone === 'error'
+                ? 'text-fds-red-30'
+                : 'text-fds-gray-30 dark:text-fds-gray-50';
+        const StatusIcon = iconMap[tone === 'error' ? DEFAULT_ICONS.error : DEFAULT_ICONS.success];
+        const RemoveIcon = iconMap[DEFAULT_ICONS.remove];
+        const { display, tooltip } = buildFileLabel(allFiles, isSquareAny);
+        // square-lg error: special layout with large icon, truncated filenames + tooltip, and error text block
+        if (isSquareLg && tone === 'error') {
+            return (_jsxs(_Fragment, { children: [_jsx(StatusIcon, { className: "w-10 h-10 shrink-0 text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` }), _jsx("span", { className: "w-full truncate text-center text-fds-xs font-fds-regular leading-fds-body text-fds-blue-30 cursor-default", title: tooltip, "data-test-id": `${dataTestId}-filename`, children: display }), _jsxs("div", { className: "flex w-full flex-col items-center gap-fds-xs text-center", "aria-live": "polite", children: [_jsx("span", { className: "text-fds-h6 font-fds-bold leading-fds-title text-fds-gray-80 dark:text-fds-gray-20", children: t('Error') }), _jsx("span", { className: "text-fds-xs font-fds-regular leading-fds-body text-fds-gray-80 dark:text-fds-gray-20", children: t('We were unable to read your information') }), _jsx("span", { className: "pointer-events-auto cursor-pointer! text-fds-xs font-fds-regular leading-fds-body text-fds-blue-30 underline", children: t('Try again by selecting another file') })] })] }));
+        }
+        const statusIconNode = tone === 'success' ? (isSquareAny
+            ? _jsx(StatusIcon, { size: "lg", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : _jsx(StatusIcon, { className: cn('shrink-0 w-[13.33px] h-[13.33px]', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : tone === 'error' ? (isSquareAny
+            ? _jsx(StatusIcon, { size: "lg", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : _jsx(StatusIcon, { size: "sm", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : tone === 'disabled' ? (isSquareAny
+            ? _jsx(StatusIcon, { size: "lg", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : _jsx(StatusIcon, { size: "sm", className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : (_jsx(StatusIcon, { size: isSquareAny ? 'md' : 'xs', className: cn('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` }));
+        return (_jsxs(_Fragment, { children: [statusIconNode, _jsx("span", { className: cn('truncate font-fds-regular leading-fds-body', isSquareAny && (tone === 'error' || tone === 'disabled') ? 'text-fds-base' : 'text-fds-sm', !isSquareAny && !isFillContainer && 'min-w-0 flex-1', !isSquareAny && isFillContainer && 'min-w-0', tokenColor, isSquareAny && 'w-full text-center'), title: tooltip, "data-test-id": `${dataTestId}-filename`, children: display }), !isSquareAny && hasFiles && tone !== 'disabled' && (_jsx("button", { type: "button", onClick: handleRemoveClick, "aria-label": t('Remove all files'), "data-test-id": `${dataTestId}-remove`, className: cn('inline-flex size-6 shrink-0 items-center justify-center rounded-fds-sm focus-visible:outline-none focus-visible:ring-2 cursor-pointer text-fds-red-30 hover:bg-fds-red-05 focus-visible:ring-fds-red-30 dark:hover:bg-fds-red-30/10', !isFillContainer && 'ms-auto'), children: _jsx(RemoveIcon, { size: "sm", "aria-hidden": true }) }))] }));
+    };
+    let body = null;
+    switch (effectiveState) {
+        case 'default':
+            body = renderIdle();
+            break;
+        case 'disabled':
+            body = hasFiles ? renderFilled('disabled') : renderIdle();
+            break;
+        case 'forbidden':
+            body = renderForbidden();
+            break;
+        case 'uploading':
+        case 'uploading-spinner':
+            body = renderUploading();
+            break;
+        case 'success':
+            body = renderFilled('success');
+            break;
+        case 'error':
+            body = (_jsx("div", { role: "alert", className: "contents", children: renderFilled('error') }));
+            break;
+    }
+    const isFilled = effectiveState === 'uploading' ||
+        effectiveState === 'uploading-spinner' ||
+        effectiveState === 'success' ||
+        effectiveState === 'error' ||
+        (effectiveState === 'disabled' && hasFiles);
+    const frameSize = isSquareAny
+        ? ''
+        : isFillContainer
+            ? (isFilled ? 'h-full w-full justify-center' : 'h-full w-full')
+            : 'h-[69px] w-[198px]';
+    return (_jsxs("label", { ref: ref, htmlFor: inputId, "data-test-id": dataTestId, "data-state": effectiveState, "data-variant": variant, "data-filled": hasFiles ? 'true' : 'false', dir: dir, "aria-label": ariaLabel ?? t(mergedLabels.idleTitle), "aria-disabled": isDisabled || undefined, "aria-busy": (effectiveState === 'uploading' || effectiveState === 'uploading-spinner') || undefined, className: cn(uploadVariants({ variant, state: effectiveState }), effectiveState === 'default' && (isSquareLg ? 'upload-dash-fluid' :
+            isSquare ? 'upload-dash-4-2-square' :
+                isFillContainer ? 'upload-dash-fluid' : 'upload-dash-4-2'), effectiveState === 'forbidden' && (isSquareLg ? 'upload-dash-fluid-red' :
+            isSquare ? 'h-[100px] gap-[4px] upload-dash-4-4' :
+                isFillContainer ? 'upload-dash-fluid-red' : 'upload-dash-4-2-red'), (effectiveState === 'uploading' || effectiveState === 'uploading-spinner') && isSquare && 'h-[100px] p-[11px]!', (effectiveState === 'uploading' || effectiveState === 'uploading-spinner') && isSquareLg && 'h-[238px]', effectiveState === 'success' && isSquare && 'h-[100px] gap-[4px]', effectiveState === 'error' && isSquare && 'h-[100px] gap-[4px] p-[11px]!', 
+        // square-lg error: gray border (Figma spec) + allow retry clicks
+        effectiveState === 'error' && isSquareLg && 'border-fds-gray-30! dark:border-fds-gray-70! cursor-pointer!', effectiveState === 'disabled' && isSquare && hasFiles && 'h-[100px] gap-[4px] p-[11px]!', effectiveState === 'uploading-spinner' && !isSquareAny && 'py-3.5!', frameSize, className), onDragEnter: handleDragEnter, onDragOver: (e) => e.preventDefault(), onDragLeave: handleDragLeave, onDrop: handleDrop, ...rest, children: [_jsx("input", { id: inputId, type: "file", accept: acceptAttr, multiple: isMultiple, disabled: isDisabled, className: "sr-only", onChange: handleNativeChange, "data-test-id": `${dataTestId}-input` }), body] }));
+});
+export { uploadVariants };
+export const SingleFileUpload = Upload;

package/dist/esm/index.js

@@ -2,3 +2,6 @@
 export { cn } from './lib/utils';
 export { useStableId } from './lib/use-stable-id';
 export { iconMap, renderInputIcon } from './lib/icon-utils';
+// Components
+export { Upload, uploadVariants, SingleFileUpload } from './components/upload';
+export { MultipleFilesUpload } from './components/multiple-files-upload';