@wallarm-org/design-system 1.27.0 → 1.27.1-rc-fix-remote-shell-breadcrumb-transition.2

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type FC, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+import type { FileUploadRejection } from './types';
+export interface FileUploadProps extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'children'>, TestableProps {
+    /** Controlled accepted files. */
+    value?: File[];
+    /** Uncontrolled initial files. */
+    defaultValue?: File[];
+    /** Every change to the accepted list — pick, drop, replace, delete (then `[]`). */
+    onValueChange?: (files: File[]) => void;
+    /** Files that failed validation (for consumers that also want a toast). */
+    onFileReject?: (rejections: FileUploadRejection[]) => void;
+    /** Extensions and/or MIME types: `'.so,.dylib'`, `'image/png'`, `['.lua']`. */
+    accept?: string | string[];
+    /** Default `1`: a new pick replaces the file, and the picker stays visible, with the chosen file shown below it. */
+    maxFiles?: number;
+    /** Bytes. Checked on pick, drop and replace. */
+    maxFileSize?: number;
+    /** Bytes. */
+    minFileSize?: number;
+    /** Custom rules; returned strings are shown verbatim as rejection messages. */
+    validate?: (file: File) => string[] | null;
+    /** Hidden input name — the files submit with a native form under it. */
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Hides the picker, Delete and Replace; `FileUploadItemAction` (e.g. Download) stays. */
+    readOnly?: boolean;
+    /** Error state (maps to Ark `invalid`); also read from a wrapping `Field`. */
+    error?: boolean;
+    /** Default `true`. */
+    allowDrop?: boolean;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * FileUpload — attach files to a form: pick with a drop Area (`FileUploadDropzone`) or a
+ * button (`FileUploadTrigger`), check type and size before anything is sent, and list the
+ * chosen files as `FileUploadItem` rows. Built on `@ark-ui/react/file-upload`.
+ *
+ * Picking never uploads: files are held in `value` and in the hidden input (`name`) and go
+ * with the form on save. The consumer owns the network — mark a row `loading` while it
+ * uploads (that locks the picker) and compose `FileUploadItemAction` for Download.
+ * Reads `Field` context (label, required, disabled, read-only, invalid).
+ */
+export declare const FileUpload: FC<FileUploadProps>;

package/dist/components/FileUpload/FileUpload.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FileUpload/FileUpload.figma.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Download } from "../../icons/index.js";
+import { Field, FieldLabel } from "../Field/index.js";
+import { FileUpload } from "./FileUpload.js";
+import { FileUploadDropzone } from "./FileUploadDropzone.js";
+import { FileUploadItem } from "./FileUploadItem.js";
+import { FileUploadItemAction } from "./FileUploadItemAction.js";
+import { FileUploadItemDeleteTrigger } from "./FileUploadItemDeleteTrigger.js";
+import { FileUploadItemGroup } from "./FileUploadItemGroup.js";
+import { FileUploadItemReplaceTrigger } from "./FileUploadItemReplaceTrigger.js";
+import { FileUploadTrigger } from "./FileUploadTrigger.js";
+const FILE_UPLOAD_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12403-10372';
+const AREA_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12400-8762';
+const ITEM_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12403-10197';
+const rows = /*#__PURE__*/ jsx(FileUploadItemGroup, {
+    children: (file)=>/*#__PURE__*/ jsxs(FileUploadItem, {
+            file: file,
+            children: [
+                /*#__PURE__*/ jsx(FileUploadItemReplaceTrigger, {}),
+                /*#__PURE__*/ jsx(FileUploadItemDeleteTrigger, {})
+            ]
+        })
+});
+const sharedProps = {
+    label: code_connect.boolean('Label', {
+        true: /*#__PURE__*/ jsx(FieldLabel, {
+            children: "Label"
+        }),
+        false: void 0
+    }),
+    items: code_connect.boolean('File items', {
+        true: rows,
+        false: void 0
+    })
+};
+code_connect.connect(FileUpload, FILE_UPLOAD_URL, {
+    variant: {
+        Type: 'Area'
+    },
+    props: sharedProps,
+    example: ({ label, items })=>/*#__PURE__*/ jsxs(Field, {
+            children: [
+                label,
+                /*#__PURE__*/ jsxs(FileUpload, {
+                    children: [
+                        /*#__PURE__*/ jsx(FileUploadDropzone, {}),
+                        items
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(FileUpload, FILE_UPLOAD_URL, {
+    variant: {
+        Type: 'Button'
+    },
+    props: sharedProps,
+    example: ({ label, items })=>/*#__PURE__*/ jsxs(Field, {
+            children: [
+                label,
+                /*#__PURE__*/ jsxs(FileUpload, {
+                    children: [
+                        /*#__PURE__*/ jsx(FileUploadTrigger, {}),
+                        items
+                    ]
+                })
+            ]
+        })
+});
+code_connect.connect(FileUploadDropzone, AREA_URL, {
+    variant: {
+        State: 'Disable'
+    },
+    example: ()=>/*#__PURE__*/ jsx(FileUpload, {
+            disabled: true,
+            children: /*#__PURE__*/ jsx(FileUploadDropzone, {})
+        })
+});
+code_connect.connect(FileUploadDropzone, AREA_URL, {
+    example: ()=>/*#__PURE__*/ jsx(FileUploadDropzone, {})
+});
+code_connect.connect(FileUploadItem, ITEM_URL, {
+    props: {
+        loading: code_connect["enum"]('State', {
+            Loading: true,
+            Default: false
+        }),
+        description: code_connect.boolean("Description", {
+            true: "description",
+            false: void 0
+        })
+    },
+    example: ({ loading, description })=>/*#__PURE__*/ jsxs(FileUploadItem, {
+            file: {
+                name: 'file-name.format'
+            },
+            loading: loading,
+            description: description,
+            children: [
+                /*#__PURE__*/ jsx(FileUploadItemAction, {
+                    "aria-label": "Download file-name.format",
+                    children: /*#__PURE__*/ jsx(Download, {})
+                }),
+                /*#__PURE__*/ jsx(FileUploadItemDeleteTrigger, {})
+            ]
+        })
+});

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,224 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useFieldContext } from "@ark-ui/react/field";
+import { FileUpload, useFileUpload } from "@ark-ui/react/file-upload";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { fileUploadVariants } from "./classes.js";
+import { FileUploadRootContextProvider } from "./FileUploadContext.js";
+import { isSameFile, setInputFiles, toAcceptList, toAcceptString } from "./lib/index.js";
+const FileUpload_FileUpload = ({ value, defaultValue, onValueChange, onFileReject, accept, maxFiles = 1, maxFileSize, minFileSize, validate, name, required, disabled, readOnly, error = false, allowDrop = true, className, children, ref, onDragOver, onDrop, 'data-testid': testIdProp, ...rest })=>{
+    const field = useFieldContext();
+    const inheritedTestId = useTestId();
+    const testId = testIdProp ?? inheritedTestId;
+    const isDisabled = disabled ?? field?.disabled ?? false;
+    const isReadOnly = readOnly ?? field?.readOnly ?? false;
+    const isRequired = required ?? field?.required ?? false;
+    const invalid = error || Boolean(field?.invalid);
+    const single = maxFiles <= 1;
+    const [loadingCount, setLoadingCount] = useState(0);
+    const registerLoading = useCallback(()=>{
+        setLoadingCount((count)=>count + 1);
+        return ()=>setLoadingCount((count)=>count - 1);
+    }, []);
+    const locked = loadingCount > 0;
+    const [heldCount, setHeldCount] = useState(defaultValue?.length ?? 0);
+    const atLimit = !single && (value?.length ?? heldCount) >= maxFiles;
+    const [replaceRejections, setReplaceRejections] = useState([]);
+    const acceptString = toAcceptString(accept);
+    const acceptList = useMemo(()=>toAcceptList(accept), [
+        accept
+    ]);
+    const visible = useCallback((rejections)=>rejections.map((r)=>({
+                file: r.file,
+                errors: single ? r.errors.filter((e)=>'FILE_EXISTS' !== e) : r.errors
+            })).filter((r)=>r.errors.length > 0), [
+        single
+    ]);
+    const handleAccept = useCallback((details)=>{
+        setReplaceRejections([]);
+        setHeldCount(details.files.length);
+        onValueChange?.(details.files);
+    }, [
+        onValueChange
+    ]);
+    const hiddenInputRef = useRef(null);
+    const apiRef = useRef(null);
+    const writeHiddenInput = useCallback((files)=>{
+        if (hiddenInputRef.current) setInputFiles(hiddenInputRef.current, files);
+    }, []);
+    const commitFiles = useCallback((files)=>{
+        const current = apiRef.current;
+        if (!current) return;
+        const held = current.acceptedFiles;
+        const looksUnchanged = held.length === files.length && held.every((file, i)=>isSameFile(file, files[i]));
+        current.setFiles(files);
+        if (!looksUnchanged) return;
+        writeHiddenInput(files);
+        handleAccept({
+            files
+        });
+    }, [
+        writeHiddenInput,
+        handleAccept
+    ]);
+    const handleReject = useCallback((details)=>{
+        const [only] = details.files;
+        const held = apiRef.current?.acceptedFiles[0];
+        if (single && 1 === details.files.length && only && held && 1 === only.errors.length && 'FILE_EXISTS' === only.errors[0] && only.file.lastModified !== held.lastModified) return void queueMicrotask(()=>commitFiles([
+                only.file
+            ]));
+        const shown = visible(details.files);
+        if (shown.length) onFileReject?.(shown);
+    }, [
+        single,
+        visible,
+        onFileReject,
+        commitFiles
+    ]);
+    const api = useFileUpload({
+        name,
+        accept: acceptString,
+        maxFiles,
+        maxFileSize,
+        minFileSize,
+        validate: validate ? (file)=>validate(file) : void 0,
+        required: isRequired,
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        invalid,
+        allowDrop: allowDrop && !locked && !atLimit,
+        preventDocumentDrop: false,
+        acceptedFiles: value,
+        defaultAcceptedFiles: defaultValue,
+        onFileAccept: handleAccept,
+        onFileReject: handleReject
+    });
+    apiRef.current = api;
+    const initialFiles = useRef(api.acceptedFiles);
+    useEffect(()=>{
+        if (initialFiles.current.length) writeHiddenInput(initialFiles.current);
+    }, [
+        writeHiddenInput
+    ]);
+    const reportRejections = useCallback((rejections)=>{
+        setReplaceRejections(rejections);
+        if (rejections.length) onFileReject?.(rejections);
+    }, [
+        onFileReject
+    ]);
+    const clearRejections = useCallback(()=>{
+        api.clearRejectedFiles();
+        setReplaceRejections([]);
+    }, [
+        api
+    ]);
+    const guardPage = allowDrop && !isDisabled;
+    useEffect(()=>{
+        if (!guardPage) return;
+        const guard = (event)=>event.preventDefault();
+        document.addEventListener('dragover', guard);
+        document.addEventListener('drop', guard);
+        return ()=>{
+            document.removeEventListener('dragover', guard);
+            document.removeEventListener('drop', guard);
+        };
+    }, [
+        guardPage
+    ]);
+    const handleDragOver = (event)=>{
+        onDragOver?.(event);
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        try {
+            event.dataTransfer.dropEffect = 'none';
+        } catch  {}
+    };
+    const handleDrop = (event)=>{
+        onDrop?.(event);
+        event.preventDefault();
+    };
+    const pickerBlocked = isDisabled || locked || !single && api.maxFilesReached;
+    const errorId = useId();
+    const rejections = useMemo(()=>[
+            ...visible(api.rejectedFiles),
+            ...replaceRejections
+        ], [
+        visible,
+        api.rejectedFiles,
+        replaceRejections
+    ]);
+    const contextValue = useMemo(()=>({
+            api,
+            single,
+            disabled: isDisabled,
+            readOnly: isReadOnly,
+            invalid,
+            locked,
+            pickerHidden: isReadOnly,
+            pickerBlocked,
+            accept: acceptString,
+            limits: {
+                acceptList,
+                maxFiles,
+                maxFileSize,
+                minFileSize
+            },
+            validate,
+            rejections,
+            reportRejections,
+            clearRejections,
+            commitFiles,
+            registerLoading,
+            errorId
+        }), [
+        api,
+        single,
+        isDisabled,
+        isReadOnly,
+        invalid,
+        locked,
+        pickerBlocked,
+        acceptString,
+        acceptList,
+        maxFiles,
+        maxFileSize,
+        minFileSize,
+        validate,
+        rejections,
+        reportRejections,
+        clearRejections,
+        commitFiles,
+        registerLoading,
+        errorId
+    ]);
+    return /*#__PURE__*/ jsxs(FileUpload.RootProvider, {
+        ...rest,
+        value: api,
+        ref: ref,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        "data-slot": "file-upload",
+        "data-testid": testIdProp,
+        className: cn(fileUploadVariants(), className),
+        children: [
+            /*#__PURE__*/ jsx(FileUploadRootContextProvider, {
+                value: contextValue,
+                children: /*#__PURE__*/ jsx(TestIdProvider, {
+                    value: testId,
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(FileUpload.HiddenInput, {
+                ref: hiddenInputRef,
+                onClick: (event)=>{
+                    if (pickerBlocked) event.preventDefault();
+                },
+                "data-slot": "file-upload-hidden-input",
+                "data-testid": testId ? `${testId}--hidden-input` : void 0
+            })
+        ]
+    });
+};
+FileUpload_FileUpload.displayName = 'FileUpload';
+export { FileUpload_FileUpload as FileUpload };

package/dist/components/FileUpload/FileUpload.test.helpers.js

@@ -0,0 +1,100 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { fireEvent, screen } from "@testing-library/react";
+import { FileUpload } from "./FileUpload.js";
+import { FileUploadDropzone } from "./FileUploadDropzone.js";
+import { FileUploadError } from "./FileUploadError.js";
+import { FileUploadItem } from "./FileUploadItem.js";
+import { FileUploadItemDeleteTrigger } from "./FileUploadItemDeleteTrigger.js";
+import { FileUploadItemGroup } from "./FileUploadItemGroup.js";
+import { FileUploadItemReplaceTrigger } from "./FileUploadItemReplaceTrigger.js";
+const makeFile = (name = 'policy.wasm', size = 3, type = 'application/wasm', lastModified)=>new File([
+        'x'.repeat(size)
+    ], name, {
+        type,
+        lastModified
+    });
+const implOf = (wrapper)=>{
+    const symbol = Object.getOwnPropertySymbols(wrapper).find((s)=>'impl' === s.description);
+    return symbol ? wrapper[symbol] : void 0;
+};
+const installDataTransfer = ()=>{
+    class TestDataTransfer {
+        list = [];
+        items = {
+            add: (file)=>{
+                this.list.push(file);
+            }
+        };
+        get files() {
+            const input = document.createElement('input');
+            input.type = 'file';
+            const files = input.files;
+            implOf(files).push(...this.list.map(implOf));
+            return files;
+        }
+    }
+    const win = document.defaultView;
+    const targets = [
+        win,
+        globalThis
+    ];
+    const previous = targets.map((target)=>target.DataTransfer);
+    for (const target of targets)target.DataTransfer = TestDataTransfer;
+    return ()=>targets.forEach((target, i)=>{
+            if (void 0 === previous[i]) delete target.DataTransfer;
+            else target.DataTransfer = previous[i];
+        });
+};
+const hiddenInput = (container)=>container.querySelector('[data-slot="file-upload-hidden-input"]');
+const pick = (container, ...files)=>fireEvent.input(hiddenInput(container), {
+        target: {
+            files
+        }
+    });
+const fileTransfer = (...files)=>({
+        types: [
+            'Files'
+        ],
+        dropEffect: 'none',
+        items: files.map((file)=>({
+                kind: 'file',
+                type: file.type,
+                getAsFile: ()=>file,
+                webkitGetAsEntry: ()=>({
+                        isFile: true,
+                        isDirectory: false,
+                        name: file.name
+                    })
+            })),
+        files
+    });
+const dragOver = (el, ...files)=>fireEvent.dragOver(el, {
+        dataTransfer: fileTransfer(...files)
+    });
+const drop = (el, ...files)=>fireEvent.drop(el, {
+        dataTransfer: fileTransfer(...files)
+    });
+const nextFrame = ()=>new Promise((resolve)=>requestAnimationFrame(()=>resolve(null)));
+const byTestId = (id)=>screen.getByTestId(id);
+const queryByTestId = (id)=>screen.queryByTestId(id);
+const Uploader = ({ children, ...props })=>/*#__PURE__*/ jsx(FileUpload, {
+        "data-testid": "fu",
+        name: "artifact",
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(FileUploadDropzone, {}),
+                /*#__PURE__*/ jsx(FileUploadError, {}),
+                /*#__PURE__*/ jsx(FileUploadItemGroup, {
+                    children: (file)=>/*#__PURE__*/ jsxs(FileUploadItem, {
+                            file: file,
+                            children: [
+                                /*#__PURE__*/ jsx(FileUploadItemReplaceTrigger, {}),
+                                /*#__PURE__*/ jsx(FileUploadItemDeleteTrigger, {})
+                            ]
+                        })
+                })
+            ]
+        })
+    });
+export { Uploader, byTestId, dragOver, drop, fileTransfer, hiddenInput, installDataTransfer, makeFile, nextFrame, pick, queryByTestId };

package/dist/components/FileUpload/FileUploadContext.d.ts

@@ -0,0 +1,41 @@
+import type { UseFileUploadReturn } from '@ark-ui/react/file-upload';
+import type { FileUploadLimits, FileUploadRejection } from './types';
+export interface FileUploadRootContextValue {
+    /** The Ark/zag API (accepted files, deleteFile, setFiles, openFilePicker, …). */
+    api: UseFileUploadReturn;
+    /** `maxFiles === 1`: a new pick replaces the file; the picker stays visible. */
+    single: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    /** Own `error` or Field `invalid` (rejections are tracked separately in `rejections`). */
+    invalid: boolean;
+    /** Some `FileUploadItem loading` is mounted — the picker is locked until it finishes. */
+    locked: boolean;
+    /** Pickers render nothing while read-only (a chosen file never hides them). */
+    pickerHidden: boolean;
+    /** Pickers render but are inert: disabled, locked, or multiple mode at `maxFiles`. */
+    pickerBlocked: boolean;
+    /** Native / Ark accept string. */
+    accept: string | undefined;
+    limits: FileUploadLimits;
+    validate?: (file: File) => string[] | null;
+    /** Rejections to display (Ark's, minus single-mode FILE_EXISTS, plus multi-mode Replace ones). */
+    rejections: FileUploadRejection[];
+    /** Used by the multi-mode Replace, which validates outside Ark. */
+    reportRejections: (rejections: FileUploadRejection[]) => void;
+    /** Clears Ark's and the DS's rejections (on delete). */
+    clearRejections: () => void;
+    /**
+     * `api.setFiles` that also reports and writes the hidden input when zag sees no change
+     * (an edited file with the same name, size and type).
+     */
+    commitFiles: (files: File[]) => void;
+    /** Registers one loading row; returns the unregister cleanup. */
+    registerLoading: () => () => void;
+    /** Id of `FileUploadError`, for `aria-describedby` on the pickers. */
+    errorId: string;
+}
+export declare const FileUploadRootContextProvider: import("react").Provider<FileUploadRootContextValue | null>;
+/** Nullable — rows (`FileUploadItem*`) may render outside a `FileUpload` (stored-file lists). */
+export declare const useFileUploadRootContext: () => FileUploadRootContextValue | null;
+export declare const useRequiredFileUploadRootContext: (part: string) => FileUploadRootContextValue;

package/dist/components/FileUpload/FileUploadContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const FileUploadRootContext = /*#__PURE__*/ createContext(null);
+const FileUploadRootContextProvider = FileUploadRootContext.Provider;
+const useFileUploadRootContext = ()=>useContext(FileUploadRootContext);
+const useRequiredFileUploadRootContext = (part)=>{
+    const context = useContext(FileUploadRootContext);
+    if (!context) throw new Error(`${part} must be rendered inside <FileUpload>.`);
+    return context;
+};
+export { FileUploadRootContextProvider, useFileUploadRootContext, useRequiredFileUploadRootContext };

package/dist/components/FileUpload/FileUploadDropzone.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef, type FC, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface FileUploadDropzoneProps extends ComponentPropsWithoutRef<'div'>, TestableProps {
+    /** Replaces the default upload icon. */
+    icon?: ReactNode;
+    /** Replaces the default text ("Drag and drop files or click to select"). */
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Dashed drop Area — drop files on it, or click / Enter / Space to open the picker.
+ * Stays visible once a file is chosen; hidden only when read-only; inert while disabled,
+ * while a row is uploading, and at `maxFiles`.
+ */
+export declare const FileUploadDropzone: FC<FileUploadDropzoneProps>;

package/dist/components/FileUpload/FileUploadDropzone.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { useFieldContext } from "@ark-ui/react/field";
+import { FileUpload } from "@ark-ui/react/file-upload";
+import { Share } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { fileUploadDropzoneVariants } from "./classes.js";
+import { useRequiredFileUploadRootContext } from "./FileUploadContext.js";
+const DEFAULT_TEXT = 'Drag and drop files or click to select';
+const FileUploadDropzone = ({ icon, children, className, ref, 'data-testid': testIdProp, 'aria-describedby': describedByProp, ...props })=>{
+    const ctx = useRequiredFileUploadRootContext('FileUploadDropzone');
+    const field = useFieldContext();
+    const testId = useTestId('dropzone', testIdProp);
+    const textId = useId();
+    if (ctx.pickerHidden) return null;
+    const blocked = ctx.pickerBlocked;
+    const hasRejections = ctx.rejections.length > 0;
+    const ownName = void 0 !== props['aria-label'] || void 0 !== props['aria-labelledby'];
+    const labelledBy = ownName ? void 0 : [
+        field?.ids.label,
+        textId
+    ].filter(Boolean).join(' ');
+    const describedBy = [
+        describedByProp,
+        hasRejections ? ctx.errorId : void 0
+    ].filter(Boolean).join(' ') || void 0;
+    return /*#__PURE__*/ jsxs(FileUpload.Dropzone, {
+        "aria-labelledby": labelledBy,
+        ...props,
+        "aria-describedby": describedBy,
+        ref: ref,
+        disableClick: blocked,
+        role: "button",
+        "aria-disabled": blocked || void 0,
+        "data-disabled": blocked ? '' : void 0,
+        "data-invalid": ctx.invalid || hasRejections ? '' : void 0,
+        "data-slot": "file-upload-dropzone",
+        "data-testid": testId,
+        className: cn(fileUploadDropzoneVariants(), className),
+        children: [
+            icon ?? /*#__PURE__*/ jsx(Share, {
+                size: "md"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                id: textId,
+                children: children ?? DEFAULT_TEXT
+            })
+        ]
+    });
+};
+FileUploadDropzone.displayName = 'FileUploadDropzone';
+export { FileUploadDropzone };

package/dist/components/FileUpload/FileUploadError.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+import type { FileUploadErrorCode, FileUploadRejection } from './types';
+export interface FileUploadErrorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'>, TestableProps {
+    /** Override a message: called once per (file, error) pair. */
+    children?: (rejection: FileUploadRejection, code: FileUploadErrorCode) => ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Inline rejection message — names the file and the rule it broke ("policy.txt — Not a
+ * .wasm file"). Renders nothing until a pick, drop or replace is rejected; clears on the
+ * next accepted file or on delete. Styled like `FieldError`; use `FieldError` itself for
+ * form-level errors (e.g. "required"). Test id slot: `{base}--rejections`.
+ */
+export declare const FileUploadError: FC<FileUploadErrorProps>;

package/dist/components/FileUpload/FileUploadError.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OctagonAlert } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { Text } from "../Text/index.js";
+import { fileUploadErrorClassNames } from "./classes.js";
+import { useRequiredFileUploadRootContext } from "./FileUploadContext.js";
+import { formatRejection } from "./lib/index.js";
+const FileUploadError = ({ children, className, ref, 'data-testid': testIdProp, ...props })=>{
+    const ctx = useRequiredFileUploadRootContext('FileUploadError');
+    const testId = useTestId('rejections', testIdProp);
+    if (0 === ctx.rejections.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        id: ctx.errorId,
+        role: "alert",
+        "data-slot": "file-upload-error",
+        "data-testid": testId,
+        className: cn(fileUploadErrorClassNames, className),
+        children: ctx.rejections.flatMap((rejection, i)=>rejection.errors.map((code)=>/*#__PURE__*/ jsxs("div", {
+                    className: "flex gap-4",
+                    children: [
+                        /*#__PURE__*/ jsx(OctagonAlert, {
+                            size: "md",
+                            className: "my-2 shrink-0 self-start"
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "sm",
+                            color: "danger",
+                            children: children ? children(rejection, code) : formatRejection(rejection.file.name, code, ctx.limits, rejection.file.size)
+                        })
+                    ]
+                }, `${i}-${code}`)))
+    });
+};
+FileUploadError.displayName = 'FileUploadError';
+export { FileUploadError };