{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Animated drag-and-drop file upload component","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useRef, useState } from \"react\";\n\nexport interface AnimatedFileUploadProps {\n accept?: string;\n className?: string;\n disabled?: boolean;\n maxSize?: number;\n multiple?: boolean;\n onFilesSelected: (files: File[]) => void;\n}\n\n/* ─────────────────────────────────────────────────────────\n * ANIMATION STORYBOARD\n *\n * 0ms drop zone visible, dashed border idle\n * drag zone scales 1.02, border goes primary, icon floats up\n * drop icon bounces back, file rows slide in staggered\n * remove file row slides out right + fades\n * layout remaining files reorder with layout animation\n * ───────────────────────────────────────────────────────── */\n\nconst SPRING = {\n bounce: 0.1,\n duration: 0.25,\n type: \"spring\" as const,\n};\n\nconst SPRING_BOUNCY = {\n bounce: 0.2,\n duration: 0.3,\n type: \"spring\" as const,\n};\n\nfunction formatFileSize(bytes: number): string {\n if (bytes < 1024) {\n return `${bytes} B`;\n }\n if (bytes < 1024 * 1024) {\n return `${(bytes / 1024).toFixed(1)} KB`;\n }\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\nfunction FileIcon() {\n return (\n \n \n \n );\n}\n\nfunction UploadIcon({ isDragOver }: { isDragOver: boolean }) {\n const shouldReduceMotion = useReducedMotion();\n\n return (\n \n \n \n \n \n );\n}\n\nexport default function AnimatedFileUpload({\n onFilesSelected,\n accept,\n multiple = true,\n maxSize,\n className,\n disabled = false,\n}: AnimatedFileUploadProps) {\n const shouldReduceMotion = useReducedMotion();\n const inputRef = useRef(null);\n const [isDragOver, setIsDragOver] = useState(false);\n const [files, setFiles] = useState([]);\n const [error, setError] = useState(null);\n const dragCounter = useRef(0);\n\n const validateFiles = useCallback(\n (newFiles: File[]): File[] => {\n setError(null);\n if (maxSize) {\n const oversized = newFiles.filter((f) => f.size > maxSize);\n if (oversized.length > 0) {\n setError(\n `${oversized.length} file(s) exceed the ${formatFileSize(maxSize)} limit`\n );\n return newFiles.filter((f) => f.size <= maxSize);\n }\n }\n return newFiles;\n },\n [maxSize]\n );\n\n const handleFiles = useCallback(\n (newFiles: File[]) => {\n const valid = validateFiles(newFiles);\n if (valid.length === 0) {\n return;\n }\n const updated = multiple ? [...files, ...valid] : valid.slice(0, 1);\n setFiles(updated);\n onFilesSelected(updated);\n },\n [files, multiple, onFilesSelected, validateFiles]\n );\n\n const removeFile = useCallback(\n (index: number) => {\n const updated = files.filter((_, i) => i !== index);\n setFiles(updated);\n onFilesSelected(updated);\n },\n [files, onFilesSelected]\n );\n\n const handleDragEnter = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n if (disabled) {\n return;\n }\n dragCounter.current += 1;\n setIsDragOver(true);\n },\n [disabled]\n );\n\n const handleDragLeave = useCallback((e: React.DragEvent) => {\n e.preventDefault();\n dragCounter.current -= 1;\n if (dragCounter.current === 0) {\n setIsDragOver(false);\n }\n }, []);\n\n const handleDragOver = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n if (disabled) {\n }\n },\n [disabled]\n );\n\n const handleDrop = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n dragCounter.current = 0;\n setIsDragOver(false);\n if (disabled) {\n return;\n }\n const droppedFiles = Array.from(e.dataTransfer.files);\n handleFiles(droppedFiles);\n },\n [disabled, handleFiles]\n );\n\n const handleClick = () => {\n if (!disabled) {\n inputRef.current?.click();\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n e.preventDefault();\n inputRef.current?.click();\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent) => {\n const selected = e.target.files ? Array.from(e.target.files) : [];\n handleFiles(selected);\n if (inputRef.current) {\n inputRef.current.value = \"\";\n }\n };\n\n return (\n
\n \n \n\n \n\n \n \n {isDragOver ? \"Drop files here\" : \"Drag & drop or click to upload\"}\n \n \n

\n {accept ? accept.replace(/,/g, \", \") : \"Any file type\"}\n {maxSize ? ` \\u2022 Max ${formatFileSize(maxSize)}` : null}\n

\n \n\n \n {error ? (\n \n {error}\n \n ) : null}\n \n\n {files.length > 0 && (\n
    \n \n {files.map((file, index) => (\n \n \n
    \n

    \n {file.name}\n

    \n

    \n {formatFileSize(file.size)}\n

    \n
    \n {\n e.stopPropagation();\n removeFile(index);\n }}\n type=\"button\"\n whileHover={shouldReduceMotion ? undefined : { scale: 1.1 }}\n whileTap={shouldReduceMotion ? undefined : { scale: 0.9 }}\n >\n \n \n \n \n \n ))}\n     \n
\n )}\n
\n );\n}\n","path":"index.tsx","target":"components/smoothui/animated-file-upload/index.tsx","type":"registry:ui"}],"name":"animated-file-upload","registryDependencies":[],"title":"Animated File Upload","type":"registry:ui"}