@versini/ui-bubble 4.1.0 → 4.1.1

package/dist/components/Bubble/Bubble.js

@@ -1,76 +1,76 @@
-import { jsx as s, jsxs as x, Fragment as Q } from "react/jsx-runtime";
-import S, { useRef as _, useLayoutEffect as P, useState as H, useMemo as q, useEffect as O, useCallback as ee } from "react";
+import { jsx as c, jsxs as B, Fragment as ae } from "react/jsx-runtime";
+import j, { useRef as N, useLayoutEffect as F, useEffect as M, useState as G, useMemo as W, useCallback as oe } from "react";
 import o from "clsx";
-const z = "av-bubble", A = "av-button", L = "icon", D = "button", V = "link", re = ({
+const R = "av-bubble", D = "av-button", H = "icon", Y = "button", U = "link", ie = ({
   type: e,
-  size: t,
-  labelRight: r,
+  size: r,
+  labelRight: t,
   labelLeft: a,
-  align: l,
-  animated: i
+  align: i,
+  animated: l
 }) => {
-  const n = "max-h-8 py-0 px-2", c = "max-h-9 h-8 px-3", d = "max-h-12 py-2 px-4";
+  const n = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", u = "max-h-12 py-2 px-4";
   switch (e) {
-    case D:
-    case V:
+    case Y:
+    case U:
       return o({
-        [n]: t === "small",
-        [c]: t === "medium",
-        [d]: t === "large"
+        [n]: r === "small",
+        [d]: r === "medium",
+        [u]: r === "large"
       });
-    case L:
+    case H:
       return o("flex items-center", {
-        "justify-center": l === "center",
-        "justify-start": l === "left",
-        "justify-end": l === "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),
-        "h-8 px-3": t === "medium" && !i && (r || a),
-        "h-12 w-12 p-2": t === "large" && !i && !(r || a),
-        "h-12 px-4": t === "large" && !i && (r || a),
-        "h-6 py-0": t === "small" && i && !(r || a),
-        "h-6": t === "small" && i && (r || a),
-        "h-8 py-1": t === "medium" && i && !(r || a),
-        "h-8": t === "medium" && i && (r || a),
-        "h-12 py-2": t === "large" && i && !(r || a),
-        "h-12": t === "large" && i && (r || a)
+        "justify-center": i === "center",
+        "justify-start": i === "left",
+        "justify-end": i === "right",
+        "h-6 w-6 p-0": r === "small" && !l && !(t || a),
+        "h-6 px-2": r === "small" && !l && (t || a),
+        "h-8 w-8 p-1": r === "medium" && !l && !(t || a),
+        "h-8 px-3": r === "medium" && !l && (t || a),
+        "h-12 w-12 p-2": r === "large" && !l && !(t || a),
+        "h-12 px-4": r === "large" && !l && (t || a),
+        "h-6 py-0": r === "small" && l && !(t || a),
+        "h-6": r === "small" && l && (t || a),
+        "h-8 py-1": r === "medium" && l && !(t || a),
+        "h-8": r === "medium" && l && (t || a),
+        "h-12 py-2": r === "large" && l && !(t || a),
+        "h-12": r === "large" && l && (t || a)
       });
   }
-}, te = ({
+}, le = ({
   type: e,
-  size: t,
-  labelRight: r,
+  size: r,
+  labelRight: t,
   labelLeft: a
 }) => {
-  const l = "text-sm font-medium", i = "text-base font-medium", n = "text-lg font-medium";
+  const i = "text-sm font-medium", l = "text-base font-medium", n = "text-lg font-medium";
   switch (e) {
-    case D:
-    case V:
+    case Y:
+    case U:
       return o({
-        "text-center": e === V,
-        [l]: t === "small",
-        [i]: t === "medium",
-        [n]: t === "large"
+        "text-center": e === U,
+        [i]: r === "small",
+        [l]: r === "medium",
+        [n]: r === "large"
       });
-    case L:
+    case H:
       return o({
-        [l]: t === "small" && (r || a),
-        [i]: t === "medium" && (r || a),
-        [n]: t === "large" && (r || a)
+        [i]: r === "small" && (t || a),
+        [l]: r === "medium" && (t || a),
+        [n]: r === "large" && (t || a)
       });
   }
-}, ae = ({
+}, ne = ({
   mode: e,
-  noBackground: t,
-  truncate: r,
+  noBackground: r,
+  truncate: t,
   variant: a
 }) => {
-  if (t)
+  if (r)
     return "not-prose";
   if (a === "primary")
     return o("not-prose", {
-      truncate: r,
+      truncate: t,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
       "dark:text-copy-lighter": e === "system",
@@ -78,7 +78,7 @@ const z = "av-bubble", A = "av-button", L = "icon", D = "button", V = "link", re
     });
   if (a === "secondary")
     return o("not-prose", {
-      truncate: r,
+      truncate: t,
       "text-copy-light": e === "light" || e === "system",
       "text-copy-lighter": e === "dark" || e === "alt-system",
       "dark:text-copy-lighter": e === "alt-system",
@@ -86,7 +86,7 @@ const z = "av-bubble", A = "av-button", L = "icon", D = "button", V = "link", re
     });
   if (a === "danger")
     return o("not-prose", {
-      truncate: r,
+      truncate: t,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
       "dark:text-copy-lighter": e === "system",
@@ -94,238 +94,238 @@ const z = "av-bubble", A = "av-button", L = "icon", D = "button", V = "link", re
     });
   if (a === "selected")
     return o("not-prose text-copy-lighter", {
-      truncate: r
+      truncate: t
     });
-}, oe = ({
+}, ce = ({
   mode: e,
-  noBackground: t,
-  variant: r
+  noBackground: r,
+  variant: t
 }) => {
-  if (!t) {
-    if (r === "primary")
+  if (!r) {
+    if (t === "primary")
       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")
+    if (t === "secondary")
       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")
+    if (t === "danger")
       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",
         "bg-action-danger-light dark:bg-action-danger-dark": e === "alt-system"
       });
-    if (r === "selected")
+    if (t === "selected")
       return "bg-action-selected-dark";
   }
-}, ie = ({
+}, se = ({
   radius: e
 }) => o({
   "rounded-full": e === "large",
   "rounded-md": e === "medium",
   "rounded-xs": e === "small"
-}), le = ({
+}), de = ({
   mode: e,
-  disabled: t,
-  variant: r
+  disabled: r,
+  variant: t
 }) => {
-  if (t)
+  if (r)
     return "";
-  if (r === "primary")
+  if (t === "primary")
     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")
+  if (t === "secondary")
     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")
+  if (t === "danger")
     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",
       "hover:bg-action-danger-light-hover dark:hover:bg-action-danger-dark-hover": e === "alt-system"
     });
-  if (r === "selected")
+  if (t === "selected")
     return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
-}, ne = ({
+}, ue = ({
   mode: e,
-  disabled: t,
-  variant: r
+  disabled: r,
+  variant: t
 }) => {
-  if (t)
+  if (r)
     return "";
-  if (r === "primary")
+  if (t === "primary")
     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")
+  if (t === "secondary")
     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")
+  if (t === "danger")
     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",
       "active:bg-action-danger-light-active dark:active:bg-action-danger-dark-active": e === "alt-system"
     });
-  if (r === "selected")
+  if (t === "selected")
     return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
-}, se = ({
+}, be = ({
   mode: e,
-  noBorder: t,
-  variant: r
+  noBorder: r,
+  variant: t
 }) => {
-  if (t)
+  if (r)
     return "border border-transparent";
-  if (r === "primary")
+  if (t === "primary")
     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")
+  if (t === "secondary")
     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")
+  if (t === "danger")
     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",
       "border-border-danger-medium dark:border-border-danger-dark": e === "alt-system"
     });
-  if (r === "selected")
+  if (t === "selected")
     return "border border-border-selected-dark";
-}, ce = ({
+}, ge = ({
   focusMode: e
 }) => 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",
   "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
-}), de = ({
+}), me = ({
   mode: e,
-  raw: t,
-  iconClassName: r
-}) => t ? "" : o(
+  raw: r,
+  iconClassName: t
+}) => r ? "" : o(
   {
     "text-copy-accent-dark": e === "light" || e === "alt-system",
     "text-copy-light": e === "dark" || e === "system",
     "dark:text-copy-light": e === "alt-system",
     "dark:text-copy-accent-dark": e === "system"
   },
-  r
-), be = ({
+  t
+), he = ({
   animated: e
 }) => o({
-  "transition-opacity duration-300 ease-in": e
-}), ue = ({
+  "transition-opacity duration-300 ease-in-out": e
+}), fe = ({
   type: e,
-  className: t,
-  raw: r,
+  className: r,
+  raw: t,
   mode: a,
-  focusMode: l,
-  disabled: i,
+  focusMode: i,
+  disabled: l,
   fullWidth: n,
-  size: c,
-  noBorder: d,
-  labelRight: h,
-  labelLeft: v,
-  noBackground: u,
+  size: d,
+  noBorder: u,
+  labelRight: v,
+  labelLeft: k,
+  noBackground: s,
   variant: b,
   truncate: g,
-  align: w,
-  radius: B,
+  align: _,
+  radius: I,
   animated: m
-}) => (b || (b = "primary"), r ? o(A, t) : o(
-  A,
-  ae({
+}) => (b || (b = "primary"), t ? o(D, r) : o(
+  D,
+  ne({
     mode: a,
     variant: b,
-    noBackground: u,
+    noBackground: s,
     truncate: g
   }),
-  oe({ mode: a, noBackground: u, variant: b }),
-  ie({ radius: B }),
-  re({
+  ce({ mode: a, noBackground: s, variant: b }),
+  se({ radius: I }),
+  ie({
     type: e,
-    size: c,
-    labelRight: h,
-    labelLeft: v,
-    align: w,
+    size: d,
+    labelRight: v,
+    labelLeft: k,
+    align: _,
     animated: m
   }),
-  te({ type: e, size: c, labelRight: h, labelLeft: v }),
-  se({ mode: a, variant: b, noBorder: d }),
-  ce({ focusMode: l }),
-  le({ mode: a, variant: b, disabled: i }),
-  ne({ mode: a, variant: b, disabled: i }),
+  le({ type: e, size: d, labelRight: v, labelLeft: k }),
+  be({ mode: a, variant: b, noBorder: u }),
+  ge({ focusMode: i }),
+  de({ mode: a, variant: b, disabled: l }),
+  ue({ mode: a, variant: b, disabled: l }),
   {
     "w-full": n,
-    "disabled:cursor-not-allowed disabled:opacity-50": i
+    "disabled:cursor-not-allowed disabled:opacity-50": l
   },
   o({
-    "transition-[width] duration-300 ease-in-out": m
+    "transition-[width] duration-300 ease-in": m
   }),
-  t
-)), ge = (e, t, r) => {
+  r
+)), ve = (e, r, t) => {
   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);
-}, G = S.forwardRef((e, t) => {
-  const { onClick: r, noInternalClick: a = !1, ...l } = e;
-  return /* @__PURE__ */ s(
+  !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);
+}, J = j.forwardRef((e, r) => {
+  const { onClick: t, noInternalClick: a = !1, ...i } = e;
+  return /* @__PURE__ */ c(
     "button",
     {
-      ref: t,
-      onClick: (i) => {
-        ge(i, a, r);
+      ref: r,
+      onClick: (l) => {
+        ve(l, a, t);
       },
-      ...l
+      ...i
     }
   );
 });
-G.displayName = "BaseButton";
-function me() {
-  const e = _(!1);
-  return O(() => (e.current = !0, () => {
+J.displayName = "BaseButton";
+function ye() {
+  const e = N(!1);
+  return M(() => (e.current = !0, () => {
     e.current = !1;
-  }), []), ee(() => e.current, []);
+  }), []), oe(() => e.current, []);
 }
-function he(e) {
-  return q(() => e.every((t) => t == null) ? () => {
-  } : (t) => {
-    e.forEach((r) => {
-      typeof r == "function" ? r(t) : r != null && (r.current = t);
+function pe(e) {
+  return W(() => e.every((r) => r == null) ? () => {
+  } : (r) => {
+    e.forEach((t) => {
+      typeof t == "function" ? t(r) : t != null && (t.current = r);
     });
   }, e);
 }
-const fe = {
+const ke = {
   x: 0,
   y: 0,
   width: 0,
@@ -335,147 +335,165 @@ const fe = {
   bottom: 0,
   right: 0
 };
-function M(e) {
-  const t = me(), r = _(0), a = _(null), [l, i] = H(fe), n = q(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((c) => {
-    const d = c[0];
-    d && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
-      a.current && t() && i(d.contentRect);
+function O(e) {
+  const r = ye(), t = N(0), a = N(null), [i, l] = G(ke), n = W(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
+    const u = d[0];
+    u && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
+      a.current && r() && l(u.contentRect);
     }));
-  }), [t]);
-  return O(() => (a.current && (n == null || n.observe(a.current, e)), () => {
-    n == null || n.disconnect(), r.current && cancelAnimationFrame(r.current);
-  }), [n, e]), [a, l];
+  }), [r]);
+  return M(() => (a.current && (n == null || n.observe(a.current, e)), () => {
+    n == null || n.disconnect(), t.current && cancelAnimationFrame(t.current);
+  }), [n, e]), [a, i];
 }
-const ve = {
+const z = {
   small: 24,
   // w-6
   medium: 32,
   // w-8
   large: 48
   // w-12
-}, pe = {
+}, xe = {
   small: 8 * 2,
   // px-2 x 2
   medium: 12 * 2,
   // px-3 x 2
   large: 16 * 2
   // px-4 x 2
-}, ye = 2, U = S.forwardRef(
+}, we = 2, Be = 300, $ = j.forwardRef(
   ({
     children: e,
-    disabled: t = !1,
-    mode: r = "system",
+    disabled: r = !1,
+    mode: t = "system",
     focusMode: a = "system",
-    fullWidth: l = !1,
-    className: i,
+    fullWidth: i = !1,
+    className: l,
     type: n = "button",
-    raw: c = !1,
-    noBorder: d = !1,
-    "aria-label": h,
-    label: v,
-    size: u = "medium",
+    raw: d = !1,
+    noBorder: u = !1,
+    "aria-label": v,
+    label: k,
+    size: s = "medium",
     labelRight: b,
     labelLeft: g,
-    noBackground: w = !1,
-    align: B = "center",
+    noBackground: _ = !1,
+    align: I = "center",
     radius: m = "large",
-    variant: I = "primary",
-    iconClassName: N,
-    animated: p = !1,
-    ...Y
+    variant: T = "primary",
+    iconClassName: C,
+    animated: y = !1,
+    ...Q
   }, X) => {
-    const Z = ue({
-      type: L,
-      mode: r,
+    const Z = fe({
+      type: H,
+      mode: t,
       focusMode: a,
-      fullWidth: l,
-      disabled: t,
-      raw: c,
-      className: i,
-      noBorder: d,
-      size: u,
+      fullWidth: i,
+      disabled: r,
+      raw: d,
+      className: l,
+      noBorder: u,
+      size: s,
       labelRight: b,
       labelLeft: g,
-      noBackground: w,
-      align: B,
+      noBackground: _,
+      align: I,
       radius: m,
-      variant: I,
-      animated: p
-    }), J = de({ mode: r, raw: c, iconClassName: N }), $ = be({ animated: p }), [f, E] = M(), [y, R] = M(), [C, j] = M(), T = _(0), k = _(null), K = he([X, k]);
-    return P(() => {
-      C && C.current && p && (T.current = j.width + pe[u] + (d ? 0 : ye));
-    }, [j, C, u, d, p]), P(() => {
-      k && k.current && p && (b && f && E.width > 0 ? (f.current && (f.current.style.opacity = "100"), k.current.style.width = `${E.width + T.current}px`) : g && R.width > 0 ? (y.current && (y.current.style.opacity = "100"), k.current.style.width = `${R.width + T.current}px`) : (f.current && (f.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), k.current.style.width = `${ve[u]}px`));
+      variant: T,
+      animated: y
+    }), ee = me({ mode: t, raw: d, iconClassName: C }), A = he({ animated: y }), te = "flex items-center justify-center relative w-full h-full overflow-hidden", [h, S] = O(), [f, V] = O(), [E, P] = O(), L = N(0), p = N(null), x = N(null), re = pe([X, p]);
+    return F(() => {
+      E && E.current && y && (L.current = P.width + xe[s] + (u ? 0 : we), p.current && !p.current.style.width && (p.current.style.width = `${z[s]}px`));
+    }, [P, E, s, u, y]), F(() => {
+      if (p && p.current && y) {
+        let w = z[s];
+        b && h && S.width > 0 ? w = S.width + L.current : g && f && V.width > 0 && (w = V.width + L.current), x.current && clearTimeout(x.current), w !== parseInt(p.current.style.width || "0", 10) && (h.current && (h.current.style.opacity = "0"), f.current && (f.current.style.opacity = "0"), p.current.style.width = `${w}px`, w > z[s] && (x.current = setTimeout(() => {
+          h.current && b && (h.current.style.opacity = "1"), f.current && g && (f.current.style.opacity = "1"), x.current = null;
+        }, Be * 0.8))), w === z[s] && (h.current && (h.current.style.opacity = "0"), f.current && (f.current.style.opacity = "0"));
+      }
     }, [
-      E,
+      S,
       b,
-      f,
-      R,
+      h,
+      V,
       g,
-      y,
-      u,
-      p
-    ]), /* @__PURE__ */ x(
-      G,
+      f,
+      s,
+      y
+    ]), M(() => () => {
+      x.current && clearTimeout(x.current);
+    }, []), /* @__PURE__ */ c(
+      J,
       {
-        ref: K,
+        ref: re,
         className: Z,
-        disabled: t,
+        disabled: r,
         type: n,
-        "aria-label": h || v,
-        ...Y,
-        children: [
-          /* @__PURE__ */ s(
-            F,
+        "aria-label": v || k,
+        ...Q,
+        children: /* @__PURE__ */ B("div", { className: te, children: [
+          /* @__PURE__ */ c(
+            q,
             {
               label: g,
-              labelRef: y,
-              labelClass: $,
-              labelInnerClass: "pr-2"
+              labelRef: f,
+              labelClass: A,
+              labelInnerClass: "pr-2",
+              initiallyHidden: y
             }
           ),
-          /* @__PURE__ */ s("span", { ref: C, className: J, children: e }),
-          /* @__PURE__ */ s(
-            F,
+          /* @__PURE__ */ c("span", { ref: E, className: ee, children: e }),
+          /* @__PURE__ */ c(
+            q,
             {
               label: b,
-              labelRef: f,
-              labelClass: $,
-              labelInnerClass: "pl-2"
+              labelRef: h,
+              labelClass: A,
+              labelInnerClass: "pl-2",
+              initiallyHidden: y
             }
           )
-        ]
+        ] })
       }
     );
   }
-), F = ({
+), q = ({
   labelRef: e,
-  labelClass: t,
-  label: r,
-  labelInnerClass: a
-}) => /* @__PURE__ */ s("span", { ref: e, className: t, children: r && /* @__PURE__ */ s("span", { className: a, children: r }) });
-U.displayName = "ButtonIcon";
+  labelClass: r,
+  label: t,
+  labelInnerClass: a,
+  initiallyHidden: i = !1
+}) => /* @__PURE__ */ c(
+  "span",
+  {
+    ref: e,
+    className: r,
+    style: i ? { opacity: 0 } : void 0,
+    children: t && /* @__PURE__ */ c("span", { className: a, children: t })
+  }
+);
+$.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v6.0.5
+  @versini/ui-button v6.0.6
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "6.0.5",
-    buildTime: "04/27/2025 01:38 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 ke = S.forwardRef(
+const Ne = j.forwardRef(
   ({
     children: e,
-    mode: t = "system",
-    className: r,
+    mode: r = "system",
+    className: t,
     active: a = !1,
-    ...l
-  }, i) => {
+    ...i
+  }, l) => {
     const n = a ? o(
       "relative",
       "focus-within:static",
@@ -487,51 +505,51 @@ const ke = S.forwardRef(
       "after:left-0",
       "after:right-0",
       {
-        "after:border-table-dark": t === "dark",
-        "after:border-table-light": t === "light",
-        "after:border-table-dark dark:after:border-table-light": t === "system",
-        "after:border-table-light dark:after:border-table-dark": t === "alt-system"
+        "after:border-table-dark": r === "dark",
+        "after:border-table-light": r === "light",
+        "after:border-table-dark dark:after:border-table-light": r === "system",
+        "after:border-table-light dark:after:border-table-dark": r === "alt-system"
       }
     ) : "";
-    return /* @__PURE__ */ s("div", { className: n, children: /* @__PURE__ */ s(
-      U,
+    return /* @__PURE__ */ c("div", { className: n, children: /* @__PURE__ */ c(
+      $,
       {
-        className: o("justify-center", r),
-        ref: i,
-        mode: t,
+        className: o("justify-center", t),
+        ref: l,
+        mode: r,
         radius: "small",
-        ...l,
+        ...i,
         children: e
       }
     ) });
   }
 );
-ke.displayName = "ButtonSort";
-const W = ({
+Ne.displayName = "ButtonSort";
+const K = ({
   children: e,
-  fill: t,
-  viewBox: r,
+  fill: r,
+  viewBox: t,
   className: a,
-  defaultViewBox: l,
-  size: i,
+  defaultViewBox: i,
+  size: l,
   title: n,
-  semantic: c = !1,
-  ...d
+  semantic: d = !1,
+  ...u
 }) => {
-  const h = o(i, a);
-  return /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ x(
+  const v = o(l, a);
+  return /* @__PURE__ */ c(ae, { children: /* @__PURE__ */ B(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: h,
-      viewBox: r || l,
-      fill: t || "currentColor",
+      className: v,
+      viewBox: t || i,
+      fill: r || "currentColor",
       role: "img",
-      "aria-hidden": !c,
+      "aria-hidden": !d,
       focusable: !1,
-      ...d,
+      ...u,
       children: [
-        n && c && /* @__PURE__ */ s("title", { children: n }),
+        n && d && /* @__PURE__ */ c("title", { children: n }),
         e
       ]
     }
@@ -544,86 +562,86 @@ const W = ({
 try {
   window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
     version: "4.2.0",
-    buildTime: "04/05/2025 07:49 PM EDT",
+    buildTime: "05/17/2025 06:18 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const xe = ({
+const _e = ({
   className: e,
-  viewBox: t,
-  title: r,
+  viewBox: r,
+  title: t,
   monotone: a,
-  ...l
-}) => /* @__PURE__ */ x(
-  W,
+  ...i
+}) => /* @__PURE__ */ B(
+  K,
   {
     defaultViewBox: "0 0 448 512",
     size: "size-5",
-    viewBox: t,
+    viewBox: r,
     className: e,
-    title: r || "Copied",
-    ...l,
+    title: t || "Copied",
+    ...i,
     children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ c(
         "path",
         {
           d: "M0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96m104 160c0-6.1 2.3-12.3 7-17 9.4-9.4 24.6-9.4 33.9 0l47 47 111-111c4.7-4.7 10.8-7 17-7s12.3 2.3 17 7c2.3 2.3 4.1 5 5.3 7.9.6 1.5 1 2.9 1.3 4.4.2 1.1.3 2.2.3 2.2.1 1.2.1 1.2.1 2.5-.1 1.5-.1 1.9-.1 2.3-.1.7-.2 1.5-.3 2.2-.3 1.5-.7 3-1.3 4.4-1.2 2.9-2.9 5.6-5.3 7.9l-128 128c-4.7 4.7-10.8 7-17 7s-12.3-2.3-17-7l-64-64c-4.7-4.7-7-10.8-7-17z",
           opacity: ".4"
         }
       ),
-      /* @__PURE__ */ s("path", { d: "M337 175c9.4 9.4 9.4 24.6 0 33.9L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0z" })
+      /* @__PURE__ */ c("path", { d: "M337 175c9.4 9.4 9.4 24.6 0 33.9L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0z" })
     ]
   }
-), we = ({
+), Ie = ({
   className: e,
-  viewBox: t,
-  title: r,
+  viewBox: r,
+  title: t,
   monotone: a,
-  ...l
-}) => /* @__PURE__ */ s(
-  W,
+  ...i
+}) => /* @__PURE__ */ c(
+  K,
   {
     defaultViewBox: "0 0 512 512",
     size: "size-5",
-    viewBox: t,
+    viewBox: r,
     className: e,
-    title: r || "Copy",
-    ...l,
-    children: /* @__PURE__ */ s("path", { d: "M64 464h224c8.8 0 16-7.2 16-16v-64h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16m160-160h224c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16m-64-16V64c0-35.3 28.7-64 64-64h224c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64" })
+    title: t || "Copy",
+    ...i,
+    children: /* @__PURE__ */ c("path", { d: "M64 464h224c8.8 0 16-7.2 16-16v-64h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16m160-160h224c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16m-64-16V64c0-35.3 28.7-64 64-64h224c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64" })
   }
 );
 /*!
-  @versini/ui-icons v4.9.0
+  @versini/ui-icons v4.10.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.9.0",
-    buildTime: "04/05/2025 07:49 PM EDT",
+    version: "4.10.0",
+    buildTime: "05/17/2025 06:18 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const Be = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
-  "max-w-xs sm:max-w-md md:max-w-2xl": !t,
-  "lg:max-w-3xl": e === "left" && !t
-}), Ne = ({ kind: e }) => o({
+const Ce = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
+  "max-w-xs sm:max-w-md md:max-w-2xl": !r,
+  "lg:max-w-3xl": e === "left" && !r
+}), Te = ({ kind: e }) => o({
   "bg-surface-lighter dark:bg-surface-dark": e === "left",
   "bg-surface-accent": e === "right"
-}), _e = ({ kind: e }) => o(
+}), Ee = ({ kind: e }) => o(
   "prose prose-dark dark:prose-lighter",
   "prose-blockquote:my-1",
   "prose-ol:my-1 prose-ul:my-1",
   {
     "text-copy-lighter": e === "right"
   }
-), Ie = ({ kind: e, tail: t }) => {
-  if (t)
+), ze = ({ kind: e, tail: r }) => {
+  if (r)
     return o(
-      `${z}-${e}-tail`,
+      `${R}-${e}-tail`,
       "rounded-3xl",
       "relative",
       "before:content-['']",
@@ -636,106 +654,106 @@ const Be = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
         "last-bubble-left:before:left-[2px] last-bubble-left:before:border-r-[8px] last-bubble-left:before:border-r-surface-lighter last-bubble-left:dark:before:border-r-surface-dark last-bubble-left:before:rounded-br-[100%]": e === "left"
       }
     );
-  if (!t)
+  if (!r)
     return o("rounded-b-xl", {
       "rounded-tr-xl": e === "left",
       "rounded-tl-xl": e === "right"
     });
-}, Ce = ({
+}, Re = ({
   kind: e,
-  className: t,
-  contentClassName: r,
+  className: r,
+  contentClassName: t,
   noMaxWidth: a,
-  tail: l
+  tail: i
 }) => {
-  const i = o(
-    z,
-    `${z}-${e}`,
+  const l = o(
+    R,
+    `${R}-${e}`,
     "flex items-start",
     {
       "flex-row-reverse": e === "right"
     },
-    t
+    r
   ), n = o(
-    `${z}-content`,
+    `${R}-content`,
     "flex flex-col empty:hidden",
-    Be({ kind: e, noMaxWidth: a }),
-    _e({ kind: e }),
-    Ne({ kind: e }),
-    Ie({ kind: e, tail: l }),
-    r
-  ), c = "pr-2 pt-1 text-end text-xs text-copy-light", d = o("flex flex-col-reverse sm:flex-row", {
-    "ml-2": e === "left" && !l,
-    "mr-2": e === "right" && !l,
-    "ml-1": e === "left" && l,
-    "mr-1": e === "right" && l
+    Ce({ kind: e, noMaxWidth: a }),
+    Ee({ kind: e }),
+    Te({ kind: e }),
+    ze({ kind: e, tail: i }),
+    t
+  ), d = "pr-2 pt-1 text-end text-xs text-copy-light", u = o("flex flex-col-reverse sm:flex-row", {
+    "ml-2": e === "left" && !i,
+    "mr-2": e === "right" && !i,
+    "ml-1": e === "left" && i,
+    "mr-1": e === "right" && i
   });
   return {
-    wrapper: i,
+    wrapper: l,
     main: n,
-    footer: c,
-    copyButton: d
+    footer: d,
+    copyButton: u
   };
-}, ze = "FOOTER_EMPTY", Me = ({
+}, Me = "FOOTER_EMPTY", Oe = ({
   children: e,
-  kind: t = "left",
-  className: r,
+  kind: r = "left",
+  className: t,
   contentClassName: a,
-  footer: l,
-  rawFooter: i,
+  footer: i,
+  rawFooter: l,
   copyToClipboard: n,
-  copyToClipboardFocusMode: c = "system",
-  copyToClipboardMode: d = "system",
-  noMaxWidth: h = !1,
-  tail: v = !1
+  copyToClipboardFocusMode: d = "system",
+  copyToClipboardMode: u = "system",
+  noMaxWidth: v = !1,
+  tail: k = !1
 }) => {
-  const [u, b] = H(!1), g = Ce({
-    kind: t,
-    className: r,
+  const [s, b] = G(!1), g = Re({
+    kind: r,
+    className: t,
     contentClassName: a,
-    noMaxWidth: h,
-    tail: v
-  }), w = !!n && (typeof n == "function" || typeof n == "string" || typeof e == "string"), B = () => {
+    noMaxWidth: v,
+    tail: k
+  }), _ = !!n && (typeof n == "function" || typeof n == "string" || typeof e == "string"), I = () => {
     b(!0), typeof n == "function" ? n(e) : typeof n == "string" ? navigator.clipboard.writeText(n) : typeof e == "string" && navigator.clipboard.writeText(e);
   };
-  return O(() => {
+  return M(() => {
     let m;
-    return u && (m = window.setTimeout(() => {
+    return s && (m = window.setTimeout(() => {
       b(!1);
     }, 3e3)), () => {
       clearTimeout(m);
     };
-  }, [u]), /* @__PURE__ */ x("div", { className: g.wrapper, children: [
-    /* @__PURE__ */ x("div", { children: [
-      /* @__PURE__ */ s("div", { className: g.main, children: e }),
-      l && Object.keys(l).map((m, I) => {
-        const N = l[m];
-        return N === ze ? /* @__PURE__ */ s("div", { className: "prose-p:m-0", children: /* @__PURE__ */ s("p", { className: g.footer, "aria-hidden": "true", children: /* @__PURE__ */ s("span", { className: "invisible", children: " " }) }) }, `${m}-${I}`) : N ? /* @__PURE__ */ s("div", { className: "prose-p:m-0", children: /* @__PURE__ */ x("p", { className: g.footer, children: [
+  }, [s]), /* @__PURE__ */ B("div", { className: g.wrapper, children: [
+    /* @__PURE__ */ B("div", { children: [
+      /* @__PURE__ */ c("div", { className: g.main, children: e }),
+      i && Object.keys(i).map((m, T) => {
+        const C = i[m];
+        return C === Me ? /* @__PURE__ */ c("div", { className: "prose-p:m-0", children: /* @__PURE__ */ c("p", { className: g.footer, "aria-hidden": "true", children: /* @__PURE__ */ c("span", { className: "invisible", children: " " }) }) }, `${m}-${T}`) : C ? /* @__PURE__ */ c("div", { className: "prose-p:m-0", children: /* @__PURE__ */ B("p", { className: g.footer, children: [
           m,
           ": ",
-          N
-        ] }) }, `${m}-${I}`) : null;
+          C
+        ] }) }, `${m}-${T}`) : null;
       }),
-      i && i
+      l && l
     ] }),
-    w && /* @__PURE__ */ s("div", { className: g.copyButton, children: /* @__PURE__ */ s(
-      U,
+    _ && /* @__PURE__ */ c("div", { className: g.copyButton, children: /* @__PURE__ */ c(
+      $,
       {
         noBorder: !0,
         noBackground: !0,
         size: "small",
-        mode: d,
-        focusMode: c,
-        label: u ? "Copied to clipboard" : "Copy to clipboard",
-        onClick: B,
-        disabled: u,
-        children: u ? /* @__PURE__ */ s(xe, { size: "size-3" }) : /* @__PURE__ */ s(we, { size: "size-3" })
+        mode: u,
+        focusMode: d,
+        label: s ? "Copied to clipboard" : "Copy to clipboard",
+        onClick: I,
+        disabled: s,
+        children: s ? /* @__PURE__ */ c(_e, { size: "size-3" }) : /* @__PURE__ */ c(Ie, { size: "size-3" })
       }
     ) })
   ] });
 };
 export {
-  z as BUBBLE_CLASSNAME,
-  ze as BUBBLE_FOOTER_EMPTY,
-  Me as Bubble
+  R as BUBBLE_CLASSNAME,
+  Me as BUBBLE_FOOTER_EMPTY,
+  Oe as Bubble
 };

package/dist/index.js

@@ -1,12 +1,12 @@
 import { BUBBLE_CLASSNAME as i, BUBBLE_FOOTER_EMPTY as o, Bubble as E } from "./components/Bubble/Bubble.js";
 /*!
-  @versini/ui-bubble v4.1.0
+  @versini/ui-bubble v4.1.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUBBLE__ || (window.__VERSINI_UI_BUBBLE__ = {
-    version: "4.1.0",
-    buildTime: "04/27/2025 01:38 PM EDT",
+    version: "4.1.1",
+    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-bubble",
-	"version": "4.1.0",
+	"version": "4.1.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -39,17 +39,17 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "5.0.2"
+		"@versini/ui-types": "5.0.3"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "6.0.5",
-		"@versini/ui-icons": "4.9.0",
+		"@versini/ui-button": "6.0.6",
+		"@versini/ui-icons": "4.10.0",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.1.3"
+		"tailwindcss": "4.1.7"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "063765b85f3384f58ae1890c98736029a590ff79"
+	"gitHead": "863a399128080a19f2668e458d495110aa0f68f8"
 }