@mci-ui/mci-ui 0.0.87 → 0.0.89

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

@@ -1,112 +1,123 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import { useState as w, useRef as C, useCallback as I, useEffect as h } 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 L = {
+const I = {
   top: "flex-col",
   bottom: "flex-col-reverse",
   left: "flex-row",
   right: "flex-row-reverse"
-}, j = {
+}, O = {
   top: "flex-row",
   bottom: "flex-row",
   left: "flex-col",
   right: "flex-col"
-}, z = {
+}, j = {
   top: "mt-4",
   bottom: "mb-4",
   left: "ml-4",
   right: "mr-4"
 };
-function k({
-  tabs: i,
-  defaultTab: p,
-  position: r = "top",
-  darkMode: a = !1,
-  className: v,
-  tabListClassName: N,
-  contentClassName: g,
-  extra: x,
-  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, b] = w(p || i[0]?.id), [y, E] = w({}), f = C([]), c = I(() => {
+  const [a, E] = v(N || l[0]?.id), [A, T] = v({}), f = p([]), h = p(null), n = R(() => {
     requestAnimationFrame(() => {
-      const e = i.findIndex((o) => o?.id === s), d = f.current[e];
-      if (d) {
-        const { offsetLeft: o, offsetTop: m, offsetWidth: T, offsetHeight: A } = d;
-        E({
+      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]);
-  h(() => (c(), window.addEventListener("resize", c), "fonts" in document && document.fonts.ready.then(c), () => window.removeEventListener("resize", c)), [r, c]), h(() => {
-    f.current = f.current.slice(0, i.length);
-  }, [i]);
-  const n = r === "left" || r === "right";
-  return /* @__PURE__ */ u("div", { className: t("flex w-full", L[r], v), children: [
+    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",
-          n ? "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",
-                n ? "w-full" : "min-w-[520px]"
+                s ? "w-full" : "min-w-[520px]"
               ),
               children: /* @__PURE__ */ u(
                 "div",
                 {
+                  ref: h,
                   className: t(
                     "relative flex rounded-xl p-1",
-                    a ? "bg-neutral-300" : "bg-slate-100",
-                    j[r],
-                    !n && "w-full overflow-hidden",
-                    n ? "min-w-48" : "",
-                    N
+                    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",
-                          a ? "bg-black" : "bg-white",
-                          n ? "w-full" : "h-full"
+                          d ? "bg-black" : "bg-white",
+                          s ? "w-full" : "h-full"
                         ),
-                        style: y
+                        style: A
                       }
                     ),
-                    i?.map((e, d) => {
-                      const o = s === e.id;
+                    l?.map((e, r) => {
+                      const o = a === e.id;
                       return /* @__PURE__ */ u(
                         "button",
                         {
                           ref: (m) => {
-                            f.current[d] = m;
+                            f.current[r] = m;
                           },
                           onClick: () => {
-                            e?.disabled || (b(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 transition-colors duration-300 hover:cursor-pointer",
-                            a ? "text-white" : "text-black",
-                            e?.disabled && (a ? "cursor-not-allowed text-neutral-100/50 opacity-60" : "cursor-not-allowed opacity-50"),
-                            n ? "w-full justify-start" : "flex-1 min-w-0"
+                            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", o && "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
@@ -117,22 +128,22 @@ function k({
               )
             }
           ),
-          x && /* @__PURE__ */ l(
+          w && /* @__PURE__ */ i(
             "div",
             {
               className: t(
                 "shrink-0 ml-auto",
-                n ? "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: x })
+              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", z[r], g), 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 {
-  k as default
+  q as default
 };

package/dist/shared/ui/mciToggle/MciToggle.js

@@ -1,5 +1,5 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { cn as n } from "../../lib/utils.js";
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { cn as r } from "../../lib/utils.js";
 const b = {
   blue: {
     active: "bg-blue-600",
@@ -14,79 +14,87 @@ const b = {
     focus: "focus:ring-2 focus:ring-yellow-200",
     darkActive: "bg-yellow-500",
     darkHover: "hover:bg-yellow-500"
+  },
+  orange: {
+    active: "bg-orange-600",
+    hover: "hover:bg-orange-600",
+    focus: "focus:ring-2 focus:ring-[rgba(227,98,12,0.25)]",
+    darkActive: "bg-orange-600",
+    darkHover: "hover:bg-orange-600"
   }
 };
 function m({
-  checked: l = !1,
-  onChange: i,
-  disabled: t = !1,
-  variant: s = "yellow",
-  darkMode: e = !1,
-  label: a,
-  supportText: u,
-  className: g,
-  ...f
+  checked: o = !1,
+  onChange: c,
+  disabled: e = !1,
+  variant: n = "orange",
+  darkMode: t = !1,
+  label: s,
+  supportText: g,
+  className: i,
+  ...v
 }) {
-  const v = () => {
-    t || i?.(!l);
-  }, o = b[s];
-  return /* @__PURE__ */ c(
+  const f = () => {
+    e || c?.(!o);
+  }, l = b[n];
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: n(
+      className: r(
         "flex items-start gap-3 select-none",
-        g
+        i
       ),
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "button",
           {
-            ...f,
+            ...v,
             type: "button",
-            disabled: t,
-            onClick: v,
-            className: n(
+            disabled: e,
+            onClick: f,
+            className: r(
               "relative h-6 w-11 rounded-xl transition-all duration-300 outline-none",
-              t ? "cursor-not-allowed" : "cursor-pointer",
-              l ? e ? o.darkActive : o.active : e ? "bg-neutral-200" : "bg-slate-200",
-              !t && l && (e ? o.darkHover : o.hover),
-              !t && !l && (e ? "hover:bg-neutral-100" : "hover:bg-slate-300"),
-              !t && o.focus,
-              e && !t && s === "blue" && "focus-visible:shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))]",
-              e && !t && s === "yellow" && "focus-visible:ring-2 focus-visible:ring-yellow-300/40",
-              t && (e ? "bg-neutral-200/60" : "bg-slate-100")
+              e ? "cursor-not-allowed" : "cursor-pointer",
+              o ? t ? l.darkActive : l.active : t ? "bg-neutral-200" : "bg-slate-200",
+              !e && o && (t ? l.darkHover : l.hover),
+              !e && !o && (t ? "hover:bg-neutral-100" : "hover:bg-slate-300"),
+              !e && l.focus,
+              t && !e && n === "blue" && "focus-visible:shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))]",
+              t && !e && n === "yellow" && "focus-visible:ring-2 focus-visible:ring-yellow-300/40",
+              t && !e && n === "orange" && "focus-visible:ring-2 focus-visible:ring-[rgba(227,98,12,0.25)]",
+              e && (t ? "bg-neutral-200/60" : "bg-slate-100")
             ),
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ a(
               "span",
               {
-                className: n(
+                className: r(
                   "absolute top-1/2 left-0.5 h-5 w-5 -translate-y-1/2 rounded-full transition-all duration-300",
-                  e ? "bg-black" : "bg-white",
-                  l && "translate-x-5"
+                  t ? "bg-black" : "bg-white",
+                  o && "translate-x-5"
                 )
               }
             )
           }
         ),
-        (a || u) && /* @__PURE__ */ c("div", { className: "flex flex-col leading-tight", children: [
-          a && /* @__PURE__ */ r(
+        (s || g) && /* @__PURE__ */ u("div", { className: "flex flex-col leading-tight", children: [
+          s && /* @__PURE__ */ a(
             "span",
             {
-              className: n(
+              className: r(
                 "text-base font-medium",
-                e ? t ? "text-neutral-50/50" : "text-neutral-50" : t ? "text-slate-400" : "text-black"
+                t ? e ? "text-neutral-50/50" : "text-neutral-50" : e ? "text-slate-400" : "text-black"
               ),
-              children: a
+              children: s
             }
           ),
-          u && /* @__PURE__ */ r(
+          g && /* @__PURE__ */ a(
             "span",
             {
-              className: n(
+              className: r(
                 "text-sm font-normal",
-                e ? t ? "text-neutral-100/50" : "text-neutral-100" : t ? "text-slate-400" : "text-slate-500"
+                t ? e ? "text-neutral-100/50" : "text-neutral-100" : e ? "text-slate-400" : "text-slate-500"
               ),
-              children: u
+              children: g
             }
           )
         ] })