@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Upload/Upload.js

@@ -0,0 +1,948 @@
+import { jsxs as c, Fragment as H, jsx as e } from "react/jsx-runtime";
+import Be, { useRef as pe, useState as j, useCallback as me } from "react";
+import { cva as He } from "class-variance-authority";
+import { cn as C } from "@dsui/ui/lib/utils";
+import { Trash2 as A, Upload as _e, CloudUploadIcon as Ge, Loader2 as Q, CheckCircle2 as Z, AlertCircle as ee, Eye as _, Download as G, X as Ye, Image as Ae, Film as Je, Music as Ve, Archive as Xe, FileCode as qe, FileText as Ke, File as Qe } from "lucide-react";
+import { toast as P } from "../Toast/Toast.js";
+import Ze from "../Dialog/Dialog.js";
+const er = He(
+  "relative flex justify-center items-center rounded-lg transition-all duration-200 cursor-pointer select-none",
+  {
+    variants: {
+      variant: {
+        outline: "border border-foreground/10 bg-background text-foreground",
+        primaryOutline: "border border-primary bg-background text-primary",
+        icon: "border border-primary text-primary bg-background rounded-xl p-2",
+        avatar: "border-2 border-dashed border-foreground/20 bg-background !w-full !h-full flex-col text-center hover:border-foreground/40 !p-1",
+        avatarCircle: "border-2 border-dashed border-foreground/20 bg-background !w-full !h-full rounded-full flex-col text-center hover:border-foreground/40 !p-1",
+        dropzone: "border border-foreground/10 bg-background flex-col text-center py-10",
+        primaryDropzone: "border border-primary bg-primary/10 flex-col text-center py-10",
+        secondaryDropzone: "border border-foreground/10 bg-foreground/10 flex-col text-center py-10"
+      },
+      size: {
+        small: "h-8 p-[6px] text-sm",
+        medium: "h-10 p-2 text-base",
+        large: "h-12 p-3 text-base"
+      },
+      status: {
+        idle: "",
+        dragover: "border-primary bg-primary/5 scale-[1.02]",
+        disabled: "opacity-50 cursor-not-allowed"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "medium",
+      status: "idle"
+    }
+  }
+), Y = (r) => {
+  const s = r.type || "", m = r.name.toLowerCase();
+  return s.startsWith("image/") ? /* @__PURE__ */ e(Ae, { className: "h-4 w-4" }) : s.startsWith("video/") ? /* @__PURE__ */ e(Je, { className: "h-4 w-4" }) : s.startsWith("audio/") ? /* @__PURE__ */ e(Ve, { className: "h-4 w-4" }) : m.endsWith(".zip") || m.endsWith(".rar") || m.endsWith(".7z") ? /* @__PURE__ */ e(Xe, { className: "h-4 w-4" }) : m.endsWith(".js") || m.endsWith(".ts") || m.endsWith(".jsx") || m.endsWith(".tsx") || m.endsWith(".css") || m.endsWith(".html") ? /* @__PURE__ */ e(qe, { className: "h-4 w-4" }) : m.endsWith(".txt") || m.endsWith(".md") ? /* @__PURE__ */ e(Ke, { className: "h-4 w-4" }) : /* @__PURE__ */ e(Qe, { className: "h-4 w-4" });
+}, re = (r) => {
+  if (r === 0) return "0 Bytes";
+  const s = 1024, m = ["Bytes", "KB", "MB", "GB"], v = Math.floor(Math.log(r) / Math.log(s));
+  return Math.round(r / Math.pow(s, v) * 100) / 100 + " " + m[v];
+}, he = () => `upload-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, ge = Be.forwardRef(
+  ({
+    className: r,
+    variant: s,
+    accept: m,
+    multiple: v = !1,
+    disabled: N = !1,
+    fileList: $,
+    defaultFileList: R = [],
+    action: x,
+    customRequest: k,
+    beforeUpload: L,
+    onChange: i,
+    onRemove: te,
+    onPreview: oe,
+    onDownload: se,
+    maxCount: E,
+    maxSize: F,
+    listType: fe = "text",
+    showUploadList: I = !0,
+    pictureCardSize: ye,
+    pictureCardCols: we = 3,
+    iconOnly: J = !1,
+    showBorder: ve = !0,
+    uploadText: xe = "Click to upload",
+    uploadDescription: ne,
+    uploadIcon: ae,
+    size: M = "medium",
+    children: Ne,
+    headers: W,
+    withCredentials: V,
+    directory: T = !1,
+    ...ke
+  }, De) => {
+    const O = pe(null), [ze, Ce] = j(R), [Le, X] = j(!1), [Pe, le] = j(!1), [Ee, Ue] = j(""), [ie, $e] = j(""), b = $ ?? ze, q = $ ? void 0 : Ce, Fe = [
+      "dropzone",
+      "primaryDropzone",
+      "secondaryDropzone"
+    ].includes(s || ""), U = T || Fe && b.length > 0 ? "text" : fe, ce = pe(b);
+    ce.current = b;
+    const S = E ? b.length < E : T || v ? !0 : b.length === 0, f = me(
+      (o, n) => {
+        const a = o(ce.current);
+        q && q(o), i && i({ file: n || {}, fileList: a });
+      },
+      [q, i]
+    ), Re = me(
+      (o) => {
+        const n = o.type.startsWith("image/") ? URL.createObjectURL(o) : void 0, a = {
+          uid: he(),
+          name: o.name,
+          size: o.size,
+          type: o.type,
+          status: "uploading",
+          percent: 0,
+          originFileObj: o,
+          url: n,
+          thumbUrl: n
+        };
+        if (f((h) => [...h, a], a), k)
+          k({
+            file: o,
+            onProgress: (h) => {
+              const u = { ...a, percent: h };
+              f(
+                (t) => t.map(
+                  (l) => l.uid === a.uid ? u : l
+                ),
+                u
+              );
+            },
+            onSuccess: (h) => {
+              const u = {
+                ...a,
+                status: "done",
+                percent: 100,
+                response: h
+              };
+              f(
+                (t) => t.map(
+                  (l) => l.uid === a.uid ? u : l
+                ),
+                u
+              );
+            },
+            onError: (h) => {
+              const u = {
+                ...a,
+                status: "error",
+                error: h
+              };
+              f(
+                (t) => t.map(
+                  (l) => l.uid === a.uid ? u : l
+                ),
+                u
+              );
+            }
+          });
+        else if (x) {
+          const h = typeof x == "function" ? x(o) : x, u = new FormData();
+          u.append("file", o);
+          const t = new XMLHttpRequest();
+          t.upload.addEventListener("progress", (l) => {
+            if (l.lengthComputable) {
+              const w = Math.round(l.loaded / l.total * 100), g = { ...a, percent: w };
+              f(
+                (y) => y.map(
+                  (p) => p.uid === a.uid ? g : p
+                ),
+                g
+              );
+            }
+          }), t.addEventListener("load", () => {
+            if (t.status >= 200 && t.status < 300) {
+              const l = JSON.parse(t.responseText), w = {
+                ...a,
+                status: "done",
+                percent: 100,
+                response: l,
+                url: l.url || l.data?.url
+              };
+              f(
+                (g) => g.map(
+                  (y) => y.uid === a.uid ? w : y
+                ),
+                w
+              );
+            } else {
+              const l = {
+                ...a,
+                status: "error",
+                error: new Error(`Upload failed with status ${t.status}`)
+              };
+              f(
+                (w) => w.map(
+                  (g) => g.uid === a.uid ? l : g
+                ),
+                l
+              );
+            }
+          }), t.addEventListener("error", () => {
+            const l = {
+              ...a,
+              status: "error",
+              error: new Error("Network error")
+            };
+            f(
+              (w) => w.map((g) => g.uid === a.uid ? l : g),
+              l
+            );
+          }), t.open("POST", h), W && Object.entries(W).forEach(([l, w]) => {
+            t.setRequestHeader(l, w);
+          }), V && (t.withCredentials = !0), t.send(u);
+        } else
+          setTimeout(() => {
+            const h = {
+              ...a,
+              status: "done",
+              percent: 100
+            };
+            f(
+              (u) => u.map(
+                (t) => t.uid === a.uid ? h : t
+              ),
+              h
+            );
+          }, 100);
+      },
+      [x, k, f, W, V]
+    ), Ie = async (o) => {
+      const n = Array.from(o.target.files || []);
+      if (console.log("=== handleFileChange DEBUG ==="), console.log("Files from browser:", n.length), console.log("Directory mode:", T), console.log("Multiple mode:", v), console.log("Current fileList length:", b.length), console.log(
+        "File names:",
+        n.map((t) => t.name)
+      ), n.length === 0) return;
+      if (!T && !v && b.length > 0) {
+        P.error(
+          "You can only upload one file. Please remove the existing file first."
+        );
+        return;
+      }
+      if (E && b.length + n.length > E) {
+        P.error(`You can only upload up to ${E} file(s)`);
+        return;
+      }
+      let a = 0;
+      const h = [];
+      for (const t of n) {
+        if (console.log(`
+📁 Processing: ${t.name}`), F && t.size > F) {
+          console.log(
+            `❌ REJECTED: File size ${t.size} exceeds maxSize ${F}`
+          ), P.error(
+            `${t.name} exceeds maximum size of ${re(F)}`
+          );
+          continue;
+        }
+        if (L) {
+          if (console.log(`🔍 Calling beforeUpload for ${t.name}...`), await L(t, n) === !1) {
+            console.log(`❌ REJECTED by beforeUpload: ${t.name}`);
+            continue;
+          }
+          console.log(`✅ beforeUpload passed for ${t.name}`);
+        }
+        console.log(`✅ Valid file: ${t.name}`), h.push(t), a++;
+      }
+      console.log(
+        `
+📊 Summary: ${a} / ${n.length} files will be uploaded`
+      );
+      const u = h.map((t) => {
+        const l = t.type.startsWith("image/") ? URL.createObjectURL(t) : void 0;
+        return {
+          uid: he(),
+          name: t.name,
+          size: t.size,
+          type: t.type,
+          status: "uploading",
+          percent: 0,
+          originFileObj: t,
+          url: l,
+          thumbUrl: l
+        };
+      });
+      f((t) => [...t, ...u]), u.forEach((t, l) => {
+        const w = h[l];
+        if (k)
+          k({
+            file: w,
+            onProgress: (g) => {
+              const y = { ...t, percent: g };
+              f(
+                (p) => p.map(
+                  (d) => d.uid === t.uid ? y : d
+                ),
+                y
+              );
+            },
+            onSuccess: (g) => {
+              const y = {
+                ...t,
+                status: "done",
+                percent: 100,
+                response: g
+              };
+              f(
+                (p) => p.map(
+                  (d) => d.uid === t.uid ? y : d
+                ),
+                y
+              );
+            },
+            onError: (g) => {
+              const y = {
+                ...t,
+                status: "error",
+                error: g
+              };
+              f(
+                (p) => p.map(
+                  (d) => d.uid === t.uid ? y : d
+                ),
+                y
+              );
+            }
+          });
+        else if (x) {
+          const g = typeof x == "function" ? x(w) : x, y = new FormData();
+          y.append("file", w);
+          const p = new XMLHttpRequest();
+          p.upload.addEventListener("progress", (d) => {
+            if (d.lengthComputable) {
+              const D = Math.round(d.loaded / d.total * 100), z = { ...t, percent: D };
+              f(
+                (B) => B.map(
+                  (ue) => ue.uid === t.uid ? z : ue
+                ),
+                z
+              );
+            }
+          }), p.addEventListener("load", () => {
+            if (p.status >= 200 && p.status < 300) {
+              const d = JSON.parse(p.responseText), D = {
+                ...t,
+                status: "done",
+                percent: 100,
+                response: d,
+                url: d.url || d.data?.url
+              };
+              f(
+                (z) => z.map(
+                  (B) => B.uid === t.uid ? D : B
+                ),
+                D
+              );
+            } else {
+              const d = {
+                ...t,
+                status: "error",
+                error: new Error(`Upload failed with status ${p.status}`)
+              };
+              f(
+                (D) => D.map(
+                  (z) => z.uid === t.uid ? d : z
+                ),
+                d
+              );
+            }
+          }), p.addEventListener("error", () => {
+            const d = {
+              ...t,
+              status: "error",
+              error: new Error("Network error")
+            };
+            f(
+              (D) => D.map((z) => z.uid === t.uid ? d : z),
+              d
+            );
+          }), p.open("POST", g), W && Object.entries(W).forEach(([d, D]) => {
+            p.setRequestHeader(d, D);
+          }), V && (p.withCredentials = !0), p.send(y);
+        } else
+          console.log(
+            `⏱️ Mock upload starting for ${w.name} (delay: ${100 + l * 50}ms)`
+          ), setTimeout(
+            () => {
+              console.log(`✅ Mock upload complete for ${w.name}`);
+              const g = {
+                ...t,
+                status: "done",
+                percent: 100
+              };
+              f((y) => (console.log(
+                `📝 Updating status for ${w.name}, current list:`,
+                y.length
+              ), y.map(
+                (p) => p.uid === t.uid ? g : p
+              )), g);
+            },
+            100 + l * 50
+          );
+      }), O.current && (O.current.value = "");
+    }, de = async (o) => {
+      te && await te(o) === !1 || (f((n) => n.filter((a) => a.uid !== o.uid), {
+        ...o,
+        status: "removed"
+      }), o.url && o.url.startsWith("blob:") && URL.revokeObjectURL(o.url));
+    }, We = (o) => {
+      o.preventDefault(), o.stopPropagation(), !N && S && X(!0);
+    }, Te = (o) => {
+      o.preventDefault(), o.stopPropagation(), X(!1);
+    }, je = async (o) => {
+      if (o.preventDefault(), o.stopPropagation(), X(!1), N || !S) return;
+      let n = Array.from(o.dataTransfer.files);
+      if (n.length !== 0) {
+        if (!v && b.length > 0) {
+          P.error(
+            "You can only upload one file. Please remove the existing file first."
+          );
+          return;
+        }
+        if (!v && n.length > 1 && (P.error("You can only upload one file at a time"), n = [n[0]]), E && b.length + n.length > E) {
+          P.error(`You can only upload up to ${E} file(s)`);
+          return;
+        }
+        for (const a of n)
+          if (!(m && !a.type.match(new RegExp(m.replace(/,/g, "|"))))) {
+            if (F && a.size > F) {
+              P.error(
+                `${a.name} exceeds maximum size of ${re(F)}`
+              );
+              continue;
+            }
+            L && await L(a, n) === !1 || Re(a);
+          }
+      }
+    }, Me = () => {
+      !N && S && O.current?.click();
+    }, Oe = (o) => {
+      oe ? oe(o) : (o.url || o.thumbUrl) && (Ue(o.url || o.thumbUrl || ""), $e(o.name), le(!0));
+    }, Se = async (o) => {
+      if (se)
+        se(o);
+      else if (o.url) {
+        if (o.status === "uploading") {
+          P.error("Please wait until the file finishes uploading");
+          return;
+        }
+        if (o.status === "error") {
+          P.error("Cannot download file with error status");
+          return;
+        }
+        try {
+          const a = await (await fetch(o.url)).blob(), h = URL.createObjectURL(a), u = document.createElement("a");
+          u.href = h, u.download = o.name, u.style.display = "none", document.body.appendChild(u), u.click(), document.body.removeChild(u), setTimeout(() => URL.revokeObjectURL(h), 100);
+        } catch {
+          const n = document.createElement("a");
+          n.href = o.url, n.download = o.name, n.target = "_blank", n.rel = "noopener noreferrer", n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n);
+        }
+      }
+    }, K = typeof I == "boolean" ? {
+      showPreviewIcon: !0,
+      showRemoveIcon: !0,
+      showDownloadIcon: !0
+    } : {
+      showPreviewIcon: I.showPreviewIcon ?? !0,
+      showRemoveIcon: I.showRemoveIcon ?? !0,
+      showDownloadIcon: I.showDownloadIcon ?? !0
+    };
+    return /* @__PURE__ */ c(H, { children: [
+      /* @__PURE__ */ c("div", { ref: De, className: C(r), ...ke, children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: C(
+              er({
+                variant: s,
+                status: N || !S ? "disabled" : Le ? "dragover" : "idle",
+                size: [
+                  "dropzone",
+                  "primaryDropzone",
+                  "secondaryDropzone"
+                ].includes(s) ? void 0 : M
+              }),
+              ["dropzone", "primaryDropzone", "secondaryDropzone"].includes(
+                s
+              ) && "min-h-[180px] min-w-[300px]",
+              !ve && "border-0",
+              !J && s !== "avatar" && s !== "avatarCircle" && "px-4",
+              // Remove disabled opacity for avatar variants when image is shown
+              (s === "avatar" || s === "avatarCircle") && b.length > 0 && b[0].url && "opacity-100!"
+            ),
+            onDragOver: We,
+            onDragLeave: Te,
+            onDrop: je,
+            onClick: Me,
+            children: [
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ref: O,
+                  type: "file",
+                  accept: m,
+                  multiple: v,
+                  disabled: N,
+                  onChange: Ie,
+                  className: "hidden",
+                  ...T ? { webkitdirectory: "", directory: "" } : {}
+                }
+              ),
+              s === "avatar" || s === "avatarCircle" ? /* @__PURE__ */ e(H, { children: b.length > 0 && b[0].url && !N ? /* @__PURE__ */ c("div", { className: "relative w-full h-full group", children: [
+                /* @__PURE__ */ e(
+                  "img",
+                  {
+                    draggable: !1,
+                    src: b[0].url || b[0].thumbUrl,
+                    alt: b[0].name,
+                    className: C(
+                      "w-full h-full object-cover",
+                      s === "avatarCircle" && "rounded-full",
+                      s === "avatar" && "rounded-lg"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: C(
+                      "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center",
+                      s === "avatarCircle" && "rounded-full",
+                      s === "avatar" && "rounded-lg"
+                    ),
+                    onClick: (o) => {
+                      o.stopPropagation(), de(b[0]);
+                    },
+                    children: /* @__PURE__ */ e(A, { className: "h-6 w-6 text-white cursor-pointer hover:scale-110 transition-transform" })
+                  }
+                )
+              ] }) : Ne }) : /* @__PURE__ */ c(
+                "div",
+                {
+                  className: C(
+                    "flex items-center justify-center gap-2",
+                    ["secondaryDropzone", "dropzone", "primaryDropzone"].includes(
+                      s
+                    ) && "flex-col"
+                  ),
+                  children: [
+                    ae ? /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: C(
+                          [
+                            "dropzone",
+                            "primaryDropzone",
+                            "secondaryDropzone"
+                          ].includes(s) ? "h-10 w-10" : M === "small" ? "h-5 w-5" : "h-6 w-6",
+                          s === "outline" && "text-gray-500",
+                          [
+                            "primaryDropzone",
+                            "secondaryDropzone",
+                            "primaryOutline"
+                          ].includes(s) && "text-primary"
+                        ),
+                        children: ae
+                      }
+                    ) : /* @__PURE__ */ e(H, { children: J ? /* @__PURE__ */ e(
+                      _e,
+                      {
+                        className: C(
+                          [
+                            "dropzone",
+                            "primaryDropzone",
+                            "secondaryDropzone"
+                          ].includes(s) ? "h-10 w-10" : M === "small" ? "h-5 w-5" : "h-6 w-6",
+                          s === "outline" && "text-gray-500",
+                          [
+                            "secondaryDropzone",
+                            "primaryDropzone",
+                            "primaryOutline"
+                          ].includes(s) && "text-primary"
+                        )
+                      }
+                    ) : /* @__PURE__ */ e(
+                      Ge,
+                      {
+                        className: C(
+                          [
+                            "dropzone",
+                            "primaryDropzone",
+                            "secondaryDropzone"
+                          ].includes(s) ? "h-10 w-10" : M === "small" ? "h-5 w-5" : "h-6 w-6",
+                          s === "outline" && "text-gray-500",
+                          [
+                            "primaryDropzone",
+                            "secondaryDropzone",
+                            "primaryOutline"
+                          ].includes(s) && "text-primary"
+                        )
+                      }
+                    ) }),
+                    !J && /* @__PURE__ */ c(H, { children: [
+                      /* @__PURE__ */ e("span", { className: "font-medium whitespace-nowrap text-sm", children: xe }),
+                      ne && [
+                        "dropzone",
+                        "primaryDropzone",
+                        "secondaryDropzone"
+                      ].includes(s) && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500", children: ne })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        I && b.length > 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            className: C(
+              "mt-4",
+              (U === "picture-card" || U === "picture-circle") && "grid gap-2",
+              U === "picture" && "space-y-2"
+            ),
+            style: {
+              gridTemplateColumns: U === "picture-card" || U === "picture-circle" ? `repeat(${we}, 1fr)` : void 0,
+              minWidth: U === "picture-card" || U === "picture-circle" ? "100px" : void 0
+            },
+            children: b.filter((o) => o.response !== be.LIST_IGNORE).map((o) => /* @__PURE__ */ e(
+              rr,
+              {
+                file: o,
+                listType: U,
+                onRemove: () => de(o),
+                onPreview: Oe,
+                onDownload: Se,
+                showPreviewIcon: K.showPreviewIcon,
+                showRemoveIcon: K.showRemoveIcon,
+                showDownloadIcon: K.showDownloadIcon,
+                pictureCardSize: ye
+              },
+              o.uid
+            ))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(
+        Ze,
+        {
+          open: Pe,
+          onOpenChange: le,
+          title: ie,
+          size: "lg",
+          children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: Ee,
+              alt: ie,
+              className: "w-full h-auto max-h-[70vh] object-contain"
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+ge.displayName = "Upload";
+const be = ge;
+be.LIST_IGNORE = "LIST_IGNORE";
+const rr = ({
+  file: r,
+  listType: s,
+  onRemove: m,
+  onPreview: v,
+  onDownload: N,
+  showPreviewIcon: $,
+  showRemoveIcon: R,
+  showDownloadIcon: x
+  // pictureCardSize, // Unused currently
+}) => {
+  const k = r.type?.startsWith("image/"), L = k || r.url;
+  return s === "picture-card" ? /* @__PURE__ */ c(
+    "div",
+    {
+      className: "relative aspect-square rounded-lg border bg-muted/50 overflow-hidden group",
+      style: {
+        width: "100px",
+        height: "100px",
+        minWidth: "100px",
+        minHeight: "100px",
+        padding: "4px"
+      },
+      children: [
+        r.url && k ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: r.thumbUrl || r.url,
+            alt: r.name,
+            className: "h-full w-full object-cover rounded-lg"
+          }
+        ) : /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full", children: Y(r) }),
+        r.status === "uploading" && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center", children: /* @__PURE__ */ c("div", { className: "w-full px-4", children: [
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
+            /* @__PURE__ */ e(Q, { className: "h-4 w-4 animate-spin" }),
+            /* @__PURE__ */ c("span", { className: "text-xs", children: [
+              r.percent,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: "h-full bg-primary transition-all duration-300",
+              style: { width: `${r.percent}%` }
+            }
+          ) })
+        ] }) }),
+        r.status === "done" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2 bg-green-500 rounded-full p-1", children: /* @__PURE__ */ e(Z, { className: "h-4 w-4 text-white" }) }),
+        r.status === "error" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2 bg-red-500 rounded-full p-1", children: /* @__PURE__ */ e(ee, { className: "h-4 w-4 text-white" }) }),
+        /* @__PURE__ */ c("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
+          $ && L && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: (i) => {
+                i.stopPropagation(), v?.(r);
+              },
+              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              title: "Preview",
+              children: /* @__PURE__ */ e(_, { className: "h-4 w-4 text-white" })
+            }
+          ),
+          x && r.url && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: (i) => {
+                i.stopPropagation(), N?.(r);
+              },
+              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              title: "Download",
+              children: /* @__PURE__ */ e(G, { className: "h-4 w-4 text-white" })
+            }
+          ),
+          R && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: (i) => {
+                i.stopPropagation(), m();
+              },
+              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              title: "Remove",
+              children: /* @__PURE__ */ e(A, { className: "h-4 w-4 text-white" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 p-2 text-white text-xs truncate opacity-0 group-hover:opacity-100 transition-opacity", children: r.name })
+      ]
+    }
+  ) : s === "picture-circle" ? /* @__PURE__ */ c(
+    "div",
+    {
+      className: C(
+        "relative aspect-square rounded-full border bg-muted/50 overflow-hidden group",
+        r.status === "done" && "border-2 border-green-500",
+        r.status === "error" && "border-2 border-red-500"
+      ),
+      style: {
+        width: "100px",
+        height: "100px",
+        minWidth: "100px",
+        minHeight: "100px",
+        padding: "4px"
+      },
+      children: [
+        r.url && k ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: r.thumbUrl || r.url,
+            alt: r.name,
+            className: "h-full w-full object-cover rounded-full"
+          }
+        ) : /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full rounded-full bg-muted", children: Y(r) }),
+        r.status === "uploading" && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-full", children: /* @__PURE__ */ c("div", { className: "w-full px-4", children: [
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2 justify-center", children: [
+            /* @__PURE__ */ e(Q, { className: "h-4 w-4 animate-spin" }),
+            /* @__PURE__ */ c("span", { className: "text-xs", children: [
+              r.percent,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: "h-full bg-primary transition-all duration-300",
+              style: { width: `${r.percent}%` }
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ c("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 rounded-full", children: [
+          $ && L && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: (i) => {
+                i.stopPropagation(), v?.(r);
+              },
+              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              title: "Preview",
+              children: /* @__PURE__ */ e(_, { className: "h-4 w-4 text-white" })
+            }
+          ),
+          x && r.url && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: (i) => {
+                i.stopPropagation(), N?.(r);
+              },
+              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              title: "Download",
+              children: /* @__PURE__ */ e(G, { className: "h-4 w-4 text-white" })
+            }
+          ),
+          R && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: (i) => {
+                i.stopPropagation(), m();
+              },
+              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              title: "Remove",
+              children: /* @__PURE__ */ e(A, { className: "h-4 w-4 text-white" })
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 p-2 text-white text-xs truncate opacity-0 group-hover:opacity-100 transition-opacity", children: r.name })
+        ] })
+      ]
+    }
+  ) : s === "picture" ? /* @__PURE__ */ c("div", { className: "flex items-center gap-3 p-2 rounded-lg border bg-background hover:bg-muted/50 transition-colors group", children: [
+    /* @__PURE__ */ e("div", { className: "shrink-0 h-10 w-10 rounded overflow-hidden bg-muted flex items-center justify-center", children: r.url && k ? /* @__PURE__ */ e(
+      "img",
+      {
+        src: r.thumbUrl || r.url,
+        alt: r.name,
+        className: "h-full w-full object-cover"
+      }
+    ) : Y(r) }),
+    /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ e("p", { className: "text-sm font-medium truncate", children: r.name }),
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mt-1", children: [
+        r.size && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: re(r.size) }),
+        r.status === "uploading" && /* @__PURE__ */ c("span", { className: "text-xs text-primary", children: [
+          r.percent,
+          "%"
+        ] }),
+        r.status === "done" && /* @__PURE__ */ e(Z, { className: "h-4 w-4 text-green-500" }),
+        r.status === "error" && /* @__PURE__ */ e(ee, { className: "h-4 w-4 text-red-500" })
+      ] }),
+      r.status === "uploading" && /* @__PURE__ */ e("div", { className: "h-1 bg-muted rounded-full overflow-hidden mt-2", children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "h-full bg-primary transition-all duration-300",
+          style: { width: `${r.percent}%` }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+      $ && L && /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: (i) => {
+            i.stopPropagation(), v?.(r);
+          },
+          className: "p-1.5 rounded hover:bg-muted transition-colors",
+          title: "Preview",
+          children: /* @__PURE__ */ e(_, { className: "h-4 w-4" })
+        }
+      ),
+      x && r.url && /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: (i) => {
+            i.stopPropagation(), N?.(r);
+          },
+          className: "p-1.5 rounded hover:bg-muted transition-colors",
+          title: "Download",
+          children: /* @__PURE__ */ e(G, { className: "h-4 w-4" })
+        }
+      ),
+      R && /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: (i) => {
+            i.stopPropagation(), m();
+          },
+          className: "p-1.5 rounded hover:bg-destructive/10 transition-colors text-destructive",
+          title: "Remove",
+          children: /* @__PURE__ */ e(Ye, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ c("div", { className: "flex items-center gap-2 p-2 rounded hover:bg-muted/50 transition-colors group", children: [
+    /* @__PURE__ */ e("div", { className: "shrink-0", children: Y(r) }),
+    /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e("p", { className: "text-sm truncate", children: r.name }),
+        r.status === "done" && /* @__PURE__ */ e(Z, { className: "h-4 w-4 text-green-500 shrink-0" }),
+        r.status === "error" && /* @__PURE__ */ e(ee, { className: "h-4 w-4 text-red-500 shrink-0" }),
+        r.status === "uploading" && /* @__PURE__ */ e(Q, { className: "h-4 w-4 animate-spin shrink-0" })
+      ] }),
+      r.status === "uploading" && /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e("div", { className: "flex-1 h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: "h-full bg-primary transition-all duration-300",
+            style: { width: `${r.percent}%` }
+          }
+        ) }),
+        /* @__PURE__ */ c("span", { className: "text-xs text-muted-foreground", children: [
+          r.percent,
+          "%"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+      $ && L && /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: (i) => {
+            i.stopPropagation(), v?.(r);
+          },
+          className: "p-1 rounded hover:bg-muted transition-colors",
+          title: "Preview",
+          children: /* @__PURE__ */ e(_, { className: "h-4 w-4" })
+        }
+      ),
+      x && r.url && /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: (i) => {
+            i.stopPropagation(), N?.(r);
+          },
+          className: "p-1 rounded hover:bg-muted transition-colors",
+          title: "Download",
+          children: /* @__PURE__ */ e(G, { className: "h-4 w-4" })
+        }
+      ),
+      R && /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: (i) => {
+            i.stopPropagation(), m();
+          },
+          className: "p-1 rounded hover:bg-destructive/10 transition-colors text-destructive",
+          title: "Remove",
+          children: /* @__PURE__ */ e(A, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  be as Upload,
+  be as default
+};
+//# sourceMappingURL=Upload.js.map