@versini/ui-truncate 4.0.5 → 4.0.7

package/dist/components/Truncate/Truncate.js

@@ -1,28 +1,28 @@
-import { jsx as g, jsxs as W } from "react/jsx-runtime";
-import B, { useRef as x, useLayoutEffect as S, useState as F, useMemo as D, useEffect as V, useCallback as $ } from "react";
-import o from "clsx";
-const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
+import { jsx as g, jsxs as q } from "react/jsx-runtime";
+import I, { useRef as w, useLayoutEffect as D, useEffect as A, useState as G, useMemo as P, useCallback as ae } from "react";
+import n from "clsx";
+const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a,
-  align: n,
+  align: o,
   animated: i
 }) => {
-  const d = "max-h-8 py-0 px-2", c = "max-h-9 h-8 px-3", s = "max-h-12 py-2 px-4";
+  const l = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", s = "max-h-12 py-2 px-4";
   switch (e) {
-    case M:
-    case z:
-      return o({
-        [d]: t === "small",
-        [c]: t === "medium",
+    case S:
+    case j:
+      return n({
+        [l]: t === "small",
+        [d]: t === "medium",
         [s]: t === "large"
       });
-    case T:
-      return o("flex items-center", {
-        "justify-center": n === "center",
-        "justify-start": n === "left",
-        "justify-end": n === "right",
+    case R:
+      return n("flex items-center", {
+        "justify-center": o === "center",
+        "justify-start": o === "left",
+        "justify-end": o === "right",
         "h-6 w-6 p-0": t === "small" && !i && !(r || a),
         "h-6 px-2": t === "small" && !i && (r || a),
         "h-8 w-8 p-1": t === "medium" && !i && !(r || a),
@@ -37,30 +37,30 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
         "h-12": t === "large" && i && (r || a)
       });
   }
-}, re = ({
+}, ne = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a
 }) => {
-  const n = "text-sm font-medium", i = "text-base font-medium", d = "text-lg font-medium";
+  const o = "text-sm font-medium", i = "text-base font-medium", l = "text-lg font-medium";
   switch (e) {
-    case M:
-    case z:
-      return o({
-        "text-center": e === z,
-        [n]: t === "small",
+    case S:
+    case j:
+      return n({
+        "text-center": e === j,
+        [o]: t === "small",
         [i]: t === "medium",
-        [d]: t === "large"
+        [l]: t === "large"
       });
-    case T:
-      return o({
-        [n]: t === "small" && (r || a),
+    case R:
+      return n({
+        [o]: t === "small" && (r || a),
         [i]: t === "medium" && (r || a),
-        [d]: t === "large" && (r || a)
+        [l]: t === "large" && (r || a)
       });
   }
-}, te = ({
+}, oe = ({
   mode: e,
   noBackground: t,
   truncate: r,
@@ -69,7 +69,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   if (t)
     return "not-prose";
   if (a === "primary")
-    return o("not-prose", {
+    return n("not-prose", {
       truncate: r,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
@@ -77,7 +77,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
       "dark:text-copy-light": e === "alt-system"
     });
   if (a === "secondary")
-    return o("not-prose", {
+    return n("not-prose", {
       truncate: r,
       "text-copy-light": e === "light" || e === "system",
       "text-copy-lighter": e === "dark" || e === "alt-system",
@@ -85,7 +85,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
       "dark:text-copy-light": e === "system"
     });
   if (a === "danger")
-    return o("not-prose", {
+    return n("not-prose", {
       truncate: r,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
@@ -93,31 +93,31 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
       "dark:text-copy-light": e === "alt-system"
     });
   if (a === "selected")
-    return o("not-prose text-copy-lighter", {
+    return n("not-prose text-copy-lighter", {
       truncate: r
     });
-}, ae = ({
+}, le = ({
   mode: e,
   noBackground: t,
   variant: r
 }) => {
   if (!t) {
     if (r === "primary")
-      return o({
+      return n({
         "bg-action-dark": e === "dark",
         "bg-action-light": e === "light",
         "bg-action-dark dark:bg-action-light": e === "system",
         "bg-action-light dark:bg-action-dark": e === "alt-system"
       });
     if (r === "secondary")
-      return o({
+      return n({
         "bg-action-dark": e === "light",
         "bg-action-light": e === "dark",
         "bg-action-dark dark:bg-action-light": e === "alt-system",
         "bg-action-light dark:bg-action-dark": e === "system"
       });
     if (r === "danger")
-      return o({
+      return n({
         "bg-action-danger-dark": e === "dark",
         "bg-action-danger-light": e === "light",
         "bg-action-danger-dark dark:bg-action-danger-light": e === "system",
@@ -126,13 +126,13 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     if (r === "selected")
       return "bg-action-selected-dark";
   }
-}, ie = ({
+}, ce = ({
   radius: e
-}) => o({
+}) => n({
   "rounded-full": e === "large",
   "rounded-md": e === "medium",
   "rounded-xs": e === "small"
-}), oe = ({
+}), de = ({
   mode: e,
   disabled: t,
   variant: r
@@ -140,21 +140,21 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   if (t)
     return "";
   if (r === "primary")
-    return o("hover:text-copy-light-hover", {
+    return n("hover:text-copy-light-hover", {
       "hover:bg-action-dark-hover": e === "dark",
       "hover:bg-action-light-hover": e === "light",
       "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system",
       "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system"
     });
   if (r === "secondary")
-    return o("hover:text-copy-light-hover", {
+    return n("hover:text-copy-light-hover", {
       "hover:bg-action-dark-hover": e === "light",
       "hover:bg-action-light-hover": e === "dark",
       "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system",
       "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system"
     });
   if (r === "danger")
-    return o("hover:text-copy-light-hover", {
+    return n("hover:text-copy-light-hover", {
       "hover:bg-action-danger-dark-hover": e === "dark",
       "hover:bg-action-danger-light-hover": e === "light",
       "hover:bg-action-danger-dark-hover dark:hover:bg-action-danger-light-hover": e === "system",
@@ -162,7 +162,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     });
   if (r === "selected")
     return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
-}, ne = ({
+}, se = ({
   mode: e,
   disabled: t,
   variant: r
@@ -170,21 +170,21 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   if (t)
     return "";
   if (r === "primary")
-    return o("active:text-copy-light-active", {
+    return n("active:text-copy-light-active", {
       "active:bg-action-dark-active": e === "dark",
       "active:bg-action-light-active": e === "light",
       "active:bg-action-dark-active dark:active:bg-action-light-active": e === "system",
       "active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system"
     });
   if (r === "secondary")
-    return o("active:text-copy-light-active", {
+    return n("active:text-copy-light-active", {
       "active:bg-action-dark-active": e === "light",
       "active:bg-action-light-active": e === "dark",
       "active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system",
       "active:bg-action-light-active dark:active:bg-action-dark-active": e === "system"
     });
   if (r === "danger")
-    return o("active:text-copy-lighter-active", {
+    return n("active:text-copy-lighter-active", {
       "active:bg-action-danger-dark-active": e === "dark",
       "active:bg-action-danger-light-active": e === "light",
       "active:bg-action-danger-dark-active dark:active:bg-action-danger-light-active": e === "system",
@@ -192,7 +192,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     });
   if (r === "selected")
     return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
-}, de = ({
+}, ue = ({
   mode: e,
   noBorder: t,
   variant: r
@@ -200,21 +200,21 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   if (t)
     return "border border-transparent";
   if (r === "primary")
-    return o("border", {
+    return n("border", {
       "border-border-dark": e === "dark",
       "border-border-accent": e === "light",
       "border-border-dark dark:border-border-accent": e === "system",
       "border-border-accent dark:border-border-dark": e === "alt-system"
     });
   if (r === "secondary")
-    return o("border", {
+    return n("border", {
       "border-border-dark": e === "light",
       "border-border-accent": e === "dark",
       "border-border-dark dark:border-border-accent": e === "alt-system",
       "border-border-accent dark:border-border-dark": e === "system"
     });
   if (r === "danger")
-    return o("border", {
+    return n("border", {
       "border-border-danger-dark": e === "dark",
       "border-border-danger-medium": e === "light",
       "border-border-danger-dark dark:border-border-danger-medium": e === "system",
@@ -222,18 +222,18 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     });
   if (r === "selected")
     return "border border-border-selected-dark";
-}, le = ({
+}, ge = ({
   focusMode: e
-}) => o("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
+}) => n("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
   "focus:outline-focus-dark": e === "dark",
   "focus:outline-focus-light": e === "light",
   "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
   "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
-}), ce = ({
+}), me = ({
   mode: e,
   raw: t,
   iconClassName: r
-}) => t ? "" : o(
+}) => t ? "" : n(
   {
     "text-copy-accent-dark": e === "light" || e === "alt-system",
     "text-copy-light": e === "dark" || e === "system",
@@ -241,134 +241,134 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     "dark:text-copy-accent-dark": e === "system"
   },
   r
-), se = ({
+), he = ({
   animated: e
-}) => o({
-  "transition-opacity duration-300 ease-in": e
-}), q = ({
+}) => n({
+  "transition-opacity duration-300 ease-in-out": e
+}), V = ({
   type: e,
   className: t,
   raw: r,
   mode: a,
-  focusMode: n,
+  focusMode: o,
   disabled: i,
-  fullWidth: d,
-  size: c,
+  fullWidth: l,
+  size: d,
   noBorder: s,
-  labelRight: h,
-  labelLeft: f,
+  labelRight: f,
+  labelLeft: k,
   noBackground: u,
-  variant: l,
+  variant: c,
   truncate: m,
-  align: p,
-  radius: R,
-  animated: w
-}) => (l || (l = "primary"), r ? o(O, t) : o(
-  O,
-  te({
+  align: N,
+  radius: E,
+  animated: T
+}) => (c || (c = "primary"), r ? n(F, t) : n(
+  F,
+  oe({
     mode: a,
-    variant: l,
+    variant: c,
     noBackground: u,
     truncate: m
   }),
-  ae({ mode: a, noBackground: u, variant: l }),
-  ie({ radius: R }),
-  ee({
+  le({ mode: a, noBackground: u, variant: c }),
+  ce({ radius: E }),
+  ie({
     type: e,
-    size: c,
-    labelRight: h,
-    labelLeft: f,
-    align: p,
-    animated: w
+    size: d,
+    labelRight: f,
+    labelLeft: k,
+    align: N,
+    animated: T
   }),
-  re({ type: e, size: c, labelRight: h, labelLeft: f }),
-  de({ mode: a, variant: l, noBorder: s }),
-  le({ focusMode: n }),
-  oe({ mode: a, variant: l, disabled: i }),
-  ne({ mode: a, variant: l, disabled: i }),
+  ne({ type: e, size: d, labelRight: f, labelLeft: k }),
+  ue({ mode: a, variant: c, noBorder: s }),
+  ge({ focusMode: o }),
+  de({ mode: a, variant: c, disabled: i }),
+  se({ mode: a, variant: c, disabled: i }),
   {
-    "w-full": d,
+    "w-full": l,
     "disabled:cursor-not-allowed disabled:opacity-50": i
   },
-  o({
-    "transition-[width] duration-300 ease-in-out": e === T && w
+  n({
+    "transition-[width] duration-300 ease-in": e === R && T
   }),
   t
-)), ue = (e, t, r) => {
+)), be = (e, t, r) => {
   var a;
   !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);
-}, L = B.forwardRef((e, t) => {
-  const { onClick: r, noInternalClick: a = !1, ...n } = e;
+}, O = I.forwardRef((e, t) => {
+  const { onClick: r, noInternalClick: a = !1, ...o } = e;
   return /* @__PURE__ */ g(
     "button",
     {
       ref: t,
       onClick: (i) => {
-        ue(i, a, r);
+        be(i, a, r);
       },
-      ...n
+      ...o
     }
   );
 });
-L.displayName = "BaseButton";
-const G = B.forwardRef(
+O.displayName = "BaseButton";
+const J = I.forwardRef(
   ({
     children: e,
     disabled: t = !1,
     mode: r = "system",
     focusMode: a = "system",
-    fullWidth: n = !1,
+    fullWidth: o = !1,
     className: i,
-    size: d = "medium",
-    raw: c = !1,
+    size: l = "medium",
+    raw: d = !1,
     noBorder: s = !1,
-    variant: h = "primary",
-    truncate: f = !1,
+    variant: f = "primary",
+    truncate: k = !1,
     radius: u = "large",
-    ...l
+    ...c
   }, m) => {
-    const p = q({
-      type: M,
+    const N = V({
+      type: S,
       mode: r,
       focusMode: a,
-      fullWidth: n,
+      fullWidth: o,
       disabled: t,
-      raw: c,
+      raw: d,
       className: i,
-      size: d,
+      size: l,
       noBorder: s,
-      variant: h,
-      truncate: f,
+      variant: f,
+      truncate: k,
       radius: u
     });
     return /* @__PURE__ */ g(
-      L,
+      O,
       {
         ref: m,
-        className: p,
+        className: N,
         disabled: t,
-        ...l,
+        ...c,
         children: e
       }
     );
   }
 );
-G.displayName = "Button";
-function ge() {
-  const e = x(!1);
-  return V(() => (e.current = !0, () => {
+J.displayName = "Button";
+function fe() {
+  const e = w(!1);
+  return A(() => (e.current = !0, () => {
     e.current = !1;
-  }), []), $(() => e.current, []);
+  }), []), ae(() => e.current, []);
 }
-function he(e) {
-  return D(() => e.every((t) => t == null) ? () => {
+function ye(e) {
+  return P(() => e.every((t) => t == null) ? () => {
   } : (t) => {
     e.forEach((r) => {
       typeof r == "function" ? r(t) : r != null && (r.current = t);
     });
-  }, e);
+  }, [...e]);
 }
-const me = {
+const ve = {
   x: 0,
   y: 0,
   width: 0,
@@ -378,148 +378,166 @@ const me = {
   bottom: 0,
   right: 0
 };
-function _(e) {
-  const t = ge(), r = x(0), a = x(null), [n, i] = F(me), d = D(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((c) => {
-    const s = c[0];
+function M(e) {
+  const t = fe(), r = w(0), a = w(null), [o, i] = G(ve), l = P(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
+    const s = d[0];
     s && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
       a.current && t() && i(s.contentRect);
     }));
   }), [t]);
-  return V(() => (a.current && (d == null || d.observe(a.current, e)), () => {
-    d == null || d.disconnect(), r.current && cancelAnimationFrame(r.current);
-  }), [d, e]), [a, n];
+  return A(() => (a.current && (l == null || l.observe(a.current, e)), () => {
+    l == null || l.disconnect(), r.current && cancelAnimationFrame(r.current);
+  }), [l, e]), [a, o];
 }
-const be = {
+const C = {
   small: 24,
   // w-6
   medium: 32,
   // w-8
   large: 48
   // w-12
-}, fe = {
+}, ke = {
   small: 8 * 2,
   // px-2 x 2
   medium: 12 * 2,
   // px-3 x 2
   large: 16 * 2
   // px-4 x 2
-}, ye = 2, H = B.forwardRef(
+}, pe = 2, xe = 300, K = I.forwardRef(
   ({
     children: e,
     disabled: t = !1,
     mode: r = "system",
     focusMode: a = "system",
-    fullWidth: n = !1,
+    fullWidth: o = !1,
     className: i,
-    type: d = "button",
-    raw: c = !1,
+    type: l = "button",
+    raw: d = !1,
     noBorder: s = !1,
-    "aria-label": h,
-    label: f,
+    "aria-label": f,
+    label: k,
     size: u = "medium",
-    labelRight: l,
+    labelRight: c,
     labelLeft: m,
-    noBackground: p = !1,
-    align: R = "center",
-    radius: w = "large",
-    variant: P = "primary",
+    noBackground: N = !1,
+    align: E = "center",
+    radius: T = "large",
+    variant: Q = "primary",
     iconClassName: X,
     animated: y = !1,
-    ...Z
-  }, J) => {
-    const K = q({
-      type: T,
+    ...Y
+  }, Z) => {
+    const $ = V({
+      type: R,
       mode: r,
       focusMode: a,
-      fullWidth: n,
+      fullWidth: o,
       disabled: t,
-      raw: c,
+      raw: d,
       className: i,
       noBorder: s,
       size: u,
-      labelRight: l,
+      labelRight: c,
       labelLeft: m,
-      noBackground: p,
-      align: R,
-      radius: w,
-      variant: P,
+      noBackground: N,
+      align: E,
+      radius: T,
+      variant: Q,
       animated: y
-    }), Q = ce({ mode: r, raw: c, iconClassName: X }), j = se({ animated: y }), [b, C] = _(), [v, E] = _(), [N, A] = _(), I = x(0), k = x(null), Y = he([J, k]);
-    return S(() => {
-      N && N.current && y && (I.current = A.width + fe[u] + (s ? 0 : ye));
-    }, [A, N, u, s, y]), S(() => {
-      k && k.current && y && (l && b && C.width > 0 ? (b.current && (b.current.style.opacity = "100"), k.current.style.width = `${C.width + I.current}px`) : m && E.width > 0 ? (v.current && (v.current.style.opacity = "100"), k.current.style.width = `${E.width + I.current}px`) : (b.current && (b.current.style.opacity = "0"), v.current && (v.current.style.opacity = "0"), k.current.style.width = `${be[u]}px`));
+    }), ee = me({ mode: r, raw: d, iconClassName: X }), U = he({ animated: y }), re = "flex items-center justify-center relative w-full h-full overflow-hidden", [h, _] = M(), [b, z] = M(), [B, W] = M(), L = w(0), v = w(null), p = w(null), te = ye([Z, v]);
+    return D(() => {
+      B && B.current && y && (L.current = W.width + ke[u] + (s ? 0 : pe), v.current && !v.current.style.width && (v.current.style.width = `${C[u]}px`));
+    }, [W, B, u, s, y]), D(() => {
+      if (v && v.current && y) {
+        let x = C[u];
+        c && h && _.width > 0 ? x = _.width + L.current : m && b && 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"), b.current && (b.current.style.opacity = "0"), v.current.style.width = `${x}px`, x > C[u] && (p.current = setTimeout(() => {
+          h.current && c && (h.current.style.opacity = "1"), b.current && m && (b.current.style.opacity = "1"), p.current = null;
+        }, xe * 0.8))), x === C[u] && (h.current && (h.current.style.opacity = "0"), b.current && (b.current.style.opacity = "0"));
+      }
     }, [
-      C,
-      l,
-      b,
-      E,
+      _,
+      c,
+      h,
+      z,
       m,
-      v,
+      b,
       u,
       y
-    ]), /* @__PURE__ */ W(
-      L,
+    ]), A(() => () => {
+      p.current && clearTimeout(p.current);
+    }, []), /* @__PURE__ */ g(
+      O,
       {
-        ref: Y,
-        className: K,
+        ref: te,
+        className: $,
         disabled: t,
-        type: d,
-        "aria-label": h || f,
-        ...Z,
-        children: [
+        type: l,
+        "aria-label": f || k,
+        ...Y,
+        children: /* @__PURE__ */ q("div", { className: re, children: [
           /* @__PURE__ */ g(
-            U,
+            H,
             {
               label: m,
-              labelRef: v,
-              labelClass: j,
-              labelInnerClass: "pr-2"
+              labelRef: b,
+              labelClass: U,
+              labelInnerClass: "pr-2",
+              initiallyHidden: y
             }
           ),
-          /* @__PURE__ */ g("span", { ref: N, className: Q, children: e }),
+          /* @__PURE__ */ g("span", { ref: B, className: ee, children: e }),
           /* @__PURE__ */ g(
-            U,
+            H,
             {
-              label: l,
-              labelRef: b,
-              labelClass: j,
-              labelInnerClass: "pl-2"
+              label: c,
+              labelRef: h,
+              labelClass: U,
+              labelInnerClass: "pl-2",
+              initiallyHidden: y
             }
           )
-        ]
+        ] })
       }
     );
   }
-), U = ({
+), H = ({
   labelRef: e,
   labelClass: t,
   label: r,
-  labelInnerClass: a
-}) => /* @__PURE__ */ g("span", { ref: e, className: t, children: r && /* @__PURE__ */ g("span", { className: a, children: r }) });
-H.displayName = "ButtonIcon";
+  labelInnerClass: a,
+  initiallyHidden: o = !1
+}) => /* @__PURE__ */ g(
+  "span",
+  {
+    ref: e,
+    className: t,
+    style: o ? { opacity: 0 } : void 0,
+    children: r && /* @__PURE__ */ g("span", { className: a, children: r })
+  }
+);
+K.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v6.0.5
+  @versini/ui-button v6.0.7
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "6.0.5",
-    buildTime: "04/12/2025 09:18 AM EDT",
+    version: "6.0.7",
+    buildTime: "06/20/2025 05:21 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const ve = B.forwardRef(
+const we = I.forwardRef(
   ({
     children: e,
     mode: t = "system",
     className: r,
     active: a = !1,
-    ...n
+    ...o
   }, i) => {
-    const d = a ? o(
+    const l = a ? n(
       "relative",
       "focus-within:static",
       "focus-within:after:border-transparent",
@@ -536,63 +554,63 @@ const ve = B.forwardRef(
         "after:border-table-light dark:after:border-table-dark": t === "alt-system"
       }
     ) : "";
-    return /* @__PURE__ */ g("div", { className: d, children: /* @__PURE__ */ g(
-      H,
+    return /* @__PURE__ */ g("div", { className: l, children: /* @__PURE__ */ g(
+      K,
       {
-        className: o("justify-center", r),
+        className: n("justify-center", r),
         ref: i,
         mode: t,
         radius: "small",
-        ...n,
+        ...o,
         children: e
       }
     ) });
   }
 );
-ve.displayName = "ButtonSort";
-const ke = 200, pe = ({
+we.displayName = "ButtonSort";
+const Ne = 200, Te = ({
   string: e,
-  idealLength: t = ke
+  idealLength: t = Ne
 }) => {
   if (e.length <= t)
     return { string: e, isTruncated: !1 };
   if (e.charAt(t) === " ")
     return { string: e.slice(0, t), isTruncated: !0 };
-  const n = e.slice(t).search(" ");
+  const o = e.slice(t).search(" ");
   return {
-    string: e.slice(0, t + n),
+    string: e.slice(0, t + o),
     isTruncated: !0
   };
-}, Be = ({
+}, Re = ({
   children: e,
   length: t = 200,
   mode: r = "system",
   focusMode: a = "system"
 }) => {
-  const [n, i] = F(!1);
+  const [o, i] = G(!1);
   if (typeof e != "string")
     return e;
-  const { string: d, isTruncated: c } = pe({
+  const { string: l, isTruncated: d } = Te({
     string: e,
     idealLength: t
   });
-  return /* @__PURE__ */ W("span", { style: { wordBreak: "break-word" }, children: [
-    n ? e : d,
-    c && /* @__PURE__ */ g(
-      G,
+  return /* @__PURE__ */ q("span", { style: { wordBreak: "break-word" }, children: [
+    o ? e : l,
+    d && /* @__PURE__ */ g(
+      J,
       {
         mode: r,
         focusMode: a,
         className: "ml-2",
         size: "small",
-        onClick: (h) => {
-          h.preventDefault(), i(!n);
+        onClick: (f) => {
+          f.preventDefault(), i(!o);
         },
-        children: n ? "less..." : "more..."
+        children: o ? "less..." : "more..."
       }
     )
   ] });
 };
 export {
-  Be as Truncate
+  Re as Truncate
 };

package/dist/index.js

@@ -1,12 +1,12 @@
 import { Truncate as o } from "./components/Truncate/Truncate.js";
 /*!
-  @versini/ui-truncate v4.0.5
+  @versini/ui-truncate v4.0.7
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TRUNCATE__ || (window.__VERSINI_UI_TRUNCATE__ = {
-    version: "4.0.5",
-    buildTime: "04/12/2025 09:18 AM EDT",
+    version: "4.0.7",
+    buildTime: "06/20/2025 05:21 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-truncate",
-	"version": "4.0.5",
+	"version": "4.0.7",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -40,11 +40,11 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "6.0.5",
-		"tailwindcss": "4.1.3"
+		"@versini/ui-button": "6.0.7",
+		"tailwindcss": "4.1.10"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "1bc09c4f0904bd8c01a22b1a32299fdd7598ae32"
+	"gitHead": "2fffae99315244f0662bdecbe45a89bc770f0f15"
 }