@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/file-upload/file-upload.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from "motion/react";
+import { File, FileArchive, FileImage, FileText, RotateCw, UploadCloud, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./file-upload.module.css";
+const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const instant = { duration: 0 };
+const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
+const iconIn = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };
+const shown = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+function FileTypeIcon({ file }) {
+    const props = { size: 16, strokeWidth: 1.8, "aria-hidden": true };
+    if (file.type.startsWith("image/"))
+        return _jsx(FileImage, { ...props });
+    if (file.type.startsWith("text/"))
+        return _jsx(FileText, { ...props });
+    if (file.type.includes("zip") || file.name.endsWith(".gz"))
+        return _jsx(FileArchive, { ...props });
+    return _jsx(File, { ...props });
+}
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${Math.round(bytes / 1024)} KB`;
+    const mb = bytes / (1024 * 1024);
+    return `${mb >= 10 ? Math.round(mb) : Number(mb.toFixed(1))} MB`;
+}
+/** Outgoing copies are hidden from assistive tech while they fade, so live text reads only the current message. */
+function Swap(props) {
+    const present = useIsPresent();
+    return _jsx(motion.span, { ...props, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+function FileRow({ item, upload, reduce, onRemove, onRetry, removeRef }) {
+    const status = upload?.status;
+    // A finished upload keeps its bar until the spring reaches the end, so 100% is seen before the label turns to Uploaded.
+    const [filled, setFilled] = useState(status !== "uploading");
+    const [seen, setSeen] = useState(status);
+    if (seen !== status) {
+        setSeen(status);
+        if (status === "uploading")
+            setFilled(false);
+    }
+    const shownStatus = status === "done" && !filled && !reduce ? "uploading" : status;
+    const phase = item.error ? "invalid" : shownStatus ?? "ready";
+    // One spring drives the bar and the counted percentage, so both always agree.
+    const progress = useMotionValue(upload?.progress ?? 0);
+    // The fill slides in from the left instead of scaling, so its rounded end keeps its shape at every value.
+    const x = useTransform(progress, latest => `${Math.min(Math.max(latest, 0), 100) - 100}%`);
+    const percent = useTransform(progress, latest => `${Math.round(Math.min(Math.max(latest, 0), 100))}%`);
+    const target = status === "done" ? 100 : upload?.progress ?? 0;
+    useEffect(() => {
+        // Every upload starts from an empty bar, even a retry that failed halfway.
+        if (reduce || (status === "uploading" && target === 0)) {
+            progress.jump(target);
+            return;
+        }
+        const controls = animate(progress, target, { ...motionTokens.spring.smooth, onComplete: status === "done" ? () => setFilled(true) : undefined });
+        return () => controls.stop();
+    }, [status, target, progress, reduce]);
+    // The label turns as soon as the count reads 100%, without waiting out the spring's last fraction of a pixel.
+    useMotionValueEvent(progress, "change", latest => { if (status === "done" && latest >= 99.5)
+        setFilled(true); });
+    const swap = { initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOut : textOut, transition: reduce ? instant : enter };
+    return _jsxs("div", { className: styles.fileItem, children: [_jsx("span", { className: styles.fileIcon, children: _jsx(FileTypeIcon, { file: item.file }) }), _jsxs("span", { className: styles.fileCopy, children: [_jsx("strong", { title: item.file.name, children: item.file.name }), _jsxs("span", { className: styles.meta, children: [formatSize(item.file.size), shownStatus ? _jsxs(_Fragment, { children: [_jsx("span", { className: styles.dot, "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: styles.phase, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: shownStatus === "failed" ? `${styles.phaseText} ${styles.error}` : styles.phaseText, ...swap, children: shownStatus === "uploading" ? _jsxs(_Fragment, { children: ["Uploading ", _jsx(motion.span, { className: styles.percent, children: percent })] }) : shownStatus === "done" ? "Uploaded" : "Upload failed" }, shownStatus) }) })] }) : null] }), item.error && _jsx("span", { className: styles.error, children: item.error }), _jsx(AnimatePresence, { initial: false, children: shownStatus === "uploading" && _jsx(motion.span, { className: styles.barFrame, initial: reduce ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: reduce ? fadeOut : { height: 0, opacity: 0, transition: { height: { ...motionTokens.spring.smooth, delay: .24 }, opacity: { ...exitFast, delay: .24 } } }, transition: reduce ? instant : { height: motionTokens.spring.smooth, opacity: enter }, children: _jsx("span", { className: styles.bar, children: _jsx(motion.span, { className: styles.barFill, style: { x } }) }) }, "bar") })] }), _jsx("span", { className: styles.statusSlot, children: _jsxs(AnimatePresence, { mode: "popLayout", initial: false, children: [(phase === "ready" || phase === "done") && _jsxs(motion.span, { className: styles.ready, initial: reduce ? { opacity: 0 } : { opacity: 0, scale: .8 }, animate: { opacity: 1, scale: 1 }, exit: fadeOut, transition: reduce ? instant : motionTokens.spring.snappy, children: [_jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx(motion.path, { d: "M4 12.5l5 5L20 6.5", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { ...enter, delay: .08 } }) }), _jsx("span", { className: styles.srOnly, children: phase === "done" ? "Uploaded" : "Ready" })] }, "ready"), phase === "failed" && _jsx(motion.span, { className: styles.retrySlot, initial: reduce ? { opacity: 0 } : iconIn, animate: shown, exit: reduce ? fadeOut : { ...iconIn, transition: exitFast }, transition: reduce ? instant : motionTokens.spring.snappy, children: _jsx("button", { type: "button", className: styles.retry, "aria-label": `Retry ${item.file.name}`, onClick: onRetry, children: _jsx(RotateCw, { size: 14, strokeWidth: 1.8, "aria-hidden": "true" }) }) }, "retry")] }) }), _jsx("button", { ref: removeRef, type: "button", className: styles.remove, "aria-label": `Remove ${item.file.name}`, onClick: onRemove, children: _jsx(X, { size: 15, "aria-hidden": "true" }) })] });
+}
+export function FileUpload({ accept, disabled = false, label = "Upload files", description = "Drop files here or browse from your device.", multiple = true, maxSize, value, onChange, onUpload, }) {
+    const inputId = useId();
+    const reduce = useReducedMotion();
+    const inputRef = useRef(null);
+    const dropzoneRef = useRef(null);
+    const [internalFiles, setInternalFiles] = useState([]);
+    const [dragging, setDragging] = useState(false);
+    const [status, setStatus] = useState("");
+    const [uploads, setUploads] = useState({});
+    const dragDepth = useRef(0);
+    const nextId = useRef(0);
+    const controllers = useRef(new Map());
+    const removeRefs = useRef(new Map());
+    const files = value ?? internalFiles;
+    useEffect(() => {
+        const active = controllers.current;
+        return () => active.forEach(controller => controller.abort());
+    }, []);
+    function update(next) {
+        if (value === undefined)
+            setInternalFiles(next);
+        onChange?.(next);
+    }
+    function startUpload(item) {
+        if (!onUpload)
+            return;
+        controllers.current.get(item.id)?.abort();
+        const controller = new AbortController();
+        controllers.current.set(item.id, controller);
+        const set = (next) => setUploads(current => ({ ...current, [item.id]: next(current[item.id]) }));
+        set(() => ({ status: "uploading", progress: 0 }));
+        onUpload(item.file, {
+            signal: controller.signal,
+            onProgress: percent => { if (!controller.signal.aborted)
+                set(current => ({ status: "uploading", progress: Math.min(Math.max(percent, current?.progress ?? 0), 100) })); },
+        }).then(() => {
+            if (controller.signal.aborted)
+                return;
+            set(() => ({ status: "done", progress: 100 }));
+            setStatus(`${item.file.name} uploaded.`);
+        }, () => {
+            if (controller.signal.aborted)
+                return;
+            set(current => ({ status: "failed", progress: current?.progress ?? 0 }));
+            setStatus(`${item.file.name} could not be uploaded.`);
+        }).finally(() => { if (controllers.current.get(item.id) === controller)
+            controllers.current.delete(item.id); });
+    }
+    function addFiles(fileList) {
+        const incoming = Array.from(fileList).slice(0, multiple ? undefined : 1);
+        const acceptedTypes = accept?.split(",").map(type => type.trim().toLowerCase()).filter(Boolean) ?? [];
+        const matchesAccept = (file) => acceptedTypes.length === 0 || acceptedTypes.some(type => type.startsWith(".")
+            ? file.name.toLowerCase().endsWith(type)
+            : type.endsWith("/*") ? file.type.startsWith(type.slice(0, -1)) : file.type === type);
+        const accepted = incoming.map(file => ({
+            id: `${file.name}-${file.lastModified}-${nextId.current++}`,
+            file,
+            error: !matchesAccept(file)
+                ? "This file type is not accepted."
+                : maxSize && file.size > maxSize ? `File is larger than ${formatSize(maxSize)}.` : undefined,
+        }));
+        if (!multiple)
+            controllers.current.forEach(controller => controller.abort());
+        update(multiple ? [...files, ...accepted] : accepted);
+        const invalidCount = accepted.filter(item => item.error).length;
+        const validCount = accepted.length - invalidCount;
+        const added = `${validCount} file${validCount === 1 ? "" : "s"} added.`;
+        const attention = `${invalidCount} file${invalidCount === 1 ? " needs" : "s need"} attention.`;
+        setStatus(!invalidCount ? added : validCount ? `${added} ${attention}` : attention);
+        accepted.filter(item => !item.error).forEach(startUpload);
+    }
+    function removeFile(item) {
+        controllers.current.get(item.id)?.abort();
+        controllers.current.delete(item.id);
+        // Keep keyboard focus in the list: the next row's remove button, else the previous one, else the dropzone.
+        const index = files.findIndex(file => file.id === item.id);
+        const neighbor = files[index + 1] ?? files[index - 1];
+        update(files.filter(file => file.id !== item.id));
+        setStatus(`${item.file.name} removed.`);
+        requestAnimationFrame(() => (neighbor ? removeRefs.current.get(neighbor.id) : dropzoneRef.current)?.focus());
+    }
+    function handleInput(event) {
+        if (event.target.files)
+            addFiles(event.target.files);
+        event.target.value = "";
+    }
+    function handleDrop(event) {
+        event.preventDefault();
+        dragDepth.current = 0;
+        setDragging(false);
+        if (!disabled && event.dataTransfer.files.length)
+            addFiles(event.dataTransfer.files);
+    }
+    function handleDragEnter(event) {
+        event.preventDefault();
+        if (!disabled) {
+            dragDepth.current += 1;
+            setDragging(true);
+        }
+    }
+    function handleDragLeave(event) {
+        event.preventDefault();
+        dragDepth.current = Math.max(0, dragDepth.current - 1);
+        if (dragDepth.current === 0)
+            setDragging(false);
+    }
+    function handleKeyDown(event) {
+        if (disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            inputRef.current?.click();
+        }
+    }
+    const height = reduce ? instant : { height: motionTokens.spring.smooth, opacity: enter };
+    return _jsxs("div", { className: styles.root, children: [_jsx("input", { ref: inputRef, id: inputId, className: styles.input, type: "file", accept: accept, multiple: multiple, disabled: disabled, onChange: handleInput }), _jsxs("div", { ref: dropzoneRef, className: [styles.dropzone, dragging ? styles.dragging : "", disabled ? styles.disabled : ""].filter(Boolean).join(" "), role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, "aria-describedby": `${inputId}-description`, onClick: () => !disabled && inputRef.current?.click(), onKeyDown: handleKeyDown, onDragEnter: handleDragEnter, onDragOver: event => event.preventDefault(), onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("span", { className: styles.uploadIcon, children: _jsx(UploadCloud, { size: 20, strokeWidth: 1.8, "aria-hidden": "true" }) }), _jsxs("span", { className: styles.copy, children: [_jsx("strong", { className: styles.label, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.labelText, initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOut : textOut, transition: reduce ? instant : enter, children: dragging ? `Drop to add ${multiple ? "files" : "a file"}` : label }, dragging ? "drop" : "idle") }) }), _jsx("span", { id: `${inputId}-description`, children: description })] }), _jsx("span", { className: styles.browse, children: "Browse" })] }), _jsx(motion.div, { className: styles.statusFrame, initial: false, animate: { height: status ? "auto" : 0 }, transition: height, children: _jsx("p", { className: styles.status, "aria-live": "polite", "aria-atomic": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: status ? _jsx(Swap, { className: styles.statusText, initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOut : textOut, transition: reduce ? instant : enter, children: status }, status) : null }) }) }), _jsx(motion.ul, { className: styles.fileList, "aria-label": "Selected files", "aria-hidden": files.length === 0 ? true : undefined, initial: false, animate: { paddingTop: files.length ? 6 : 0 }, transition: reduce ? instant : motionTokens.spring.smooth, children: _jsx(AnimatePresence, { initial: false, children: files.map(item => _jsx(motion.li, { className: styles.fileRow, initial: reduce ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: reduce ? fadeOut : { height: 0, opacity: 0, transition: { height: motionTokens.spring.smooth, opacity: exitFast } }, transition: height, children: _jsx(FileRow, { item: item, upload: uploads[item.id], reduce: reduce, onRemove: () => removeFile(item), onRetry: () => startUpload(item), removeRef: node => { if (node)
+                                removeRefs.current.set(item.id, node);
+                            else
+                                removeRefs.current.delete(item.id); } }) }, item.id)) }) })] });
+}
+export default FileUpload;

package/components/file-upload/file-upload.module.css

@@ -0,0 +1,49 @@
+.root { display: grid; width: 100%; min-width: 0; color: var(--foreground); }
+.input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
+/* A full-width drop target: press feedback is color only, never a scale. */
+.dropzone { display: flex; min-height: 92px; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); cursor: pointer; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
+.dropzone.dragging, .dropzone:not(.disabled):active { border-color: var(--accent); background: var(--accent-subtle); }
+.dropzone.disabled { cursor: not-allowed; opacity: .52; }
+.uploadIcon, .fileIcon { display: grid; flex: 0 0 auto; place-items: center; color: var(--accent-strong); }
+/* The cloud lifts toward the file while it hovers over the drop target. */
+.uploadIcon { width: 24px; height: 24px; transition: transform var(--duration-spring) var(--ease-spring); }
+.dragging .uploadIcon { transform: translateY(-3px); }
+.copy { display: grid; min-width: 0; gap: 3px; flex: 1; }
+.copy strong { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+.label { position: relative; display: block; min-width: 0; }
+.labelText { display: block; }
+.copy > span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); overflow-wrap: anywhere; }
+.browse { flex: 0 0 auto; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 500; }
+.statusFrame { overflow: hidden; }
+.status { position: relative; min-height: 16px; margin: 0; padding-top: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.statusText { display: block; }
+.fileList { display: grid; margin: 0; padding: 0; list-style: none; }
+/* The gap lives inside the clipped row, so a collapsing row reaches zero height instead of stopping at its padding. */
+.fileRow { overflow: hidden; }
+.fileItem { display: flex; margin-top: 6px; min-width: 0; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
+.fileIcon { width: 24px; height: 24px; color: var(--text-secondary); }
+.fileCopy { display: grid; min-width: 0; flex: 1; gap: 2px; }
+.fileCopy strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
+.fileCopy > span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.meta { display: flex; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.dot { padding-inline: 5px; }
+.phase { position: relative; display: inline-block; }
+.phaseText { display: block; }
+.percent { display: inline-block; min-width: 4ch; }
+.fileCopy .error { color: var(--danger); }
+.barFrame { display: block; }
+.bar { display: block; height: 3px; margin: 5px 0 1px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
+.barFill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); }
+.statusSlot { position: relative; display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; }
+.retrySlot { display: grid; place-items: center; }
+.ready { display: grid; width: 22px; height: 22px; place-items: center; color: var(--success); }
+.remove, .retry { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.retry { color: var(--text-secondary); }
+/* Quick press, spring release. */
+.remove:active, .retry:active { transform: scale(.96); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) {
+  .dropzone:not(.disabled):hover { border-color: var(--accent); background: var(--accent-subtle); }
+  .remove:hover, .retry:hover { background: var(--surface); color: var(--foreground); }
+}
+.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+@media (prefers-reduced-motion: reduce) { .dropzone, .uploadIcon, .remove, .retry { transition: none; } .dragging .uploadIcon, .remove:active, .retry:active { transform: none; } }

package/components/filter-toolbar/filter-toolbar.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+export interface FilterChip {
+    id: string;
+    label: string;
+    value?: string;
+}
+/** One value a field can take. `hint` sits at the end of the row, for example a count. */
+export interface FilterOption {
+    value: string;
+    label?: string;
+    hint?: string | number;
+    icon?: ReactNode;
+}
+export interface FilterField {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    options: (string | FilterOption)[];
+}
+export interface FilterMenuProps {
+    fields: FilterField[];
+    /** Receives a chip whose id is the field id, so a second pick for a field replaces the first. */
+    onSelect: (filter: FilterChip, field: FilterField) => void;
+    /** Applied filters. Each field shows its current value and the value step marks it. */
+    active?: FilterChip[];
+    label?: string;
+    /** The trigger edge the panel lines up with. It flips or shifts when the viewport, or a clipping ancestor, has no room. */
+    align?: "start" | "end";
+}
+export interface FilterToolbarProps {
+    filters: FilterChip[];
+    onRemove: (id: string) => void;
+    onClearAll?: () => void;
+    children?: ReactNode;
+    label?: string;
+    /** Adds an Add filter trigger that morphs into a two step field and value menu. */
+    addFilter?: {
+        fields: FilterField[];
+        onAdd: (filter: FilterChip, field: FilterField) => void;
+        label?: string;
+        align?: "start" | "end";
+    };
+}
+/** An Add filter button that grows into its own menu: pick a field, then a value. The shape springs between the
+ *  button and the panel, and the panel renders in place, so keep its ancestors free of overflow clipping. */
+export declare function FilterMenu({ fields, onSelect, active, label, align }: FilterMenuProps): import("react").JSX.Element;
+export declare function FilterToolbar({ filters, onRemove, onClearAll, children, label, addFilter }: FilterToolbarProps): import("react").JSX.Element;
+export default FilterToolbar;