@mci-ui/mci-ui 0.0.94 → 0.0.96

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

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

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

@@ -1,50 +1,54 @@
-import { jsxs as x, jsx as a } from "react/jsx-runtime";
-import { useState as f, useRef as m, useEffect as S, useMemo as N } from "react";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useState as f, useRef as m, useEffect as N, useMemo as S } from "react";
 import { cn as i } from "../../lib/utils.js";
-const j = ({
+import A from "./TabCountBadge.js";
+const _ = ({
   tabs: e,
   className: b,
   contentClassName: p,
   darkMode: l,
-  defaultTab: w,
-  onChange: T,
-  tabClassName: v,
-  tabListClassName: y,
+  defaultTab: T,
+  onChange: w,
+  tabClassName: B,
+  tabListClassName: v,
   color: r = "orange"
 }) => {
-  const [n, B] = f(w || e[0]?.id), [c, C] = f({ left: 0, width: 0 }), d = m({}), g = m(null);
-  S(() => {
-    const t = d.current[n], o = g.current;
+  const [n, y] = f(T || e[0]?.id), [d, C] = f({ left: 0, width: 0 }), g = m({}), u = m(null);
+  N(() => {
+    const t = g.current[n], o = u.current;
     if (t && o) {
-      const k = o.getBoundingClientRect().left, u = t.getBoundingClientRect();
+      const k = o.getBoundingClientRect().left, x = t.getBoundingClientRect();
       C({
-        left: u.left - k,
-        width: u.width
+        left: x.left - k,
+        width: x.width
       });
     }
   }, [n, e]);
   const R = (t) => {
-    B(t), T?.(t);
-  }, h = N(
+    y(t), w?.(t);
+  }, h = S(
     () => e.find((t) => t.id === n)?.content,
     [n, e]
   );
-  return /* @__PURE__ */ x("div", { className: i("space-y-4", b), children: [
-    /* @__PURE__ */ x("div", { ref: g, className: i("relative flex", y), children: [
-      e.map((t) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ c("div", { className: i("space-y-4", b), children: [
+    /* @__PURE__ */ c("div", { ref: u, className: i("relative flex", v), children: [
+      e.map((t) => /* @__PURE__ */ c(
         "button",
         {
           ref: (o) => {
-            d.current[t.id] = o;
+            g.current[t.id] = o;
           },
           onClick: () => R(t.id),
           className: i(
-            "cursor-pointer truncate border-b-2 px-3 py-2 text-sm font-medium transition-colors",
+            "flex cursor-pointer items-center truncate border-b-2 px-3 py-2 text-sm font-medium transition-colors",
             l ? "border-slate-200/20" : "border-slate-200",
             n === t.id ? l ? s[r].darkText : s[r].lightText : l ? "text-slate-200/70 hover:text-slate-100" : "hover:text-primary text-slate-400",
-            v
+            B
           ),
-          children: t.label
+          children: [
+            /* @__PURE__ */ a("span", { className: "truncate", children: t.label }),
+            /* @__PURE__ */ a(A, { count: t.count })
+          ]
         },
         t.id
       )),
@@ -55,7 +59,7 @@ const j = ({
             "pointer-events-none absolute bottom-0 h-0.5 transition-all duration-300 ease-in-out",
             l ? s[r].darkBg : s[r].lightBg
           ),
-          style: { left: c.left, width: c.width }
+          style: { left: d.left, width: d.width }
         }
       )
     ] }),
@@ -82,5 +86,5 @@ const j = ({
   }
 };
 export {
-  j as default
+  _ as default
 };

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

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../lib/utils.js";
+function o({ count: t }) {
+  if (t == null) return null;
+  const e = String(t), n = e.length < 3;
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: l(
+        "ml-2 flex h-4 shrink-0 items-center justify-center rounded-full bg-orange-600 text-[10px] font-medium whitespace-nowrap text-white tabular-nums",
+        n ? "w-4" : "min-w-4 px-1.5"
+      ),
+      children: e
+    }
+  );
+}
+export {
+  o as default
+};

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

@@ -1,5 +1,5 @@
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import { cn as s } from "../../lib/utils.js";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { cn as l } from "../../lib/utils.js";
 const d = {
   sm: "px-2 py-0.5",
   md: "px-2 py-1",
@@ -8,48 +8,48 @@ const d = {
   sm: "w-3 h-3",
   md: "w-3 h-3",
   lg: "w-3 h-3"
-}, b = {
+}, i = {
   success: "bg-green-50 text-green-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 = {
+}, o = {
   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({
+function f({
   children: g,
   variant: r = "success",
   size: t = "lg",
   darkMode: x = !1,
   icon: e,
   iconPosition: a = "left",
-  rounded: u = !1,
-  className: c
+  rounded: c = !1,
+  className: m
 }) {
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ u(
     "span",
     {
-      className: s(
-        "inline-flex animate-[fadeIn_0.3s_ease-out] items-center text-extra-small font-medium",
-        u ? "rounded-full" : "rounded-lg",
+      className: l(
+        "inline-flex max-w-full animate-[fadeIn_0.3s_ease-out] items-center overflow-hidden whitespace-nowrap text-extra-small font-medium",
+        c ? "rounded-full" : "rounded-lg",
         d[t],
-        x ? p[r] : b[r],
+        x ? o[r] : i[r],
         e && "gap-[2px]",
-        c
+        m
       ),
       children: [
-        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 })
+        e && a === "left" && /* @__PURE__ */ s("span", { className: `flex shrink-0 items-center ${l(n[t])}`, children: e }),
+        /* @__PURE__ */ s("span", { className: "min-w-0 truncate", children: g }),
+        e && a === "right" && /* @__PURE__ */ s("span", { className: `flex shrink-0 items-center ${l(n[t])}`, children: e })
       ]
     }
   );
 }
 export {
-  i as default
+  f as default
 };

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

@@ -13,8 +13,8 @@ const g = w(
     error: t,
     className: b,
     rows: c = 4,
-    name: f,
-    ...x
+    name: x,
+    ...f
   }, 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: [
@@ -34,16 +34,16 @@ const g = w(
       /* @__PURE__ */ a(
         "textarea",
         {
-          ...x,
+          ...f,
           ref: m,
-          name: f,
+          name: x,
           rows: c,
           value: d,
           onChange: (p) => n?.(p.target.value),
           disabled: i,
           placeholder: o,
           className: r(
-            "w-full resize-none rounded-xl border text-base font-normal transition-all duration-300 ease-in-out outline-none",
+            "w-full resize-none rounded-xl border text-base font-normal transition-all duration-300 ease-in-out outline-none cursor-text",
             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
           )