Animated File Upload

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useCallback, useRef, useState } from "react";
6 
7export interface AnimatedFileUploadProps {
8  accept?: string;
9  className?: string;
10  disabled?: boolean;
11  maxSize?: number;
12  multiple?: boolean;
13  onFilesSelected: (files: File[]) => void;
14}
15 
16/* ─────────────────────────────────────────────────────────
17 * ANIMATION STORYBOARD
18 *
19 *    0ms   drop zone visible, dashed border idle
20 *  drag    zone scales 1.02, border goes primary, icon floats up
21 *  drop    icon bounces back, file rows slide in staggered
22 * remove   file row slides out right + fades
23 * layout   remaining files reorder with layout animation
24 * ───────────────────────────────────────────────────────── */
25 
26const SPRING = {
27  bounce: 0.1,
28  duration: 0.25,
29  type: "spring" as const,
30};
31 
32const SPRING_BOUNCY = {
33  bounce: 0.2,
34  duration: 0.3,
35  type: "spring" as const,
36};
37 
38function formatFileSize(bytes: number): string {
39  if (bytes < 1024) {
40    return `${bytes} B`;
41  }
42  if (bytes < 1024 * 1024) {
43    return `${(bytes / 1024).toFixed(1)} KB`;
44  }
45  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
46}
47 
48function FileIcon() {
49  return (
50    <svg
51      aria-hidden="true"
52      className="h-4 w-4 text-muted-foreground"
53      fill="none"
54      stroke="currentColor"
55      strokeWidth={1.5}
56      viewBox="0 0 24 24"
57    >
58      <path
59        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
60        strokeLinecap="round"
61        strokeLinejoin="round"
62      />
63    </svg>
64  );
65}
66 
67function UploadIcon({ isDragOver }: { isDragOver: boolean }) {
68  const shouldReduceMotion = useReducedMotion();
69 
70  return (
71    <motion.div
72      animate={
73        shouldReduceMotion
74          ? undefined
75          : isDragOver
76            ? { scale: 1.15, y: -4 }
77            : { scale: 1, y: 0 }
78      }
79      transition={shouldReduceMotion ? { duration: 0 } : SPRING_BOUNCY}
80    >
81      <svg
82        aria-hidden="true"
83        className={cn(
84// … truncated