4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T4290,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState, type ChangeEvent, type DragEvent, type MouseEvent as ReactMouseEvent, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const ROW = { type: "spring", stiffness: 420, damping: 38, mass: 0.7 } as const; const FILL = { type: "spring", stiffness: 240, damping: 34, mass: 0.85 } as const; const LEAVE = { duration: 0.15, ease: [0.23, 1, 0.32, 1] } as const; const INSTANT = { duration: 0 } as const; export type UploadStatus = "queued" | "uploading" | "complete" | "error"; export type UploadItem = { id: string; name: string; size?: number; status: UploadStatus; progress?: number; error?: string; }; export type UploadQueueProps = { items: readonly UploadItem[]; onFiles: (files: File[]) => void; onRemove?: (id: string) => void; onRetry?: (id: string) => void; label?: string; accept?: string; multiple?: boolean; maxFiles?: number; copy?: Partial; className?: string; }; export type UploadQueueCopy = { drop: (remaining: number) => string; full: string; unsupported: string; limit: (remaining: number) => string; choose: string; queue: string; complete: string; failed: string; uploading: string; queued: string; retry: string; remove: string; progress: string; summary: (complete: number, total: number) => string; }; type UploadRejection = | { unsupported: boolean; capacity: number | null } | null; const defaultCopy: UploadQueueCopy = { drop: (remaining) => `Drop here or choose up to ${remaining}`, full: "Queue is full", unsupported: "This file type is not supported", limit: (remaining) => `Only ${remaining} more ${remaining === 1 ? "file" : "files"} can be added`, choose: "Choose", queue: "Upload queue", complete: "Complete", failed: "Upload failed", uploading: "Uploading", queued: "Queued", retry: "Retry", remove: "Remove", progress: "Upload progress for", summary: (complete, total) => `${complete} of ${total} uploads complete`, }; function formatBytes(value?: number) { if (value === undefined) return ""; if (value < 1024) return `${value} B`; if (value < 1024 * 1024) return `${Math.round(value / 1024)} KB`; return `${(value / 1024 / 1024).toFixed(1)} MB`; } function accepts(file: File, accept?: string) { if (!accept?.trim()) return true; const type = file.type.toLowerCase(); const name = file.name.toLowerCase(); return accept.split(",").some((entry) => { const rule = entry.trim().toLowerCase(); if (!rule) return false; if (rule.startsWith(".")) return name.endsWith(rule); if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1)); return type === rule; }); } function useAnimationActivity() { const ref = useRef(null); const [active, setActive] = useState(true); useEffect(() => { const node = ref.current; if (!node || typeof IntersectionObserver === "undefined") return; let visible = !document.hidden; let intersecting = true; const update = () => setActive(visible && intersecting); const observer = new IntersectionObserver(([entry]) => { intersecting = entry.isIntersecting; update(); }); const onVisibility = () => { visible = !document.hidden; update(); }; observer.observe(node); document.addEventListener("visibilitychange", onVisibility); return () => { observer.disconnect(); document.removeEventListener("visibilitychange", onVisibility); }; }, []); return { ref, active }; } export function UploadQueue({ items, onFiles, onRemove, onRetry, label = "Upload files", accept, multiple = true, maxFiles = 8, copy: copyOverrides, className = "", }: UploadQueueProps) { const copy = { ...defaultCopy, ...copyOverrides }; const id = useId(); const reduced = useReducedMotion() === true; const [dragging, setDragging] = useState(false); const [rejection, setRejection] = useState(null); const { ref, active } = useAnimationActivity(); const input = useRef(null); const chooseButton = useRef(null); const rowRefs = useRef(new Map()); const pendingFocus = useRef<{ id: string; index: number; trigger: HTMLButtonElement; } | null>(null); const remaining = Math.max(0, maxFiles - items.length); useLayoutEffect(() => { const pending = pendingFocus.current; if (!pending) return; const triggerStillPresent = pending.trigger.isConnected && ref.current?.contains(pending.trigger); const itemStillPresent = items.some((item) => item.id === pending.id); if (triggerStillPresent && itemStillPresent) { if (document.activeElement !== pending.trigger) pendingFocus.current = null; return; } pendingFocus.current = null; const activeElement = document.activeElement; if ( activeElement instanceof HTMLElement && activeElement !== document.body && activeElement !== document.documentElement && activeElement !== pending.trigger ) { return; } const candidateIds = [ items.some((item) => item.id === pending.id) ? pending.id : undefined, items[pending.index]?.id, items[pending.index - 1]?.id, ].filter((id, index, values): id is string => Boolean(id) && values.indexOf(id) === index); for (const id of candidateIds) { const action = rowRefs.current.get(id)?.querySelector("button:not([disabled])"); if (action) { action.focus({ preventScroll: true }); return; } } chooseButton.current?.focus({ preventScroll: true }); }, [items, ref]); const requestRowAction = ( event: ReactMouseEvent, id: string, index: number, action: (id: string) => void, ) => { pendingFocus.current = document.activeElement === event.currentTarget ? { id, index, trigger: event.currentTarget } : null; action(id); }; const submitFiles = (source: FileList | null) => { if (!source || remaining === 0) return; const sourceFiles = Array.from(source); const acceptedFiles = sourceFiles.filter((file) => accepts(file, accept)); const capacity = multiple ? remaining : Math.min(1, remaining); const unsupported = acceptedFiles.length < sourceFiles.length; const exceedsCapacity = acceptedFiles.length > capacity; setRejection( unsupported || exceedsCapacity ? { unsupported, capacity: exceedsCapacity ? capacity : null } : null, ); const files = acceptedFiles .slice(0, capacity); if (files.length > 0) onFiles(files); }; const onInput = (event: ChangeEvent) => { submitFiles(event.target.files); event.target.value = ""; }; const onDrop = (event: DragEvent) => { event.preventDefault(); setDragging(false); submitFiles(event.dataTransfer.files); }; return (

{ event.preventDefault(); setDragging(true); }} onDragOver={(event) => event.preventDefault()} onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragging(false); }} onDrop={onDrop} className={`flex min-h-16 items-center gap-3 rounded-[10px] border border-dashed px-3 py-2.5 transition-[background-color,border-color] duration-150 ${ dragging ? "border-neutral-950 bg-neutral-100 dark:border-neutral-50 dark:bg-white/[0.08]" : "border-neutral-300 bg-neutral-50 dark:border-white/[0.2] dark:bg-white/[0.04]" }`} > {label} {rejection ? [ rejection.unsupported ? copy.unsupported : null, rejection.capacity !== null ? copy.limit(rejection.capacity) : null, ].filter((message): message is string => message !== null).join(" ") : remaining > 0 ? copy.drop(remaining) : copy.full}

{items.map((item, index) => ( { if (node) rowRefs.current.set(item.id, node); else rowRefs.current.delete(item.id); }} onRemove={onRemove ? (event) => requestRowAction(event, item.id, index, onRemove) : undefined} onRetry={onRetry ? (event) => requestRowAction(event, item.id, index, onRetry) : undefined} reduced={reduced} animateIndeterminate={active} copy={copy} /> ))}

{copy.summary(items.filter((item) => item.status === "complete").length, items.length)}

); } function UploadRow({ item, rowRef, onRemove, onRetry, reduced, animateIndeterminate, copy, }: { item: UploadItem; rowRef: (node: HTMLLIElement | null) => void; onRemove?: (event: ReactMouseEvent) => void; onRetry?: (event: ReactMouseEvent) => void; reduced: boolean; animateIndeterminate: boolean; copy: UploadQueueCopy; }) { const progress = Math.min(100, Math.max(0, item.progress ?? 0)); const complete = item.status === "complete"; const error = item.status === "error"; const unknown = item.status === "uploading" && item.progress === undefined; const hasActions = (error && Boolean(onRetry)) || Boolean(onRemove); const status = complete ? copy.complete : error ? item.error ?? copy.failed : item.status === "uploading" ? item.progress === undefined ? copy.uploading : `${Math.round(progress)}%` : copy.queued; return (

{item.name} {status} {!complete ? {formatBytes(item.size)} : null} {hasActions ? ( {error && onRetry ? ( ) : null} {onRemove ? ( ) : null} ) : null}

{!complete && !error ? (

{unknown ? (

) : null} ); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/upload-queue.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/upload-queue","itemId":"@motion-lexicon/upload-queue"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/upload-queue.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/upload-queue.tsx"}]}]]}],"$L53"]}]

Upload Queue

Installation

Files

components

Styles