@versini/ui-button 7.1.6 → 8.0.0
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.
- package/dist/components/Button/ButtonCopy.js +120 -20
- package/dist/components/Button/ButtonIcon.js +125 -91
- package/dist/index.js +3 -3
- package/package.json +7 -7
|
@@ -1,32 +1,132 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { jsxs as r, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import h, { useState as w, useEffect as u } from "react";
|
|
3
|
+
import { ButtonIcon as f } from "./ButtonIcon.js";
|
|
4
|
+
import _ from "clsx";
|
|
5
|
+
const m = ({
|
|
6
|
+
children: e,
|
|
7
|
+
fill: c,
|
|
8
|
+
viewBox: s,
|
|
9
|
+
className: i,
|
|
10
|
+
defaultViewBox: t,
|
|
11
|
+
size: a,
|
|
12
|
+
title: l,
|
|
13
|
+
semantic: n = !1,
|
|
14
|
+
...d
|
|
15
|
+
}) => {
|
|
16
|
+
const p = _(a, i);
|
|
17
|
+
return /* @__PURE__ */ r(
|
|
18
|
+
"svg",
|
|
19
|
+
{
|
|
20
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
21
|
+
className: p,
|
|
22
|
+
viewBox: s || t,
|
|
23
|
+
fill: c || "currentColor",
|
|
24
|
+
role: "img",
|
|
25
|
+
"aria-hidden": !n,
|
|
26
|
+
focusable: !1,
|
|
27
|
+
...d,
|
|
28
|
+
children: [
|
|
29
|
+
l && n && /* @__PURE__ */ o("title", { children: l }),
|
|
30
|
+
e
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
/*!
|
|
36
|
+
@versini/ui-svgicon v4.2.1
|
|
37
|
+
© 2025 gizmette.com
|
|
38
|
+
*/
|
|
39
|
+
try {
|
|
40
|
+
window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
|
|
41
|
+
version: "4.2.1",
|
|
42
|
+
buildTime: "08/27/2025 08:27 AM EDT",
|
|
43
|
+
homepage: "https://github.com/aversini/ui-components",
|
|
44
|
+
license: "MIT"
|
|
45
|
+
});
|
|
46
|
+
} catch {
|
|
47
|
+
}
|
|
48
|
+
const v = ({
|
|
49
|
+
className: e,
|
|
50
|
+
viewBox: c,
|
|
51
|
+
title: s,
|
|
52
|
+
monotone: i,
|
|
53
|
+
...t
|
|
54
|
+
}) => /* @__PURE__ */ r(
|
|
55
|
+
m,
|
|
56
|
+
{
|
|
57
|
+
defaultViewBox: "0 0 448 512",
|
|
58
|
+
size: "size-5",
|
|
59
|
+
viewBox: c,
|
|
60
|
+
className: e,
|
|
61
|
+
title: s || "Copied",
|
|
62
|
+
...t,
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ o(
|
|
65
|
+
"path",
|
|
66
|
+
{
|
|
67
|
+
d: "M0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96m104 160c0-6.1 2.3-12.3 7-17 9.4-9.4 24.6-9.4 33.9 0l47 47 111-111c4.7-4.7 10.8-7 17-7s12.3 2.3 17 7c2.3 2.3 4.1 5 5.3 7.9.6 1.5 1 2.9 1.3 4.4.2 1.1.3 2.2.3 2.2.1 1.2.1 1.2.1 2.5-.1 1.5-.1 1.9-.1 2.3-.1.7-.2 1.5-.3 2.2-.3 1.5-.7 3-1.3 4.4-1.2 2.9-2.9 5.6-5.3 7.9l-128 128c-4.7 4.7-10.8 7-17 7s-12.3-2.3-17-7l-64-64c-4.7-4.7-7-10.8-7-17z",
|
|
68
|
+
opacity: ".4"
|
|
69
|
+
}
|
|
70
|
+
),
|
|
71
|
+
/* @__PURE__ */ o("path", { d: "M337 175c9.4 9.4 9.4 24.6 0 33.9L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0z" })
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
), I = ({
|
|
75
|
+
className: e,
|
|
76
|
+
viewBox: c,
|
|
77
|
+
title: s,
|
|
78
|
+
monotone: i,
|
|
79
|
+
...t
|
|
80
|
+
}) => /* @__PURE__ */ o(
|
|
81
|
+
m,
|
|
82
|
+
{
|
|
83
|
+
defaultViewBox: "0 0 512 512",
|
|
84
|
+
size: "size-5",
|
|
85
|
+
viewBox: c,
|
|
86
|
+
className: e,
|
|
87
|
+
title: s || "Copy",
|
|
88
|
+
...t,
|
|
89
|
+
children: /* @__PURE__ */ o("path", { d: "M64 464h224c8.8 0 16-7.2 16-16v-64h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16m160-160h224c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16m-64-16V64c0-35.3 28.7-64 64-64h224c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64" })
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
/*!
|
|
93
|
+
@versini/ui-icons v4.11.0
|
|
94
|
+
© 2025 gizmette.com
|
|
95
|
+
*/
|
|
96
|
+
try {
|
|
97
|
+
window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
|
|
98
|
+
version: "4.11.0",
|
|
99
|
+
buildTime: "08/27/2025 08:28 AM EDT",
|
|
100
|
+
homepage: "https://github.com/aversini/ui-components",
|
|
101
|
+
license: "MIT"
|
|
102
|
+
});
|
|
103
|
+
} catch {
|
|
104
|
+
}
|
|
105
|
+
const x = h.forwardRef(({ copyToClipboard: e, ...c }, s) => {
|
|
106
|
+
const [i, t] = w(!1), a = () => {
|
|
107
|
+
typeof e == "string" && (navigator.clipboard.writeText(e), t(!0)), typeof e == "function" && (navigator.clipboard.writeText(e()), t(!0));
|
|
8
108
|
};
|
|
9
|
-
return
|
|
10
|
-
let
|
|
11
|
-
return
|
|
12
|
-
|
|
109
|
+
return u(() => {
|
|
110
|
+
let l;
|
|
111
|
+
return i && (l = window.setTimeout(() => {
|
|
112
|
+
t(!1);
|
|
13
113
|
}, 3e3)), () => {
|
|
14
|
-
clearTimeout(
|
|
114
|
+
clearTimeout(l);
|
|
15
115
|
};
|
|
16
|
-
}, [
|
|
17
|
-
|
|
116
|
+
}, [i]), /* @__PURE__ */ o(
|
|
117
|
+
f,
|
|
18
118
|
{
|
|
19
|
-
...
|
|
119
|
+
...c,
|
|
20
120
|
size: "small",
|
|
21
121
|
ref: s,
|
|
22
|
-
label:
|
|
122
|
+
label: i ? "Copied to clipboard" : "Copy to clipboard",
|
|
23
123
|
onClick: a,
|
|
24
|
-
disabled:
|
|
25
|
-
children:
|
|
124
|
+
disabled: i,
|
|
125
|
+
children: i ? /* @__PURE__ */ o(v, { size: "size-3" }) : /* @__PURE__ */ o(I, { size: "size-3" })
|
|
26
126
|
}
|
|
27
127
|
);
|
|
28
128
|
});
|
|
29
|
-
|
|
129
|
+
x.displayName = "ButtonCopy";
|
|
30
130
|
export {
|
|
31
|
-
|
|
131
|
+
x as ButtonCopy
|
|
32
132
|
};
|
|
@@ -1,135 +1,169 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
const
|
|
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 = {
|
|
7
41
|
small: 24,
|
|
8
42
|
// w-6
|
|
9
43
|
medium: 32,
|
|
10
44
|
// w-8
|
|
11
45
|
large: 48
|
|
12
46
|
// w-12
|
|
13
|
-
},
|
|
47
|
+
}, ne = {
|
|
14
48
|
small: 16,
|
|
15
49
|
// px-2 x 2
|
|
16
50
|
medium: 24,
|
|
17
51
|
// px-3 x 2
|
|
18
52
|
large: 32
|
|
19
53
|
// px-4 x 2
|
|
20
|
-
},
|
|
54
|
+
}, ce = 2, se = 300, ue = Y.forwardRef(
|
|
21
55
|
({
|
|
22
|
-
children:
|
|
23
|
-
disabled:
|
|
24
|
-
mode:
|
|
25
|
-
focusMode:
|
|
26
|
-
fullWidth:
|
|
27
|
-
className:
|
|
28
|
-
type:
|
|
29
|
-
raw:
|
|
30
|
-
noBorder:
|
|
31
|
-
"aria-label":
|
|
32
|
-
label:
|
|
33
|
-
size:
|
|
34
|
-
labelRight:
|
|
35
|
-
labelLeft:
|
|
36
|
-
noBackground:
|
|
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,
|
|
37
71
|
align: W = "center",
|
|
38
72
|
radius: _ = "large",
|
|
39
|
-
variant:
|
|
73
|
+
variant: g = "secondary",
|
|
40
74
|
iconClassName: M,
|
|
41
|
-
animated:
|
|
75
|
+
animated: l = !1,
|
|
42
76
|
...P
|
|
43
|
-
},
|
|
44
|
-
const
|
|
45
|
-
type:
|
|
46
|
-
mode:
|
|
47
|
-
focusMode:
|
|
48
|
-
fullWidth:
|
|
49
|
-
disabled:
|
|
50
|
-
raw:
|
|
51
|
-
className:
|
|
52
|
-
noBorder:
|
|
53
|
-
size:
|
|
54
|
-
labelRight:
|
|
55
|
-
labelLeft:
|
|
56
|
-
noBackground:
|
|
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,
|
|
57
91
|
align: W,
|
|
58
92
|
radius: _,
|
|
59
|
-
variant:
|
|
60
|
-
animated:
|
|
61
|
-
}),
|
|
62
|
-
return
|
|
63
|
-
|
|
64
|
-
}, [
|
|
65
|
-
if (
|
|
66
|
-
let
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
},
|
|
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"));
|
|
70
104
|
}
|
|
71
105
|
}, [
|
|
106
|
+
N,
|
|
72
107
|
h,
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
J,
|
|
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,
|
|
84
118
|
{
|
|
85
|
-
ref:
|
|
86
|
-
className:
|
|
87
|
-
disabled:
|
|
88
|
-
type:
|
|
89
|
-
"aria-label":
|
|
119
|
+
ref: L,
|
|
120
|
+
className: k,
|
|
121
|
+
disabled: r,
|
|
122
|
+
type: d,
|
|
123
|
+
"aria-label": F || H,
|
|
90
124
|
...P,
|
|
91
|
-
children: /* @__PURE__ */
|
|
92
|
-
/* @__PURE__ */
|
|
93
|
-
|
|
125
|
+
children: /* @__PURE__ */ U("div", { className: G, children: [
|
|
126
|
+
/* @__PURE__ */ y(
|
|
127
|
+
E,
|
|
94
128
|
{
|
|
95
|
-
label:
|
|
96
|
-
labelRef:
|
|
129
|
+
label: R,
|
|
130
|
+
labelRef: c,
|
|
97
131
|
labelClass: B,
|
|
98
132
|
labelInnerClass: "pr-2",
|
|
99
|
-
initiallyHidden:
|
|
133
|
+
initiallyHidden: l
|
|
100
134
|
}
|
|
101
135
|
),
|
|
102
|
-
/* @__PURE__ */
|
|
103
|
-
/* @__PURE__ */
|
|
104
|
-
|
|
136
|
+
/* @__PURE__ */ y("span", { ref: I, className: q, children: t }),
|
|
137
|
+
/* @__PURE__ */ y(
|
|
138
|
+
E,
|
|
105
139
|
{
|
|
106
|
-
label:
|
|
107
|
-
labelRef:
|
|
140
|
+
label: h,
|
|
141
|
+
labelRef: n,
|
|
108
142
|
labelClass: B,
|
|
109
143
|
labelInnerClass: "pl-2",
|
|
110
|
-
initiallyHidden:
|
|
144
|
+
initiallyHidden: l
|
|
111
145
|
}
|
|
112
146
|
)
|
|
113
147
|
] })
|
|
114
148
|
}
|
|
115
149
|
);
|
|
116
150
|
}
|
|
117
|
-
),
|
|
118
|
-
labelRef:
|
|
119
|
-
labelClass:
|
|
120
|
-
label:
|
|
121
|
-
labelInnerClass:
|
|
122
|
-
initiallyHidden:
|
|
123
|
-
}) => /* @__PURE__ */
|
|
151
|
+
), E = ({
|
|
152
|
+
labelRef: t,
|
|
153
|
+
labelClass: r,
|
|
154
|
+
label: e,
|
|
155
|
+
labelInnerClass: s,
|
|
156
|
+
initiallyHidden: p = !1
|
|
157
|
+
}) => /* @__PURE__ */ y(
|
|
124
158
|
"span",
|
|
125
159
|
{
|
|
126
|
-
ref:
|
|
127
|
-
className:
|
|
128
|
-
style:
|
|
129
|
-
children:
|
|
160
|
+
ref: t,
|
|
161
|
+
className: r,
|
|
162
|
+
style: p ? { opacity: 0 } : void 0,
|
|
163
|
+
children: e && /* @__PURE__ */ y("span", { className: s, children: e })
|
|
130
164
|
}
|
|
131
165
|
);
|
|
132
|
-
|
|
166
|
+
ue.displayName = "ButtonIcon";
|
|
133
167
|
export {
|
|
134
|
-
|
|
168
|
+
ue as ButtonIcon
|
|
135
169
|
};
|
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
|
|
10
|
+
@versini/ui-button v8.0.0
|
|
11
11
|
© 2025 gizmette.com
|
|
12
12
|
*/
|
|
13
13
|
try {
|
|
14
14
|
window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
|
|
15
|
-
version: "
|
|
16
|
-
buildTime: "09/01/2025
|
|
15
|
+
version: "8.0.0",
|
|
16
|
+
buildTime: "09/01/2025 03:17 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": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -37,22 +37,22 @@
|
|
|
37
37
|
"test": "vitest run"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"react": "^
|
|
41
|
-
"react-dom": "^
|
|
40
|
+
"react": "^19.0.0",
|
|
41
|
+
"react-dom": "^19.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@testing-library/jest-dom": "6.8.0",
|
|
45
|
-
"@versini/ui-types": "
|
|
45
|
+
"@versini/ui-types": "6.0.0"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@tailwindcss/typography": "0.5.16",
|
|
49
|
-
"@versini/ui-hooks": "
|
|
50
|
-
"@versini/ui-icons": "4.
|
|
49
|
+
"@versini/ui-hooks": "5.0.0",
|
|
50
|
+
"@versini/ui-icons": "4.11.0",
|
|
51
51
|
"clsx": "2.1.1",
|
|
52
52
|
"tailwindcss": "4.1.12"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": [
|
|
55
55
|
"**/*.css"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "70a47e9e30172dbb7b36306773fe9511e437fba6"
|
|
58
58
|
}
|