@versini/ui-truncate 3.0.17 → 3.0.18

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.
@@ -1,23 +1,23 @@
1
- import { jsx as g, jsxs as O } from "react/jsx-runtime";
2
- import w, { useRef as p, useLayoutEffect as U, useMemo as W, useState as F, useEffect as V, useCallback as Y } from "react";
1
+ import { jsx as h, jsxs as F } from "react/jsx-runtime";
2
+ import R, { useRef as T, useLayoutEffect as $, useMemo as D, useState as G, useEffect as H, useCallback as re } from "react";
3
3
  import i from "clsx";
4
- const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
4
+ const A = "av-button", _ = "icon", L = "button", M = "link", te = ({
5
5
  type: e,
6
6
  size: t,
7
7
  labelRight: r,
8
8
  labelLeft: a,
9
9
  align: n
10
10
  }) => {
11
- const o = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", c = "max-h-12 py-2 px-4";
11
+ const o = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", s = "max-h-12 py-2 px-4";
12
12
  switch (e) {
13
- case C:
14
- case I:
13
+ case L:
14
+ case M:
15
15
  return i({
16
16
  [o]: t === "small",
17
17
  [d]: t === "medium",
18
- [c]: t === "large"
18
+ [s]: t === "large"
19
19
  });
20
- case N:
20
+ case _:
21
21
  return i("inline-flex items-center", {
22
22
  "justify-center": n === "center",
23
23
  "justify-start": n === "left",
@@ -30,7 +30,7 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
30
30
  "h-12": t === "large" && (r || a)
31
31
  });
32
32
  }
33
- }, ee = ({
33
+ }, ae = ({
34
34
  type: e,
35
35
  size: t,
36
36
  labelRight: r,
@@ -38,22 +38,22 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
38
38
  }) => {
39
39
  const n = "text-sm font-medium", o = "text-base font-medium", d = "text-lg font-medium";
40
40
  switch (e) {
41
- case C:
42
- case I:
41
+ case L:
42
+ case M:
43
43
  return i({
44
- "text-center": e === I,
44
+ "text-center": e === M,
45
45
  [n]: t === "small",
46
46
  [o]: t === "medium",
47
47
  [d]: t === "large"
48
48
  });
49
- case N:
49
+ case _:
50
50
  return i({
51
51
  [n]: t === "small" && (r || a),
52
52
  [o]: t === "medium" && (r || a),
53
53
  [d]: t === "large" && (r || a)
54
54
  });
55
55
  }
56
- }, re = ({
56
+ }, ie = ({
57
57
  mode: e,
58
58
  noBackground: t,
59
59
  noTruncate: r,
@@ -89,7 +89,7 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
89
89
  return i("not-prose text-copy-lighter", {
90
90
  truncate: !r
91
91
  });
92
- }, te = ({
92
+ }, ne = ({
93
93
  mode: e,
94
94
  noBackground: t,
95
95
  variant: r
@@ -119,13 +119,13 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
119
119
  if (r === "selected")
120
120
  return "bg-action-selected-dark";
121
121
  }
122
- }, ae = ({
122
+ }, oe = ({
123
123
  radius: e
124
124
  }) => i({
125
125
  "rounded-full": e === "large",
126
126
  "rounded-md": e === "medium",
127
127
  "rounded-sm": e === "small"
128
- }), ie = ({
128
+ }), de = ({
129
129
  mode: e,
130
130
  disabled: t,
131
131
  variant: r
@@ -155,7 +155,7 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
155
155
  });
156
156
  if (r === "selected")
157
157
  return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
158
- }, ne = ({
158
+ }, ce = ({
159
159
  mode: e,
160
160
  disabled: t,
161
161
  variant: r
@@ -185,7 +185,7 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
185
185
  });
186
186
  if (r === "selected")
187
187
  return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
188
- }, oe = ({
188
+ }, se = ({
189
189
  mode: e,
190
190
  noBorder: t,
191
191
  variant: r
@@ -215,14 +215,14 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
215
215
  });
216
216
  if (r === "selected")
217
217
  return "border border-border-selected-dark";
218
- }, de = ({
218
+ }, le = ({
219
219
  focusMode: e
220
220
  }) => i("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
221
221
  "focus:outline-focus-dark": e === "dark",
222
222
  "focus:outline-focus-light": e === "light",
223
223
  "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
224
224
  "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
225
- }), se = ({
225
+ }), ue = ({
226
226
  mode: e,
227
227
  raw: t,
228
228
  iconClassName: r
@@ -234,11 +234,11 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
234
234
  "dark:text-copy-accent-dark": e === "system"
235
235
  },
236
236
  r
237
- ), ce = ({
237
+ ), ge = ({
238
238
  animated: e
239
239
  }) => i({
240
240
  "transition-opacity duration-300 ease-in": e
241
- }), q = ({
241
+ }), P = ({
242
242
  type: e,
243
243
  className: t,
244
244
  raw: r,
@@ -246,64 +246,64 @@ const A = "av-button", N = "icon", C = "button", I = "link", $ = ({
246
246
  focusMode: n,
247
247
  disabled: o,
248
248
  fullWidth: d,
249
- size: c,
249
+ size: s,
250
250
  noBorder: l,
251
- labelRight: m,
252
- labelLeft: f,
251
+ labelRight: b,
252
+ labelLeft: v,
253
253
  noBackground: u,
254
- variant: s,
255
- noTruncate: h,
256
- align: k,
257
- radius: T,
258
- animated: B
259
- }) => (s || (s = "primary"), r ? i(A, t) : i(
254
+ variant: c,
255
+ noTruncate: m,
256
+ align: N,
257
+ radius: z,
258
+ animated: I
259
+ }) => (c || (c = "primary"), r ? i(A, t) : i(
260
260
  A,
261
- re({
261
+ ie({
262
262
  mode: a,
263
- variant: s,
263
+ variant: c,
264
264
  noBackground: u,
265
- noTruncate: h
265
+ noTruncate: m
266
266
  }),
267
- te({ mode: a, noBackground: u, variant: s }),
268
- ae({ radius: T }),
269
- $({
267
+ ne({ mode: a, noBackground: u, variant: c }),
268
+ oe({ radius: z }),
269
+ te({
270
270
  type: e,
271
- size: c,
272
- labelRight: m,
273
- labelLeft: f,
274
- align: k
271
+ size: s,
272
+ labelRight: b,
273
+ labelLeft: v,
274
+ align: N
275
275
  }),
276
- ee({ type: e, size: c, labelRight: m, labelLeft: f }),
277
- oe({ mode: a, variant: s, noBorder: l }),
278
- de({ focusMode: n }),
279
- ie({ mode: a, variant: s, disabled: o }),
280
- ne({ mode: a, variant: s, disabled: o }),
276
+ ae({ type: e, size: s, labelRight: b, labelLeft: v }),
277
+ se({ mode: a, variant: c, noBorder: l }),
278
+ le({ focusMode: n }),
279
+ de({ mode: a, variant: c, disabled: o }),
280
+ ce({ mode: a, variant: c, disabled: o }),
281
281
  {
282
282
  "w-full": d,
283
283
  "disabled:cursor-not-allowed disabled:opacity-50": o
284
284
  },
285
285
  i({
286
- "transition-[width] duration-300 ease-in-out": e === N && B
286
+ "transition-[width] duration-300 ease-in-out": e === _ && I
287
287
  }),
288
288
  t
289
- )), le = (e, t, r) => {
289
+ )), he = (e, t, r) => {
290
290
  var a;
291
291
  !t && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof r == "function" && r(e);
292
- }, M = w.forwardRef((e, t) => {
292
+ }, j = R.forwardRef((e, t) => {
293
293
  const { onClick: r, noInternalClick: a = !1, ...n } = e;
294
- return /* @__PURE__ */ g(
294
+ return /* @__PURE__ */ h(
295
295
  "button",
296
296
  {
297
297
  ref: t,
298
298
  onClick: (o) => {
299
- le(o, a, r);
299
+ he(o, a, r);
300
300
  },
301
301
  ...n
302
302
  }
303
303
  );
304
304
  });
305
- M.displayName = "BaseButton";
306
- const D = w.forwardRef(
305
+ j.displayName = "BaseButton";
306
+ const V = R.forwardRef(
307
307
  ({
308
308
  children: e,
309
309
  disabled: t = !1,
@@ -312,55 +312,55 @@ const D = w.forwardRef(
312
312
  fullWidth: n = !1,
313
313
  className: o,
314
314
  size: d = "medium",
315
- raw: c = !1,
315
+ raw: s = !1,
316
316
  noBorder: l = !1,
317
- variant: m = "primary",
318
- noTruncate: f = !1,
317
+ variant: b = "primary",
318
+ noTruncate: v = !1,
319
319
  radius: u = "large",
320
- ...s
321
- }, h) => {
322
- const k = q({
323
- type: C,
320
+ ...c
321
+ }, m) => {
322
+ const N = P({
323
+ type: L,
324
324
  mode: r,
325
325
  focusMode: a,
326
326
  fullWidth: n,
327
327
  disabled: t,
328
- raw: c,
328
+ raw: s,
329
329
  className: o,
330
330
  size: d,
331
331
  noBorder: l,
332
- variant: m,
333
- noTruncate: f,
332
+ variant: b,
333
+ noTruncate: v,
334
334
  radius: u
335
335
  });
336
- return /* @__PURE__ */ g(
337
- M,
336
+ return /* @__PURE__ */ h(
337
+ j,
338
338
  {
339
- ref: h,
340
- className: k,
339
+ ref: m,
340
+ className: N,
341
341
  disabled: t,
342
- ...s,
342
+ ...c,
343
343
  children: e
344
344
  }
345
345
  );
346
346
  }
347
347
  );
348
- D.displayName = "Button";
349
- function ue() {
350
- const e = p(!1);
351
- return V(() => (e.current = !0, () => {
348
+ V.displayName = "Button";
349
+ function me() {
350
+ const e = T(!1);
351
+ return H(() => (e.current = !0, () => {
352
352
  e.current = !1;
353
- }), []), Y(() => e.current, []);
353
+ }), []), re(() => e.current, []);
354
354
  }
355
- function ge(e) {
356
- return W(() => e.every((t) => t == null) ? () => {
355
+ function be(e) {
356
+ return D(() => e.every((t) => t == null) ? () => {
357
357
  } : (t) => {
358
358
  e.forEach((r) => {
359
359
  typeof r == "function" ? r(t) : r != null && (r.current = t);
360
360
  });
361
361
  }, e);
362
362
  }
363
- const he = {
363
+ const fe = {
364
364
  x: 0,
365
365
  y: 0,
366
366
  width: 0,
@@ -370,32 +370,32 @@ const he = {
370
370
  bottom: 0,
371
371
  right: 0
372
372
  };
373
- function z(e) {
374
- const t = ue(), r = p(0), a = p(null), [n, o] = F(he), d = W(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((c) => {
375
- const l = c[0];
373
+ function C(e) {
374
+ const t = me(), r = T(0), a = T(null), [n, o] = G(fe), d = D(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((s) => {
375
+ const l = s[0];
376
376
  l && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
377
377
  a.current && t() && o(l.contentRect);
378
378
  }));
379
379
  }), [t]);
380
- return V(() => (a.current && (d == null || d.observe(a.current, e)), () => {
380
+ return H(() => (a.current && (d == null || d.observe(a.current, e)), () => {
381
381
  d == null || d.disconnect(), r.current && cancelAnimationFrame(r.current);
382
382
  }), [d, e]), [a, n];
383
383
  }
384
- const me = {
384
+ const O = {
385
385
  small: 24,
386
386
  // w-6
387
387
  medium: 32,
388
388
  // w-8
389
389
  large: 48
390
390
  // w-12
391
- }, be = {
391
+ }, U = {
392
392
  small: 8 * 2,
393
393
  // px-2 x 2
394
394
  medium: 12 * 2,
395
395
  // px-3 x 2
396
396
  large: 16 * 2
397
397
  // px-4 x 2
398
- }, fe = 2, P = w.forwardRef(
398
+ }, W = 2, q = R.forwardRef(
399
399
  ({
400
400
  children: e,
401
401
  disabled: t = !1,
@@ -404,84 +404,87 @@ const me = {
404
404
  fullWidth: n = !1,
405
405
  className: o,
406
406
  type: d = "button",
407
- raw: c = !1,
407
+ raw: s = !1,
408
408
  noBorder: l = !1,
409
- "aria-label": m,
410
- label: f,
409
+ "aria-label": b,
410
+ label: v,
411
411
  size: u = "medium",
412
- labelRight: s,
413
- labelLeft: h,
414
- noBackground: k = !1,
415
- align: T = "center",
416
- radius: B = "large",
417
- variant: G = "primary",
418
- iconClassName: H,
419
- animated: L = !1,
420
- ...X
421
- }, Z) => {
422
- const J = q({
423
- type: N,
412
+ labelRight: c,
413
+ labelLeft: m,
414
+ noBackground: N = !1,
415
+ align: z = "center",
416
+ radius: I = "large",
417
+ variant: Z = "primary",
418
+ iconClassName: J,
419
+ animated: f = !1,
420
+ ...K
421
+ }, Q) => {
422
+ const X = P({
423
+ type: _,
424
424
  mode: r,
425
425
  focusMode: a,
426
426
  fullWidth: n,
427
427
  disabled: t,
428
- raw: c,
428
+ raw: s,
429
429
  className: o,
430
430
  noBorder: l,
431
431
  size: u,
432
- labelRight: s,
433
- labelLeft: h,
434
- noBackground: k,
435
- align: T,
436
- radius: B,
437
- variant: G,
438
- animated: L
439
- }), K = se({ mode: r, raw: c, iconClassName: H }), j = ce({ animated: L }), [b, R] = z(), [y, E] = z(), [x, S] = z(), _ = p(0), v = p(null), Q = ge([Z, v]);
440
- return U(() => {
441
- x && x.current && (_.current = S.width + be[u] + (l ? 0 : fe));
442
- }, [S, x, u, l]), U(() => {
443
- v && v.current && (s && b && R.width > 0 ? (b.current && (b.current.style.opacity = "100"), v.current.style.width = `${R.width + _.current}px`) : h && E.width > 0 ? (y.current && (y.current.style.opacity = "100"), v.current.style.width = `${E.width + _.current}px`) : (b.current && (b.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), v.current.style.width = `${me[u]}px`));
432
+ labelRight: c,
433
+ labelLeft: m,
434
+ noBackground: N,
435
+ align: z,
436
+ radius: I,
437
+ variant: Z,
438
+ animated: f
439
+ }), Y = ue({ mode: r, raw: s, iconClassName: J }), S = ge({ animated: f }), [y, k] = C(), [p, x] = C(), [B, E] = C(), w = T(0), g = T(null), ee = be([Q, g]);
440
+ return $(() => {
441
+ f || (w.current = E.width + U[u] + (l ? 0 : W), g && g.current && (k.width > 0 ? g.current.style.width = `${k.width + w.current}px` : x.width > 0 ? g.current.style.width = `${x.width + w.current}px` : g.current.style.width = `${O[u]}px`));
442
+ }, [f, E, u, l, k, x]), $(() => {
443
+ B && B.current && f && (w.current = E.width + U[u] + (l ? 0 : W));
444
+ }, [E, B, u, l, f]), $(() => {
445
+ g && g.current && f && (c && y && k.width > 0 ? (y.current && (y.current.style.opacity = "100"), g.current.style.width = `${k.width + w.current}px`) : m && x.width > 0 ? (p.current && (p.current.style.opacity = "100"), g.current.style.width = `${x.width + w.current}px`) : (y.current && (y.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"), g.current.style.width = `${O[u]}px`));
444
446
  }, [
445
- R,
446
- s,
447
- b,
448
- E,
449
- h,
447
+ k,
448
+ c,
450
449
  y,
451
- u
452
- ]), /* @__PURE__ */ O(
453
- M,
450
+ x,
451
+ m,
452
+ p,
453
+ u,
454
+ f
455
+ ]), /* @__PURE__ */ F(
456
+ j,
454
457
  {
455
- ref: Q,
456
- className: J,
458
+ ref: ee,
459
+ className: X,
457
460
  disabled: t,
458
461
  type: d,
459
- "aria-label": m || f,
460
- ...X,
462
+ "aria-label": b || v,
463
+ ...K,
461
464
  children: [
462
- /* @__PURE__ */ g("span", { ref: y, className: j, children: h && /* @__PURE__ */ g("span", { className: "pr-2", children: h }) }),
463
- /* @__PURE__ */ g("span", { ref: x, className: K, children: e }),
464
- /* @__PURE__ */ g("span", { ref: b, className: j, children: s && /* @__PURE__ */ g("span", { className: "pl-2", children: s }) })
465
+ /* @__PURE__ */ h("span", { ref: p, className: S, children: m && /* @__PURE__ */ h("span", { className: "pr-2", children: m }) }),
466
+ /* @__PURE__ */ h("span", { ref: B, className: Y, children: e }),
467
+ /* @__PURE__ */ h("span", { ref: y, className: S, children: c && /* @__PURE__ */ h("span", { className: "pl-2", children: c }) })
465
468
  ]
466
469
  }
467
470
  );
468
471
  }
469
472
  );
470
- P.displayName = "ButtonIcon";
473
+ q.displayName = "ButtonIcon";
471
474
  /*!
472
- @versini/ui-button v4.2.0
475
+ @versini/ui-button v4.2.1
473
476
  © 2025 gizmette.com
474
477
  */
475
478
  try {
476
479
  window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
477
- version: "4.2.0",
478
- buildTime: "01/25/2025 10:54 PM EST",
480
+ version: "4.2.1",
481
+ buildTime: "01/26/2025 05:19 PM EST",
479
482
  homepage: "https://github.com/aversini/ui-components",
480
483
  license: "MIT"
481
484
  });
482
485
  } catch {
483
486
  }
484
- const ye = w.forwardRef(
487
+ const ye = R.forwardRef(
485
488
  ({
486
489
  children: e,
487
490
  mode: t = "system",
@@ -506,8 +509,8 @@ const ye = w.forwardRef(
506
509
  "after:border-table-light dark:after:border-table-dark": t === "alt-system"
507
510
  }
508
511
  ) : "";
509
- return /* @__PURE__ */ g("div", { className: d, children: /* @__PURE__ */ g(
510
- P,
512
+ return /* @__PURE__ */ h("div", { className: d, children: /* @__PURE__ */ h(
513
+ q,
511
514
  {
512
515
  className: i("justify-center", r),
513
516
  ref: o,
@@ -539,24 +542,24 @@ const ve = 200, ke = ({
539
542
  mode: r = "system",
540
543
  focusMode: a = "system"
541
544
  }) => {
542
- const [n, o] = F(!1);
545
+ const [n, o] = G(!1);
543
546
  if (typeof e != "string")
544
547
  return e;
545
- const { string: d, isTruncated: c } = ke({
548
+ const { string: d, isTruncated: s } = ke({
546
549
  string: e,
547
550
  idealLength: t
548
551
  });
549
- return /* @__PURE__ */ O("span", { style: { wordBreak: "break-word" }, children: [
552
+ return /* @__PURE__ */ F("span", { style: { wordBreak: "break-word" }, children: [
550
553
  n ? e : d,
551
- c && /* @__PURE__ */ g(
552
- D,
554
+ s && /* @__PURE__ */ h(
555
+ V,
553
556
  {
554
557
  mode: r,
555
558
  focusMode: a,
556
559
  className: "ml-2",
557
560
  size: "small",
558
- onClick: (m) => {
559
- m.preventDefault(), o(!n);
561
+ onClick: (b) => {
562
+ b.preventDefault(), o(!n);
560
563
  },
561
564
  children: n ? "less..." : "more..."
562
565
  }
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 v3.0.17
3
+ @versini/ui-truncate v3.0.18
4
4
  © 2025 gizmette.com
5
5
  */
6
6
  try {
7
7
  window.__VERSINI_UI_TRUNCATE__ || (window.__VERSINI_UI_TRUNCATE__ = {
8
- version: "3.0.17",
9
- buildTime: "01/25/2025 10:55 PM EST",
8
+ version: "3.0.18",
9
+ buildTime: "01/26/2025 05:19 PM EST",
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": "3.0.17",
3
+ "version": "3.0.18",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -40,11 +40,11 @@
40
40
  },
41
41
  "dependencies": {
42
42
  "@tailwindcss/typography": "0.5.16",
43
- "@versini/ui-button": "4.2.0",
43
+ "@versini/ui-button": "4.2.1",
44
44
  "tailwindcss": "3.4.17"
45
45
  },
46
46
  "sideEffects": [
47
47
  "**/*.css"
48
48
  ],
49
- "gitHead": "95add63a475dc1307dd4ada55909553876a55b73"
49
+ "gitHead": "2afa12a4fcc5da2231f908342e8e18524126274b"
50
50
  }