@versini/ui-truncate 4.0.4 → 4.0.5

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,28 +1,28 @@
 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 n from "clsx";
+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 = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a,
-  align: o,
+  align: n,
   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";
   switch (e) {
     case M:
     case z:
-      return n({
+      return o({
         [d]: t === "small",
         [c]: t === "medium",
         [s]: t === "large"
       });
     case T:
-      return n("flex items-center", {
-        "justify-center": o === "center",
-        "justify-start": o === "left",
-        "justify-end": o === "right",
+      return o("flex items-center", {
+        "justify-center": n === "center",
+        "justify-start": n === "left",
+        "justify-end": n === "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),
@@ -43,19 +43,19 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   labelRight: r,
   labelLeft: a
 }) => {
-  const o = "text-sm font-medium", i = "text-base font-medium", d = "text-lg font-medium";
+  const n = "text-sm font-medium", i = "text-base font-medium", d = "text-lg font-medium";
   switch (e) {
     case M:
     case z:
-      return n({
+      return o({
         "text-center": e === z,
-        [o]: t === "small",
+        [n]: t === "small",
         [i]: t === "medium",
         [d]: t === "large"
       });
     case T:
-      return n({
-        [o]: t === "small" && (r || a),
+      return o({
+        [n]: t === "small" && (r || a),
         [i]: t === "medium" && (r || a),
         [d]: t === "large" && (r || a)
       });
@@ -69,7 +69,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   if (t)
     return "not-prose";
   if (a === "primary")
-    return n("not-prose", {
+    return o("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 n("not-prose", {
+    return o("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 n("not-prose", {
+    return o("not-prose", {
       truncate: r,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
@@ -93,7 +93,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
       "dark:text-copy-light": e === "alt-system"
     });
   if (a === "selected")
-    return n("not-prose text-copy-lighter", {
+    return o("not-prose text-copy-lighter", {
       truncate: r
     });
 }, ae = ({
@@ -103,21 +103,21 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
 }) => {
   if (!t) {
     if (r === "primary")
-      return n({
+      return o({
         "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 n({
+      return o({
         "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 n({
+      return o({
         "bg-action-danger-dark": e === "dark",
         "bg-action-danger-light": e === "light",
         "bg-action-danger-dark dark:bg-action-danger-light": e === "system",
@@ -128,11 +128,11 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   }
 }, ie = ({
   radius: e
-}) => n({
+}) => o({
   "rounded-full": e === "large",
   "rounded-md": e === "medium",
   "rounded-xs": e === "small"
-}), ne = ({
+}), oe = ({
   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 n("hover:text-copy-light-hover", {
+    return o("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 n("hover:text-copy-light-hover", {
+    return o("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 n("hover:text-copy-light-hover", {
+    return o("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";
-}, oe = ({
+}, ne = ({
   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 n("active:text-copy-light-active", {
+    return o("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 n("active:text-copy-light-active", {
+    return o("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 n("active:text-copy-lighter-active", {
+    return o("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",
@@ -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 n("border", {
+    return o("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 n("border", {
+    return o("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 n("border", {
+    return o("border", {
       "border-border-danger-dark": e === "dark",
       "border-border-danger-medium": e === "light",
       "border-border-danger-dark dark:border-border-danger-medium": e === "system",
@@ -224,7 +224,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
     return "border border-border-selected-dark";
 }, le = ({
   focusMode: e
-}) => n("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
+}) => o("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",
@@ -233,7 +233,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   mode: e,
   raw: t,
   iconClassName: r
-}) => t ? "" : n(
+}) => t ? "" : o(
   {
     "text-copy-accent-dark": e === "light" || e === "alt-system",
     "text-copy-light": e === "dark" || e === "system",
@@ -243,14 +243,14 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   r
 ), se = ({
   animated: e
-}) => n({
+}) => o({
   "transition-opacity duration-300 ease-in": e
 }), q = ({
   type: e,
   className: t,
   raw: r,
   mode: a,
-  focusMode: o,
+  focusMode: n,
   disabled: i,
   fullWidth: d,
   size: c,
@@ -263,7 +263,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   align: p,
   radius: R,
   animated: w
-}) => (l || (l = "primary"), r ? n(O, t) : n(
+}) => (l || (l = "primary"), r ? o(O, t) : o(
   O,
   te({
     mode: a,
@@ -283,14 +283,14 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   }),
   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 }),
+  le({ focusMode: n }),
   oe({ mode: a, variant: l, disabled: i }),
+  ne({ mode: a, variant: l, disabled: i }),
   {
     "w-full": d,
     "disabled:cursor-not-allowed disabled:opacity-50": i
   },
-  n({
+  o({
     "transition-[width] duration-300 ease-in-out": e === T && w
   }),
   t
@@ -298,7 +298,7 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
   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, ...o } = e;
+  const { onClick: r, noInternalClick: a = !1, ...n } = e;
   return /* @__PURE__ */ g(
     "button",
     {
@@ -306,18 +306,18 @@ const O = "av-button", T = "icon", M = "button", z = "link", ee = ({
       onClick: (i) => {
         ue(i, a, r);
       },
-      ...o
+      ...n
     }
   );
 });
 L.displayName = "BaseButton";
-const P = B.forwardRef(
+const G = B.forwardRef(
   ({
     children: e,
     disabled: t = !1,
     mode: r = "system",
     focusMode: a = "system",
-    fullWidth: o = !1,
+    fullWidth: n = !1,
     className: i,
     size: d = "medium",
     raw: c = !1,
@@ -331,7 +331,7 @@ const P = B.forwardRef(
       type: M,
       mode: r,
       focusMode: a,
-      fullWidth: o,
+      fullWidth: n,
       disabled: t,
       raw: c,
       className: i,
@@ -353,7 +353,7 @@ const P = B.forwardRef(
     );
   }
 );
-P.displayName = "Button";
+G.displayName = "Button";
 function ge() {
   const e = x(!1);
   return V(() => (e.current = !0, () => {
@@ -361,7 +361,7 @@ function ge() {
   }), []), $(() => e.current, []);
 }
 function he(e) {
-  return F(() => e.every((t) => t == null) ? () => {
+  return D(() => e.every((t) => t == null) ? () => {
   } : (t) => {
     e.forEach((r) => {
       typeof r == "function" ? r(t) : r != null && (r.current = t);
@@ -379,7 +379,7 @@ const me = {
   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 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];
     s && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
       a.current && t() && i(s.contentRect);
@@ -387,7 +387,7 @@ function _(e) {
   }), [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];
+  }), [d, e]), [a, n];
 }
 const be = {
   small: 24,
@@ -403,13 +403,13 @@ const be = {
   // px-3 x 2
   large: 16 * 2
   // px-4 x 2
-}, ye = 2, G = B.forwardRef(
+}, ye = 2, H = B.forwardRef(
   ({
     children: e,
     disabled: t = !1,
     mode: r = "system",
     focusMode: a = "system",
-    fullWidth: o = !1,
+    fullWidth: n = !1,
     className: i,
     type: d = "button",
     raw: c = !1,
@@ -422,7 +422,7 @@ const be = {
     noBackground: p = !1,
     align: R = "center",
     radius: w = "large",
-    variant: H = "primary",
+    variant: P = "primary",
     iconClassName: X,
     animated: y = !1,
     ...Z
@@ -431,7 +431,7 @@ const be = {
       type: T,
       mode: r,
       focusMode: a,
-      fullWidth: o,
+      fullWidth: n,
       disabled: t,
       raw: c,
       className: i,
@@ -442,12 +442,12 @@ const be = {
       noBackground: p,
       align: R,
       radius: w,
-      variant: H,
+      variant: P,
       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(() => {
+    }), 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`));
     }, [
       C,
@@ -497,15 +497,15 @@ const be = {
   label: r,
   labelInnerClass: a
 }) => /* @__PURE__ */ g("span", { ref: e, className: t, children: r && /* @__PURE__ */ g("span", { className: a, children: r }) });
-G.displayName = "ButtonIcon";
+H.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v6.0.4
+  @versini/ui-button v6.0.5
   © 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.5",
+    buildTime: "04/12/2025 09:18 AM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -517,9 +517,9 @@ const ve = B.forwardRef(
     mode: t = "system",
     className: r,
     active: a = !1,
-    ...o
+    ...n
   }, i) => {
-    const d = a ? n(
+    const d = a ? o(
       "relative",
       "focus-within:static",
       "focus-within:after:border-transparent",
@@ -537,13 +537,13 @@ const ve = B.forwardRef(
       }
     ) : "";
     return /* @__PURE__ */ g("div", { className: d, children: /* @__PURE__ */ g(
-      G,
+      H,
       {
-        className: n("justify-center", r),
+        className: o("justify-center", r),
         ref: i,
         mode: t,
         radius: "small",
-        ...o,
+        ...n,
         children: e
       }
     ) });
@@ -558,9 +558,9 @@ const ke = 200, pe = ({
     return { string: e, isTruncated: !1 };
   if (e.charAt(t) === " ")
     return { string: e.slice(0, t), isTruncated: !0 };
-  const o = e.slice(t).search(" ");
+  const n = e.slice(t).search(" ");
   return {
-    string: e.slice(0, t + o),
+    string: e.slice(0, t + n),
     isTruncated: !0
   };
 }, Be = ({
@@ -569,7 +569,7 @@ const ke = 200, pe = ({
   mode: r = "system",
   focusMode: a = "system"
 }) => {
-  const [o, i] = D(!1);
+  const [n, i] = F(!1);
   if (typeof e != "string")
     return e;
   const { string: d, isTruncated: c } = pe({
@@ -577,18 +577,18 @@ const ke = 200, pe = ({
     idealLength: t
   });
   return /* @__PURE__ */ W("span", { style: { wordBreak: "break-word" }, children: [
-    o ? e : d,
+    n ? e : d,
     c && /* @__PURE__ */ g(
-      P,
+      G,
       {
         mode: r,
         focusMode: a,
         className: "ml-2",
         size: "small",
         onClick: (h) => {
-          h.preventDefault(), i(!o);
+          h.preventDefault(), i(!n);
         },
-        children: o ? "less..." : "more..."
+        children: n ? "less..." : "more..."
       }
     )
   ] });

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.5
   © 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.5",
+    buildTime: "04/12/2025 09:18 AM 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.5",
 	"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.5",
+		"tailwindcss": "4.1.3"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "bd0dc5cacbcb1457f384709b76609590ff9c22c1"
+	"gitHead": "1bc09c4f0904bd8c01a22b1a32299fdd7598ae32"
 }