@freightos/freightwind 2.1.2 → 2.1.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Freightos
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 Freightos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,28 +1,28 @@
-# @freightos/freightwind
-
-FreightWind Design System — React UI components for Freightos applications.
-
-## Installation
-
-```bash
-npm install @freightos/freightwind @freightos/freightwind/icons
-```
-
-## Usage
-
-```tsx
-import { Button, Alert, Badge } from '@freightos/freightwind';
-import '@freightos/freightwind/tokens.css';
-```
-
-Components require Tailwind CSS v4 with the FDS design tokens loaded via `tokens.css`.
-
-## Peer Dependencies
-
-- `react` >= 18
-- `react-dom` >= 18
-- `@freightos/freightwind/icons` >= 1.0.0
-
-## License
-
-MIT
+# @freightos/freightwind
+
+FreightWind Design System — React UI components for Freightos applications.
+
+## Installation
+
+```bash
+npm install @freightos/freightwind @freightos/freightwind/icons
+```
+
+## Usage
+
+```tsx
+import { Button, Alert, Badge } from '@freightos/freightwind';
+import '@freightos/freightwind/tokens.css';
+```
+
+Components require Tailwind CSS v4 with the FDS design tokens loaded via `tokens.css`.
+
+## Peer Dependencies
+
+- `react` >= 18
+- `react-dom` >= 18
+- `@freightos/freightwind/icons` >= 1.0.0
+
+## License
+
+MIT

package/dist/cjs/components/chip.js

@@ -80,5 +80,5 @@ function Chip({ variant = 'default', icon, closable, onClose, badge, children, }
     };
     const IconComp = icon ? icon_utils_1.iconMap[icon] : null;
     const iconOnly = !!icon && !children;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(chipVariants({ variant }), iconOnly && 'justify-center', badge !== undefined && (typeof badge === 'string' ? badge.length > 0 : badge > 0) && '!pl-0.5'), children: [badge !== undefined && (typeof badge === 'string' ? badge.length > 0 : badge > 0) && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('mr-1 inline-flex items-center justify-center rounded-full min-w-[16px] h-4 px-1 text-[10px] font-fds-semibold leading-none', badgeColors[variant]), children: typeof badge === 'number' && badge > 99 ? '99+' : badge })), IconComp && (0, jsx_runtime_1.jsx)(IconComp, { size: "xs", className: children ? 'mr-fds-sm' : '' }), children, closable && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClose, "aria-label": "Remove", className: "fw-base ml-fds-sm inline-flex cursor-pointer items-center hover:opacity-70", children: (0, jsx_runtime_1.jsx)(icons_1.IconClear, { size: "xxs" }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(chipVariants({ variant }), iconOnly && 'justify-center', badge !== undefined && (typeof badge === 'string' ? badge.length > 0 : badge > 0) && '!ps-0.5'), children: [badge !== undefined && (typeof badge === 'string' ? badge.length > 0 : badge > 0) && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('me-1 inline-flex items-center justify-center rounded-full min-w-[16px] h-4 px-1 text-[10px] font-fds-semibold leading-none', badgeColors[variant]), children: typeof badge === 'number' && badge > 99 ? '99+' : badge })), IconComp && (0, jsx_runtime_1.jsx)(IconComp, { size: "xs", className: children ? 'me-fds-sm' : '' }), children, closable && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClose, "aria-label": "Remove", className: "fw-base ms-fds-sm inline-flex cursor-pointer items-center hover:opacity-70", children: (0, jsx_runtime_1.jsx)(icons_1.IconClear, { size: "xxs" }) }))] }));
 }

package/dist/cjs/components/upload.js

@@ -0,0 +1,321 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadVariants = exports.Upload = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const class_variance_authority_1 = require("class-variance-authority");
+const react_direction_1 = require("@radix-ui/react-direction");
+const utils_1 = require("../lib/utils");
+const icon_utils_1 = require("../lib/icon-utils");
+const use_stable_id_1 = require("../lib/use-stable-id");
+const file_extensions_1 = require("../lib/file-extensions");
+const uploadVariants = (0, class_variance_authority_1.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]',
+        },
+        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' },
+});
+exports.uploadVariants = uploadVariants;
+const DEFAULT_LABELS = {
+    idleTitle: 'Upload your document',
+    idleSubtitle: 'Click or drag your file here',
+    idleCompact: 'Upload',
+    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 (!(0, file_extensions_1.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 };
+}
+exports.Upload = (0, react_1.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 = (0, use_stable_id_1.useStableId)('upload');
+    const dir = (0, react_direction_1.useDirection)();
+    const [forbiddenReason, setForbiddenReason] = (0, react_1.useState)(defaultForbidden ?? null);
+    const [isUploading, setIsUploading] = (0, react_1.useState)(defaultUploading);
+    const [uploadProgress, setUploadProgress] = (0, react_1.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 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 = isSquare ? DEFAULT_ICONS.idleSquare : DEFAULT_ICONS.idleRectangle;
+        const IconCmp = icon_utils_1.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 (!isSquare) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconCmp, { size: "md", className: (0, utils_1.cn)('shrink-0 rtl:scale-x-[-1]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('w-[130px] text-fds-sm font-fds-regular leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-title`, children: t(mergedLabels.idleTitle) }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('w-[132px] text-fds-xs font-fds-bold leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-subtitle`, children: t(mergedLabels.idleSubtitle) })] })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconCmp, { className: (0, utils_1.cn)('w-[18.67px] h-[18.67px]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.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 = icon_utils_1.iconMap[DEFAULT_ICONS.forbidden];
+        if (!isSquare) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconCmp, { size: "md", className: "shrink-0 text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", "aria-live": "polite", children: [(0, jsx_runtime_1.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 ?? '') }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconCmp, { size: "lg", className: "text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), (0, jsx_runtime_1.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 = icon_utils_1.iconMap[DEFAULT_ICONS.uploading];
+        if (uploadingStyle === 'spinner') {
+            return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-fds-sm", "data-test-id": `${dataTestId}-uploading-indicator`, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('font-fds-regular leading-fds-body text-fds-gray-80 dark:text-fds-gray-20', isSquare ? 'w-full text-fds-base' : 'w-[67px] text-fds-sm'), children: t(mergedLabels.uploading) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('relative h-0.5 overflow-hidden rounded-[6px] bg-fds-gray-20 dark:bg-fds-gray-70', isSquare ? '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: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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 = icon_utils_1.iconMap[tone === 'error' ? DEFAULT_ICONS.error : DEFAULT_ICONS.success];
+        const RemoveIcon = icon_utils_1.iconMap[DEFAULT_ICONS.remove];
+        const { display, tooltip } = buildFileLabel(allFiles, isSquare);
+        const statusIconNode = tone === 'success' ? (isSquare
+            ? (0, jsx_runtime_1.jsx)(StatusIcon, { size: "lg", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : (0, jsx_runtime_1.jsx)(StatusIcon, { className: (0, utils_1.cn)('shrink-0 w-[13.33px] h-[13.33px]', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : tone === 'error' ? (isSquare
+            ? (0, jsx_runtime_1.jsx)(StatusIcon, { size: "lg", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : (0, jsx_runtime_1.jsx)(StatusIcon, { size: "sm", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : tone === 'disabled' ? (isSquare
+            ? (0, jsx_runtime_1.jsx)(StatusIcon, { size: "lg", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
+            : (0, jsx_runtime_1.jsx)(StatusIcon, { size: "sm", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : ((0, jsx_runtime_1.jsx)(StatusIcon, { size: isSquare ? 'md' : 'xs', className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusIconNode, (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('truncate font-fds-regular leading-fds-body', isSquare && (tone === 'error' || tone === 'disabled') ? 'text-fds-base' : 'text-fds-sm', !isSquare && !isFillContainer && 'min-w-0 flex-1', !isSquare && isFillContainer && 'min-w-0', tokenColor, isSquare && 'w-full text-center'), title: tooltip, "data-test-id": `${dataTestId}-filename`, children: display }), !isSquare && hasFiles && tone !== 'disabled' && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleRemoveClick, "aria-label": t('Remove all files'), "data-test-id": `${dataTestId}-remove`, className: (0, utils_1.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: (0, jsx_runtime_1.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 = ((0, jsx_runtime_1.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 = isSquare
+        ? ''
+        : isFillContainer
+            ? isFilled ? 'h-full w-full justify-center' : 'h-full w-full'
+            : effectiveState === 'forbidden'
+                ? 'h-[69px] w-[193px]'
+                : isFilled
+                    ? 'h-[60px] w-[198px]'
+                    : 'h-[69px] w-[196px]';
+    return ((0, jsx_runtime_1.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: (0, utils_1.cn)(uploadVariants({ variant, state: effectiveState }), effectiveState === 'default' && (isSquare ? 'upload-dash-4-2-square' : isFillContainer ? 'upload-dash-fluid' : 'upload-dash-4-2'), effectiveState === 'forbidden' && (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 === 'success' && isSquare && 'h-[100px] gap-[4px]', effectiveState === 'error' && isSquare && 'h-[100px] gap-[4px] p-[11px]!', effectiveState === 'disabled' && isSquare && hasFiles && 'h-[100px] gap-[4px] p-[11px]!', effectiveState === 'uploading-spinner' && !isSquare && 'py-3.5!', frameSize, className), onDragEnter: handleDragEnter, onDragOver: (e) => e.preventDefault(), onDragLeave: handleDragLeave, onDrop: handleDrop, ...rest, children: [(0, jsx_runtime_1.jsx)("input", { id: inputId, type: "file", accept: acceptAttr, multiple: isMultiple, disabled: isDisabled, className: "sr-only", onChange: handleNativeChange, "data-test-id": `${dataTestId}-input` }), body] }));
+});

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderInputIcon = exports.iconMap = exports.useStableId = exports.cn = void 0;
+exports.uploadVariants = exports.Upload = exports.renderInputIcon = exports.iconMap = exports.useStableId = exports.cn = void 0;
 // Utilities
 var utils_1 = require("./lib/utils");
 Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return utils_1.cn; } });
@@ -9,3 +9,7 @@ Object.defineProperty(exports, "useStableId", { enumerable: true, get: function
 var icon_utils_1 = require("./lib/icon-utils");
 Object.defineProperty(exports, "iconMap", { enumerable: true, get: function () { return icon_utils_1.iconMap; } });
 Object.defineProperty(exports, "renderInputIcon", { enumerable: true, get: function () { return icon_utils_1.renderInputIcon; } });
+// Components
+var upload_1 = require("./components/upload");
+Object.defineProperty(exports, "Upload", { enumerable: true, get: function () { return upload_1.Upload; } });
+Object.defineProperty(exports, "uploadVariants", { enumerable: true, get: function () { return upload_1.uploadVariants; } });