@versini/ui-bubble 3.2.0 → 3.2.1

package/dist/index.js

@@ -1,36 +1,36 @@
-import { jsx as c, jsxs as k, Fragment as Q } from "react/jsx-runtime";
-import R, { useRef as w, useLayoutEffect as O, useMemo as A, useState as H, useEffect as S, useCallback as Y } from "react";
+import { jsx as c, jsxs as B, Fragment as ee } from "react/jsx-runtime";
+import V, { useRef as I, useLayoutEffect as S, useMemo as P, useState as F, useEffect as L, useCallback as te } from "react";
 import i from "clsx";
 /*!
-  @versini/ui-bubble v3.2.0
+  @versini/ui-bubble v3.2.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUBBLE__ || (window.__VERSINI_UI_BUBBLE__ = {
-    version: "3.2.0",
-    buildTime: "01/25/2025 10:55 PM EST",
+    version: "3.2.1",
+    buildTime: "01/26/2025 05:19 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee = ({
+const re = "av-bubble", O = "av-button", T = "icon", G = "button", M = "link", ae = ({
   type: e,
   size: r,
   labelRight: t,
   labelLeft: a,
   align: n
 }) => {
-  const o = "max-h-8 py-0 px-2", s = "max-h-9 h-8 px-3", d = "max-h-12 py-2 px-4";
+  const o = "max-h-8 py-0 px-2", s = "max-h-9 h-8 px-3", u = "max-h-12 py-2 px-4";
   switch (e) {
-    case P:
-    case E:
+    case G:
+    case M:
       return i({
         [o]: r === "small",
         [s]: r === "medium",
-        [d]: r === "large"
+        [u]: r === "large"
       });
-    case B:
+    case T:
       return i("inline-flex items-center", {
         "justify-center": n === "center",
         "justify-start": n === "left",
@@ -43,7 +43,7 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
         "h-12": r === "large" && (t || a)
       });
   }
-}, te = ({
+}, ie = ({
   type: e,
   size: r,
   labelRight: t,
@@ -51,22 +51,22 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
 }) => {
   const n = "text-sm font-medium", o = "text-base font-medium", s = "text-lg font-medium";
   switch (e) {
-    case P:
-    case E:
+    case G:
+    case M:
       return i({
-        "text-center": e === E,
+        "text-center": e === M,
         [n]: r === "small",
         [o]: r === "medium",
         [s]: r === "large"
       });
-    case B:
+    case T:
       return i({
         [n]: r === "small" && (t || a),
         [o]: r === "medium" && (t || a),
         [s]: r === "large" && (t || a)
       });
   }
-}, re = ({
+}, oe = ({
   mode: e,
   noBackground: r,
   noTruncate: t,
@@ -102,7 +102,7 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
     return i("not-prose text-copy-lighter", {
       truncate: !t
     });
-}, ae = ({
+}, ne = ({
   mode: e,
   noBackground: r,
   variant: t
@@ -132,13 +132,13 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
     if (t === "selected")
       return "bg-action-selected-dark";
   }
-}, ie = ({
+}, se = ({
   radius: e
 }) => i({
   "rounded-full": e === "large",
   "rounded-md": e === "medium",
   "rounded-sm": e === "small"
-}), oe = ({
+}), ce = ({
   mode: e,
   disabled: r,
   variant: t
@@ -168,7 +168,7 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
     });
   if (t === "selected")
     return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
-}, ne = ({
+}, le = ({
   mode: e,
   disabled: r,
   variant: t
@@ -198,7 +198,7 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
     });
   if (t === "selected")
     return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
-}, se = ({
+}, de = ({
   mode: e,
   noBorder: r,
   variant: t
@@ -228,14 +228,14 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
     });
   if (t === "selected")
     return "border border-border-selected-dark";
-}, ce = ({
+}, ue = ({
   focusMode: e
 }) => i("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"
-}), le = ({
+}), ge = ({
   mode: e,
   raw: r,
   iconClassName: t
@@ -247,11 +247,11 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
     "dark:text-copy-accent-dark": e === "system"
   },
   t
-), de = ({
+), me = ({
   animated: e
 }) => i({
   "transition-opacity duration-300 ease-in": e
-}), ue = ({
+}), he = ({
   type: e,
   className: r,
   raw: t,
@@ -259,78 +259,78 @@ const $ = "av-bubble", j = "av-button", B = "icon", P = "button", E = "link", ee
   focusMode: n,
   disabled: o,
   fullWidth: s,
-  size: d,
+  size: u,
   noBorder: g,
   labelRight: m,
-  labelLeft: f,
-  noBackground: u,
-  variant: l,
-  noTruncate: b,
+  labelLeft: p,
+  noBackground: l,
+  variant: d,
+  noTruncate: f,
   align: h,
-  radius: x,
-  animated: N
-}) => (l || (l = "primary"), t ? i(j, r) : i(
-  j,
-  re({
+  radius: N,
+  animated: z
+}) => (d || (d = "primary"), t ? i(O, r) : i(
+  O,
+  oe({
     mode: a,
-    variant: l,
-    noBackground: u,
-    noTruncate: b
+    variant: d,
+    noBackground: l,
+    noTruncate: f
   }),
-  ae({ mode: a, noBackground: u, variant: l }),
-  ie({ radius: x }),
-  ee({
+  ne({ mode: a, noBackground: l, variant: d }),
+  se({ radius: N }),
+  ae({
     type: e,
-    size: d,
+    size: u,
     labelRight: m,
-    labelLeft: f,
+    labelLeft: p,
     align: h
   }),
-  te({ type: e, size: d, labelRight: m, labelLeft: f }),
-  se({ mode: a, variant: l, noBorder: g }),
-  ce({ focusMode: n }),
-  oe({ mode: a, variant: l, disabled: o }),
-  ne({ mode: a, variant: l, disabled: o }),
+  ie({ type: e, size: u, labelRight: m, labelLeft: p }),
+  de({ mode: a, variant: d, noBorder: g }),
+  ue({ focusMode: n }),
+  ce({ mode: a, variant: d, disabled: o }),
+  le({ mode: a, variant: d, disabled: o }),
   {
     "w-full": s,
     "disabled:cursor-not-allowed disabled:opacity-50": o
   },
   i({
-    "transition-[width] duration-300 ease-in-out": e === B && N
+    "transition-[width] duration-300 ease-in-out": e === T && z
   }),
   r
-)), ge = (e, r, t) => {
+)), be = (e, r, t) => {
   var a;
   !r && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
-}, q = R.forwardRef((e, r) => {
+}, q = V.forwardRef((e, r) => {
   const { onClick: t, noInternalClick: a = !1, ...n } = e;
   return /* @__PURE__ */ c(
     "button",
     {
       ref: r,
       onClick: (o) => {
-        ge(o, a, t);
+        be(o, a, t);
       },
       ...n
     }
   );
 });
 q.displayName = "BaseButton";
-function me() {
-  const e = w(!1);
-  return S(() => (e.current = !0, () => {
+function fe() {
+  const e = I(!1);
+  return L(() => (e.current = !0, () => {
     e.current = !1;
-  }), []), Y(() => e.current, []);
+  }), []), te(() => e.current, []);
 }
-function he(e) {
-  return A(() => e.every((r) => r == null) ? () => {
+function ve(e) {
+  return P(() => e.every((r) => r == null) ? () => {
   } : (r) => {
     e.forEach((t) => {
       typeof t == "function" ? t(r) : t != null && (t.current = r);
     });
   }, e);
 }
-const be = {
+const pe = {
   x: 0,
   y: 0,
   width: 0,
@@ -340,32 +340,32 @@ const be = {
   bottom: 0,
   right: 0
 };
-function z(e) {
-  const r = me(), t = w(0), a = w(null), [n, o] = H(be), s = A(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
-    const g = d[0];
+function R(e) {
+  const r = fe(), t = I(0), a = I(null), [n, o] = F(pe), s = P(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((u) => {
+    const g = u[0];
     g && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
       a.current && r() && o(g.contentRect);
     }));
   }), [r]);
-  return S(() => (a.current && (s == null || s.observe(a.current, e)), () => {
+  return L(() => (a.current && (s == null || s.observe(a.current, e)), () => {
     s == null || s.disconnect(), t.current && cancelAnimationFrame(t.current);
   }), [s, e]), [a, n];
 }
-const fe = {
+const j = {
   small: 24,
   // w-6
   medium: 32,
   // w-8
   large: 48
   // w-12
-}, ve = {
+}, A = {
   small: 8 * 2,
   // px-2 x 2
   medium: 12 * 2,
   // px-3 x 2
   large: 16 * 2
   // px-4 x 2
-}, ye = 2, M = R.forwardRef(
+}, H = 2, U = V.forwardRef(
   ({
     children: e,
     disabled: r = !1,
@@ -374,84 +374,87 @@ const fe = {
     fullWidth: n = !1,
     className: o,
     type: s = "button",
-    raw: d = !1,
+    raw: u = !1,
     noBorder: g = !1,
     "aria-label": m,
-    label: f,
-    size: u = "medium",
-    labelRight: l,
-    labelLeft: b,
+    label: p,
+    size: l = "medium",
+    labelRight: d,
+    labelLeft: f,
     noBackground: h = !1,
-    align: x = "center",
-    radius: N = "large",
-    variant: G = "primary",
-    iconClassName: W,
-    animated: V = !1,
-    ...X
-  }, Z) => {
-    const D = ue({
-      type: B,
+    align: N = "center",
+    radius: z = "large",
+    variant: Z = "primary",
+    iconClassName: D,
+    animated: v = !1,
+    ...J
+  }, K) => {
+    const Q = he({
+      type: T,
       mode: t,
       focusMode: a,
       fullWidth: n,
       disabled: r,
-      raw: d,
+      raw: u,
       className: o,
       noBorder: g,
-      size: u,
-      labelRight: l,
-      labelLeft: b,
+      size: l,
+      labelRight: d,
+      labelLeft: f,
       noBackground: h,
-      align: x,
-      radius: N,
-      variant: G,
-      animated: V
-    }), J = le({ mode: t, raw: d, iconClassName: W }), L = de({ animated: V }), [v, I] = z(), [y, C] = z(), [_, U] = z(), T = w(0), p = w(null), K = he([Z, p]);
-    return O(() => {
-      _ && _.current && (T.current = U.width + ve[u] + (g ? 0 : ye));
-    }, [U, _, u, g]), O(() => {
-      p && p.current && (l && v && I.width > 0 ? (v.current && (v.current.style.opacity = "100"), p.current.style.width = `${I.width + T.current}px`) : b && C.width > 0 ? (y.current && (y.current.style.opacity = "100"), p.current.style.width = `${C.width + T.current}px`) : (v.current && (v.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), p.current.style.width = `${fe[u]}px`));
+      align: N,
+      radius: z,
+      variant: Z,
+      animated: v
+    }), X = ge({ mode: t, raw: u, iconClassName: D }), $ = me({ animated: v }), [y, k] = R(), [x, w] = R(), [C, E] = R(), _ = I(0), b = I(null), Y = ve([K, b]);
+    return S(() => {
+      v || (_.current = E.width + A[l] + (g ? 0 : H), b && b.current && (k.width > 0 ? b.current.style.width = `${k.width + _.current}px` : w.width > 0 ? b.current.style.width = `${w.width + _.current}px` : b.current.style.width = `${j[l]}px`));
+    }, [v, E, l, g, k, w]), S(() => {
+      C && C.current && v && (_.current = E.width + A[l] + (g ? 0 : H));
+    }, [E, C, l, g, v]), S(() => {
+      b && b.current && v && (d && y && k.width > 0 ? (y.current && (y.current.style.opacity = "100"), b.current.style.width = `${k.width + _.current}px`) : f && w.width > 0 ? (x.current && (x.current.style.opacity = "100"), b.current.style.width = `${w.width + _.current}px`) : (y.current && (y.current.style.opacity = "0"), x.current && (x.current.style.opacity = "0"), b.current.style.width = `${j[l]}px`));
     }, [
-      I,
-      l,
-      v,
-      C,
-      b,
+      k,
+      d,
       y,
-      u
-    ]), /* @__PURE__ */ k(
+      w,
+      f,
+      x,
+      l,
+      v
+    ]), /* @__PURE__ */ B(
       q,
       {
-        ref: K,
-        className: D,
+        ref: Y,
+        className: Q,
         disabled: r,
         type: s,
-        "aria-label": m || f,
-        ...X,
+        "aria-label": m || p,
+        ...J,
         children: [
-          /* @__PURE__ */ c("span", { ref: y, className: L, children: b && /* @__PURE__ */ c("span", { className: "pr-2", children: b }) }),
-          /* @__PURE__ */ c("span", { ref: _, className: J, children: e }),
-          /* @__PURE__ */ c("span", { ref: v, className: L, children: l && /* @__PURE__ */ c("span", { className: "pl-2", children: l }) })
+          /* @__PURE__ */ c("span", { ref: x, className: $, children: f && /* @__PURE__ */ c("span", { className: "pr-2", children: f }) }),
+          /* @__PURE__ */ c("span", { ref: C, className: X, children: e }),
+          /* @__PURE__ */ c("span", { ref: y, className: $, children: d && /* @__PURE__ */ c("span", { className: "pl-2", children: d }) })
         ]
       }
     );
   }
 );
-M.displayName = "ButtonIcon";
+U.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v4.2.0
+  @versini/ui-button v4.2.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "4.2.0",
-    buildTime: "01/25/2025 10:54 PM EST",
+    version: "4.2.1",
+    buildTime: "01/26/2025 05:19 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const pe = R.forwardRef(
+const ye = V.forwardRef(
   ({
     children: e,
     mode: r = "system",
@@ -477,7 +480,7 @@ const pe = R.forwardRef(
       }
     ) : "";
     return /* @__PURE__ */ c("div", { className: s, children: /* @__PURE__ */ c(
-      M,
+      U,
       {
         className: i("justify-center", t),
         ref: o,
@@ -489,8 +492,8 @@ const pe = R.forwardRef(
     ) });
   }
 );
-pe.displayName = "ButtonSort";
-const F = ({
+ye.displayName = "ButtonSort";
+const W = ({
   children: e,
   fill: r,
   viewBox: t,
@@ -498,11 +501,11 @@ const F = ({
   defaultViewBox: n,
   size: o,
   title: s,
-  semantic: d = !1,
+  semantic: u = !1,
   ...g
 }) => {
   const m = i(o, a);
-  return /* @__PURE__ */ k(Q, { children: [
+  return /* @__PURE__ */ B(ee, { children: [
     /* @__PURE__ */ c(
       "svg",
       {
@@ -511,13 +514,13 @@ const F = ({
         viewBox: t || n,
         fill: r || "currentColor",
         role: "img",
-        "aria-hidden": !d,
+        "aria-hidden": !u,
         focusable: !1,
         ...g,
         children: e
       }
     ),
-    s && d && /* @__PURE__ */ c("span", { className: "sr-only", children: s })
+    s && u && /* @__PURE__ */ c("span", { className: "sr-only", children: s })
   ] });
 };
 /*!
@@ -539,8 +542,8 @@ const ke = ({
   title: t,
   monotone: a,
   ...n
-}) => /* @__PURE__ */ k(
-  F,
+}) => /* @__PURE__ */ B(
+  W,
   {
     defaultViewBox: "0 0 448 512",
     size: "size-5",
@@ -566,7 +569,7 @@ const ke = ({
   monotone: a,
   ...n
 }) => /* @__PURE__ */ c(
-  F,
+  W,
   {
     defaultViewBox: "0 0 512 512",
     size: "size-5",
@@ -613,7 +616,7 @@ const we = ({
   noMaxWidth: t
 }) => {
   const a = i(
-    $,
+    re,
     "flex items-start",
     {
       "flex-row-reverse": e === "right"
@@ -635,7 +638,7 @@ const we = ({
     footer: o,
     copyButton: s
   };
-}, Ee = ({
+}, ze = ({
   children: e,
   kind: r = "left",
   className: t,
@@ -643,39 +646,39 @@ const we = ({
   rawFooter: n,
   copyToClipboard: o,
   copyToClipboardFocusMode: s = "system",
-  copyToClipboardMode: d = "system",
+  copyToClipboardMode: u = "system",
   noMaxWidth: g = !1
 }) => {
-  const [m, f] = H(!1), u = Ie({ kind: r, className: t, noMaxWidth: g }), l = !!o && (typeof o == "function" || typeof o == "string" || typeof e == "string"), b = () => {
-    f(!0), typeof o == "function" ? o(e) : typeof o == "string" ? navigator.clipboard.writeText(o) : typeof e == "string" && navigator.clipboard.writeText(e);
+  const [m, p] = F(!1), l = Ie({ kind: r, className: t, noMaxWidth: g }), d = !!o && (typeof o == "function" || typeof o == "string" || typeof e == "string"), f = () => {
+    p(!0), typeof o == "function" ? o(e) : typeof o == "string" ? navigator.clipboard.writeText(o) : typeof e == "string" && navigator.clipboard.writeText(e);
   };
-  return S(() => {
+  return L(() => {
     let h;
     return m && (h = window.setTimeout(() => {
-      f(!1);
+      p(!1);
     }, 3e3)), () => {
       clearTimeout(h);
     };
-  }, [m]), /* @__PURE__ */ k("div", { className: u.wrapper, children: [
-    /* @__PURE__ */ k("div", { children: [
-      /* @__PURE__ */ c("div", { className: u.main, children: e }),
-      a && Object.keys(a).map((h, x) => a[h] ? /* @__PURE__ */ c("div", { className: "prose-p:m-0", children: /* @__PURE__ */ k("p", { className: u.footer, children: [
+  }, [m]), /* @__PURE__ */ B("div", { className: l.wrapper, children: [
+    /* @__PURE__ */ B("div", { children: [
+      /* @__PURE__ */ c("div", { className: l.main, children: e }),
+      a && Object.keys(a).map((h, N) => a[h] ? /* @__PURE__ */ c("div", { className: "prose-p:m-0", children: /* @__PURE__ */ B("p", { className: l.footer, children: [
         h,
         ": ",
         a[h]
-      ] }) }, `${h}-${x}`) : null),
+      ] }) }, `${h}-${N}`) : null),
       n && n
     ] }),
-    l && /* @__PURE__ */ c("div", { className: u.copyButton, children: /* @__PURE__ */ c(
-      M,
+    d && /* @__PURE__ */ c("div", { className: l.copyButton, children: /* @__PURE__ */ c(
+      U,
       {
         noBorder: !0,
         noBackground: !0,
         size: "small",
-        mode: d,
+        mode: u,
         focusMode: s,
         label: m ? "Copied to clipboard" : "Copy to clipboard",
-        onClick: b,
+        onClick: f,
         disabled: m,
         children: m ? /* @__PURE__ */ c(ke, { size: "size-3" }) : /* @__PURE__ */ c(xe, { size: "size-3" })
       }
@@ -683,6 +686,6 @@ const we = ({
   ] });
 };
 export {
-  $ as BUBBLE_CLASSNAME,
-  Ee as Bubble
+  re as BUBBLE_CLASSNAME,
+  ze as Bubble
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-bubble",
-	"version": "3.2.0",
+	"version": "3.2.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -43,7 +43,7 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "4.2.0",
+		"@versini/ui-button": "4.2.1",
 		"@versini/ui-icons": "4.6.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
@@ -51,5 +51,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "95add63a475dc1307dd4ada55909553876a55b73"
+	"gitHead": "2afa12a4fcc5da2231f908342e8e18524126274b"
 }