@lerianstudio/sindarian-ui 1.4.0-beta.8 → 2.0.0-beta.10

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

@@ -34,15 +34,23 @@ 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");
 /**
- * FileUpload — a controlled "pick a file, read it to text, hand back the text"
- * primitive. The defining job: select one file (by click, keyboard, or
- * drag-and-drop), validate it against an accept filter + a byte ceiling, read
- * it as UTF-8 via FileReader.readAsText, and emit `{ file, text }`. Binary/DER
- * (.pfx/.p12) is explicitly OUT of scope — readAsText only.
+ * FileUpload — a controlled "pick a file, hand it back" primitive. The defining
+ * job: select one file (by click, keyboard, or drag-and-drop), validate it
+ * against an accept filter + a byte ceiling, and emit `{ file, text }`.
+ *
+ * `readAs` decides whether the bytes are decoded on the way through. `'text'`
+ * (the default) reads UTF-8 via FileReader.readAsText, which is what a PEM/CSV
+ * host wants. `'none'` hands the `File` over untouched and is the only mode a
+ * BINARY file can use: a PDF, XLSX or PFX put through readAsText decodes into
+ * replacement-character garbage, and that garbage string is then retained for
+ * as long as the host holds the value — 20 MiB of PDF became a useless 20 MiB
+ * string, and the host still had to read the file a second time to get at the
+ * real bytes.
  *
  * The real `<input type="file">` IS the accessible control: it is `sr-only`
  * (visually hidden) but focusable and labelable — never `aria-hidden`, never
@@ -63,6 +71,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * a value, so it cannot masquerade as valid. `accept` is validated against
  * BOTH extension and MIME because the native `accept` attribute is only a
  * browser hint and is bypassable via drag-drop.
+ *
+ * A host that already announces the rejection itself — a toast in its own
+ * locale, driven off `onError` — silences this one by returning nothing from
+ * `labels.error`. Two announcements for one event, in two languages, is the
+ * accessibility defect; the wording is not.
  */
 const React = __importStar(require("react"));
 const lucide_react_1 = require("lucide-react");
@@ -105,7 +118,11 @@ function matchesAccept(file, accept) {
         return mime === token;
     });
 }
-/** Humanize a byte count for the selected-file chip. Binary units, 1 decimal. */
+/**
+ * Humanize a byte count for the selected-file chip. Binary units, 1 decimal.
+ * Exported so a `labels.error` override can format `maxSizeBytes` exactly the
+ * way the chip and the default message do, instead of re-deriving binary units.
+ */
 function humanizeSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
@@ -118,8 +135,8 @@ function humanizeSize(bytes) {
     }
     return `${size.toFixed(1)} ${units[unit]}`;
 }
-/** A human-readable announcement for each rejection kind. */
-function errorMessage(error) {
+/** The default English announcement for each rejection kind. */
+function defaultErrorMessage(error) {
     switch (error.kind) {
         case 'too-large':
             return `File is too large (max ${humanizeSize(error.maxSizeBytes)}).`;
@@ -129,7 +146,7 @@ function errorMessage(error) {
             return 'Could not read the file.';
     }
 }
-exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes, value, onSelect, onError, disabled = false, id, className, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, ...rest }, ref) {
+exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes, value, readAs = 'text', labels, onSelect, 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();
@@ -141,12 +158,21 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
     // component's own validation/read error — a self-detected bad pick must read
     // as invalid even outside a form.
     const invalid = ariaInvalid || error !== null;
+    // Resolve the announcement BEFORE deciding whether the alert exists: a
+    // consumer that returns nothing is opting out of this surface entirely,
+    // and an association pointing at an unrendered node is worse than none.
+    const resolved = error
+        ? labels?.error
+            ? labels.error(error)
+            : defaultErrorMessage(error)
+        : null;
+    const errorText = resolved ? resolved : null;
     // Radix Slot OVERWRITES aria-describedby (it does not merge), so merge the
     // primitive's own role=alert error id with the FormControl-injected one so
     // both associations coexist on the input. 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, error ? errorId : undefined]
+    const describedBy = [ariaDescribedby, errorText ? errorId : undefined]
         .filter(Boolean)
         .join(' ') || undefined;
     // Last-resolved-wins: a slow read for pick A must not overwrite a newer
@@ -162,6 +188,15 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
             onError?.(validationError);
             return;
         }
+        // Binary path: no decode, no reader, no retained garbage string. The
+        // stale-rejection clear still has to happen here — the alert is this
+        // component's own state and a good pick must retire it.
+        if (readAs === 'none') {
+            readerRef.current = null;
+            setError(null);
+            onSelect({ file, text: '' });
+            return;
+        }
         const reader = new FileReader();
         readerRef.current = reader;
         reader.onload = () => {
@@ -191,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) => {
@@ -202,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
@@ -228,10 +274,301 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
     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', disabled
                     ? '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", accept: accept, disabled: disabled, 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" }), value ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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: value.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": "Remove file", onClick: (event) => {
+                    : 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", accept: accept, disabled: disabled, 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" }), value ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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: value.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove?.trim() ? labels.remove : 'Remove file', onClick: (event) => {
                                     // Don't bubble to the zone's openPicker and re-open the dialog.
                                     event.stopPropagation();
                                     clear();
-                                }, 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: "Choose a file" }), ' ', "or drag and drop"] }))] }), error ? ((0, jsx_runtime_1.jsx)("p", { id: errorId, role: "alert", className: "text-destructive text-xs font-medium", children: errorMessage(error) })) : null] }));
+                                }, 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/components/ui/form.d.ts

@@ -16,7 +16,11 @@ declare const useFormField: () => {
     formDescriptionId: string;
     formMessageId: string;
     required: boolean | undefined;
+    described: Record<DescribingSlot, boolean> | undefined;
+    onDescribedChange: ((slot: DescribingSlot, rendered: boolean) => void) | undefined;
 };
+/** The two slots that can describe a control, in the order a reader hears them. */
+type DescribingSlot = 'message' | 'description';
 export type FormItemProps = React.HTMLAttributes<HTMLDivElement> & {
     required?: boolean;
 };

package/dist/components/ui/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAS9D,QAAA,MAAM,IAAI,4MAAe,CAAA;AAazB,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,sBAMtC,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;CAyBjB,CAAA;AAWD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,QAAQ;eAHD,OAAO;wCAanB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CACzD,OAAO,cAAc,CAAC,IAAI,CAC3B,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,SAAS;YAHL,KAAK,CAAC,SAAS;0CA2BvB,CAAA;AAGF,eAAO,MAAM,WAAW,GAAI,yBAAyB,oBAAoB,sBASxE,CAAA;AAED,QAAA,MAAM,WAAW;;gFAmBf,CAAA;AAGF,QAAA,MAAM,eAAe,yHAcnB,CAAA;AAGF,QAAA,MAAM,WAAW,yHAuBf,CAAA;AAGF,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACV,CAAA"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAS9D,QAAA,MAAM,IAAI,4MAAe,CAAA;AAazB,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,sBAMtC,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;;+BA4CW,cAAc,YAAY,OAAO,KAAK,IAAI;CAjBtE,CAAA;AAED,mFAAmF;AACnF,KAAK,cAAc,GAAG,SAAS,GAAG,aAAa,CAAA;AAwC/C,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,QAAQ;eAHD,OAAO;wCA8BnB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CACzD,OAAO,cAAc,CAAC,IAAI,CAC3B,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,SAAS;YAHL,KAAK,CAAC,SAAS;0CA6BvB,CAAA;AAGF,eAAO,MAAM,WAAW,GAAI,yBAAyB,oBAAoB,sBASxE,CAAA;AAED,QAAA,MAAM,WAAW;;gFAgCf,CAAA;AAGF,QAAA,MAAM,eAAe,yHAgBnB,CAAA;AAGF,QAAA,MAAM,WAAW,yHA6Bf,CAAA;AAGF,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACV,CAAA"}

package/dist/components/ui/form.js

@@ -61,7 +61,7 @@ const useFormField = () => {
     const fieldState = form && fieldContext.name
         ? form.getFieldState(fieldContext.name, form.formState)
         : undefined;
-    const { id, required } = itemContext;
+    const { id, required, described, onDescribedChange } = itemContext;
     return {
         id,
         name: fieldContext.name,
@@ -69,42 +69,87 @@ const useFormField = () => {
         formDescriptionId: `${id}-form-item-description`,
         formMessageId: `${id}-form-item-message`,
         required,
+        described,
+        onDescribedChange,
         ...fieldState
     };
 };
 exports.useFormField = useFormField;
 const FormItemContext = React.createContext({});
+/**
+ * Announce that this slot is on the page, for as long as it is.
+ *
+ * `rendered` is a parameter rather than a caller-side condition because
+ * `FormMessage` returns null when it has nothing to say, and a hook cannot sit
+ * behind that early return.
+ */
+function useDescribingSlot(slot, rendered) {
+    const { onDescribedChange } = React.useContext(FormItemContext);
+    React.useEffect(() => {
+        if (!rendered)
+            return;
+        onDescribedChange?.(slot, true);
+        return () => onDescribedChange?.(slot, false);
+    }, [onDescribedChange, slot, rendered]);
+}
 const FormItem = React.forwardRef(({ className, required, ...props }, ref) => {
     const id = React.useId();
-    return ((0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: { id, required }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)('space-y-2', className), ...props }) }));
+    const [described, setDescribed] = React.useState({ message: false, description: false });
+    // Keeps the object identity when nothing moved, so a slot re-registering
+    // does not re-render the item for no reason.
+    const onDescribedChange = React.useCallback((slot, rendered) => setDescribed((current) => current[slot] === rendered
+        ? current
+        : { ...current, [slot]: rendered }), []);
+    return ((0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: { id, required, described, onDescribedChange }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)('space-y-2', className), ...props }) }));
 });
 exports.FormItem = FormItem;
 FormItem.displayName = 'FormItem';
 const FormLabel = React.forwardRef(({ className, extra, children, ...props }, ref) => {
     const { required, error, formItemId } = useFormField();
-    return ((0, jsx_runtime_1.jsxs)(label_1.Label, { ref: ref, className: (0, utils_1.cn)('text-muted-foreground flex justify-between text-sm font-semibold', error && 'text-destructive', className), htmlFor: formItemId, ...props, children: [(0, jsx_runtime_1.jsxs)("span", { children: [children, required ? ' *' : ''] }), extra] }));
+    return ((0, jsx_runtime_1.jsxs)(label_1.Label, { ref: ref, className: (0, utils_1.cn)('text-muted-foreground flex justify-between text-sm font-semibold', 
+        // The error TEXT token, matching FormMessage below: `--destructive`
+        // is the badge/fill family and reads 3.80:1 as ink on the dark card.
+        error && 'text-system-error-h1a', className), htmlFor: formItemId, ...props, children: [(0, jsx_runtime_1.jsxs)("span", { children: [children, required ? ' *' : ''] }), extra] }));
 });
 exports.FormLabel = FormLabel;
 FormLabel.displayName = 'FormLabel';
 const FormTooltip = ({ children, ...others }) => ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { ...others, children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { className: "text-container-text ml-2 h-4 w-4" }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: children })] }) }));
 exports.FormTooltip = FormTooltip;
 const FormControl = React.forwardRef(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, id: formItemId, "aria-describedby": !error
-            ? `${formDescriptionId}`
-            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+    const { error, formItemId, formDescriptionId, formMessageId, described } = useFormField();
+    // Only ids that resolve. A screen reader drops a dangling IDREF silently, so
+    // the barrier this removes is diagnostic rather than operational: a form with
+    // thirteen broken associations is a form where a real one cannot be spotted.
+    //
+    // Message first: a reader hears the error before the hint. `undefined` when
+    // both slots are empty, which drops the attribute — and, because Radix Slot
+    // OVERWRITES rather than merges, still lets the wrapped element carry its own
+    // (`ui/file-upload` merges the injected id with its own error id that way).
+    const describedBy = [
+        described?.message ? formMessageId : undefined,
+        described?.description ? formDescriptionId : undefined
+    ]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { ref: ref, id: formItemId, "aria-describedby": describedBy, "aria-invalid": !!error, ...props }));
 });
 exports.FormControl = FormControl;
 FormControl.displayName = 'FormControl';
 const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
     const { formDescriptionId } = useFormField();
-    return ((0, jsx_runtime_1.jsx)("p", { ref: ref, id: formDescriptionId, className: (0, utils_1.cn)('text-shadcn-400 text-xs font-medium', className), ...props }));
+    useDescribingSlot('description', true);
+    return ((0, jsx_runtime_1.jsx)("p", { ref: ref, id: formDescriptionId, className: (0, utils_1.cn)('text-muted-foreground text-xs font-medium', className), ...props }));
 });
 exports.FormDescription = FormDescription;
 FormDescription.displayName = 'FormDescription';
 const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
     const { error, formMessageId } = useFormField();
     const body = error ? String(error?.message) : children;
+    // Registered on `body`, not on `error`: a message given plain children
+    // renders copy that the control has to point at too. The old expression only
+    // added the message id when react-hook-form reported an error, so a
+    // standalone message was rendered and never associated.
+    useDescribingSlot('message', Boolean(body));
     if (!body) {
         return null;
     }

package/dist/components/ui/input/styles.css

@@ -27,9 +27,37 @@
   /* Don't give the placeholder its own size or weight. At a smaller size it
      still shares the input's baseline, so it rode ~0.75px below the value and
      the text jumped the moment you typed; font-medium gave the hint the same
-     presence as the label naming the field. */
+     presence as the label naming the field.
+
+     `w-0` is what lets the input shrink, and it pairs with `flex-1` rather
+     than fighting it: `flex-1` is `flex: 1 1 0%`, so the flex base size comes
+     from the basis and the input still grows back to fill its wrapper. What
+     `w-0` changes is the floor. A flex item never shrinks below its automatic
+     minimum size, and with no declared width that minimum falls back to the
+     control's own intrinsic size — 239px for a default `<input>`. Declaring a
+     width gives the flex algorithm a specified size to use instead, and 0 is
+     the only value that never floors anything.
+
+     `min-w-0` is NOT the fix here and was measured failing: it lowers this
+     input's own floor, but the automatic minimum of an ANCESTOR flex item is
+     computed from this control's min-content contribution, which `min-width`
+     does not lower. A consumer's own `flex-1` column around the field would
+     still refuse to shrink.
+
+     There is deliberately NO min-width floor either, and that was measured
+     too. A floor here cannot reach the sites that want one: a consumer
+     writing `.input-base` by hand tends to add its own `min-w-0`, which is a
+     `utilities`-layer class and outranks anything this `components`-layer rule
+     set declares. With `min-w-16` added here, the same fixture read 64px wide
+     without that hand-written `min-w-0` and 32px with it. The floor also cost
+     ground elsewhere: two inputs sharing a 120px row went from fitting to
+     overflowing by 52px. A caller whose field must hold its width says so on
+     its own wrapper, with `shrink-0`.
+
+     `scripts/measure-input-shrink.mjs` carries the fixtures and the numbers;
+     run it when touching this rule set. */
   .input-base {
-    @apply px-input-px text-input-foreground placeholder:text-input-placeholder h-full min-h-0 flex-1 border-none bg-transparent outline-none focus:ring-0 focus:ring-offset-0;
+    @apply px-input-px text-input-foreground placeholder:text-input-placeholder h-full min-h-0 w-0 flex-1 border-none bg-transparent outline-none focus:ring-0 focus:ring-offset-0;
   }
 
   .input-disabled {