@versini/ui-button 6.0.4 → 6.0.6

package/dist/chunks/{utilities.B6tGQPoK.js → utilities.B84qY3__.js}

@@ -242,7 +242,7 @@ const v = "av-button", l = "icon", p = "button", h = "link", m = ({
 ), P = ({
   animated: t
 }) => c({
-  "transition-opacity duration-300 ease-in": t
+  "transition-opacity duration-300 ease-in-out": t
 }), S = ({
   type: t,
   className: e,
@@ -289,7 +289,7 @@ const v = "av-button", l = "icon", p = "button", h = "link", m = ({
     "disabled:cursor-not-allowed disabled:opacity-50": s
   },
   c({
-    "transition-[width] duration-300 ease-in-out": t === l && b
+    "transition-[width] duration-300 ease-in": t === l && b
   }),
   e
 ));

package/dist/components/Button/Button.js

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import N from "react";
 import { BaseButton_private as T } from "../../chunks/BaseButton.BFKIL4GO.js";
-import { getButtonClasses as g, TYPE_BUTTON as x } from "../../chunks/utilities.B6tGQPoK.js";
+import { getButtonClasses as g, TYPE_BUTTON as x } from "../../chunks/utilities.B84qY3__.js";
 const C = N.forwardRef(
   ({
     children: s,

package/dist/components/Button/ButtonCopy.js

@@ -39,7 +39,7 @@ const m = ({
 try {
   window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
     version: "4.2.0",
-    buildTime: "03/19/2025 05:27 PM EDT",
+    buildTime: "05/17/2025 06:18 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -90,13 +90,13 @@ const I = ({
   }
 );
 /*!
-  @versini/ui-icons v4.8.2
+  @versini/ui-icons v4.10.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.8.2",
-    buildTime: "03/19/2025 05:27 PM EDT",
+    version: "4.10.0",
+    buildTime: "05/17/2025 06:18 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/dist/components/Button/ButtonIcon.js

@@ -1,22 +1,22 @@
-import { jsxs as G, jsx as i } from "react/jsx-runtime";
-import H, { useRef as m, useEffect as E, useCallback as M, useMemo as A, useState as W, useLayoutEffect as B } from "react";
-import { BaseButton_private as Y } from "../../chunks/BaseButton.BFKIL4GO.js";
-import { getButtonClasses as J, getIconClasses as K, getButtonIconLabelClasses as Q, TYPE_ICON as U } from "../../chunks/utilities.B6tGQPoK.js";
-function V() {
-  const t = m(!1);
-  return E(() => (t.current = !0, () => {
+import { jsx as m, jsxs as U } from "react/jsx-runtime";
+import Y, { useRef as p, useCallback as J, useEffect as T, useMemo as E, useState as K, useLayoutEffect as O } from "react";
+import { BaseButton_private as Q } from "../../chunks/BaseButton.BFKIL4GO.js";
+import { getButtonClasses as V, TYPE_ICON as X, getIconClasses as Z, getButtonIconLabelClasses as z } from "../../chunks/utilities.B84qY3__.js";
+function ee() {
+  const t = p(!1);
+  return T(() => (t.current = !0, () => {
     t.current = !1;
-  }), []), M(() => t.current, []);
+  }), []), J(() => t.current, []);
 }
-function X(t) {
-  return A(() => t.every((r) => r == null) ? () => {
+function te(t) {
+  return E(() => t.every((r) => r == null) ? () => {
   } : (r) => {
     t.forEach((e) => {
       typeof e == "function" ? e(r) : e != null && (e.current = r);
     });
   }, t);
 }
-const Z = {
+const re = {
   x: 0,
   y: 0,
   width: 0,
@@ -26,126 +26,144 @@ const Z = {
   bottom: 0,
   right: 0
 };
-function g(t) {
-  const r = V(), e = m(0), n = m(null), [h, w] = W(Z), s = A(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((p) => {
-    const l = p[0];
-    l && (cancelAnimationFrame(e.current), e.current = requestAnimationFrame(() => {
-      n.current && r() && w(l.contentRect);
+function A(t) {
+  const r = ee(), e = p(0), s = p(null), [d, C] = K(re), i = E(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((w) => {
+    const a = w[0];
+    a && (cancelAnimationFrame(e.current), e.current = requestAnimationFrame(() => {
+      s.current && r() && C(a.contentRect);
     }));
   }), [r]);
-  return E(() => (n.current && (s == null || s.observe(n.current, t)), () => {
-    s == null || s.disconnect(), e.current && cancelAnimationFrame(e.current);
-  }), [s, t]), [n, h];
+  return T(() => (s.current && (i == null || i.observe(s.current, t)), () => {
+    i == null || i.disconnect(), e.current && cancelAnimationFrame(e.current);
+  }), [i, t]), [s, d];
 }
-const z = {
+const b = {
   small: 24,
   // w-6
   medium: 32,
   // w-8
   large: 48
   // w-12
-}, ee = {
+}, ne = {
   small: 8 * 2,
   // px-2 x 2
   medium: 12 * 2,
   // px-3 x 2
   large: 16 * 2
   // px-4 x 2
-}, te = 2, re = H.forwardRef(
+}, ce = 2, se = 300, le = Y.forwardRef(
   ({
     children: t,
     disabled: r = !1,
     mode: e = "system",
-    focusMode: n = "system",
-    fullWidth: h = !1,
-    className: w,
-    type: s = "button",
-    raw: p = !1,
-    noBorder: l = !1,
-    "aria-label": D,
-    label: O,
-    size: f = "medium",
-    labelRight: y,
+    focusMode: s = "system",
+    fullWidth: d = !1,
+    className: C,
+    type: i = "button",
+    raw: w = !1,
+    noBorder: a = !1,
+    "aria-label": j,
+    label: F,
+    size: l = "medium",
+    labelRight: h,
     labelLeft: R,
-    noBackground: $ = !1,
-    align: F = "center",
-    radius: S = "large",
-    variant: j = "primary",
-    iconClassName: L,
+    noBackground: H = !1,
+    align: S = "center",
+    radius: W = "large",
+    variant: _ = "primary",
+    iconClassName: $,
     animated: u = !1,
-    ...P
-  }, T) => {
-    const _ = J({
-      type: U,
+    ...M
+  }, P) => {
+    const k = V({
+      type: X,
       mode: e,
-      focusMode: n,
-      fullWidth: h,
+      focusMode: s,
+      fullWidth: d,
       disabled: r,
-      raw: p,
-      className: w,
-      noBorder: l,
-      size: f,
-      labelRight: y,
+      raw: w,
+      className: C,
+      noBorder: a,
+      size: l,
+      labelRight: h,
       labelLeft: R,
-      noBackground: $,
-      align: F,
-      radius: S,
-      variant: j,
+      noBackground: H,
+      align: S,
+      radius: W,
+      variant: _,
       animated: u
-    }), k = K({ mode: e, raw: p, iconClassName: L }), x = Q({ animated: u }), [c, C] = g(), [o, I] = g(), [b, N] = g(), d = m(0), a = m(null), q = X([T, a]);
-    return B(() => {
-      b && b.current && u && (d.current = N.width + ee[f] + (l ? 0 : te));
-    }, [N, b, f, l, u]), B(() => {
-      a && a.current && u && (y && c && C.width > 0 ? (c.current && (c.current.style.opacity = "100"), a.current.style.width = `${C.width + d.current}px`) : R && I.width > 0 ? (o.current && (o.current.style.opacity = "100"), a.current.style.width = `${I.width + d.current}px`) : (c.current && (c.current.style.opacity = "0"), o.current && (o.current.style.opacity = "0"), a.current.style.width = `${z[f]}px`));
+    }), q = Z({ mode: e, raw: w, iconClassName: $ }), g = z({ animated: u }), G = "flex items-center justify-center relative w-full h-full overflow-hidden", [n, N] = A(), [c, v] = A(), [I, B] = A(), x = p(0), o = p(null), f = p(null), L = te([P, o]);
+    return O(() => {
+      I && I.current && u && (x.current = B.width + ne[l] + (a ? 0 : ce), o.current && !o.current.style.width && (o.current.style.width = `${b[l]}px`));
+    }, [B, I, l, a, u]), O(() => {
+      if (o && o.current && u) {
+        let y = b[l];
+        h && n && N.width > 0 ? y = N.width + x.current : R && c && v.width > 0 && (y = v.width + x.current), f.current && clearTimeout(f.current), y !== parseInt(o.current.style.width || "0", 10) && (n.current && (n.current.style.opacity = "0"), c.current && (c.current.style.opacity = "0"), o.current.style.width = `${y}px`, y > b[l] && (f.current = setTimeout(() => {
+          n.current && h && (n.current.style.opacity = "1"), c.current && R && (c.current.style.opacity = "1"), f.current = null;
+        }, se * 0.8))), y === b[l] && (n.current && (n.current.style.opacity = "0"), c.current && (c.current.style.opacity = "0"));
+      }
     }, [
-      C,
-      y,
-      c,
-      I,
+      N,
+      h,
+      n,
+      v,
       R,
-      o,
-      f,
+      c,
+      l,
       u
-    ]), /* @__PURE__ */ G(
-      Y,
+    ]), T(() => () => {
+      f.current && clearTimeout(f.current);
+    }, []), /* @__PURE__ */ m(
+      Q,
       {
-        ref: q,
-        className: _,
+        ref: L,
+        className: k,
         disabled: r,
-        type: s,
-        "aria-label": D || O,
-        ...P,
-        children: [
-          /* @__PURE__ */ i(
-            v,
+        type: i,
+        "aria-label": j || F,
+        ...M,
+        children: /* @__PURE__ */ U("div", { className: G, children: [
+          /* @__PURE__ */ m(
+            D,
             {
               label: R,
-              labelRef: o,
-              labelClass: x,
-              labelInnerClass: "pr-2"
+              labelRef: c,
+              labelClass: g,
+              labelInnerClass: "pr-2",
+              initiallyHidden: u
             }
           ),
-          /* @__PURE__ */ i("span", { ref: b, className: k, children: t }),
-          /* @__PURE__ */ i(
-            v,
+          /* @__PURE__ */ m("span", { ref: I, className: q, children: t }),
+          /* @__PURE__ */ m(
+            D,
             {
-              label: y,
-              labelRef: c,
-              labelClass: x,
-              labelInnerClass: "pl-2"
+              label: h,
+              labelRef: n,
+              labelClass: g,
+              labelInnerClass: "pl-2",
+              initiallyHidden: u
             }
           )
-        ]
+        ] })
       }
     );
   }
-), v = ({
+), D = ({
   labelRef: t,
   labelClass: r,
   label: e,
-  labelInnerClass: n
-}) => /* @__PURE__ */ i("span", { ref: t, className: r, children: e && /* @__PURE__ */ i("span", { className: n, children: e }) });
-re.displayName = "ButtonIcon";
+  labelInnerClass: s,
+  initiallyHidden: d = !1
+}) => /* @__PURE__ */ m(
+  "span",
+  {
+    ref: t,
+    className: r,
+    style: d ? { opacity: 0 } : void 0,
+    children: e && /* @__PURE__ */ m("span", { className: s, children: e })
+  }
+);
+le.displayName = "ButtonIcon";
 export {
-  re as ButtonIcon
+  le as ButtonIcon
 };

package/dist/components/Button/ButtonLink.js

@@ -1,11 +1,11 @@
-import { jsx as s, jsxs as n } from "react/jsx-runtime";
-import o from "clsx";
-import V from "react";
-import { getButtonClasses as v, TYPE_LINK as C } from "../../chunks/utilities.B6tGQPoK.js";
-const L = V.forwardRef(
+import { jsx as s, jsxs as o } from "react/jsx-runtime";
+import r from "clsx";
+import v from "react";
+import { getButtonClasses as V, TYPE_LINK as C } from "../../chunks/utilities.B84qY3__.js";
+const L = v.forwardRef(
   ({
-    children: r,
-    mode: t = "system",
+    children: t,
+    mode: n = "system",
     focusMode: c = "system",
     fullWidth: i = !1,
     className: m,
@@ -17,10 +17,10 @@ const L = V.forwardRef(
     noNewWindowIcon: w = !1,
     radius: h = "large",
     ...x
-  }, u) => {
-    const y = v({
+  }, y) => {
+    const N = V({
       type: C,
-      mode: t,
+      mode: n,
       focusMode: c,
       fullWidth: i,
       disabled: !1,
@@ -30,18 +30,18 @@ const L = V.forwardRef(
       noBorder: p,
       truncate: l,
       radius: h
-    }), e = a === "_blank", N = {
+    }), e = a === "_blank", b = {
       target: a,
       rel: e ? "noopener noreferrer" : void 0,
       ...x
-    }, b = o({
+    }, u = r({
       truncate: l,
       "basis-11/12": l && e
     });
-    return /* @__PURE__ */ s("a", { ref: u, className: y, ...N, children: /* @__PURE__ */ n("div", { role: "text", className: o("flex items-center justify-center"), children: [
-      /* @__PURE__ */ s("div", { className: b, children: r }),
+    return /* @__PURE__ */ s("a", { ref: y, className: N, ...b, children: /* @__PURE__ */ o("div", { role: "text", className: r("flex items-center justify-center"), children: [
+      /* @__PURE__ */ s("div", { className: u, children: t }),
       e && /* @__PURE__ */ s("span", { className: "sr-only", children: ", opens in a new window" }),
-      e && !w && /* @__PURE__ */ n(
+      e && !w && /* @__PURE__ */ o(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",

package/dist/index.js

@@ -1,4 +1,4 @@
-import { BUTTON_CLASSNAME as B } from "./chunks/utilities.B6tGQPoK.js";
+import { BUTTON_CLASSNAME as B } from "./chunks/utilities.B84qY3__.js";
 import { Button as T } from "./components/Button/Button.js";
 import { ButtonCopy as I } from "./components/Button/ButtonCopy.js";
 import { ButtonIcon as l } from "./components/Button/ButtonIcon.js";
@@ -7,13 +7,13 @@ import { jsx as e } from "react/jsx-runtime";
 import a from "clsx";
 import m from "react";
 /*!
-  @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"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-button",
-	"version": "6.0.4",
+	"version": "6.0.6",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -39,17 +39,17 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "5.0.1"
+		"@versini/ui-types": "5.0.3"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
 		"@versini/ui-hooks": "4.7.3",
-		"@versini/ui-icons": "4.8.2",
+		"@versini/ui-icons": "4.10.0",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.1.1"
+		"tailwindcss": "4.1.7"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "bd0dc5cacbcb1457f384709b76609590ff9c22c1"
+	"gitHead": "863a399128080a19f2668e458d495110aa0f68f8"
 }