@mci-ui/mci-ui 0.0.98 → 0.0.99

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

@@ -1,68 +1,69 @@
 import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import { useState as g, useRef as y, useCallback as _, useEffect as v, useMemo as $ } from "react";
+import { useState as y, useRef as S, useCallback as F, useEffect as v, useMemo as q } from "react";
 import { cn as n } from "../../lib/utils.js";
-import k from "./TabCountBadge.js";
-const F = {
+import B from "./TabCountBadge.js";
+const W = {
   top: "flex-col",
   bottom: "flex-col-reverse",
   left: "flex-row",
   right: "flex-row-reverse"
-}, q = {
+}, D = {
   top: "flex-row",
   bottom: "flex-row",
   left: "flex-col",
   right: "flex-col"
-}, B = {
+}, H = {
   top: "mt-4",
   bottom: "mb-4",
   left: "ml-4",
   right: "mr-4"
 };
-function G({
+function Q({
   tabs: t,
-  defaultTab: b,
-  position: f = "top",
+  defaultTab: C,
+  activeTab: w,
+  position: a = "top",
   darkMode: u = !1,
-  className: S,
+  className: E,
   width: r,
-  tabListClassName: E,
+  tabListClassName: T,
   contentClassName: A,
-  extra: w,
-  onChange: C
+  extra: h,
+  onChange: z
 }) {
-  const [s, T] = g(b || t[0]?.id), [z, L] = g({}), d = y([]), h = y(null), o = _(() => {
+  const [L, I] = y(C || t[0]?.id), p = w !== void 0, s = p ? w : L, [R, O] = y({}), d = S([]), N = S(null), o = F(() => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        const e = t.findIndex((j) => j?.id === s), i = d.current[e];
+        const e = t.findIndex((k) => k?.id === s), i = d.current[e];
         if (!i) return;
-        const { offsetLeft: a, offsetTop: x, offsetWidth: I, offsetHeight: O } = i;
-        L({
-          left: `${a}px`,
+        const { offsetLeft: f, offsetTop: x, offsetWidth: _, offsetHeight: $ } = i;
+        O({
+          left: `${f}px`,
           top: `${x}px`,
-          width: `${I}px`,
-          height: `${O}px`,
+          width: `${_}px`,
+          height: `${$}px`,
           transition: "all 0.35s cubic-bezier(0.25, 1, 0.5, 1)"
         });
       });
     });
   }, [s, t]);
-  v(() => (o(), window.addEventListener("resize", o), "fonts" in document && document.fonts.ready.then(o), () => window.removeEventListener("resize", o)), [f, o]), v(() => {
-    const e = h.current;
+  v(() => (o(), window.addEventListener("resize", o), "fonts" in document && document.fonts.ready.then(o), () => window.removeEventListener("resize", o)), [a, o]), v(() => {
+    const e = N.current;
     if (!e || typeof ResizeObserver > "u") return;
     const i = new ResizeObserver(() => {
       o();
     });
-    return i.observe(e), d.current.forEach((a) => {
-      a && i.observe(a);
+    return i.observe(e), d.current.forEach((f) => {
+      f && i.observe(f);
     }), () => i.disconnect();
   }, [t, o]), v(() => {
     d.current = d.current.slice(0, t.length);
   }, [t]);
-  const c = f === "left" || f === "right", p = typeof r == "string" && r.startsWith("w-") ? r : void 0, N = p ? void 0 : r, R = $(
+  const c = a === "left" || a === "right", g = typeof r == "string" && r.startsWith("w-") ? r : void 0, b = g ? void 0 : r, j = q(
     () => t.find((e) => e.id === s)?.content,
     [s, t]
   );
-  return /* @__PURE__ */ m("div", { className: n("flex w-full", F[f], S), children: [
+  return /* @__PURE__ */ m("div", { className: n("flex w-full", W[a], E), children: [
     /* @__PURE__ */ m(
       "div",
       {
@@ -77,20 +78,20 @@ function G({
               className: n(
                 r ? "flex-none" : "flex-1",
                 c ? "w-full" : !r && "min-w-[520px]",
-                p
+                g
               ),
-              style: N !== void 0 ? { width: N } : void 0,
+              style: b !== void 0 ? { width: b } : void 0,
               children: /* @__PURE__ */ m(
                 "div",
                 {
-                  ref: h,
+                  ref: N,
                   className: n(
                     "relative flex rounded-xl p-1",
                     u ? "bg-neutral-300" : "bg-slate-100",
-                    q[f],
+                    D[a],
                     !c && [!r && "w-full", "overflow-hidden"],
                     c ? "min-w-48" : "",
-                    E
+                    T
                   ),
                   children: [
                     /* @__PURE__ */ l(
@@ -101,11 +102,11 @@ function G({
                           u ? "bg-black" : "bg-white",
                           c ? "w-full" : "h-full"
                         ),
-                        style: z
+                        style: R
                       }
                     ),
                     t?.map((e, i) => {
-                      const a = s === e.id;
+                      const f = s === e.id;
                       return /* @__PURE__ */ m(
                         "button",
                         {
@@ -113,7 +114,7 @@ function G({
                             d.current[i] = x;
                           },
                           onClick: () => {
-                            e?.disabled || (T(e?.id), C?.(e?.id));
+                            e?.disabled || (p || I(e?.id), z?.(e?.id));
                           },
                           disabled: e?.disabled,
                           className: n(
@@ -128,13 +129,13 @@ function G({
                               {
                                 className: n(
                                   "shrink-0 transition-transform duration-200",
-                                  a && "scale-110"
+                                  f && "scale-110"
                                 ),
                                 children: e?.icon
                               }
                             ),
                             /* @__PURE__ */ l("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label }),
-                            /* @__PURE__ */ l(k, { count: e?.count })
+                            /* @__PURE__ */ l(B, { count: e?.count })
                           ]
                         },
                         e?.id
@@ -145,16 +146,16 @@ function G({
               )
             }
           ),
-          w && /* @__PURE__ */ l("div", { className: n("ml-auto shrink-0", c ? "w-full" : "max-w-full"), children: /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center justify-end gap-2", children: w }) })
+          h && /* @__PURE__ */ l("div", { className: n("ml-auto shrink-0", c ? "w-full" : "max-w-full"), children: /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center justify-end gap-2", children: h }) })
         ]
       }
     ),
-    R && /* @__PURE__ */ l(
+    j && /* @__PURE__ */ l(
       "div",
       {
         className: n(
           "w-full flex-1 overflow-hidden",
-          B[f],
+          H[a],
           A
         ),
         children: /* @__PURE__ */ l(
@@ -171,5 +172,5 @@ function G({
   ] });
 }
 export {
-  G as default
+  Q as default
 };

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

@@ -1,49 +1,50 @@
 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 { useState as b, useRef as T, useEffect as O, useMemo as j } from "react";
 import { cn as i } from "../../lib/utils.js";
 import A from "./TabCountBadge.js";
-const _ = ({
+const z = ({
   tabs: e,
-  className: b,
-  contentClassName: p,
+  className: p,
+  contentClassName: w,
   darkMode: l,
-  defaultTab: T,
-  onChange: w,
-  tabClassName: B,
-  tabListClassName: v,
+  defaultTab: B,
+  activeTab: d,
+  onChange: v,
+  tabClassName: y,
+  tabListClassName: C,
   color: r = "orange"
 }) => {
-  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;
+  const [R, k] = b(B || e[0]?.id), g = d !== void 0, n = g ? d : R, [u, N] = b({ left: 0, width: 0 }), h = T({}), f = T(null);
+  O(() => {
+    const t = h.current[n], o = f.current;
     if (t && o) {
-      const k = o.getBoundingClientRect().left, x = t.getBoundingClientRect();
-      C({
-        left: x.left - k,
-        width: x.width
+      const L = o.getBoundingClientRect().left, m = t.getBoundingClientRect();
+      N({
+        left: m.left - L,
+        width: m.width
       });
     }
   }, [n, e]);
-  const R = (t) => {
-    y(t), w?.(t);
-  }, h = S(
+  const S = (t) => {
+    g || k(t), v?.(t);
+  }, x = j(
     () => e.find((t) => t.id === n)?.content,
     [n, e]
   );
-  return /* @__PURE__ */ c("div", { className: i("space-y-4", b), children: [
-    /* @__PURE__ */ c("div", { ref: u, className: i("relative flex", v), children: [
+  return /* @__PURE__ */ c("div", { className: i("space-y-4", p), children: [
+    /* @__PURE__ */ c("div", { ref: f, className: i("relative flex", C), children: [
       e.map((t) => /* @__PURE__ */ c(
         "button",
         {
           ref: (o) => {
-            g.current[t.id] = o;
+            h.current[t.id] = o;
           },
-          onClick: () => R(t.id),
+          onClick: () => S(t.id),
           className: i(
             "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",
-            B
+            y
           ),
           children: [
             /* @__PURE__ */ a("span", { className: "truncate", children: t.label }),
@@ -59,11 +60,11 @@ const _ = ({
             "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: d.left, width: d.width }
+          style: { left: u.left, width: u.width }
         }
       )
     ] }),
-    h && /* @__PURE__ */ a("div", { className: i("mt-4", p), children: h })
+    x && /* @__PURE__ */ a("div", { className: i("mt-4", w), children: x })
   ] });
 }, s = {
   orange: {
@@ -86,5 +87,5 @@ const _ = ({
   }
 };
 export {
-  _ as default
+  z as default
 };

package/dist/types/shared/types/ui/tabs.types.d.ts

@@ -15,6 +15,7 @@ export type TabsProps = {
     variant?: TabsVariant;
     color?: TabsColor;
     defaultTab?: string;
+    activeTab?: string;
     position?: TabsPosition;
     darkMode?: boolean;
     className?: string;

package/dist/types/shared/ui/mciTabs/FilledTabs.d.ts

@@ -1,2 +1,2 @@
 import { TabsProps } from '../../types/ui/tabs.types';
-export default function FilledTabs({ tabs, defaultTab, position, darkMode, className, width, tabListClassName, contentClassName, extra, onChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function FilledTabs({ tabs, defaultTab, activeTab: activeTabProp, position, darkMode, className, width, tabListClassName, contentClassName, extra, onChange, }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/ui/mciTabs/OutlinedTabs.d.ts

@@ -1,3 +1,3 @@
 import { TabsProps } from '../../types/ui';
-declare const OutlinedTabs: ({ tabs, className, contentClassName, darkMode, defaultTab, onChange, tabClassName, tabListClassName, color, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const OutlinedTabs: ({ tabs, className, contentClassName, darkMode, defaultTab, activeTab: activeTabProp, onChange, tabClassName, tabListClassName, color, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default OutlinedTabs;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mci-ui/mci-ui",
   "private": false,
-  "version": "0.0.98",
+  "version": "0.0.99",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",