@lerianstudio/sindarian-ui 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/components/ui/file-upload/index.d.ts

@@ -158,4 +158,163 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
     'aria-describedby'?: string;
     'aria-label'?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "type" | "value" | "onChange" | "onError" | "onSelect" | "accept" | "multiple"> & React.RefAttributes<HTMLInputElement>>;
+/**
+ * A rejection from `MultipleFileUpload`: every rejection the single-file
+ * sibling can produce, plus the one only a plural selection has — the cap.
+ */
+export type MultipleFileUploadError = FileUploadError | {
+    kind: 'too-many';
+    file: File;
+    maxFiles: number;
+};
+/** Overrides for the fixed English copy. Every field is optional. */
+export interface MultipleFileUploadLabels {
+    /** Emphasised call to action in the empty zone. Defaults to "Choose files". */
+    action?: string;
+    /** Trailing hint after the action. Defaults to "or drag and drop". */
+    hint?: string;
+    /** Zone copy once `maxFiles` is reached. Receives the cap to interpolate. */
+    full?: (maxFiles: number) => string;
+    /**
+     * Accessible name of a row's remove control. Receives that row's file, so the
+     * name identifies it. Defaults to `Remove <filename>`.
+     */
+    remove?: (file: File) => string;
+    /**
+     * Copy for one rejection. Called once per rejection in a batch; use the
+     * exported `humanizeSize` to format `maxSizeBytes`. Return `null`,
+     * `undefined` or `''` to stay SILENT and leave the announcement to the host's
+     * own `onError` handling. A batch whose every message is silent renders no
+     * alert at all.
+     */
+    error?: (error: MultipleFileUploadError) => string | null | undefined;
+}
+export type MultipleFileUploadProps = {
+    /** Comma-separated accept filter. Applied to every file, extension or MIME. */
+    accept?: string;
+    /** Inclusive per-file byte ceiling. Applied to each file independently. */
+    maxSizeBytes?: number;
+    /** Ceiling on the TOTAL selection. Omitted means unbounded. */
+    maxFiles?: number;
+    /** Controlled selection. The host owns state; defaults to empty. */
+    value?: FileUploadResult[];
+    /**
+     * How each accepted file is handed over. `'text'` (default) decodes UTF-8
+     * and populates `text`; `'none'` skips decoding entirely and is the mode
+     * BINARY files need. See FileUpload's `readAs` for why.
+     */
+    readAs?: FileUploadReadAs;
+    /** Override the fixed English copy. Omitted fields keep their defaults. */
+    labels?: MultipleFileUploadLabels;
+    /** Fires with the WHOLE next selection whenever files are added or removed. */
+    onValueChange: (values: FileUploadResult[]) => void;
+    /** Fires once per rejected file. A batch can produce several. */
+    onError?: (error: MultipleFileUploadError) => void;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'accept' | 'value' | 'disabled' | 'onChange' | 'onSelect' | 'className' | 'multiple' | 'onError'>;
+/**
+ * MultipleFileUpload: the plural sibling of FileUpload. Pick SEVERAL files,
+ * accumulate them across repeated picks, validate each one, cap the total, and
+ * hand back `FileUploadResult[]`.
+ *
+ * A SIBLING COMPONENT, not a `multiple` flag. This library already answers
+ * "this one takes many" that way (`Select` / `MultipleSelect`), and FileUpload
+ * strips `'multiple'` from its props on purpose: single-file is its contract,
+ * not a default it happens to have. A boolean would have forced every prop
+ * here into a union that means one thing when the flag is set and another when
+ * it is not: `value` as `Result | Result[] | null`, a `maxFiles` that is
+ * meaningless in half the configurations, and a remove control whose
+ * accessible name is fixed copy in one mode and per-file in the other. The
+ * plural props follow the house shape for plural components: `value?: T[]`
+ * with `onValueChange?: (values: T[]) => void`.
+ *
+ * WHERE THE LINE SITS: this component owns SELECTION and nothing after it.
+ * Choosing, validating, capping, listing and removing are its job; uploading
+ * is not. That split is not squeamishness about scope, it is where the
+ * knowledge actually lives. An upload needs an endpoint, an auth scheme, a
+ * concurrency policy, a retry policy and, very often, a parent id that does
+ * not exist yet when the files are chosen: the motivating host stages evidence
+ * files while a form is being filled and can only upload them against the id
+ * that its create call returns afterwards. None of that is knowable from
+ * inside a library primitive, and a component that guessed would have to be
+ * fought rather than used. So the host keeps its own per-file record with
+ * status and retry, and this component keeps the part a form can hold and
+ * validate: the chosen files. `FileUploadResult[]` is a value; an upload state
+ * machine is not.
+ *
+ * ACCUMULATION is the defining behaviour. A second pick ADDS to the selection
+ * rather than replacing it, because a user assembling five documents does it
+ * in two or three trips to the file dialog, not one. Everything else follows
+ * from that: room is measured against what is already selected, and the batch
+ * that overflows the cap still contributes the files that fit.
+ *
+ * A BATCH SURVIVES ITS OWN CASUALTIES. One file rejected for type, size or a
+ * failed read does not discard the rest of the batch, and it does not consume
+ * a slot either: validation runs over the WHOLE batch before the cap is
+ * applied, so a file that was never eligible cannot cost an eligible one its
+ * place, and `'too-many'` always names a file a slot would genuinely have
+ * taken. The alternative punishes
+ * a user for a mistake in one file by throwing away four good ones, and hands
+ * back no way to tell which was which. Every rejection is reported through
+ * `onError` and announced together in one `role="alert"`.
+ *
+ * Accessibility follows the sibling BELOW THE CAP: the real `<input
+ * type="file">` is `sr-only` but focusable and labelable, and never
+ * `aria-hidden`, so FormControl-injected ARIA and react-hook-form's focus on
+ * error both work while the picker is enabled. At the cap that changes, and
+ * the paragraph below says how.
+ * The file list sits OUTSIDE the click zone, so activating a remove control
+ * cannot also reopen the picker, and each remove control is named after its
+ * own file: a column of identical "Remove file" buttons tells a screen-reader
+ * user nothing about which row they are on.
+ *
+ * AT THE CAP the picker takes the native `disabled` attribute, and that DOES
+ * take it out of the tab order. This is the one state in which the input is
+ * not a focus target, and the one state in which focus-on-error cannot land on
+ * it, so it is a real cost rather than a free win. The cap has no counterpart
+ * in the single-file sibling, so the precedent followed here is
+ * `DateRangePicker`'s trigger: a control whose only job is to open a dialog has
+ * no state worth keeping focusable, and native `disabled` is what both removes
+ * it from the tab order and keeps the dialog shut. The alternative, an enabled
+ * picker that opens the file dialog and then refuses every file with
+ * `too-many`, is a control that lies about being available. What keeps the cap
+ * from being a dead end is the escape hatch: the remove controls answer to
+ * `disabled` alone and NEVER to the cap, so they stay focusable and removing
+ * one file reopens the picker.
+ */
+export declare const MultipleFileUpload: React.ForwardRefExoticComponent<{
+    /** Comma-separated accept filter. Applied to every file, extension or MIME. */
+    accept?: string;
+    /** Inclusive per-file byte ceiling. Applied to each file independently. */
+    maxSizeBytes?: number;
+    /** Ceiling on the TOTAL selection. Omitted means unbounded. */
+    maxFiles?: number;
+    /** Controlled selection. The host owns state; defaults to empty. */
+    value?: FileUploadResult[];
+    /**
+     * How each accepted file is handed over. `'text'` (default) decodes UTF-8
+     * and populates `text`; `'none'` skips decoding entirely and is the mode
+     * BINARY files need. See FileUpload's `readAs` for why.
+     */
+    readAs?: FileUploadReadAs;
+    /** Override the fixed English copy. Omitted fields keep their defaults. */
+    labels?: MultipleFileUploadLabels;
+    /** Fires with the WHOLE next selection whenever files are added or removed. */
+    onValueChange: (values: FileUploadResult[]) => void;
+    /** Fires once per rejected file. A batch can produce several. */
+    onError?: (error: MultipleFileUploadError) => void;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "type" | "value" | "onChange" | "onError" | "onSelect" | "accept" | "multiple"> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/file-upload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-upload/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-upload/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/file-upload/index.js

@@ -34,7 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUpload = void 0;
+exports.MultipleFileUpload = exports.FileUpload = void 0;
 exports.validateFile = validateFile;
 exports.humanizeSize = humanizeSize;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -226,10 +226,18 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
         event.target.value = '';
         handleFile(file);
     };
+    // `preventDefault` FIRST, and unconditionally. Returning before it does
+    // not merely refuse the drop: nothing cancels the browser's OWN action for
+    // a dropped file, so the window navigates to the file and whatever the
+    // page held unsaved is gone. A zone the host turned off has to swallow the
+    // drop, never hand it back to the browser. `dropEffect` says so to the
+    // cursor while the file is still in the air.
     const onDragOver = (event) => {
-        if (disabled)
-            return;
         event.preventDefault();
+        if (disabled) {
+            event.dataTransfer.dropEffect = 'none';
+            return;
+        }
         setDragActive(true);
     };
     const onDragLeave = (event) => {
@@ -237,10 +245,13 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
         setDragActive(false);
     };
     const onDrop = (event) => {
-        if (disabled)
-            return;
         event.preventDefault();
+        // Cleared before the gate, not after, so a host that disables the zone
+        // mid-drag does not leave it highlighted for a drag that can no longer
+        // land.
         setDragActive(false);
+        if (disabled)
+            return;
         handleFile(event.dataTransfer.files?.[0]);
     };
     // Mouse convenience only: clicking the styled zone opens the picker. A
@@ -270,3 +281,294 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
                                 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4", "aria-hidden": "true" }) })] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted-foreground", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose a file' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), errorText ? ((0, jsx_runtime_1.jsx)("p", { id: errorId, role: "alert", className: "text-system-error-h1a text-xs font-medium", children: errorText })) : null] }));
 });
 exports.FileUpload.displayName = 'FileUpload';
+/** The default English announcement for each rejection kind. */
+function defaultMultipleErrorMessage(error) {
+    if (error.kind === 'too-many') {
+        return `Too many files (max ${error.maxFiles}). ${error.file.name} was not added.`;
+    }
+    return defaultErrorMessage(error);
+}
+/** The default zone copy once the cap is reached, in grammatical English. */
+function defaultFullMessage(maxFiles) {
+    return maxFiles === 1
+        ? 'Maximum of 1 file reached.'
+        : `Maximum of ${maxFiles} files reached.`;
+}
+/**
+ * MultipleFileUpload: the plural sibling of FileUpload. Pick SEVERAL files,
+ * accumulate them across repeated picks, validate each one, cap the total, and
+ * hand back `FileUploadResult[]`.
+ *
+ * A SIBLING COMPONENT, not a `multiple` flag. This library already answers
+ * "this one takes many" that way (`Select` / `MultipleSelect`), and FileUpload
+ * strips `'multiple'` from its props on purpose: single-file is its contract,
+ * not a default it happens to have. A boolean would have forced every prop
+ * here into a union that means one thing when the flag is set and another when
+ * it is not: `value` as `Result | Result[] | null`, a `maxFiles` that is
+ * meaningless in half the configurations, and a remove control whose
+ * accessible name is fixed copy in one mode and per-file in the other. The
+ * plural props follow the house shape for plural components: `value?: T[]`
+ * with `onValueChange?: (values: T[]) => void`.
+ *
+ * WHERE THE LINE SITS: this component owns SELECTION and nothing after it.
+ * Choosing, validating, capping, listing and removing are its job; uploading
+ * is not. That split is not squeamishness about scope, it is where the
+ * knowledge actually lives. An upload needs an endpoint, an auth scheme, a
+ * concurrency policy, a retry policy and, very often, a parent id that does
+ * not exist yet when the files are chosen: the motivating host stages evidence
+ * files while a form is being filled and can only upload them against the id
+ * that its create call returns afterwards. None of that is knowable from
+ * inside a library primitive, and a component that guessed would have to be
+ * fought rather than used. So the host keeps its own per-file record with
+ * status and retry, and this component keeps the part a form can hold and
+ * validate: the chosen files. `FileUploadResult[]` is a value; an upload state
+ * machine is not.
+ *
+ * ACCUMULATION is the defining behaviour. A second pick ADDS to the selection
+ * rather than replacing it, because a user assembling five documents does it
+ * in two or three trips to the file dialog, not one. Everything else follows
+ * from that: room is measured against what is already selected, and the batch
+ * that overflows the cap still contributes the files that fit.
+ *
+ * A BATCH SURVIVES ITS OWN CASUALTIES. One file rejected for type, size or a
+ * failed read does not discard the rest of the batch, and it does not consume
+ * a slot either: validation runs over the WHOLE batch before the cap is
+ * applied, so a file that was never eligible cannot cost an eligible one its
+ * place, and `'too-many'` always names a file a slot would genuinely have
+ * taken. The alternative punishes
+ * a user for a mistake in one file by throwing away four good ones, and hands
+ * back no way to tell which was which. Every rejection is reported through
+ * `onError` and announced together in one `role="alert"`.
+ *
+ * Accessibility follows the sibling BELOW THE CAP: the real `<input
+ * type="file">` is `sr-only` but focusable and labelable, and never
+ * `aria-hidden`, so FormControl-injected ARIA and react-hook-form's focus on
+ * error both work while the picker is enabled. At the cap that changes, and
+ * the paragraph below says how.
+ * The file list sits OUTSIDE the click zone, so activating a remove control
+ * cannot also reopen the picker, and each remove control is named after its
+ * own file: a column of identical "Remove file" buttons tells a screen-reader
+ * user nothing about which row they are on.
+ *
+ * AT THE CAP the picker takes the native `disabled` attribute, and that DOES
+ * take it out of the tab order. This is the one state in which the input is
+ * not a focus target, and the one state in which focus-on-error cannot land on
+ * it, so it is a real cost rather than a free win. The cap has no counterpart
+ * in the single-file sibling, so the precedent followed here is
+ * `DateRangePicker`'s trigger: a control whose only job is to open a dialog has
+ * no state worth keeping focusable, and native `disabled` is what both removes
+ * it from the tab order and keeps the dialog shut. The alternative, an enabled
+ * picker that opens the file dialog and then refuses every file with
+ * `too-many`, is a control that lies about being available. What keeps the cap
+ * from being a dead end is the escape hatch: the remove controls answer to
+ * `disabled` alone and NEVER to the cap, so they stay focusable and removing
+ * one file reopens the picker.
+ */
+exports.MultipleFileUpload = React.forwardRef(function MultipleFileUpload({ accept, maxSizeBytes, maxFiles, value = [], readAs = 'text', labels, onValueChange, onError, disabled = false, id, className, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, ...rest }, ref) {
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => internalRef.current);
+    const reactId = React.useId();
+    const inputId = id ?? reactId;
+    const errorId = `${inputId}-file-upload-error`;
+    const [dragActive, setDragActive] = React.useState(false);
+    const [errors, setErrors] = React.useState([]);
+    // The authoritative base for the next append. Props win on every render, so
+    // the host stays in control; the commit below also writes through, so a
+    // second batch that settles before the host has re-rendered still appends to
+    // the first batch's result instead of overwriting it.
+    const valueRef = React.useRef(value);
+    React.useEffect(() => {
+        valueRef.current = value;
+    });
+    // Superseding is NOT the contract here the way it is in the single-file
+    // sibling — batches accumulate, so an in-flight read is never stale. The
+    // readers are tracked for the one case that does have to stop them: an
+    // unmount. A read that lands afterwards would settle its batch and commit,
+    // calling the host's `onValueChange` for a component that no longer exists.
+    const readersRef = React.useRef(new Set());
+    React.useEffect(() => () => {
+        for (const reader of readersRef.current)
+            reader.abort();
+        readersRef.current.clear();
+    }, []);
+    const invalid = ariaInvalid || errors.length > 0;
+    // Resolve the announcements BEFORE deciding whether the alert exists: a
+    // consumer that returns nothing for every rejection is opting out of this
+    // surface, and an association pointing at an unrendered node is worse than
+    // none.
+    const messages = errors
+        .map((failure) => labels?.error
+        ? labels.error(failure)
+        : defaultMultipleErrorMessage(failure))
+        .filter((message) => Boolean(message));
+    // A plain join, never `cn`: tailwind-merge treats these as class names and
+    // would drop an id that happens to look like a conflicting utility.
+    const describedBy = [ariaDescribedby, messages.length > 0 ? errorId : undefined]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    const full = maxFiles !== undefined && value.length >= maxFiles;
+    // Removing must stay possible at the cap, so only the PICKER closes.
+    const pickerDisabled = disabled || full;
+    const roomFor = (selected) => maxFiles === undefined
+        ? Number.POSITIVE_INFINITY
+        : Math.max(maxFiles - selected, 0);
+    // The cap is enforced HERE, at the only place that appends, because only the
+    // commit knows the base it lands on. `ingest` measures room too, but for an
+    // asynchronous batch it measures it BEFORE any read settles: two overlapping
+    // batches both see the pre-commit selection and would each believe they fit.
+    const commit = (accepted, rejections) => {
+        const room = roomFor(valueRef.current.length);
+        const fitting = accepted.slice(0, room);
+        const overflow = accepted[room];
+        const failures = overflow !== undefined && maxFiles !== undefined
+            ? [
+                ...rejections,
+                { kind: 'too-many', file: overflow.file, maxFiles }
+            ]
+            : rejections;
+        setErrors(failures);
+        for (const rejection of failures)
+            onError?.(rejection);
+        if (fitting.length === 0)
+            return;
+        const next = [...valueRef.current, ...fitting];
+        valueRef.current = next;
+        onValueChange(next);
+    };
+    const ingest = (incoming) => {
+        if (incoming.length === 0)
+            return;
+        const room = roomFor(valueRef.current.length);
+        const rejections = [];
+        // Validate EVERY file BEFORE the cap is applied. Slicing to the remaining
+        // room first would let a file that was never eligible consume a slot a
+        // good file could have used — one bad pick costing a good one, which is
+        // the opposite of a batch surviving its own casualties — and it would
+        // leave every file past the slice window neither validated nor reported.
+        // Validation is pure metadata (size and accept), so running it over files
+        // that may not fit costs nothing.
+        const eligible = [];
+        for (const file of incoming) {
+            const rejection = validateFile(file, { accept, maxSizeBytes });
+            // Continue rather than abort: one bad file must not cost the good ones.
+            if (rejection) {
+                rejections.push(rejection);
+                continue;
+            }
+            eligible.push(file);
+        }
+        // The cap then applies to the SURVIVORS. One rejection for the batch,
+        // naming the FIRST eligible file that did not fit: naming one already
+        // refused for its size or type would blame the cap for the wrong thing,
+        // and repeating it per overflowing file buries the actionable part.
+        if (eligible.length > room && maxFiles !== undefined) {
+            rejections.push({ kind: 'too-many', file: eligible[room], maxFiles });
+        }
+        const candidates = eligible.slice(0, room);
+        // Binary path: no decode, no reader, no retained garbage string.
+        if (readAs === 'none') {
+            commit(candidates.map((file) => ({ file, text: '' })), rejections);
+            return;
+        }
+        if (candidates.length === 0) {
+            commit([], rejections);
+            return;
+        }
+        // Slot-per-candidate so the emitted batch keeps PICK order regardless of
+        // the order the reads settle in. A null slot is a read that failed; the
+        // batch commits once every read has settled, one way or the other.
+        const slots = new Array(candidates.length).fill(null);
+        let remaining = candidates.length;
+        const settle = () => {
+            remaining -= 1;
+            if (remaining > 0)
+                return;
+            const accepted = [];
+            const readFailures = [];
+            slots.forEach((slot, index) => {
+                if (slot)
+                    accepted.push(slot);
+                else
+                    readFailures.push({ kind: 'read-failed', file: candidates[index] });
+            });
+            commit(accepted, [...rejections, ...readFailures]);
+        };
+        candidates.forEach((file, index) => {
+            const reader = new FileReader();
+            readersRef.current.add(reader);
+            // Deliberately no `onabort` handler: an aborted read must NOT settle,
+            // or the batch would commit at exactly the moment we are stopping it.
+            reader.onload = () => {
+                readersRef.current.delete(reader);
+                slots[index] = { file, text: String(reader.result ?? '') };
+                settle();
+            };
+            reader.onerror = () => {
+                readersRef.current.delete(reader);
+                settle();
+            };
+            reader.readAsText(file);
+        });
+    };
+    const onInputChange = (event) => {
+        const files = Array.from(event.target.files ?? []);
+        // Release the FileList the moment it has been read, or re-picking the same
+        // file is silently a no-op: the browser fires `change` only when the
+        // selection DIFFERS from what the input already holds.
+        event.target.value = '';
+        ingest(files);
+    };
+    // `preventDefault` FIRST, and unconditionally. Returning before it does
+    // not merely refuse the drop: nothing cancels the browser's OWN action for
+    // a dropped file, so the window navigates to the file and whatever the
+    // page held unsaved is gone. A zone the host turned off has to swallow the
+    // drop, never hand it back to the browser. `dropEffect` says so to the
+    // cursor while the file is still in the air.
+    const onDragOver = (event) => {
+        event.preventDefault();
+        if (disabled) {
+            event.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        setDragActive(true);
+    };
+    const onDragLeave = (event) => {
+        event.preventDefault();
+        setDragActive(false);
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        // Cleared before the gate, not after, so a host that disables the zone
+        // mid-drag does not leave it highlighted for a drag that can no longer
+        // land.
+        setDragActive(false);
+        if (disabled)
+            return;
+        // Deliberately NOT gated on `full`: a drop onto a full zone is answered
+        // with the too-many rejection, which says why, instead of nothing at all.
+        ingest(Array.from(event.dataTransfer.files ?? []));
+    };
+    // Mouse convenience only. A click that ORIGINATED on the input already opens
+    // the picker natively and bubbles up here, so ignore it or it opens twice.
+    const openPicker = (event) => {
+        if (pickerDisabled || event.target === internalRef.current)
+            return;
+        internalRef.current?.click();
+    };
+    const removeAt = (index) => {
+        // By index, not by name: two files can share a filename and identity is
+        // what the row actually stands for.
+        const next = valueRef.current.filter((_, position) => position !== index);
+        valueRef.current = next;
+        onValueChange(next);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
+                    'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', pickerDisabled
+                    ? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
+                    : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", multiple: true, accept: accept, disabled: pickerDisabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), full && maxFiles !== undefined ? ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground", children: labels?.full
+                            ? labels.full(maxFiles)
+                            : defaultFullMessage(maxFiles) })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted-foreground", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose files' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), value.length > 0 ? ((0, jsx_runtime_1.jsx)("ul", { className: "space-y-1", children: value.map((entry, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex items-center gap-3 text-sm", children: [(0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: entry.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(entry.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove
+                                ? labels.remove(entry.file)
+                                : `Remove ${entry.file.name}`, onClick: () => removeAt(index), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4", "aria-hidden": "true" }) })] }, `${entry.file.name}-${index}`))) })) : null, messages.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { id: errorId, role: "alert", className: "space-y-1", children: messages.map((message, index) => ((0, jsx_runtime_1.jsx)("p", { className: "text-system-error-h1a text-xs font-medium", children: message }, index))) })) : null] }));
+});
+exports.MultipleFileUpload.displayName = 'MultipleFileUpload';

package/dist/esm/components/ui/file-upload/index.d.ts

@@ -158,4 +158,163 @@ export declare const FileUpload: React.ForwardRefExoticComponent<{
     'aria-describedby'?: string;
     'aria-label'?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "type" | "value" | "onChange" | "onError" | "onSelect" | "accept" | "multiple"> & React.RefAttributes<HTMLInputElement>>;
+/**
+ * A rejection from `MultipleFileUpload`: every rejection the single-file
+ * sibling can produce, plus the one only a plural selection has — the cap.
+ */
+export type MultipleFileUploadError = FileUploadError | {
+    kind: 'too-many';
+    file: File;
+    maxFiles: number;
+};
+/** Overrides for the fixed English copy. Every field is optional. */
+export interface MultipleFileUploadLabels {
+    /** Emphasised call to action in the empty zone. Defaults to "Choose files". */
+    action?: string;
+    /** Trailing hint after the action. Defaults to "or drag and drop". */
+    hint?: string;
+    /** Zone copy once `maxFiles` is reached. Receives the cap to interpolate. */
+    full?: (maxFiles: number) => string;
+    /**
+     * Accessible name of a row's remove control. Receives that row's file, so the
+     * name identifies it. Defaults to `Remove <filename>`.
+     */
+    remove?: (file: File) => string;
+    /**
+     * Copy for one rejection. Called once per rejection in a batch; use the
+     * exported `humanizeSize` to format `maxSizeBytes`. Return `null`,
+     * `undefined` or `''` to stay SILENT and leave the announcement to the host's
+     * own `onError` handling. A batch whose every message is silent renders no
+     * alert at all.
+     */
+    error?: (error: MultipleFileUploadError) => string | null | undefined;
+}
+export type MultipleFileUploadProps = {
+    /** Comma-separated accept filter. Applied to every file, extension or MIME. */
+    accept?: string;
+    /** Inclusive per-file byte ceiling. Applied to each file independently. */
+    maxSizeBytes?: number;
+    /** Ceiling on the TOTAL selection. Omitted means unbounded. */
+    maxFiles?: number;
+    /** Controlled selection. The host owns state; defaults to empty. */
+    value?: FileUploadResult[];
+    /**
+     * How each accepted file is handed over. `'text'` (default) decodes UTF-8
+     * and populates `text`; `'none'` skips decoding entirely and is the mode
+     * BINARY files need. See FileUpload's `readAs` for why.
+     */
+    readAs?: FileUploadReadAs;
+    /** Override the fixed English copy. Omitted fields keep their defaults. */
+    labels?: MultipleFileUploadLabels;
+    /** Fires with the WHOLE next selection whenever files are added or removed. */
+    onValueChange: (values: FileUploadResult[]) => void;
+    /** Fires once per rejected file. A batch can produce several. */
+    onError?: (error: MultipleFileUploadError) => void;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'accept' | 'value' | 'disabled' | 'onChange' | 'onSelect' | 'className' | 'multiple' | 'onError'>;
+/**
+ * MultipleFileUpload: the plural sibling of FileUpload. Pick SEVERAL files,
+ * accumulate them across repeated picks, validate each one, cap the total, and
+ * hand back `FileUploadResult[]`.
+ *
+ * A SIBLING COMPONENT, not a `multiple` flag. This library already answers
+ * "this one takes many" that way (`Select` / `MultipleSelect`), and FileUpload
+ * strips `'multiple'` from its props on purpose: single-file is its contract,
+ * not a default it happens to have. A boolean would have forced every prop
+ * here into a union that means one thing when the flag is set and another when
+ * it is not: `value` as `Result | Result[] | null`, a `maxFiles` that is
+ * meaningless in half the configurations, and a remove control whose
+ * accessible name is fixed copy in one mode and per-file in the other. The
+ * plural props follow the house shape for plural components: `value?: T[]`
+ * with `onValueChange?: (values: T[]) => void`.
+ *
+ * WHERE THE LINE SITS: this component owns SELECTION and nothing after it.
+ * Choosing, validating, capping, listing and removing are its job; uploading
+ * is not. That split is not squeamishness about scope, it is where the
+ * knowledge actually lives. An upload needs an endpoint, an auth scheme, a
+ * concurrency policy, a retry policy and, very often, a parent id that does
+ * not exist yet when the files are chosen: the motivating host stages evidence
+ * files while a form is being filled and can only upload them against the id
+ * that its create call returns afterwards. None of that is knowable from
+ * inside a library primitive, and a component that guessed would have to be
+ * fought rather than used. So the host keeps its own per-file record with
+ * status and retry, and this component keeps the part a form can hold and
+ * validate: the chosen files. `FileUploadResult[]` is a value; an upload state
+ * machine is not.
+ *
+ * ACCUMULATION is the defining behaviour. A second pick ADDS to the selection
+ * rather than replacing it, because a user assembling five documents does it
+ * in two or three trips to the file dialog, not one. Everything else follows
+ * from that: room is measured against what is already selected, and the batch
+ * that overflows the cap still contributes the files that fit.
+ *
+ * A BATCH SURVIVES ITS OWN CASUALTIES. One file rejected for type, size or a
+ * failed read does not discard the rest of the batch, and it does not consume
+ * a slot either: validation runs over the WHOLE batch before the cap is
+ * applied, so a file that was never eligible cannot cost an eligible one its
+ * place, and `'too-many'` always names a file a slot would genuinely have
+ * taken. The alternative punishes
+ * a user for a mistake in one file by throwing away four good ones, and hands
+ * back no way to tell which was which. Every rejection is reported through
+ * `onError` and announced together in one `role="alert"`.
+ *
+ * Accessibility follows the sibling BELOW THE CAP: the real `<input
+ * type="file">` is `sr-only` but focusable and labelable, and never
+ * `aria-hidden`, so FormControl-injected ARIA and react-hook-form's focus on
+ * error both work while the picker is enabled. At the cap that changes, and
+ * the paragraph below says how.
+ * The file list sits OUTSIDE the click zone, so activating a remove control
+ * cannot also reopen the picker, and each remove control is named after its
+ * own file: a column of identical "Remove file" buttons tells a screen-reader
+ * user nothing about which row they are on.
+ *
+ * AT THE CAP the picker takes the native `disabled` attribute, and that DOES
+ * take it out of the tab order. This is the one state in which the input is
+ * not a focus target, and the one state in which focus-on-error cannot land on
+ * it, so it is a real cost rather than a free win. The cap has no counterpart
+ * in the single-file sibling, so the precedent followed here is
+ * `DateRangePicker`'s trigger: a control whose only job is to open a dialog has
+ * no state worth keeping focusable, and native `disabled` is what both removes
+ * it from the tab order and keeps the dialog shut. The alternative, an enabled
+ * picker that opens the file dialog and then refuses every file with
+ * `too-many`, is a control that lies about being available. What keeps the cap
+ * from being a dead end is the escape hatch: the remove controls answer to
+ * `disabled` alone and NEVER to the cap, so they stay focusable and removing
+ * one file reopens the picker.
+ */
+export declare const MultipleFileUpload: React.ForwardRefExoticComponent<{
+    /** Comma-separated accept filter. Applied to every file, extension or MIME. */
+    accept?: string;
+    /** Inclusive per-file byte ceiling. Applied to each file independently. */
+    maxSizeBytes?: number;
+    /** Ceiling on the TOTAL selection. Omitted means unbounded. */
+    maxFiles?: number;
+    /** Controlled selection. The host owns state; defaults to empty. */
+    value?: FileUploadResult[];
+    /**
+     * How each accepted file is handed over. `'text'` (default) decodes UTF-8
+     * and populates `text`; `'none'` skips decoding entirely and is the mode
+     * BINARY files need. See FileUpload's `readAs` for why.
+     */
+    readAs?: FileUploadReadAs;
+    /** Override the fixed English copy. Omitted fields keep their defaults. */
+    labels?: MultipleFileUploadLabels;
+    /** Fires with the WHOLE next selection whenever files are added or removed. */
+    onValueChange: (values: FileUploadResult[]) => void;
+    /** Fires once per rejected file. A batch can produce several. */
+    onError?: (error: MultipleFileUploadError) => void;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "disabled" | "type" | "value" | "onChange" | "onError" | "onSelect" | "accept" | "multiple"> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ui/file-upload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/file-upload/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/file-upload/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ui/file-upload/index.js

@@ -188,10 +188,18 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
         event.target.value = '';
         handleFile(file);
     };
+    // `preventDefault` FIRST, and unconditionally. Returning before it does
+    // not merely refuse the drop: nothing cancels the browser's OWN action for
+    // a dropped file, so the window navigates to the file and whatever the
+    // page held unsaved is gone. A zone the host turned off has to swallow the
+    // drop, never hand it back to the browser. `dropEffect` says so to the
+    // cursor while the file is still in the air.
     const onDragOver = (event) => {
-        if (disabled)
-            return;
         event.preventDefault();
+        if (disabled) {
+            event.dataTransfer.dropEffect = 'none';
+            return;
+        }
         setDragActive(true);
     };
     const onDragLeave = (event) => {
@@ -199,10 +207,13 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
         setDragActive(false);
     };
     const onDrop = (event) => {
-        if (disabled)
-            return;
         event.preventDefault();
+        // Cleared before the gate, not after, so a host that disables the zone
+        // mid-drag does not leave it highlighted for a drag that can no longer
+        // land.
         setDragActive(false);
+        if (disabled)
+            return;
         handleFile(event.dataTransfer.files?.[0]);
     };
     // Mouse convenience only: clicking the styled zone opens the picker. A
@@ -232,3 +243,294 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
                                 }, children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] })) : (_jsxs("span", { className: "text-muted-foreground", children: [_jsx("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose a file' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), errorText ? (_jsx("p", { id: errorId, role: "alert", className: "text-system-error-h1a text-xs font-medium", children: errorText })) : null] }));
 });
 FileUpload.displayName = 'FileUpload';
+/** The default English announcement for each rejection kind. */
+function defaultMultipleErrorMessage(error) {
+    if (error.kind === 'too-many') {
+        return `Too many files (max ${error.maxFiles}). ${error.file.name} was not added.`;
+    }
+    return defaultErrorMessage(error);
+}
+/** The default zone copy once the cap is reached, in grammatical English. */
+function defaultFullMessage(maxFiles) {
+    return maxFiles === 1
+        ? 'Maximum of 1 file reached.'
+        : `Maximum of ${maxFiles} files reached.`;
+}
+/**
+ * MultipleFileUpload: the plural sibling of FileUpload. Pick SEVERAL files,
+ * accumulate them across repeated picks, validate each one, cap the total, and
+ * hand back `FileUploadResult[]`.
+ *
+ * A SIBLING COMPONENT, not a `multiple` flag. This library already answers
+ * "this one takes many" that way (`Select` / `MultipleSelect`), and FileUpload
+ * strips `'multiple'` from its props on purpose: single-file is its contract,
+ * not a default it happens to have. A boolean would have forced every prop
+ * here into a union that means one thing when the flag is set and another when
+ * it is not: `value` as `Result | Result[] | null`, a `maxFiles` that is
+ * meaningless in half the configurations, and a remove control whose
+ * accessible name is fixed copy in one mode and per-file in the other. The
+ * plural props follow the house shape for plural components: `value?: T[]`
+ * with `onValueChange?: (values: T[]) => void`.
+ *
+ * WHERE THE LINE SITS: this component owns SELECTION and nothing after it.
+ * Choosing, validating, capping, listing and removing are its job; uploading
+ * is not. That split is not squeamishness about scope, it is where the
+ * knowledge actually lives. An upload needs an endpoint, an auth scheme, a
+ * concurrency policy, a retry policy and, very often, a parent id that does
+ * not exist yet when the files are chosen: the motivating host stages evidence
+ * files while a form is being filled and can only upload them against the id
+ * that its create call returns afterwards. None of that is knowable from
+ * inside a library primitive, and a component that guessed would have to be
+ * fought rather than used. So the host keeps its own per-file record with
+ * status and retry, and this component keeps the part a form can hold and
+ * validate: the chosen files. `FileUploadResult[]` is a value; an upload state
+ * machine is not.
+ *
+ * ACCUMULATION is the defining behaviour. A second pick ADDS to the selection
+ * rather than replacing it, because a user assembling five documents does it
+ * in two or three trips to the file dialog, not one. Everything else follows
+ * from that: room is measured against what is already selected, and the batch
+ * that overflows the cap still contributes the files that fit.
+ *
+ * A BATCH SURVIVES ITS OWN CASUALTIES. One file rejected for type, size or a
+ * failed read does not discard the rest of the batch, and it does not consume
+ * a slot either: validation runs over the WHOLE batch before the cap is
+ * applied, so a file that was never eligible cannot cost an eligible one its
+ * place, and `'too-many'` always names a file a slot would genuinely have
+ * taken. The alternative punishes
+ * a user for a mistake in one file by throwing away four good ones, and hands
+ * back no way to tell which was which. Every rejection is reported through
+ * `onError` and announced together in one `role="alert"`.
+ *
+ * Accessibility follows the sibling BELOW THE CAP: the real `<input
+ * type="file">` is `sr-only` but focusable and labelable, and never
+ * `aria-hidden`, so FormControl-injected ARIA and react-hook-form's focus on
+ * error both work while the picker is enabled. At the cap that changes, and
+ * the paragraph below says how.
+ * The file list sits OUTSIDE the click zone, so activating a remove control
+ * cannot also reopen the picker, and each remove control is named after its
+ * own file: a column of identical "Remove file" buttons tells a screen-reader
+ * user nothing about which row they are on.
+ *
+ * AT THE CAP the picker takes the native `disabled` attribute, and that DOES
+ * take it out of the tab order. This is the one state in which the input is
+ * not a focus target, and the one state in which focus-on-error cannot land on
+ * it, so it is a real cost rather than a free win. The cap has no counterpart
+ * in the single-file sibling, so the precedent followed here is
+ * `DateRangePicker`'s trigger: a control whose only job is to open a dialog has
+ * no state worth keeping focusable, and native `disabled` is what both removes
+ * it from the tab order and keeps the dialog shut. The alternative, an enabled
+ * picker that opens the file dialog and then refuses every file with
+ * `too-many`, is a control that lies about being available. What keeps the cap
+ * from being a dead end is the escape hatch: the remove controls answer to
+ * `disabled` alone and NEVER to the cap, so they stay focusable and removing
+ * one file reopens the picker.
+ */
+export const MultipleFileUpload = React.forwardRef(function MultipleFileUpload({ accept, maxSizeBytes, maxFiles, value = [], readAs = 'text', labels, onValueChange, onError, disabled = false, id, className, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, ...rest }, ref) {
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => internalRef.current);
+    const reactId = React.useId();
+    const inputId = id ?? reactId;
+    const errorId = `${inputId}-file-upload-error`;
+    const [dragActive, setDragActive] = React.useState(false);
+    const [errors, setErrors] = React.useState([]);
+    // The authoritative base for the next append. Props win on every render, so
+    // the host stays in control; the commit below also writes through, so a
+    // second batch that settles before the host has re-rendered still appends to
+    // the first batch's result instead of overwriting it.
+    const valueRef = React.useRef(value);
+    React.useEffect(() => {
+        valueRef.current = value;
+    });
+    // Superseding is NOT the contract here the way it is in the single-file
+    // sibling — batches accumulate, so an in-flight read is never stale. The
+    // readers are tracked for the one case that does have to stop them: an
+    // unmount. A read that lands afterwards would settle its batch and commit,
+    // calling the host's `onValueChange` for a component that no longer exists.
+    const readersRef = React.useRef(new Set());
+    React.useEffect(() => () => {
+        for (const reader of readersRef.current)
+            reader.abort();
+        readersRef.current.clear();
+    }, []);
+    const invalid = ariaInvalid || errors.length > 0;
+    // Resolve the announcements BEFORE deciding whether the alert exists: a
+    // consumer that returns nothing for every rejection is opting out of this
+    // surface, and an association pointing at an unrendered node is worse than
+    // none.
+    const messages = errors
+        .map((failure) => labels?.error
+        ? labels.error(failure)
+        : defaultMultipleErrorMessage(failure))
+        .filter((message) => Boolean(message));
+    // A plain join, never `cn`: tailwind-merge treats these as class names and
+    // would drop an id that happens to look like a conflicting utility.
+    const describedBy = [ariaDescribedby, messages.length > 0 ? errorId : undefined]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    const full = maxFiles !== undefined && value.length >= maxFiles;
+    // Removing must stay possible at the cap, so only the PICKER closes.
+    const pickerDisabled = disabled || full;
+    const roomFor = (selected) => maxFiles === undefined
+        ? Number.POSITIVE_INFINITY
+        : Math.max(maxFiles - selected, 0);
+    // The cap is enforced HERE, at the only place that appends, because only the
+    // commit knows the base it lands on. `ingest` measures room too, but for an
+    // asynchronous batch it measures it BEFORE any read settles: two overlapping
+    // batches both see the pre-commit selection and would each believe they fit.
+    const commit = (accepted, rejections) => {
+        const room = roomFor(valueRef.current.length);
+        const fitting = accepted.slice(0, room);
+        const overflow = accepted[room];
+        const failures = overflow !== undefined && maxFiles !== undefined
+            ? [
+                ...rejections,
+                { kind: 'too-many', file: overflow.file, maxFiles }
+            ]
+            : rejections;
+        setErrors(failures);
+        for (const rejection of failures)
+            onError?.(rejection);
+        if (fitting.length === 0)
+            return;
+        const next = [...valueRef.current, ...fitting];
+        valueRef.current = next;
+        onValueChange(next);
+    };
+    const ingest = (incoming) => {
+        if (incoming.length === 0)
+            return;
+        const room = roomFor(valueRef.current.length);
+        const rejections = [];
+        // Validate EVERY file BEFORE the cap is applied. Slicing to the remaining
+        // room first would let a file that was never eligible consume a slot a
+        // good file could have used — one bad pick costing a good one, which is
+        // the opposite of a batch surviving its own casualties — and it would
+        // leave every file past the slice window neither validated nor reported.
+        // Validation is pure metadata (size and accept), so running it over files
+        // that may not fit costs nothing.
+        const eligible = [];
+        for (const file of incoming) {
+            const rejection = validateFile(file, { accept, maxSizeBytes });
+            // Continue rather than abort: one bad file must not cost the good ones.
+            if (rejection) {
+                rejections.push(rejection);
+                continue;
+            }
+            eligible.push(file);
+        }
+        // The cap then applies to the SURVIVORS. One rejection for the batch,
+        // naming the FIRST eligible file that did not fit: naming one already
+        // refused for its size or type would blame the cap for the wrong thing,
+        // and repeating it per overflowing file buries the actionable part.
+        if (eligible.length > room && maxFiles !== undefined) {
+            rejections.push({ kind: 'too-many', file: eligible[room], maxFiles });
+        }
+        const candidates = eligible.slice(0, room);
+        // Binary path: no decode, no reader, no retained garbage string.
+        if (readAs === 'none') {
+            commit(candidates.map((file) => ({ file, text: '' })), rejections);
+            return;
+        }
+        if (candidates.length === 0) {
+            commit([], rejections);
+            return;
+        }
+        // Slot-per-candidate so the emitted batch keeps PICK order regardless of
+        // the order the reads settle in. A null slot is a read that failed; the
+        // batch commits once every read has settled, one way or the other.
+        const slots = new Array(candidates.length).fill(null);
+        let remaining = candidates.length;
+        const settle = () => {
+            remaining -= 1;
+            if (remaining > 0)
+                return;
+            const accepted = [];
+            const readFailures = [];
+            slots.forEach((slot, index) => {
+                if (slot)
+                    accepted.push(slot);
+                else
+                    readFailures.push({ kind: 'read-failed', file: candidates[index] });
+            });
+            commit(accepted, [...rejections, ...readFailures]);
+        };
+        candidates.forEach((file, index) => {
+            const reader = new FileReader();
+            readersRef.current.add(reader);
+            // Deliberately no `onabort` handler: an aborted read must NOT settle,
+            // or the batch would commit at exactly the moment we are stopping it.
+            reader.onload = () => {
+                readersRef.current.delete(reader);
+                slots[index] = { file, text: String(reader.result ?? '') };
+                settle();
+            };
+            reader.onerror = () => {
+                readersRef.current.delete(reader);
+                settle();
+            };
+            reader.readAsText(file);
+        });
+    };
+    const onInputChange = (event) => {
+        const files = Array.from(event.target.files ?? []);
+        // Release the FileList the moment it has been read, or re-picking the same
+        // file is silently a no-op: the browser fires `change` only when the
+        // selection DIFFERS from what the input already holds.
+        event.target.value = '';
+        ingest(files);
+    };
+    // `preventDefault` FIRST, and unconditionally. Returning before it does
+    // not merely refuse the drop: nothing cancels the browser's OWN action for
+    // a dropped file, so the window navigates to the file and whatever the
+    // page held unsaved is gone. A zone the host turned off has to swallow the
+    // drop, never hand it back to the browser. `dropEffect` says so to the
+    // cursor while the file is still in the air.
+    const onDragOver = (event) => {
+        event.preventDefault();
+        if (disabled) {
+            event.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        setDragActive(true);
+    };
+    const onDragLeave = (event) => {
+        event.preventDefault();
+        setDragActive(false);
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        // Cleared before the gate, not after, so a host that disables the zone
+        // mid-drag does not leave it highlighted for a drag that can no longer
+        // land.
+        setDragActive(false);
+        if (disabled)
+            return;
+        // Deliberately NOT gated on `full`: a drop onto a full zone is answered
+        // with the too-many rejection, which says why, instead of nothing at all.
+        ingest(Array.from(event.dataTransfer.files ?? []));
+    };
+    // Mouse convenience only. A click that ORIGINATED on the input already opens
+    // the picker natively and bubbles up here, so ignore it or it opens twice.
+    const openPicker = (event) => {
+        if (pickerDisabled || event.target === internalRef.current)
+            return;
+        internalRef.current?.click();
+    };
+    const removeAt = (index) => {
+        // By index, not by name: two files can share a filename and identity is
+        // what the row actually stands for.
+        const next = valueRef.current.filter((_, position) => position !== index);
+        valueRef.current = next;
+        onValueChange(next);
+    };
+    return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: cn('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
+                    'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', pickerDisabled
+                    ? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
+                    : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [_jsx("input", { ref: internalRef, id: inputId, type: "file", multiple: true, accept: accept, disabled: pickerDisabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), _jsx(Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), full && maxFiles !== undefined ? (_jsx("span", { className: "text-muted-foreground", children: labels?.full
+                            ? labels.full(maxFiles)
+                            : defaultFullMessage(maxFiles) })) : (_jsxs("span", { className: "text-muted-foreground", children: [_jsx("span", { className: "text-foreground font-medium", children: labels?.action ?? 'Choose files' }), ' ', labels?.hint ?? 'or drag and drop'] }))] }), value.length > 0 ? (_jsx("ul", { className: "space-y-1", children: value.map((entry, index) => (_jsxs("li", { className: "flex items-center gap-3 text-sm", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [_jsx("span", { className: "text-foreground font-medium", children: entry.file.name }), ' ', _jsx("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(entry.file.size) })] }), _jsx(IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove
+                                ? labels.remove(entry.file)
+                                : `Remove ${entry.file.name}`, onClick: () => removeAt(index), children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] }, `${entry.file.name}-${index}`))) })) : null, messages.length > 0 ? (_jsx("div", { id: errorId, role: "alert", className: "space-y-1", children: messages.map((message, index) => (_jsx("p", { className: "text-system-error-h1a text-xs font-medium", children: message }, index))) })) : null] }));
+});
+MultipleFileUpload.displayName = 'MultipleFileUpload';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {