@versini/ui-bubble 4.1.4 → 5.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/README.md +281 -1
- package/dist/components/Bubble/Bubble.js +219 -189
- 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", u = "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
|
[u]: 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", {
|
|
@@ -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
|
+
}, me = ({
|
|
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
288
|
noBorder: u,
|
|
258
|
-
labelRight:
|
|
289
|
+
labelRight: y,
|
|
259
290
|
labelLeft: k,
|
|
260
|
-
noBackground:
|
|
261
|
-
variant:
|
|
291
|
+
noBackground: c,
|
|
292
|
+
variant: m,
|
|
262
293
|
truncate: g,
|
|
263
294
|
align: _,
|
|
264
295
|
radius: I,
|
|
265
|
-
animated:
|
|
266
|
-
}) => (
|
|
267
|
-
|
|
268
|
-
|
|
296
|
+
animated: b
|
|
297
|
+
}) => (m || (m = "primary"), t ? o(q, r) : o(
|
|
298
|
+
q,
|
|
299
|
+
se({
|
|
269
300
|
mode: a,
|
|
270
|
-
variant:
|
|
271
|
-
noBackground:
|
|
301
|
+
variant: m,
|
|
302
|
+
noBackground: c,
|
|
272
303
|
truncate: g
|
|
273
304
|
}),
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
305
|
+
ne({ mode: a, noBackground: c, variant: m }),
|
|
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
|
+
me({ mode: a, variant: m, noBorder: u }),
|
|
286
317
|
ge({ focusMode: i }),
|
|
287
|
-
de({ mode: a, variant:
|
|
288
|
-
ue({ mode: a, variant:
|
|
318
|
+
de({ mode: a, variant: m, disabled: l }),
|
|
319
|
+
ue({ mode: a, variant: m, 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 =
|
|
369
|
+
const r = ve(), t = N(0), a = N(null), [i, l] = G(ke), s = W(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
|
|
340
370
|
const u = d[0];
|
|
341
371
|
u && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
|
|
342
372
|
a.current && r() && l(u.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,24 +398,24 @@ 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
403
|
noBorder: u = !1,
|
|
374
|
-
"aria-label":
|
|
404
|
+
"aria-label": y,
|
|
375
405
|
label: k,
|
|
376
|
-
size:
|
|
377
|
-
labelRight:
|
|
406
|
+
size: c = "medium",
|
|
407
|
+
labelRight: m,
|
|
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,
|
|
@@ -393,100 +423,100 @@ const z = {
|
|
|
393
423
|
raw: d,
|
|
394
424
|
className: l,
|
|
395
425
|
noBorder: u,
|
|
396
|
-
size:
|
|
397
|
-
labelRight:
|
|
426
|
+
size: c,
|
|
427
|
+
labelRight: m,
|
|
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] + (u ? 0 : we), p.current && !p.current.style.width && (p.current.style.width = `${z[c]}px`));
|
|
437
|
+
}, [P, E, c, u, v]), F(() => {
|
|
438
|
+
if (p && p.current && v) {
|
|
439
|
+
let w = z[c];
|
|
440
|
+
m && 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 && m && (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
|
+
m,
|
|
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: m,
|
|
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.0.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: "07/
|
|
512
|
+
version: "7.0.0",
|
|
513
|
+
buildTime: "08/07/2025 04:11 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,8 +541,8 @@ 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
547
|
className: o("justify-center", t),
|
|
518
548
|
ref: l,
|
|
@@ -532,16 +562,16 @@ const K = ({
|
|
|
532
562
|
className: a,
|
|
533
563
|
defaultViewBox: i,
|
|
534
564
|
size: l,
|
|
535
|
-
title:
|
|
565
|
+
title: s,
|
|
536
566
|
semantic: d = !1,
|
|
537
567
|
...u
|
|
538
568
|
}) => {
|
|
539
|
-
const
|
|
540
|
-
return /* @__PURE__ */
|
|
569
|
+
const y = o(l, a);
|
|
570
|
+
return /* @__PURE__ */ n(ae, { children: /* @__PURE__ */ B(
|
|
541
571
|
"svg",
|
|
542
572
|
{
|
|
543
573
|
xmlns: "http://www.w3.org/2000/svg",
|
|
544
|
-
className:
|
|
574
|
+
className: y,
|
|
545
575
|
viewBox: t || i,
|
|
546
576
|
fill: r || "currentColor",
|
|
547
577
|
role: "img",
|
|
@@ -549,7 +579,7 @@ const K = ({
|
|
|
549
579
|
focusable: !1,
|
|
550
580
|
...u,
|
|
551
581
|
children: [
|
|
552
|
-
|
|
582
|
+
s && d && /* @__PURE__ */ n("title", { children: s }),
|
|
553
583
|
e
|
|
554
584
|
]
|
|
555
585
|
}
|
|
@@ -584,14 +614,14 @@ const _e = ({
|
|
|
584
614
|
title: t || "Copied",
|
|
585
615
|
...i,
|
|
586
616
|
children: [
|
|
587
|
-
/* @__PURE__ */
|
|
617
|
+
/* @__PURE__ */ n(
|
|
588
618
|
"path",
|
|
589
619
|
{
|
|
590
620
|
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
621
|
opacity: ".4"
|
|
592
622
|
}
|
|
593
623
|
),
|
|
594
|
-
/* @__PURE__ */
|
|
624
|
+
/* @__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
625
|
]
|
|
596
626
|
}
|
|
597
627
|
), Ie = ({
|
|
@@ -600,7 +630,7 @@ const _e = ({
|
|
|
600
630
|
title: t,
|
|
601
631
|
monotone: a,
|
|
602
632
|
...i
|
|
603
|
-
}) => /* @__PURE__ */
|
|
633
|
+
}) => /* @__PURE__ */ n(
|
|
604
634
|
K,
|
|
605
635
|
{
|
|
606
636
|
defaultViewBox: "0 0 512 512",
|
|
@@ -609,7 +639,7 @@ const _e = ({
|
|
|
609
639
|
className: e,
|
|
610
640
|
title: t || "Copy",
|
|
611
641
|
...i,
|
|
612
|
-
children: /* @__PURE__ */
|
|
642
|
+
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
643
|
}
|
|
614
644
|
);
|
|
615
645
|
/*!
|
|
@@ -674,7 +704,7 @@ const Ce = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
|
|
|
674
704
|
"flex-row-reverse": e === "right"
|
|
675
705
|
},
|
|
676
706
|
r
|
|
677
|
-
),
|
|
707
|
+
), s = o(
|
|
678
708
|
`${R}-content`,
|
|
679
709
|
"flex flex-col empty:hidden",
|
|
680
710
|
Ce({ kind: e, noMaxWidth: a }),
|
|
@@ -690,7 +720,7 @@ const Ce = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
|
|
|
690
720
|
});
|
|
691
721
|
return {
|
|
692
722
|
wrapper: l,
|
|
693
|
-
main:
|
|
723
|
+
main: s,
|
|
694
724
|
footer: d,
|
|
695
725
|
copyButton: u
|
|
696
726
|
};
|
|
@@ -701,53 +731,53 @@ const Ce = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
|
|
|
701
731
|
contentClassName: a,
|
|
702
732
|
footer: i,
|
|
703
733
|
rawFooter: l,
|
|
704
|
-
copyToClipboard:
|
|
734
|
+
copyToClipboard: s,
|
|
705
735
|
copyToClipboardFocusMode: d = "system",
|
|
706
736
|
copyToClipboardMode: u = "system",
|
|
707
|
-
noMaxWidth:
|
|
737
|
+
noMaxWidth: y = !1,
|
|
708
738
|
tail: k = !1
|
|
709
739
|
}) => {
|
|
710
|
-
const [
|
|
740
|
+
const [c, m] = G(!1), g = Re({
|
|
711
741
|
kind: r,
|
|
712
742
|
className: t,
|
|
713
743
|
contentClassName: a,
|
|
714
|
-
noMaxWidth:
|
|
744
|
+
noMaxWidth: y,
|
|
715
745
|
tail: k
|
|
716
|
-
}), _ = !!
|
|
717
|
-
|
|
746
|
+
}), _ = !!s && (typeof s == "function" || typeof s == "string" || typeof e == "string"), I = () => {
|
|
747
|
+
m(!0), typeof s == "function" ? s(e) : typeof s == "string" ? navigator.clipboard.writeText(s) : typeof e == "string" && navigator.clipboard.writeText(e);
|
|
718
748
|
};
|
|
719
749
|
return M(() => {
|
|
720
|
-
let
|
|
721
|
-
return
|
|
722
|
-
|
|
750
|
+
let b;
|
|
751
|
+
return c && (b = window.setTimeout(() => {
|
|
752
|
+
m(!1);
|
|
723
753
|
}, 3e3)), () => {
|
|
724
|
-
clearTimeout(
|
|
754
|
+
clearTimeout(b);
|
|
725
755
|
};
|
|
726
|
-
}, [
|
|
756
|
+
}, [c]), /* @__PURE__ */ B("div", { className: g.wrapper, children: [
|
|
727
757
|
/* @__PURE__ */ B("div", { children: [
|
|
728
|
-
/* @__PURE__ */
|
|
729
|
-
i && Object.keys(i).map((
|
|
730
|
-
const
|
|
731
|
-
return
|
|
732
|
-
|
|
758
|
+
/* @__PURE__ */ n("div", { className: g.main, children: e }),
|
|
759
|
+
i && Object.keys(i).map((b, C) => {
|
|
760
|
+
const T = i[b];
|
|
761
|
+
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: [
|
|
762
|
+
b,
|
|
733
763
|
": ",
|
|
734
|
-
|
|
735
|
-
] }) }, `${
|
|
764
|
+
T
|
|
765
|
+
] }) }, `${b}-${C}`) : null;
|
|
736
766
|
}),
|
|
737
767
|
l && l
|
|
738
768
|
] }),
|
|
739
|
-
_ && /* @__PURE__ */
|
|
740
|
-
|
|
769
|
+
_ && /* @__PURE__ */ n("div", { className: g.copyButton, children: /* @__PURE__ */ n(
|
|
770
|
+
H,
|
|
741
771
|
{
|
|
742
772
|
noBorder: !0,
|
|
743
773
|
noBackground: !0,
|
|
744
774
|
size: "small",
|
|
745
775
|
mode: u,
|
|
746
776
|
focusMode: d,
|
|
747
|
-
label:
|
|
777
|
+
label: c ? "Copied to clipboard" : "Copy to clipboard",
|
|
748
778
|
onClick: I,
|
|
749
|
-
disabled:
|
|
750
|
-
children:
|
|
779
|
+
disabled: c,
|
|
780
|
+
children: c ? /* @__PURE__ */ n(_e, { size: "size-3" }) : /* @__PURE__ */ n(Ie, { size: "size-3" })
|
|
751
781
|
}
|
|
752
782
|
) })
|
|
753
783
|
] });
|
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.0
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_BUBBLE__ || (window.__VERSINI_UI_BUBBLE__ = {
|
|
8
|
-
version: "
|
|
9
|
-
buildTime: "07/
|
|
8
|
+
version: "5.0.0",
|
|
9
|
+
buildTime: "08/07/2025 04:12 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.0",
|
|
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.0.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": "42daab1fb88c366495abbc1db78a9987de05e59b"
|
|
56
57
|
}
|