@versini/ui-bubble 3.4.1 → 3.4.3
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/index.js +148 -148
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -2,22 +2,22 @@ import { jsx as s, jsxs as x, Fragment as Y } from "react/jsx-runtime";
|
|
|
2
2
|
import V, { useRef as B, useLayoutEffect as $, useMemo as P, useState as q, useEffect as L, useCallback as ee } from "react";
|
|
3
3
|
import o from "clsx";
|
|
4
4
|
/*!
|
|
5
|
-
@versini/ui-bubble v3.4.
|
|
5
|
+
@versini/ui-bubble v3.4.3
|
|
6
6
|
© 2025 gizmette.com
|
|
7
7
|
*/
|
|
8
8
|
try {
|
|
9
9
|
window.__VERSINI_UI_BUBBLE__ || (window.__VERSINI_UI_BUBBLE__ = {
|
|
10
|
-
version: "3.4.
|
|
11
|
-
buildTime: "03/
|
|
10
|
+
version: "3.4.3",
|
|
11
|
+
buildTime: "03/14/2025 05:18 PM EDT",
|
|
12
12
|
homepage: "https://github.com/aversini/ui-components",
|
|
13
13
|
license: "MIT"
|
|
14
14
|
});
|
|
15
15
|
} catch {
|
|
16
16
|
}
|
|
17
|
-
const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link",
|
|
17
|
+
const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", te = ({
|
|
18
18
|
type: e,
|
|
19
|
-
size:
|
|
20
|
-
labelRight:
|
|
19
|
+
size: r,
|
|
20
|
+
labelRight: t,
|
|
21
21
|
labelLeft: a,
|
|
22
22
|
align: l,
|
|
23
23
|
animated: i
|
|
@@ -27,33 +27,33 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
27
27
|
case F:
|
|
28
28
|
case M:
|
|
29
29
|
return o({
|
|
30
|
-
[n]:
|
|
31
|
-
[c]:
|
|
32
|
-
[d]:
|
|
30
|
+
[n]: r === "small",
|
|
31
|
+
[c]: r === "medium",
|
|
32
|
+
[d]: r === "large"
|
|
33
33
|
});
|
|
34
34
|
case C:
|
|
35
35
|
return o("flex items-center", {
|
|
36
36
|
"justify-center": l === "center",
|
|
37
37
|
"justify-start": l === "left",
|
|
38
38
|
"justify-end": l === "right",
|
|
39
|
-
"h-6 w-6 p-0":
|
|
40
|
-
"h-6 px-2":
|
|
41
|
-
"h-8 w-8 p-1":
|
|
42
|
-
"h-8 px-3":
|
|
43
|
-
"h-12 w-12 p-2":
|
|
44
|
-
"h-12 px-4":
|
|
45
|
-
"h-6 py-0":
|
|
46
|
-
"h-6":
|
|
47
|
-
"h-8 py-1":
|
|
48
|
-
"h-8":
|
|
49
|
-
"h-12 py-2":
|
|
50
|
-
"h-12":
|
|
39
|
+
"h-6 w-6 p-0": r === "small" && !i && !(t || a),
|
|
40
|
+
"h-6 px-2": r === "small" && !i && (t || a),
|
|
41
|
+
"h-8 w-8 p-1": r === "medium" && !i && !(t || a),
|
|
42
|
+
"h-8 px-3": r === "medium" && !i && (t || a),
|
|
43
|
+
"h-12 w-12 p-2": r === "large" && !i && !(t || a),
|
|
44
|
+
"h-12 px-4": r === "large" && !i && (t || a),
|
|
45
|
+
"h-6 py-0": r === "small" && i && !(t || a),
|
|
46
|
+
"h-6": r === "small" && i && (t || a),
|
|
47
|
+
"h-8 py-1": r === "medium" && i && !(t || a),
|
|
48
|
+
"h-8": r === "medium" && i && (t || a),
|
|
49
|
+
"h-12 py-2": r === "large" && i && !(t || a),
|
|
50
|
+
"h-12": r === "large" && i && (t || a)
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
|
-
},
|
|
53
|
+
}, re = ({
|
|
54
54
|
type: e,
|
|
55
|
-
size:
|
|
56
|
-
labelRight:
|
|
55
|
+
size: r,
|
|
56
|
+
labelRight: t,
|
|
57
57
|
labelLeft: a
|
|
58
58
|
}) => {
|
|
59
59
|
const l = "text-sm font-medium", i = "text-base font-medium", n = "text-lg font-medium";
|
|
@@ -62,28 +62,28 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
62
62
|
case M:
|
|
63
63
|
return o({
|
|
64
64
|
"text-center": e === M,
|
|
65
|
-
[l]:
|
|
66
|
-
[i]:
|
|
67
|
-
[n]:
|
|
65
|
+
[l]: r === "small",
|
|
66
|
+
[i]: r === "medium",
|
|
67
|
+
[n]: r === "large"
|
|
68
68
|
});
|
|
69
69
|
case C:
|
|
70
70
|
return o({
|
|
71
|
-
[l]:
|
|
72
|
-
[i]:
|
|
73
|
-
[n]:
|
|
71
|
+
[l]: r === "small" && (t || a),
|
|
72
|
+
[i]: r === "medium" && (t || a),
|
|
73
|
+
[n]: r === "large" && (t || a)
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
76
|
}, ae = ({
|
|
77
77
|
mode: e,
|
|
78
|
-
noBackground:
|
|
79
|
-
|
|
78
|
+
noBackground: r,
|
|
79
|
+
truncate: t,
|
|
80
80
|
variant: a
|
|
81
81
|
}) => {
|
|
82
|
-
if (
|
|
82
|
+
if (r)
|
|
83
83
|
return "not-prose";
|
|
84
84
|
if (a === "primary")
|
|
85
85
|
return o("not-prose", {
|
|
86
|
-
truncate:
|
|
86
|
+
truncate: t,
|
|
87
87
|
"text-copy-light": e === "dark" || e === "system",
|
|
88
88
|
"text-copy-lighter": e === "light" || e === "alt-system",
|
|
89
89
|
"dark:text-copy-lighter": e === "system",
|
|
@@ -91,7 +91,7 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
91
91
|
});
|
|
92
92
|
if (a === "secondary")
|
|
93
93
|
return o("not-prose", {
|
|
94
|
-
truncate:
|
|
94
|
+
truncate: t,
|
|
95
95
|
"text-copy-light": e === "light" || e === "system",
|
|
96
96
|
"text-copy-lighter": e === "dark" || e === "alt-system",
|
|
97
97
|
"dark:text-copy-lighter": e === "alt-system",
|
|
@@ -99,7 +99,7 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
99
99
|
});
|
|
100
100
|
if (a === "danger")
|
|
101
101
|
return o("not-prose", {
|
|
102
|
-
truncate:
|
|
102
|
+
truncate: t,
|
|
103
103
|
"text-copy-light": e === "dark" || e === "system",
|
|
104
104
|
"text-copy-lighter": e === "light" || e === "alt-system",
|
|
105
105
|
"dark:text-copy-lighter": e === "system",
|
|
@@ -107,36 +107,36 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
107
107
|
});
|
|
108
108
|
if (a === "selected")
|
|
109
109
|
return o("not-prose text-copy-lighter", {
|
|
110
|
-
truncate:
|
|
110
|
+
truncate: t
|
|
111
111
|
});
|
|
112
112
|
}, oe = ({
|
|
113
113
|
mode: e,
|
|
114
|
-
noBackground:
|
|
115
|
-
variant:
|
|
114
|
+
noBackground: r,
|
|
115
|
+
variant: t
|
|
116
116
|
}) => {
|
|
117
|
-
if (!
|
|
118
|
-
if (
|
|
117
|
+
if (!r) {
|
|
118
|
+
if (t === "primary")
|
|
119
119
|
return o({
|
|
120
120
|
"bg-action-dark": e === "dark",
|
|
121
121
|
"bg-action-light": e === "light",
|
|
122
122
|
"bg-action-dark dark:bg-action-light": e === "system",
|
|
123
123
|
"bg-action-light dark:bg-action-dark": e === "alt-system"
|
|
124
124
|
});
|
|
125
|
-
if (
|
|
125
|
+
if (t === "secondary")
|
|
126
126
|
return o({
|
|
127
127
|
"bg-action-dark": e === "light",
|
|
128
128
|
"bg-action-light": e === "dark",
|
|
129
129
|
"bg-action-dark dark:bg-action-light": e === "alt-system",
|
|
130
130
|
"bg-action-light dark:bg-action-dark": e === "system"
|
|
131
131
|
});
|
|
132
|
-
if (
|
|
132
|
+
if (t === "danger")
|
|
133
133
|
return o({
|
|
134
134
|
"bg-action-danger-dark": e === "dark",
|
|
135
135
|
"bg-action-danger-light": e === "light",
|
|
136
136
|
"bg-action-danger-dark dark:bg-action-danger-light": e === "system",
|
|
137
137
|
"bg-action-danger-light dark:bg-action-danger-dark": e === "alt-system"
|
|
138
138
|
});
|
|
139
|
-
if (
|
|
139
|
+
if (t === "selected")
|
|
140
140
|
return "bg-action-selected-dark";
|
|
141
141
|
}
|
|
142
142
|
}, ie = ({
|
|
@@ -147,93 +147,93 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
147
147
|
"rounded-sm": e === "small"
|
|
148
148
|
}), le = ({
|
|
149
149
|
mode: e,
|
|
150
|
-
disabled:
|
|
151
|
-
variant:
|
|
150
|
+
disabled: r,
|
|
151
|
+
variant: t
|
|
152
152
|
}) => {
|
|
153
|
-
if (
|
|
153
|
+
if (r)
|
|
154
154
|
return "";
|
|
155
|
-
if (
|
|
155
|
+
if (t === "primary")
|
|
156
156
|
return o("hover:text-copy-light-hover", {
|
|
157
157
|
"hover:bg-action-dark-hover": e === "dark",
|
|
158
158
|
"hover:bg-action-light-hover": e === "light",
|
|
159
159
|
"hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system",
|
|
160
160
|
"hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system"
|
|
161
161
|
});
|
|
162
|
-
if (
|
|
162
|
+
if (t === "secondary")
|
|
163
163
|
return o("hover:text-copy-light-hover", {
|
|
164
164
|
"hover:bg-action-dark-hover": e === "light",
|
|
165
165
|
"hover:bg-action-light-hover": e === "dark",
|
|
166
166
|
"hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system",
|
|
167
167
|
"hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system"
|
|
168
168
|
});
|
|
169
|
-
if (
|
|
169
|
+
if (t === "danger")
|
|
170
170
|
return o("hover:text-copy-light-hover", {
|
|
171
171
|
"hover:bg-action-danger-dark-hover": e === "dark",
|
|
172
172
|
"hover:bg-action-danger-light-hover": e === "light",
|
|
173
173
|
"hover:bg-action-danger-dark-hover dark:hover:bg-action-danger-light-hover": e === "system",
|
|
174
174
|
"hover:bg-action-danger-light-hover dark:hover:bg-action-danger-dark-hover": e === "alt-system"
|
|
175
175
|
});
|
|
176
|
-
if (
|
|
176
|
+
if (t === "selected")
|
|
177
177
|
return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
|
|
178
178
|
}, ne = ({
|
|
179
179
|
mode: e,
|
|
180
|
-
disabled:
|
|
181
|
-
variant:
|
|
180
|
+
disabled: r,
|
|
181
|
+
variant: t
|
|
182
182
|
}) => {
|
|
183
|
-
if (
|
|
183
|
+
if (r)
|
|
184
184
|
return "";
|
|
185
|
-
if (
|
|
185
|
+
if (t === "primary")
|
|
186
186
|
return o("active:text-copy-light-active", {
|
|
187
187
|
"active:bg-action-dark-active": e === "dark",
|
|
188
188
|
"active:bg-action-light-active": e === "light",
|
|
189
189
|
"active:bg-action-dark-active dark:active:bg-action-light-active": e === "system",
|
|
190
190
|
"active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system"
|
|
191
191
|
});
|
|
192
|
-
if (
|
|
192
|
+
if (t === "secondary")
|
|
193
193
|
return o("active:text-copy-light-active", {
|
|
194
194
|
"active:bg-action-dark-active": e === "light",
|
|
195
195
|
"active:bg-action-light-active": e === "dark",
|
|
196
196
|
"active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system",
|
|
197
197
|
"active:bg-action-light-active dark:active:bg-action-dark-active": e === "system"
|
|
198
198
|
});
|
|
199
|
-
if (
|
|
199
|
+
if (t === "danger")
|
|
200
200
|
return o("active:text-copy-lighter-active", {
|
|
201
201
|
"active:bg-action-danger-dark-active": e === "dark",
|
|
202
202
|
"active:bg-action-danger-light-active": e === "light",
|
|
203
203
|
"active:bg-action-danger-dark-active dark:active:bg-action-danger-light-active": e === "system",
|
|
204
204
|
"active:bg-action-danger-light-active dark:active:bg-action-danger-dark-active": e === "alt-system"
|
|
205
205
|
});
|
|
206
|
-
if (
|
|
206
|
+
if (t === "selected")
|
|
207
207
|
return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
|
|
208
208
|
}, se = ({
|
|
209
209
|
mode: e,
|
|
210
|
-
noBorder:
|
|
211
|
-
variant:
|
|
210
|
+
noBorder: r,
|
|
211
|
+
variant: t
|
|
212
212
|
}) => {
|
|
213
|
-
if (
|
|
213
|
+
if (r)
|
|
214
214
|
return "border border-transparent";
|
|
215
|
-
if (
|
|
215
|
+
if (t === "primary")
|
|
216
216
|
return o("border", {
|
|
217
217
|
"border-border-dark": e === "dark",
|
|
218
218
|
"border-border-accent": e === "light",
|
|
219
219
|
"border-border-dark dark:border-border-accent": e === "system",
|
|
220
220
|
"border-border-accent dark:border-border-dark": e === "alt-system"
|
|
221
221
|
});
|
|
222
|
-
if (
|
|
222
|
+
if (t === "secondary")
|
|
223
223
|
return o("border", {
|
|
224
224
|
"border-border-dark": e === "light",
|
|
225
225
|
"border-border-accent": e === "dark",
|
|
226
226
|
"border-border-dark dark:border-border-accent": e === "alt-system",
|
|
227
227
|
"border-border-accent dark:border-border-dark": e === "system"
|
|
228
228
|
});
|
|
229
|
-
if (
|
|
229
|
+
if (t === "danger")
|
|
230
230
|
return o("border", {
|
|
231
231
|
"border-border-danger-dark": e === "dark",
|
|
232
232
|
"border-border-danger-medium": e === "light",
|
|
233
233
|
"border-border-danger-dark dark:border-border-danger-medium": e === "system",
|
|
234
234
|
"border-border-danger-medium dark:border-border-danger-dark": e === "alt-system"
|
|
235
235
|
});
|
|
236
|
-
if (
|
|
236
|
+
if (t === "selected")
|
|
237
237
|
return "border border-border-selected-dark";
|
|
238
238
|
}, ce = ({
|
|
239
239
|
focusMode: e
|
|
@@ -244,24 +244,24 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
244
244
|
"focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
|
|
245
245
|
}), de = ({
|
|
246
246
|
mode: e,
|
|
247
|
-
raw:
|
|
248
|
-
iconClassName:
|
|
249
|
-
}) =>
|
|
247
|
+
raw: r,
|
|
248
|
+
iconClassName: t
|
|
249
|
+
}) => r ? "" : o(
|
|
250
250
|
{
|
|
251
251
|
"text-copy-accent-dark": e === "light" || e === "alt-system",
|
|
252
252
|
"text-copy-light": e === "dark" || e === "system",
|
|
253
253
|
"dark:text-copy-light": e === "alt-system",
|
|
254
254
|
"dark:text-copy-accent-dark": e === "system"
|
|
255
255
|
},
|
|
256
|
-
|
|
256
|
+
t
|
|
257
257
|
), be = ({
|
|
258
258
|
animated: e
|
|
259
259
|
}) => o({
|
|
260
260
|
"transition-opacity duration-300 ease-in": e
|
|
261
261
|
}), ue = ({
|
|
262
262
|
type: e,
|
|
263
|
-
className:
|
|
264
|
-
raw:
|
|
263
|
+
className: r,
|
|
264
|
+
raw: t,
|
|
265
265
|
mode: a,
|
|
266
266
|
focusMode: l,
|
|
267
267
|
disabled: i,
|
|
@@ -272,21 +272,21 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
272
272
|
labelLeft: v,
|
|
273
273
|
noBackground: u,
|
|
274
274
|
variant: b,
|
|
275
|
-
|
|
275
|
+
truncate: m,
|
|
276
276
|
align: w,
|
|
277
277
|
radius: _,
|
|
278
278
|
animated: g
|
|
279
|
-
}) => (b || (b = "primary"),
|
|
279
|
+
}) => (b || (b = "primary"), t ? o(A, r) : o(
|
|
280
280
|
A,
|
|
281
281
|
ae({
|
|
282
282
|
mode: a,
|
|
283
283
|
variant: b,
|
|
284
284
|
noBackground: u,
|
|
285
|
-
|
|
285
|
+
truncate: m
|
|
286
286
|
}),
|
|
287
287
|
oe({ mode: a, noBackground: u, variant: b }),
|
|
288
288
|
ie({ radius: _ }),
|
|
289
|
-
|
|
289
|
+
te({
|
|
290
290
|
type: e,
|
|
291
291
|
size: c,
|
|
292
292
|
labelRight: h,
|
|
@@ -294,7 +294,7 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
294
294
|
align: w,
|
|
295
295
|
animated: g
|
|
296
296
|
}),
|
|
297
|
-
|
|
297
|
+
re({ type: e, size: c, labelRight: h, labelLeft: v }),
|
|
298
298
|
se({ mode: a, variant: b, noBorder: d }),
|
|
299
299
|
ce({ focusMode: l }),
|
|
300
300
|
le({ mode: a, variant: b, disabled: i }),
|
|
@@ -306,18 +306,18 @@ const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re
|
|
|
306
306
|
o({
|
|
307
307
|
"transition-[width] duration-300 ease-in-out": e === C && g
|
|
308
308
|
}),
|
|
309
|
-
|
|
310
|
-
)), ge = (e,
|
|
309
|
+
r
|
|
310
|
+
)), ge = (e, r, t) => {
|
|
311
311
|
var a;
|
|
312
|
-
!
|
|
313
|
-
}, D = V.forwardRef((e,
|
|
314
|
-
const { onClick:
|
|
312
|
+
!r && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
|
|
313
|
+
}, D = V.forwardRef((e, r) => {
|
|
314
|
+
const { onClick: t, noInternalClick: a = !1, ...l } = e;
|
|
315
315
|
return /* @__PURE__ */ s(
|
|
316
316
|
"button",
|
|
317
317
|
{
|
|
318
|
-
ref:
|
|
318
|
+
ref: r,
|
|
319
319
|
onClick: (i) => {
|
|
320
|
-
ge(i, a,
|
|
320
|
+
ge(i, a, t);
|
|
321
321
|
},
|
|
322
322
|
...l
|
|
323
323
|
}
|
|
@@ -331,10 +331,10 @@ function me() {
|
|
|
331
331
|
}), []), ee(() => e.current, []);
|
|
332
332
|
}
|
|
333
333
|
function he(e) {
|
|
334
|
-
return P(() => e.every((
|
|
335
|
-
} : (
|
|
336
|
-
e.forEach((
|
|
337
|
-
typeof
|
|
334
|
+
return P(() => e.every((r) => r == null) ? () => {
|
|
335
|
+
} : (r) => {
|
|
336
|
+
e.forEach((t) => {
|
|
337
|
+
typeof t == "function" ? t(r) : t != null && (t.current = r);
|
|
338
338
|
});
|
|
339
339
|
}, e);
|
|
340
340
|
}
|
|
@@ -349,14 +349,14 @@ const fe = {
|
|
|
349
349
|
right: 0
|
|
350
350
|
};
|
|
351
351
|
function S(e) {
|
|
352
|
-
const
|
|
352
|
+
const r = me(), t = B(0), a = B(null), [l, i] = q(fe), n = P(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((c) => {
|
|
353
353
|
const d = c[0];
|
|
354
|
-
d && (cancelAnimationFrame(
|
|
355
|
-
a.current &&
|
|
354
|
+
d && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
|
|
355
|
+
a.current && r() && i(d.contentRect);
|
|
356
356
|
}));
|
|
357
|
-
}), [
|
|
357
|
+
}), [r]);
|
|
358
358
|
return L(() => (a.current && (n == null || n.observe(a.current, e)), () => {
|
|
359
|
-
n == null || n.disconnect(),
|
|
359
|
+
n == null || n.disconnect(), t.current && cancelAnimationFrame(t.current);
|
|
360
360
|
}), [n, e]), [a, l];
|
|
361
361
|
}
|
|
362
362
|
const ve = {
|
|
@@ -376,8 +376,8 @@ const ve = {
|
|
|
376
376
|
}, ye = 2, U = V.forwardRef(
|
|
377
377
|
({
|
|
378
378
|
children: e,
|
|
379
|
-
disabled:
|
|
380
|
-
mode:
|
|
379
|
+
disabled: r = !1,
|
|
380
|
+
mode: t = "system",
|
|
381
381
|
focusMode: a = "system",
|
|
382
382
|
fullWidth: l = !1,
|
|
383
383
|
className: i,
|
|
@@ -392,17 +392,17 @@ const ve = {
|
|
|
392
392
|
noBackground: w = !1,
|
|
393
393
|
align: _ = "center",
|
|
394
394
|
radius: g = "large",
|
|
395
|
-
variant:
|
|
395
|
+
variant: z = "primary",
|
|
396
396
|
iconClassName: W,
|
|
397
397
|
animated: p = !1,
|
|
398
398
|
...X
|
|
399
399
|
}, Z) => {
|
|
400
400
|
const J = ue({
|
|
401
401
|
type: C,
|
|
402
|
-
mode:
|
|
402
|
+
mode: t,
|
|
403
403
|
focusMode: a,
|
|
404
404
|
fullWidth: l,
|
|
405
|
-
disabled:
|
|
405
|
+
disabled: r,
|
|
406
406
|
raw: c,
|
|
407
407
|
className: i,
|
|
408
408
|
noBorder: d,
|
|
@@ -412,18 +412,18 @@ const ve = {
|
|
|
412
412
|
noBackground: w,
|
|
413
413
|
align: _,
|
|
414
414
|
radius: g,
|
|
415
|
-
variant:
|
|
415
|
+
variant: z,
|
|
416
416
|
animated: p
|
|
417
|
-
}), K = de({ mode:
|
|
417
|
+
}), K = de({ mode: t, raw: c, iconClassName: W }), O = be({ animated: p }), [f, E] = S(), [y, R] = S(), [N, j] = S(), T = B(0), k = B(null), Q = he([Z, k]);
|
|
418
418
|
return $(() => {
|
|
419
|
-
N && N.current && p && (
|
|
419
|
+
N && N.current && p && (T.current = j.width + pe[u] + (d ? 0 : ye));
|
|
420
420
|
}, [j, N, u, d, p]), $(() => {
|
|
421
|
-
k && k.current && p && (b && f &&
|
|
421
|
+
k && k.current && p && (b && f && E.width > 0 ? (f.current && (f.current.style.opacity = "100"), k.current.style.width = `${E.width + T.current}px`) : m && R.width > 0 ? (y.current && (y.current.style.opacity = "100"), k.current.style.width = `${R.width + T.current}px`) : (f.current && (f.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), k.current.style.width = `${ve[u]}px`));
|
|
422
422
|
}, [
|
|
423
|
-
|
|
423
|
+
E,
|
|
424
424
|
b,
|
|
425
425
|
f,
|
|
426
|
-
|
|
426
|
+
R,
|
|
427
427
|
m,
|
|
428
428
|
y,
|
|
429
429
|
u,
|
|
@@ -433,7 +433,7 @@ const ve = {
|
|
|
433
433
|
{
|
|
434
434
|
ref: Q,
|
|
435
435
|
className: J,
|
|
436
|
-
disabled:
|
|
436
|
+
disabled: r,
|
|
437
437
|
type: n,
|
|
438
438
|
"aria-label": h || v,
|
|
439
439
|
...X,
|
|
@@ -463,19 +463,19 @@ const ve = {
|
|
|
463
463
|
}
|
|
464
464
|
), H = ({
|
|
465
465
|
labelRef: e,
|
|
466
|
-
labelClass:
|
|
467
|
-
label:
|
|
466
|
+
labelClass: r,
|
|
467
|
+
label: t,
|
|
468
468
|
labelInnerClass: a
|
|
469
|
-
}) => /* @__PURE__ */ s("span", { ref: e, className:
|
|
469
|
+
}) => /* @__PURE__ */ s("span", { ref: e, className: r, children: t && /* @__PURE__ */ s("span", { className: a, children: t }) });
|
|
470
470
|
U.displayName = "ButtonIcon";
|
|
471
471
|
/*!
|
|
472
|
-
@versini/ui-button
|
|
472
|
+
@versini/ui-button v5.0.1
|
|
473
473
|
© 2025 gizmette.com
|
|
474
474
|
*/
|
|
475
475
|
try {
|
|
476
476
|
window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
|
|
477
|
-
version: "
|
|
478
|
-
buildTime: "03/
|
|
477
|
+
version: "5.0.1",
|
|
478
|
+
buildTime: "03/14/2025 05:17 PM EDT",
|
|
479
479
|
homepage: "https://github.com/aversini/ui-components",
|
|
480
480
|
license: "MIT"
|
|
481
481
|
});
|
|
@@ -484,8 +484,8 @@ try {
|
|
|
484
484
|
const ke = V.forwardRef(
|
|
485
485
|
({
|
|
486
486
|
children: e,
|
|
487
|
-
mode:
|
|
488
|
-
className:
|
|
487
|
+
mode: r = "system",
|
|
488
|
+
className: t,
|
|
489
489
|
active: a = !1,
|
|
490
490
|
...l
|
|
491
491
|
}, i) => {
|
|
@@ -500,18 +500,18 @@ const ke = V.forwardRef(
|
|
|
500
500
|
"after:left-0",
|
|
501
501
|
"after:right-0",
|
|
502
502
|
{
|
|
503
|
-
"after:border-table-dark":
|
|
504
|
-
"after:border-table-light":
|
|
505
|
-
"after:border-table-dark dark:after:border-table-light":
|
|
506
|
-
"after:border-table-light dark:after:border-table-dark":
|
|
503
|
+
"after:border-table-dark": r === "dark",
|
|
504
|
+
"after:border-table-light": r === "light",
|
|
505
|
+
"after:border-table-dark dark:after:border-table-light": r === "system",
|
|
506
|
+
"after:border-table-light dark:after:border-table-dark": r === "alt-system"
|
|
507
507
|
}
|
|
508
508
|
) : "";
|
|
509
509
|
return /* @__PURE__ */ s("div", { className: n, children: /* @__PURE__ */ s(
|
|
510
510
|
U,
|
|
511
511
|
{
|
|
512
|
-
className: o("justify-center",
|
|
512
|
+
className: o("justify-center", t),
|
|
513
513
|
ref: i,
|
|
514
|
-
mode:
|
|
514
|
+
mode: r,
|
|
515
515
|
radius: "small",
|
|
516
516
|
...l,
|
|
517
517
|
children: e
|
|
@@ -522,8 +522,8 @@ const ke = V.forwardRef(
|
|
|
522
522
|
ke.displayName = "ButtonSort";
|
|
523
523
|
const G = ({
|
|
524
524
|
children: e,
|
|
525
|
-
fill:
|
|
526
|
-
viewBox:
|
|
525
|
+
fill: r,
|
|
526
|
+
viewBox: t,
|
|
527
527
|
className: a,
|
|
528
528
|
defaultViewBox: l,
|
|
529
529
|
size: i,
|
|
@@ -537,8 +537,8 @@ const G = ({
|
|
|
537
537
|
{
|
|
538
538
|
xmlns: "http://www.w3.org/2000/svg",
|
|
539
539
|
className: h,
|
|
540
|
-
viewBox:
|
|
541
|
-
fill:
|
|
540
|
+
viewBox: t || l,
|
|
541
|
+
fill: r || "currentColor",
|
|
542
542
|
role: "img",
|
|
543
543
|
"aria-hidden": !c,
|
|
544
544
|
focusable: !1,
|
|
@@ -565,8 +565,8 @@ try {
|
|
|
565
565
|
}
|
|
566
566
|
const xe = ({
|
|
567
567
|
className: e,
|
|
568
|
-
viewBox:
|
|
569
|
-
title:
|
|
568
|
+
viewBox: r,
|
|
569
|
+
title: t,
|
|
570
570
|
monotone: a,
|
|
571
571
|
...l
|
|
572
572
|
}) => /* @__PURE__ */ x(
|
|
@@ -574,9 +574,9 @@ const xe = ({
|
|
|
574
574
|
{
|
|
575
575
|
defaultViewBox: "0 0 448 512",
|
|
576
576
|
size: "size-5",
|
|
577
|
-
viewBox:
|
|
577
|
+
viewBox: r,
|
|
578
578
|
className: e,
|
|
579
|
-
title:
|
|
579
|
+
title: t || "Copied",
|
|
580
580
|
...l,
|
|
581
581
|
children: [
|
|
582
582
|
/* @__PURE__ */ s(
|
|
@@ -591,8 +591,8 @@ const xe = ({
|
|
|
591
591
|
}
|
|
592
592
|
), we = ({
|
|
593
593
|
className: e,
|
|
594
|
-
viewBox:
|
|
595
|
-
title:
|
|
594
|
+
viewBox: r,
|
|
595
|
+
title: t,
|
|
596
596
|
monotone: a,
|
|
597
597
|
...l
|
|
598
598
|
}) => /* @__PURE__ */ s(
|
|
@@ -600,9 +600,9 @@ const xe = ({
|
|
|
600
600
|
{
|
|
601
601
|
defaultViewBox: "0 0 512 512",
|
|
602
602
|
size: "size-5",
|
|
603
|
-
viewBox:
|
|
603
|
+
viewBox: r,
|
|
604
604
|
className: e,
|
|
605
|
-
title:
|
|
605
|
+
title: t || "Copy",
|
|
606
606
|
...l,
|
|
607
607
|
children: /* @__PURE__ */ s("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" })
|
|
608
608
|
}
|
|
@@ -620,9 +620,9 @@ try {
|
|
|
620
620
|
});
|
|
621
621
|
} catch {
|
|
622
622
|
}
|
|
623
|
-
const _e = ({ kind: e, noMaxWidth:
|
|
624
|
-
"max-w-xs sm:max-w-md md:max-w-2xl": !
|
|
625
|
-
"lg:max-w-3xl": e === "left" && !
|
|
623
|
+
const _e = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
|
|
624
|
+
"max-w-xs sm:max-w-md md:max-w-2xl": !r,
|
|
625
|
+
"lg:max-w-3xl": e === "left" && !r
|
|
626
626
|
}), Be = ({ kind: e }) => o({
|
|
627
627
|
"bg-surface-lighter dark:bg-surface-dark": e === "left",
|
|
628
628
|
"bg-surface-accent": e === "right"
|
|
@@ -634,8 +634,8 @@ const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
|
|
|
634
634
|
{
|
|
635
635
|
"text-copy-lighter": e === "right"
|
|
636
636
|
}
|
|
637
|
-
), Ie = ({ kind: e, tail:
|
|
638
|
-
if (
|
|
637
|
+
), Ie = ({ kind: e, tail: r }) => {
|
|
638
|
+
if (r)
|
|
639
639
|
return o(
|
|
640
640
|
`${I}-${e}-tail`,
|
|
641
641
|
"rounded-3xl",
|
|
@@ -650,15 +650,15 @@ const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
|
|
|
650
650
|
"last-bubble-left:before:left-[2px] last-bubble-left:before:border-r-[8px] last-bubble-left:before:border-r-surface-lighter last-bubble-left:dark:before:border-r-surface-dark last-bubble-left:before:rounded-br-[100%]": e === "left"
|
|
651
651
|
}
|
|
652
652
|
);
|
|
653
|
-
if (!
|
|
653
|
+
if (!r)
|
|
654
654
|
return o("rounded-b-xl", {
|
|
655
655
|
"rounded-tr-xl": e === "left",
|
|
656
656
|
"rounded-tl-xl": e === "right"
|
|
657
657
|
});
|
|
658
658
|
}, Ce = ({
|
|
659
659
|
kind: e,
|
|
660
|
-
className:
|
|
661
|
-
contentClassName:
|
|
660
|
+
className: r,
|
|
661
|
+
contentClassName: t,
|
|
662
662
|
noMaxWidth: a,
|
|
663
663
|
tail: l
|
|
664
664
|
}) => {
|
|
@@ -669,7 +669,7 @@ const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
|
|
|
669
669
|
{
|
|
670
670
|
"flex-row-reverse": e === "right"
|
|
671
671
|
},
|
|
672
|
-
|
|
672
|
+
r
|
|
673
673
|
), n = o(
|
|
674
674
|
`${I}-content`,
|
|
675
675
|
"flex flex-col empty:hidden",
|
|
@@ -677,7 +677,7 @@ const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
|
|
|
677
677
|
Ne({ kind: e }),
|
|
678
678
|
Be({ kind: e }),
|
|
679
679
|
Ie({ kind: e, tail: l }),
|
|
680
|
-
|
|
680
|
+
t
|
|
681
681
|
), c = "pr-2 pt-1 text-end text-xs text-copy-light", d = o("flex flex-col-reverse sm:flex-row", {
|
|
682
682
|
"ml-2": e === "left" && !l,
|
|
683
683
|
"mr-2": e === "right" && !l,
|
|
@@ -690,10 +690,10 @@ const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
|
|
|
690
690
|
footer: c,
|
|
691
691
|
copyButton: d
|
|
692
692
|
};
|
|
693
|
-
},
|
|
693
|
+
}, Te = ({
|
|
694
694
|
children: e,
|
|
695
|
-
kind:
|
|
696
|
-
className:
|
|
695
|
+
kind: r = "left",
|
|
696
|
+
className: t,
|
|
697
697
|
contentClassName: a,
|
|
698
698
|
footer: l,
|
|
699
699
|
rawFooter: i,
|
|
@@ -704,8 +704,8 @@ const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
|
|
|
704
704
|
tail: v = !1
|
|
705
705
|
}) => {
|
|
706
706
|
const [u, b] = q(!1), m = Ce({
|
|
707
|
-
kind:
|
|
708
|
-
className:
|
|
707
|
+
kind: r,
|
|
708
|
+
className: t,
|
|
709
709
|
contentClassName: a,
|
|
710
710
|
noMaxWidth: h,
|
|
711
711
|
tail: v
|
|
@@ -722,11 +722,11 @@ const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
|
|
|
722
722
|
}, [u]), /* @__PURE__ */ x("div", { className: m.wrapper, children: [
|
|
723
723
|
/* @__PURE__ */ x("div", { children: [
|
|
724
724
|
/* @__PURE__ */ s("div", { className: m.main, children: e }),
|
|
725
|
-
l && Object.keys(l).map((g,
|
|
725
|
+
l && Object.keys(l).map((g, z) => l[g] ? /* @__PURE__ */ s("div", { className: "prose-p:m-0", children: /* @__PURE__ */ x("p", { className: m.footer, children: [
|
|
726
726
|
g,
|
|
727
727
|
": ",
|
|
728
728
|
l[g]
|
|
729
|
-
] }) }, `${g}-${
|
|
729
|
+
] }) }, `${g}-${z}`) : null),
|
|
730
730
|
i && i
|
|
731
731
|
] }),
|
|
732
732
|
w && /* @__PURE__ */ s("div", { className: m.copyButton, children: /* @__PURE__ */ s(
|
|
@@ -747,5 +747,5 @@ const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
|
|
|
747
747
|
};
|
|
748
748
|
export {
|
|
749
749
|
I as BUBBLE_CLASSNAME,
|
|
750
|
-
|
|
750
|
+
Te as Bubble
|
|
751
751
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-bubble",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
"react-dom": "^18.3.1 || ^19.0.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@versini/ui-types": "
|
|
42
|
+
"@versini/ui-types": "5.0.0"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@tailwindcss/typography": "0.5.16",
|
|
46
|
-
"@versini/ui-button": "
|
|
46
|
+
"@versini/ui-button": "5.0.1",
|
|
47
47
|
"@versini/ui-icons": "4.8.1",
|
|
48
48
|
"clsx": "2.1.1",
|
|
49
49
|
"tailwindcss": "3.4.17"
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"sideEffects": [
|
|
52
52
|
"**/*.css"
|
|
53
53
|
],
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "37955472858096264438083d812d3b12585b0253"
|
|
55
55
|
}
|