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

package/dist/esm/components/ui/copy-field/index.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Check, Copy, Eye, EyeOff } from 'lucide-react';
 import { IconButton } from '../../../components/ui/icon-button/index.js';
 import { useToast } from '../../../hooks/use-toast.js';
+import { cn } from '../../../lib/utils.js';
 const DEFAULT_COPY_LABEL = 'Copied to clipboard!';
 const FALLBACK_COPY_LABEL = 'Copy not available — text selected, press Ctrl/Cmd+C';
 const COPIED_ICON_TIMEOUT = 1500;
@@ -31,17 +32,18 @@ const clearClipboardIfUnchanged = async (copiedValue) => {
         // Read or write refused; the clipboard stays as-is.
     }
 };
-export function CopyField({ value, label, masked = false, onCopyLabel, revealLabel = 'Show value', hideLabel = 'Hide value', valueLabel = 'Value to copy', clearClipboardAfter }) {
+export function CopyField({ value, label, masked = false, onCopyLabel, revealLabel = 'Show value', hideLabel = 'Hide value', valueLabel = 'Value to copy', copyLabel, fallbackLabel, mono = false, description, clearClipboardAfter }) {
     const { toast } = useToast();
     const generatedId = React.useId();
     const inputId = `${generatedId}-copy-field`;
+    const descriptionId = `${inputId}-description`;
     const inputRef = React.useRef(null);
     const copiedTimerRef = React.useRef(null);
     const clearTimerRef = React.useRef(null);
     const [revealed, setRevealed] = React.useState(false);
     const [copied, setCopied] = React.useState(false);
     const showAsText = !masked || revealed;
-    const copyAccessibleName = label ? `Copy ${label}` : 'Copy value';
+    const copyAccessibleName = copyLabel ?? (label ? `Copy ${label}` : 'Copy value');
     React.useEffect(() => {
         return () => {
             if (copiedTimerRef.current) {
@@ -73,7 +75,10 @@ export function CopyField({ value, label, masked = false, onCopyLabel, revealLab
     };
     const handleFallback = () => {
         selectFieldText();
-        toast({ title: FALLBACK_COPY_LABEL });
+        toast({
+            variant: 'destructive',
+            title: fallbackLabel ?? FALLBACK_COPY_LABEL
+        });
     };
     const handleCopy = async () => {
         if (!isClipboardAvailable()) {
@@ -105,15 +110,18 @@ export function CopyField({ value, label, masked = false, onCopyLabel, revealLab
             handleFallback();
         }
     };
-    return (_jsxs("div", { "data-slot": "copy-field", className: "flex w-full flex-col gap-2", children: [label ? (_jsx("label", { htmlFor: inputId, className: "text-muted-foreground text-sm font-semibold", children: label })) : null, _jsxs("div", { "data-slot": "input-wrapper", className: "border-input-border focus-within:border-ring flex h-10 w-full cursor-text items-center gap-1 rounded-md border pr-1 pl-4 transition-[color,box-shadow]", children: [_jsx("input", { ref: inputRef, id: inputId, "data-slot": "input", "data-testid": "copy-field-input", type: showAsText ? 'text' : 'password', value: value, readOnly: true, 
+    return (_jsxs("div", { "data-slot": "copy-field", className: "flex w-full flex-col gap-2", children: [label ? (_jsx("label", { htmlFor: inputId, className: "text-muted-foreground text-sm font-semibold", children: label })) : null, _jsxs("div", { "data-slot": "input-wrapper", className: "border-input-border focus-within:border-ring has-[input:focus]:ring-ring flex h-10 w-full cursor-text items-center gap-1 rounded-md border pr-1 pl-4 transition-[color,box-shadow] has-[input:focus]:ring-2", children: [_jsx("input", { ref: inputRef, id: inputId, "data-slot": "input", "data-testid": "copy-field-input", type: showAsText ? 'text' : 'password', value: value, readOnly: true, 
                         // This field holds secrets: TOTP manual-entry secrets, recovery
                         // codes. While masked it renders as type="password", which invites
                         // browsers and password managers to autofill it or offer to SAVE its
                         // value, and spellcheck can ship the text to a remote service.
-                        autoComplete: "off", spellCheck: false, "aria-label": label ? undefined : valueLabel, 
+                        autoComplete: "off", spellCheck: false, "aria-label": label ? undefined : valueLabel, "aria-describedby": description ? descriptionId : undefined, 
                         // `min-w-0` lets this flex item shrink below its content width so a
                         // long value (e.g. a UUID recovery code) scrolls inside the field
-                        // instead of overflowing its container. No `font-mono`: the value
-                        // inherits the app sans font (Inter) so it matches every other field.
-                        className: "text-input-foreground h-full min-w-0 flex-1 cursor-text border-none bg-transparent text-sm outline-none select-text focus:ring-0 focus:ring-offset-0" }), masked ? (_jsx(IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-pressed": revealed, "aria-label": revealed ? hideLabel : revealLabel, onClick: () => setRevealed((prev) => !prev), children: revealed ? _jsx(EyeOff, {}) : _jsx(Eye, {}) })) : null, _jsx(IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-label": copyAccessibleName, onClick: handleCopy, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) })] })] }));
+                        // instead of overflowing its container. Sans by default, inheriting
+                        // the app font (Inter) so the field matches every other input;
+                        // `mono` opts identifiers, tokens and recovery codes into the
+                        // monospace face, where telling 0 from O decides whether the value
+                        // read back is the value.
+                        className: cn('text-input-foreground h-full min-w-0 flex-1 cursor-text border-none bg-transparent text-sm outline-none select-text focus:ring-0 focus:ring-offset-0', mono && 'font-mono') }), masked ? (_jsx(IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-label": revealed ? hideLabel : revealLabel, onClick: () => setRevealed((prev) => !prev), children: revealed ? _jsx(EyeOff, {}) : _jsx(Eye, {}) })) : null, _jsx(IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-label": copyAccessibleName, onClick: handleCopy, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) })] }), description ? (_jsx("p", { "data-slot": "copy-field-description", id: descriptionId, className: "text-muted-foreground text-xs", children: description })) : null] }));
 }

package/dist/esm/components/ui/dialog/index.d.ts

@@ -5,7 +5,7 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogP
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function DialogContent({ className, children, showCloseButton, onInteractOutside, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
 }): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/esm/components/ui/dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,qBAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAQtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAwBA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EAClB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,qBAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAQtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAyBA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EAClB,CAAA"}

package/dist/esm/components/ui/dialog/index.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
-import { cn } from '../../../lib/utils.js';
+import { cn, keepOpenOnToast } from '../../../lib/utils.js';
 function Dialog({ ...props }) {
     return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
@@ -18,8 +18,8 @@ function DialogClose({ ...props }) {
 function DialogOverlay({ className, ...props }) {
     return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn('dialog-overlay', className), ...props }));
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('dialog-content', !showCloseButton && '*:data-radix-dialog-close:hidden', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "dialog-close", children: [_jsx(X, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
+function DialogContent({ className, children, showCloseButton = true, onInteractOutside, ...props }) {
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('dialog-content', !showCloseButton && '*:data-radix-dialog-close:hidden', className), onInteractOutside: keepOpenOnToast(onInteractOutside), ...props, children: [children, _jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "dialog-close", children: [_jsx(X, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn('dialog-header', className), ...props }));

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
@@ -222,7 +233,7 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
         if (internalRef.current)
             internalRef.current.value = '';
     };
-    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 &&
+    return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: cn('border-input-border 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: [_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 }), _jsx(Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [_jsx("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', _jsx("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), _jsx(IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove?.trim() ? labels.remove : 'Remove file', onClick: (event) => {
@@ -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-border 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';