@mci-ui/mci-ui 0.0.93 → 0.0.95

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

@@ -1,29 +1,30 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { jsxs as u, jsx as l } 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 { cn as n } from "../../lib/utils.js";
+import j from "./TabCountBadge.js";
+const _ = {
   top: "flex-col",
   bottom: "flex-col-reverse",
   left: "flex-row",
   right: "flex-row-reverse"
-}, _ = {
+}, $ = {
   top: "flex-row",
   bottom: "flex-row",
   left: "flex-col",
   right: "flex-col"
-}, $ = {
+}, k = {
   top: "mt-4",
   bottom: "mb-4",
   left: "ml-4",
   right: "mr-4"
 };
-function B({
+function H({
   tabs: t,
   defaultTab: N,
   position: c = "top",
   darkMode: d = !1,
-  className: b,
-  tabListClassName: g,
+  className: g,
+  tabListClassName: b,
   contentClassName: S,
   extra: w,
   onChange: y
@@ -31,9 +32,9 @@ function B({
   const [i, E] = v(N || t[0]?.id), [A, T] = v({}), a = p([]), h = p(null), s = I(() => {
     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;
+        const e = t.findIndex((R) => R?.id === i), r = a.current[e];
+        if (!r) return;
+        const { offsetLeft: f, offsetTop: m, offsetWidth: z, offsetHeight: L } = r;
         T({
           left: `${f}px`,
           top: `${m}px`,
@@ -47,12 +48,12 @@ function B({
   x(() => (s(), window.addEventListener("resize", s), "fonts" in document && document.fonts.ready.then(s), () => window.removeEventListener("resize", s)), [c, s]), x(() => {
     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();
+    return r.observe(e), a.current.forEach((f) => {
+      f && r.observe(f);
+    }), () => r.disconnect();
   }, [t, s]), x(() => {
     a.current = a.current.slice(0, t.length);
   }, [t]);
@@ -60,32 +61,32 @@ function B({
     () => t.find((e) => e.id === i)?.content,
     [i, t]
   );
-  return /* @__PURE__ */ u("div", { className: l("flex w-full", j[c], b), children: [
+  return /* @__PURE__ */ u("div", { className: n("flex w-full", _[c], g), children: [
     /* @__PURE__ */ u(
       "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", { className: n("flex-1", o ? "w-full" : "min-w-[520px]"), children: /* @__PURE__ */ u(
             "div",
             {
               ref: h,
-              className: l(
+              className: n(
                 "relative flex rounded-xl p-1",
                 d ? "bg-neutral-300" : "bg-slate-100",
-                _[c],
+                $[c],
                 !o && "w-full overflow-hidden",
                 o ? "min-w-48" : "",
-                g
+                b
               ),
               children: [
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ l(
                   "div",
                   {
-                    className: l(
+                    className: n(
                       "absolute rounded-lg",
                       d ? "bg-black" : "bg-white",
                       o ? "w-full" : "h-full"
@@ -93,36 +94,37 @@ function B({
                     style: A
                   }
                 ),
-                t?.map((e, n) => {
+                t?.map((e, r) => {
                   const f = i === e.id;
                   return /* @__PURE__ */ u(
                     "button",
                     {
                       ref: (m) => {
-                        a.current[n] = m;
+                        a.current[r] = 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",
+                      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__ */ r(
+                        e?.icon && /* @__PURE__ */ l(
                           "span",
                           {
-                            className: l(
+                            className: n(
                               "shrink-0 transition-transform duration-200",
                               f && "scale-110"
                             ),
                             children: e?.icon
                           }
                         ),
-                        /* @__PURE__ */ r("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label })
+                        /* @__PURE__ */ l("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label }),
+                        /* @__PURE__ */ l(j, { count: e?.count })
                       ]
                     },
                     e?.id
@@ -131,19 +133,19 @@ function B({
               ]
             }
           ) }),
-          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(
+    C && /* @__PURE__ */ l(
       "div",
       {
-        className: l(
+        className: n(
           "w-full flex-1 overflow-hidden",
-          $[c],
+          k[c],
           S
         ),
-        children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ l(
           "div",
           {
             className: "w-full animate-fade-in",
@@ -157,5 +159,5 @@ function B({
   ] });
 }
 export {
-  B as default
+  H 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
           )