4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:T4325,"use client"; // beui.dev/components/blocks/file-upload import { AlertCircle, CheckCircle2, FileArchive, FileAudio, FileCode2, FileIcon, FileImage, FileSpreadsheet, FileText, FileVideo, Loader2, RotateCcw, UploadCloud, X, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCallback, useId, useRef, useState } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type FileUploadStatus = "queued" | "uploading" | "success" | "error"; export type FileUploadVariant = "default" | "centered"; export type FileUploadItem = { id: string; name: string; size: number; type?: string; progress?: number; status?: FileUploadStatus; error?: string; file?: File; }; export type FileUploadClassNames = { root?: string; dropzone?: string; queue?: string; item?: string; leading?: string; content?: string; name?: string; meta?: string; progress?: string; action?: string; }; export interface FileUploadProps { value?: FileUploadItem[]; defaultValue?: FileUploadItem[]; onValueChange?: (items: FileUploadItem[]) => void; onFilesAdded?: (items: FileUploadItem[], files: File[]) => void; onRemove?: (item: FileUploadItem) => void; onRetry?: (item: FileUploadItem) => void; accept?: string; multiple?: boolean; maxFiles?: number; disabled?: boolean; variant?: FileUploadVariant; title?: string; description?: string; browseLabel?: string; className?: string; classNames?: FileUploadClassNames; } const ROW_TRANSITION = { duration: 0.22, ease: EASE_OUT } as const; const FAST_TRANSITION = { duration: 0.16, ease: EASE_OUT } as const; const STATUS_LABEL: Record = { queued: "Queued", uploading: "Uploading", success: "Uploaded", error: "Failed", }; const STATUS_TONE: Record = { queued: "text-muted-foreground", uploading: "text-foreground", success: "text-emerald-600 dark:text-emerald-400", error: "text-destructive", }; function useControllableUpload({ value, defaultValue, onValueChange, }: { value?: FileUploadItem[]; defaultValue?: FileUploadItem[]; onValueChange?: (items: FileUploadItem[]) => void; }) { const [internalValue, setInternalValue] = useState(defaultValue ?? []); const isControlled = value !== undefined; const items = value ?? internalValue; const setItems = useCallback( (next: FileUploadItem[]) => { if (!isControlled) { setInternalValue(next); } onValueChange?.(next); }, [isControlled, onValueChange], ); return [items, setItems] as const; } function clampProgress(value: number | undefined, status: FileUploadStatus) { if (status === "success") return 100; if (value === undefined || Number.isNaN(value)) return 0; return Math.max(0, Math.min(100, value)); } function formatBytes(bytes: number) { if (!Number.isFinite(bytes) || bytes <= 0) return "0 B"; const units = ["B", "KB", "MB", "GB", "TB"]; const exponent = Math.min( Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1, ); const value = bytes / 1024 ** exponent; return `${value >= 10 || exponent === 0 ? value.toFixed(0) : value.toFixed(1)} ${ units[exponent] }`; } function fileKind(item: FileUploadItem) { const extension = item.name.includes(".") ? item.name.split(".").pop() : undefined; if (extension) return extension.toUpperCase(); if (item.type) return item.type.split("/").pop()?.toUpperCase(); return "FILE"; } function getFileIcon(item: FileUploadItem) { const extension = item.name.includes(".") ? item.name.split(".").pop()?.toLowerCase() : undefined; const type = item.type ?? ""; if (type.startsWith("image/")) return FileImage; if (type.startsWith("video/")) return FileVideo; if (type.startsWith("audio/")) return FileAudio; if ( type.includes("zip") || type.includes("compressed") || ["zip", "rar", "7z", "tar", "gz"].includes(extension ?? "") ) { return FileArchive; } if ( type.includes("spreadsheet") || type.includes("excel") || ["csv", "xls", "xlsx"].includes(extension ?? "") ) { return FileSpreadsheet; } if ( type.includes("pdf") || type.startsWith("text/") || ["pdf", "doc", "docx", "md", "txt"].includes(extension ?? "") ) { return FileText; } if ( [ "css", "html", "js", "jsx", "json", "mdx", "ts", "tsx", "xml", "yaml", "yml", ].includes(extension ?? "") ) { return FileCode2; } return FileIcon; } export function createFileUploadItem(file: File, index = 0): FileUploadItem { return { id: `${Date.now()}-${index}-${file.name}`, name: file.name, size: file.size, type: file.type, progress: 0, status: "uploading", file, }; } function StatusIcon({ status, reduce, }: { status: FileUploadStatus; reduce: boolean; }) { const iconClassName = "h-4 w-4"; return ( {status === "success" ? ( ) : status === "error" ? ( ) : status === "uploading" ? ( ) : ( )} {STATUS_LABEL[status]} ); } function FileUploadRow({ item, onRemove, onRetry, classNames, }: { item: FileUploadItem; onRemove: (item: FileUploadItem) => void; onRetry: (item: FileUploadItem) => void; classNames?: FileUploadClassNames; }) { const reduce = useReducedMotion() ?? false; const status = item.status ?? "queued"; const progress = clampProgress(item.progress, status); const progressRatio = progress / 100; const showProgress = status === "uploading" || status === "success"; const LeadingIcon = getFileIcon(item); return (

{item.name}

{fileKind(item)} · {formatBytes(item.size)} {status === "error" && item.error ? ` · ${item.error}` : null}

{status === "error" ? ( ) : null}

{showProgress ? (

) : null}

); } export function FileUpload({ value, defaultValue, onValueChange, onFilesAdded, onRemove, onRetry, accept, multiple = true, maxFiles, disabled = false, variant = "default", title = "Drop files here", description = "Add files to the upload queue", browseLabel = "Browse", className, classNames, }: FileUploadProps) { const inputId = useId(); const inputRef = useRef(null); const dragDepthRef = useRef(0); const reduce = useReducedMotion() ?? false; const [items, setItems] = useControllableUpload({ value, defaultValue, onValueChange, }); const [dragging, setDragging] = useState(false); const commit = useCallback( (next: FileUploadItem[]) => { setItems(next); }, [setItems], ); const addFiles = useCallback( (incomingFiles: File[]) => { if (disabled || incomingFiles.length === 0) return; const remainingSlots = maxFiles === undefined ? incomingFiles.length : maxFiles - items.length; if (remainingSlots <= 0) return; const files = incomingFiles.slice( 0, multiple ? remainingSlots : Math.min(1, remainingSlots), ); const added = files.map((file, index) => createFileUploadItem(file, index)); if (added.length === 0) return; commit([...items, ...added]); onFilesAdded?.(added, files); }, [commit, disabled, items, maxFiles, multiple, onFilesAdded], ); const removeItem = useCallback( (item: FileUploadItem) => { commit(items.filter((entry) => entry.id !== item.id)); onRemove?.(item); }, [commit, items, onRemove], ); const retryItem = useCallback( (item: FileUploadItem) => { const retryingItem = { ...item, error: undefined, progress: 0, status: "uploading" as const, }; commit( items.map((entry) => (entry.id === item.id ? retryingItem : entry)), ); onRetry?.(retryingItem); }, [commit, items, onRetry], ); const resetDrag = useCallback(() => { dragDepthRef.current = 0; setDragging(false); }, []); const maxReached = maxFiles !== undefined && items.length >= maxFiles; const centered = variant === "centered"; return (

{ addFiles(Array.from(event.currentTarget.files ?? [])); event.currentTarget.value = ""; }} />

{items.map((item) => ( ))}

); } 52:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4e:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/file-upload.tsx","content":"$51","type":"registry:component","target":"@components/motion/file-upload.tsx"},{"path":"lib/ease.ts","content":"$52","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]