@versini/ui-truncate 4.0.9 → 4.0.11
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 +23 -1
- package/dist/components/Truncate/Truncate.js +275 -243
- package/dist/index.js +3 -3
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -1,6 +1,26 @@
|
|
|
1
1
|
# @versini/ui-truncate
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@versini/ui-truncate)
|
|
4
|
+
|
|
5
|
+
> A lightweight and accessible React text truncation component built with TypeScript and TailwindCSS.
|
|
6
|
+
|
|
7
|
+
The Truncate component provides intelligent text truncation with toggle functionality for managing long text content. Perfect for article previews, descriptions, and any content that needs length management.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Table of Contents
|
|
11
|
+
|
|
12
|
+
- [Features](#features)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- **🎯 Smart Truncation**: Intelligent text truncation with customizable character limits
|
|
19
|
+
- **🔍 Expandable**: Built-in expand/collapse toggle functionality
|
|
20
|
+
- **♿ Accessible**: Screen reader friendly with proper button semantics
|
|
21
|
+
- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
|
|
22
|
+
- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
|
|
23
|
+
- **🎭 Theme Support**: Built-in support for light, dark, and system themes
|
|
4
24
|
|
|
5
25
|
## Installation
|
|
6
26
|
|
|
@@ -8,6 +28,8 @@ A simple truncate component for React.
|
|
|
8
28
|
npm install @versini/ui-truncate
|
|
9
29
|
```
|
|
10
30
|
|
|
31
|
+
> **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.
|
|
32
|
+
|
|
11
33
|
## Usage
|
|
12
34
|
|
|
13
35
|
```tsx
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as m, jsxs as q } from "react/jsx-runtime";
|
|
2
|
+
import E, { useRef as w, useLayoutEffect as F, useEffect as A, useState as G, useMemo as P, useCallback as ae } from "react";
|
|
3
3
|
import n from "clsx";
|
|
4
|
-
const
|
|
4
|
+
const H = "av-button", I = "icon", O = "button", j = "link", ie = ({
|
|
5
5
|
type: e,
|
|
6
6
|
size: t,
|
|
7
7
|
labelRight: r,
|
|
8
8
|
labelLeft: a,
|
|
9
|
-
align:
|
|
10
|
-
animated:
|
|
9
|
+
align: i,
|
|
10
|
+
animated: o
|
|
11
11
|
}) => {
|
|
12
|
-
const
|
|
12
|
+
const s = "max-h-8 py-0 px-2", l = "max-h-9 h-8 px-3", c = "max-h-12 py-2 px-4";
|
|
13
13
|
switch (e) {
|
|
14
|
-
case
|
|
14
|
+
case O:
|
|
15
15
|
case j:
|
|
16
16
|
return n({
|
|
17
|
-
[
|
|
18
|
-
[
|
|
19
|
-
[
|
|
17
|
+
[s]: t === "small",
|
|
18
|
+
[l]: t === "medium",
|
|
19
|
+
[c]: t === "large"
|
|
20
20
|
});
|
|
21
|
-
case
|
|
21
|
+
case I:
|
|
22
22
|
return n("flex items-center", {
|
|
23
|
-
"justify-center":
|
|
24
|
-
"justify-start":
|
|
25
|
-
"justify-end":
|
|
26
|
-
"h-6 w-6 p-0": t === "small" && !
|
|
27
|
-
"h-6 px-2": t === "small" && !
|
|
28
|
-
"h-8 w-8 p-1": t === "medium" && !
|
|
29
|
-
"h-8 px-3": t === "medium" && !
|
|
30
|
-
"h-12 w-12 p-2": t === "large" && !
|
|
31
|
-
"h-12 px-4": t === "large" && !
|
|
32
|
-
"h-6 py-0": t === "small" &&
|
|
33
|
-
"h-6": t === "small" &&
|
|
34
|
-
"h-8 py-1": t === "medium" &&
|
|
35
|
-
"h-8": t === "medium" &&
|
|
36
|
-
"h-12 py-2": t === "large" &&
|
|
37
|
-
"h-12": t === "large" &&
|
|
23
|
+
"justify-center": i === "center",
|
|
24
|
+
"justify-start": i === "left",
|
|
25
|
+
"justify-end": i === "right",
|
|
26
|
+
"h-6 w-6 p-0": t === "small" && !o && !(r || a),
|
|
27
|
+
"h-6 px-2": t === "small" && !o && (r || a),
|
|
28
|
+
"h-8 w-8 p-1": t === "medium" && !o && !(r || a),
|
|
29
|
+
"h-8 px-3": t === "medium" && !o && (r || a),
|
|
30
|
+
"h-12 w-12 p-2": t === "large" && !o && !(r || a),
|
|
31
|
+
"h-12 px-4": t === "large" && !o && (r || a),
|
|
32
|
+
"h-6 py-0": t === "small" && o && !(r || a),
|
|
33
|
+
"h-6": t === "small" && o && (r || a),
|
|
34
|
+
"h-8 py-1": t === "medium" && o && !(r || a),
|
|
35
|
+
"h-8": t === "medium" && o && (r || a),
|
|
36
|
+
"h-12 py-2": t === "large" && o && !(r || a),
|
|
37
|
+
"h-12": t === "large" && o && (r || a)
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
},
|
|
40
|
+
}, oe = ({
|
|
41
41
|
type: e,
|
|
42
42
|
size: t,
|
|
43
43
|
labelRight: r,
|
|
44
44
|
labelLeft: a
|
|
45
45
|
}) => {
|
|
46
|
-
const
|
|
46
|
+
const i = "text-sm font-medium", o = "text-base font-medium", s = "text-lg font-medium";
|
|
47
47
|
switch (e) {
|
|
48
|
-
case
|
|
48
|
+
case O:
|
|
49
49
|
case j:
|
|
50
50
|
return n({
|
|
51
51
|
"text-center": e === j,
|
|
52
|
-
[
|
|
53
|
-
[
|
|
54
|
-
[
|
|
52
|
+
[i]: t === "small",
|
|
53
|
+
[o]: t === "medium",
|
|
54
|
+
[s]: t === "large"
|
|
55
55
|
});
|
|
56
|
-
case
|
|
56
|
+
case I:
|
|
57
57
|
return n({
|
|
58
|
-
[
|
|
59
|
-
[
|
|
60
|
-
[
|
|
58
|
+
[i]: t === "small" && (r || a),
|
|
59
|
+
[o]: t === "medium" && (r || a),
|
|
60
|
+
[s]: t === "large" && (r || a)
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
|
-
},
|
|
63
|
+
}, ne = ({
|
|
64
64
|
mode: e,
|
|
65
65
|
noBackground: t,
|
|
66
66
|
truncate: r,
|
|
@@ -71,18 +71,18 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
71
71
|
if (a === "primary")
|
|
72
72
|
return n("not-prose", {
|
|
73
73
|
truncate: r,
|
|
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 n("not-prose", {
|
|
81
81
|
truncate: r,
|
|
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 n("not-prose", {
|
|
@@ -96,7 +96,7 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
96
96
|
return n("not-prose text-copy-lighter", {
|
|
97
97
|
truncate: r
|
|
98
98
|
});
|
|
99
|
-
},
|
|
99
|
+
}, se = ({
|
|
100
100
|
mode: e,
|
|
101
101
|
noBackground: t,
|
|
102
102
|
variant: r
|
|
@@ -104,17 +104,17 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
104
104
|
if (!t) {
|
|
105
105
|
if (r === "primary")
|
|
106
106
|
return n({
|
|
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 (r === "secondary")
|
|
113
113
|
return n({
|
|
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 (r === "danger")
|
|
120
120
|
return n({
|
|
@@ -126,13 +126,13 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
126
126
|
if (r === "selected")
|
|
127
127
|
return "bg-action-selected-dark";
|
|
128
128
|
}
|
|
129
|
-
},
|
|
129
|
+
}, de = ({
|
|
130
130
|
radius: e
|
|
131
131
|
}) => n({
|
|
132
132
|
"rounded-full": e === "large",
|
|
133
133
|
"rounded-md": e === "medium",
|
|
134
134
|
"rounded-xs": e === "small"
|
|
135
|
-
}),
|
|
135
|
+
}), le = ({
|
|
136
136
|
mode: e,
|
|
137
137
|
disabled: t,
|
|
138
138
|
variant: r
|
|
@@ -140,18 +140,26 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
140
140
|
if (t)
|
|
141
141
|
return "";
|
|
142
142
|
if (r === "primary")
|
|
143
|
-
return n(
|
|
144
|
-
"hover:
|
|
145
|
-
"hover:
|
|
146
|
-
"
|
|
147
|
-
"
|
|
143
|
+
return n({
|
|
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 (r === "secondary")
|
|
150
|
-
return n(
|
|
151
|
-
"hover:
|
|
152
|
-
"hover:
|
|
153
|
-
"
|
|
154
|
-
"
|
|
154
|
+
return n({
|
|
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 (r === "danger")
|
|
157
165
|
return n("hover:text-copy-light-hover", {
|
|
@@ -162,7 +170,7 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
162
170
|
});
|
|
163
171
|
if (r === "selected")
|
|
164
172
|
return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
|
|
165
|
-
},
|
|
173
|
+
}, ce = ({
|
|
166
174
|
mode: e,
|
|
167
175
|
disabled: t,
|
|
168
176
|
variant: r
|
|
@@ -170,18 +178,26 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
170
178
|
if (t)
|
|
171
179
|
return "";
|
|
172
180
|
if (r === "primary")
|
|
173
|
-
return n(
|
|
174
|
-
"active:
|
|
175
|
-
"active:
|
|
176
|
-
"
|
|
177
|
-
"
|
|
181
|
+
return n({
|
|
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 (r === "secondary")
|
|
180
|
-
return n(
|
|
181
|
-
"active:
|
|
182
|
-
"active:
|
|
183
|
-
"
|
|
184
|
-
"
|
|
192
|
+
return n({
|
|
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 (r === "danger")
|
|
187
203
|
return n("active:text-copy-lighter-active", {
|
|
@@ -201,17 +217,17 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
201
217
|
return "border border-transparent";
|
|
202
218
|
if (r === "primary")
|
|
203
219
|
return n("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 (r === "secondary")
|
|
210
226
|
return n("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 (r === "danger")
|
|
217
233
|
return n("border", {
|
|
@@ -222,26 +238,41 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
222
238
|
});
|
|
223
239
|
if (r === "selected")
|
|
224
240
|
return "border border-border-selected-dark";
|
|
225
|
-
},
|
|
241
|
+
}, me = ({
|
|
226
242
|
focusMode: e
|
|
227
243
|
}) => n("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
|
|
228
244
|
"focus:outline-focus-dark": e === "dark",
|
|
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
|
+
}), ge = ({
|
|
233
249
|
mode: e,
|
|
234
250
|
raw: t,
|
|
235
|
-
iconClassName: r
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
251
|
+
iconClassName: r,
|
|
252
|
+
variant: a = "primary"
|
|
253
|
+
}) => {
|
|
254
|
+
if (t)
|
|
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
|
+
}), n(i, r);
|
|
275
|
+
}, he = ({
|
|
245
276
|
animated: e
|
|
246
277
|
}) => n({
|
|
247
278
|
"transition-opacity duration-300 ease-in-out": e
|
|
@@ -250,117 +281,116 @@ const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
|
|
|
250
281
|
className: t,
|
|
251
282
|
raw: r,
|
|
252
283
|
mode: a,
|
|
253
|
-
focusMode:
|
|
254
|
-
disabled:
|
|
255
|
-
fullWidth:
|
|
256
|
-
size:
|
|
257
|
-
noBorder:
|
|
258
|
-
labelRight:
|
|
284
|
+
focusMode: i,
|
|
285
|
+
disabled: o,
|
|
286
|
+
fullWidth: s,
|
|
287
|
+
size: l,
|
|
288
|
+
noBorder: c,
|
|
289
|
+
labelRight: b,
|
|
259
290
|
labelLeft: k,
|
|
260
291
|
noBackground: u,
|
|
261
|
-
variant:
|
|
262
|
-
truncate:
|
|
292
|
+
variant: d,
|
|
293
|
+
truncate: g,
|
|
263
294
|
align: N,
|
|
264
|
-
radius:
|
|
295
|
+
radius: R,
|
|
265
296
|
animated: T
|
|
266
|
-
}) => (
|
|
267
|
-
|
|
268
|
-
|
|
297
|
+
}) => (d || (d = "primary"), r ? n(H, t) : n(
|
|
298
|
+
H,
|
|
299
|
+
ne({
|
|
269
300
|
mode: a,
|
|
270
|
-
variant:
|
|
301
|
+
variant: d,
|
|
271
302
|
noBackground: u,
|
|
272
|
-
truncate:
|
|
303
|
+
truncate: g
|
|
273
304
|
}),
|
|
274
|
-
|
|
275
|
-
|
|
305
|
+
se({ mode: a, noBackground: u, variant: d }),
|
|
306
|
+
de({ radius: R }),
|
|
276
307
|
ie({
|
|
277
308
|
type: e,
|
|
278
|
-
size:
|
|
279
|
-
labelRight:
|
|
309
|
+
size: l,
|
|
310
|
+
labelRight: b,
|
|
280
311
|
labelLeft: k,
|
|
281
312
|
align: N,
|
|
282
313
|
animated: T
|
|
283
314
|
}),
|
|
284
|
-
|
|
285
|
-
ue({ mode: a, variant:
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
315
|
+
oe({ type: e, size: l, labelRight: b, labelLeft: k }),
|
|
316
|
+
ue({ mode: a, variant: d, noBorder: c }),
|
|
317
|
+
me({ focusMode: i }),
|
|
318
|
+
le({ mode: a, variant: d, disabled: o }),
|
|
319
|
+
ce({ mode: a, variant: d, disabled: o }),
|
|
289
320
|
{
|
|
290
|
-
"w-full":
|
|
291
|
-
"disabled:cursor-not-allowed disabled:opacity-50":
|
|
321
|
+
"w-full": s,
|
|
322
|
+
"disabled:cursor-not-allowed disabled:opacity-50": o
|
|
292
323
|
},
|
|
293
324
|
n({
|
|
294
|
-
"transition-[width] duration-300 ease-in": e ===
|
|
325
|
+
"transition-[width] duration-300 ease-in": e === I && T
|
|
295
326
|
}),
|
|
296
327
|
t
|
|
297
|
-
)),
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
return /* @__PURE__ */ g(
|
|
328
|
+
)), ye = (e, t, r) => {
|
|
329
|
+
!t && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof e?.currentTarget?.focus == "function" && e.currentTarget.focus(), typeof r == "function" && r(e);
|
|
330
|
+
}, S = E.forwardRef((e, t) => {
|
|
331
|
+
const { onClick: r, noInternalClick: a = !1, ...i } = e;
|
|
332
|
+
return /* @__PURE__ */ m(
|
|
303
333
|
"button",
|
|
304
334
|
{
|
|
305
335
|
ref: t,
|
|
306
|
-
onClick: (
|
|
307
|
-
|
|
336
|
+
onClick: (o) => {
|
|
337
|
+
ye(o, a, r);
|
|
308
338
|
},
|
|
309
|
-
...
|
|
339
|
+
...i
|
|
310
340
|
}
|
|
311
341
|
);
|
|
312
342
|
});
|
|
313
|
-
|
|
314
|
-
const J =
|
|
343
|
+
S.displayName = "BaseButton";
|
|
344
|
+
const J = E.forwardRef(
|
|
315
345
|
({
|
|
316
346
|
children: e,
|
|
317
347
|
disabled: t = !1,
|
|
318
348
|
mode: r = "system",
|
|
319
349
|
focusMode: a = "system",
|
|
320
|
-
fullWidth:
|
|
321
|
-
className:
|
|
322
|
-
size:
|
|
323
|
-
raw:
|
|
324
|
-
noBorder:
|
|
325
|
-
variant:
|
|
350
|
+
fullWidth: i = !1,
|
|
351
|
+
className: o,
|
|
352
|
+
size: s = "medium",
|
|
353
|
+
raw: l = !1,
|
|
354
|
+
noBorder: c = !1,
|
|
355
|
+
variant: b = "primary",
|
|
326
356
|
truncate: k = !1,
|
|
327
357
|
radius: u = "large",
|
|
328
|
-
...
|
|
329
|
-
},
|
|
358
|
+
...d
|
|
359
|
+
}, g) => {
|
|
330
360
|
const N = V({
|
|
331
|
-
type:
|
|
361
|
+
type: O,
|
|
332
362
|
mode: r,
|
|
333
363
|
focusMode: a,
|
|
334
|
-
fullWidth:
|
|
364
|
+
fullWidth: i,
|
|
335
365
|
disabled: t,
|
|
336
|
-
raw:
|
|
337
|
-
className:
|
|
338
|
-
size:
|
|
339
|
-
noBorder:
|
|
340
|
-
variant:
|
|
366
|
+
raw: l,
|
|
367
|
+
className: o,
|
|
368
|
+
size: s,
|
|
369
|
+
noBorder: c,
|
|
370
|
+
variant: b,
|
|
341
371
|
truncate: k,
|
|
342
372
|
radius: u
|
|
343
373
|
});
|
|
344
|
-
return /* @__PURE__ */
|
|
345
|
-
|
|
374
|
+
return /* @__PURE__ */ m(
|
|
375
|
+
S,
|
|
346
376
|
{
|
|
347
|
-
ref:
|
|
377
|
+
ref: g,
|
|
348
378
|
className: N,
|
|
349
379
|
disabled: t,
|
|
350
|
-
...
|
|
380
|
+
...d,
|
|
351
381
|
children: e
|
|
352
382
|
}
|
|
353
383
|
);
|
|
354
384
|
}
|
|
355
385
|
);
|
|
356
386
|
J.displayName = "Button";
|
|
357
|
-
function
|
|
387
|
+
function be() {
|
|
358
388
|
const e = w(!1);
|
|
359
389
|
return A(() => (e.current = !0, () => {
|
|
360
390
|
e.current = !1;
|
|
361
391
|
}), []), ae(() => e.current, []);
|
|
362
392
|
}
|
|
363
|
-
function
|
|
393
|
+
function fe(e) {
|
|
364
394
|
return P(() => e.every((t) => t == null) ? () => {
|
|
365
395
|
} : (t) => {
|
|
366
396
|
e.forEach((r) => {
|
|
@@ -379,15 +409,15 @@ const ve = {
|
|
|
379
409
|
right: 0
|
|
380
410
|
};
|
|
381
411
|
function M(e) {
|
|
382
|
-
const t =
|
|
383
|
-
const
|
|
384
|
-
|
|
385
|
-
a.current && t() &&
|
|
412
|
+
const t = be(), r = w(0), a = w(null), [i, o] = G(ve), s = P(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((l) => {
|
|
413
|
+
const c = l[0];
|
|
414
|
+
c && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
|
|
415
|
+
a.current && t() && o(c.contentRect);
|
|
386
416
|
}));
|
|
387
417
|
}), [t]);
|
|
388
|
-
return A(() => (a.current &&
|
|
389
|
-
|
|
390
|
-
}), [
|
|
418
|
+
return A(() => (a.current && s?.observe(a.current, e), () => {
|
|
419
|
+
s?.disconnect(), r.current && cancelAnimationFrame(r.current);
|
|
420
|
+
}), [s, e]), [a, i];
|
|
391
421
|
}
|
|
392
422
|
const C = {
|
|
393
423
|
small: 24,
|
|
@@ -397,147 +427,147 @@ const C = {
|
|
|
397
427
|
large: 48
|
|
398
428
|
// w-12
|
|
399
429
|
}, ke = {
|
|
400
|
-
small:
|
|
430
|
+
small: 16,
|
|
401
431
|
// px-2 x 2
|
|
402
|
-
medium:
|
|
432
|
+
medium: 24,
|
|
403
433
|
// px-3 x 2
|
|
404
|
-
large:
|
|
434
|
+
large: 32
|
|
405
435
|
// px-4 x 2
|
|
406
|
-
}, pe = 2, xe = 300, K =
|
|
436
|
+
}, pe = 2, xe = 300, K = E.forwardRef(
|
|
407
437
|
({
|
|
408
438
|
children: e,
|
|
409
439
|
disabled: t = !1,
|
|
410
440
|
mode: r = "system",
|
|
411
441
|
focusMode: a = "system",
|
|
412
|
-
fullWidth:
|
|
413
|
-
className:
|
|
414
|
-
type:
|
|
415
|
-
raw:
|
|
416
|
-
noBorder:
|
|
417
|
-
"aria-label":
|
|
442
|
+
fullWidth: i = !1,
|
|
443
|
+
className: o,
|
|
444
|
+
type: s = "button",
|
|
445
|
+
raw: l = !1,
|
|
446
|
+
noBorder: c = !1,
|
|
447
|
+
"aria-label": b,
|
|
418
448
|
label: k,
|
|
419
449
|
size: u = "medium",
|
|
420
|
-
labelRight:
|
|
421
|
-
labelLeft:
|
|
450
|
+
labelRight: d,
|
|
451
|
+
labelLeft: g,
|
|
422
452
|
noBackground: N = !1,
|
|
423
|
-
align:
|
|
453
|
+
align: R = "center",
|
|
424
454
|
radius: T = "large",
|
|
425
|
-
variant:
|
|
426
|
-
iconClassName:
|
|
427
|
-
animated:
|
|
428
|
-
...
|
|
429
|
-
},
|
|
430
|
-
const
|
|
431
|
-
type:
|
|
455
|
+
variant: $ = "secondary",
|
|
456
|
+
iconClassName: Q,
|
|
457
|
+
animated: f = !1,
|
|
458
|
+
...X
|
|
459
|
+
}, Y) => {
|
|
460
|
+
const Z = V({
|
|
461
|
+
type: I,
|
|
432
462
|
mode: r,
|
|
433
463
|
focusMode: a,
|
|
434
|
-
fullWidth:
|
|
464
|
+
fullWidth: i,
|
|
435
465
|
disabled: t,
|
|
436
|
-
raw:
|
|
437
|
-
className:
|
|
438
|
-
noBorder:
|
|
466
|
+
raw: l,
|
|
467
|
+
className: o,
|
|
468
|
+
noBorder: c,
|
|
439
469
|
size: u,
|
|
440
|
-
labelRight:
|
|
441
|
-
labelLeft:
|
|
470
|
+
labelRight: d,
|
|
471
|
+
labelLeft: g,
|
|
442
472
|
noBackground: N,
|
|
443
|
-
align:
|
|
473
|
+
align: R,
|
|
444
474
|
radius: T,
|
|
445
|
-
variant:
|
|
446
|
-
animated:
|
|
447
|
-
}), ee =
|
|
448
|
-
return
|
|
449
|
-
B && B.current &&
|
|
450
|
-
}, [W, B, u,
|
|
451
|
-
if (v && v.current &&
|
|
475
|
+
variant: $,
|
|
476
|
+
animated: f
|
|
477
|
+
}), ee = ge({ mode: r, raw: l, iconClassName: Q, variant: $ }), U = he({ animated: f }), re = "flex items-center justify-center relative w-full h-full overflow-hidden", [h, _] = M(), [y, z] = M(), [B, W] = M(), L = w(0), v = w(null), p = w(null), te = fe([Y, v]);
|
|
478
|
+
return F(() => {
|
|
479
|
+
B && B.current && f && (L.current = W.width + ke[u] + (c ? 0 : pe), v.current && !v.current.style.width && (v.current.style.width = `${C[u]}px`));
|
|
480
|
+
}, [W, B, u, c, f]), F(() => {
|
|
481
|
+
if (v && v.current && f) {
|
|
452
482
|
let x = C[u];
|
|
453
|
-
|
|
454
|
-
h.current &&
|
|
455
|
-
}, xe * 0.8))), x === C[u] && (h.current && (h.current.style.opacity = "0"),
|
|
483
|
+
d && h && _.width > 0 ? x = _.width + L.current : g && y && z.width > 0 && (x = z.width + L.current), p.current && clearTimeout(p.current), x !== parseInt(v.current.style.width || "0", 10) && (h.current && (h.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), v.current.style.width = `${x}px`, x > C[u] && (p.current = setTimeout(() => {
|
|
484
|
+
h.current && d && (h.current.style.opacity = "1"), y.current && g && (y.current.style.opacity = "1"), p.current = null;
|
|
485
|
+
}, xe * 0.8))), x === C[u] && (h.current && (h.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"));
|
|
456
486
|
}
|
|
457
487
|
}, [
|
|
458
488
|
_,
|
|
459
|
-
|
|
489
|
+
d,
|
|
460
490
|
h,
|
|
461
491
|
z,
|
|
462
|
-
|
|
463
|
-
|
|
492
|
+
g,
|
|
493
|
+
y,
|
|
464
494
|
u,
|
|
465
|
-
|
|
495
|
+
f
|
|
466
496
|
]), A(() => () => {
|
|
467
497
|
p.current && clearTimeout(p.current);
|
|
468
|
-
}, []), /* @__PURE__ */
|
|
469
|
-
|
|
498
|
+
}, []), /* @__PURE__ */ m(
|
|
499
|
+
S,
|
|
470
500
|
{
|
|
471
501
|
ref: te,
|
|
472
|
-
className:
|
|
502
|
+
className: Z,
|
|
473
503
|
disabled: t,
|
|
474
|
-
type:
|
|
475
|
-
"aria-label":
|
|
476
|
-
...
|
|
504
|
+
type: s,
|
|
505
|
+
"aria-label": b || k,
|
|
506
|
+
...X,
|
|
477
507
|
children: /* @__PURE__ */ q("div", { className: re, children: [
|
|
478
|
-
/* @__PURE__ */
|
|
479
|
-
|
|
508
|
+
/* @__PURE__ */ m(
|
|
509
|
+
D,
|
|
480
510
|
{
|
|
481
|
-
label:
|
|
482
|
-
labelRef:
|
|
511
|
+
label: g,
|
|
512
|
+
labelRef: y,
|
|
483
513
|
labelClass: U,
|
|
484
514
|
labelInnerClass: "pr-2",
|
|
485
|
-
initiallyHidden:
|
|
515
|
+
initiallyHidden: f
|
|
486
516
|
}
|
|
487
517
|
),
|
|
488
|
-
/* @__PURE__ */
|
|
489
|
-
/* @__PURE__ */
|
|
490
|
-
|
|
518
|
+
/* @__PURE__ */ m("span", { ref: B, className: ee, children: e }),
|
|
519
|
+
/* @__PURE__ */ m(
|
|
520
|
+
D,
|
|
491
521
|
{
|
|
492
|
-
label:
|
|
522
|
+
label: d,
|
|
493
523
|
labelRef: h,
|
|
494
524
|
labelClass: U,
|
|
495
525
|
labelInnerClass: "pl-2",
|
|
496
|
-
initiallyHidden:
|
|
526
|
+
initiallyHidden: f
|
|
497
527
|
}
|
|
498
528
|
)
|
|
499
529
|
] })
|
|
500
530
|
}
|
|
501
531
|
);
|
|
502
532
|
}
|
|
503
|
-
),
|
|
533
|
+
), D = ({
|
|
504
534
|
labelRef: e,
|
|
505
535
|
labelClass: t,
|
|
506
536
|
label: r,
|
|
507
537
|
labelInnerClass: a,
|
|
508
|
-
initiallyHidden:
|
|
509
|
-
}) => /* @__PURE__ */
|
|
538
|
+
initiallyHidden: i = !1
|
|
539
|
+
}) => /* @__PURE__ */ m(
|
|
510
540
|
"span",
|
|
511
541
|
{
|
|
512
542
|
ref: e,
|
|
513
543
|
className: t,
|
|
514
|
-
style:
|
|
515
|
-
children: r && /* @__PURE__ */
|
|
544
|
+
style: i ? { opacity: 0 } : void 0,
|
|
545
|
+
children: r && /* @__PURE__ */ m("span", { className: a, children: r })
|
|
516
546
|
}
|
|
517
547
|
);
|
|
518
548
|
K.displayName = "ButtonIcon";
|
|
519
549
|
/*!
|
|
520
|
-
@versini/ui-button
|
|
550
|
+
@versini/ui-button v7.1.0
|
|
521
551
|
© 2025 gizmette.com
|
|
522
552
|
*/
|
|
523
553
|
try {
|
|
524
554
|
window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
|
|
525
|
-
version: "
|
|
526
|
-
buildTime: "
|
|
555
|
+
version: "7.1.0",
|
|
556
|
+
buildTime: "08/10/2025 12:46 PM EDT",
|
|
527
557
|
homepage: "https://github.com/aversini/ui-components",
|
|
528
558
|
license: "MIT"
|
|
529
559
|
});
|
|
530
560
|
} catch {
|
|
531
561
|
}
|
|
532
|
-
const we =
|
|
562
|
+
const we = E.forwardRef(
|
|
533
563
|
({
|
|
534
564
|
children: e,
|
|
535
565
|
mode: t = "system",
|
|
536
566
|
className: r,
|
|
537
567
|
active: a = !1,
|
|
538
|
-
...
|
|
539
|
-
},
|
|
540
|
-
const
|
|
568
|
+
...i
|
|
569
|
+
}, o) => {
|
|
570
|
+
const s = a ? n(
|
|
541
571
|
"relative",
|
|
542
572
|
"focus-within:static",
|
|
543
573
|
"focus-within:after:border-transparent",
|
|
@@ -554,14 +584,16 @@ const we = I.forwardRef(
|
|
|
554
584
|
"after:border-table-light dark:after:border-table-dark": t === "alt-system"
|
|
555
585
|
}
|
|
556
586
|
) : "";
|
|
557
|
-
return /* @__PURE__ */
|
|
587
|
+
return /* @__PURE__ */ m("div", { className: s, children: /* @__PURE__ */ m(
|
|
558
588
|
K,
|
|
559
589
|
{
|
|
560
|
-
className:
|
|
561
|
-
ref:
|
|
590
|
+
className: r,
|
|
591
|
+
ref: o,
|
|
562
592
|
mode: t,
|
|
563
593
|
radius: "small",
|
|
564
|
-
|
|
594
|
+
size: "small",
|
|
595
|
+
align: "center",
|
|
596
|
+
...i,
|
|
565
597
|
children: e
|
|
566
598
|
}
|
|
567
599
|
) });
|
|
@@ -576,41 +608,41 @@ const Ne = 200, Te = ({
|
|
|
576
608
|
return { string: e, isTruncated: !1 };
|
|
577
609
|
if (e.charAt(t) === " ")
|
|
578
610
|
return { string: e.slice(0, t), isTruncated: !0 };
|
|
579
|
-
const
|
|
611
|
+
const i = e.slice(t).search(" ");
|
|
580
612
|
return {
|
|
581
|
-
string: e.slice(0, t +
|
|
613
|
+
string: e.slice(0, t + i),
|
|
582
614
|
isTruncated: !0
|
|
583
615
|
};
|
|
584
|
-
},
|
|
616
|
+
}, Ie = ({
|
|
585
617
|
children: e,
|
|
586
618
|
length: t = 200,
|
|
587
619
|
mode: r = "system",
|
|
588
620
|
focusMode: a = "system"
|
|
589
621
|
}) => {
|
|
590
|
-
const [
|
|
622
|
+
const [i, o] = G(!1);
|
|
591
623
|
if (typeof e != "string")
|
|
592
624
|
return e;
|
|
593
|
-
const { string:
|
|
625
|
+
const { string: s, isTruncated: l } = Te({
|
|
594
626
|
string: e,
|
|
595
627
|
idealLength: t
|
|
596
628
|
});
|
|
597
629
|
return /* @__PURE__ */ q("span", { style: { wordBreak: "break-word" }, children: [
|
|
598
|
-
|
|
599
|
-
|
|
630
|
+
i ? e : s,
|
|
631
|
+
l && /* @__PURE__ */ m(
|
|
600
632
|
J,
|
|
601
633
|
{
|
|
602
634
|
mode: r,
|
|
603
635
|
focusMode: a,
|
|
604
636
|
className: "ml-2",
|
|
605
637
|
size: "small",
|
|
606
|
-
onClick: (
|
|
607
|
-
|
|
638
|
+
onClick: (b) => {
|
|
639
|
+
b.preventDefault(), o(!i);
|
|
608
640
|
},
|
|
609
|
-
children:
|
|
641
|
+
children: i ? "less..." : "more..."
|
|
610
642
|
}
|
|
611
643
|
)
|
|
612
644
|
] });
|
|
613
645
|
};
|
|
614
646
|
export {
|
|
615
|
-
|
|
647
|
+
Ie as Truncate
|
|
616
648
|
};
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { Truncate as o } from "./components/Truncate/Truncate.js";
|
|
2
2
|
/*!
|
|
3
|
-
@versini/ui-truncate v4.0.
|
|
3
|
+
@versini/ui-truncate v4.0.11
|
|
4
4
|
© 2025 gizmette.com
|
|
5
5
|
*/
|
|
6
6
|
try {
|
|
7
7
|
window.__VERSINI_UI_TRUNCATE__ || (window.__VERSINI_UI_TRUNCATE__ = {
|
|
8
|
-
version: "4.0.
|
|
9
|
-
buildTime: "
|
|
8
|
+
version: "4.0.11",
|
|
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-truncate",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.11",
|
|
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",
|
|
@@ -40,12 +41,12 @@
|
|
|
40
41
|
},
|
|
41
42
|
"dependencies": {
|
|
42
43
|
"@tailwindcss/typography": "0.5.16",
|
|
43
|
-
"@testing-library/jest-dom": "6.6.
|
|
44
|
-
"@versini/ui-button": "
|
|
44
|
+
"@testing-library/jest-dom": "6.6.4",
|
|
45
|
+
"@versini/ui-button": "7.1.0",
|
|
45
46
|
"tailwindcss": "4.1.11"
|
|
46
47
|
},
|
|
47
48
|
"sideEffects": [
|
|
48
49
|
"**/*.css"
|
|
49
50
|
],
|
|
50
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "6d8fef53d038c1153effea9b0cfaf01f983c1774"
|
|
51
52
|
}
|