motile-ui 1.1.0 → 1.1.2

package/dist/components/Button/Button.css

@@ -1 +1 @@
-.motile-btn{width:fit-content;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:fit-content}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.95);box-shadow:0 2px 4px #0000001a}.motile-btn--primary{background:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );color:#fff;box-shadow:0 1px 2px #0000000d}@media (hover: hover){.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--secondary{background:#fff;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)));box-shadow:none}@media (hover: hover){.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6))) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--ghost{background:transparent;border:none;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--large{padding:0 24px;font-size:16px;height:56px;min-height:56px;line-height:1.4}.motile-btn--medium{padding:0 20px;font-size:15px;height:48px;min-height:48px;min-width:80px;line-height:1.4}.motile-btn--small{padding:0 16px;font-size:14px;height:40px;min-height:40px;min-width:64px;line-height:1.4}.motile-btn--primary.motile-btn--disabled{opacity:.5;filter:saturate(.9);cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--secondary.motile-btn--disabled{background:#e5e7eb;color:#6b7280;border:none;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--ghost.motile-btn--disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--full-width{width:100%}.motile-btn svg{flex-shrink:0;margin-right:8px}.motile-btn svg:last-child{margin-right:0;margin-left:8px}.motile-btn svg:only-child{margin:0}@media (max-width: 1024px){.motile-btn--large{padding:0 20px;font-size:15px;height:52px;min-height:52px}}@media (max-width: 768px){.motile-btn--large{padding:0 18px;font-size:14px;height:48px;min-height:48px}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}.motile-btn__wrapper{display:grid;grid-template-areas:"content";place-items:center;width:100%;height:100%}.motile-btn__content{grid-area:content;display:inline-flex;align-items:center;justify-content:center}.motile-btn__loading{grid-area:content;display:flex;align-items:center;justify-content:center}.motile-btn__dots{display:flex;gap:8px;align-items:center;height:1em}.motile-btn--large .motile-btn__dot{width:8px;height:8px}.motile-btn--medium .motile-btn__dot{width:6px;height:6px}.motile-btn--small .motile-btn__dot{width:5px;height:5px}.motile-btn__dot{border-radius:50%;background-color:#ffffffb3;animation:motile-btn-loading-bounce 1.4s ease-in-out infinite both}.motile-btn__dot:nth-child(1){animation-delay:-.32s}.motile-btn__dot:nth-child(2){animation-delay:-.16s}.motile-btn__dot:nth-child(3){animation-delay:0s}.motile-btn--primary .motile-btn__dot{background-color:#ffffffb3}.motile-btn--secondary .motile-btn__dot,.motile-btn--ghost .motile-btn__dot{background-color:#9ca3afb3}@keyframes motile-btn-loading-bounce{0%,80%,to{transform:scale(1);opacity:.4}40%{transform:scale(1.2);opacity:1}}
+.motile-btn{width:fit-content;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:fit-content}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.95);box-shadow:0 2px 4px #0000001a}.motile-btn--primary{background:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );color:#fff;box-shadow:0 1px 2px #0000000d}@media (hover: hover){.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--primary:hover:not(.motile-btn--disabled){filter:brightness(.9);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--secondary{background:#fff;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );border:1px solid var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)));box-shadow:none}@media (hover: hover){.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) ) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--secondary:hover:not(.motile-btn--disabled){background:color-mix(in srgb,var(--motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6))) 10%,transparent);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--ghost{background:transparent;border:none;color:var( --motile-btn-color, var(--motile-ui-btn, var(--motile-theme, #3b82f6)) );box-shadow:none}@media (hover: hover){.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}}.motile-btn--hover-on-touch.motile-btn--ghost:hover:not(.motile-btn--disabled){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.motile-btn--large{padding:0 24px;font-size:16px;height:56px;min-height:56px;line-height:1.4}.motile-btn--medium{padding:0 20px;font-size:15px;height:48px;min-height:48px;min-width:80px;line-height:1.4}.motile-btn--small{padding:0 16px;font-size:14px;height:40px;min-height:40px;min-width:64px;line-height:1.4}.motile-btn--primary.motile-btn--disabled{opacity:.5;filter:saturate(.9);cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--secondary.motile-btn--disabled{background:#e5e7eb;color:#6b7280;border:none;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--ghost.motile-btn--disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}.motile-btn--full-width{width:100%}.motile-btn svg{flex-shrink:0;margin-right:8px}.motile-btn svg:last-child{margin-right:0;margin-left:8px}.motile-btn svg:only-child{margin:0}@media (max-width: 1024px){.motile-btn--large{padding:0 20px;font-size:15px;height:54px;min-height:54px}}@media (max-width: 768px){.motile-btn--large{padding:0 18px;font-size:15px;height:52px;min-height:52px}.motile-btn:active:not(.motile-btn--disabled){filter:brightness(.92)}}@supports (-webkit-touch-callout: none){.motile-btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}}.motile-btn__wrapper{display:grid;grid-template-areas:"content";place-items:center;width:100%;height:100%}.motile-btn__content{grid-area:content;display:inline-flex;align-items:center;justify-content:center}.motile-btn__loading{grid-area:content;display:flex;align-items:center;justify-content:center}.motile-btn__dots{display:flex;gap:8px;align-items:center;height:1em}.motile-btn--large .motile-btn__dot{width:8px;height:8px}.motile-btn--medium .motile-btn__dot{width:6px;height:6px}.motile-btn--small .motile-btn__dot{width:5px;height:5px}.motile-btn__dot{border-radius:50%;background-color:#ffffffb3;animation:motile-btn-loading-bounce 1.4s ease-in-out infinite both}.motile-btn__dot:nth-child(1){animation-delay:-.32s}.motile-btn__dot:nth-child(2){animation-delay:-.16s}.motile-btn__dot:nth-child(3){animation-delay:0s}.motile-btn--primary .motile-btn__dot{background-color:#ffffffb3}.motile-btn--secondary .motile-btn__dot,.motile-btn--ghost .motile-btn__dot{background-color:#9ca3afb3}@keyframes motile-btn-loading-bounce{0%,80%,to{transform:scale(1);opacity:.4}40%{transform:scale(1.2);opacity:1}}

package/dist/components/Tooltip/Tooltip.js

@@ -1,27 +1,27 @@
-import { jsxs as tt, jsx as $ } from "react/jsx-runtime";
-import et, { useState as S, useEffect as P, useCallback as T, useId as ot, useRef as A, useLayoutEffect as nt, createContext as rt, useContext as it } from "react";
-import { createPortal as st } from "react-dom";
+import { jsxs as tt, jsx as V } from "react/jsx-runtime";
+import et, { useState as A, useEffect as B, useCallback as C, useId as ot, useRef as y, useLayoutEffect as nt, createContext as rt, useContext as st } from "react";
+import { createPortal as it } from "react-dom";
 import { Slot as at } from "../../utils/Slot.js";
 import { FloatingArrow as lt } from "../../utils/FloatingArrow.js";
 import './Tooltip.css';/* empty css            */
 const Z = rt(null);
 function J() {
-  const t = it(Z);
+  const t = st(Z);
   if (!t)
     throw new Error("Tooltip components must be used within Tooltip.Root");
   return t;
 }
-const s = 8;
-function X(t, e, r, i, a, f, u) {
+const i = 8;
+function X(t, e, r, s, a, m, p) {
   switch (t) {
     case "top":
-      return e.top - a.top - i >= s;
+      return e.top - a.top - s >= i;
     case "bottom":
-      return e.bottom + a.bottom + i <= u - s;
+      return e.bottom + a.bottom + s <= p - i;
     case "left":
-      return e.left - a.left - r >= s;
+      return e.left - a.left - r >= i;
     case "right":
-      return e.right + a.right + r <= f - s;
+      return e.right + a.right + r <= m - i;
   }
 }
 function ct(t) {
@@ -32,32 +32,32 @@ function ct(t) {
     right: "left"
   }[t]];
 }
-function ut(t, e, r, i) {
+function ut(t, e, r, s) {
   if (!(r < 768))
     return ct(t);
-  const u = e.top + e.height / 2 < i / 2;
-  return t === "left" || t === "right" ? [u ? "bottom" : "top", u ? "top" : "bottom", t === "left" ? "right" : "left"] : t === "top" || t === "bottom" ? [t === "top" ? "bottom" : "top"] : [];
+  const p = e.top + e.height / 2 < s / 2;
+  return t === "left" || t === "right" ? [p ? "bottom" : "top", p ? "top" : "bottom", t === "left" ? "right" : "left"] : t === "top" || t === "bottom" ? [t === "top" ? "bottom" : "top"] : [];
 }
-function pt(t, e, r, i) {
+function pt(t, e, r, s) {
   const a = {
-    top: t.top - e.top - s,
-    bottom: i - t.bottom - e.bottom - s,
-    left: t.left - e.left - s,
-    right: r - t.right - e.right - s
+    top: t.top - e.top - i,
+    bottom: s - t.bottom - e.bottom - i,
+    left: t.left - e.left - i,
+    right: r - t.right - e.right - i
   };
-  let f = "bottom", u = a.bottom;
+  let m = "bottom", p = a.bottom;
   for (const [n, l] of Object.entries(a))
-    l > u && (u = l, f = n);
-  return f;
+    l > p && (p = l, m = n);
+  return m;
 }
 function ft({
   children: t,
   position: e = "top",
   align: r = "center",
-  variant: i = "filled",
+  variant: s = "filled",
   color: a,
-  showArrow: f = !1,
-  keepOpen: u = !1,
+  showArrow: m = !1,
+  keepOpen: p = !1,
   offset: n
 }) {
   const l = n === void 0 ? { top: 7, bottom: 6, left: 6, right: 6 } : typeof n == "number" ? { top: n, bottom: n, left: n, right: n } : {
@@ -65,52 +65,52 @@ function ft({
     bottom: n.bottom ?? 6,
     left: n.left ?? 6,
     right: n.right ?? 6
-  }, M = ot().replace(/:/g, ""), w = A(null), x = A(null), m = A(), [b, L] = S(!1), [B, z] = S(e), [H, K] = S({}), F = A(null), W = T((k, E = 0) => {
-    m.current && (clearTimeout(m.current), m.current = void 0), !k && E > 0 ? m.current = window.setTimeout(
-      () => L(!1),
+  }, k = ot().replace(/:/g, ""), w = y(null), x = y(null), b = y(), [c, h] = A(!1), [F, z] = A(e), [W, K] = A({}), N = y(null), j = C((R, E = 0) => {
+    b.current && (clearTimeout(b.current), b.current = void 0), !R && E > 0 ? b.current = window.setTimeout(
+      () => h(!1),
       E
-    ) : L(k);
+    ) : h(R);
   }, []);
   nt(() => {
-    if (!b || !w.current || !x.current) return;
-    const k = () => {
+    if (!c || !w.current || !x.current) return;
+    const R = () => {
       if (!w.current || !x.current) return;
-      const o = w.current.getBoundingClientRect(), y = x.current;
-      y.classList.add("measuring"), y.offsetHeight;
-      const Y = window.getComputedStyle(y), _ = parseFloat(Y.width), q = parseFloat(Y.height);
-      let c = _, d = q;
-      y.classList.remove("measuring");
-      const R = window.innerWidth, O = window.innerHeight;
-      (isNaN(c) || c <= 0) && (c = 100), (isNaN(d) || d <= 0) && (d = 50);
-      const U = R - s * 2, j = O - s * 2;
-      c > U && (c = U), d > j && (d = j);
-      let v = e;
-      if (o.width === 0 && o.height === 0 || X(e, o, c, d, l, R, O))
-        v = e;
+      const o = w.current.getBoundingClientRect(), P = x.current;
+      P.classList.add("measuring"), P.offsetHeight;
+      const _ = P.getBoundingClientRect(), q = _.width, H = _.height;
+      let u = q, d = H;
+      P.classList.remove("measuring");
+      const T = window.innerWidth, O = window.innerHeight;
+      (isNaN(u) || u <= 0) && (u = 100), (isNaN(d) || d <= 0) && (d = 50);
+      const U = T - i * 2, $ = O - i * 2;
+      u > U && (u = U), d > $ && (d = $);
+      let M = e;
+      if (o.width === 0 && o.height === 0 || X(e, o, u, d, l, T, O))
+        M = e;
       else {
-        const N = ut(e, o, R, O);
+        const I = ut(e, o, T, O);
         let D = !1;
-        for (const G of N)
-          if (X(G, o, c, d, l, R, O)) {
-            v = G, D = !0;
+        for (const G of I)
+          if (X(G, o, u, d, l, T, O)) {
+            M = G, D = !0;
             break;
           }
-        D || (v = pt(o, l, R, O));
+        D || (M = pt(o, l, T, O));
       }
-      let p = 0, g = 0;
-      if (v === "top" || v === "bottom") {
+      let f = 0, g = 0;
+      if (M === "top" || M === "bottom") {
         switch (r) {
           case "start":
-            p = o.left;
+            f = o.left;
             break;
           case "center":
-            p = o.left + o.width / 2 - c / 2;
+            f = o.left + o.width / 2 - u / 2;
             break;
           case "end":
-            p = o.right - c;
+            f = o.right - u;
             break;
         }
-        p = Math.max(s, Math.min(p, R - s - c)), g = v === "top" ? o.top - l.top - d : o.bottom + l.bottom, g = Math.max(s, Math.min(g, O - s - d));
+        f = Math.max(i, Math.min(f, T - i - u)), g = M === "top" ? o.top - l.top - d : o.bottom + l.bottom, g = Math.max(i, Math.min(g, O - i - d));
       } else {
         switch (r) {
           case "start":
@@ -123,188 +123,199 @@ function ft({
             g = o.bottom - d;
             break;
         }
-        g = Math.max(s, Math.min(g, O - s - d)), v === "left" ? (p = o.left - l.left - c, p < s && (c = o.left - l.left - s, p = s)) : (p = o.right + l.right, p + c > R - s && (c = R - s - p));
+        g = Math.max(i, Math.min(g, O - i - d)), M === "left" ? (f = o.left - l.left - u, f < i && (u = o.left - l.left - i, f = i)) : (f = o.right + l.right, f + u > T - i && (u = T - i - f));
       }
-      let h = 0;
-      const I = 12, C = 16;
-      if (v === "left" || v === "right") {
+      let v = 0;
+      const S = 12, L = 16;
+      if (M === "left" || M === "right") {
         switch (r) {
           case "start":
-            h = o.top - g + I;
+            v = o.top - g + S;
             break;
           case "center":
-            h = o.top + o.height / 2 - g;
+            v = o.top + o.height / 2 - g;
             break;
           case "end":
-            h = o.bottom - g - I;
+            v = o.bottom - g - S;
             break;
         }
-        const N = Math.max(C, d - C);
-        h = Math.max(
-          C,
-          Math.min(h, N)
+        const I = Math.max(L, d - L);
+        v = Math.max(
+          L,
+          Math.min(v, I)
         );
       } else {
         switch (r) {
           case "start":
-            h = o.left - p + I;
+            v = o.left - f + S;
             break;
           case "center":
-            h = o.left + o.width / 2 - p;
+            v = o.left + o.width / 2 - f;
             break;
           case "end":
-            h = o.right - p - I;
+            v = o.right - f - S;
             break;
         }
-        const N = Math.max(C, c - C);
-        h = Math.max(
-          C,
-          Math.min(h, N)
+        const I = Math.max(L, u - L);
+        v = Math.max(
+          L,
+          Math.min(v, I)
         );
       }
-      isNaN(h) && (h = C), z(v), K({
-        left: Math.round(p),
+      isNaN(v) && (v = L), z(M), K({
+        left: Math.round(f),
         top: Math.round(g),
-        ...c !== _ && { maxWidth: c },
-        ...d !== q && { maxHeight: j },
-        "--arrow-offset": `${Math.round(h)}px`,
+        ...u !== q && { maxWidth: u },
+        ...d !== H && { maxHeight: $ },
+        "--arrow-offset": `${Math.round(v)}px`,
         ...a && { "--motile-tooltip-color": a }
       });
     }, E = () => {
-      F.current === null && (F.current = requestAnimationFrame(() => {
-        k(), F.current = null;
+      N.current === null && (N.current = requestAnimationFrame(() => {
+        R(), N.current = null;
       }));
     };
-    k(), window.addEventListener("scroll", E, {
+    R(), window.addEventListener("scroll", E, {
       passive: !0,
       capture: !0
     }), window.addEventListener("resize", E, { passive: !0 });
-    const V = new ResizeObserver(E);
-    return w.current && V.observe(w.current), () => {
-      F.current !== null && (cancelAnimationFrame(F.current), F.current = null), window.removeEventListener("scroll", E, { capture: !0 }), window.removeEventListener("resize", E), V.disconnect();
+    const Y = new ResizeObserver(E);
+    return w.current && Y.observe(w.current), () => {
+      N.current !== null && (cancelAnimationFrame(N.current), N.current = null), window.removeEventListener("scroll", E, { capture: !0 }), window.removeEventListener("resize", E), Y.disconnect();
     };
-  }, [b, e, r, a, n]), P(() => {
-    if (!b) return;
-    const k = () => {
-      W(!1, 0);
+  }, [c, e, r, a, n]), B(() => {
+    if (!c) return;
+    const R = () => {
+      j(!1, 0);
     };
-    return window.addEventListener("scroll", k, { capture: !0 }), () => {
-      window.removeEventListener("scroll", k, { capture: !0 });
+    return window.addEventListener("scroll", R, { capture: !0 }), () => {
+      window.removeEventListener("scroll", R, { capture: !0 });
     };
-  }, [b, W]), P(() => () => {
-    m.current && clearTimeout(m.current);
+  }, [c, j]), B(() => () => {
+    b.current && clearTimeout(b.current);
   }, []);
   const Q = {
-    open: b,
-    setOpen: W,
+    open: c,
+    setOpen: j,
     position: e,
     align: r,
-    variant: i,
-    showArrow: f,
+    variant: s,
+    showArrow: m,
     color: a,
-    keepOpen: u,
-    tooltipId: `${M}-tooltip`,
+    keepOpen: p,
+    tooltipId: `${k}-tooltip`,
     triggerRef: w,
     contentRef: x,
-    style: H,
-    placement: B
+    style: W,
+    placement: F
   };
-  return /* @__PURE__ */ $(Z.Provider, { value: Q, children: t });
+  return /* @__PURE__ */ V(Z.Provider, { value: Q, children: t });
 }
 function mt({ children: t, asChild: e = !1 }) {
-  const { open: r, setOpen: i, tooltipId: a, triggerRef: f, keepOpen: u } = J(), n = T(() => {
-    i(!0, 0);
-  }, [i]), l = T(() => {
-    u ? i(!1, 100) : i(!1, 0);
-  }, [i, u]), M = T(() => {
-    i(!0, 0);
-  }, [i]), w = T(() => {
-    i(!1, 0);
-  }, [i]), x = T(() => {
-    i(!r, 0);
-  }, [i, r]);
-  return e ? /* @__PURE__ */ $(
-    at,
-    {
-      ref: (m) => {
-        f.current = m;
-      },
-      className: "motile-tooltip-trigger",
-      "aria-describedby": r ? a : void 0,
-      tabIndex: 0,
-      onMouseEnter: n,
-      onMouseLeave: l,
-      onFocus: M,
-      onBlur: w,
-      onClick: x,
-      children: t
-    }
-  ) : et.cloneElement(t, {
-    ref: (m) => {
-      f.current = m;
-      const b = t.props.ref || t.ref;
-      b && (typeof b == "function" ? b(m) : typeof b == "object" && b !== null && (b.current = m));
+  const { open: r, setOpen: s, tooltipId: a, triggerRef: m, keepOpen: p } = J(), n = C(() => {
+    s(!0, 0);
+  }, [s]), l = C(() => {
+    p ? s(!1, 100) : s(!1, 0);
+  }, [s, p]), k = C(() => {
+    s(!0, 0);
+  }, [s]), w = C(() => {
+    s(!1, 0);
+  }, [s]), x = C(() => {
+    s(!r, 0);
+  }, [s, r]);
+  if (e)
+    return /* @__PURE__ */ V(
+      at,
+      {
+        ref: (c) => {
+          m.current = c;
+        },
+        className: "motile-tooltip-trigger",
+        "aria-describedby": r ? a : void 0,
+        tabIndex: 0,
+        onMouseEnter: n,
+        onMouseLeave: l,
+        onFocus: k,
+        onBlur: w,
+        onClick: x,
+        children: t
+      }
+    );
+  const b = (c, h) => (F) => {
+    c == null || c(F), h(F);
+  };
+  return et.cloneElement(t, {
+    ref: (c) => {
+      m.current = c;
+      const h = t.props.ref || t.ref;
+      h && (typeof h == "function" ? h(c) : typeof h == "object" && h !== null && (h.current = c));
     },
     className: `motile-tooltip-trigger ${t.props.className || ""}`.trim(),
     "aria-describedby": r ? a : void 0,
     tabIndex: t.props.tabIndex ?? 0,
-    onMouseEnter: n,
-    onMouseLeave: l,
-    onFocus: M,
-    onBlur: w,
-    onClick: x
+    onMouseEnter: b(
+      t.props.onMouseEnter,
+      n
+    ),
+    onMouseLeave: b(
+      t.props.onMouseLeave,
+      l
+    ),
+    onFocus: b(t.props.onFocus, k),
+    onBlur: b(t.props.onBlur, w),
+    onClick: b(t.props.onClick, x)
   });
 }
 function bt({ children: t }) {
   const {
     open: e,
     setOpen: r,
-    tooltipId: i,
+    tooltipId: s,
     contentRef: a,
-    variant: f,
-    showArrow: u,
+    variant: m,
+    showArrow: p,
     keepOpen: n,
     align: l,
-    style: M,
+    style: k,
     placement: w
-  } = J(), [x, m] = S(!1), [b, L] = S(!1);
-  P(() => {
-    m(!0);
-  }, []), P(() => {
+  } = J(), [x, b] = A(!1), [c, h] = A(!1);
+  B(() => {
+    b(!0);
+  }, []), B(() => {
     e ? requestAnimationFrame(() => {
-      L(!0);
-    }) : L(!1);
+      h(!0);
+    }) : h(!1);
   }, [e]);
-  const B = T(() => {
+  const F = C(() => {
     n && r(!0, 0);
-  }, [n, r]), z = T(() => {
+  }, [n, r]), z = C(() => {
     n && r(!1, 0);
-  }, [n, r]), H = M["--motile-tooltip-color"] || (f === "filled" ? "var(--motile-ui-tooltip, rgba(0, 0, 0, 0.9))" : "var(--motile-ui-tooltip, #3b82f6)");
-  return !x || !e ? null : st(
+  }, [n, r]), W = k["--motile-tooltip-color"] || (m === "filled" ? "var(--motile-ui-tooltip, rgba(0, 0, 0, 0.9))" : "var(--motile-ui-tooltip, #3b82f6)");
+  return !x || !e ? null : it(
     /* @__PURE__ */ tt(
       "div",
       {
         ref: a,
-        id: i,
+        id: s,
         role: "tooltip",
-        className: `motile-tooltip-bubble motile-tooltip-bubble--${f}`,
-        "data-open": b || void 0,
+        className: `motile-tooltip-bubble motile-tooltip-bubble--${m}`,
+        "data-open": c || void 0,
         "data-placement": w,
         "data-align": l,
-        "data-show-arrow": u || void 0,
+        "data-show-arrow": p || void 0,
         "data-keep-open": n || void 0,
-        style: M,
+        style: k,
         "aria-hidden": !e,
-        onMouseEnter: B,
+        onMouseEnter: F,
         onMouseLeave: z,
         children: [
           t,
-          u && /* @__PURE__ */ $(
+          p && /* @__PURE__ */ V(
             lt,
             {
               className: "motile-tooltip-arrow",
-              variant: f,
-              color: H
+              variant: m,
+              color: W
             }
           )
         ]

package/dist/hooks/useHistoryClose.js

@@ -1,39 +1,43 @@
-import { useRef as r, useState as w, useEffect as l } from "react";
+import { useRef as o, useState as w, useEffect as u } from "react";
 function p({
-  onClose: o,
-  isOpen: s
+  onClose: s,
+  isOpen: n
 }) {
-  const i = r(o), n = r(!1), [a, c] = w(!1), u = r(0), e = r(null);
-  return l(() => {
-    i.current = o;
-  }, [o]), l(() => {
-    if (s && !n.current) {
-      const t = (f) => {
-        c(!0), i.current();
-      };
-      return u.current = window.history.length, window.history.pushState({ modal: !0 }, ""), n.current = !0, window.addEventListener("popstate", t), () => {
-        window.removeEventListener("popstate", t);
-      };
+  const i = o(s), r = o(!1), [a, c] = w(!1), l = o(0), t = o(null);
+  return u(() => {
+    i.current = s;
+  }, [s]), u(() => {
+    if (!n) return;
+    const e = (d) => {
+      c(!0), i.current();
+    };
+    return r.current || (l.current = window.history.length, window.history.pushState({ modal: !0 }, ""), r.current = !0), window.addEventListener("popstate", e), () => {
+      window.removeEventListener("popstate", e);
+    };
+  }, [n]), u(() => {
+    if (n || !r.current) return;
+    let e = null;
+    if (!a) {
+      const d = l.current + 1;
+      if (window.history.length !== d)
+        t.current = null;
+      else if (t.current) {
+        const f = t.current;
+        t.current = null, e = () => {
+          window.removeEventListener("popstate", e), e = null, setTimeout(() => {
+            f();
+          }, 0);
+        }, window.addEventListener("popstate", e), window.history.back();
+      } else
+        window.history.back();
     }
-    if (!s && n.current) {
-      if (!a) {
-        const t = u.current + 1;
-        if (window.history.length !== t)
-          e.current = null;
-        else if (e.current) {
-          const d = () => {
-            window.removeEventListener("popstate", d), e.current && (e.current(), e.current = null);
-          };
-          window.addEventListener("popstate", d), window.history.back();
-        } else
-          window.history.back();
-      }
-      n.current = !1, c(!1);
-    }
-  }, [s, a]), {
+    return r.current = !1, c(!1), () => {
+      e && window.removeEventListener("popstate", e);
+    };
+  }, [n, a]), {
     isClosingFromHistory: a,
-    navigateAndClose: (t) => {
-      e.current = t, i.current();
+    navigateAndClose: (e) => {
+      t.current = e, i.current();
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motile-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "description": "A modern React component library for webview applications",
   "main": "./dist/index.js",