@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/expanding-search/expanding-search.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { AnimatePresence, animate, motion, useMotionValue, useMotionValueEvent, useReducedMotion } from "motion/react";
+import { Search, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./expanding-search.module.css";
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+const FALLBACK_SIZE = 44;
+/** Title starts beat word starts, which beat matches inside a word, which beat keyword and meta matches. Ties keep the original order. */
+function rank(items, query, limit) {
+    const q = query.toLocaleLowerCase();
+    const scored = [];
+    items.forEach((item, order) => {
+        const title = item.title.toLocaleLowerCase();
+        const at = title.indexOf(q);
+        const extra = [item.meta ?? "", ...(item.keywords ?? [])].some(word => word.toLocaleLowerCase().includes(q));
+        const score = at === 0 ? 0 : at > 0 && /[\s\-/]/.test(title[at - 1]) ? 1 : at > 0 ? 2 : extra ? 3 : -1;
+        if (score >= 0)
+            scored.push({ item, score, order });
+    });
+    return scored.sort((a, b) => a.score - b.score || a.order - b.order).slice(0, limit).map(entry => entry.item);
+}
+function groupBy(list, source) {
+    const order = new Map();
+    source.forEach((item, index) => { const name = item.group ?? ""; if (!order.has(name))
+        order.set(name, index); });
+    const groups = new Map();
+    list.forEach(item => { const name = item.group ?? ""; groups.set(name, [...(groups.get(name) ?? []), item]); });
+    return [...groups].sort((a, b) => (order.get(a[0]) ?? 0) - (order.get(b[0]) ?? 0)).map(([name, items]) => ({ name, items }));
+}
+function Match({ text, query }) {
+    const at = query ? text.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) : -1;
+    if (at < 0)
+        return text;
+    return _jsxs(_Fragment, { children: [text.slice(0, at), _jsx("mark", { className: styles.mark, children: text.slice(at, at + query.length) }), text.slice(at + query.length)] });
+}
+/** The panel shares the field's width value, so on first open it unfolds out of the field; afterwards only its height follows the content. */
+function Panel({ width, reduced, children }) {
+    const panelRef = useRef(null);
+    const bodyRef = useRef(null);
+    const height = useMotionValue(0);
+    useLayoutEffect(() => {
+        const panel = panelRef.current, body = bodyRef.current;
+        if (!panel || !body || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            const next = body.offsetHeight + panel.offsetHeight - panel.clientHeight;
+            if (reduced)
+                height.jump(next);
+            else
+                animate(height, next, motionTokens.spring.smooth);
+        });
+        observer.observe(body);
+        return () => observer.disconnect();
+    }, [height, reduced]);
+    // Reduced motion skips the unfold: the panel is its content's height from the first frame and only fades.
+    return _jsx(motion.div, { ref: panelRef, className: styles.panel, style: { width, height: reduced ? "auto" : height }, initial: { opacity: 0 }, animate: { opacity: 1, transition: { duration: reduced ? .15 : motionTokens.duration.fast, ease: enter } }, exit: { opacity: 0, transition: { duration: reduced ? .1 : motionTokens.duration.instant, ease: standard } }, children: _jsx("div", { ref: bodyRef, className: styles.body, children: children }) });
+}
+/** Offsets ignore transforms, so they describe where rows sit in the list, not where a gliding row happens to be mid-flight. */
+function offsetWithin(node, container) {
+    let top = 0;
+    let current = node;
+    while (current && current !== container) {
+        top += current.offsetTop;
+        current = current.offsetParent;
+    }
+    return top;
+}
+function Listbox({ id, label, groups, query, activeIndex, optionId, reduced, keyboard, onHover, onChoose }) {
+    const listRef = useRef(null);
+    const flat = groups.flatMap(group => group.items);
+    const layoutKey = flat.map(item => item.id).join("|");
+    const activeItem = flat[activeIndex];
+    const activeId = activeItem ? optionId(activeItem) : "";
+    /** The highlight lives inside the active row, so it rides that row wherever it glides. Moving to another row, it starts where the old one was and springs home. */
+    const travel = useMotionValue(0);
+    const fade = useMotionValue(1);
+    const last = useRef(null);
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        const row = activeId ? document.getElementById(activeId) : null;
+        if (!list || !row) {
+            last.current = null;
+            return;
+        }
+        const top = offsetWithin(row, list);
+        const previous = last.current;
+        last.current = { id: activeId, set: layoutKey, top };
+        // Same row: its highlight is already in place, and any travel still in flight stays relative to it.
+        if (previous?.id === activeId)
+            return;
+        if (previous && previous.set === layoutKey && !reduced) {
+            const velocity = travel.getVelocity();
+            travel.jump(previous.top + travel.get() - top);
+            animate(travel, 0, { ...motionTokens.spring.snappy, velocity });
+        }
+        else {
+            // Nothing was highlighted, or new results arrived: it fades in on its row, without travel.
+            travel.jump(0);
+            if (reduced)
+                fade.jump(1);
+            else {
+                fade.jump(0);
+                animate(fade, 1, { duration: motionTokens.duration.instant, ease: enter });
+            }
+        }
+        if (keyboard.current)
+            row.scrollIntoView({ block: "nearest" });
+    }, [activeId, layoutKey, reduced, travel, fade, keyboard]);
+    return _jsx("div", { ref: listRef, id: id, role: "listbox", "aria-label": label, className: styles.listbox, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: groups.map(group => {
+                const headingId = `${id}-${group.name || "results"}`.replace(/\s+/g, "-");
+                return _jsxs(motion.div, { role: "group", "aria-labelledby": group.name ? headingId : undefined, className: styles.group, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: .08 } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, children: [group.name && _jsx("div", { id: headingId, className: styles.groupLabel, role: "presentation", children: group.name }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: group.items.map(item => {
+                                const position = flat.indexOf(item);
+                                const active = position === activeIndex;
+                                return _jsxs(motion.div, { id: optionId(item), role: "option", "aria-selected": active, "data-active": active || undefined, className: styles.option, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: .08 } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, onPointerMove: () => { if (!active) {
+                                        keyboard.current = false;
+                                        onHover(position);
+                                    } }, onMouseDown: event => event.preventDefault(), onClick: () => onChoose(item), children: [active && _jsx(motion.span, { className: styles.highlight, style: { y: travel, opacity: fade }, "aria-hidden": "true" }), item.icon && _jsx("span", { className: styles.optionIcon, "aria-hidden": "true", children: item.icon }), _jsxs("span", { className: styles.optionText, children: [_jsx("span", { className: styles.optionTitle, children: _jsx(Match, { text: item.title, query: query }) }), item.meta && _jsx("span", { className: styles.optionMeta, children: item.meta })] })] }, item.id);
+                            }) })] }, group.name);
+            }) }) });
+}
+export function ExpandingSearch({ label, items, suggestions = [], suggestionsLabel = "Recent", placeholder, onSelect, onExpandedChange, expandedWidth = 360, maxResults = 6, anchor = "end", emptyHint = "Try a shorter word or check the spelling.", className }) {
+    const id = useId();
+    const reduced = useReducedMotion() ?? false;
+    const rootRef = useRef(null);
+    const shellRef = useRef(null);
+    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(-1);
+    const open = useRef(false);
+    const size = useRef({ collapsed: FALLBACK_SIZE, expanded: expandedWidth });
+    const width = useMotionValue(FALLBACK_SIZE);
+    /** True while the last highlight move came from the keyboard, so only keyboard moves scroll the list. */
+    const keyboard = useRef(false);
+    // The corner radius follows the width: a circle while collapsed, the control radius once open. It rides the same spring, so the two never drift apart.
+    const syncShape = useCallback((value) => {
+        const { collapsed, expanded: full } = size.current;
+        shellRef.current?.style.setProperty("--es-open", String(Math.min(1, Math.max(0, (value - collapsed) / Math.max(1, full - collapsed)))));
+    }, []);
+    useMotionValueEvent(width, "change", syncShape);
+    // The field grows to its own limit or its container, whichever is smaller. Container resizes are followed at once; they are not the person's action.
+    useLayoutEffect(() => {
+        const root = rootRef.current, shell = shellRef.current;
+        if (!root || !shell)
+            return;
+        const measure = () => {
+            const collapsed = shell.offsetHeight || FALLBACK_SIZE;
+            const full = Math.max(collapsed, Math.min(expandedWidth, root.clientWidth));
+            size.current = { collapsed, expanded: full };
+            root.style.setProperty("--es-width", `${full}px`);
+            const goal = open.current ? full : collapsed;
+            if (width.isAnimating())
+                animate(width, goal, motionTokens.spring.morph);
+            else
+                width.jump(goal);
+            syncShape(width.get());
+        };
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, [expandedWidth, width, syncShape]);
+    // Opening grows on the morph spring with a hint of overshoot; folding back settles without one, so the circle never dips below its own size.
+    const morphTo = (goal) => { if (reduced)
+        width.jump(goal);
+    else
+        animate(width, goal, goal >= width.get() ? motionTokens.spring.morph : motionTokens.spring.smooth); };
+    // Focus moves inside the same click, so touch keyboards open; the field is inert until this flush makes it focusable.
+    function expand() {
+        if (open.current)
+            return;
+        open.current = true;
+        flushSync(() => { setExpanded(true); setFocused(true); });
+        inputRef.current?.focus({ preventScroll: true });
+        morphTo(size.current.expanded);
+        onExpandedChange?.(true);
+    }
+    function collapse(returnFocus) {
+        if (!open.current)
+            return;
+        open.current = false;
+        flushSync(() => { setExpanded(false); setFocused(false); setQuery(""); setActive(-1); });
+        if (returnFocus)
+            buttonRef.current?.focus({ preventScroll: true });
+        morphTo(size.current.collapsed);
+        onExpandedChange?.(false);
+    }
+    const trimmed = query.trim();
+    const results = useMemo(() => trimmed ? rank(items, trimmed, maxResults) : [], [items, trimmed, maxResults]);
+    const mode = !trimmed ? (suggestions.length ? "suggestions" : null) : results.length ? "results" : "empty";
+    const groups = useMemo(() => mode === "suggestions" ? [{ name: suggestionsLabel, items: suggestions }] : mode === "results" ? groupBy(results, items) : [], [mode, suggestions, suggestionsLabel, results, items]);
+    const flat = groups.flatMap(group => group.items);
+    const activeIndex = Math.min(active, flat.length - 1);
+    const activeItem = flat[activeIndex];
+    const optionId = (item) => `${id}-${mode}-${item.id}`;
+    const listboxId = `${id}-${mode}-listbox`;
+    const panelOpen = expanded && focused && mode !== null;
+    const announcement = !panelOpen ? "" : mode === "empty" ? `No results for ${trimmed}` : mode === "results" ? `${flat.length} ${flat.length === 1 ? "result" : "results"}` : `${flat.length} ${suggestionsLabel.toLocaleLowerCase()} ${flat.length === 1 ? "item" : "items"}`;
+    function choose(item) {
+        collapse(true);
+        onSelect?.(item);
+    }
+    function handleKeyDown(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            collapse(true);
+            return;
+        }
+        if (!panelOpen || !flat.length)
+            return;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            const step = event.key === "ArrowDown" ? 1 : -1;
+            keyboard.current = true;
+            setActive(activeIndex < 0 ? (step > 0 ? 0 : flat.length - 1) : (activeIndex + step + flat.length) % flat.length);
+        }
+        else if (event.key === "Enter" && activeItem) {
+            event.preventDefault();
+            choose(activeItem);
+        }
+    }
+    const clearHidden = reduced ? { opacity: 0 } : { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-anchor": anchor, children: [_jsxs(motion.div, { ref: shellRef, className: styles.shell, "data-expanded": expanded || undefined, style: { width }, children: [_jsx("button", { ref: buttonRef, type: "button", className: styles.trigger, "aria-label": label, hidden: expanded, onClick: expand }), _jsx(Search, { className: styles.icon, width: 18, height: 18, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx(motion.input, { ref: inputRef, className: styles.input, type: "text", role: "combobox", inert: !expanded, value: query, placeholder: placeholder ?? label, "aria-label": label, "aria-expanded": panelOpen, "aria-controls": panelOpen && mode !== "empty" ? listboxId : undefined, "aria-autocomplete": "list", "aria-activedescendant": panelOpen && activeItem ? optionId(activeItem) : undefined, autoComplete: "off", autoCorrect: "off", spellCheck: false, enterKeyHint: "search", initial: false, animate: { opacity: expanded ? 1 : 0 }, transition: expanded ? { duration: reduced ? .15 : .2, ease: enter, delay: reduced ? 0 : .08 } : { duration: reduced ? .1 : .08, ease: standard }, onChange: event => { const next = event.target.value; setQuery(next); setActive(next.trim() ? 0 : -1); keyboard.current = false; }, onFocus: () => setFocused(true), onBlur: () => {
+                            // Switching windows keeps the search as it was; the field refocuses on return.
+                            if (typeof document !== "undefined" && !document.hasFocus())
+                                return;
+                            setFocused(false);
+                            if (open.current && !inputRef.current?.value.trim())
+                                collapse(false);
+                        }, onKeyDown: handleKeyDown }), _jsx(AnimatePresence, { initial: false, children: expanded && query && _jsx(motion.button, { type: "button", tabIndex: -1, className: styles.clear, "aria-label": "Clear search", onMouseDown: event => event.preventDefault(), onClick: () => { setQuery(""); setActive(-1); inputRef.current?.focus({ preventScroll: true }); }, initial: clearHidden, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { ...clearHidden, transition: { duration: reduced ? .1 : motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: .15 } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast }, filter: { duration: motionTokens.duration.fast } }, children: _jsx(X, { width: 16, height: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") })] }), _jsx(AnimatePresence, { children: panelOpen && _jsx(Panel, { width: width, reduced: reduced, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.div, { className: styles.view, initial: reduced ? { opacity: 0 } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .1, ease: standard } }, transition: { duration: reduced ? .15 : motionTokens.duration.fast, ease: enter }, children: mode === "empty"
+                                ? _jsxs("div", { className: styles.empty, children: [_jsxs("p", { className: styles.emptyTitle, children: ["No results for \u201C", trimmed, "\u201D"] }), _jsx("p", { className: styles.emptyHint, children: emptyHint })] })
+                                : _jsx(Listbox, { id: listboxId, label: mode === "suggestions" ? suggestionsLabel : `Results for ${trimmed}`, groups: groups, query: mode === "results" ? trimmed : "", activeIndex: activeIndex, optionId: optionId, reduced: reduced, keyboard: keyboard, onHover: setActive, onChoose: choose }) }, mode) }) }, "panel") }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
+}
+export default ExpandingSearch;

package/components/expanding-search/expanding-search.module.css

@@ -0,0 +1,52 @@
+/* The root is the lane the field may grow into. Only the shell and the panel take pointer events, so an idle lane never blocks what sits under it. */
+.root { position: relative; width: 100%; min-width: var(--control-height-md); height: var(--control-height-md); pointer-events: none; }
+/* One shell is both the button and the field. Its width rides a spring and its radius follows the width, from a circle to the control radius. */
+.shell { position: absolute; top: 0; right: 0; height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--control-height-md) / 2 - (var(--control-height-md) / 2 - var(--radius-control)) * var(--es-open, 0)); corner-shape: round; background: var(--surface); color: var(--text-secondary); pointer-events: auto; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.root[data-anchor="start"] .shell { right: auto; left: 0; }
+.shell[data-expanded] { border-color: var(--border-strong); color: var(--foreground); }
+.shell:has(> .trigger:focus-visible), .shell:has(> .input:focus) { border-color: var(--foreground); box-shadow: 0 0 0 3px var(--focus-ring); color: var(--foreground); }
+@media (hover: hover) and (pointer: fine) {
+  .shell:not([data-expanded]):hover { background: var(--surface-muted); color: var(--foreground); }
+  .shell[data-expanded]:not(:has(> .input:focus)):hover { border-color: var(--foreground); }
+  .clear:hover { background: var(--surface-muted); color: var(--foreground); }
+}
+/* A compact press while it is still a button; the morph takes over on release. */
+.shell:not([data-expanded]):has(> .trigger:active) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-standard), var(--duration-instant); }
+.shell[data-expanded] { corner-shape: var(--corner-shape); }
+.trigger { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; corner-shape: inherit; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.trigger:focus-visible { outline: none; }
+/* The glass sits at the leading edge, so it is centered in the circle and rides that edge to its place in the open field. */
+.icon { position: absolute; top: calc(50% - 9px); left: calc(var(--control-height-md) / 2 - 10px); pointer-events: none; }
+.input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 40px 0 38px; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-overflow: ellipsis; outline: none; }
+.input:focus-visible { outline: none; }
+.input::placeholder { color: var(--text-muted); opacity: 1; }
+.input[inert] { pointer-events: none; }
+.clear { position: absolute; z-index: 1; top: calc(50% - 14px); right: 7px; display: grid; width: 28px; height: 28px; place-items: center; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
+
+/* A floating layer: its width is the field's, so it unfolds from the field on first open; its content keeps the final width and rides the leading edge. */
+.panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); pointer-events: auto; }
+.root[data-anchor="start"] .panel { right: auto; left: 0; }
+.body { position: relative; width: calc(var(--es-width, 360px) - 2px); max-height: min(22rem, 60vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; }
+.view { position: relative; }
+/* A flex gap, not margins: a group popping out while it leaves never lets the next one's margin collapse through the list. */
+.listbox { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; }
+.group { position: relative; }
+.groupLabel { padding: 8px 12px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
+/* Nested corners step down from the panel by its inset. The highlight paints under every row's content, so text never hides while it travels. */
+.option { position: relative; display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); color: var(--foreground); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
+.highlight { position: absolute; z-index: -1; inset: 0; border-radius: inherit; corner-shape: inherit; background: color-mix(in oklab, var(--foreground) 6%, transparent); pointer-events: none; }
+.optionIcon { display: grid; flex: none; width: 18px; place-items: center; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
+.option[data-active] .optionIcon { color: var(--foreground); }
+.optionText { display: grid; min-width: 0; }
+.optionTitle, .optionMeta { overflow: hidden; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
+.optionTitle { color: var(--foreground); font-size: var(--text-sm); }
+.optionMeta { color: var(--text-muted); font-size: var(--text-xs); }
+.mark { background: none; color: var(--foreground); font-weight: 500; }
+.empty { display: grid; gap: 2px; padding: 12px 12px 14px; }
+.emptyTitle { margin: 0; overflow-wrap: anywhere; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+.emptyHint { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) {
+  .shell, .clear, .optionIcon { transition: none; }
+  .shell:not([data-expanded]):has(> .trigger:active) { transform: none; }
+}

package/components/file-dropzone/file-dropzone.d.ts

@@ -0,0 +1,44 @@
+export type FileDropzoneStatus = "uploading" | "uploaded" | "failed";
+/** One row in the file list. A row without a status is a plain selection. */
+/** `preview` is a thumbnail URL; image files added by the visitor get one automatically. */
+export type FileDropzoneItem = {
+    id: string;
+    name: string;
+    size: number;
+    status?: FileDropzoneStatus;
+    progress?: number;
+    error?: string;
+    retryable?: boolean;
+    file?: File;
+    preview?: string;
+};
+/** Report 0 to 100 through onProgress, resolve when the file lands, or reject with an Error whose message becomes the row's reason. Removing the row aborts the signal. */
+export type FileDropzoneUpload = (item: FileDropzoneItem, options: {
+    onProgress: (percent: number) => void;
+    signal: AbortSignal;
+}) => Promise<void>;
+export type FileDropzoneProps = {
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    onFilesChange?: (files: File[]) => void;
+    label?: string;
+    description?: string;
+    /** Rows present at mount, such as files uploaded earlier. They render in place without an entrance. */
+    defaultItems?: FileDropzoneItem[];
+    /** Uploads each added file. Without it the list shows plain selections. */
+    onUpload?: FileDropzoneUpload;
+    /** Files above this many bytes fail with a size reason and never upload. */
+    maxSize?: number;
+    /** Render the file list under the drop target or inside its edge. */
+    listPlacement?: "below" | "inside";
+    /** Replaces the small line under the description. */
+    note?: string;
+    /** Label while files hover over the target. */
+    dropLabel?: string;
+    /** Once the list holds this many files, the prompt folds to a slim bar so the list has room. A file dragged over brings the icon back. */
+    compactAt?: number;
+};
+export declare function formatFileSize(bytes: number): string;
+export declare function FileDropzone({ accept, multiple, maxFiles, onFilesChange, label, description, defaultItems, onUpload, maxSize, listPlacement, note, dropLabel, compactAt }: FileDropzoneProps): import("react").JSX.Element;
+export default FileDropzone;