@mci-ui/mci-ui 0.0.96 → 0.0.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/shared/ui/mciTabs/FilledTabs.js +66 -65
  2. package/package.json +1 -1
package/dist/shared/ui/mciTabs/FilledTabs.js CHANGED
@@ -1,95 +1,96 @@
1
1
  import { jsxs as m, jsx as l } from "react/jsx-runtime";
2
- import { useState as p, useRef as N, useCallback as O, useEffect as v, useMemo as j } from "react";
2
+ import { useState as g, useRef as y, useCallback as _, useEffect as v, useMemo as $ } from "react";
3
3
  import { cn as n } from "../../lib/utils.js";
4
- import _ from "./TabCountBadge.js";
5
- const $ = {
4
+ import k from "./TabCountBadge.js";
5
+ const F = {
6
6
  top: "flex-col",
7
7
  bottom: "flex-col-reverse",
8
8
  left: "flex-row",
9
9
  right: "flex-row-reverse"
10
- }, k = {
10
+ }, q = {
11
11
  top: "flex-row",
12
12
  bottom: "flex-row",
13
13
  left: "flex-col",
14
14
  right: "flex-col"
15
- }, F = {
15
+ }, B = {
16
16
  top: "mt-4",
17
17
  bottom: "mb-4",
18
18
  left: "ml-4",
19
19
  right: "mr-4"
20
20
  };
21
- function V({
21
+ function G({
22
22
  tabs: t,
23
- defaultTab: g,
24
- position: c = "top",
25
- darkMode: d = !1,
26
- className: b,
27
- width: u,
28
- tabListClassName: y,
29
- contentClassName: S,
23
+ defaultTab: b,
24
+ position: f = "top",
25
+ darkMode: u = !1,
26
+ className: S,
27
+ width: r,
28
+ tabListClassName: E,
29
+ contentClassName: A,
30
30
  extra: w,
31
- onChange: E
31
+ onChange: C
32
32
  }) {
33
- const [i, A] = p(g || t[0]?.id), [T, C] = p({}), a = N([]), h = N(null), s = O(() => {
33
+ const [s, T] = g(b || t[0]?.id), [z, L] = g({}), d = y([]), p = y(null), o = _(() => {
34
34
  requestAnimationFrame(() => {
35
35
  requestAnimationFrame(() => {
36
- const e = t.findIndex((I) => I?.id === i), r = a.current[e];
37
- if (!r) return;
38
- const { offsetLeft: f, offsetTop: x, offsetWidth: L, offsetHeight: R } = r;
39
- C({
40
- left: `${f}px`,
36
+ const e = t.findIndex((j) => j?.id === s), i = d.current[e];
37
+ if (!i) return;
38
+ const { offsetLeft: a, offsetTop: x, offsetWidth: I, offsetHeight: O } = i;
39
+ L({
40
+ left: `${a}px`,
41
41
  top: `${x}px`,
42
- width: `${L}px`,
43
- height: `${R}px`,
42
+ width: `${I}px`,
43
+ height: `${O}px`,
44
44
  transition: "all 0.35s cubic-bezier(0.25, 1, 0.5, 1)"
45
45
  });
46
46
  });
47
47
  });
48
- }, [i, t]);
49
- v(() => (s(), window.addEventListener("resize", s), "fonts" in document && document.fonts.ready.then(s), () => window.removeEventListener("resize", s)), [c, s]), v(() => {
50
- const e = h.current;
48
+ }, [s, t]);
49
+ v(() => (o(), window.addEventListener("resize", o), "fonts" in document && document.fonts.ready.then(o), () => window.removeEventListener("resize", o)), [f, o]), v(() => {
50
+ const e = p.current;
51
51
  if (!e || typeof ResizeObserver > "u") return;
52
- const r = new ResizeObserver(() => {
53
- s();
52
+ const i = new ResizeObserver(() => {
53
+ o();
54
54
  });
55
- return r.observe(e), a.current.forEach((f) => {
56
- f && r.observe(f);
57
- }), () => r.disconnect();
58
- }, [t, s]), v(() => {
59
- a.current = a.current.slice(0, t.length);
55
+ return i.observe(e), d.current.forEach((a) => {
56
+ a && i.observe(a);
57
+ }), () => i.disconnect();
58
+ }, [t, o]), v(() => {
59
+ d.current = d.current.slice(0, t.length);
60
60
  }, [t]);
61
- const o = c === "left" || c === "right", z = j(
62
- () => t.find((e) => e.id === i)?.content,
63
- [i, t]
61
+ const c = f === "left" || f === "right", h = typeof r == "string" && r.startsWith("w-") ? r : void 0, N = h ? void 0 : r, R = $(
62
+ () => t.find((e) => e.id === s)?.content,
63
+ [s, t]
64
64
  );
65
- return /* @__PURE__ */ m("div", { className: n("flex w-full", $[c], b), children: [
65
+ return /* @__PURE__ */ m("div", { className: n("flex w-full", F[f], S), children: [
66
66
  /* @__PURE__ */ m(
67
67
  "div",
68
68
  {
69
69
  className: n(
70
70
  "flex w-full gap-4",
71
- o ? "flex-col items-start" : "flex-row flex-wrap items-center"
71
+ c ? "flex-col items-start" : "flex-row flex-wrap items-center"
72
72
  ),
73
73
  children: [
74
74
  /* @__PURE__ */ l(
75
75
  "div",
76
76
  {
77
77
  className: n(
78
- u ? "flex-none" : "flex-1",
79
- o ? "w-full" : !u && "min-w-[520px]"
78
+ r ? "flex-none" : "flex-1",
79
+ c ? "w-full" : !r && "min-w-[520px]",
80
+ h
80
81
  ),
81
- style: u !== void 0 ? { width: u } : void 0,
82
+ style: N !== void 0 ? { width: N } : void 0,
82
83
  children: /* @__PURE__ */ m(
83
84
  "div",
84
85
  {
85
- ref: h,
86
+ ref: p,
86
87
  className: n(
87
88
  "relative flex rounded-xl p-1",
88
- d ? "bg-neutral-300" : "bg-slate-100",
89
- k[c],
90
- !o && "w-full overflow-hidden",
91
- o ? "min-w-48" : "",
92
- y
89
+ u ? "bg-neutral-300" : "bg-slate-100",
90
+ q[f],
91
+ !c && [!r && "w-full", "overflow-hidden"],
92
+ c ? "min-w-48" : "",
93
+ E
93
94
  ),
94
95
  children: [
95
96
  /* @__PURE__ */ l(
@@ -97,29 +98,29 @@ function V({
97
98
  {
98
99
  className: n(
99
100
  "absolute rounded-lg",
100
- d ? "bg-black" : "bg-white",
101
- o ? "w-full" : "h-full"
101
+ u ? "bg-black" : "bg-white",
102
+ c ? "w-full" : "h-full"
102
103
  ),
103
- style: T
104
+ style: z
104
105
  }
105
106
  ),
106
- t?.map((e, r) => {
107
- const f = i === e.id;
107
+ t?.map((e, i) => {
108
+ const a = s === e.id;
108
109
  return /* @__PURE__ */ m(
109
110
  "button",
110
111
  {
111
112
  ref: (x) => {
112
- a.current[r] = x;
113
+ d.current[i] = x;
113
114
  },
114
115
  onClick: () => {
115
- e?.disabled || (A(e?.id), E?.(e?.id));
116
+ e?.disabled || (T(e?.id), C?.(e?.id));
116
117
  },
117
118
  disabled: e?.disabled,
118
119
  className: n(
119
120
  "relative z-10 flex cursor-pointer items-center justify-center px-3 py-2 text-base font-normal whitespace-nowrap transition-colors duration-300",
120
- d ? "text-white" : "text-black",
121
- e?.disabled && (d ? "cursor-not-allowed text-neutral-100/50 opacity-60" : "cursor-not-allowed opacity-50"),
122
- o ? "w-full justify-start" : "min-w-0 flex-1"
121
+ u ? "text-white" : "text-black",
122
+ e?.disabled && (u ? "cursor-not-allowed text-neutral-100/50 opacity-60" : "cursor-not-allowed opacity-50"),
123
+ c ? "w-full justify-start" : r ? "" : "min-w-0 flex-1"
123
124
  ),
124
125
  children: [
125
126
  e?.icon && /* @__PURE__ */ l(
@@ -127,13 +128,13 @@ function V({
127
128
  {
128
129
  className: n(
129
130
  "shrink-0 transition-transform duration-200",
130
- f && "scale-110"
131
+ a && "scale-110"
131
132
  ),
132
133
  children: e?.icon
133
134
  }
134
135
  ),
135
136
  /* @__PURE__ */ l("span", { className: "relative z-10 truncate", title: e?.label, children: e?.label }),
136
- /* @__PURE__ */ l(_, { count: e?.count })
137
+ /* @__PURE__ */ l(k, { count: e?.count })
137
138
  ]
138
139
  },
139
140
  e?.id
@@ -144,31 +145,31 @@ function V({
144
145
  )
145
146
  }
146
147
  ),
147
- 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 }) })
148
+ 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 }) })
148
149
  ]
149
150
  }
150
151
  ),
151
- z && /* @__PURE__ */ l(
152
+ R && /* @__PURE__ */ l(
152
153
  "div",
153
154
  {
154
155
  className: n(
155
156
  "w-full flex-1 overflow-hidden",
156
- F[c],
157
- S
157
+ B[f],
158
+ A
158
159
  ),
159
160
  children: /* @__PURE__ */ l(
160
161
  "div",
161
162
  {
162
163
  className: "w-full animate-fade-in",
163
164
  style: { animationDuration: "0.35s" },
164
- children: t?.find((e) => e.id === i)?.content
165
+ children: t?.find((e) => e.id === s)?.content
165
166
  },
166
- i
167
+ s
167
168
  )
168
169
  }
169
170
  )
170
171
  ] });
171
172
  }
172
173
  export {
173
- V as default
174
+ G as default
174
175
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mci-ui/mci-ui",
3
3
  "private": false,
4
- "version": "0.0.96",
4
+ "version": "0.0.97",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",