@rafal.lemieszewski/tide-ui 0.88.2 → 0.90.0

package/dist/es/components/fundamental/file-upload.js

@@ -1,61 +1,71 @@
-import { jsx as s, jsxs as b } from "react/jsx-runtime";
-import * as n from "react";
+import { jsx as i, jsxs as F, Fragment as Z } from "react/jsx-runtime";
+import * as d from "react";
 import { cn as v } from "../../lib/utils.js";
-import { cva as Q } from "class-variance-authority";
-import { Button as P } from "./button.js";
-import { Progress as Y } from "./progress.js";
-import { Icon as z } from "./icon.js";
-import { X as Z } from "lucide-react";
-import { Badge as _ } from "./badge.js";
-const M = n.createContext(
+import { cva as _ } from "class-variance-authority";
+import { Button as z } from "./button.js";
+import { Progress as ee } from "./progress.js";
+import { Icon as M } from "./icon.js";
+import { X as re } from "lucide-react";
+import { Badge as te } from "./badge.js";
+const j = d.createContext(
   null
-), D = () => {
-  const r = n.useContext(M);
+), I = () => {
+  const r = d.useContext(j);
   if (!r)
     throw new Error("useFileUpload must be used within a FileUpload component");
   return r;
-}, j = /* @__PURE__ */ n.forwardRef(
+};
+function oe(r) {
+  return r instanceof File;
+}
+const L = /* @__PURE__ */ d.forwardRef(
   ({
     className: r,
     files: e,
     onFilesChange: o,
     maxFiles: t = 10,
-    maxSize: l = 10 * 1024 * 1024,
+    maxSize: a = 10 * 1024 * 1024,
     // 10MB
-    accept: i,
-    disabled: m = !1,
-    multiple: c = !0,
-    onUpload: p,
-    children: u,
-    ...x
-  }, w) => {
-    const g = n.useMemo(
+    accept: n,
+    disabled: p = !1,
+    multiple: m = !0,
+    onUpload: c,
+    onDelete: u,
+    uploadMode: h = "auto",
+    children: w,
+    ...N
+  }, U) => {
+    const b = d.useMemo(
       () => ({
         files: e,
         onFilesChange: o,
         maxFiles: t,
-        maxSize: l,
-        accept: i,
-        disabled: m,
-        multiple: c,
-        onUpload: p
+        maxSize: a,
+        accept: n,
+        disabled: p,
+        multiple: m,
+        onUpload: c,
+        onDelete: u,
+        uploadMode: h
       }),
       [
         e,
         o,
         t,
-        l,
-        i,
+        a,
+        n,
+        p,
         m,
         c,
-        p
+        u,
+        h
       ]
     );
-    return /* @__PURE__ */ s(M.Provider, { value: g, children: /* @__PURE__ */ s("div", { ref: w, className: v("space-y-4", r), ...x, children: u }) });
+    return /* @__PURE__ */ i(j.Provider, { value: b, children: /* @__PURE__ */ i("div", { ref: U, className: v("space-y-4", r), ...N, children: w }) });
   }
 );
-j.displayName = "FileUploadRoot";
-const ee = Q(
+L.displayName = "FileUploadRoot";
+const ae = _(
   "relative flex flex-col items-center justify-center rounded-[var(--border-radius-l)] border-2 border-dashed p-6 text-center transition-colors duration-200",
   {
     variants: {
@@ -73,92 +83,97 @@ const ee = Q(
       disabled: !1
     }
   }
-), k = /* @__PURE__ */ n.forwardRef(({ className: r, children: e, ...o }, t) => {
+), A = /* @__PURE__ */ d.forwardRef(({ className: r, children: e, ...o }, t) => {
   const {
-    files: l,
-    onFilesChange: i,
-    maxFiles: m,
-    maxSize: c,
-    accept: p,
+    files: a,
+    onFilesChange: n,
+    maxFiles: p,
+    maxSize: m,
+    accept: c,
     disabled: u,
-    multiple: x
-  } = D(), [w, g] = n.useState(!1), y = n.useRef(null), O = (a) => {
-    if (c && a.size > c)
-      return `File size must be less than ${E(c)}`;
-    if (p && p.length > 0) {
-      const d = a.type, N = `.${a.name.split(".").pop()?.toLowerCase()}`;
-      if (!p.some((f) => {
+    multiple: h,
+    onUpload: w,
+    uploadMode: N
+  } = I(), [U, b] = d.useState(!1), R = d.useRef(null), G = (s) => {
+    if (m && s.size > m)
+      return `File size must be less than ${S(m)}`;
+    if (c && c.length > 0) {
+      const l = s.type, y = `.${s.name.split(".").pop()?.toLowerCase()}`;
+      if (!c.some((f) => {
         if (f.startsWith("."))
-          return f.toLowerCase() === N;
+          return f.toLowerCase() === y;
         if (f.includes("*")) {
-          const F = f.split("/")[0];
-          return d.startsWith(F);
+          const x = f.split("/")[0];
+          return l.startsWith(x);
         }
-        return d === f;
+        return l === f;
       }))
-        return `File type not supported. Accepted types: ${p.join(", ")}`;
+        return `File type not supported. Accepted types: ${c.join(", ")}`;
     }
     return null;
-  }, I = (a) => {
-    const d = [], N = l.length;
-    Array.from(a).forEach((h, f) => {
-      if (m && N + d.length >= m) return;
-      const F = O(h), R = {
+  }, C = async (s) => {
+    const l = [], y = a.length;
+    if (Array.from(s).forEach((g, f) => {
+      if (p && y + l.length >= p) return;
+      const x = G(g), k = {
         id: `${Date.now()}-${f}`,
-        file: h,
-        status: F ? "error" : "pending",
-        error: F || void 0,
+        file: g,
+        status: x ? "error" : "pending",
+        error: x || void 0,
         progress: 0
       };
-      if (h.type.startsWith("image/")) {
-        const C = new FileReader();
-        C.onload = (H) => {
-          const J = l.map(
-            (U) => U.id === R.id ? { ...U, preview: H.target?.result } : U
+      if (g.type.startsWith("image/")) {
+        const P = new FileReader();
+        P.onload = (Q) => {
+          const Y = a.map(
+            (D) => D.id === k.id ? { ...D, preview: Q.target?.result } : D
           );
-          i(J);
-        }, C.readAsDataURL(h);
+          n(Y);
+        }, P.readAsDataURL(g);
       }
-      d.push(R);
-    }), d.length > 0 && i([...l, ...d]);
-  }, S = (a) => {
-    a.preventDefault(), a.stopPropagation(), u || g(!0);
-  }, G = (a) => {
-    a.preventDefault(), a.stopPropagation(), g(!1);
-  }, K = (a) => {
-    if (a.preventDefault(), a.stopPropagation(), g(!1), u) return;
-    const d = a.dataTransfer.files;
-    d.length > 0 && I(d);
-  }, X = () => {
-    u || y.current?.click();
-  }, q = (a) => {
-    const d = a.target.files;
-    d && I(d), a.target.value = "";
+      l.push(k);
+    }), l.length > 0 && (n([...a, ...l]), N === "auto" && w)) {
+      const g = l.filter((f) => f.status !== "error");
+      g.length > 0 && await w(g);
+    }
+  }, K = (s) => {
+    s.preventDefault(), s.stopPropagation(), u || b(!0);
+  }, X = (s) => {
+    s.preventDefault(), s.stopPropagation(), b(!1);
+  }, q = (s) => {
+    if (s.preventDefault(), s.stopPropagation(), b(!1), u) return;
+    const l = s.dataTransfer.files;
+    l.length > 0 && C(l);
+  }, H = () => {
+    u || R.current?.click();
+  }, J = (s) => {
+    const l = s.target.files;
+    l && C(l), s.target.value = "";
   };
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ F(
     "div",
     {
       ref: t,
-      className: v(ee({ isDragActive: w, disabled: u }), r),
-      onDragOver: S,
-      onDragLeave: G,
-      onDrop: K,
-      onClick: X,
+      className: v(ae({ isDragActive: U, disabled: u }), r),
+      onDragOver: K,
+      onDragLeave: X,
+      onDrop: q,
+      onClick: H,
       role: "button",
       tabIndex: u ? -1 : 0,
       "aria-label": "Upload files",
       ...o,
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ i(
           "input",
           {
-            ref: y,
+            ref: R,
             type: "file",
-            multiple: x,
-            accept: p?.join(","),
+            multiple: h,
+            accept: c?.join(","),
             disabled: u,
             className: "hidden",
-            onChange: q
+            onChange: J
           }
         ),
         e
@@ -166,21 +181,26 @@ const ee = Q(
     }
   );
 });
-k.displayName = "FileUploadDropzone";
-const L = /* @__PURE__ */ n.forwardRef(({ children: r, ...e }, o) => {
-  const { disabled: t } = D();
-  return /* @__PURE__ */ s(P, { ref: o, disabled: t, ...e, children: r });
+A.displayName = "FileUploadDropzone";
+const B = /* @__PURE__ */ d.forwardRef(({ children: r, onClick: e, ...o }, t) => {
+  const { disabled: a, files: n, onUpload: p } = I();
+  return /* @__PURE__ */ i(z, { ref: t, disabled: a, onClick: async (c) => {
+    if (e?.(c), p) {
+      const u = n.filter((h) => h.status === "pending");
+      u.length > 0 && await p(u);
+    }
+  }, ...o, children: r });
 });
-L.displayName = "FileUploadTrigger";
-const A = /* @__PURE__ */ n.forwardRef(
-  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ s("div", { ref: t, className: v("space-y-2", r), ...o, children: e })
+B.displayName = "FileUploadTrigger";
+const W = /* @__PURE__ */ d.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ i("div", { ref: t, className: v("space-y-2", r), ...o, children: e })
 );
-A.displayName = "FileUploadList";
-const B = /* @__PURE__ */ n.forwardRef(
-  ({ className: r, file: e, children: o, ...t }, l) => /* @__PURE__ */ s(
+W.displayName = "FileUploadList";
+const $ = /* @__PURE__ */ d.forwardRef(
+  ({ className: r, file: e, children: o, ...t }, a) => /* @__PURE__ */ i(
     "div",
     {
-      ref: l,
+      ref: a,
       className: v(
         "flex items-center gap-3 rounded-[var(--border-radius-l)] border p-3",
         "border-[var(--color-border-primary)]",
@@ -193,10 +213,10 @@ const B = /* @__PURE__ */ n.forwardRef(
     }
   )
 );
-B.displayName = "FileUploadItem";
-const W = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => {
-  const l = (i) => i.startsWith("image/") ? "image" : i.startsWith("video/") ? "video" : i.startsWith("audio/") ? "volume-2" : i.includes("pdf") || i.includes("text/") || i.includes("application/json") ? "file-text" : "file";
-  return /* @__PURE__ */ s(
+$.displayName = "FileUploadItem";
+const V = /* @__PURE__ */ d.forwardRef(({ className: r, file: e, ...o }, t) => {
+  const a = (n) => n.startsWith("image/") ? "image" : n.startsWith("video/") ? "video" : n.startsWith("audio/") ? "volume-2" : n.includes("pdf") || n.includes("text/") || n.includes("application/json") ? "file-text" : "file";
+  return /* @__PURE__ */ i(
     "div",
     {
       ref: t,
@@ -205,86 +225,92 @@ const W = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => {
         r
       ),
       ...o,
-      children: e.preview ? /* @__PURE__ */ s(
+      children: e.preview && oe(e.file) ? /* @__PURE__ */ i(
         "img",
         {
           src: e.preview,
           alt: e.file.name,
           className: "h-full w-full rounded object-cover"
         }
-      ) : /* @__PURE__ */ s(
-        z,
+      ) : /* @__PURE__ */ i(
+        M,
         {
-          name: l(e.file.type),
+          name: a(e.file.type ?? ""),
           className: "h-5 w-5 text-[var(--color-text-secondary)]"
         }
       )
     }
   );
 });
-W.displayName = "FileUploadItemPreview";
-const $ = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, ...o }, t) => /* @__PURE__ */ b("div", { ref: t, className: v("flex-1 space-y-1", r), ...o, children: [
-  /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ s("p", { className: "text-body-sm truncate font-medium", children: e.file.name }),
-    /* @__PURE__ */ s(_, { children: e.status })
+V.displayName = "FileUploadItemPreview";
+const T = /* @__PURE__ */ d.forwardRef(({ className: r, file: e, children: o, ...t }, a) => /* @__PURE__ */ i("div", { ref: a, className: v("flex-1 space-y-1", r), ...t, children: o ?? /* @__PURE__ */ F(Z, { children: [
+  /* @__PURE__ */ F("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ i("p", { className: "text-body-sm truncate font-medium", children: e.file.name }),
+    /* @__PURE__ */ i(te, { children: e.status })
   ] }),
-  /* @__PURE__ */ s("p", { className: "text-caption-sm text-[var(--color-text-secondary)]", children: E(e.file.size) }),
-  e.error && /* @__PURE__ */ s("p", { className: "text-caption-sm text-[var(--color-text-error-bold)]", children: e.error })
-] }));
-$.displayName = "FileUploadItemMetadata";
-const V = /* @__PURE__ */ n.forwardRef(({ className: r, file: e, variant: o = "linear", ...t }, l) => e.status !== "uploading" || e.progress === void 0 ? null : /* @__PURE__ */ b("div", { ref: l, className: v("w-full", r), ...t, children: [
-  /* @__PURE__ */ s(Y, { value: e.progress, className: "h-2" }),
-  /* @__PURE__ */ b("p", { className: "text-caption-sm mt-1 text-[var(--color-text-secondary)]", children: [
+  /* @__PURE__ */ i("p", { className: "text-caption-sm text-[var(--color-text-secondary)]", children: S(e.file.size) }),
+  e.error && /* @__PURE__ */ i("p", { className: "text-caption-sm text-[var(--color-text-error-bold)]", children: e.error })
+] }) }));
+T.displayName = "FileUploadItemMetadata";
+const E = /* @__PURE__ */ d.forwardRef(({ className: r, file: e, variant: o = "linear", ...t }, a) => e.status !== "uploading" || e.progress === void 0 ? null : /* @__PURE__ */ F("div", { ref: a, className: v("w-full", r), ...t, children: [
+  /* @__PURE__ */ i(ee, { value: e.progress, className: "h-2" }),
+  /* @__PURE__ */ F("p", { className: "text-caption-sm mt-1 text-[var(--color-text-secondary)]", children: [
     Math.round(e.progress),
     "%"
   ] })
 ] }));
-V.displayName = "FileUploadItemProgress";
-const T = /* @__PURE__ */ n.forwardRef(({ file: r, ...e }, o) => {
-  const { files: t, onFilesChange: l } = D();
-  return /* @__PURE__ */ s(
-    P,
+E.displayName = "FileUploadItemProgress";
+const O = /* @__PURE__ */ d.forwardRef(({ file: r, ...e }, o) => {
+  const { files: t, onFilesChange: a, onDelete: n } = I();
+  return /* @__PURE__ */ i(
+    z,
     {
       ref: o,
       variant: "ghost",
       size: "s",
-      onClick: () => {
+      onClick: async () => {
+        if (n)
+          try {
+            await n(r);
+          } catch {
+            return;
+          }
         const m = t.filter((c) => c.id !== r.id);
-        l(m);
+        a(m);
       },
       "aria-label": `Remove ${r.file.name}`,
       ...e,
-      children: /* @__PURE__ */ s(z, { name: Z, className: "h-4 w-4" })
+      children: /* @__PURE__ */ i(M, { name: re, className: "h-4 w-4" })
     }
   );
 });
-T.displayName = "FileUploadItemDelete";
-const E = (r) => {
+O.displayName = "FileUploadItemDelete";
+const S = (r) => {
   if (r === 0) return "0 Bytes";
   const e = 1024, o = ["Bytes", "KB", "MB", "GB"], t = Math.floor(Math.log(r) / Math.log(e));
   return parseFloat((r / Math.pow(e, t)).toFixed(2)) + " " + o[t];
-}, de = {
-  Root: j,
-  Dropzone: k,
-  Trigger: L,
-  List: A,
-  Item: B,
-  ItemPreview: W,
-  ItemMetadata: $,
-  ItemProgress: V,
-  ItemDelete: T
+}, me = {
+  Root: L,
+  Dropzone: A,
+  Trigger: B,
+  List: W,
+  Item: $,
+  ItemPreview: V,
+  ItemMetadata: T,
+  ItemProgress: E,
+  ItemDelete: O
 };
 export {
-  de as FileUpload,
-  k as FileUploadDropzone,
-  B as FileUploadItem,
-  T as FileUploadItemDelete,
-  $ as FileUploadItemMetadata,
-  W as FileUploadItemPreview,
-  V as FileUploadItemProgress,
-  A as FileUploadList,
-  j as FileUploadRoot,
-  L as FileUploadTrigger,
-  E as formatFileSize,
-  D as useFileUpload
+  me as FileUpload,
+  A as FileUploadDropzone,
+  $ as FileUploadItem,
+  O as FileUploadItemDelete,
+  T as FileUploadItemMetadata,
+  V as FileUploadItemPreview,
+  E as FileUploadItemProgress,
+  W as FileUploadList,
+  L as FileUploadRoot,
+  B as FileUploadTrigger,
+  S as formatFileSize,
+  I as useFileUpload
 };