@versini/ui-button 8.0.0 → 8.0.1

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 (3) hide show
  1. package/dist/components/Button/ButtonIcon.js +91 -125
  2. package/dist/index.js +3 -3
  3. package/package.json +6 -6
package/dist/components/Button/ButtonIcon.js CHANGED
@@ -1,169 +1,135 @@
1
- import { jsx as y, jsxs as U } from "react/jsx-runtime";
2
- import Y, { useRef as m, useCallback as J, useEffect as T, useMemo as j, useState as K, useLayoutEffect as D } from "react";
3
- import { BaseButton_private as Q } from "../../chunks/BaseButton.BpaKdSwW.js";
4
- import { getButtonClasses as V, TYPE_ICON as X, getIconClasses as Z, getButtonIconLabelClasses as z } from "../../chunks/utilities.CGmHp-Rn.js";
5
- function ee() {
6
- const t = m(!1);
7
- return T(() => (t.current = !0, () => {
8
- t.current = !1;
9
- }), []), J(() => t.current, []);
10
- }
11
- function te(t) {
12
- return j(() => t.every((r) => r == null) ? () => {
13
- } : (r) => {
14
- t.forEach((e) => {
15
- typeof e == "function" ? e(r) : e != null && (e.current = r);
16
- });
17
- }, [...t]);
18
- }
19
- const re = {
20
- x: 0,
21
- y: 0,
22
- width: 0,
23
- height: 0,
24
- top: 0,
25
- left: 0,
26
- bottom: 0,
27
- right: 0
28
- };
29
- function A(t) {
30
- const r = ee(), e = m(0), s = m(null), [p, C] = K(re), d = j(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((w) => {
31
- const i = w[0];
32
- i && (cancelAnimationFrame(e.current), e.current = requestAnimationFrame(() => {
33
- s.current && r() && C(i.contentRect);
34
- }));
35
- }), [r]);
36
- return T(() => (s.current && d?.observe(s.current, t), () => {
37
- d?.disconnect(), e.current && cancelAnimationFrame(e.current);
38
- }), [d, t]), [s, p];
39
- }
40
- const b = {
1
+ import { jsx as u, jsxs as Y } from "react/jsx-runtime";
2
+ import { useResizeObserver as C, useMergeRefs as k } from "@versini/ui-hooks";
3
+ import q, { useRef as b, useLayoutEffect as v, useEffect as F } from "react";
4
+ import { BaseButton_private as J } from "../../chunks/BaseButton.BpaKdSwW.js";
5
+ import { getButtonClasses as K, TYPE_ICON as Q, getIconClasses as V, getButtonIconLabelClasses as X } from "../../chunks/utilities.CGmHp-Rn.js";
6
+ const p = {
41
7
  small: 24,
42
8
  // w-6
43
9
  medium: 32,
44
10
  // w-8
45
11
  large: 48
46
12
  // w-12
47
- }, ne = {
13
+ }, Z = {
48
14
  small: 16,
49
15
  // px-2 x 2
50
16
  medium: 24,
51
17
  // px-3 x 2
52
18
  large: 32
53
19
  // px-4 x 2
54
- }, ce = 2, se = 300, ue = Y.forwardRef(
20
+ }, z = 2, ee = 300, te = q.forwardRef(
55
21
  ({
56
- children: t,
57
- disabled: r = !1,
58
- mode: e = "system",
59
- focusMode: s = "system",
60
- fullWidth: p = !1,
61
- className: C,
62
- type: d = "button",
63
- raw: w = !1,
64
- noBorder: i = !1,
65
- "aria-label": F,
66
- label: H,
67
- size: u = "medium",
68
- labelRight: h,
69
- labelLeft: R,
70
- noBackground: S = !1,
22
+ children: m,
23
+ disabled: a = !1,
24
+ mode: o = "system",
25
+ focusMode: d = "system",
26
+ fullWidth: R = !1,
27
+ className: O,
28
+ type: A = "button",
29
+ raw: T = !1,
30
+ noBorder: I = !1,
31
+ "aria-label": E,
32
+ label: j,
33
+ size: r = "medium",
34
+ labelRight: f,
35
+ labelLeft: i,
36
+ noBackground: H = !1,
71
37
  align: W = "center",
72
38
  radius: _ = "large",
73
- variant: g = "secondary",
39
+ variant: x = "secondary",
74
40
  iconClassName: M,
75
- animated: l = !1,
41
+ animated: s = !1,
76
42
  ...P
77
- }, $) => {
78
- const k = V({
79
- type: X,
80
- mode: e,
81
- focusMode: s,
82
- fullWidth: p,
83
- disabled: r,
84
- raw: w,
85
- className: C,
86
- noBorder: i,
87
- size: u,
88
- labelRight: h,
89
- labelLeft: R,
90
- noBackground: S,
43
+ }, S) => {
44
+ const $ = K({
45
+ type: Q,
46
+ mode: o,
47
+ focusMode: d,
48
+ fullWidth: R,
49
+ disabled: a,
50
+ raw: T,
51
+ className: O,
52
+ noBorder: I,
53
+ size: r,
54
+ labelRight: f,
55
+ labelLeft: i,
56
+ noBackground: H,
91
57
  align: W,
92
58
  radius: _,
93
- variant: g,
94
- animated: l
95
- }), q = Z({ mode: e, raw: w, iconClassName: M, variant: g }), B = z({ animated: l }), G = "flex items-center justify-center relative w-full h-full overflow-hidden", [n, N] = A(), [c, v] = A(), [I, O] = A(), x = m(0), o = m(null), a = m(null), L = te([$, o]);
96
- return D(() => {
97
- I && I.current && l && (x.current = O.width + ne[u] + (i ? 0 : ce), o.current && !o.current.style.width && (o.current.style.width = `${b[u]}px`));
98
- }, [O, I, u, i, l]), D(() => {
99
- if (o && o.current && l) {
100
- let f = b[u];
101
- h && n && N.width > 0 ? f = N.width + x.current : R && c && v.width > 0 && (f = v.width + x.current), a.current && clearTimeout(a.current), f !== parseInt(o.current.style.width || "0", 10) && (n.current && (n.current.style.opacity = "0"), c.current && (c.current.style.opacity = "0"), o.current.style.width = `${f}px`, f > b[u] && (a.current = setTimeout(() => {
102
- n.current && h && (n.current.style.opacity = "1"), c.current && R && (c.current.style.opacity = "1"), a.current = null;
103
- }, se * 0.8))), f === b[u] && (n.current && (n.current.style.opacity = "0"), c.current && (c.current.style.opacity = "0"));
59
+ variant: x,
60
+ animated: s
61
+ }), G = V({ mode: o, raw: T, iconClassName: M, variant: x }), B = X({ animated: s }), L = "flex items-center justify-center relative w-full h-full overflow-hidden", [e, h] = C(), [t, w] = C(), [y, g] = C(), N = b(0), c = b(null), n = b(null), U = k([S, c]);
62
+ return v(() => {
63
+ y && y.current && s && (N.current = g.width + Z[r] + (I ? 0 : z), c.current && !c.current.style.width && (c.current.style.width = `${p[r]}px`));
64
+ }, [g, y, r, I, s]), v(() => {
65
+ if (c && c.current && s) {
66
+ let l = p[r];
67
+ f && e && h.width > 0 ? l = h.width + N.current : i && t && w.width > 0 && (l = w.width + N.current), n.current && clearTimeout(n.current), l !== parseInt(c.current.style.width || "0", 10) && (e.current && (e.current.style.opacity = "0"), t.current && (t.current.style.opacity = "0"), c.current.style.width = `${l}px`, l > p[r] && (n.current = setTimeout(() => {
68
+ e.current && f && (e.current.style.opacity = "1"), t.current && i && (t.current.style.opacity = "1"), n.current = null;
69
+ }, ee * 0.8))), l === p[r] && (e.current && (e.current.style.opacity = "0"), t.current && (t.current.style.opacity = "0"));
104
70
  }
105
71
  }, [
106
- N,
107
72
  h,
108
- n,
109
- v,
110
- R,
111
- c,
112
- u,
113
- l
114
- ]), T(() => () => {
115
- a.current && clearTimeout(a.current);
116
- }, []), /* @__PURE__ */ y(
117
- Q,
73
+ f,
74
+ e,
75
+ w,
76
+ i,
77
+ t,
78
+ r,
79
+ s
80
+ ]), F(() => () => {
81
+ n.current && clearTimeout(n.current);
82
+ }, []), /* @__PURE__ */ u(
83
+ J,
118
84
  {
119
- ref: L,
120
- className: k,
121
- disabled: r,
122
- type: d,
123
- "aria-label": F || H,
85
+ ref: U,
86
+ className: $,
87
+ disabled: a,
88
+ type: A,
89
+ "aria-label": E || j,
124
90
  ...P,
125
- children: /* @__PURE__ */ U("div", { className: G, children: [
126
- /* @__PURE__ */ y(
127
- E,
91
+ children: /* @__PURE__ */ Y("div", { className: L, children: [
92
+ /* @__PURE__ */ u(
93
+ D,
128
94
  {
129
- label: R,
130
- labelRef: c,
95
+ label: i,
96
+ labelRef: t,
131
97
  labelClass: B,
132
98
  labelInnerClass: "pr-2",
133
- initiallyHidden: l
99
+ initiallyHidden: s
134
100
  }
135
101
  ),
136
- /* @__PURE__ */ y("span", { ref: I, className: q, children: t }),
137
- /* @__PURE__ */ y(
138
- E,
102
+ /* @__PURE__ */ u("span", { ref: y, className: G, children: m }),
103
+ /* @__PURE__ */ u(
104
+ D,
139
105
  {
140
- label: h,
141
- labelRef: n,
106
+ label: f,
107
+ labelRef: e,
142
108
  labelClass: B,
143
109
  labelInnerClass: "pl-2",
144
- initiallyHidden: l
110
+ initiallyHidden: s
145
111
  }
146
112
  )
147
113
  ] })
148
114
  }
149
115
  );
150
116
  }
151
- ), E = ({
152
- labelRef: t,
153
- labelClass: r,
154
- label: e,
155
- labelInnerClass: s,
156
- initiallyHidden: p = !1
157
- }) => /* @__PURE__ */ y(
117
+ ), D = ({
118
+ labelRef: m,
119
+ labelClass: a,
120
+ label: o,
121
+ labelInnerClass: d,
122
+ initiallyHidden: R = !1
123
+ }) => /* @__PURE__ */ u(
158
124
  "span",
159
125
  {
160
- ref: t,
161
- className: r,
162
- style: p ? { opacity: 0 } : void 0,
163
- children: e && /* @__PURE__ */ y("span", { className: s, children: e })
126
+ ref: m,
127
+ className: a,
128
+ style: R ? { opacity: 0 } : void 0,
129
+ children: o && /* @__PURE__ */ u("span", { className: d, children: o })
164
130
  }
165
131
  );
166
- ue.displayName = "ButtonIcon";
132
+ te.displayName = "ButtonIcon";
167
133
  export {
168
- ue as ButtonIcon
134
+ te as ButtonIcon
169
135
  };
package/dist/index.js CHANGED
@@ -7,13 +7,13 @@ import { jsx as e } from "react/jsx-runtime";
7
7
  import n from "clsx";
8
8
  import m from "react";
9
9
  /*!
10
- @versini/ui-button v8.0.0
10
+ @versini/ui-button v8.0.1
11
11
  © 2025 gizmette.com
12
12
  */
13
13
  try {
14
14
  window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
15
- version: "8.0.0",
16
- buildTime: "09/01/2025 03:17 PM EDT",
15
+ version: "8.0.1",
16
+ buildTime: "09/01/2025 04:00 PM EDT",
17
17
  homepage: "https://github.com/aversini/ui-components",
18
18
  license: "MIT"
19
19
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-button",
3
- "version": "8.0.0",
3
+ "version": "8.0.1",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -37,16 +37,16 @@
37
37
  "test": "vitest run"
38
38
  },
39
39
  "peerDependencies": {
40
- "react": "^19.0.0",
41
- "react-dom": "^19.0.0"
40
+ "react": "^19.1.0",
41
+ "react-dom": "^19.1.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@testing-library/jest-dom": "6.8.0",
45
- "@versini/ui-types": "6.0.0"
45
+ "@versini/ui-types": "6.0.1"
46
46
  },
47
47
  "dependencies": {
48
48
  "@tailwindcss/typography": "0.5.16",
49
- "@versini/ui-hooks": "5.0.0",
49
+ "@versini/ui-hooks": "5.0.1",
50
50
  "@versini/ui-icons": "4.11.0",
51
51
  "clsx": "2.1.1",
52
52
  "tailwindcss": "4.1.12"
@@ -54,5 +54,5 @@
54
54
  "sideEffects": [
55
55
  "**/*.css"
56
56
  ],
57
- "gitHead": "70a47e9e30172dbb7b36306773fe9511e437fba6"
57
+ "gitHead": "dcc216644c8c3e7d43a49ea655a22aed21fa4b83"
58
58
  }