@mci-ui/mci-ui 0.0.84 → 0.0.85

package/dist/shared/ui/mciTooltip/MciTooltip.js

@@ -0,0 +1,52 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.js";
+const i = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2"
+}, p = {
+  top: "left-1/2 -translate-x-1/2 top-full",
+  bottom: "left-1/2 -translate-x-1/2 bottom-full",
+  left: "top-1/2 -translate-y-1/2 left-full",
+  right: "top-1/2 -translate-y-1/2 right-full"
+};
+function m({
+  content: a,
+  children: o,
+  position: t = "top",
+  delay: r = 200,
+  className: s
+}) {
+  return /* @__PURE__ */ l("div", { className: "group relative inline-block", children: [
+    o,
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: e(
+          "absolute z-50 rounded-md bg-slate-400 px-2 py-1 text-xs whitespace-nowrap text-white shadow-md",
+          "scale-95 opacity-0 transition-all group-hover:scale-100 group-hover:opacity-100",
+          "duration-200 ease-out group-hover:delay-200",
+          i[t],
+          s
+        ),
+        style: { transitionDelay: `${r}ms` },
+        children: [
+          a,
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: e(
+                "absolute h-2 w-2 rotate-45 bg-slate-400",
+                p[t]
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  m as default
+};

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

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

package/dist/shared/ui/mciUpload/mci-upload.utils.js

@@ -0,0 +1,186 @@
+import { jsx as a } from "react/jsx-runtime";
+import { FileText as c, File as m, MusicNote as f, VideoFramePlayHorizontal as u, Gallery as x } from "@solar-icons/react";
+const l = [
+  "pdf",
+  "doc",
+  "docx",
+  "xls",
+  "xlsx",
+  "ppt",
+  "pptx",
+  "txt",
+  "jpg",
+  "jpeg",
+  "png",
+  "bmp",
+  "tiff"
+], h = [
+  "zip",
+  "rar",
+  "7z",
+  "tar",
+  "gz",
+  "bz2",
+  "xz",
+  "tgz",
+  "tbz2",
+  "txz",
+  "iso",
+  "cab",
+  "arj",
+  "lz",
+  "lzh",
+  "z",
+  "exe",
+  "bat",
+  "cmd",
+  "com",
+  "msi",
+  "scr",
+  "pif",
+  "js",
+  "mjs",
+  "cjs",
+  "jse",
+  "vbs",
+  "vbe",
+  "wsf",
+  "wsh",
+  "ps1",
+  "psm1",
+  "sh",
+  "bash",
+  "zsh",
+  "ksh",
+  "csh",
+  "fish"
+], r = new Set(l), p = new Set(h), g = l.map((e) => `.${e}`).join(","), w = {
+  "image/*": ["jpg", "jpeg", "png", "bmp", "tiff"],
+  "text/*": ["txt"]
+}, E = {
+  "application/pdf": ["pdf"],
+  "application/msword": ["doc"],
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": ["docx"],
+  "application/vnd.ms-excel": ["xls"],
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": ["xlsx"],
+  "application/vnd.ms-powerpoint": ["ppt"],
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": ["pptx"],
+  "text/plain": ["txt"],
+  "image/jpg": ["jpg"],
+  "image/jpeg": ["jpg", "jpeg"],
+  "image/png": ["png"],
+  "image/bmp": ["bmp"],
+  "image/tiff": ["tiff"]
+}, S = /* @__PURE__ */ new Set([
+  "application/zip",
+  "application/x-zip-compressed",
+  "application/x-rar-compressed",
+  "application/vnd.rar",
+  "application/x-7z-compressed",
+  "application/x-msdownload",
+  "application/x-msdos-program",
+  "application/x-executable",
+  "application/x-bat",
+  "application/x-msi",
+  "application/javascript",
+  "text/javascript",
+  "application/x-javascript",
+  "application/x-sh",
+  "application/x-csh",
+  "text/x-shellscript",
+  "application/x-powershell"
+]);
+function z(e) {
+  const t = e.trim().toLowerCase(), n = t.lastIndexOf(".");
+  return n <= 0 || n === t.length - 1 ? "" : t.slice(n + 1);
+}
+function j(e) {
+  return e.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+}
+function d(e) {
+  if (!e || e === "*/*") return null;
+  const t = j(e), n = /* @__PURE__ */ new Set();
+  for (const i of t)
+    if (i !== "*/*") {
+      if (i.endsWith("/*")) {
+        const s = w[i];
+        if (!s) continue;
+        for (const o of s)
+          r.has(o) && !p.has(o) && n.add(o);
+        continue;
+      }
+      if (i.startsWith(".")) {
+        const s = i.slice(1);
+        r.has(s) && !p.has(s) && n.add(s);
+        continue;
+      }
+      if (i.includes("/")) {
+        const s = E[i];
+        if (!s) continue;
+        for (const o of s)
+          r.has(o) && !p.has(o) && n.add(o);
+        continue;
+      }
+      r.has(i) && !p.has(i) && n.add(i);
+    }
+  return n.size > 0 ? n : null;
+}
+function T(e) {
+  const t = d(e);
+  return t ? Array.from(t).map((n) => `.${n}`).join(",") : g;
+}
+function b(e) {
+  const t = d(e);
+  return t ? Array.from(t).join(", ") : l.join(", ");
+}
+function v(e) {
+  switch (e.type.split("/")[0]) {
+    case "image":
+      return /* @__PURE__ */ a(x, { className: "h-5 w-5 text-blue-500" });
+    case "video":
+      return /* @__PURE__ */ a(u, { className: "h-5 w-5 text-purple-500" });
+    case "audio":
+      return /* @__PURE__ */ a(f, { className: "h-5 w-5 text-green-500" });
+    default:
+      return e.type.includes("pdf") ? /* @__PURE__ */ a(c, { className: "h-5 w-5 text-red-500" }) : e.type.includes("word") || e.type.includes("document") ? /* @__PURE__ */ a(c, { className: "h-5 w-5 text-blue-600" }) : e.type.includes("excel") || e.type.includes("spreadsheet") ? /* @__PURE__ */ a(c, { className: "h-5 w-5 text-green-600" }) : /* @__PURE__ */ a(m, { className: "h-5 w-5 text-gray-500" });
+  }
+}
+function _(e) {
+  if (e === 0) return "0 Bytes";
+  const t = 1024, n = ["Bytes", "KB", "MB", "GB"], i = Math.floor(Math.log(e) / Math.log(t));
+  return parseFloat((e / Math.pow(t, i)).toFixed(2)) + " " + n[i];
+}
+function F(e, t) {
+  const n = t * 1024 * 1024;
+  return e.size <= n;
+}
+function O(e, t) {
+  const n = z(e.name), i = e.type.trim().toLowerCase();
+  if (i && S.has(i))
+    return { isValid: !1, reason: "blocked" };
+  if (!n) return { isValid: !1, reason: "not-allowed" };
+  if (p.has(n)) return { isValid: !1, reason: "blocked" };
+  if (!r.has(n)) return { isValid: !1, reason: "not-allowed" };
+  const s = d(t);
+  return s && !s.has(n) ? { isValid: !1, reason: "not-allowed" } : { isValid: !0 };
+}
+function A(e) {
+  return new Promise((t) => {
+    if (e.type.startsWith("image/")) {
+      const n = new FileReader();
+      n.onload = (i) => t(i.target?.result ?? ""), n.readAsDataURL(e);
+    } else
+      t("");
+  });
+}
+export {
+  h as BLOCKED_EXTENSIONS,
+  l as SECURE_ALLOWED_EXTENSIONS,
+  T as buildSecureAccept,
+  A as createPreview,
+  _ as formatFileSize,
+  b as getAllowedFormatsHint,
+  v as getFileIcon,
+  F as validateFileSize,
+  O as validateFileType
+};

package/package.json

@@ -1,23 +1,21 @@
 {
   "name": "@mci-ui/mci-ui",
   "private": false,
-  "version": "0.0.84",
+  "version": "0.0.85",
   "type": "module",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
   "style": "./dist/index.css",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.js"
     },
     "./style.css": "./dist/index.css"
   },
   "sideEffects": [
-    "./dist/index.css",
-    "./style.css"
+    "**/*.css"
   ],
   "files": [
     "dist"
@@ -33,7 +31,10 @@
     "preview": "vite preview",
     "format": "prettier --write ."
   },
-  "dependencies": {},
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@solar-icons/react": "^1.0.1",
@@ -62,10 +63,12 @@
   },
   "peerDependencies": {
     "react": ">=19",
-    "react-dom": ">=19",
-    "@solar-icons/react": "^1.0.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.4.0"
+    "react-dom": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "@solar-icons/react": {
+      "optional": true
+    }
   },
   "description": "Minimal UI component library built with React and Tailwind CSS.",
   "keywords": [