@rafal.lemieszewski/tide-ui 0.89.0 → 0.90.0

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

@@ -1,68 +1,71 @@
-import { jsx as s, jsxs as b, Fragment as Q } from "react/jsx-runtime";
-import * as i from "react";
-import { cn as f } from "../../lib/utils.js";
-import { cva as Y } from "class-variance-authority";
-import { Button as P } from "./button.js";
-import { Progress as Z } from "./progress.js";
-import { Icon as z } from "./icon.js";
-import { X as _ } from "lucide-react";
-import { Badge as ee } from "./badge.js";
-const M = i.createContext(
+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 _ } 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 = i.useContext(M);
+), I = () => {
+  const r = d.useContext(j);
   if (!r)
     throw new Error("useFileUpload must be used within a FileUpload component");
   return r;
 };
-function re(r) {
+function oe(r) {
   return r instanceof File;
 }
-const j = /* @__PURE__ */ i.forwardRef(
+const L = /* @__PURE__ */ d.forwardRef(
   ({
     className: r,
     files: e,
     onFilesChange: o,
     maxFiles: t = 10,
-    maxSize: n = 10 * 1024 * 1024,
+    maxSize: a = 10 * 1024 * 1024,
     // 10MB
-    accept: l,
-    disabled: v = !1,
-    multiple: p = !0,
+    accept: n,
+    disabled: p = !1,
+    multiple: m = !0,
     onUpload: c,
     onDelete: u,
+    uploadMode: h = "auto",
     children: w,
     ...N
-  }, g) => {
-    const F = i.useMemo(
+  }, U) => {
+    const b = d.useMemo(
       () => ({
         files: e,
         onFilesChange: o,
         maxFiles: t,
-        maxSize: n,
-        accept: l,
-        disabled: v,
-        multiple: p,
+        maxSize: a,
+        accept: n,
+        disabled: p,
+        multiple: m,
         onUpload: c,
-        onDelete: u
+        onDelete: u,
+        uploadMode: h
       }),
       [
         e,
         o,
         t,
+        a,
         n,
-        l,
-        v,
         p,
+        m,
         c,
-        u
+        u,
+        h
       ]
     );
-    return /* @__PURE__ */ s(M.Provider, { value: F, children: /* @__PURE__ */ s("div", { ref: g, className: f("space-y-4", r), ...N, children: w }) });
+    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 te = Y(
+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: {
@@ -80,92 +83,97 @@ const te = Y(
       disabled: !1
     }
   }
-), k = /* @__PURE__ */ i.forwardRef(({ className: r, children: e, ...o }, t) => {
+), A = /* @__PURE__ */ d.forwardRef(({ className: r, children: e, ...o }, t) => {
   const {
-    files: n,
-    onFilesChange: l,
-    maxFiles: v,
-    maxSize: p,
+    files: a,
+    onFilesChange: n,
+    maxFiles: p,
+    maxSize: m,
     accept: c,
     disabled: u,
-    multiple: w
-  } = D(), [N, g] = i.useState(!1), F = i.useRef(null), O = (a) => {
-    if (p && a.size > p)
-      return `File size must be less than ${E(p)}`;
+    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 d = a.type, U = `.${a.name.split(".").pop()?.toLowerCase()}`;
-      if (!c.some((m) => {
-        if (m.startsWith("."))
-          return m.toLowerCase() === U;
-        if (m.includes("*")) {
-          const x = m.split("/")[0];
-          return d.startsWith(x);
+      const l = s.type, y = `.${s.name.split(".").pop()?.toLowerCase()}`;
+      if (!c.some((f) => {
+        if (f.startsWith("."))
+          return f.toLowerCase() === y;
+        if (f.includes("*")) {
+          const x = f.split("/")[0];
+          return l.startsWith(x);
         }
-        return d === m;
+        return l === f;
       }))
         return `File type not supported. Accepted types: ${c.join(", ")}`;
     }
     return null;
-  }, I = (a) => {
-    const d = [], U = n.length;
-    Array.from(a).forEach((h, m) => {
-      if (v && U + d.length >= v) return;
-      const x = O(h), R = {
-        id: `${Date.now()}-${m}`,
-        file: h,
+  }, 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: 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 = n.map(
-            (y) => y.id === R.id ? { ...y, preview: H.target?.result } : y
+      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
           );
-          l(J);
-        }, C.readAsDataURL(h);
+          n(Y);
+        }, P.readAsDataURL(g);
       }
-      d.push(R);
-    }), d.length > 0 && l([...n, ...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 || F.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: f(te({ isDragActive: N, 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: F,
+            ref: R,
             type: "file",
-            multiple: w,
+            multiple: h,
             accept: c?.join(","),
             disabled: u,
             className: "hidden",
-            onChange: q
+            onChange: J
           }
         ),
         e
@@ -173,22 +181,27 @@ const te = Y(
     }
   );
 });
-k.displayName = "FileUploadDropzone";
-const L = /* @__PURE__ */ i.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__ */ i.forwardRef(
-  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ s("div", { ref: t, className: f("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__ */ i.forwardRef(
-  ({ className: r, file: e, children: o, ...t }, n) => /* @__PURE__ */ s(
+W.displayName = "FileUploadList";
+const $ = /* @__PURE__ */ d.forwardRef(
+  ({ className: r, file: e, children: o, ...t }, a) => /* @__PURE__ */ i(
     "div",
     {
-      ref: n,
-      className: f(
+      ref: a,
+      className: v(
         "flex items-center gap-3 rounded-[var(--border-radius-l)] border p-3",
         "border-[var(--color-border-primary)]",
         e.status === "error" && "border-[var(--color-border-error-bold)] bg-[var(--color-background-error-subtle)]",
@@ -200,104 +213,104 @@ const B = /* @__PURE__ */ i.forwardRef(
     }
   )
 );
-B.displayName = "FileUploadItem";
-const W = /* @__PURE__ */ i.forwardRef(({ className: r, file: e, ...o }, t) => {
-  const n = (l) => l.startsWith("image/") ? "image" : l.startsWith("video/") ? "video" : l.startsWith("audio/") ? "volume-2" : l.includes("pdf") || l.includes("text/") || l.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,
-      className: f(
+      className: v(
         "flex h-10 w-10 items-center justify-center rounded",
         r
       ),
       ...o,
-      children: e.preview && re(e.file) ? /* @__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: n(e.file.type ?? ""),
+          name: a(e.file.type ?? ""),
           className: "h-5 w-5 text-[var(--color-text-secondary)]"
         }
       )
     }
   );
 });
-W.displayName = "FileUploadItemPreview";
-const $ = /* @__PURE__ */ i.forwardRef(({ className: r, file: e, children: o, ...t }, n) => /* @__PURE__ */ s("div", { ref: n, className: f("flex-1 space-y-1", r), ...t, children: o ?? /* @__PURE__ */ b(Q, { 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(ee, { 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 })
+  /* @__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 })
 ] }) }));
-$.displayName = "FileUploadItemMetadata";
-const V = /* @__PURE__ */ i.forwardRef(({ className: r, file: e, variant: o = "linear", ...t }, n) => e.status !== "uploading" || e.progress === void 0 ? null : /* @__PURE__ */ b("div", { ref: n, className: f("w-full", r), ...t, children: [
-  /* @__PURE__ */ s(Z, { value: e.progress, className: "h-2" }),
-  /* @__PURE__ */ b("p", { className: "text-caption-sm mt-1 text-[var(--color-text-secondary)]", children: [
+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__ */ i.forwardRef(({ file: r, ...e }, o) => {
-  const { files: t, onFilesChange: n, onDelete: 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: async () => {
-        if (l)
+        if (n)
           try {
-            await l(r);
+            await n(r);
           } catch {
             return;
           }
-        const p = t.filter((c) => c.id !== r.id);
-        n(p);
+        const m = t.filter((c) => c.id !== r.id);
+        a(m);
       },
       "aria-label": `Remove ${r.file.name}`,
       ...e,
-      children: /* @__PURE__ */ s(z, { name: _, 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];
-}, ue = {
-  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 {
-  ue 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
 };