motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-MQDOFNKI.js

@@ -0,0 +1,818 @@
+"use client";
+import {
+  XIcon
+} from "./chunk-7FQ4XU7E.js";
+import {
+  DeleteIcon
+} from "./chunk-JFTD3YAL.js";
+import {
+  CircleCheckIcon
+} from "./chunk-YU6B7YRO.js";
+import {
+  CloudUploadIcon
+} from "./chunk-2QCWELWT.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/file-drop/file-drop.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useAnimationControls,
+  useMotionValue,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import gsap from "gsap";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var POP = { type: "spring", stiffness: 520, damping: 30 };
+var SOFT = { type: "spring", stiffness: 340, damping: 32 };
+var GLIDE = [0.22, 1, 0.36, 1];
+var CRACK = [
+  [52, -40],
+  [52, 0],
+  [47, 22],
+  [55, 41],
+  [46, 63],
+  [53, 82],
+  [49, 100],
+  [49, 140]
+];
+var crack = CRACK.map(([x, y]) => `${x}% ${y}%`).join(", ");
+var LEFT_HALF = `polygon(-10% -40%, ${crack}, -10% 140%)`;
+var RIGHT_HALF = `polygon(${crack}, 110% 140%, 110% -40%)`;
+var DEFAULT_ACCEPT = ["image/png", "image/jpeg", "image/gif"];
+var formatSize = (b) => {
+  const [n, unit] = b < 1024 ? [b, "B"] : b < 1024 * 1024 ? [b / 1024, "KB"] : [b / 1024 / 1024, "MB"];
+  return `${unit === "B" ? n : n.toFixed(1).replace(/\.0$/, "")} ${unit}`;
+};
+var simulate = (_file, progress) => new Promise((resolve) => {
+  const total = 1500 + Math.random() * 1200;
+  let p = 0;
+  let last = performance.now();
+  const step = (now) => {
+    const dt = now - last;
+    last = now;
+    const speed = (0.4 + Math.random() * 1.2) / total;
+    p = Math.min(1, p + dt * speed);
+    progress(p);
+    if (p >= 1) resolve();
+    else requestAnimationFrame(step);
+  };
+  requestAnimationFrame(step);
+});
+function Slider({
+  value,
+  still
+}) {
+  const left = useTransform(value, (v) => `${v * 100}%`);
+  return /* @__PURE__ */ jsxs("div", { className: "relative mt-2 h-1.5 rounded-full bg-[#242423]/[0.07]", children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "absolute inset-y-0 left-0 overflow-hidden rounded-full bg-[#242423]",
+        style: { width: left },
+        children: !still && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            className: "absolute inset-y-0 w-10 bg-gradient-to-r from-transparent via-white/45 to-transparent",
+            animate: { x: ["-120%", "420%"] },
+            transition: { duration: 1.1, ease: "easeInOut", repeat: Infinity }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        "aria-hidden": true,
+        className: "absolute top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.25)] ring-1 ring-[#242423]/10",
+        style: { left }
+      }
+    )
+  ] });
+}
+function Row({
+  item,
+  still,
+  upload,
+  onDone,
+  onRemove,
+  stage
+}) {
+  const value = useMotionValue(item.status === "error" ? 1 : 0);
+  const develop = useTransform(
+    value,
+    (v) => still ? "none" : `blur(${((1 - v) * 5).toFixed(2)}px) grayscale(${(1 - v).toFixed(2)})`
+  );
+  const zoom = useTransform(value, [0, 1], still ? [1, 1] : [1.18, 1]);
+  const percent = useTransform(value, (v) => `${Math.round(v * 100)}%`);
+  const started = React.useRef(false);
+  const body = React.useRef(null);
+  const [hovered, setHovered] = React.useState(false);
+  const [broken, setBroken] = React.useState(false);
+  const done = item.status === "done";
+  const failed = item.status === "error";
+  React.useEffect(() => {
+    if (item.status !== "uploading" || started.current) return;
+    started.current = true;
+    void upload(
+      item.file,
+      (p) => value.set(Math.max(value.get(), Math.min(1, p)))
+    ).then(() => {
+      value.set(1);
+      onDone(item.id);
+    });
+  }, [item, upload, value, onDone]);
+  const shatter = () => {
+    const el = body.current;
+    const layer = stage.current;
+    if (!el || broken) return;
+    if (still || !layer) {
+      onRemove(item.id);
+      return;
+    }
+    setBroken(true);
+    const base = layer.getBoundingClientRect();
+    const box = el.getBoundingClientRect();
+    const left0 = box.left - base.left;
+    const top0 = box.top - base.top;
+    const piece = (clip, origin) => {
+      const c = el.cloneNode(true);
+      c.setAttribute("aria-hidden", "true");
+      Object.assign(c.style, {
+        position: "absolute",
+        left: `${left0}px`,
+        top: `${top0}px`,
+        width: `${box.width}px`,
+        height: `${box.height}px`,
+        margin: "0",
+        clipPath: clip,
+        transformOrigin: origin,
+        background: "#fff",
+        boxShadow: "0 0 0 1px rgba(36,36,35,0.09), 0 1px 2px rgba(0,0,0,0.04)",
+        willChange: "transform, opacity"
+      });
+      layer.appendChild(c);
+      return c;
+    };
+    const leftHalf = piece(LEFT_HALF, "25% 50%");
+    const rightHalf = piece(RIGHT_HALF, "75% 50%");
+    el.style.visibility = "hidden";
+    const svgNS = "http://www.w3.org/2000/svg";
+    const line = document.createElementNS(svgNS, "svg");
+    line.setAttribute("aria-hidden", "true");
+    Object.assign(line.style, {
+      position: "absolute",
+      left: `${left0}px`,
+      top: `${top0}px`,
+      width: `${box.width}px`,
+      height: `${box.height}px`,
+      overflow: "visible",
+      pointerEvents: "none"
+    });
+    const points = CRACK.slice(1, -1).map(
+      ([x, y]) => [x / 100 * box.width, y / 100 * box.height]
+    );
+    const path = document.createElementNS(svgNS, "polyline");
+    path.setAttribute("points", points.map((p) => p.join(",")).join(" "));
+    Object.assign(path.style, {
+      fill: "none",
+      stroke: "rgba(36,36,35,0.5)",
+      strokeWidth: "1.25",
+      strokeLinejoin: "round"
+    });
+    line.appendChild(path);
+    layer.appendChild(line);
+    const length = path.getTotalLength();
+    const flakes = points.slice(0, 5).map(([x, y], i) => {
+      const f = document.createElement("span");
+      const size = 4 + Math.random() * 4;
+      Object.assign(f.style, {
+        position: "absolute",
+        left: `${left0 + x - size / 2}px`,
+        top: `${top0 + y - size / 2}px`,
+        width: `${size}px`,
+        height: `${size}px`,
+        background: i % 2 ? "#fff" : "rgba(36,36,35,0.18)",
+        boxShadow: "0 0 0 1px rgba(36,36,35,0.12)",
+        clipPath: "polygon(50% 0, 100% 80%, 0 100%)",
+        opacity: "0"
+      });
+      layer.appendChild(f);
+      return f;
+    });
+    const rand = (a, b) => a + Math.random() * (b - a);
+    const bodies = [
+      {
+        el: leftHalf,
+        x: 0,
+        y: 0,
+        a: 0,
+        vx: -rand(45, 85),
+        vy: -rand(90, 140),
+        w: -rand(22, 50),
+        life: 0.95
+      },
+      {
+        el: rightHalf,
+        x: 0,
+        y: 0,
+        a: 0,
+        vx: rand(50, 95),
+        vy: -rand(100, 150),
+        w: rand(26, 56),
+        life: 0.95
+      },
+      ...flakes.map((f) => ({
+        el: f,
+        x: 0,
+        y: 0,
+        a: rand(0, 180),
+        vx: rand(-150, 150),
+        vy: -rand(180, 360),
+        w: rand(-720, 720),
+        life: rand(0.5, 0.75)
+      }))
+    ];
+    const G = 2100;
+    const release = () => {
+      gsap.set(flakes, { opacity: 1 });
+      gsap.to(line, { opacity: 0, duration: 0.1 });
+      gsap.to([leftHalf, rightHalf], {
+        boxShadow: "0 0 0 1px rgba(36,36,35,0.09), 0 14px 28px -12px rgba(0,0,0,0.28)",
+        duration: 0.3,
+        ease: "power2.out"
+      });
+      window.setTimeout(() => onRemove(item.id), 90);
+      let t = 0;
+      const step = (_time, ms) => {
+        const dt = Math.min(0.033, Math.max(0, ms / 1e3));
+        t += dt;
+        let alive = false;
+        for (const b of bodies) {
+          b.vy += G * dt;
+          b.vx *= 1 - 0.8 * dt;
+          b.w *= 1 - 0.6 * dt;
+          b.x += b.vx * dt;
+          b.y += b.vy * dt;
+          b.a += b.w * dt;
+          const fade = Math.max(
+            0,
+            Math.min(1, 1 - (t - b.life * 0.45) / (b.life * 0.55))
+          );
+          if (fade > 0) alive = true;
+          gsap.set(b.el, { x: b.x, y: b.y, rotation: b.a, opacity: fade });
+        }
+        if (!alive) {
+          gsap.ticker.remove(step);
+          [leftHalf, rightHalf, line, ...flakes].forEach((n) => n.remove());
+        }
+      };
+      gsap.ticker.add(step);
+    };
+    gsap.timeline({ onComplete: release }).fromTo(
+      path,
+      { strokeDasharray: length, strokeDashoffset: length },
+      { strokeDashoffset: 0, duration: 0.16, ease: "power2.in" }
+    ).to([leftHalf, rightHalf], {
+      x: (i) => i ? 1.5 : -1.5,
+      duration: 0.04,
+      repeat: 3,
+      yoyo: true,
+      ease: "none"
+    }).to(leftHalf, { x: -3, rotation: -1, duration: 0.06, ease: "power2.out" }).to(
+      rightHalf,
+      { x: 3, rotation: 1, duration: 0.06, ease: "power2.out" },
+      "<"
+    ).add(() => {
+      bodies[0].x = -3;
+      bodies[0].a = -1;
+      bodies[1].x = 3;
+      bodies[1].a = 1;
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    motion.li,
+    {
+      onPointerEnter: () => setHovered(true),
+      onPointerLeave: () => setHovered(false),
+      onFocus: () => setHovered(true),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget))
+          setHovered(false);
+      },
+      layout: !still,
+      initial: still ? { opacity: 0 } : { opacity: 0, height: 0, y: 10, filter: "blur(6px)" },
+      animate: failed && !still ? {
+        opacity: 1,
+        height: "auto",
+        y: 0,
+        filter: "blur(0px)",
+        x: [0, -6, 6, -4, 4, 0]
+      } : { opacity: 1, height: "auto", y: 0, filter: "blur(0px)", x: 0 },
+      exit: still ? { opacity: 0 } : broken ? { height: 0, transition: { duration: 0.25, ease: GLIDE } } : { opacity: 0, height: 0, scale: 0.96, filter: "blur(4px)" },
+      transition: still ? { duration: 0 } : {
+        ...SOFT,
+        delay: done ? 0 : item.delay,
+        x: { duration: 0.4, delay: item.delay }
+      },
+      className: "relative overflow-hidden pb-1",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: body,
+          className: "relative flex items-center gap-3 overflow-hidden rounded-2xl p-2 pr-2.5",
+          children: [
+            /* @__PURE__ */ jsx(AnimatePresence, { children: done && !still && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-[#269a5a]/[0.09] to-transparent",
+                initial: { opacity: 0, x: "-60%" },
+                animate: { opacity: [0, 1, 0], x: "60%" },
+                transition: { duration: 0.9, ease: "easeOut" }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: still ? false : { scale: 0.6, rotate: -8 },
+                animate: done && !still ? { scale: [1, 1.12, 1], rotate: 0 } : { scale: 1, rotate: 0 },
+                transition: done ? { duration: 0.45, ease: GLIDE } : { ...POP, delay: item.delay + 0.05 },
+                className: "relative size-11 shrink-0 overflow-hidden rounded-xl bg-[#242423]/[0.06] ring-1 ring-[#242423]/[0.06]",
+                children: /* @__PURE__ */ jsx(
+                  motion.img,
+                  {
+                    src: item.url,
+                    alt: "",
+                    className: "size-full object-cover",
+                    style: { filter: develop, scale: zoom }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[#242423]", children: item.file.name }),
+                item.status === "uploading" && /* @__PURE__ */ jsx(motion.span, { className: "shrink-0 text-xs tabular-nums text-zinc-500", children: percent })
+              ] }),
+              /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: item.status === "uploading" ? /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  exit: still ? { opacity: 0 } : { opacity: 0, y: -4, filter: "blur(3px)" },
+                  transition: { duration: 0.2 },
+                  children: /* @__PURE__ */ jsx(Slider, { value, still })
+                },
+                "bar"
+              ) : /* @__PURE__ */ jsx(
+                motion.p,
+                {
+                  initial: still ? { opacity: 0 } : { opacity: 0, y: 6, filter: "blur(3px)" },
+                  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                  transition: { duration: 0.3, ease: GLIDE },
+                  className: cn(
+                    "mt-0.5 text-xs",
+                    failed ? "text-[#d23f3f]" : "text-zinc-500"
+                  ),
+                  children: failed ? item.error : `${formatSize(item.file.size)}, uploaded`
+                },
+                "meta"
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "relative grid size-8 shrink-0 place-items-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: done && !hovered ? /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                "aria-label": `Delete ${item.file.name}`,
+                onClick: shatter,
+                initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.4, rotate: -30 },
+                animate: { opacity: 1, scale: 1, rotate: 0 },
+                exit: { opacity: 0, scale: 0.6, rotate: 30 },
+                transition: POP,
+                className: "grid size-8 place-items-center rounded-full bg-[#269a5a]/10 text-[#269a5a] outline-none",
+                children: /* @__PURE__ */ jsx(
+                  CircleCheckIcon,
+                  {
+                    className: "size-[18px]",
+                    strokeWidth: 2.25,
+                    active: !still
+                  }
+                )
+              },
+              "done"
+            ) : done ? (
+              // On hover (or focus) the check turns into a bin.
+              /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  type: "button",
+                  "aria-label": `Delete ${item.file.name}`,
+                  onClick: shatter,
+                  initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.4, rotate: 30 },
+                  animate: { opacity: 1, scale: 1, rotate: 0 },
+                  exit: { opacity: 0, scale: 0.6, rotate: -30 },
+                  transition: POP,
+                  whileTap: still ? void 0 : { scale: 0.88 },
+                  className: "grid size-8 cursor-pointer place-items-center rounded-full bg-[#d23f3f]/10 text-[#d23f3f] outline-none transition-colors hover:bg-[#d23f3f]/15 focus-visible:ring-2 focus-visible:ring-[#d23f3f]/40",
+                  children: /* @__PURE__ */ jsx(DeleteIcon, { className: "size-4", strokeWidth: 2.25 })
+                },
+                "trash"
+              )
+            ) : /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                "aria-label": item.status === "uploading" ? `Cancel ${item.file.name}` : `Remove ${item.file.name}`,
+                onClick: shatter,
+                initial: { opacity: 0, scale: 0.6 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.6 },
+                transition: POP,
+                className: "grid size-8 cursor-pointer place-items-center rounded-full text-zinc-400 outline-none transition-colors hover:bg-[#242423]/[0.06] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-zinc-400",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", strokeWidth: 2.25 })
+              },
+              "remove"
+            ) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+var FileDrop = React.forwardRef(
+  function FileDrop2({
+    accept = DEFAULT_ACCEPT,
+    maxSize = 10 * 1024 * 1024,
+    upload = simulate,
+    onUploaded,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const input = React.useRef(null);
+    const depth = React.useRef(0);
+    const seq = React.useRef(0);
+    const [over, setOver] = React.useState(false);
+    const [hover, setHover] = React.useState(false);
+    const [items, setItems] = React.useState([]);
+    const zone = React.useRef(null);
+    const stage = React.useRef(null);
+    const tile = useAnimationControls();
+    const [ripples, setRipples] = React.useState([]);
+    const urls = React.useRef([]);
+    React.useEffect(
+      () => () => urls.current.forEach((u) => URL.revokeObjectURL(u)),
+      []
+    );
+    const kinds = accept.map(
+      (t) => t.split("/")[1].replace("jpeg", "jpg").toUpperCase()
+    );
+    const add = React.useCallback(
+      (files, at) => {
+        if (!files.length) return;
+        const box = zone.current?.getBoundingClientRect();
+        if (box && !still) {
+          const x = at ? at.x - box.left : box.width / 2;
+          const y = at ? at.y - box.top : box.height / 2;
+          setRipples((r) => [...r, { id: ++seq.current, x, y }]);
+          void tile.start({
+            y: [0, 7, -3, 0],
+            scale: [1, 0.86, 1.06, 1],
+            transition: { duration: 0.5, ease: GLIDE }
+          });
+        }
+        const next = files.map((file, i) => {
+          const url = URL.createObjectURL(file);
+          urls.current.push(url);
+          const bad = !accept.includes(file.type) ? `Not supported. Use ${kinds.join(", ")}` : file.size > maxSize ? `Too large. Up to ${formatSize(maxSize)}` : void 0;
+          return {
+            id: `file-${++seq.current}`,
+            file,
+            url,
+            status: bad ? "error" : "uploading",
+            error: bad,
+            delay: still ? 0 : 0.12 + i * 0.08
+          };
+        });
+        setItems((list) => [...next.reverse(), ...list].slice(0, 6));
+      },
+      [accept, maxSize, kinds, still, tile]
+    );
+    React.useImperativeHandle(ref, () => ({ add }), [add]);
+    const [glow, setGlow] = React.useState(0);
+    const finish = React.useCallback(
+      (id) => {
+        setGlow((g) => g + 1);
+        setItems(
+          (list) => list.map((it) => {
+            if (it.id !== id) return it;
+            onUploaded?.(it.file);
+            return { ...it, status: "done" };
+          })
+        );
+      },
+      [onUploaded]
+    );
+    const remove = React.useCallback(
+      (id) => setItems((list) => list.filter((it) => it.id !== id)),
+      []
+    );
+    const live = over || hover;
+    const busy = items.filter((i) => i.status === "uploading").length;
+    const uploaded = items.filter((i) => i.status === "done").length;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative isolate w-[400px] max-w-full rounded-3xl bg-white p-5 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
+              children: glow > 0 && !still && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    background: "radial-gradient(120% 55% at 50% 100%, rgba(38,154,90,0.16), rgba(38,154,90,0.06) 55%, transparent 80%)"
+                  },
+                  initial: { opacity: 0, y: "55%" },
+                  animate: { opacity: [0, 1, 1, 0], y: ["55%", "8%", "0%", "0%"] },
+                  transition: {
+                    duration: 2,
+                    times: [0, 0.4, 0.65, 1],
+                    ease: "easeOut"
+                  }
+                },
+                glow
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: stage,
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 z-20"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-base font-semibold tracking-tight", children: "Upload images" }),
+            /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: still ? { opacity: 0 } : { opacity: 0, y: 6, filter: "blur(3px)" },
+                animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                exit: still ? { opacity: 0 } : { opacity: 0, y: -6, filter: "blur(3px)" },
+                transition: { duration: 0.25, ease: GLIDE },
+                className: "text-xs tabular-nums text-zinc-500",
+                children: items.length ? `${uploaded} of ${items.length} done` : `${kinds.join(", ")} up to ${formatSize(maxSize)}`
+              },
+              `${uploaded}/${items.length}`
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              ref: zone,
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Upload images: drop files here or press to browse",
+              onClick: () => input.current?.click(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  input.current?.click();
+                }
+              },
+              onPointerEnter: () => setHover(true),
+              onPointerLeave: () => setHover(false),
+              onDragEnter: (e) => {
+                e.preventDefault();
+                depth.current += 1;
+                setOver(true);
+              },
+              onDragOver: (e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = "copy";
+              },
+              onDragLeave: () => {
+                depth.current = Math.max(0, depth.current - 1);
+                if (!depth.current) setOver(false);
+              },
+              onDrop: (e) => {
+                e.preventDefault();
+                depth.current = 0;
+                setOver(false);
+                const at = { x: e.clientX, y: e.clientY };
+                if (e.dataTransfer.files.length) {
+                  add([...e.dataTransfer.files], at);
+                  return;
+                }
+                const named = e.dataTransfer.getData("DownloadURL").match(/^([^:]+):([^:]+):(.+)$/);
+                const url = named?.[3] ?? e.dataTransfer.getData("text/uri-list").split("\n")[0]?.trim();
+                if (!url) return;
+                const plain = e.dataTransfer.getData("text/plain").trim();
+                void fetch(url).then((r) => r.blob()).then((blob) => {
+                  const ext = blob.type.split("/")[1]?.replace("jpeg", "jpg") ?? "png";
+                  const name = named?.[2] ?? (/^[\w .-]+\.\w{2,4}$/.test(plain) ? plain : url.startsWith("data:") ? `image.${ext}` : url.split("/").pop().split("?")[0]);
+                  add(
+                    [new File([blob], name, { type: named?.[1] ?? blob.type })],
+                    at
+                  );
+                }).catch(() => {
+                });
+              },
+              animate: {
+                scale: over && !still ? 1.015 : 1,
+                backgroundColor: over ? "rgba(36,36,35,0.04)" : "rgba(36,36,35,0)"
+              },
+              transition: SOFT,
+              className: "relative mt-4 flex cursor-pointer flex-col items-center rounded-[20px] px-6 py-7 text-center outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-0 size-full overflow-visible",
+                    children: /* @__PURE__ */ jsx(
+                      motion.rect,
+                      {
+                        x: "0.75",
+                        y: "0.75",
+                        width: "calc(100% - 1.5px)",
+                        height: "calc(100% - 1.5px)",
+                        rx: "19.25",
+                        fill: "none",
+                        strokeWidth: "1.5",
+                        strokeDasharray: "6 6",
+                        animate: {
+                          stroke: over ? "rgba(36,36,35,0.55)" : live ? "rgba(36,36,35,0.28)" : "rgba(36,36,35,0.16)",
+                          strokeDashoffset: over && !still ? [0, -24] : 0
+                        },
+                        transition: over && !still ? {
+                          strokeDashoffset: {
+                            duration: 0.6,
+                            ease: "linear",
+                            repeat: Infinity
+                          },
+                          stroke: { duration: 0.2 }
+                        } : { duration: 0.2 }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]",
+                    children: /* @__PURE__ */ jsx(AnimatePresence, { children: ripples.map((r) => /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        className: "absolute size-[560px] rounded-full bg-[radial-gradient(circle,rgba(36,36,35,0.09),rgba(36,36,35,0.04)_45%,transparent_70%)]",
+                        style: { left: r.x - 280, top: r.y - 280 },
+                        initial: { scale: 0, opacity: 1 },
+                        animate: { scale: 1, opacity: 0 },
+                        transition: { duration: 0.9, ease: [0.16, 1, 0.3, 1] },
+                        onAnimationComplete: () => setRipples((all) => all.filter((x) => x.id !== r.id))
+                      },
+                      r.id
+                    )) })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(motion.span, { animate: tile, className: "relative grid", children: [
+                  /* @__PURE__ */ jsx(AnimatePresence, { children: busy > 0 && !over && /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      "aria-hidden": true,
+                      initial: { opacity: 0, scale: 0.9 },
+                      animate: { opacity: 1, scale: 1 },
+                      exit: { opacity: 0, scale: 1.1 },
+                      transition: { duration: 0.25 },
+                      className: "pointer-events-none absolute -inset-[5px] overflow-hidden rounded-[20px] p-[1.5px]",
+                      style: {
+                        mask: "linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)",
+                        WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+                        WebkitMaskComposite: "xor"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "absolute left-1/2 top-1/2 size-[200%] -translate-x-1/2 -translate-y-1/2",
+                          style: {
+                            background: "conic-gradient(from 0deg, transparent 0deg, transparent 200deg, rgba(36,36,35,0.7) 330deg, transparent 360deg)"
+                          },
+                          animate: still ? void 0 : { rotate: 360 },
+                          transition: {
+                            duration: 1,
+                            ease: "linear",
+                            repeat: Infinity
+                          }
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      animate: {
+                        y: over && !still ? -4 : 0,
+                        scale: over && !still ? 1.08 : 1
+                      },
+                      transition: POP,
+                      className: cn(
+                        "grid size-12 place-items-center rounded-2xl transition-colors duration-200",
+                        over ? "bg-[#242423] text-white" : "bg-[#242423]/[0.06] text-[#242423]"
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        CloudUploadIcon,
+                        {
+                          className: "size-[22px]",
+                          strokeWidth: 2,
+                          active: live || busy > 0 || void 0
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "relative mt-3 inline-grid h-6 overflow-hidden text-sm font-medium", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    initial: still ? { opacity: 0 } : { opacity: 0, y: "90%", filter: "blur(3px)" },
+                    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                    exit: still ? { opacity: 0 } : { opacity: 0, y: "-90%", filter: "blur(3px)" },
+                    transition: { duration: 0.25, ease: GLIDE },
+                    className: "leading-6",
+                    children: over ? "Release to upload" : busy ? `Uploading ${busy} ${busy === 1 ? "file" : "files"}` : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "Drop images here or",
+                      " ",
+                      /* @__PURE__ */ jsx("span", { className: "underline decoration-[#242423]/30 underline-offset-4", children: "browse" })
+                    ] })
+                  },
+                  over ? "drop" : busy ? `busy-${busy}` : "idle"
+                ) }) }),
+                /* @__PURE__ */ jsxs("span", { className: "mt-1 text-xs text-zinc-500", children: [
+                  kinds.join(", "),
+                  ", up to ",
+                  formatSize(maxSize),
+                  " each"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: input,
+                    type: "file",
+                    multiple: true,
+                    accept: accept.join(","),
+                    className: "sr-only",
+                    tabIndex: -1,
+                    onChange: (e) => {
+                      if (e.target.files?.length) add([...e.target.files]);
+                      e.target.value = "";
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: items.length > 0 && /* @__PURE__ */ jsx(
+            motion.ul,
+            {
+              initial: still ? { opacity: 0 } : { opacity: 0, height: 0 },
+              animate: { opacity: 1, height: "auto" },
+              exit: still ? { opacity: 0 } : { opacity: 0, height: 0 },
+              transition: still ? { duration: 0 } : SOFT,
+              "aria-label": "Files",
+              className: "-mx-1.5 mt-3 overflow-hidden px-1.5 pt-1",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: items.map((it) => /* @__PURE__ */ jsx(
+                Row,
+                {
+                  item: it,
+                  still,
+                  upload,
+                  onDone: finish,
+                  onRemove: remove,
+                  stage
+                },
+                it.id
+              )) })
+            },
+            "list"
+          ) })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  FileDrop
+};