@lerianstudio/sindarian-ui 2.0.0-beta.25 → 2.0.0-beta.26

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

@@ -1,71 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { cva } from 'class-variance-authority';
-import { cn } from '../../../lib/utils.js';
-import { Label } from '../../../components/ui/label/index.js';
-import { Separator } from '../../../components/ui/separator/index.js';
-function FieldSet({ className, ...props }) {
-    return (_jsx("fieldset", { "data-slot": "field-set", className: cn('flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className), ...props }));
-}
-function FieldLegend({ className, variant = 'legend', ...props }) {
-    return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn('mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className), ...props }));
-}
-function FieldGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "field-group", className: cn('group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4', className), ...props }));
-}
-const fieldVariants = cva('data-[invalid=true]:text-system-error-h1a gap-2 group/field flex w-full', {
-    variants: {
-        orientation: {
-            vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
-            horizontal: 'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-            responsive: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
-        }
-    },
-    defaultVariants: {
-        orientation: 'vertical'
-    }
-});
-function Field({ className, orientation = 'vertical', ...props }) {
-    return (_jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }));
-}
-function FieldContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "field-content", className: cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className), ...props }));
-}
-function FieldLabel({ className, ...props }) {
-    return (_jsx(Label, { "data-slot": "field-label", className: cn('has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5', 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col', className), ...props }));
-}
-function FieldTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "field-label", className: cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', className), ...props }));
-}
-function FieldDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "field-description", className: cn('text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5', 'last:mt-0 nth-last-2:-mt-1', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
-}
-function FieldSeparator({ children, className, ...props }) {
-    return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "text-muted-foreground bg-background relative mx-auto block w-fit px-2", "data-slot": "field-separator-content", children: children }))] }));
-}
-function FieldError({ className, children, errors, ...props }) {
-    const content = useMemo(() => {
-        if (children) {
-            return children;
-        }
-        if (!errors?.length) {
-            return null;
-        }
-        const uniqueErrors = [
-            ...new Map(errors.map((error) => [error?.message, error])).values()
-        ];
-        if (uniqueErrors?.length === 1) {
-            return uniqueErrors[0]?.message;
-        }
-        return (_jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && _jsx("li", { children: error.message }, index)) }));
-    }, [children, errors]);
-    if (!content) {
-        return null;
-    }
-    return (_jsx("div", { role: "alert", "data-slot": "field-error", 
-        // The error TEXT token, not `text-destructive`: that is the badge/fill
-        // family and measures 3.80:1 as ink on the dark card, under AA.
-        className: cn('text-system-error-h1a text-sm font-normal', className), ...props, children: content }));
-}
-export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle };
+"use client";import{jsx as a,jsxs as f}from"react/jsx-runtime";import{useMemo as u}from"react";import{cva as c}from"class-variance-authority";import{cn as l}from"../../../lib/utils.js";import{Label as m}from"../../../components/ui/label/index.js";import{Separator as p}from"../../../components/ui/separator/index.js";function g({className:t,...e}){return a("fieldset",{"data-slot":"field-set",className:l("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",t),...e})}function x({className:t,variant:e="legend",...o}){return a("legend",{"data-slot":"field-legend","data-variant":e,className:l("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",t),...o})}function h({className:t,...e}){return a("div",{"data-slot":"field-group",className:l("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",t),...e})}const b=c("data-[invalid=true]:text-system-error-h1a gap-2 group/field flex w-full",{variants:{orientation:{vertical:"flex-col [&>*]:w-full [&>.sr-only]:w-auto",horizontal:"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",responsive:"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"}},defaultVariants:{orientation:"vertical"}});function v({className:t,orientation:e="vertical",...o}){return a("div",{role:"group","data-slot":"field","data-orientation":e,className:l(b({orientation:e}),t),...o})}function w({className:t,...e}){return a("div",{"data-slot":"field-content",className:l("group/field-content flex flex-1 flex-col gap-0.5 leading-snug",t),...e})}function N({className:t,...e}){return a(m,{"data-slot":"field-label",className:l("has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5","has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",t),...e})}function y({className:t,...e}){return a("div",{"data-slot":"field-label",className:l("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",t),...e})}function k({className:t,...e}){return a("p",{"data-slot":"field-description",className:l("text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5","last:mt-0 nth-last-2:-mt-1","[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",t),...e})}function F({children:t,className:e,...o}){return f("div",{"data-slot":"field-separator","data-content":!!t,className:l("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",e),...o,children:[a(p,{className:"absolute inset-0 top-1/2"}),t&&a("span",{className:"text-muted-foreground bg-background relative mx-auto block w-fit px-2","data-slot":"field-separator-content",children:t})]})}function j({className:t,children:e,errors:o,...s}){const i=u(()=>{if(e){return e}if(!o?.length){return null}const d=[...new Map(o.map(r=>[r?.message,r])).values()];if(d?.length===1){return d[0]?.message}return a("ul",{className:"ml-4 flex list-disc flex-col gap-1",children:d.map((r,n)=>r?.message&&a("li",{children:r.message},n))})},[e,o]);if(!i){return null}return a("div",{role:"alert","data-slot":"field-error",className:l("text-system-error-h1a text-sm font-normal",t),...s,children:i})}export{v as Field,N as FieldLabel,k as FieldDescription,j as FieldError,h as FieldGroup,x as FieldLegend,F as FieldSeparator,g as FieldSet,w as FieldContent,y as FieldTitle};

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

@@ -1,536 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 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
- * `tabIndex={-1}`. The FormControl-injected ARIA (`id`, `aria-invalid`,
- * `aria-required`, `aria-describedby`) flows onto the input via `...rest`, so
- * react-hook-form's `field.ref` (forwarded here) focuses the real control on
- * error and FormLabel's `htmlFor` names it. The styled zone is a plain `<div>`
- * with a click handler, NOT a wrapping `<label>`: a label would contribute its
- * text to the input's accessible name and double-name it alongside a field's
- * own label. Keyboard users Tab to the focusable input and Enter/Space opens
- * the picker natively, so no key proxy is needed. Drag-and-drop is an
- * enhancement layered on the zone.
- *
- * Errors are DUAL by design and both announced: size/type/read failures are
- * the primitive's own concern, surfaced inline via `role="alert"` so it works
- * standalone outside a form; a form wrapper (FileUploadField) adds the
- * react-hook-form validation surface separately. A rejected pick never writes
- * 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.
- */
-import * as React from 'react';
-import { Upload, X } from 'lucide-react';
-import { IconButton } from '../../../components/ui/icon-button/index.js';
-import { cn } from '../../../lib/utils.js';
-/**
- * Validate a chosen file against an accept filter and a byte ceiling. Exported
- * so hosts can pre-validate before handing a file over. `accept` is matched
- * against BOTH the filename extension and the MIME type — a `.pem`/`text/plain`
- * style filter passes if EITHER matches a token. When `accept` is omitted, any
- * type passes. Returns the first error, or null when the file is acceptable.
- */
-export function validateFile(file, opts) {
-    const { accept, maxSizeBytes } = opts;
-    if (typeof maxSizeBytes === 'number' && file.size > maxSizeBytes) {
-        return { kind: 'too-large', file, maxSizeBytes };
-    }
-    if (accept && accept.trim() !== '' && !matchesAccept(file, accept)) {
-        return { kind: 'wrong-type', file, accept };
-    }
-    return null;
-}
-/**
- * Does the file satisfy a comma-separated accept list? Each token is either a
- * dot-extension (`.pem`, case-insensitive against the filename), an exact MIME
- * (`text/plain`), or a MIME wildcard (`text/*`). True if ANY token matches.
- */
-function matchesAccept(file, accept) {
-    const name = file.name.toLowerCase();
-    const mime = file.type.toLowerCase();
-    return accept
-        .split(',')
-        .map((t) => t.trim().toLowerCase())
-        .filter((t) => t !== '')
-        .some((token) => {
-        if (token.startsWith('.'))
-            return name.endsWith(token);
-        if (token.endsWith('/*'))
-            return mime.startsWith(token.slice(0, -1));
-        return mime === token;
-    });
-}
-/**
- * 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.
- */
-export function humanizeSize(bytes) {
-    if (bytes < 1024)
-        return `${bytes} B`;
-    const units = ['KB', 'MB', 'GB'];
-    let size = bytes / 1024;
-    let unit = 0;
-    while (size >= 1024 && unit < units.length - 1) {
-        size /= 1024;
-        unit += 1;
-    }
-    return `${size.toFixed(1)} ${units[unit]}`;
-}
-/** 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)}).`;
-        case 'wrong-type':
-            return `File type not allowed (expected ${error.accept}).`;
-        case 'read-failed':
-            return 'Could not read the file.';
-    }
-}
-export const 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();
-    const inputId = id ?? reactId;
-    const errorId = `${inputId}-file-upload-error`;
-    const [dragActive, setDragActive] = React.useState(false);
-    const [error, setError] = React.useState(null);
-    // The destructive styling is driven by the consumer's aria-invalid OR the
-    // 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, errorText ? errorId : undefined]
-        .filter(Boolean)
-        .join(' ') || undefined;
-    // Last-resolved-wins: a slow read for pick A must not overwrite a newer
-    // pick B. Track the active reader and abort any in-flight read first.
-    const readerRef = React.useRef(null);
-    const handleFile = (file) => {
-        if (!file)
-            return;
-        readerRef.current?.abort();
-        const validationError = validateFile(file, { accept, maxSizeBytes });
-        if (validationError) {
-            setError(validationError);
-            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 = () => {
-            if (readerRef.current !== reader)
-                return;
-            readerRef.current = null;
-            setError(null);
-            onSelect({ file, text: String(reader.result ?? '') });
-        };
-        reader.onerror = () => {
-            if (readerRef.current !== reader)
-                return;
-            readerRef.current = null;
-            const readError = { kind: 'read-failed', file };
-            setError(readError);
-            onError?.(readError);
-        };
-        reader.readAsText(file);
-    };
-    const onInputChange = (event) => {
-        const file = event.target.files?.[0];
-        // Release the FileList the moment it has been read. The browser fires
-        // `change` only when the selection DIFFERS from what the input already
-        // holds, so keeping it meant re-picking the same file after a host reset
-        // (or retrying a rejected one) was silently a no-op — the picker opened,
-        // the user chose the file, and nothing happened.
-        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) => {
-        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;
-        handleFile(event.dataTransfer.files?.[0]);
-    };
-    // Mouse convenience only: clicking the styled zone opens the picker. A
-    // click that ORIGINATED on the input already opens it natively and bubbles
-    // up to here — re-firing .click() would open the picker twice, so ignore it.
-    const openPicker = (event) => {
-        if (disabled || event.target === internalRef.current)
-            return;
-        internalRef.current?.click();
-    };
-    const clear = () => {
-        readerRef.current?.abort();
-        readerRef.current = null;
-        setError(null);
-        onSelect(null);
-        // Reset the native input so re-picking the same filename fires onChange.
-        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-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) => {
-                                    // Don't bubble to the zone's openPicker and re-open the dialog.
-                                    event.stopPropagation();
-                                    clear();
-                                }, 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';
+"use client";import{jsx as i,jsxs as g,Fragment as le}from"react/jsx-runtime";import*as o from"react";import{Upload as ne,X as te}from"lucide-react";import{IconButton as ie}from"../../../components/ui/icon-button/index.js";import{cn as K}from"../../../lib/utils.js";export function validateFile(n,u){const{accept:l,maxSizeBytes:r}=u;if(typeof r==="number"&&n.size>r){return{kind:"too-large",file:n,maxSizeBytes:r}}if(l&&l.trim()!==""&&!ce(n,l)){return{kind:"wrong-type",file:n,accept:l}}return null}function ce(n,u){const l=n.name.toLowerCase();const r=n.type.toLowerCase();return u.split(",").map(a=>a.trim().toLowerCase()).filter(a=>a!=="").some(a=>{if(a.startsWith("."))return l.endsWith(a);if(a.endsWith("/*"))return r.startsWith(a.slice(0,-1));return r===a})}export function humanizeSize(n){if(n<1024)return`${n} B`;const u=["KB","MB","GB"];let l=n/1024;let r=0;while(l>=1024&&r<u.length-1){l/=1024;r+=1}return`${l.toFixed(1)} ${u[r]}`}function ae(n){switch(n.kind){case"too-large":return`File is too large (max ${humanizeSize(n.maxSizeBytes)}).`;case"wrong-type":return`File type not allowed (expected ${n.accept}).`;case"read-failed":return"Could not read the file."}}export const FileUpload=o.forwardRef(function n({accept:u,maxSizeBytes:l,value:r,readAs:a="text",labels:y,onSelect:d,onError:B,disabled:b=false,id:C,className:X,"aria-invalid":Y,"aria-required":J,"aria-describedby":Q,"aria-label":V,...Z},ee){const D=o.useRef(null);o.useImperativeHandle(ee,()=>D.current);const $=o.useId();const j=C??$;const E=`${j}-file-upload-error`;const[L,A]=o.useState(false);const[k,I]=o.useState(null);const U=Y||k!==null;const f=k?y?.error?y.error(k):ae(k):null;const h=f?f:null;const O=[Q,h?E:void 0].filter(Boolean).join(" ")||void 0;const c=o.useRef(null);const _=t=>{if(!t)return;c.current?.abort();const R=validateFile(t,{accept:u,maxSizeBytes:l});if(R){I(R);B?.(R);return}if(a==="none"){c.current=null;I(null);d({file:t,text:""});return}const v=new FileReader;c.current=v;v.onload=()=>{if(c.current!==v)return;c.current=null;I(null);d({file:t,text:String(v.result??"")})};v.onerror=()=>{if(c.current!==v)return;c.current=null;const H={kind:"read-failed",file:t};I(H);B?.(H)};v.readAsText(t)};const q=t=>{const R=t.target.files?.[0];t.target.value="";_(R)};const M=t=>{t.preventDefault();if(b){t.dataTransfer.dropEffect="none";return}A(true)};const P=t=>{t.preventDefault();A(false)};const T=t=>{t.preventDefault();A(false);if(b)return;_(t.dataTransfer.files?.[0])};const W=t=>{if(b||t.target===D.current)return;D.current?.click()};const re=()=>{c.current?.abort();c.current=null;I(null);d(null);if(D.current)D.current.value=""};return g("div",{className:K("space-y-2",X),children:[g("div",{onClick:W,onDragOver:M,onDragLeave:P,onDrop:T,className:K("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",L&&"border-ring ring-ring ring-offset-background ring-2 ring-offset-1",b?"border-muted bg-muted/30 cursor-not-allowed shadow-none":"cursor-pointer"),"aria-invalid":U||void 0,children:[i("input",{ref:D,id:j,type:"file",accept:u,disabled:b,className:"sr-only","aria-invalid":U||void 0,"aria-required":J||void 0,"aria-describedby":O,"aria-label":V,onChange:q,...Z}),i(ne,{className:"text-muted-foreground size-4 shrink-0","aria-hidden":"true"}),r?g(le,{children:[g("span",{className:"min-w-0 flex-1 truncate",children:[i("span",{className:"text-foreground font-medium",children:r.file.name})," ",i("span",{className:"text-muted-foreground tabular-nums",children:humanizeSize(r.file.size)})]}),i(ie,{type:"button",variant:"plain",size:"small",disabled:b,"aria-label":y?.remove?.trim()?y.remove:"Remove file",onClick:t=>{t.stopPropagation();re()},children:i(te,{className:"size-4","aria-hidden":"true"})})]}):g("span",{className:"text-muted-foreground",children:[i("span",{className:"text-foreground font-medium",children:y?.action??"Choose a file"})," ",y?.hint??"or drag and drop"]})]}),h?i("p",{id:E,role:"alert",className:"text-system-error-h1a text-xs font-medium",children:h}):null]})});FileUpload.displayName="FileUpload";function ue(n){if(n.kind==="too-many"){return`Too many files (max ${n.maxFiles}). ${n.file.name} was not added.`}return ae(n)}function de(n){return n===1?"Maximum of 1 file reached.":`Maximum of ${n} files reached.`}export const MultipleFileUpload=o.forwardRef(function n({accept:u,maxSizeBytes:l,maxFiles:r,value:a=[],readAs:y="text",labels:d,onValueChange:B,onError:b,disabled:C=false,id:X,className:Y,"aria-invalid":J,"aria-required":Q,"aria-describedby":V,"aria-label":Z,...ee},D){const $=o.useRef(null);o.useImperativeHandle(D,()=>$.current);const j=o.useId();const E=X??j;const L=`${E}-file-upload-error`;const[A,k]=o.useState(false);const[I,U]=o.useState([]);const f=o.useRef(a);o.useEffect(()=>{f.current=a});const h=o.useRef(new Set);o.useEffect(()=>()=>{for(const e of h.current)e.abort();h.current.clear()},[]);const O=J||I.length>0;const c=I.map(e=>d?.error?d.error(e):ue(e)).filter(e=>Boolean(e));const _=[V,c.length>0?L:void 0].filter(Boolean).join(" ")||void 0;const q=r!==void 0&&a.length>=r;const M=C||q;const P=e=>r===void 0?Number.POSITIVE_INFINITY:Math.max(r-e,0);const T=(e,s)=>{const x=P(f.current.length);const w=e.slice(0,x);const N=e[x];const F=N!==void 0&&r!==void 0?[...s,{kind:"too-many",file:N.file,maxFiles:r}]:s;U(F);for(const G of F)b?.(G);if(w.length===0)return;const S=[...f.current,...w];f.current=S;B(S)};const W=e=>{if(e.length===0)return;const s=P(f.current.length);const x=[];const w=[];for(const m of e){const z=validateFile(m,{accept:u,maxSizeBytes:l});if(z){x.push(z);continue}w.push(m)}if(w.length>s&&r!==void 0){x.push({kind:"too-many",file:w[s],maxFiles:r})}const N=w.slice(0,s);if(y==="none"){T(N.map(m=>({file:m,text:""})),x);return}if(N.length===0){T([],x);return}const F=new Array(N.length).fill(null);let S=N.length;const G=()=>{S-=1;if(S>0)return;const m=[];const z=[];F.forEach((p,se)=>{if(p)m.push(p);else z.push({kind:"read-failed",file:N[se]})});T(m,[...x,...z])};N.forEach((m,z)=>{const p=new FileReader;h.current.add(p);p.onload=()=>{h.current.delete(p);F[z]={file:m,text:String(p.result??"")};G()};p.onerror=()=>{h.current.delete(p);G()};p.readAsText(m)})};const re=e=>{const s=Array.from(e.target.files??[]);e.target.value="";W(s)};const t=e=>{e.preventDefault();if(C){e.dataTransfer.dropEffect="none";return}k(true)};const R=e=>{e.preventDefault();k(false)};const v=e=>{e.preventDefault();k(false);if(C)return;W(Array.from(e.dataTransfer.files??[]))};const H=e=>{if(M||e.target===$.current)return;$.current?.click()};const oe=e=>{const s=f.current.filter((x,w)=>w!==e);f.current=s;B(s)};return g("div",{className:K("space-y-2",Y),children:[g("div",{onClick:H,onDragOver:t,onDragLeave:R,onDrop:v,className:K("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",A&&"border-ring ring-ring ring-offset-background ring-2 ring-offset-1",M?"border-muted bg-muted/30 cursor-not-allowed shadow-none":"cursor-pointer"),"aria-invalid":O||void 0,children:[i("input",{ref:$,id:E,type:"file",multiple:true,accept:u,disabled:M,className:"sr-only","aria-invalid":O||void 0,"aria-required":Q||void 0,"aria-describedby":_,"aria-label":Z,onChange:re,...ee}),i(ne,{className:"text-muted-foreground size-4 shrink-0","aria-hidden":"true"}),q&&r!==void 0?i("span",{className:"text-muted-foreground",children:d?.full?d.full(r):de(r)}):g("span",{className:"text-muted-foreground",children:[i("span",{className:"text-foreground font-medium",children:d?.action??"Choose files"})," ",d?.hint??"or drag and drop"]})]}),a.length>0?i("ul",{className:"space-y-1",children:a.map((e,s)=>g("li",{className:"flex items-center gap-3 text-sm",children:[g("span",{className:"min-w-0 flex-1 truncate",children:[i("span",{className:"text-foreground font-medium",children:e.file.name})," ",i("span",{className:"text-muted-foreground tabular-nums",children:humanizeSize(e.file.size)})]}),i(ie,{type:"button",variant:"plain",size:"small",disabled:C,"aria-label":d?.remove?d.remove(e.file):`Remove ${e.file.name}`,onClick:()=>oe(s),children:i(te,{className:"size-4","aria-hidden":"true"})})]},`${e.file.name}-${s}`))}):null,c.length>0?i("div",{id:L,role:"alert",className:"space-y-1",children:c.map((e,s)=>i("p",{className:"text-system-error-h1a text-xs font-medium",children:e},s))}):null]})});MultipleFileUpload.displayName="MultipleFileUpload";