@versini/ui-bubble 4.1.4 → 5.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.
- package/README.md +281 -1
- package/dist/components/Bubble/Bubble.js +236 -204
- package/dist/index.js +3 -3
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -1,3 +1,283 @@
|
|
|
1
1
|
# @versini/ui-bubble
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@versini/ui-bubble)
|
|
4
|
+
|
|
5
|
+
> A flexible and feature-rich React bubble component built with TypeScript and TailwindCSS.
|
|
6
|
+
|
|
7
|
+
The Bubble component provides chat-style message bubbles with support for footers, copy-to-clipboard functionality, and customizable positioning. Perfect for building chat interfaces, notifications, or callout sections.
|
|
8
|
+
|
|
9
|
+
## Table of Contents
|
|
10
|
+
|
|
11
|
+
- [Features](#features)
|
|
12
|
+
- [Installation](#installation)
|
|
13
|
+
- [Usage](#usage)
|
|
14
|
+
- [API](#api)
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- **🎯 Chat Bubbles**: Left and right-aligned message bubbles with optional tails
|
|
19
|
+
- **📋 Copy Functionality**: Built-in copy-to-clipboard with custom copy handling
|
|
20
|
+
- **📊 Footer Support**: Structured footer with key-value pairs or raw JSX
|
|
21
|
+
- **♿ Accessible**: Keyboard navigation and screen reader support
|
|
22
|
+
- **🎨 Customizable**: Multiple styling options and theme support
|
|
23
|
+
- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
|
|
24
|
+
- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
|
|
25
|
+
|
|
26
|
+
## Installation
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install @versini/ui-bubble
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
### Basic Bubbles
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { Bubble } from "@versini/ui-bubble";
|
|
40
|
+
|
|
41
|
+
function App() {
|
|
42
|
+
return (
|
|
43
|
+
<div className="space-y-4">
|
|
44
|
+
<Bubble kind="left" tail>
|
|
45
|
+
Hello! This is a left-aligned message.
|
|
46
|
+
</Bubble>
|
|
47
|
+
|
|
48
|
+
<Bubble kind="right" tail>
|
|
49
|
+
And this is a right-aligned reply.
|
|
50
|
+
</Bubble>
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Bubble with Footer
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { Bubble } from "@versini/ui-bubble";
|
|
60
|
+
|
|
61
|
+
function App() {
|
|
62
|
+
return (
|
|
63
|
+
<Bubble
|
|
64
|
+
kind="right"
|
|
65
|
+
tail
|
|
66
|
+
footer={{
|
|
67
|
+
Sent: "12:00 PM",
|
|
68
|
+
Delivered: "12:01 PM",
|
|
69
|
+
Read: "12:02 PM"
|
|
70
|
+
}}
|
|
71
|
+
>
|
|
72
|
+
Message with delivery status footer.
|
|
73
|
+
</Bubble>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Copy to Clipboard
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { Bubble } from "@versini/ui-bubble";
|
|
82
|
+
|
|
83
|
+
function App() {
|
|
84
|
+
return (
|
|
85
|
+
<div className="space-y-4">
|
|
86
|
+
{/* Simple copy - copies the bubble content */}
|
|
87
|
+
<Bubble kind="left" copyToClipboard>
|
|
88
|
+
Click the copy icon to copy this message.
|
|
89
|
+
</Bubble>
|
|
90
|
+
|
|
91
|
+
{/* Custom copy text */}
|
|
92
|
+
<Bubble kind="left" copyToClipboard="Custom text to copy">
|
|
93
|
+
This will copy custom text instead of the bubble content.
|
|
94
|
+
</Bubble>
|
|
95
|
+
|
|
96
|
+
{/* Custom copy function */}
|
|
97
|
+
<Bubble
|
|
98
|
+
kind="left"
|
|
99
|
+
copyToClipboard={(text) => {
|
|
100
|
+
navigator.clipboard.writeText(`Copied: ${text}`);
|
|
101
|
+
}}
|
|
102
|
+
>
|
|
103
|
+
This uses a custom copy function.
|
|
104
|
+
</Bubble>
|
|
105
|
+
</div>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Chat Interface
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import { Bubble } from "@versini/ui-bubble";
|
|
114
|
+
|
|
115
|
+
function ChatExample() {
|
|
116
|
+
const messages = [
|
|
117
|
+
{ id: 1, text: "Hey, how are you?", kind: "left", time: "10:30 AM" },
|
|
118
|
+
{
|
|
119
|
+
id: 2,
|
|
120
|
+
text: "I'm good, thanks! How about you?",
|
|
121
|
+
kind: "right",
|
|
122
|
+
time: "10:32 AM"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
id: 3,
|
|
126
|
+
text: "Doing great! Want to grab lunch?",
|
|
127
|
+
kind: "left",
|
|
128
|
+
time: "10:35 AM"
|
|
129
|
+
}
|
|
130
|
+
];
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<div className="max-w-md mx-auto space-y-3 p-4 bg-gray-50 rounded-lg">
|
|
134
|
+
{messages.map((message) => (
|
|
135
|
+
<Bubble
|
|
136
|
+
key={message.id}
|
|
137
|
+
kind={message.kind}
|
|
138
|
+
tail
|
|
139
|
+
footer={{ Time: message.time }}
|
|
140
|
+
copyToClipboard
|
|
141
|
+
>
|
|
142
|
+
{message.text}
|
|
143
|
+
</Bubble>
|
|
144
|
+
))}
|
|
145
|
+
</div>
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Advanced Footer Usage
|
|
151
|
+
|
|
152
|
+
```tsx
|
|
153
|
+
import { Bubble } from "@versini/ui-bubble";
|
|
154
|
+
|
|
155
|
+
function AdvancedFooterExample() {
|
|
156
|
+
return (
|
|
157
|
+
<div className="space-y-4">
|
|
158
|
+
{/* Structured footer with empty row */}
|
|
159
|
+
<Bubble
|
|
160
|
+
kind="right"
|
|
161
|
+
tail
|
|
162
|
+
footer={{
|
|
163
|
+
"Message ID": "msg-123",
|
|
164
|
+
Sent: "2:30 PM",
|
|
165
|
+
Status: Bubble.FOOTER_EMPTY, // Empty row that maintains height
|
|
166
|
+
Delivered: "2:31 PM",
|
|
167
|
+
Read: "2:35 PM"
|
|
168
|
+
}}
|
|
169
|
+
>
|
|
170
|
+
Message with detailed tracking information.
|
|
171
|
+
</Bubble>
|
|
172
|
+
|
|
173
|
+
{/* Raw JSX footer */}
|
|
174
|
+
<Bubble
|
|
175
|
+
kind="left"
|
|
176
|
+
rawFooter={
|
|
177
|
+
<div className="flex justify-between items-center text-xs">
|
|
178
|
+
<span className="text-green-600">✓ Verified</span>
|
|
179
|
+
<span>3:45 PM</span>
|
|
180
|
+
</div>
|
|
181
|
+
}
|
|
182
|
+
>
|
|
183
|
+
Message with custom JSX footer.
|
|
184
|
+
</Bubble>
|
|
185
|
+
</div>
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Custom Width Control
|
|
191
|
+
|
|
192
|
+
```tsx
|
|
193
|
+
import { Bubble } from "@versini/ui-bubble";
|
|
194
|
+
|
|
195
|
+
function CustomWidthExample() {
|
|
196
|
+
return (
|
|
197
|
+
<div className="space-y-4">
|
|
198
|
+
{/* Default responsive width */}
|
|
199
|
+
<Bubble kind="left" tail>
|
|
200
|
+
This bubble has default responsive width behavior.
|
|
201
|
+
</Bubble>
|
|
202
|
+
|
|
203
|
+
{/* Custom width with container queries */}
|
|
204
|
+
<div style={{ containerType: "inline-size" }} className="w-96">
|
|
205
|
+
<Bubble kind="left" tail noMaxWidth className="max-w-[95cqw]">
|
|
206
|
+
This bubble uses container query width (95% of container width).
|
|
207
|
+
</Bubble>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
{/* Fixed width */}
|
|
211
|
+
<Bubble kind="right" tail noMaxWidth className="w-64">
|
|
212
|
+
This bubble has a fixed width of 256px.
|
|
213
|
+
</Bubble>
|
|
214
|
+
</div>
|
|
215
|
+
);
|
|
216
|
+
}
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Copy Functionality Variations
|
|
220
|
+
|
|
221
|
+
```tsx
|
|
222
|
+
import { Bubble } from "@versini/ui-bubble";
|
|
223
|
+
|
|
224
|
+
function CopyFunctionalityExample() {
|
|
225
|
+
const handleCustomCopy = (text: any) => {
|
|
226
|
+
// Custom copy logic
|
|
227
|
+
const copyText = `Shared message: "${text}"`;
|
|
228
|
+
navigator.clipboard.writeText(copyText);
|
|
229
|
+
console.log("Copied with custom format:", copyText);
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
return (
|
|
233
|
+
<div className="space-y-4">
|
|
234
|
+
{/* Boolean - copies bubble content */}
|
|
235
|
+
<Bubble kind="left" copyToClipboard={true}>
|
|
236
|
+
Basic copy functionality
|
|
237
|
+
</Bubble>
|
|
238
|
+
|
|
239
|
+
{/* String - copies specific text */}
|
|
240
|
+
<Bubble kind="left" copyToClipboard="contact@example.com">
|
|
241
|
+
Click to copy: contact@example.com
|
|
242
|
+
</Bubble>
|
|
243
|
+
|
|
244
|
+
{/* Function - custom copy behavior */}
|
|
245
|
+
<Bubble kind="left" copyToClipboard={handleCustomCopy}>
|
|
246
|
+
Custom copy behavior with formatting
|
|
247
|
+
</Bubble>
|
|
248
|
+
|
|
249
|
+
{/* With custom copy button styling */}
|
|
250
|
+
<Bubble
|
|
251
|
+
kind="right"
|
|
252
|
+
copyToClipboard
|
|
253
|
+
copyToClipboardMode="dark"
|
|
254
|
+
copyToClipboardFocusMode="light"
|
|
255
|
+
>
|
|
256
|
+
Copy button with custom theme
|
|
257
|
+
</Bubble>
|
|
258
|
+
</div>
|
|
259
|
+
);
|
|
260
|
+
}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
## API
|
|
264
|
+
|
|
265
|
+
### Bubble Props
|
|
266
|
+
|
|
267
|
+
| Prop | Type | Default | Description |
|
|
268
|
+
| ------------------------ | ---------------------------------------------------------- | ---------- | ------------------------------------------------------- |
|
|
269
|
+
| children | `React.ReactNode` | - | The text to render in the bubble |
|
|
270
|
+
| kind | `"left" \| "right"` | `"left"` | The type of Bubble (changes color and chevron location) |
|
|
271
|
+
| tail | `boolean` | `false` | Whether or not the Bubble should have a tail |
|
|
272
|
+
| copyToClipboard | `boolean \| string \| ((text: any) => void)` | - | Copy functionality configuration |
|
|
273
|
+
| footer | `{ [key: string]: string \| number \| undefined \| null }` | - | Object depicting the extra rows for the Bubble footer |
|
|
274
|
+
| rawFooter | `React.ReactNode` | - | Same as "footer" but accepts raw JSX |
|
|
275
|
+
| noMaxWidth | `boolean` | `false` | Whether to disable default responsive max-width |
|
|
276
|
+
| className | `string` | - | CSS class(es) to add to the main component wrapper |
|
|
277
|
+
| contentClassName | `string` | - | CSS class(es) to add to the content wrapper |
|
|
278
|
+
| copyToClipboardMode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The mode of Copy Button |
|
|
279
|
+
| copyToClipboardFocusMode | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The focus mode for the Copy Button |
|
|
280
|
+
|
|
281
|
+
### Special Values
|
|
282
|
+
|
|
283
|
+
- `Bubble.FOOTER_EMPTY` - Use in footer to create an empty row that maintains height
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as n, jsxs as B, Fragment as ae } from "react/jsx-runtime";
|
|
2
|
+
import U, { useRef as N, useLayoutEffect as F, useEffect as M, useState as G, useMemo as W, useCallback as ie } from "react";
|
|
3
3
|
import o from "clsx";
|
|
4
|
-
const R = "av-bubble",
|
|
4
|
+
const R = "av-bubble", q = "av-button", j = "icon", Y = "button", L = "link", oe = ({
|
|
5
5
|
type: e,
|
|
6
6
|
size: r,
|
|
7
7
|
labelRight: t,
|
|
@@ -9,16 +9,16 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
9
9
|
align: i,
|
|
10
10
|
animated: l
|
|
11
11
|
}) => {
|
|
12
|
-
const
|
|
12
|
+
const s = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", m = "max-h-12 py-2 px-4";
|
|
13
13
|
switch (e) {
|
|
14
14
|
case Y:
|
|
15
|
-
case
|
|
15
|
+
case L:
|
|
16
16
|
return o({
|
|
17
|
-
[
|
|
17
|
+
[s]: r === "small",
|
|
18
18
|
[d]: r === "medium",
|
|
19
|
-
[
|
|
19
|
+
[m]: r === "large"
|
|
20
20
|
});
|
|
21
|
-
case
|
|
21
|
+
case j:
|
|
22
22
|
return o("flex items-center", {
|
|
23
23
|
"justify-center": i === "center",
|
|
24
24
|
"justify-start": i === "left",
|
|
@@ -43,24 +43,24 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
43
43
|
labelRight: t,
|
|
44
44
|
labelLeft: a
|
|
45
45
|
}) => {
|
|
46
|
-
const i = "text-sm font-medium", l = "text-base font-medium",
|
|
46
|
+
const i = "text-sm font-medium", l = "text-base font-medium", s = "text-lg font-medium";
|
|
47
47
|
switch (e) {
|
|
48
48
|
case Y:
|
|
49
|
-
case
|
|
49
|
+
case L:
|
|
50
50
|
return o({
|
|
51
|
-
"text-center": e ===
|
|
51
|
+
"text-center": e === L,
|
|
52
52
|
[i]: r === "small",
|
|
53
53
|
[l]: r === "medium",
|
|
54
|
-
[
|
|
54
|
+
[s]: r === "large"
|
|
55
55
|
});
|
|
56
|
-
case
|
|
56
|
+
case j:
|
|
57
57
|
return o({
|
|
58
58
|
[i]: r === "small" && (t || a),
|
|
59
59
|
[l]: r === "medium" && (t || a),
|
|
60
|
-
[
|
|
60
|
+
[s]: r === "large" && (t || a)
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
|
-
},
|
|
63
|
+
}, se = ({
|
|
64
64
|
mode: e,
|
|
65
65
|
noBackground: r,
|
|
66
66
|
truncate: t,
|
|
@@ -71,18 +71,18 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
71
71
|
if (a === "primary")
|
|
72
72
|
return o("not-prose", {
|
|
73
73
|
truncate: t,
|
|
74
|
-
"text-copy-
|
|
75
|
-
"text-copy-
|
|
76
|
-
"dark:text-copy-
|
|
77
|
-
"dark:text-copy-
|
|
74
|
+
"text-copy-dark": e === "dark" || e === "system",
|
|
75
|
+
"text-copy-light": e === "light" || e === "alt-system",
|
|
76
|
+
"dark:text-copy-light": e === "system",
|
|
77
|
+
"dark:text-copy-dark": e === "alt-system"
|
|
78
78
|
});
|
|
79
79
|
if (a === "secondary")
|
|
80
80
|
return o("not-prose", {
|
|
81
81
|
truncate: t,
|
|
82
|
-
"text-copy-light": e === "
|
|
83
|
-
"text-copy-
|
|
84
|
-
"dark:text-copy-
|
|
85
|
-
"dark:text-copy-light": e === "system"
|
|
82
|
+
"text-copy-light": e === "dark" || e === "system",
|
|
83
|
+
"text-copy-dark": e === "light" || e === "alt-system",
|
|
84
|
+
"dark:text-copy-dark": e === "system",
|
|
85
|
+
"dark:text-copy-light": e === "alt-system"
|
|
86
86
|
});
|
|
87
87
|
if (a === "danger")
|
|
88
88
|
return o("not-prose", {
|
|
@@ -96,7 +96,7 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
96
96
|
return o("not-prose text-copy-lighter", {
|
|
97
97
|
truncate: t
|
|
98
98
|
});
|
|
99
|
-
},
|
|
99
|
+
}, ne = ({
|
|
100
100
|
mode: e,
|
|
101
101
|
noBackground: r,
|
|
102
102
|
variant: t
|
|
@@ -104,17 +104,17 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
104
104
|
if (!r) {
|
|
105
105
|
if (t === "primary")
|
|
106
106
|
return o({
|
|
107
|
-
"bg-action-
|
|
108
|
-
"bg-action-
|
|
109
|
-
"bg-action-
|
|
110
|
-
"bg-action-
|
|
107
|
+
"bg-action-light": e === "dark",
|
|
108
|
+
"bg-action-dark": e === "light",
|
|
109
|
+
"bg-action-light dark:bg-action-dark": e === "system",
|
|
110
|
+
"bg-action-dark dark:bg-action-light": e === "alt-system"
|
|
111
111
|
});
|
|
112
112
|
if (t === "secondary")
|
|
113
113
|
return o({
|
|
114
|
-
"bg-action-
|
|
115
|
-
"bg-action-
|
|
116
|
-
"bg-action-
|
|
117
|
-
"bg-action-
|
|
114
|
+
"bg-action-light": e === "light",
|
|
115
|
+
"bg-action-dark": e === "dark",
|
|
116
|
+
"bg-action-light dark:bg-action-dark": e === "alt-system",
|
|
117
|
+
"bg-action-dark dark:bg-action-light": e === "system"
|
|
118
118
|
});
|
|
119
119
|
if (t === "danger")
|
|
120
120
|
return o({
|
|
@@ -126,7 +126,7 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
126
126
|
if (t === "selected")
|
|
127
127
|
return "bg-action-selected-dark";
|
|
128
128
|
}
|
|
129
|
-
},
|
|
129
|
+
}, ce = ({
|
|
130
130
|
radius: e
|
|
131
131
|
}) => o({
|
|
132
132
|
"rounded-full": e === "large",
|
|
@@ -140,18 +140,26 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
140
140
|
if (r)
|
|
141
141
|
return "";
|
|
142
142
|
if (t === "primary")
|
|
143
|
-
return o(
|
|
144
|
-
"hover:
|
|
145
|
-
"hover:
|
|
146
|
-
"
|
|
147
|
-
"
|
|
143
|
+
return o({
|
|
144
|
+
"hover:text-copy-dark-hover": e === "dark" || e === "system",
|
|
145
|
+
"hover:text-copy-light-hover": e === "light" || e === "alt-system",
|
|
146
|
+
"dark:hover:text-copy-light-hover": e === "system",
|
|
147
|
+
"dark:hover:text-copy-dark-hover": e === "alt-system",
|
|
148
|
+
"hover:bg-action-light-hover": e === "dark",
|
|
149
|
+
"hover:bg-action-dark-hover": e === "light",
|
|
150
|
+
"hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system",
|
|
151
|
+
"hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system"
|
|
148
152
|
});
|
|
149
153
|
if (t === "secondary")
|
|
150
|
-
return o(
|
|
151
|
-
"hover:
|
|
152
|
-
"hover:
|
|
153
|
-
"
|
|
154
|
-
"
|
|
154
|
+
return o({
|
|
155
|
+
"hover:text-copy-light-hover": e === "dark" || e === "system",
|
|
156
|
+
"hover:text-copy-dark-hover": e === "light" || e === "alt-system",
|
|
157
|
+
"dark:hover:text-copy-dark-hover": e === "system",
|
|
158
|
+
"dark:hover:text-copy-light-hover": e === "alt-system",
|
|
159
|
+
"hover:bg-action-light-hover": e === "light",
|
|
160
|
+
"hover:bg-action-dark-hover": e === "dark",
|
|
161
|
+
"hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system",
|
|
162
|
+
"hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system"
|
|
155
163
|
});
|
|
156
164
|
if (t === "danger")
|
|
157
165
|
return o("hover:text-copy-light-hover", {
|
|
@@ -162,7 +170,7 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
162
170
|
});
|
|
163
171
|
if (t === "selected")
|
|
164
172
|
return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
|
|
165
|
-
},
|
|
173
|
+
}, me = ({
|
|
166
174
|
mode: e,
|
|
167
175
|
disabled: r,
|
|
168
176
|
variant: t
|
|
@@ -170,18 +178,26 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
170
178
|
if (r)
|
|
171
179
|
return "";
|
|
172
180
|
if (t === "primary")
|
|
173
|
-
return o(
|
|
174
|
-
"active:
|
|
175
|
-
"active:
|
|
176
|
-
"
|
|
177
|
-
"
|
|
181
|
+
return o({
|
|
182
|
+
"active:text-copy-dark-active": e === "dark" || e === "system",
|
|
183
|
+
"active:text-copy-light-active": e === "light" || e === "alt-system",
|
|
184
|
+
"dark:active:text-copy-light-active": e === "system",
|
|
185
|
+
"dark:active:text-copy-dark-active": e === "alt-system",
|
|
186
|
+
"active:bg-action-light-active": e === "dark",
|
|
187
|
+
"active:bg-action-dark-active": e === "light",
|
|
188
|
+
"active:bg-action-light-active dark:active:bg-action-dark-active": e === "system",
|
|
189
|
+
"active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system"
|
|
178
190
|
});
|
|
179
191
|
if (t === "secondary")
|
|
180
|
-
return o(
|
|
181
|
-
"active:
|
|
182
|
-
"active:
|
|
183
|
-
"
|
|
184
|
-
"
|
|
192
|
+
return o({
|
|
193
|
+
"active:text-copy-light-active": e === "dark" || e === "system",
|
|
194
|
+
"active:text-copy-dark-active": e === "light" || e === "alt-system",
|
|
195
|
+
"dark:active:text-copy-dark-active": e === "system",
|
|
196
|
+
"dark:active:text-copy-light-active": e === "alt-system",
|
|
197
|
+
"active:bg-action-light-active": e === "light",
|
|
198
|
+
"active:bg-action-dark-active": e === "dark",
|
|
199
|
+
"active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system",
|
|
200
|
+
"active:bg-action-dark-active dark:active:bg-action-light-active": e === "system"
|
|
185
201
|
});
|
|
186
202
|
if (t === "danger")
|
|
187
203
|
return o("active:text-copy-lighter-active", {
|
|
@@ -192,7 +208,7 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
192
208
|
});
|
|
193
209
|
if (t === "selected")
|
|
194
210
|
return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
|
|
195
|
-
},
|
|
211
|
+
}, ue = ({
|
|
196
212
|
mode: e,
|
|
197
213
|
noBorder: r,
|
|
198
214
|
variant: t
|
|
@@ -201,17 +217,17 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
201
217
|
return "border border-transparent";
|
|
202
218
|
if (t === "primary")
|
|
203
219
|
return o("border", {
|
|
204
|
-
"border-border-
|
|
220
|
+
"border-border-medium": e === "dark",
|
|
205
221
|
"border-border-accent": e === "light",
|
|
206
|
-
"border-border-
|
|
207
|
-
"border-border-accent dark:border-border-
|
|
222
|
+
"border-border-medium dark:border-border-accent": e === "system",
|
|
223
|
+
"border-border-accent dark:border-border-medium": e === "alt-system"
|
|
208
224
|
});
|
|
209
225
|
if (t === "secondary")
|
|
210
226
|
return o("border", {
|
|
211
|
-
"border-border-
|
|
227
|
+
"border-border-medium": e === "light",
|
|
212
228
|
"border-border-accent": e === "dark",
|
|
213
|
-
"border-border-
|
|
214
|
-
"border-border-accent dark:border-border-
|
|
229
|
+
"border-border-medium dark:border-border-accent": e === "alt-system",
|
|
230
|
+
"border-border-accent dark:border-border-medium": e === "system"
|
|
215
231
|
});
|
|
216
232
|
if (t === "danger")
|
|
217
233
|
return o("border", {
|
|
@@ -229,19 +245,34 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
229
245
|
"focus:outline-focus-light": e === "light",
|
|
230
246
|
"focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
|
|
231
247
|
"focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
|
|
232
|
-
}),
|
|
248
|
+
}), be = ({
|
|
233
249
|
mode: e,
|
|
234
250
|
raw: r,
|
|
235
|
-
iconClassName: t
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
251
|
+
iconClassName: t,
|
|
252
|
+
variant: a = "primary"
|
|
253
|
+
}) => {
|
|
254
|
+
if (r)
|
|
255
|
+
return "";
|
|
256
|
+
let i = {};
|
|
257
|
+
return a === "primary" ? i = {
|
|
258
|
+
"text-copy-dark": e === "dark" || e === "system",
|
|
259
|
+
"text-copy-light": e === "light" || e === "alt-system",
|
|
260
|
+
"dark:text-copy-light": e === "system",
|
|
261
|
+
"dark:text-copy-dark": e === "alt-system"
|
|
262
|
+
} : a === "secondary" ? i = {
|
|
239
263
|
"text-copy-light": e === "dark" || e === "system",
|
|
240
|
-
"
|
|
241
|
-
"dark:text-copy-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
264
|
+
"text-copy-dark": e === "light" || e === "alt-system",
|
|
265
|
+
"dark:text-copy-dark": e === "system",
|
|
266
|
+
"dark:text-copy-light": e === "alt-system"
|
|
267
|
+
} : a === "danger" ? i = {
|
|
268
|
+
"text-copy-light": e === "dark" || e === "system",
|
|
269
|
+
"text-copy-lighter": e === "light" || e === "alt-system",
|
|
270
|
+
"dark:text-copy-lighter": e === "system",
|
|
271
|
+
"dark:text-copy-light": e === "alt-system"
|
|
272
|
+
} : a === "selected" && (i = {
|
|
273
|
+
"text-copy-lighter": !0
|
|
274
|
+
}), o(i, t);
|
|
275
|
+
}, he = ({
|
|
245
276
|
animated: e
|
|
246
277
|
}) => o({
|
|
247
278
|
"transition-opacity duration-300 ease-in-out": e
|
|
@@ -252,70 +283,69 @@ const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie
|
|
|
252
283
|
mode: a,
|
|
253
284
|
focusMode: i,
|
|
254
285
|
disabled: l,
|
|
255
|
-
fullWidth:
|
|
286
|
+
fullWidth: s,
|
|
256
287
|
size: d,
|
|
257
|
-
noBorder:
|
|
258
|
-
labelRight:
|
|
288
|
+
noBorder: m,
|
|
289
|
+
labelRight: y,
|
|
259
290
|
labelLeft: k,
|
|
260
|
-
noBackground:
|
|
261
|
-
variant:
|
|
291
|
+
noBackground: c,
|
|
292
|
+
variant: u,
|
|
262
293
|
truncate: g,
|
|
263
294
|
align: _,
|
|
264
295
|
radius: I,
|
|
265
|
-
animated:
|
|
266
|
-
}) => (
|
|
267
|
-
|
|
268
|
-
|
|
296
|
+
animated: b
|
|
297
|
+
}) => (u || (u = "primary"), t ? o(q, r) : o(
|
|
298
|
+
q,
|
|
299
|
+
se({
|
|
269
300
|
mode: a,
|
|
270
|
-
variant:
|
|
271
|
-
noBackground:
|
|
301
|
+
variant: u,
|
|
302
|
+
noBackground: c,
|
|
272
303
|
truncate: g
|
|
273
304
|
}),
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
305
|
+
ne({ mode: a, noBackground: c, variant: u }),
|
|
306
|
+
ce({ radius: I }),
|
|
307
|
+
oe({
|
|
277
308
|
type: e,
|
|
278
309
|
size: d,
|
|
279
|
-
labelRight:
|
|
310
|
+
labelRight: y,
|
|
280
311
|
labelLeft: k,
|
|
281
312
|
align: _,
|
|
282
|
-
animated:
|
|
313
|
+
animated: b
|
|
283
314
|
}),
|
|
284
|
-
le({ type: e, size: d, labelRight:
|
|
285
|
-
|
|
315
|
+
le({ type: e, size: d, labelRight: y, labelLeft: k }),
|
|
316
|
+
ue({ mode: a, variant: u, noBorder: m }),
|
|
286
317
|
ge({ focusMode: i }),
|
|
287
|
-
de({ mode: a, variant:
|
|
288
|
-
|
|
318
|
+
de({ mode: a, variant: u, disabled: l }),
|
|
319
|
+
me({ mode: a, variant: u, disabled: l }),
|
|
289
320
|
{
|
|
290
|
-
"w-full":
|
|
321
|
+
"w-full": s,
|
|
291
322
|
"disabled:cursor-not-allowed disabled:opacity-50": l
|
|
292
323
|
},
|
|
293
324
|
o({
|
|
294
|
-
"transition-[width] duration-300 ease-in":
|
|
325
|
+
"transition-[width] duration-300 ease-in": b
|
|
295
326
|
}),
|
|
296
327
|
r
|
|
297
|
-
)),
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
}, J = j.forwardRef((e, r) => {
|
|
328
|
+
)), ye = (e, r, t) => {
|
|
329
|
+
!r && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof e?.currentTarget?.focus == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
|
|
330
|
+
}, J = U.forwardRef((e, r) => {
|
|
301
331
|
const { onClick: t, noInternalClick: a = !1, ...i } = e;
|
|
302
|
-
return /* @__PURE__ */
|
|
332
|
+
return /* @__PURE__ */ n(
|
|
303
333
|
"button",
|
|
304
334
|
{
|
|
305
335
|
ref: r,
|
|
306
336
|
onClick: (l) => {
|
|
307
|
-
|
|
337
|
+
ye(l, a, t);
|
|
308
338
|
},
|
|
309
339
|
...i
|
|
310
340
|
}
|
|
311
341
|
);
|
|
312
342
|
});
|
|
313
343
|
J.displayName = "BaseButton";
|
|
314
|
-
function
|
|
344
|
+
function ve() {
|
|
315
345
|
const e = N(!1);
|
|
316
346
|
return M(() => (e.current = !0, () => {
|
|
317
347
|
e.current = !1;
|
|
318
|
-
}), []),
|
|
348
|
+
}), []), ie(() => e.current, []);
|
|
319
349
|
}
|
|
320
350
|
function pe(e) {
|
|
321
351
|
return W(() => e.every((r) => r == null) ? () => {
|
|
@@ -336,15 +366,15 @@ const ke = {
|
|
|
336
366
|
right: 0
|
|
337
367
|
};
|
|
338
368
|
function O(e) {
|
|
339
|
-
const r =
|
|
340
|
-
const
|
|
341
|
-
|
|
342
|
-
a.current && r() && l(
|
|
369
|
+
const r = ve(), t = N(0), a = N(null), [i, l] = G(ke), s = W(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
|
|
370
|
+
const m = d[0];
|
|
371
|
+
m && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
|
|
372
|
+
a.current && r() && l(m.contentRect);
|
|
343
373
|
}));
|
|
344
374
|
}), [r]);
|
|
345
|
-
return M(() => (a.current &&
|
|
346
|
-
|
|
347
|
-
}), [
|
|
375
|
+
return M(() => (a.current && s?.observe(a.current, e), () => {
|
|
376
|
+
s?.disconnect(), t.current && cancelAnimationFrame(t.current);
|
|
377
|
+
}), [s, e]), [a, i];
|
|
348
378
|
}
|
|
349
379
|
const z = {
|
|
350
380
|
small: 24,
|
|
@@ -354,13 +384,13 @@ const z = {
|
|
|
354
384
|
large: 48
|
|
355
385
|
// w-12
|
|
356
386
|
}, xe = {
|
|
357
|
-
small:
|
|
387
|
+
small: 16,
|
|
358
388
|
// px-2 x 2
|
|
359
|
-
medium:
|
|
389
|
+
medium: 24,
|
|
360
390
|
// px-3 x 2
|
|
361
|
-
large:
|
|
391
|
+
large: 32
|
|
362
392
|
// px-4 x 2
|
|
363
|
-
}, we = 2, Be = 300,
|
|
393
|
+
}, we = 2, Be = 300, H = U.forwardRef(
|
|
364
394
|
({
|
|
365
395
|
children: e,
|
|
366
396
|
disabled: r = !1,
|
|
@@ -368,125 +398,125 @@ const z = {
|
|
|
368
398
|
focusMode: a = "system",
|
|
369
399
|
fullWidth: i = !1,
|
|
370
400
|
className: l,
|
|
371
|
-
type:
|
|
401
|
+
type: s = "button",
|
|
372
402
|
raw: d = !1,
|
|
373
|
-
noBorder:
|
|
374
|
-
"aria-label":
|
|
403
|
+
noBorder: m = !1,
|
|
404
|
+
"aria-label": y,
|
|
375
405
|
label: k,
|
|
376
|
-
size:
|
|
377
|
-
labelRight:
|
|
406
|
+
size: c = "medium",
|
|
407
|
+
labelRight: u,
|
|
378
408
|
labelLeft: g,
|
|
379
409
|
noBackground: _ = !1,
|
|
380
410
|
align: I = "center",
|
|
381
|
-
radius:
|
|
382
|
-
variant:
|
|
383
|
-
iconClassName:
|
|
384
|
-
animated:
|
|
411
|
+
radius: b = "large",
|
|
412
|
+
variant: C = "secondary",
|
|
413
|
+
iconClassName: T,
|
|
414
|
+
animated: v = !1,
|
|
385
415
|
...Q
|
|
386
416
|
}, X) => {
|
|
387
417
|
const Z = fe({
|
|
388
|
-
type:
|
|
418
|
+
type: j,
|
|
389
419
|
mode: t,
|
|
390
420
|
focusMode: a,
|
|
391
421
|
fullWidth: i,
|
|
392
422
|
disabled: r,
|
|
393
423
|
raw: d,
|
|
394
424
|
className: l,
|
|
395
|
-
noBorder:
|
|
396
|
-
size:
|
|
397
|
-
labelRight:
|
|
425
|
+
noBorder: m,
|
|
426
|
+
size: c,
|
|
427
|
+
labelRight: u,
|
|
398
428
|
labelLeft: g,
|
|
399
429
|
noBackground: _,
|
|
400
430
|
align: I,
|
|
401
|
-
radius:
|
|
402
|
-
variant:
|
|
403
|
-
animated:
|
|
404
|
-
}), ee =
|
|
431
|
+
radius: b,
|
|
432
|
+
variant: C,
|
|
433
|
+
animated: v
|
|
434
|
+
}), ee = be({ mode: t, raw: d, iconClassName: T, variant: C }), A = he({ animated: v }), te = "flex items-center justify-center relative w-full h-full overflow-hidden", [h, $] = O(), [f, S] = O(), [E, P] = O(), V = N(0), p = N(null), x = N(null), re = pe([X, p]);
|
|
405
435
|
return F(() => {
|
|
406
|
-
E && E.current &&
|
|
407
|
-
}, [P, E,
|
|
408
|
-
if (p && p.current &&
|
|
409
|
-
let w = z[
|
|
410
|
-
|
|
411
|
-
h.current &&
|
|
412
|
-
}, Be * 0.8))), w === z[
|
|
436
|
+
E && E.current && v && (V.current = P.width + xe[c] + (m ? 0 : we), p.current && !p.current.style.width && (p.current.style.width = `${z[c]}px`));
|
|
437
|
+
}, [P, E, c, m, v]), F(() => {
|
|
438
|
+
if (p && p.current && v) {
|
|
439
|
+
let w = z[c];
|
|
440
|
+
u && h && $.width > 0 ? w = $.width + V.current : g && f && S.width > 0 && (w = S.width + V.current), x.current && clearTimeout(x.current), w !== parseInt(p.current.style.width || "0", 10) && (h.current && (h.current.style.opacity = "0"), f.current && (f.current.style.opacity = "0"), p.current.style.width = `${w}px`, w > z[c] && (x.current = setTimeout(() => {
|
|
441
|
+
h.current && u && (h.current.style.opacity = "1"), f.current && g && (f.current.style.opacity = "1"), x.current = null;
|
|
442
|
+
}, Be * 0.8))), w === z[c] && (h.current && (h.current.style.opacity = "0"), f.current && (f.current.style.opacity = "0"));
|
|
413
443
|
}
|
|
414
444
|
}, [
|
|
415
|
-
|
|
416
|
-
|
|
445
|
+
$,
|
|
446
|
+
u,
|
|
417
447
|
h,
|
|
418
|
-
|
|
448
|
+
S,
|
|
419
449
|
g,
|
|
420
450
|
f,
|
|
421
|
-
|
|
422
|
-
|
|
451
|
+
c,
|
|
452
|
+
v
|
|
423
453
|
]), M(() => () => {
|
|
424
454
|
x.current && clearTimeout(x.current);
|
|
425
|
-
}, []), /* @__PURE__ */
|
|
455
|
+
}, []), /* @__PURE__ */ n(
|
|
426
456
|
J,
|
|
427
457
|
{
|
|
428
458
|
ref: re,
|
|
429
459
|
className: Z,
|
|
430
460
|
disabled: r,
|
|
431
|
-
type:
|
|
432
|
-
"aria-label":
|
|
461
|
+
type: s,
|
|
462
|
+
"aria-label": y || k,
|
|
433
463
|
...Q,
|
|
434
464
|
children: /* @__PURE__ */ B("div", { className: te, children: [
|
|
435
|
-
/* @__PURE__ */
|
|
436
|
-
|
|
465
|
+
/* @__PURE__ */ n(
|
|
466
|
+
D,
|
|
437
467
|
{
|
|
438
468
|
label: g,
|
|
439
469
|
labelRef: f,
|
|
440
470
|
labelClass: A,
|
|
441
471
|
labelInnerClass: "pr-2",
|
|
442
|
-
initiallyHidden:
|
|
472
|
+
initiallyHidden: v
|
|
443
473
|
}
|
|
444
474
|
),
|
|
445
|
-
/* @__PURE__ */
|
|
446
|
-
/* @__PURE__ */
|
|
447
|
-
|
|
475
|
+
/* @__PURE__ */ n("span", { ref: E, className: ee, children: e }),
|
|
476
|
+
/* @__PURE__ */ n(
|
|
477
|
+
D,
|
|
448
478
|
{
|
|
449
|
-
label:
|
|
479
|
+
label: u,
|
|
450
480
|
labelRef: h,
|
|
451
481
|
labelClass: A,
|
|
452
482
|
labelInnerClass: "pl-2",
|
|
453
|
-
initiallyHidden:
|
|
483
|
+
initiallyHidden: v
|
|
454
484
|
}
|
|
455
485
|
)
|
|
456
486
|
] })
|
|
457
487
|
}
|
|
458
488
|
);
|
|
459
489
|
}
|
|
460
|
-
),
|
|
490
|
+
), D = ({
|
|
461
491
|
labelRef: e,
|
|
462
492
|
labelClass: r,
|
|
463
493
|
label: t,
|
|
464
494
|
labelInnerClass: a,
|
|
465
495
|
initiallyHidden: i = !1
|
|
466
|
-
}) => /* @__PURE__ */
|
|
496
|
+
}) => /* @__PURE__ */ n(
|
|
467
497
|
"span",
|
|
468
498
|
{
|
|
469
499
|
ref: e,
|
|
470
500
|
className: r,
|
|
471
501
|
style: i ? { opacity: 0 } : void 0,
|
|
472
|
-
children: t && /* @__PURE__ */
|
|
502
|
+
children: t && /* @__PURE__ */ n("span", { className: a, children: t })
|
|
473
503
|
}
|
|
474
504
|
);
|
|
475
|
-
|
|
505
|
+
H.displayName = "ButtonIcon";
|
|
476
506
|
/*!
|
|
477
|
-
@versini/ui-button
|
|
507
|
+
@versini/ui-button v7.1.0
|
|
478
508
|
© 2025 gizmette.com
|
|
479
509
|
*/
|
|
480
510
|
try {
|
|
481
511
|
window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
|
|
482
|
-
version: "
|
|
483
|
-
buildTime: "
|
|
512
|
+
version: "7.1.0",
|
|
513
|
+
buildTime: "08/10/2025 12:46 PM EDT",
|
|
484
514
|
homepage: "https://github.com/aversini/ui-components",
|
|
485
515
|
license: "MIT"
|
|
486
516
|
});
|
|
487
517
|
} catch {
|
|
488
518
|
}
|
|
489
|
-
const Ne =
|
|
519
|
+
const Ne = U.forwardRef(
|
|
490
520
|
({
|
|
491
521
|
children: e,
|
|
492
522
|
mode: r = "system",
|
|
@@ -494,7 +524,7 @@ const Ne = j.forwardRef(
|
|
|
494
524
|
active: a = !1,
|
|
495
525
|
...i
|
|
496
526
|
}, l) => {
|
|
497
|
-
const
|
|
527
|
+
const s = a ? o(
|
|
498
528
|
"relative",
|
|
499
529
|
"focus-within:static",
|
|
500
530
|
"focus-within:after:border-transparent",
|
|
@@ -511,13 +541,15 @@ const Ne = j.forwardRef(
|
|
|
511
541
|
"after:border-table-light dark:after:border-table-dark": r === "alt-system"
|
|
512
542
|
}
|
|
513
543
|
) : "";
|
|
514
|
-
return /* @__PURE__ */
|
|
515
|
-
|
|
544
|
+
return /* @__PURE__ */ n("div", { className: s, children: /* @__PURE__ */ n(
|
|
545
|
+
H,
|
|
516
546
|
{
|
|
517
|
-
className:
|
|
547
|
+
className: t,
|
|
518
548
|
ref: l,
|
|
519
549
|
mode: r,
|
|
520
550
|
radius: "small",
|
|
551
|
+
size: "small",
|
|
552
|
+
align: "center",
|
|
521
553
|
...i,
|
|
522
554
|
children: e
|
|
523
555
|
}
|
|
@@ -532,24 +564,24 @@ const K = ({
|
|
|
532
564
|
className: a,
|
|
533
565
|
defaultViewBox: i,
|
|
534
566
|
size: l,
|
|
535
|
-
title:
|
|
567
|
+
title: s,
|
|
536
568
|
semantic: d = !1,
|
|
537
|
-
...
|
|
569
|
+
...m
|
|
538
570
|
}) => {
|
|
539
|
-
const
|
|
540
|
-
return /* @__PURE__ */
|
|
571
|
+
const y = o(l, a);
|
|
572
|
+
return /* @__PURE__ */ n(ae, { children: /* @__PURE__ */ B(
|
|
541
573
|
"svg",
|
|
542
574
|
{
|
|
543
575
|
xmlns: "http://www.w3.org/2000/svg",
|
|
544
|
-
className:
|
|
576
|
+
className: y,
|
|
545
577
|
viewBox: t || i,
|
|
546
578
|
fill: r || "currentColor",
|
|
547
579
|
role: "img",
|
|
548
580
|
"aria-hidden": !d,
|
|
549
581
|
focusable: !1,
|
|
550
|
-
...
|
|
582
|
+
...m,
|
|
551
583
|
children: [
|
|
552
|
-
|
|
584
|
+
s && d && /* @__PURE__ */ n("title", { children: s }),
|
|
553
585
|
e
|
|
554
586
|
]
|
|
555
587
|
}
|
|
@@ -584,14 +616,14 @@ const _e = ({
|
|
|
584
616
|
title: t || "Copied",
|
|
585
617
|
...i,
|
|
586
618
|
children: [
|
|
587
|
-
/* @__PURE__ */
|
|
619
|
+
/* @__PURE__ */ n(
|
|
588
620
|
"path",
|
|
589
621
|
{
|
|
590
622
|
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",
|
|
591
623
|
opacity: ".4"
|
|
592
624
|
}
|
|
593
625
|
),
|
|
594
|
-
/* @__PURE__ */
|
|
626
|
+
/* @__PURE__ */ n("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" })
|
|
595
627
|
]
|
|
596
628
|
}
|
|
597
629
|
), Ie = ({
|
|
@@ -600,7 +632,7 @@ const _e = ({
|
|
|
600
632
|
title: t,
|
|
601
633
|
monotone: a,
|
|
602
634
|
...i
|
|
603
|
-
}) => /* @__PURE__ */
|
|
635
|
+
}) => /* @__PURE__ */ n(
|
|
604
636
|
K,
|
|
605
637
|
{
|
|
606
638
|
defaultViewBox: "0 0 512 512",
|
|
@@ -609,7 +641,7 @@ const _e = ({
|
|
|
609
641
|
className: e,
|
|
610
642
|
title: t || "Copy",
|
|
611
643
|
...i,
|
|
612
|
-
children: /* @__PURE__ */
|
|
644
|
+
children: /* @__PURE__ */ n("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" })
|
|
613
645
|
}
|
|
614
646
|
);
|
|
615
647
|
/*!
|
|
@@ -674,7 +706,7 @@ const Ce = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
|
|
|
674
706
|
"flex-row-reverse": e === "right"
|
|
675
707
|
},
|
|
676
708
|
r
|
|
677
|
-
),
|
|
709
|
+
), s = o(
|
|
678
710
|
`${R}-content`,
|
|
679
711
|
"flex flex-col empty:hidden",
|
|
680
712
|
Ce({ kind: e, noMaxWidth: a }),
|
|
@@ -682,7 +714,7 @@ const Ce = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
|
|
|
682
714
|
Te({ kind: e }),
|
|
683
715
|
ze({ kind: e, tail: i }),
|
|
684
716
|
t
|
|
685
|
-
), d = "pr-2 pt-1 text-end text-xs text-copy-light",
|
|
717
|
+
), d = "pr-2 pt-1 text-end text-xs text-copy-light", m = o("flex flex-col-reverse sm:flex-row", {
|
|
686
718
|
"ml-2": e === "left" && !i,
|
|
687
719
|
"mr-2": e === "right" && !i,
|
|
688
720
|
"ml-1": e === "left" && i,
|
|
@@ -690,9 +722,9 @@ const Ce = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
|
|
|
690
722
|
});
|
|
691
723
|
return {
|
|
692
724
|
wrapper: l,
|
|
693
|
-
main:
|
|
725
|
+
main: s,
|
|
694
726
|
footer: d,
|
|
695
|
-
copyButton:
|
|
727
|
+
copyButton: m
|
|
696
728
|
};
|
|
697
729
|
}, Me = "FOOTER_EMPTY", Oe = ({
|
|
698
730
|
children: e,
|
|
@@ -701,53 +733,53 @@ const Ce = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
|
|
|
701
733
|
contentClassName: a,
|
|
702
734
|
footer: i,
|
|
703
735
|
rawFooter: l,
|
|
704
|
-
copyToClipboard:
|
|
736
|
+
copyToClipboard: s,
|
|
705
737
|
copyToClipboardFocusMode: d = "system",
|
|
706
|
-
copyToClipboardMode:
|
|
707
|
-
noMaxWidth:
|
|
738
|
+
copyToClipboardMode: m = "system",
|
|
739
|
+
noMaxWidth: y = !1,
|
|
708
740
|
tail: k = !1
|
|
709
741
|
}) => {
|
|
710
|
-
const [
|
|
742
|
+
const [c, u] = G(!1), g = Re({
|
|
711
743
|
kind: r,
|
|
712
744
|
className: t,
|
|
713
745
|
contentClassName: a,
|
|
714
|
-
noMaxWidth:
|
|
746
|
+
noMaxWidth: y,
|
|
715
747
|
tail: k
|
|
716
|
-
}), _ = !!
|
|
717
|
-
|
|
748
|
+
}), _ = !!s && (typeof s == "function" || typeof s == "string" || typeof e == "string"), I = () => {
|
|
749
|
+
u(!0), typeof s == "function" ? s(e) : typeof s == "string" ? navigator.clipboard.writeText(s) : typeof e == "string" && navigator.clipboard.writeText(e);
|
|
718
750
|
};
|
|
719
751
|
return M(() => {
|
|
720
|
-
let
|
|
721
|
-
return
|
|
722
|
-
|
|
752
|
+
let b;
|
|
753
|
+
return c && (b = window.setTimeout(() => {
|
|
754
|
+
u(!1);
|
|
723
755
|
}, 3e3)), () => {
|
|
724
|
-
clearTimeout(
|
|
756
|
+
clearTimeout(b);
|
|
725
757
|
};
|
|
726
|
-
}, [
|
|
758
|
+
}, [c]), /* @__PURE__ */ B("div", { className: g.wrapper, children: [
|
|
727
759
|
/* @__PURE__ */ B("div", { children: [
|
|
728
|
-
/* @__PURE__ */
|
|
729
|
-
i && Object.keys(i).map((
|
|
730
|
-
const
|
|
731
|
-
return
|
|
732
|
-
|
|
760
|
+
/* @__PURE__ */ n("div", { className: g.main, children: e }),
|
|
761
|
+
i && Object.keys(i).map((b, C) => {
|
|
762
|
+
const T = i[b];
|
|
763
|
+
return T === Me ? /* @__PURE__ */ n("div", { className: "prose-p:m-0", children: /* @__PURE__ */ n("p", { className: g.footer, "aria-hidden": "true", children: /* @__PURE__ */ n("span", { className: "invisible", children: " " }) }) }, `${b}-${C}`) : T ? /* @__PURE__ */ n("div", { className: "prose-p:m-0", children: /* @__PURE__ */ B("p", { className: g.footer, children: [
|
|
764
|
+
b,
|
|
733
765
|
": ",
|
|
734
|
-
|
|
735
|
-
] }) }, `${
|
|
766
|
+
T
|
|
767
|
+
] }) }, `${b}-${C}`) : null;
|
|
736
768
|
}),
|
|
737
769
|
l && l
|
|
738
770
|
] }),
|
|
739
|
-
_ && /* @__PURE__ */
|
|
740
|
-
|
|
771
|
+
_ && /* @__PURE__ */ n("div", { className: g.copyButton, children: /* @__PURE__ */ n(
|
|
772
|
+
H,
|
|
741
773
|
{
|
|
742
774
|
noBorder: !0,
|
|
743
775
|
noBackground: !0,
|
|
744
776
|
size: "small",
|
|
745
|
-
mode:
|
|
777
|
+
mode: m,
|
|
746
778
|
focusMode: d,
|
|
747
|
-
label:
|
|
779
|
+
label: c ? "Copied to clipboard" : "Copy to clipboard",
|
|
748
780
|
onClick: I,
|
|
749
|
-
disabled:
|
|
750
|
-
children:
|
|
781
|
+
disabled: c,
|
|
782
|
+
children: c ? /* @__PURE__ */ n(_e, { size: "size-3" }) : /* @__PURE__ */ n(Ie, { size: "size-3" })
|
|
751
783
|
}
|
|
752
784
|
) })
|
|
753
785
|
] });
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { BUBBLE_CLASSNAME as i, BUBBLE_FOOTER_EMPTY as o, Bubble as E } from "./components/Bubble/Bubble.js";
|
|
2
2
|
/*!
|
|
3
|
-
@versini/ui-bubble
|
|
3
|
+
@versini/ui-bubble v5.0.1
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_BUBBLE__ || (window.__VERSINI_UI_BUBBLE__ = {
|
|
8
|
-
version: "
|
|
9
|
-
buildTime: "
|
|
8
|
+
version: "5.0.1",
|
|
9
|
+
buildTime: "08/10/2025 12:46 PM EDT",
|
|
10
10
|
homepage: "https://github.com/aversini/ui-components",
|
|
11
11
|
license: "MIT"
|
|
12
12
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-bubble",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"dev:types": "tsup --watch src",
|
|
28
28
|
"dev": "npm-run-all clean --parallel dev:js dev:types",
|
|
29
29
|
"lint": "biome lint src",
|
|
30
|
+
"lint:fix": "biome check src --write --no-errors-on-unmatched",
|
|
30
31
|
"prettier": "biome check --write --no-errors-on-unmatched",
|
|
31
32
|
"start": "static-server dist --port 5173",
|
|
32
33
|
"test:coverage:ui": "vitest --coverage --ui",
|
|
@@ -39,12 +40,12 @@
|
|
|
39
40
|
"react-dom": "^18.3.1 || ^19.0.0"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
|
-
"@testing-library/jest-dom": "6.6.
|
|
43
|
-
"@versini/ui-types": "5.0.
|
|
43
|
+
"@testing-library/jest-dom": "6.6.4",
|
|
44
|
+
"@versini/ui-types": "5.0.6"
|
|
44
45
|
},
|
|
45
46
|
"dependencies": {
|
|
46
47
|
"@tailwindcss/typography": "0.5.16",
|
|
47
|
-
"@versini/ui-button": "
|
|
48
|
+
"@versini/ui-button": "7.1.0",
|
|
48
49
|
"@versini/ui-icons": "4.10.0",
|
|
49
50
|
"clsx": "2.1.1",
|
|
50
51
|
"tailwindcss": "4.1.11"
|
|
@@ -52,5 +53,5 @@
|
|
|
52
53
|
"sideEffects": [
|
|
53
54
|
"**/*.css"
|
|
54
55
|
],
|
|
55
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "6d8fef53d038c1153effea9b0cfaf01f983c1774"
|
|
56
57
|
}
|