@versini/ui-truncate 4.0.4 → 4.0.6

package/README.md

@@ -1,3 +1,59 @@
 # @versini/ui-truncate
 
 A simple truncate component for React.
+
+## Installation
+
+```bash
+npm install @versini/ui-truncate
+```
+
+## Usage
+
+```tsx
+import { Truncate } from "@versini/ui-truncate";
+
+function App() {
+  return (
+    <Truncate length={100} mode="dark" focusMode="light">
+      This is a very long text that needs to be truncated.
+    </Truncate>
+  );
+}
+```
+
+## Props
+
+| Prop        | Type                                            | Default    | Description                                                          |
+| ----------- | ----------------------------------------------- | ---------- | -------------------------------------------------------------------- |
+| `children`  | `React.ReactNode`                               | `null`     | The content to render. If not a string, it will be rendered as-is.   |
+| `length`    | `number`                                        | `200`      | The maximum number of characters to display before truncating.       |
+| `mode`      | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The mode of the button used for toggling truncated text.             |
+| `focusMode` | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The focus mode of the button, affecting the focus ring's appearance. |
+
+## Example
+
+```tsx
+import { Truncate } from "@versini/ui-truncate";
+
+function App() {
+  return (
+    <div>
+      <Truncate length={50} mode="light" focusMode="dark">
+        Lorem ipsum dolor sit amet. Sed do ut labore et dolore magna aliqua. Sed
+        do ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.
+      </Truncate>
+    </div>
+  );
+}
+```
+
+## Behavior
+
+- If the `children` prop is not a string, the component will render the `children` as-is without truncation.
+- If the text exceeds the specified `length`, it will be truncated, and a button will appear to toggle between the truncated and full text.
+- The button's appearance and focus ring can be customized using the `mode` and `focusMode` props.
+
+## License
+
+MIT

package/dist/components/Truncate/Truncate.js

@@ -1,7 +1,7 @@
-import { jsx as g, jsxs as W } from "react/jsx-runtime";
-import B, { useRef as x, useLayoutEffect as A, useMemo as F, useState as D, useEffect as V, useCallback as $ } from "react";
+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 O = "av-button", T = "icon", M = "button", z = "link", ee = ({
+const F = "av-button", R = "icon", S = "button", j = "link", ie = ({
   type: e,
   size: t,
   labelRight: r,
@@ -9,16 +9,16 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   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:
+    case S:
+    case j:
       return n({
-        [d]: t === "small",
-        [c]: t === "medium",
+        [l]: t === "small",
+        [d]: t === "medium",
         [s]: t === "large"
       });
-    case T:
+    case R:
       return n("flex items-center", {
         "justify-center": o === "center",
         "justify-start": o === "left",
@@ -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 o = "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:
+    case S:
+    case j:
       return n({
-        "text-center": e === z,
+        "text-center": e === j,
         [o]: t === "small",
         [i]: t === "medium",
-        [d]: t === "large"
+        [l]: t === "large"
       });
-    case T:
+    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,
@@ -96,7 +96,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     return n("not-prose text-copy-lighter", {
       truncate: r
     });
-}, ae = ({
+}, le = ({
   mode: e,
   noBackground: t,
   variant: r
@@ -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
 }) => n({
   "rounded-full": e === "large",
   "rounded-md": e === "medium",
   "rounded-xs": e === "small"
-}), ne = ({
+}), de = ({
   mode: e,
   disabled: t,
   variant: r
@@ -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";
-}, oe = ({
+}, se = ({
   mode: e,
   disabled: t,
   variant: r
@@ -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
@@ -222,14 +222,14 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     });
   if (r === "selected")
     return "border border-border-selected-dark";
-}, le = ({
+}, ge = ({
   focusMode: e
 }) => 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
@@ -241,77 +241,77 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     "dark:text-copy-accent-dark": e === "system"
   },
   r
-), se = ({
+), he = ({
   animated: e
 }) => n({
-  "transition-opacity duration-300 ease-in": e
-}), q = ({
+  "transition-opacity duration-300 ease-in-out": e
+}), V = ({
   type: e,
   className: t,
   raw: r,
   mode: a,
   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 ? n(O, t) : n(
-  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: o }),
-  ne({ mode: a, variant: l, disabled: i }),
-  oe({ 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
   },
   n({
-    "transition-[width] duration-300 ease-in-out": e === T && w
+    "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) => {
+}, 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);
       },
       ...o
     }
   );
 });
-L.displayName = "BaseButton";
-const P = B.forwardRef(
+O.displayName = "BaseButton";
+const J = I.forwardRef(
   ({
     children: e,
     disabled: t = !1,
@@ -319,56 +319,56 @@ const P = B.forwardRef(
     focusMode: a = "system",
     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: 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
       }
     );
   }
 );
-P.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 F(() => 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);
 }
-const me = {
+const ve = {
   x: 0,
   y: 0,
   width: 0,
@@ -378,32 +378,32 @@ const me = {
   bottom: 0,
   right: 0
 };
-function _(e) {
-  const t = ge(), r = x(0), a = x(null), [o, i] = D(me), d = F(() => 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, o];
+  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, G = B.forwardRef(
+}, pe = 2, xe = 300, K = I.forwardRef(
   ({
     children: e,
     disabled: t = !1,
@@ -411,107 +411,125 @@ const be = {
     focusMode: a = "system",
     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: H = "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: 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: H,
+      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, S] = _(), I = x(0), k = x(null), Y = he([J, k]);
-    return A(() => {
-      N && N.current && y && (I.current = S.width + fe[u] + (s ? 0 : ye));
-    }, [S, N, u, s, y]), A(() => {
-      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 }) });
-G.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.4
+  @versini/ui-button v6.0.6
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "6.0.4",
-    buildTime: "04/02/2025 04:18 PM EDT",
+    version: "6.0.6",
+    buildTime: "05/26/2025 03:48 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",
@@ -519,7 +537,7 @@ const ve = B.forwardRef(
     active: a = !1,
     ...o
   }, i) => {
-    const d = a ? n(
+    const l = a ? n(
       "relative",
       "focus-within:static",
       "focus-within:after:border-transparent",
@@ -536,8 +554,8 @@ 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(
-      G,
+    return /* @__PURE__ */ g("div", { className: l, children: /* @__PURE__ */ g(
+      K,
       {
         className: n("justify-center", r),
         ref: i,
@@ -549,10 +567,10 @@ const ve = B.forwardRef(
     ) });
   }
 );
-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 };
@@ -563,30 +581,30 @@ const ke = 200, pe = ({
     string: e.slice(0, t + o),
     isTruncated: !0
   };
-}, Be = ({
+}, Re = ({
   children: e,
   length: t = 200,
   mode: r = "system",
   focusMode: a = "system"
 }) => {
-  const [o, i] = D(!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: [
-    o ? e : d,
-    c && /* @__PURE__ */ g(
-      P,
+  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(!o);
+        onClick: (f) => {
+          f.preventDefault(), i(!o);
         },
         children: o ? "less..." : "more..."
       }
@@ -594,5 +612,5 @@ const ke = 200, pe = ({
   ] });
 };
 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.4
+  @versini/ui-truncate v4.0.6
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TRUNCATE__ || (window.__VERSINI_UI_TRUNCATE__ = {
-    version: "4.0.4",
-    buildTime: "04/02/2025 04:19 PM EDT",
+    version: "4.0.6",
+    buildTime: "05/26/2025 03:48 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.4",
+	"version": "4.0.6",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -40,11 +40,11 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "6.0.4",
-		"tailwindcss": "4.1.1"
+		"@versini/ui-button": "6.0.6",
+		"tailwindcss": "4.1.7"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "bd0dc5cacbcb1457f384709b76609590ff9c22c1"
+	"gitHead": "863a399128080a19f2668e458d495110aa0f68f8"
 }