@versini/ui-bubble 4.0.6 → 4.1.0

package/dist/components/Bubble/Bubble.js

@@ -1,76 +1,76 @@
-import { jsx as s, jsxs as x, Fragment as Y } from "react/jsx-runtime";
-import S, { useRef as N, useLayoutEffect as $, useState as q, useMemo as D, useEffect as V, useCallback as ee } from "react";
+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 o from "clsx";
-const I = "av-bubble", A = "av-button", L = "icon", F = "button", M = "link", te = ({
+const z = "av-bubble", A = "av-button", L = "icon", D = "button", V = "link", re = ({
   type: e,
-  size: r,
-  labelRight: t,
+  size: t,
+  labelRight: r,
   labelLeft: a,
   align: l,
   animated: i
 }) => {
   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";
   switch (e) {
-    case F:
-    case M:
+    case D:
+    case V:
       return o({
-        [n]: r === "small",
-        [c]: r === "medium",
-        [d]: r === "large"
+        [n]: t === "small",
+        [c]: t === "medium",
+        [d]: t === "large"
       });
     case L:
       return o("flex items-center", {
         "justify-center": l === "center",
         "justify-start": l === "left",
         "justify-end": l === "right",
-        "h-6 w-6 p-0": r === "small" && !i && !(t || a),
-        "h-6 px-2": r === "small" && !i && (t || a),
-        "h-8 w-8 p-1": r === "medium" && !i && !(t || a),
-        "h-8 px-3": r === "medium" && !i && (t || a),
-        "h-12 w-12 p-2": r === "large" && !i && !(t || a),
-        "h-12 px-4": r === "large" && !i && (t || a),
-        "h-6 py-0": r === "small" && i && !(t || a),
-        "h-6": r === "small" && i && (t || a),
-        "h-8 py-1": r === "medium" && i && !(t || a),
-        "h-8": r === "medium" && i && (t || a),
-        "h-12 py-2": r === "large" && i && !(t || a),
-        "h-12": r === "large" && i && (t || a)
+        "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)
       });
   }
-}, re = ({
+}, te = ({
   type: e,
-  size: r,
-  labelRight: t,
+  size: t,
+  labelRight: r,
   labelLeft: a
 }) => {
   const l = "text-sm font-medium", i = "text-base font-medium", n = "text-lg font-medium";
   switch (e) {
-    case F:
-    case M:
+    case D:
+    case V:
       return o({
-        "text-center": e === M,
-        [l]: r === "small",
-        [i]: r === "medium",
-        [n]: r === "large"
+        "text-center": e === V,
+        [l]: t === "small",
+        [i]: t === "medium",
+        [n]: t === "large"
       });
     case L:
       return o({
-        [l]: r === "small" && (t || a),
-        [i]: r === "medium" && (t || a),
-        [n]: r === "large" && (t || a)
+        [l]: t === "small" && (r || a),
+        [i]: t === "medium" && (r || a),
+        [n]: t === "large" && (r || a)
       });
   }
 }, ae = ({
   mode: e,
-  noBackground: r,
-  truncate: t,
+  noBackground: t,
+  truncate: r,
   variant: a
 }) => {
-  if (r)
+  if (t)
     return "not-prose";
   if (a === "primary")
     return o("not-prose", {
-      truncate: t,
+      truncate: r,
       "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 I = "av-bubble", A = "av-button", L = "icon", F = "button", M = "link", te
     });
   if (a === "secondary")
     return o("not-prose", {
-      truncate: t,
+      truncate: r,
       "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 I = "av-bubble", A = "av-button", L = "icon", F = "button", M = "link", te
     });
   if (a === "danger")
     return o("not-prose", {
-      truncate: t,
+      truncate: r,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
       "dark:text-copy-lighter": e === "system",
@@ -94,36 +94,36 @@ const I = "av-bubble", A = "av-button", L = "icon", F = "button", M = "link", te
     });
   if (a === "selected")
     return o("not-prose text-copy-lighter", {
-      truncate: t
+      truncate: r
     });
 }, oe = ({
   mode: e,
-  noBackground: r,
-  variant: t
+  noBackground: t,
+  variant: r
 }) => {
-  if (!r) {
-    if (t === "primary")
+  if (!t) {
+    if (r === "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 (t === "secondary")
+    if (r === "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 (t === "danger")
+    if (r === "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 (t === "selected")
+    if (r === "selected")
       return "bg-action-selected-dark";
   }
 }, ie = ({
@@ -134,93 +134,93 @@ const I = "av-bubble", A = "av-button", L = "icon", F = "button", M = "link", te
   "rounded-xs": e === "small"
 }), le = ({
   mode: e,
-  disabled: r,
-  variant: t
+  disabled: t,
+  variant: r
 }) => {
-  if (r)
+  if (t)
     return "";
-  if (t === "primary")
+  if (r === "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 (t === "secondary")
+  if (r === "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 (t === "danger")
+  if (r === "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 (t === "selected")
+  if (r === "selected")
     return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
 }, ne = ({
   mode: e,
-  disabled: r,
-  variant: t
+  disabled: t,
+  variant: r
 }) => {
-  if (r)
+  if (t)
     return "";
-  if (t === "primary")
+  if (r === "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 (t === "secondary")
+  if (r === "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 (t === "danger")
+  if (r === "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 (t === "selected")
+  if (r === "selected")
     return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
 }, se = ({
   mode: e,
-  noBorder: r,
-  variant: t
+  noBorder: t,
+  variant: r
 }) => {
-  if (r)
+  if (t)
     return "border border-transparent";
-  if (t === "primary")
+  if (r === "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 (t === "secondary")
+  if (r === "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 (t === "danger")
+  if (r === "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 (t === "selected")
+  if (r === "selected")
     return "border border-border-selected-dark";
 }, ce = ({
   focusMode: e
@@ -231,24 +231,24 @@ const I = "av-bubble", A = "av-button", L = "icon", F = "button", M = "link", te
   "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
 }), de = ({
   mode: e,
-  raw: r,
-  iconClassName: t
-}) => r ? "" : o(
+  raw: t,
+  iconClassName: r
+}) => t ? "" : 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"
   },
-  t
+  r
 ), be = ({
   animated: e
 }) => o({
   "transition-opacity duration-300 ease-in": e
 }), ue = ({
   type: e,
-  className: r,
-  raw: t,
+  className: t,
+  raw: r,
   mode: a,
   focusMode: l,
   disabled: i,
@@ -259,29 +259,29 @@ const I = "av-bubble", A = "av-button", L = "icon", F = "button", M = "link", te
   labelLeft: v,
   noBackground: u,
   variant: b,
-  truncate: m,
+  truncate: g,
   align: w,
   radius: B,
-  animated: g
-}) => (b || (b = "primary"), t ? o(A, r) : o(
+  animated: m
+}) => (b || (b = "primary"), r ? o(A, t) : o(
   A,
   ae({
     mode: a,
     variant: b,
     noBackground: u,
-    truncate: m
+    truncate: g
   }),
   oe({ mode: a, noBackground: u, variant: b }),
   ie({ radius: B }),
-  te({
+  re({
     type: e,
     size: c,
     labelRight: h,
     labelLeft: v,
     align: w,
-    animated: g
+    animated: m
   }),
-  re({ type: e, size: c, labelRight: h, labelLeft: v }),
+  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 }),
@@ -291,37 +291,37 @@ const I = "av-bubble", A = "av-button", L = "icon", F = "button", M = "link", te
     "disabled:cursor-not-allowed disabled:opacity-50": i
   },
   o({
-    "transition-[width] duration-300 ease-in-out": g
+    "transition-[width] duration-300 ease-in-out": m
   }),
-  r
-)), ge = (e, r, t) => {
+  t
+)), ge = (e, t, r) => {
   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);
-}, P = S.forwardRef((e, r) => {
-  const { onClick: t, noInternalClick: a = !1, ...l } = e;
+  !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(
     "button",
     {
-      ref: r,
+      ref: t,
       onClick: (i) => {
-        ge(i, a, t);
+        ge(i, a, r);
       },
       ...l
     }
   );
 });
-P.displayName = "BaseButton";
+G.displayName = "BaseButton";
 function me() {
-  const e = N(!1);
-  return V(() => (e.current = !0, () => {
+  const e = _(!1);
+  return O(() => (e.current = !0, () => {
     e.current = !1;
   }), []), ee(() => e.current, []);
 }
 function he(e) {
-  return D(() => e.every((r) => r == null) ? () => {
-  } : (r) => {
-    e.forEach((t) => {
-      typeof t == "function" ? t(r) : t != null && (t.current = r);
+  return q(() => e.every((t) => t == null) ? () => {
+  } : (t) => {
+    e.forEach((r) => {
+      typeof r == "function" ? r(t) : r != null && (r.current = t);
     });
   }, e);
 }
@@ -335,15 +335,15 @@ const fe = {
   bottom: 0,
   right: 0
 };
-function T(e) {
-  const r = me(), t = N(0), a = N(null), [l, i] = q(fe), n = D(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((c) => {
+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(t.current), t.current = requestAnimationFrame(() => {
-      a.current && r() && i(d.contentRect);
+    d && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
+      a.current && t() && i(d.contentRect);
     }));
-  }), [r]);
-  return V(() => (a.current && (n == null || n.observe(a.current, e)), () => {
-    n == null || n.disconnect(), t.current && cancelAnimationFrame(t.current);
+  }), [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];
 }
 const ve = {
@@ -360,11 +360,11 @@ const ve = {
   // px-3 x 2
   large: 16 * 2
   // px-4 x 2
-}, ye = 2, O = S.forwardRef(
+}, ye = 2, U = S.forwardRef(
   ({
     children: e,
-    disabled: r = !1,
-    mode: t = "system",
+    disabled: t = !1,
+    mode: r = "system",
     focusMode: a = "system",
     fullWidth: l = !1,
     className: i,
@@ -375,72 +375,72 @@ const ve = {
     label: v,
     size: u = "medium",
     labelRight: b,
-    labelLeft: m,
+    labelLeft: g,
     noBackground: w = !1,
     align: B = "center",
-    radius: g = "large",
-    variant: C = "primary",
-    iconClassName: W,
+    radius: m = "large",
+    variant: I = "primary",
+    iconClassName: N,
     animated: p = !1,
-    ...X
-  }, Z) => {
-    const J = ue({
+    ...Y
+  }, X) => {
+    const Z = ue({
       type: L,
-      mode: t,
+      mode: r,
       focusMode: a,
       fullWidth: l,
-      disabled: r,
+      disabled: t,
       raw: c,
       className: i,
       noBorder: d,
       size: u,
       labelRight: b,
-      labelLeft: m,
+      labelLeft: g,
       noBackground: w,
       align: B,
-      radius: g,
-      variant: C,
+      radius: m,
+      variant: I,
       animated: p
-    }), K = de({ mode: t, raw: c, iconClassName: W }), U = be({ animated: p }), [f, z] = T(), [y, R] = T(), [_, j] = T(), E = N(0), k = N(null), Q = he([Z, k]);
-    return $(() => {
-      _ && _.current && p && (E.current = j.width + pe[u] + (d ? 0 : ye));
-    }, [j, _, u, d, p]), $(() => {
-      k && k.current && p && (b && f && z.width > 0 ? (f.current && (f.current.style.opacity = "100"), k.current.style.width = `${z.width + E.current}px`) : m && R.width > 0 ? (y.current && (y.current.style.opacity = "100"), k.current.style.width = `${R.width + E.current}px`) : (f.current && (f.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), k.current.style.width = `${ve[u]}px`));
+    }), 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`));
     }, [
-      z,
+      E,
       b,
       f,
       R,
-      m,
+      g,
       y,
       u,
       p
     ]), /* @__PURE__ */ x(
-      P,
+      G,
       {
-        ref: Q,
-        className: J,
-        disabled: r,
+        ref: K,
+        className: Z,
+        disabled: t,
         type: n,
         "aria-label": h || v,
-        ...X,
+        ...Y,
         children: [
           /* @__PURE__ */ s(
-            H,
+            F,
             {
-              label: m,
+              label: g,
               labelRef: y,
-              labelClass: U,
+              labelClass: $,
               labelInnerClass: "pr-2"
             }
           ),
-          /* @__PURE__ */ s("span", { ref: _, className: K, children: e }),
+          /* @__PURE__ */ s("span", { ref: C, className: J, children: e }),
           /* @__PURE__ */ s(
-            H,
+            F,
             {
               label: b,
               labelRef: f,
-              labelClass: U,
+              labelClass: $,
               labelInnerClass: "pl-2"
             }
           )
@@ -448,13 +448,13 @@ const ve = {
       }
     );
   }
-), H = ({
+), F = ({
   labelRef: e,
-  labelClass: r,
-  label: t,
+  labelClass: t,
+  label: r,
   labelInnerClass: a
-}) => /* @__PURE__ */ s("span", { ref: e, className: r, children: t && /* @__PURE__ */ s("span", { className: a, children: t }) });
-O.displayName = "ButtonIcon";
+}) => /* @__PURE__ */ s("span", { ref: e, className: t, children: r && /* @__PURE__ */ s("span", { className: a, children: r }) });
+U.displayName = "ButtonIcon";
 /*!
   @versini/ui-button v6.0.5
   © 2025 gizmette.com
@@ -462,7 +462,7 @@ O.displayName = "ButtonIcon";
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
     version: "6.0.5",
-    buildTime: "04/12/2025 09:18 AM EDT",
+    buildTime: "04/27/2025 01:38 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -471,8 +471,8 @@ try {
 const ke = S.forwardRef(
   ({
     children: e,
-    mode: r = "system",
-    className: t,
+    mode: t = "system",
+    className: r,
     active: a = !1,
     ...l
   }, i) => {
@@ -487,18 +487,18 @@ const ke = S.forwardRef(
       "after:left-0",
       "after:right-0",
       {
-        "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"
+        "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"
       }
     ) : "";
     return /* @__PURE__ */ s("div", { className: n, children: /* @__PURE__ */ s(
-      O,
+      U,
       {
-        className: o("justify-center", t),
+        className: o("justify-center", r),
         ref: i,
-        mode: r,
+        mode: t,
         radius: "small",
         ...l,
         children: e
@@ -507,10 +507,10 @@ const ke = S.forwardRef(
   }
 );
 ke.displayName = "ButtonSort";
-const G = ({
+const W = ({
   children: e,
-  fill: r,
-  viewBox: t,
+  fill: t,
+  viewBox: r,
   className: a,
   defaultViewBox: l,
   size: i,
@@ -519,13 +519,13 @@ const G = ({
   ...d
 }) => {
   const h = o(i, a);
-  return /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ x(
+  return /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ x(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       className: h,
-      viewBox: t || l,
-      fill: r || "currentColor",
+      viewBox: r || l,
+      fill: t || "currentColor",
       role: "img",
       "aria-hidden": !c,
       focusable: !1,
@@ -552,18 +552,18 @@ try {
 }
 const xe = ({
   className: e,
-  viewBox: r,
-  title: t,
+  viewBox: t,
+  title: r,
   monotone: a,
   ...l
 }) => /* @__PURE__ */ x(
-  G,
+  W,
   {
     defaultViewBox: "0 0 448 512",
     size: "size-5",
-    viewBox: r,
+    viewBox: t,
     className: e,
-    title: t || "Copied",
+    title: r || "Copied",
     ...l,
     children: [
       /* @__PURE__ */ s(
@@ -578,18 +578,18 @@ const xe = ({
   }
 ), we = ({
   className: e,
-  viewBox: r,
-  title: t,
+  viewBox: t,
+  title: r,
   monotone: a,
   ...l
 }) => /* @__PURE__ */ s(
-  G,
+  W,
   {
     defaultViewBox: "0 0 512 512",
     size: "size-5",
-    viewBox: r,
+    viewBox: t,
     className: e,
-    title: t || "Copy",
+    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" })
   }
@@ -607,9 +607,9 @@ try {
   });
 } catch {
 }
-const Be = ({ 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
+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({
   "bg-surface-lighter dark:bg-surface-dark": e === "left",
   "bg-surface-accent": e === "right"
@@ -620,10 +620,10 @@ const Be = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
   {
     "text-copy-lighter": e === "right"
   }
-), Ie = ({ kind: e, tail: r }) => {
-  if (r)
+), Ie = ({ kind: e, tail: t }) => {
+  if (t)
     return o(
-      `${I}-${e}-tail`,
+      `${z}-${e}-tail`,
       "rounded-3xl",
       "relative",
       "before:content-['']",
@@ -636,34 +636,34 @@ const Be = ({ kind: e, noMaxWidth: r }) => 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 (!r)
+  if (!t)
     return o("rounded-b-xl", {
       "rounded-tr-xl": e === "left",
       "rounded-tl-xl": e === "right"
     });
 }, Ce = ({
   kind: e,
-  className: r,
-  contentClassName: t,
+  className: t,
+  contentClassName: r,
   noMaxWidth: a,
   tail: l
 }) => {
   const i = o(
-    I,
-    `${I}-${e}`,
+    z,
+    `${z}-${e}`,
     "flex items-start",
     {
       "flex-row-reverse": e === "right"
     },
-    r
+    t
   ), n = o(
-    `${I}-content`,
+    `${z}-content`,
     "flex flex-col empty:hidden",
     Be({ kind: e, noMaxWidth: a }),
     _e({ kind: e }),
     Ne({ kind: e }),
     Ie({ kind: e, tail: l }),
-    t
+    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,
@@ -676,10 +676,10 @@ const Be = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
     footer: c,
     copyButton: d
   };
-}, Te = ({
+}, ze = "FOOTER_EMPTY", Me = ({
   children: e,
-  kind: r = "left",
-  className: t,
+  kind: t = "left",
+  className: r,
   contentClassName: a,
   footer: l,
   rawFooter: i,
@@ -689,34 +689,37 @@ const Be = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
   noMaxWidth: h = !1,
   tail: v = !1
 }) => {
-  const [u, b] = q(!1), m = Ce({
-    kind: r,
-    className: t,
+  const [u, b] = H(!1), g = Ce({
+    kind: t,
+    className: r,
     contentClassName: a,
     noMaxWidth: h,
     tail: v
   }), w = !!n && (typeof n == "function" || typeof n == "string" || typeof e == "string"), B = () => {
     b(!0), typeof n == "function" ? n(e) : typeof n == "string" ? navigator.clipboard.writeText(n) : typeof e == "string" && navigator.clipboard.writeText(e);
   };
-  return V(() => {
-    let g;
-    return u && (g = window.setTimeout(() => {
+  return O(() => {
+    let m;
+    return u && (m = window.setTimeout(() => {
       b(!1);
     }, 3e3)), () => {
-      clearTimeout(g);
+      clearTimeout(m);
     };
-  }, [u]), /* @__PURE__ */ x("div", { className: m.wrapper, children: [
+  }, [u]), /* @__PURE__ */ x("div", { className: g.wrapper, children: [
     /* @__PURE__ */ x("div", { children: [
-      /* @__PURE__ */ s("div", { className: m.main, children: e }),
-      l && Object.keys(l).map((g, C) => l[g] ? /* @__PURE__ */ s("div", { className: "prose-p:m-0", children: /* @__PURE__ */ x("p", { className: m.footer, children: [
-        g,
-        ": ",
-        l[g]
-      ] }) }, `${g}-${C}`) : null),
+      /* @__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: [
+          m,
+          ": ",
+          N
+        ] }) }, `${m}-${I}`) : null;
+      }),
       i && i
     ] }),
-    w && /* @__PURE__ */ s("div", { className: m.copyButton, children: /* @__PURE__ */ s(
-      O,
+    w && /* @__PURE__ */ s("div", { className: g.copyButton, children: /* @__PURE__ */ s(
+      U,
       {
         noBorder: !0,
         noBackground: !0,
@@ -732,6 +735,7 @@ const Be = ({ kind: e, noMaxWidth: r }) => o("px-4 py-2", {
   ] });
 };
 export {
-  I as BUBBLE_CLASSNAME,
-  Te as Bubble
+  z as BUBBLE_CLASSNAME,
+  ze as BUBBLE_FOOTER_EMPTY,
+  Me as Bubble
 };

package/dist/index.d.ts

@@ -44,10 +44,14 @@ type BubbleProps = {
 	 * 	footer={{
 	 * 		"Sent": "12:00 PM",
 	 * 		"Delivered": "12:01 PM",
+	 *    "Verified": Bubble.FOOTER_EMPTY,
 	 * 		"Read": "12:02 PM",
 	 * 	}}
 	 * >Hello World</Bubble>
 	 * ```
+	 * This will create a footer with 4 rows, with the row before last being
+	 * empty but taking the full height of a normal row.
+	 *
 	 */
 	footer?: {
 		[key: string]: string | number | undefined | null;
@@ -88,6 +92,7 @@ type BubbleProps = {
 	tail?: boolean;
 };
 
+declare const BUBBLE_FOOTER_EMPTY = "FOOTER_EMPTY";
 declare const Bubble: ({ children, kind, className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, }: BubbleProps) => react_jsx_runtime.JSX.Element;
 
-export { BUBBLE_CLASSNAME, Bubble };
+export { BUBBLE_CLASSNAME, BUBBLE_FOOTER_EMPTY, Bubble };

package/dist/index.js

@@ -1,18 +1,19 @@
-import { BUBBLE_CLASSNAME as o, Bubble as B } from "./components/Bubble/Bubble.js";
+import { BUBBLE_CLASSNAME as i, BUBBLE_FOOTER_EMPTY as o, Bubble as E } from "./components/Bubble/Bubble.js";
 /*!
-  @versini/ui-bubble v4.0.6
+  @versini/ui-bubble v4.1.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUBBLE__ || (window.__VERSINI_UI_BUBBLE__ = {
-    version: "4.0.6",
-    buildTime: "04/12/2025 09:18 AM EDT",
+    version: "4.1.0",
+    buildTime: "04/27/2025 01:38 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
 export {
-  o as BUBBLE_CLASSNAME,
-  B as Bubble
+  i as BUBBLE_CLASSNAME,
+  o as BUBBLE_FOOTER_EMPTY,
+  E as Bubble
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-bubble",
-	"version": "4.0.6",
+	"version": "4.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -51,5 +51,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "1bc09c4f0904bd8c01a22b1a32299fdd7598ae32"
+	"gitHead": "063765b85f3384f58ae1890c98736029a590ff79"
 }