@mci-ui/mci-ui 0.0.94 → 0.0.95

package/dist/shared/ui/mciUpload/MciUpload.js

@@ -1,382 +1,132 @@
-import { jsxs as o, jsx as t, Fragment as k } from "react/jsx-runtime";
-import { Upload as le, File as oe, Star2 as se, Eye as ne } from "@solar-icons/react";
-import ae from "../../../assets/icons/close.svg.js";
-import { useState as O, useRef as C, useMemo as T, useCallback as c, useEffect as ie } from "react";
-import { uploadLanguages as ce } from "../../lib/uploadLanguage.js";
-import { cn as s } from "../../lib/utils.js";
-import { buildSecureAccept as de, getAllowedFormatsHint as ge, validateFileSize as ue, validateFileType as be, createPreview as pe, getFileIcon as me, formatFileSize as he } from "./mci-upload.utils.js";
-const xe = {
-  blue: {
-    dropBorder: "border-blue-200 hover:border-blue-300",
-    dropBg: "bg-blue-50/40 hover:bg-blue-50/60",
-    dropActive: "border-blue-600 bg-blue-50",
-    iconWrap: "text-blue-600",
-    title: "text-blue-600",
-    hint: "text-slate-500",
-    progressFill: "bg-blue-600",
-    fileIconImg: "bg-blue-50 text-blue-600",
-    fileIconDoc: "bg-green-50 text-green-600"
-  },
-  yellow: {
-    dropBorder: "border-yellow-300 hover:border-yellow-400",
-    dropBg: "bg-yellow-50/60 hover:bg-yellow-100/60",
-    dropActive: "border-yellow-500 bg-yellow-100/80",
-    iconWrap: "text-yellow-600",
-    title: "text-yellow-700",
-    hint: "text-slate-500",
-    progressFill: "bg-yellow-500",
-    fileIconImg: "bg-blue-50 text-blue-600",
-    fileIconDoc: "bg-green-50 text-green-600"
-  },
-  orange: {
-    dropBorder: "border-orange-200 hover:border-orange-300",
-    dropBg: "bg-orange-50/40 hover:bg-orange-50/60",
-    dropActive: "border-orange-600 bg-orange-50",
-    iconWrap: "text-orange-600",
-    title: "text-orange-600",
-    hint: "text-slate-500",
-    progressFill: "bg-orange-600",
-    fileIconImg: "bg-orange-50 text-orange-600",
-    fileIconDoc: "bg-green-50 text-green-600"
-  }
-}, fe = {
-  blue: {
-    dropBorder: "border-blue-800 hover:border-blue-700",
-    dropBg: "bg-blue-950/40 hover:bg-blue-950/60",
-    dropActive: "border-blue-500 bg-blue-950/60",
-    iconWrap: "text-blue-400",
-    title: "text-blue-400",
-    hint: "text-slate-400",
-    progressFill: "bg-blue-500",
-    fileIconImg: "bg-blue-950 text-blue-400",
-    fileIconDoc: "bg-green-950 text-green-400"
-  },
-  yellow: {
-    dropBorder: "border-yellow-700 hover:border-yellow-600",
-    dropBg: "bg-yellow-950/45 hover:bg-yellow-950/65",
-    dropActive: "border-yellow-500 bg-yellow-950/70",
-    iconWrap: "text-yellow-300",
-    title: "text-yellow-300",
-    hint: "text-slate-400",
-    progressFill: "bg-yellow-400",
-    fileIconImg: "bg-blue-950 text-blue-400",
-    fileIconDoc: "bg-green-950 text-green-400"
-  },
-  orange: {
-    dropBorder: "border-orange-800 hover:border-orange-700",
-    dropBg: "bg-orange-950/40 hover:bg-orange-950/60",
-    dropActive: "border-orange-600 bg-orange-950/60",
-    iconWrap: "text-orange-400",
-    title: "text-orange-400",
-    hint: "text-slate-400",
-    progressFill: "bg-orange-600",
-    fileIconImg: "bg-orange-950 text-orange-400",
-    fileIconDoc: "bg-green-950 text-green-400"
-  }
-}, Be = ({
-  multiple: y = !1,
-  accept: h = "*/*",
-  maxSize: N = 10,
-  maxFiles: D = 5,
-  disabled: g = !1,
-  label: W,
-  required: H = !1,
-  error: F,
-  className: z,
-  onFilesChange: x,
-  onUpload: w,
-  showPreview: _ = !0,
-  locale: q = "uz",
-  showFileTypeIcon: K = !0,
-  variant: R = "orange",
-  customValidator: U,
-  darkMode: i = !1
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { Upload as k } from "@solar-icons/react";
+import { cn as l } from "../../lib/utils.js";
+import { MciUploadFileList as E } from "./MciUploadFileList.js";
+import { useMciUpload as G } from "./useMciUpload.js";
+const X = ({
+  multiple: i = !1,
+  accept: p = "*/*",
+  maxSize: c = 10,
+  maxFiles: d = 5,
+  disabled: r = !1,
+  label: m,
+  required: f = !1,
+  error: a,
+  className: h,
+  onFilesChange: u,
+  onUpload: x,
+  defaultValue: g,
+  value: v,
+  onValueChange: N,
+  showPreview: b = !0,
+  locale: w = "uz",
+  showFileTypeIcon: D = !0,
+  variant: U = "orange",
+  customValidator: C,
+  darkMode: n = !1
 }) => {
-  const [b, f] = O([]), [$, L] = O(!1), [I, P] = O(!1), A = C(null), n = ce[q], u = T(() => i ? fe[R] : xe[R], [R, i]), G = T(() => de(h), [h]), J = T(() => ge(h), [h]), v = C(/* @__PURE__ */ new Map()), B = c((e) => {
-    const l = v.current.get(e);
-    l && (URL.revokeObjectURL(l), v.current.delete(e));
-  }, []), j = c(() => {
-    for (const e of v.current.values())
-      URL.revokeObjectURL(e);
-    v.current.clear();
-  }, []);
-  ie(() => () => {
-    j();
-  }, [j]);
-  const Q = c((e) => {
-    let l = v.current.get(e.id);
-    l || (l = URL.createObjectURL(e.file), v.current.set(e.id, l), setTimeout(() => B(e.id), 5 * 6e4)), window.open(l, "_blank", "noopener,noreferrer");
-  }, [B]), E = c(
-    async (e) => {
-      const l = Array.from(e), d = [];
-      for (const r of l) {
-        if (b.length + d.length >= D) {
-          alert(n.maxFilesError(D));
-          break;
-        }
-        if (!ue(r, N)) {
-          alert(n.fileSizeError(r.name, N));
-          continue;
-        }
-        const a = be(r, h);
-        if (!a.isValid) {
-          a.reason === "blocked" ? alert(n.blockedFileTypeError(r.name)) : alert(n.fileTypeError(r.name));
-          continue;
-        }
-        if (U) {
-          const S = U(r);
-          if (S) {
-            alert(S);
-            continue;
-          }
-        }
-        const p = await pe(r), m = w ? "uploading" : "success", re = w ? 0 : 100;
-        d.push({
-          id: Math.random().toString(36).substr(2, 9),
-          file: r,
-          preview: p,
-          progress: re,
-          status: m
-        });
-      }
-      if (d.length > 0) {
-        const r = y ? [...b, ...d] : d;
-        if (f(r), x?.(r.map((a) => a.file)), w) {
-          P(!0);
-          try {
-            const a = r.map((p, m) => ({
-              ...p,
-              progress: Math.min(100, (m + 1) / r.length * 100)
-            }));
-            f(a), await w(a), f(
-              (p) => p.map((m) => ({
-                ...m,
-                status: "success",
-                progress: 100
-              }))
-            );
-          } catch (a) {
-            f(
-              (p) => p.map((m) => ({
-                ...m,
-                status: "error",
-                error: a instanceof Error ? a.message : n.uploadFailed
-              }))
-            );
-          } finally {
-            P(!1);
-          }
-        }
-      }
-    },
-    [
-      b,
-      D,
-      U,
-      n,
-      h,
-      N,
-      y,
-      x,
-      w
-    ]
-  ), V = c(
-    (e) => {
-      e.preventDefault(), g || L(!0);
-    },
-    [g]
-  ), X = c((e) => {
-    e.preventDefault(), L(!1);
-  }, []), Y = c(
-    (e) => {
-      if (e.preventDefault(), L(!1), g) return;
-      const l = e.dataTransfer.files;
-      l.length > 0 && E(l);
-    },
-    [g, E]
-  ), Z = c(
-    (e) => {
-      const l = e.target.files;
-      l && l.length > 0 && (E(l), A.current && (A.current.value = ""));
-    },
-    [E]
-  ), M = c(
-    (e) => {
-      B(e), f((l) => {
-        const d = l.filter((r) => r.id !== e);
-        return x?.(d.map((r) => r.file)), d;
-      });
-    },
-    [x, B]
-  ), ee = c(() => {
-    j(), f([]), x?.([]);
-  }, [x, j]), te = c(() => {
-    A.current?.click();
-  }, []);
-  return /* @__PURE__ */ o("div", { className: s("w-full", z), children: [
-    W && /* @__PURE__ */ o(
+  const j = G({
+    multiple: i,
+    accept: p,
+    maxSize: c,
+    maxFiles: d,
+    disabled: r,
+    defaultValue: g,
+    value: v,
+    onFilesChange: u,
+    onValueChange: N,
+    onUpload: x,
+    locale: w,
+    variant: U,
+    darkMode: n,
+    customValidator: C
+  }), {
+    files: y,
+    isDragging: A,
+    isUploading: R,
+    fileInputRef: F,
+    t: s,
+    theme: t,
+    secureAccept: L,
+    allowedFormatsHint: B,
+    handleDragOver: H,
+    handleDragLeave: I,
+    handleDrop: O,
+    handleFileInput: P,
+    handleRemoveFile: q,
+    handleClearAll: z,
+    handleUploadClick: T,
+    openPreview: W
+  } = j;
+  return /* @__PURE__ */ o("div", { className: l("w-full", h), children: [
+    m && /* @__PURE__ */ o(
       "label",
       {
-        className: s(
+        className: l(
           "mb-2 block text-base font-medium",
-          F ? "text-red-600" : i ? "text-slate-300" : "text-slate-700"
+          a ? "text-red-600" : n ? "text-slate-300" : "text-slate-700"
         ),
         children: [
-          W,
-          H && /* @__PURE__ */ t("span", { className: "ml-1 text-extra-small text-red-600", children: "*" })
+          m,
+          f && /* @__PURE__ */ e("span", { className: "ml-1 text-extra-small text-red-600", children: "*" })
         ]
       }
     ),
     /* @__PURE__ */ o(
       "div",
       {
-        className: s(
+        className: l(
           "group relative flex min-h-[180px] w-full cursor-pointer items-center justify-center rounded-2xl border border-dashed p-6 text-center transition-all duration-300",
-          u.dropBorder,
-          u.dropBg,
-          $ && u.dropActive,
-          g && "cursor-not-allowed opacity-60",
-          F && (i ? "border-red-500 bg-red-950/30" : "border-red-600 bg-red-50/30")
+          t.dropBorder,
+          t.dropBg,
+          A && t.dropActive,
+          r && "cursor-not-allowed opacity-60",
+          a && (n ? "border-red-500 bg-red-950/30" : "border-red-600 bg-red-50/30")
         ),
-        onDragOver: V,
-        onDragLeave: X,
-        onDrop: Y,
-        onClick: te,
+        onDragOver: H,
+        onDragLeave: I,
+        onDrop: O,
+        onClick: T,
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ e(
             "input",
             {
-              ref: A,
+              ref: F,
               type: "file",
-              multiple: y,
-              accept: G,
-              onChange: Z,
-              disabled: g,
+              multiple: i,
+              accept: L,
+              onChange: P,
+              disabled: r,
               className: "hidden"
             }
           ),
           /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-3", children: [
-            /* @__PURE__ */ t("div", { className: s("flex h-12 w-12 items-center justify-center rounded-xl", u.iconWrap), children: /* @__PURE__ */ t(le, { size: 20 }) }),
-            /* @__PURE__ */ t("p", { className: s("text-base font-medium", u.title), children: n.dropHereTitle }),
-            /* @__PURE__ */ t("p", { className: s("text-sm font-normal", u.hint), children: n.fileRequirements(y, D, N, J) })
+            /* @__PURE__ */ e("div", { className: l("flex h-12 w-12 items-center justify-center rounded-xl", t.iconWrap), children: /* @__PURE__ */ e(k, { size: 20 }) }),
+            /* @__PURE__ */ e("p", { className: l("text-base font-medium", t.title), children: s.dropHereTitle }),
+            /* @__PURE__ */ e("p", { className: l("text-sm font-normal", t.hint), children: s.fileRequirements(i, d, c, B) })
           ] })
         ]
       }
     ),
-    b.length > 0 && /* @__PURE__ */ o("div", { className: "mt-4 space-y-3", children: [
-      /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ o("span", { className: s("text-sm font-medium", i ? "text-slate-300" : "text-slate-700"), children: [
-          n.selectedFiles,
-          " (",
-          b.length,
-          ")"
-        ] }),
-        b.length > 1 && /* @__PURE__ */ t(
-          "button",
-          {
-            type: "button",
-            onClick: ee,
-            disabled: g || I,
-            className: "cursor-pointer text-sm font-medium text-red-600 disabled:cursor-not-allowed disabled:opacity-50",
-            children: n.clearAll
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { className: "space-y-3", children: b.map((e) => {
-        const d = !!e.preview ? u.fileIconImg : u.fileIconDoc, r = g || I || e.status === "uploading";
-        return /* @__PURE__ */ o(
-          "div",
-          {
-            className: s(
-              "flex items-center justify-between rounded-2xl border p-4",
-              i ? "border-neutral-700" : "border-slate-200",
-              e.status === "error" && (i ? "border-red-500" : "border-red-600")
-            ),
-            children: [
-              /* @__PURE__ */ o("div", { className: "flex min-w-0 items-center gap-4", children: [
-                /* @__PURE__ */ t(
-                  "div",
-                  {
-                    className: s(
-                      "flex h-14 w-14 items-center justify-center rounded-2xl",
-                      d
-                    ),
-                    children: _ && e.preview ? /* @__PURE__ */ t(
-                      "img",
-                      {
-                        src: e.preview,
-                        alt: e.file.name,
-                        className: "h-10 w-10 rounded-xl object-cover"
-                      }
-                    ) : K ? me(e.file) : /* @__PURE__ */ t(oe, { className: "h-6 w-6 text-slate-500" })
-                  }
-                ),
-                /* @__PURE__ */ o("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ t("p", { className: s("truncate text-lg font-semibold", i ? "text-slate-100" : "text-primary"), children: e.file.name }),
-                  /* @__PURE__ */ o("div", { className: s("mt-1 flex flex-wrap items-center gap-2 text-sm", i ? "text-slate-400" : "text-slate-500"), children: [
-                    /* @__PURE__ */ t("span", { children: he(e.file.size) }),
-                    e.status === "uploading" && /* @__PURE__ */ o(k, { children: [
-                      /* @__PURE__ */ t("span", { children: "•" }),
-                      /* @__PURE__ */ o("span", { className: "inline-flex items-center", children: [
-                        /* @__PURE__ */ t(se, { className: "mr-1 h-5 w-5 animate-spin" }),
-                        n.uploading
-                      ] })
-                    ] }),
-                    e.status === "success" && /* @__PURE__ */ o(k, { children: [
-                      /* @__PURE__ */ t("span", { children: "•" }),
-                      /* @__PURE__ */ t("span", { className: "font-normal text-green-600", children: n.success })
-                    ] })
-                  ] }),
-                  e.status === "uploading" && /* @__PURE__ */ t("div", { className: s("mt-2 h-1.5 w-full rounded-full", i ? "bg-neutral-700" : "bg-slate-200"), children: /* @__PURE__ */ t(
-                    "div",
-                    {
-                      className: s(
-                        "h-1.5 rounded-full transition-all duration-300",
-                        u.progressFill
-                      ),
-                      style: { width: `${e.progress}%` }
-                    }
-                  ) }),
-                  e.status === "error" && e.error && /* @__PURE__ */ t("p", { className: "mt-2 text-sm font-normal text-red-600", children: e.error })
-                ] })
-              ] }),
-              /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ t(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (a) => {
-                      a.stopPropagation(), r || Q(e);
-                    },
-                    disabled: r,
-                    className: s("rounded-xl p-2 hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", i ? "hover:bg-neutral-800" : "hover:bg-slate-100"),
-                    title: n.preview,
-                    children: /* @__PURE__ */ t(ne, { size: 20, className: "text-slate-400" })
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (a) => {
-                      a.stopPropagation(), M(e.id);
-                    },
-                    disabled: g || I,
-                    className: s("rounded-xl p-2 hover:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", i ? "text-slate-400 hover:bg-neutral-800" : "text-slate-base hover:bg-slate-100"),
-                    title: n.remove,
-                    children: /* @__PURE__ */ t(ae, { className: "h-6 w-6" })
-                  }
-                )
-              ] })
-            ]
-          },
-          e.id
-        );
-      }) })
-    ] }),
-    F && /* @__PURE__ */ t("p", { className: "mt-2 text-sm font-normal text-red-600", children: F })
+    /* @__PURE__ */ e(
+      E,
+      {
+        files: y,
+        theme: t,
+        t: s,
+        darkMode: n,
+        showPreview: b,
+        showFileTypeIcon: D,
+        disabled: r,
+        isUploading: R,
+        onPreview: W,
+        onRemove: q,
+        onClearAll: z
+      }
+    ),
+    a && /* @__PURE__ */ e("p", { className: "mt-2 text-sm font-normal text-red-600", children: a })
   ] });
 };
 export {
-  Be as default
+  X as default
 };

package/dist/shared/ui/mciUpload/MciUploadButton.js

@@ -0,0 +1,143 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Upload as H } from "@solar-icons/react";
+import { cn as r } from "../../lib/utils.js";
+import { MciUploadFileList as J } from "./MciUploadFileList.js";
+import { useMciUpload as K } from "./useMciUpload.js";
+const W = ({
+  multiple: o = !1,
+  accept: m = "*/*",
+  maxSize: d = 10,
+  maxFiles: f = 5,
+  disabled: l = !1,
+  label: i,
+  required: p = !1,
+  error: a,
+  className: u,
+  onFilesChange: x,
+  onUpload: h,
+  defaultValue: b,
+  value: w,
+  onValueChange: g,
+  showPreview: N = !0,
+  locale: v = "uz",
+  showFileTypeIcon: U = !0,
+  variant: C = "orange",
+  customValidator: y,
+  darkMode: t = !1,
+  buttonText: F,
+  fullWidth: j = !1
+}) => {
+  const A = K({
+    multiple: o,
+    accept: m,
+    maxSize: d,
+    maxFiles: f,
+    disabled: l,
+    defaultValue: b,
+    value: w,
+    onFilesChange: x,
+    onValueChange: g,
+    onUpload: h,
+    locale: v,
+    variant: C,
+    darkMode: t,
+    customValidator: y
+  }), {
+    files: R,
+    isUploading: s,
+    fileInputRef: z,
+    t: c,
+    theme: I,
+    secureAccept: L,
+    handleFileInput: P,
+    handleRemoveFile: B,
+    handleClearAll: q,
+    handleUploadClick: D,
+    openPreview: E
+  } = A, G = F ?? c.uploadFile;
+  return /* @__PURE__ */ n("div", { className: r("w-full", u), children: [
+    i && /* @__PURE__ */ n(
+      "label",
+      {
+        className: r(
+          "mb-2 block text-base font-medium",
+          a ? "text-red-600" : t ? "text-slate-300" : "text-slate-700"
+        ),
+        children: [
+          i,
+          p && /* @__PURE__ */ e("span", { className: "ml-1 text-extra-small text-red-600", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: D,
+        disabled: l || s,
+        className: r(
+          "inline-flex h-12 cursor-pointer overflow-hidden rounded-xl border text-left transition-colors",
+          j ? "w-full" : "w-fit min-w-70 max-w-full",
+          (l || s) && "cursor-not-allowed",
+          t ? "border-neutral-700 hover:border-neutral-600" : "border-slate-200 hover:border-slate-300",
+          l && "cursor-not-allowed opacity-60",
+          a && (t ? "border-red-500" : "border-red-600")
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: z,
+              type: "file",
+              multiple: o,
+              accept: L,
+              onChange: P,
+              disabled: l || s,
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: r(
+                "flex h-12 w-12 shrink-0 items-center justify-center border-r",
+                t ? "border-neutral-700 bg-slate-800 text-slate-300" : "border-slate-200 bg-slate-200 text-slate-600"
+              ),
+              children: /* @__PURE__ */ e(H, { size: 22 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: r(
+                "flex h-12 w-12 flex-1 items-center rounded-r-xl px-4",
+                t ? "bg-neutral-900 text-base text-slate-400" : "bg-white text-base text-slate-400"
+              ),
+              children: /* @__PURE__ */ e("span", { className: "truncate", children: G })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      J,
+      {
+        files: R,
+        theme: I,
+        t: c,
+        darkMode: t,
+        showPreview: N,
+        showFileTypeIcon: U,
+        disabled: l,
+        isUploading: s,
+        onPreview: E,
+        onRemove: B,
+        onClearAll: q
+      }
+    ),
+    a && /* @__PURE__ */ e("p", { className: "mt-2 text-sm font-normal text-red-600", children: a })
+  ] });
+};
+export {
+  W as default
+};