51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T7c2e,"use client"; import { forwardRef, useRef, useState } from "react"; import type { ChangeEvent, ComponentPropsWithoutRef, CSSProperties, DragEvent, MouseEvent, RefCallback, } from "react"; import { cn } from "../../utils"; import { useField } from "../../internals/field"; import { useFancyId } from "../../internals/use-id"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import { preset } from "../../internals/motion/transitions"; import { prefersReducedMotion } from "../../internals/motion/anchored"; import { DURATIONS, JS_EASINGS } from "../../internals/motion/tokens"; import { runTransition, type TransitionRun } from "../../internals/motion/animate"; import { useSoundCue } from "../../sound/use-sound"; import type { SoundCue } from "../../sound/types"; import "./file-upload.css"; /** One file FileUpload is tracking — selected, uploading, or settled. */ export interface UploadFile { /** Stable id for this row. Used as the row key — never the array index, since rows are removed from the middle. */ id: string; /** The underlying browser File. */ file: File; /** 0–100, or null when the consumer is not reporting progress. */ progress: number | null; /** Lifecycle state. "error" covers both local validation failures (accept/maxSize/maxFiles) and upload failures the consumer reports back. */ status: "pending" | "uploading" | "done" | "error"; /** Message shown on the row and announced while status is "error". */ error?: string; } interface FileUploadOwnProps { /** * Selected files. Controlled when supplied: pair it with `onFilesChange`, * the React counterpart of the Svelte source's `bind:files`. */ files?: UploadFile[]; /** Initial files when uncontrolled (no `files` prop given). */ defaultFiles?: UploadFile[]; /** Called with the new list on every change — a selection, a drop, or a removal. */ onFilesChange?: (files: UploadFile[]) => void; /** The input's native `accept` attribute (comma-separated extensions and/or MIME types/wildcards). Also enforced in JS: a dropped file never passes through the picker, so the browser's own filtering never sees it. */ accept?: string; /** Allows more than one file per selection or drop. */ multiple?: boolean; /** Maximum size per file, in bytes. A larger file is added to the list with status "error" rather than silently discarded. */ maxSize?: number; /** Maximum number of files the list may hold. Files beyond the cap are rejected outright, not added as errors. */ maxFiles?: number; /** Blocks selecting, dropping and removing files. Overridden by a surrounding FormField. */ disabled?: boolean; /** Native `required` on the underlying input. Overridden by a surrounding FormField. */ required?: boolean; /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */ invalid?: boolean; /** Element id, applied to the underlying file input. Overridden by a surrounding FormField's own `controlId`. */ id?: string; /** Native `name` on the underlying input. */ name?: string; /** Accessible name — for a control with no visible Label next to it. Omit when a surrounding FormField already supplies one. */ label?: string; /** Constraint text under the drop zone, e.g. "PNG, SVG — 4 MB max". Informational only; not itself enforced — pair it with matching `accept`/`maxSize` values. */ hint?: string; /** Additional CSS classes. */ className?: string; /** * Plays the matching interface cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } export interface FileUploadProps extends Omit< ComponentPropsWithoutRef<"input">, keyof FileUploadOwnProps | "type" | "value" | "defaultValue" | "role" >, FileUploadOwnProps {} // A split enter/exit pair rather than one bidirectional transition, which is // the house rule everywhere else. The list is keyed, and an id this component // mints is never reused (`createRowId` only counts up), so the reversal // smoothing a bidirectional transition buys is smoothing nothing. A controlled // consumer that supplies its own ids CAN bring one back mid-exit; the // reconciler revives that row in place rather than reversing a leg for it. // Splitting also lets the exit be its own, quieter gesture // rather than the entrance played backwards: a row arrives by rising into // place and leaves by simply fading, so nothing appears to travel back out of // the list. const rowEnter = preset("fade-up"); const rowLeave = preset("fade"); /** One list row as actually rendered — the live entry, or a removed entry kept * mounted (and inert) while its exit transition plays out. */ interface RenderedRow { entry: UploadFile; exiting: boolean; } function sameRendered(a: RenderedRow[], b: RenderedRow[]): boolean { if (a.length !== b.length) return false; for (let i = 0; i < a.length; i += 1) { if (a[i]!.entry !== b[i]!.entry || a[i]!.exiting !== b[i]!.exiting) return false; } return true; } function formatBytes(bytes: number): string { if (bytes >= 1_000_000) { const mb = bytes / 1_000_000; return `${mb % 1 === 0 ? mb.toFixed(0) : mb.toFixed(1)} MB`; } if (bytes >= 1_000) { const kb = bytes / 1_000; return `${kb % 1 === 0 ? kb.toFixed(0) : kb.toFixed(1)} KB`; } return `${bytes} B`; } // The input's own `accept` attribute only filters what the OS picker // shows — it is a convenience, not a guarantee, and a dropped file // bypasses it entirely. This is the real gate, run for both paths. function matchesAccept(file: File, pattern: string | undefined): boolean { if (!pattern) return true; const rules = pattern .split(",") .map((rule) => rule.trim().toLowerCase()) .filter(Boolean); if (rules.length === 0) return true; const fileName = file.name.toLowerCase(); const fileType = file.type.toLowerCase(); return rules.some((rule) => { if (rule.startsWith(".")) return fileName.endsWith(rule); if (rule.endsWith("/*")) return fileType.startsWith(rule.slice(0, -1)); return fileType === rule; }); } /** * A drop zone wrapped around a real, focusable ``, with a * validated file list underneath — accept/maxSize/maxFiles enforced identically * for the picker and the drop path, rejections announced through a live region, * and rows that enter and leave through the shared motion presets. * * The element reference arrives through the ref channel (the Svelte source * declares `ref = $bindable(null)`), pointing at the native file input. */ export const FileUpload = forwardRef( ( { files: filesProp, defaultFiles = [], onFilesChange, accept, multiple = false, maxSize, maxFiles, disabled = false, required = false, invalid = false, id, name, label, hint, className, sound = false, onChange, onClick, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, // An `` is a void element: a stray `children` must not reach it. children: _children, ...rest }, ref ) => { // The Svelte side's `files = $bindable([])` becomes the standard // controlled/uncontrolled split: uncontrolled by default, controlled // the moment a `files` prop is passed. const isControlled = filesProp !== undefined; const [uncontrolledFiles, setUncontrolledFiles] = useState(defaultFiles); const files = isControlled ? filesProp : uncontrolledFiles; // Undefined outside a FormField — every fallback below then uses this // component's own prop instead, so the control works standalone // exactly as it does wrapped. Context always wins when present, via `??`. const field = useField(); // The file input is a labelable element, so — unlike a control whose root // isn't (a role="radiogroup" wrapper needs labelId instead) — a plain // controlId + pairing is enough. Generated with useFancyId(), // not uid(), because that one throws outside the browser and this // control's own "browse" label needs a stable target id even during SSR, // FormField or not. const generatedId = useFancyId(); const effectiveId = field?.controlId ?? id ?? generatedId; const effectiveDisabled = field?.disabled ?? disabled; const effectiveRequired = field?.required ?? required; const effectiveInvalid = field?.invalid ?? invalid; const playCue = useSoundCue(sound); const hintId = `${effectiveId}-hint`; const describedBy = [field?.describedBy, ariaDescribedby, hint ? hintId : undefined].filter(Boolean).join(" ") || undefined; // Counts enter/leave pairs instead of toggling a boolean on either one. // dragenter/dragleave bubble from every child the pointer crosses — the // icon, the prompt text, the hint — so a naive "enter -> true, leave -> // false" flickers false the instant the pointer passes over any of them. // The zone reads as dragging exactly while this count is above zero, // which stays true across a leave that is immediately followed by the // matching child's enter. const [dragDepth, setDragDepth] = useState(0); const dragging = dragDepth > 0; const inputRef = useRef(null); const composedInputRef = useComposedRefs(ref, inputRef); const listRef = useRef(null); // Rejections are announced here rather than left to the per-row error // text alone — that text sits in the DOM but nothing moves focus to it, // so a screen reader only reaches it if this also speaks. const [liveMessage, setLiveMessage] = useState(""); // A live region only speaks when its text actually CHANGES. Rejecting // the very same file twice produces byte-identical text, so writing it // straight back would leave the text node untouched and the second // rejection silent. Clearing first and writing the message one commit // later forces the mutation an assistive technology listens for. function announce(message: string) { setLiveMessage(""); queueMicrotask(() => setLiveMessage(message)); } const nextRowIdRef = useRef(0); // Minted inside event handlers only — never in a render path — so the // counter can be a plain ref without breaking hydration. function createRowId(): string { nextRowIdRef.current += 1; return `${generatedId}-file-${nextRowIdRef.current}`; } // ------------------------------------------------------------------ // Exit-aware rendering. The Svelte source hands a removed row's exit to // the framework's outro scheduler (`out:` + `|global` so even the LAST // row keeps the

(() => files.map((entry) => ({ entry, exiting: false })) ); const renderedRef = useRef(rendered); const rowElsRef = useRef(new Map()); const rowRefCallbacksRef = useRef(new Map>()); const runsRef = useRef(new Map()); const exitStartedRef = useRef(new Set()); const enterIdsRef = useRef(new Set()); function rowRefFor(rowId: string): RefCallback { let callback = rowRefCallbacksRef.current.get(rowId); if (!callback) { callback = (node) => { if (node) { rowElsRef.current.set(rowId, node); } else { rowElsRef.current.delete(rowId); // Evicted by identity: a detach runs on the OLD // callback, and by then the cache may already hold its // replacement. Deleting unconditionally would throw // that replacement away and mint a new callback on // every render for the rest of the component's life, // making React detach and re-attach every row's ref // each time — the exact churn this cache exists to // prevent. if (rowRefCallbacksRef.current.get(rowId) === callback) { rowRefCallbacksRef.current.delete(rowId); } } }; rowRefCallbacksRef.current.set(rowId, callback); } return callback; } // `cue` is played between the commit and the consumer callback, the // same slot the Svelte source plays it in. function commitFiles(next: UploadFile[], cue?: SoundCue) { if (!isControlled) setUncontrolledFiles(next); if (cue) playCue(cue); onFilesChange?.(next); } // Reconcile the rendered list against `files`: a row that vanished from // `files` stays, flagged as exiting; a row that appeared is inserted in // order and — only when the list already existed — queued for an // entrance. That guard mirrors the Svelte side's LOCAL `in:`: a row // present on first render, or created because the whole list block just // appeared, paints at rest with no intro. useIsomorphicLayoutEffect(() => { const prev = renderedRef.current; const listExisted = prev.some((row) => !row.exiting); const fileIds = new Set(files.map((entry) => entry.id)); const next: RenderedRow[] = []; let fileIndex = 0; // Ids whose row was mid-exit when the same id came back. const revived: string[] = []; const pushFresh = (entry: UploadFile) => { next.push({ entry, exiting: false }); if (listExisted) enterIdsRef.current.add(entry.id); }; for (const row of prev) { if (fileIds.has(row.entry.id)) { while (fileIndex < files.length && files[fileIndex]!.id !== row.entry.id) { pushFresh(files[fileIndex]!); fileIndex += 1; } // A row still playing its exit whose id is back in `files` // is revived IN PLACE, never re-added alongside itself: two // rows under one key would share a single ref callback, and // the id filter in `finishExit` would take both away when // the exit landed — losing the entry the consumer had just // put back. The keyed block on the Svelte side resumes the // leaving element for a returning key for the same reason. if (row.exiting) revived.push(row.entry.id); // The `fileIds.has` guard above guarantees this index lands on // the matching entry. next.push({ entry: files[fileIndex]!, exiting: false }); fileIndex += 1; } else { next.push({ entry: row.entry, exiting: true }); } } while (fileIndex < files.length) { pushFresh(files[fileIndex]!); fileIndex += 1; } for (const rowId of revived) { runsRef.current.get(rowId)?.abort(); runsRef.current.delete(rowId); exitStartedRef.current.delete(rowId); rowElsRef.current.get(rowId)?.removeAttribute("inert"); } if (!sameRendered(prev, next)) { renderedRef.current = next; setRendered(next); } }, [files]); // Start the legs the reconciliation above queued up. Layout phase, so a // reduced-motion exit (duration 0 → synchronous finish, `animate()` // never called) settles before paint, exactly like the source's fast // path — a visitor who asked for less motion gets a synchronous removal. useIsomorphicLayoutEffect(() => { const finishExit = (rowId: string) => { runsRef.current.delete(rowId); exitStartedRef.current.delete(rowId); renderedRef.current = renderedRef.current.filter((row) => row.entry.id !== rowId); setRendered(renderedRef.current); }; for (const row of renderedRef.current) { const rowId = row.entry.id; if (!row.exiting || exitStartedRef.current.has(rowId)) continue; exitStartedRef.current.add(rowId); const element = rowElsRef.current.get(rowId); if (!element) { finishExit(rowId); continue; } // Set synchronously, immediately before the exit starts — the // same instant the Svelte outro marks a leaving element inert. // A closing row is not something a pointer or a screen reader // should be able to reach. element.toggleAttribute("inert", true); const spec = rowLeave( element, { duration: prefersReducedMotion() ? 0 : DURATIONS.exit, easing: JS_EASINGS.in, }, { direction: "out" } ); const run = runTransition(element, spec, 0, runsRef.current.get(rowId), () => finishExit(rowId) ); // Registered only while the leg is still live. On the // reduced-motion path `runTransition` finishes SYNCHRONOUSLY, // so `finishExit` has already dropped this row from the map by // the time we get here — writing the spent handle back would // leave a dead entry behind for good, and hand it to the next // exit of the same id as a counterpart whose `t()` collapses // that exit to no keyframes at all. `finishExit` clears the // same flag, so this reads as "did the leg outlive the call". if (exitStartedRef.current.has(rowId)) runsRef.current.set(rowId, run); } if (enterIdsRef.current.size > 0) { const pending = Array.from(enterIdsRef.current); enterIdsRef.current.clear(); for (const rowId of pending) { const element = rowElsRef.current.get(rowId); if (!element) continue; const spec = rowEnter( element, { duration: prefersReducedMotion() ? 0 : DURATIONS.fast, distance: 8, easing: JS_EASINGS.out, }, { direction: "in" } ); // `let`, not `const`: on the reduced-motion path the finish // callback fires synchronously from inside runTransition, // before the binding is assigned — `run?.` covers that, and // there is nothing to abort there anyway. let run: TransitionRun | undefined; let settled = false; run = runTransition(element, spec, 1, undefined, () => { settled = true; runsRef.current.delete(rowId); // On ENTER finish, abort the run: that removes the // `fill: forwards` so the row falls back to its resting // style — which *is* the visible end state by // construction. The exit path above deliberately does // NOT abort: its node stays in the DOM until React // processes the removal one render later, and dropping // fill-forwards would flash the row back for a frame. run?.abort(); }); // Same live-leg guard as the exit above: a duration-0 // entrance has already finished and deleted itself, so // registering it again would strand a dead handle. if (!settled) runsRef.current.set(rowId, run); } } }, [rendered]); // Unmount: abort every in-flight leg so nothing fires into a dead tree. useIsomorphicLayoutEffect(() => { const runs = runsRef.current; return () => { for (const run of runs.values()) run.abort(); runs.clear(); }; }, []); // The single place new files enter the list, from either the native // picker or a drop — both funnel through here so maxSize/maxFiles/accept // are enforced identically regardless of path. function addFiles(incoming: File[]) { if (effectiveDisabled || incoming.length === 0) return; const selected = multiple ? incoming : incoming.slice(0, 1); // A single-file picker replaces its previous selection rather than // stacking, matching how a native non-multiple input behaves. const next = multiple ? [...files] : []; // Every rejection ends up here — a file kept out of the list entirely // by maxFiles, and a file added with status "error" by accept/maxSize // alike — because both need a message a screen reader actually reaches, // not just row text nothing moved focus to. const problems: string[] = []; let addedCount = 0; // Files past the first one in a drop onto a non-multiple zone are just // as much a rejection as anything below — the OS picker can't even // offer a multi-select when `multiple` is unset, so a drop is the only // path an extra file can arrive by at all. Discarding it without a word // would be an enhancement-path-only silent failure: the one path a // keyboard user cannot take (drag-and-drop) would behave differently // from the one they can (the picker, which physically can't produce // this case). for (const file of incoming.slice(selected.length)) { problems.push(`${file.name} was not added: only one file is accepted.`); } for (const file of selected) { if (maxFiles !== undefined && next.length >= maxFiles) { problems.push( `${file.name} was not added: the limit of ${maxFiles} file${maxFiles === 1 ? "" : "s"} has been reached.` ); continue; } if (!matchesAccept(file, accept)) { const error = `${file.name} is not an accepted file type.`; next.push({ id: createRowId(), file, progress: null, status: "error", error }); problems.push(error); addedCount += 1; continue; } if (maxSize !== undefined && file.size > maxSize) { const error = `${file.name} exceeds the ${formatBytes(maxSize)} limit.`; next.push({ id: createRowId(), file, progress: null, status: "error", error }); problems.push(error); addedCount += 1; continue; } next.push({ id: createRowId(), file, progress: null, status: "pending" }); addedCount += 1; } // Mirrors the liveMessage precedence right below: a rejection // anywhere in this batch wins the cue over an acceptance, and a // batch that added nothing plays nothing at all. Never `success` — // this component only tracks a selection/drop, it does not perform // the upload itself. const cue: SoundCue | undefined = problems.length > 0 ? "error" : addedCount > 0 ? "select" : undefined; commitFiles(next, cue); if (problems.length > 0) { announce(problems.join(" ")); } else if (addedCount > 0) { announce(`${addedCount} file${addedCount === 1 ? "" : "s"} added.`); } } function handleInputChange(event: ChangeEvent) { if (effectiveDisabled) return; addFiles(Array.from(event.currentTarget.files ?? [])); onChange?.(event); } /** * The reset that keeps the SAME file re-selectable happens HERE, on the * click that opens the picker, not after the change it produces. * * Clearing on change is the usual spelling of this trick, and it is what * the Svelte source does — but this control documents `name` and * `required` on a real ``, and an input cleared the * instant it changes carries no `FileList` into a native form submission: * the field posts nothing and `required` fails validation against a list * the reader can plainly see. Clearing at picker-open time leaves the * browser comparing the new pick against an empty value, so re-picking * the same file still counts as a change, and the pick then survives * until the next picker opens. * * Divergence from the Svelte source (which clears on change), with one * residual gap of its own: opening the picker and CANCELLING leaves the * input empty, so the native submission loses a pick the row list still * shows. Restoring it would need a `DataTransfer` round-trip. Drag-drop * has never fed the native input at all, on either side. * * The other end of that policy lives in `removeFile`, which clears the * input again the moment a removal takes one of its files out of the * list — the two together are what keep `required` from validating * against a file the reader can see is gone. */ function handleInputClick(event: MouseEvent) { event.currentTarget.value = ""; onClick?.(event); } function handleDragEnter(event: DragEvent) { event.preventDefault(); if (effectiveDisabled) return; setDragDepth((depth) => depth + 1); } function handleDragOver(event: DragEvent) { // Required on every dragover, disabled or not: without it the browser // never fires `drop` at all, and a disabled zone still needs `drop` to // fire so it can swallow the file instead of letting the browser // navigate to it. event.preventDefault(); } function handleDragLeave(event: DragEvent) { event.preventDefault(); if (effectiveDisabled) return; setDragDepth((depth) => Math.max(0, depth - 1)); } function handleDrop(event: DragEvent) { event.preventDefault(); setDragDepth(0); if (effectiveDisabled) return; const dropped = Array.from(event.dataTransfer?.files ?? []); addFiles(dropped); } function removeFile(fileId: string) { if (effectiveDisabled) return; const index = files.findIndex((entry) => entry.id === fileId); if (index === -1) return; const next = files.filter((entry) => entry.id !== fileId); commitFiles(next); // The input keeps its picked FileList (see `handleInputClick`), and // that list is what a native submit posts and what `required` // validates against — so a removal that takes a picked file out of // the list has to take it off the input too. Without this, removing // the file just picked leaves `required` satisfied by a file the // reader can plainly see is gone, and a submit posts it. const input = inputRef.current; if (input && input.files && input.files.length > 0) { const remaining = new Set(next.map((entry) => entry.file)); const stale = Array.from(input.files).some((file) => !remaining.has(file)); if (stale) input.value = ""; } // The removed row's own button can't keep focus. Move it to the row // that slid into its place, the row before it if this was the last // one, or back to the picker once the list is empty, rather than // letting it fall back to . // // The target is resolved from `next` by id, not by counting buttons // in the DOM, because the removed row has NOT left the DOM yet: its // exit transition is about to play, inert for the whole of it. A // DOM-order lookup would hand focus to the very button that is on // its way out — which browsers refuse to focus inside an inert // subtree, dropping focus on exactly where this code exists // to stop it landing. Reading `next` gives the same answer whether // the exit runs its course or reduced motion collapses it to // nothing — and the surviving button is already in the DOM, so the // lookup can run right here rather than after a tick. const target = next[Math.min(index, next.length - 1)]; const button = target ? Array.from(listRef.current?.querySelectorAll("[data-file-row]") ?? []) .find((row) => row.dataset.fileRow === target.id) ?.querySelector("[data-file-remove]") : undefined; if (button) { button.focus(); } else { inputRef.current?.focus(); } } const classes = cn("ft-file-upload flex flex-col gap-3", className); const dropzoneClasses = cn( "ft-file-upload-dropzone flex flex-col items-center gap-1 rounded-[10px] border-[1.5px] border-dashed p-[18px] text-center transition-colors", effectiveInvalid ? "border-destructive/60" : "ft-file-upload-accent-border", dragging && "ft-file-upload-dragging", effectiveDisabled && "cursor-not-allowed opacity-50" ); return (

{/* A real, focusable `` behind everything — this `` is a click-target enhancement layered on top of it, not a replacement path. Keyboard users reach the input directly by Tab and open the picker with Enter/Space, same as any native file input; this label only makes the whole prompt (not just the input's own tiny native button) clickable, and gives the input its default accessible name when the `label` prop and any surrounding FormField are both absent. The drop zone itself (the div above) stays a plain, non- interactive element — making it a button as well would nest two interactive controls around the same input. */} Drag and drop or browse {hint && (

{hint}

)}

{rendered.length > 0 && (

{entry.file.name} {entry.status === "uploading" ? (

) : entry.status === "error" && entry.error ? (
{entry.error}
) : entry.status === "done" ? ( Done ) : null}
{entry.status === "uploading" && entry.progress !== null && ( )}

)}

{liveMessage}

); } ); FileUpload.displayName = "FileUpload"; 54:T119b,/* * The brand accent has no semantic token, so it is declared locally with a * light-dark() fallback — the same shape Input uses for its own focus * ring — on the component root rather than the dropzone alone, since the * file rows' progress fills read it too and they are the dropzone's * sibling, not its descendant. Every other rule below reads this one * custom property, so retinting --ft-accent higher up the tree moves the * dashed border, the dragging state, the focus halo and the progress * fills together. */ .ft-file-upload { --ft-field-accent: var( --ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)) ); } .ft-file-upload-dropzone { background-color: color-mix(in oklab, var(--ft-field-accent) 4%, transparent); } .ft-file-upload-accent-border { border-color: color-mix(in oklab, var(--ft-field-accent) 40%, transparent); } .ft-file-upload-dragging { border-color: var(--ft-field-accent); background-color: color-mix(in oklab, var(--ft-field-accent) 10%, transparent); } /* Keyboard focus lands on the sr-only input, not the dropzone — this is what actually surfaces that focus to a sighted user. :has() runs off the input's own :focus-visible, so it never lights up on a mouse click, only on the same conditions the input's own ring would use if it were visible. */ .ft-file-upload-dropzone:has(.ft-file-upload-input:focus-visible) { border-color: var(--ft-field-accent); border-style: solid; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-field-accent) 25%, transparent); } .ft-file-upload-browse { color: var(--ft-field-accent); } .ft-file-upload-icon { font-size: 18px; color: var(--ft-field-accent); } .ft-file-upload-progress-track { position: relative; height: 3px; border-radius: 2px; overflow: hidden; background-color: var(--color-muted, rgba(255, 255, 255, 0.08)); } /* * scaleX off a custom property, never `width` — the same technique * ScrollProgress ships for the same reason: a width change forces layout on * every progress report a consumer pushes in, while a transform is * compositor-only. The property carries a 0–1 ratio (70% is `0.7`), so the * component never has to parse a percentage back out of a style string. * `transform-origin: left` makes the bar grow from the start edge. */ .ft-file-upload-progress-fill { position: absolute; inset: 0; border-radius: 2px; background-color: var(--ft-field-accent, currentColor); transform: scaleX(var(--ft-fileupload-progress, 0)); transform-origin: left; } /* * `width: 40%` is layout, not animation: it sizes the travelling block once * and never changes it, which is why it stays a `width` rather than becoming * another transform. `transform: none` un-does the determinate rule above — * without it an indeterminate bar under reduced motion (where the keyframes * never run) would sit at `scaleX(0)` and vanish, where today it shows a * static block. The keyframes below out-rank this declaration whenever the * animation is actually running. */ .ft-file-upload-progress-indeterminate { width: 40%; transform: none; } @media (prefers-reduced-motion: no-preference) { /* A bar that eases toward each reported value instead of jumping to it is the whole user-visible point of the swap above. tokens.ts: DURATIONS.fast / EASINGS.out. */ .ft-file-upload-progress-fill { transition: transform var(--ft-duration-fast, 150ms) var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .ft-file-upload-progress-indeterminate { /* tokens.* n/a: loop period, component-owned */ animation: ft-file-upload-indeterminate 1.4s var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)) infinite; } } /* translateX, not margin-left: a margin animation re-runs layout on every frame of a loop that never stops. The arithmetic: the block is 40% of the track wide, so -100% parks it fully off the left edge and 250% (2.5 × 40%) carries it fully off the right. */ @keyframes ft-file-upload-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .ft-file-upload-done { color: var(--ft-status-done, light-dark(oklch(0.5 0.14 145), oklch(0.72 0.15 145))); } .ft-file-upload-remove { font-size: 11px; line-height: 1; padding: 4px; border-radius: 999px; } .ft-file-upload-remove:hover:not(:disabled) { background-color: color-mix(in oklab, currentColor 10%, transparent); } .ft-file-upload-remove:disabled { opacity: 0.5; cursor: not-allowed; } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"react/src/components/file-upload/FileUpload.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/file-upload/FileUpload.tsx"},{"path":"react/src/components/file-upload/file-upload.css","content":"$54","type":"registry:ui","target":"@ui/fancy/components/file-upload/file-upload.css"},{"path":"react/src/components/file-upload/index.ts","content":"\"use client\";\n\nexport { FileUpload } from \"./FileUpload\";\nexport type { FileUploadProps, UploadFile } from \"./FileUpload\";\n","type":"registry:ui","target":"@ui/fancy/components/file-upload/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]