@mci-ui/mci-ui 0.0.88 → 0.0.90

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

@@ -0,0 +1,86 @@
+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 { cn as i } from "../../lib/utils.js";
+const j = ({
+  tabs: e,
+  className: b,
+  contentClassName: p,
+  darkMode: l,
+  defaultTab: w,
+  onChange: T,
+  tabClassName: v,
+  tabListClassName: y,
+  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;
+    if (t && o) {
+      const k = o.getBoundingClientRect().left, u = t.getBoundingClientRect();
+      C({
+        left: u.left - k,
+        width: u.width
+      });
+    }
+  }, [n, e]);
+  const R = (t) => {
+    B(t), T?.(t);
+  }, h = N(
+    () => 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(
+        "button",
+        {
+          ref: (o) => {
+            d.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",
+            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
+          ),
+          children: t.label
+        },
+        t.id
+      )),
+      /* @__PURE__ */ a(
+        "span",
+        {
+          className: i(
+            "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 }
+        }
+      )
+    ] }),
+    h && /* @__PURE__ */ a("div", { className: i("mt-4", p), children: h })
+  ] });
+}, s = {
+  orange: {
+    darkText: "text-white",
+    lightText: "text-orange-600",
+    darkBg: "bg-orange-400",
+    lightBg: "bg-orange-600"
+  },
+  blue: {
+    darkText: "text-white",
+    lightText: "text-blue-600",
+    darkBg: "bg-blue-400",
+    lightBg: "bg-blue-600"
+  },
+  yellow: {
+    darkText: "text-white",
+    lightText: "text-yellow-500",
+    darkBg: "bg-yellow-400",
+    lightBg: "bg-yellow-500"
+  }
+};
+export {
+  j 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
             }
           )
         ] })