@mci-ui/mci-ui 0.0.86 → 0.0.88

package/dist/shared/ui/mciTabs/MciTabs.js

@@ -1,12 +1,12 @@
-import { jsxs as d, jsx as l } from "react/jsx-runtime";
-import { useState as x, useRef as b, useCallback as C, useEffect as w } from "react";
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { useState as v, useRef as p, useCallback as R, useEffect as x } from "react";
 import { cn as t } from "../../lib/utils.js";
 const I = {
   top: "flex-col",
   bottom: "flex-col-reverse",
   left: "flex-row",
   right: "flex-row-reverse"
-}, L = {
+}, O = {
   top: "flex-row",
   bottom: "flex-row",
   left: "flex-col",
@@ -17,89 +17,107 @@ const I = {
   left: "ml-4",
   right: "mr-4"
 };
-function _({
-  tabs: i,
-  defaultTab: h,
-  position: n = "top",
-  className: p,
-  tabListClassName: v,
-  contentClassName: N,
-  extra: u,
-  onChange: S
+function q({
+  tabs: l,
+  defaultTab: N,
+  position: c = "top",
+  darkMode: d = !1,
+  className: b,
+  tabListClassName: g,
+  contentClassName: S,
+  extra: w,
+  onChange: y
 }) {
-  const [s, g] = x(h || i[0]?.id), [y, E] = x({}), a = b([]), o = C(() => {
+  const [a, E] = v(N || l[0]?.id), [A, T] = v({}), f = p([]), h = p(null), n = R(() => {
     requestAnimationFrame(() => {
-      const e = i.findIndex((c) => c?.id === s), f = a.current[e];
-      if (f) {
-        const { offsetLeft: c, offsetTop: m, offsetWidth: T, offsetHeight: A } = f;
-        E({
-          left: `${c}px`,
+      requestAnimationFrame(() => {
+        const e = l.findIndex((L) => L?.id === a), r = f.current[e];
+        if (!r) return;
+        const { offsetLeft: o, offsetTop: m, offsetWidth: z, offsetHeight: C } = r;
+        T({
+          left: `${o}px`,
           top: `${m}px`,
-          width: `${T}px`,
-          height: `${A}px`,
+          width: `${z}px`,
+          height: `${C}px`,
           transition: "all 0.35s cubic-bezier(0.25, 1, 0.5, 1)"
         });
-      }
+      });
+    });
+  }, [a, l]);
+  x(() => (n(), window.addEventListener("resize", n), "fonts" in document && document.fonts.ready.then(n), () => window.removeEventListener("resize", n)), [c, n]), x(() => {
+    const e = h.current;
+    if (!e || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(() => {
+      n();
     });
-  }, [s, i]);
-  w(() => (o(), window.addEventListener("resize", o), "fonts" in document && document.fonts.ready.then(o), () => window.removeEventListener("resize", o)), [n, o]), w(() => {
-    a.current = a.current.slice(0, i.length);
-  }, [i]);
-  const r = n === "left" || n === "right";
-  return /* @__PURE__ */ d("div", { className: t("flex w-full", I[n], p), children: [
-    /* @__PURE__ */ d(
+    return r.observe(e), f.current.forEach((o) => {
+      o && r.observe(o);
+    }), () => r.disconnect();
+  }, [l, n]), x(() => {
+    f.current = f.current.slice(0, l.length);
+  }, [l]);
+  const s = c === "left" || c === "right";
+  return /* @__PURE__ */ u("div", { className: t("flex w-full", I[c], b), children: [
+    /* @__PURE__ */ u(
       "div",
       {
         className: t(
           "flex w-full gap-4",
-          r ? "flex-col items-start" : "flex-row flex-wrap items-center"
+          s ? "flex-col items-start" : "flex-row flex-wrap items-center"
         ),
         children: [
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ i(
             "div",
             {
               className: t(
                 "flex-1",
-                r ? "w-full" : "min-w-[520px]"
+                s ? "w-full" : "min-w-[520px]"
               ),
-              children: /* @__PURE__ */ d(
+              children: /* @__PURE__ */ u(
                 "div",
                 {
+                  ref: h,
                   className: t(
-                    "relative flex rounded-xl bg-slate-100 p-1",
-                    L[n],
-                    !r && "w-full overflow-hidden",
-                    r ? "min-w-48" : "",
-                    v
+                    "relative flex rounded-xl p-1",
+                    d ? "bg-neutral-300" : "bg-slate-100",
+                    O[c],
+                    !s && "w-full overflow-hidden",
+                    s ? "min-w-48" : "",
+                    g
                   ),
                   children: [
-                    /* @__PURE__ */ l(
+                    /* @__PURE__ */ i(
                       "div",
                       {
-                        className: t("absolute rounded-lg bg-white", r ? "w-full" : "h-full"),
-                        style: y
+                        className: t(
+                          "absolute rounded-lg",
+                          d ? "bg-black" : "bg-white",
+                          s ? "w-full" : "h-full"
+                        ),
+                        style: A
                       }
                     ),
-                    i?.map((e, f) => {
-                      const c = s === e.id;
-                      return /* @__PURE__ */ d(
+                    l?.map((e, r) => {
+                      const o = a === e.id;
+                      return /* @__PURE__ */ u(
                         "button",
                         {
                           ref: (m) => {
-                            a.current[f] = m;
+                            f.current[r] = m;
                           },
                           onClick: () => {
-                            e?.disabled || (g(e?.id), S?.(e?.id));
+                            e?.disabled || (E(e?.id), y?.(e?.id));
                           },
                           disabled: e?.disabled,
                           className: t(
-                            "relative z-10 flex items-center justify-center whitespace-nowrap px-3 py-2 text-base font-normal text-black transition-colors duration-300 hover:cursor-pointer",
-                            e?.disabled && "cursor-not-allowed opacity-50",
-                            r ? "w-full justify-start" : "flex-1 min-w-0"
+                            "relative z-10 flex items-center justify-center whitespace-nowrap px-3 py-2 text-base font-normal transition-colors duration-300 hover:cursor-pointer",
+                            d ? "text-white" : "text-black",
+                            e?.disabled && (d ? "cursor-not-allowed text-neutral-100/50 opacity-60" : "cursor-not-allowed opacity-50"),
+                            s ? "w-full justify-start" : "flex-1 min-w-0"
                           ),
                           children: [
-                            e?.icon && /* @__PURE__ */ l("span", { className: t("shrink-0 transition-transform duration-200", c && "scale-110"), children: e?.icon }),
-                            /* @__PURE__ */ l("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label })
+                            e?.icon && /* @__PURE__ */ i("span", { className: t("shrink-0 transition-transform duration-200", o && "scale-110"), children: e?.icon }),
+                            /* @__PURE__ */ i("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label })
                           ]
                         },
                         e?.id
@@ -110,22 +128,22 @@ function _({
               )
             }
           ),
-          u && /* @__PURE__ */ l(
+          w && /* @__PURE__ */ i(
             "div",
             {
               className: t(
                 "shrink-0 ml-auto",
-                r ? "w-full" : "max-w-full"
+                s ? "w-full" : "max-w-full"
               ),
-              children: /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center justify-end gap-2", children: u })
+              children: /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center justify-end gap-2", children: w })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ l("div", { className: t("w-full flex-1 overflow-hidden", j[n], N), children: /* @__PURE__ */ l("div", { className: "animate-fade-in w-full", style: { animationDuration: "0.35s" }, children: i?.find((e) => e.id === s)?.content }, s) })
+    /* @__PURE__ */ i("div", { className: t("w-full flex-1 overflow-hidden", j[c], S), children: /* @__PURE__ */ i("div", { className: "animate-fade-in w-full", style: { animationDuration: "0.35s" }, children: l?.find((e) => e.id === a)?.content }, a) })
   ] });
 }
 export {
-  _ as default
+  q as default
 };

package/dist/shared/ui/mciTag/MciTag.js

@@ -1,6 +1,6 @@
-import { jsxs as x, jsx as s } from "react/jsx-runtime";
-import { cn as a } from "../../lib/utils.js";
-const c = {
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { cn as s } from "../../lib/utils.js";
+const d = {
   sm: "px-2 py-0.5",
   md: "px-2 py-1",
   lg: "px-3 py-2"
@@ -8,35 +8,44 @@ const c = {
   sm: "w-3 h-3",
   md: "w-3 h-3",
   lg: "w-3 h-3"
-}, p = {
+}, b = {
   success: "bg-green-50 text-green-600",
-  warning: "bg-orange-50 text-orange-600",
+  warning: "bg-yellow-50 text-yellow-600",
   error: "bg-red-50 text-red-600",
   gray: "bg-slate-200 text-slate-700",
   blue: "bg-blue-50 text-blue-600"
+}, p = {
+  success: "bg-green-950 text-green-400",
+  warning: "bg-yellow-900 text-yellow-400",
+  error: "bg-red-950 text-red-400",
+  gray: "bg-neutral-200 text-neutral-50",
+  blue: "bg-blue-900 text-blue-400"
 };
 function i({
-  children: l,
-  variant: g = "success",
+  children: g,
+  variant: r = "success",
   size: t = "lg",
+  darkMode: x = !1,
   icon: e,
-  iconPosition: r = "left",
-  className: m
+  iconPosition: a = "left",
+  rounded: u = !1,
+  className: c
 }) {
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ m(
     "span",
     {
-      className: a(
-        "inline-flex animate-[fadeIn_0.3s_ease-out] items-center rounded-lg text-extra-small font-medium",
-        c[t],
-        p[g],
+      className: s(
+        "inline-flex animate-[fadeIn_0.3s_ease-out] items-center text-extra-small font-medium",
+        u ? "rounded-full" : "rounded-lg",
+        d[t],
+        x ? p[r] : b[r],
         e && "gap-[2px]",
-        m
+        c
       ),
       children: [
-        e && r === "left" && /* @__PURE__ */ s("span", { className: `flex items-center ${a(n[t])}`, children: e }),
-        /* @__PURE__ */ s("span", { children: l }),
-        e && r === "right" && /* @__PURE__ */ s("span", { className: `flex items-center ${a(n[t])}`, children: e })
+        e && a === "left" && /* @__PURE__ */ l("span", { className: `flex items-center ${s(n[t])}`, children: e }),
+        /* @__PURE__ */ l("span", { children: g }),
+        e && a === "right" && /* @__PURE__ */ l("span", { className: `flex items-center ${s(n[t])}`, children: e })
       ]
     }
   );

package/dist/shared/ui/mciTextarea/MciTextarea.js

@@ -1,56 +1,68 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { forwardRef as h, useMemo as p } from "react";
-import { cn as a } from "../../lib/utils.js";
-const w = h(
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { forwardRef as w, useMemo as _ } from "react";
+import { cn as r } from "../../lib/utils.js";
+const g = w(
   ({
-    label: s,
-    placeholder: r,
-    value: o = "",
-    onChange: d,
-    required: n = !1,
+    label: l,
+    placeholder: o,
+    darkMode: e = !1,
+    value: d = "",
+    onChange: n,
+    required: u = !1,
     disabled: i = !1,
-    error: e,
-    className: m,
-    rows: u = 4,
-    name: b
-  }, c) => {
-    const f = p(() => e ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600", [e]);
-    return /* @__PURE__ */ l("div", { className: a("relative w-full", m), children: [
-      s && /* @__PURE__ */ l(
+    error: t,
+    className: b,
+    rows: c = 4,
+    name: f,
+    ...x
+  }, m) => {
+    const h = _(() => e ? t ? "border-red-500 hover:border-red-500 focus:border-red-500 focus:shadow-[0_0_0_2px_rgba(231,0,11,0.25)]" : "border-neutral-200 hover:border-neutral-100 focus:border-blue-500 focus:shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))]" : t ? "border-red-600 focus:border-red-600 shadow-red" : "border-slate-200 hover:border-slate-400 focus:shadow-blue focus:border-blue-600", [e, t]);
+    return /* @__PURE__ */ s("div", { className: r("relative w-full", b), children: [
+      l && /* @__PURE__ */ s(
         "label",
         {
-          className: a(
+          className: r(
             "mb-2 block text-base font-medium",
-            e ? "text-red-600" : "text-slate-700"
+            t ? e ? "text-red-500" : "text-red-600" : e ? "text-neutral-50" : "text-slate-700"
           ),
           children: [
-            s,
-            n && /* @__PURE__ */ t("span", { className: "ml-1 text-red-600", children: "*" })
+            l,
+            u && /* @__PURE__ */ a("span", { className: "ml-1 text-red-600", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ a(
         "textarea",
         {
-          ref: c,
-          name: b,
-          rows: u,
-          value: o,
-          onChange: (x) => d?.(x.target.value),
+          ...x,
+          ref: m,
+          name: f,
+          rows: c,
+          value: d,
+          onChange: (p) => n?.(p.target.value),
           disabled: i,
-          placeholder: r,
-          className: a(
-            "w-full resize-none rounded-xl border bg-white text-base font-normal transition-all duration-300 ease-in-out outline-none",
-            "p-3 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400",
-            f
+          placeholder: o,
+          className: r(
+            "w-full resize-none rounded-xl border text-base font-normal transition-all duration-300 ease-in-out outline-none",
+            e ? "p-3 text-neutral-50 placeholder:text-neutral-100 focus:text-white disabled:cursor-not-allowed disabled:border-neutral-200 disabled:bg-neutral-300 disabled:text-neutral-100/50 disabled:placeholder:text-neutral-100/50" : "bg-white p-3 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400",
+            h
           )
         }
       ),
-      e && /* @__PURE__ */ t("p", { className: "mt-2 animate-[slideDown_0.3s_ease-out] text-sm font-normal text-red-600", children: e })
+      t && /* @__PURE__ */ a(
+        "p",
+        {
+          className: r(
+            "mt-2 animate-[slideDown_0.3s_ease-out] text-sm font-normal",
+            e ? "text-red-500" : "text-red-600"
+          ),
+          children: t
+        }
+      )
     ] });
   }
 );
-w.displayName = "MciTextarea";
+g.displayName = "MciTextarea";
 export {
-  w as default
+  g as default
 };

package/dist/shared/ui/mciToast/MciToast.js

@@ -1,69 +1,105 @@
-import { jsx as s, jsxs as f } from "react/jsx-runtime";
-import { useState as w, useEffect as C } from "react";
-import { cn as c } from "../../lib/utils.js";
-import I from "../../../assets/icons/close.svg.js";
-import { createRoot as b } from "react-dom/client";
-import { TOAST_STYLES as l, TOAST_ICONS as S, getOrCreateToastContainer as A } from "./mci-toast.utils.js";
-const O = A();
-let p = null, k = 0;
-const d = [], v = () => {
-  p || (p = b(O)), p.render(
-    /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: d.map(({ id: e, element: n }) => /* @__PURE__ */ s("div", { className: "pointer-events-auto", children: n }, e)) })
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+import { useState as b, useEffect as C } from "react";
+import { createRoot as I } from "react-dom/client";
+import S from "../../../assets/icons/close.svg.js";
+import { cn as a } from "../../lib/utils.js";
+import { TOAST_STYLES as r, TOAST_ICONS as A, getOrCreateToastContainer as D } from "./mci-toast.utils.js";
+const O = D();
+let p = null, F = 0;
+const m = [], N = () => {
+  p || (p = I(O)), p.render(
+    /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: m.map(({ id: e, element: t }) => /* @__PURE__ */ s("div", { className: "pointer-events-auto", children: t }, e)) })
   );
 };
-function F({
+function j({
   title: e,
-  description: n,
-  type: t = "info",
-  duration: i = 3e3,
-  action: o,
-  onClose: r
+  description: t,
+  type: n = "info",
+  duration: o = 3e3,
+  action: c,
+  darkMode: i = !1,
+  onClose: d
 }) {
-  const [y, u] = w(100);
+  const [T, h] = b(100);
   return C(() => {
-    if (i === 1 / 0) {
-      u(100);
+    if (o === 1 / 0) {
+      h(100);
       return;
     }
-    let m = null;
-    const h = (g) => {
-      m || (m = g);
-      const T = g - m, x = Math.max(0, (i - T) / i * 100);
-      u(x), x > 0 ? requestAnimationFrame(h) : r?.();
-    }, N = requestAnimationFrame(h);
-    return () => cancelAnimationFrame(N);
-  }, [i, r]), /* @__PURE__ */ f(
+    let f = null;
+    const x = (g) => {
+      f || (f = g);
+      const y = g - f, v = Math.max(0, (o - y) / o * 100);
+      h(v), v > 0 ? requestAnimationFrame(x) : d?.();
+    }, w = requestAnimationFrame(x);
+    return () => cancelAnimationFrame(w);
+  }, [o, d]), /* @__PURE__ */ u(
     "div",
     {
-      className: c(
-        "relative w-[300px] max-w-full overflow-hidden shadow-md rounded-lg",
+      className: a(
+        "relative w-[300px] max-w-full overflow-hidden rounded-lg shadow-md",
         "animate-in fade-in slide-in-from-top-2 duration-300",
-        l.bg[t]
+        i ? r.bgDark[n] : r.bg[n]
       ),
       children: [
         /* @__PURE__ */ s(
           "div",
           {
-            className: c("absolute bottom-0 left-0 h-1", l.line[t]),
+            className: a(
+              "absolute bottom-0 left-0 h-1",
+              i ? r.lineDark[n] : r.line[n]
+            ),
             style: {
-              width: `${y}%`,
+              width: `${T}%`,
               transition: "none"
             }
           }
         ),
-        /* @__PURE__ */ s("div", { className: "p-4", children: /* @__PURE__ */ f("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ s("div", { className: c("flex-shrink-0", l.text[t]), children: S[t] }),
-          /* @__PURE__ */ f("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ s("h4", { className: "text-base font-medium mb-1", children: e }),
-            n && /* @__PURE__ */ s("p", { className: "text-sm text-[#82828C]", children: n }),
-            o && /* @__PURE__ */ s("div", { className: "mt-3", children: /* @__PURE__ */ s("div", { className: c("underline font-medium text-sm", l.action[t]), children: o }) })
+        /* @__PURE__ */ s("div", { className: "p-4", children: /* @__PURE__ */ u("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: a(
+                "shrink-0",
+                i ? r.textDark[n] : r.text[n]
+              ),
+              children: A[n]
+            }
+          ),
+          /* @__PURE__ */ u("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ s(
+              "h4",
+              {
+                className: a(
+                  "mb-1 text-base font-medium",
+                  i && r.textDark[n]
+                ),
+                children: e
+              }
+            ),
+            t && /* @__PURE__ */ s("p", { className: a("text-sm", i ? "text-slate-400" : "text-[#82828C]"), children: t }),
+            c && /* @__PURE__ */ s("div", { className: "mt-3", children: /* @__PURE__ */ s(
+              "div",
+              {
+                className: a(
+                  "text-sm font-medium underline",
+                  i ? r.actionDark[n] : r.action[n]
+                ),
+                children: c
+              }
+            ) })
           ] }),
           /* @__PURE__ */ s(
             "button",
             {
-              onClick: r,
-              className: "flex-shrink-0 rounded-full transition  cursor-pointer active:animate-spin",
-              children: /* @__PURE__ */ s(I, { className: "w-6 h-6 text-slate-base" })
+              onClick: d,
+              className: "shrink-0 cursor-pointer rounded-full transition active:animate-spin",
+              children: /* @__PURE__ */ s(
+                S,
+                {
+                  className: a("h-6 w-6", i ? "text-slate-400" : "text-slate-base")
+                }
+              )
             }
           )
         ] }) })
@@ -71,36 +107,46 @@ function F({
     }
   );
 }
-const a = (e) => {
-  const n = k++, t = () => {
-    const o = d.findIndex((r) => r?.id === n);
-    o !== -1 && (d.splice(o, 1), v());
-  }, i = /* @__PURE__ */ s(F, { ...e, onClose: t });
-  return d.push({ id: n, element: i }), v(), e.duration !== 1 / 0 && setTimeout(t, (e.duration || 3e3) + 300), { close: t };
-}, P = {
-  success: (e, n, t) => a(typeof e == "string" ? { title: e, description: n, type: "success", action: t } : {
-    ...e,
-    type: "success"
-  }),
-  error: (e, n, t) => a(typeof e == "string" ? { title: e, description: n, type: "error", action: t } : {
-    ...e,
-    type: "error"
-  }),
-  warning: (e, n, t) => a(typeof e == "string" ? { title: e, description: n, type: "warning", action: t } : {
-    ...e,
-    type: "warning"
-  }),
-  info: (e, n, t) => a(typeof e == "string" ? { title: e, description: n, type: "info", action: t } : {
-    ...e,
-    type: "info"
-  }),
-  loading: (e, n) => a(typeof e == "string" ? {
-    title: e,
-    description: n,
-    type: "loading",
-    duration: 1 / 0
-  } : { ...e, type: "loading", duration: 1 / 0 })
+const l = (e) => {
+  const t = F++, n = () => {
+    const c = m.findIndex((i) => i?.id === t);
+    c !== -1 && (m.splice(c, 1), N());
+  }, o = /* @__PURE__ */ s(j, { ...e, onClose: n });
+  return m.push({ id: t, element: o }), N(), e.duration !== 1 / 0 && setTimeout(n, (e.duration || 3e3) + 300), { close: n };
+}, R = {
+  success: (e, t, n) => l(
+    typeof e == "string" ? { title: e, description: t, type: "success", action: n } : {
+      ...e,
+      type: "success"
+    }
+  ),
+  error: (e, t, n) => l(
+    typeof e == "string" ? { title: e, description: t, type: "error", action: n } : {
+      ...e,
+      type: "error"
+    }
+  ),
+  warning: (e, t, n) => l(
+    typeof e == "string" ? { title: e, description: t, type: "warning", action: n } : {
+      ...e,
+      type: "warning"
+    }
+  ),
+  info: (e, t, n) => l(
+    typeof e == "string" ? { title: e, description: t, type: "info", action: n } : {
+      ...e,
+      type: "info"
+    }
+  ),
+  loading: (e, t) => l(
+    typeof e == "string" ? {
+      title: e,
+      description: t,
+      type: "loading",
+      duration: 1 / 0
+    } : { ...e, type: "loading", duration: 1 / 0 }
+  )
 };
 export {
-  P as default
+  R as default
 };