motile-ui 1.0.4 → 1.1.1

package/dist/components/Sheet/Sheet.js

@@ -1,15 +1,15 @@
 import { jsx as u, jsxs as $ } from "react/jsx-runtime";
-import { useCallback as v, useState as S, useEffect as k, useId as F, useRef as x, useMemo as A, createContext as T, useContext as w } from "react";
-import { createPortal as K } from "react-dom";
+import { useCallback as b, useState as S, useEffect as v, useId as A, useRef as x, useMemo as F, createContext as N, useContext as T } from "react";
+import { createPortal as w } from "react-dom";
 import { Slot as g } from "../../utils/Slot.js";
-import { useScrollLock as N } from "../../hooks/useScrollLock.js";
+import { useScrollLock as K } from "../../hooks/useScrollLock.js";
 import { useClickOutside as H } from "../../hooks/useClickOutside.js";
 import { useEscapeKey as V } from "../../hooks/useEscapeKey.js";
 import { useHistoryClose as q } from "../../hooks/useHistoryClose.js";
 import './Sheet.css';/* empty css          */
-const I = T(null);
-function _() {
-  const e = w(I);
+const I = N(null);
+function k() {
+  const e = T(I);
   if (!e)
     throw new Error("Sheet components must be used within Sheet.Root");
   return e;
@@ -19,7 +19,7 @@ function z({
   defaultValue: n = !1,
   onChange: o
 }) {
-  const t = e !== void 0, [i, a] = S(n), s = t ? e : i, l = v(
+  const t = e !== void 0, [i, a] = S(n), s = t ? e : i, l = b(
     (r) => {
       const f = typeof r == "function" ? r(s) : r;
       t || a(f), o == null || o(f);
@@ -38,14 +38,14 @@ function B({
   defaultOpen: s = !1,
   onOpenChange: l
 }) {
-  const r = F().replace(/:/g, ""), f = x(null), h = x(null), [d, c] = z({
+  const r = A().replace(/:/g, ""), f = x(null), h = x(null), [d, c] = z({
     value: a,
     defaultValue: s,
     onChange: l
   }), { isClosingFromHistory: p, navigateAndClose: y } = q({
     isOpen: d,
     onClose: () => c(!1)
-  }), m = A(
+  }), m = F(
     () => ({
       open: d,
       setOpen: c,
@@ -79,7 +79,7 @@ function B({
   return /* @__PURE__ */ u(I.Provider, { value: m, children: e });
 }
 function P({ children: e, asChild: n = !1 }) {
-  const { open: o, setOpen: t, triggerId: i, contentId: a } = _(), s = v(() => {
+  const { open: o, setOpen: t, triggerId: i, contentId: a } = k(), s = b(() => {
     t((l) => !l);
   }, [t]);
   return n ? /* @__PURE__ */ u(
@@ -104,17 +104,17 @@ function P({ children: e, asChild: n = !1 }) {
   );
 }
 function j({ children: e, container: n }) {
-  const { open: o } = _(), [t, i] = S(!1);
-  return k(() => {
+  const { open: o } = k(), [t, i] = S(!1);
+  return v(() => {
     i(!0);
-  }, []), !t || !o ? null : K(e, n || document.body);
+  }, []), !t || !o ? null : w(e, n || document.body);
 }
 function E({ className: e = "", style: n }) {
-  const { open: o, setOpen: t, position: i, closeOnBackdrop: a, zIndex: s, overlayRef: l } = _(), [r, f] = S(!1), [h, d] = S(!1), c = typeof a == "boolean" ? { clickOutside: a } : {
+  const { open: o, setOpen: t, position: i, closeOnBackdrop: a, zIndex: s, overlayRef: l } = k(), [r, f] = S(!1), [h, d] = S(!1), c = typeof a == "boolean" ? { clickOutside: a } : {
     escapeKey: a.escapeKey ?? !1,
     clickOutside: a.clickOutside ?? !1
   };
-  k(() => {
+  v(() => {
     if (o)
       f(!0);
     else if (r) {
@@ -124,17 +124,17 @@ function E({ className: e = "", style: n }) {
       }, 300);
       return () => clearTimeout(m);
     }
-  }, [o, r]), k(() => {
+  }, [o, r]), v(() => {
     if (!r || !o) return;
     const m = requestAnimationFrame(() => {
-      const b = requestAnimationFrame(() => {
+      const _ = requestAnimationFrame(() => {
         d(!0);
       });
-      return () => cancelAnimationFrame(b);
+      return () => cancelAnimationFrame(_);
     });
     return () => cancelAnimationFrame(m);
   }, [r, o]);
-  const p = v(
+  const p = b(
     (m) => {
       c.clickOutside && m.target === l.current && t(!1);
     },
@@ -168,21 +168,21 @@ function L({ children: e, className: n = "", style: o }) {
     contentId: f,
     sheetRef: h,
     isClosingFromHistory: d
-  } = _(), [c, p] = S(!1), [y, m] = S(!1), b = typeof s == "boolean" ? { escapeKey: s, clickOutside: s } : {
+  } = k(), [c, p] = S(!1), [y, m] = S(!1), _ = typeof s == "boolean" ? { escapeKey: s, clickOutside: s } : {
     escapeKey: s.escapeKey ?? !1,
     clickOutside: s.clickOutside ?? !1
   };
-  if (N({
+  if (K({
     enabled: t,
     allowedSelectors: [".motile-sheet__body"]
   }), H({
     refs: [h],
     handler: () => i(!1),
-    enabled: t && b.clickOutside
+    enabled: t && _.clickOutside
   }), V({
     handler: () => i(!1),
-    enabled: t && b.escapeKey
-  }), k(() => {
+    enabled: t && _.escapeKey
+  }), v(() => {
     if (t)
       p(!0);
     else if (c) {
@@ -192,7 +192,7 @@ function L({ children: e, className: n = "", style: o }) {
       }, d ? 0 : 300);
       return () => clearTimeout(C);
     }
-  }, [t, c, d]), k(() => {
+  }, [t, c, d]), v(() => {
     if (!c || !t || d) return;
     const O = requestAnimationFrame(() => {
       const C = requestAnimationFrame(() => {
@@ -231,7 +231,7 @@ function W({ children: e, className: n = "" }) {
   return /* @__PURE__ */ u("div", { className: `motile-sheet__body ${n}`, children: e });
 }
 function G({ children: e, asChild: n = !1 }) {
-  const { setOpen: o } = _(), t = v(() => {
+  const { setOpen: o } = k(), t = b(() => {
     o(!1);
   }, [o]);
   return n ? /* @__PURE__ */ u(
@@ -269,7 +269,11 @@ function G({ children: e, asChild: n = !1 }) {
     }
   );
 }
-const ne = {
+function ne() {
+  const { navigateAndClose: e } = k();
+  return e;
+}
+const se = {
   Root: B,
   Trigger: P,
   Portal: j,
@@ -281,5 +285,6 @@ const ne = {
   Close: G
 };
 export {
-  ne as Sheet
+  se as Sheet,
+  ne as useSheetNavigation
 };

package/dist/components/Sheet/useSheetNavigation.d.ts

@@ -0,0 +1 @@
+export { useSheetNavigation } from './Sheet';

package/dist/components/Sheet/useSheetNavigation.js

@@ -0,0 +1,4 @@
+import { useSheetNavigation as t } from "./Sheet.js";
+export {
+  t as useSheetNavigation
+};

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/index.d.ts

@@ -0,0 +1,5 @@
+export { useScrollLock } from './useScrollLock';
+export { useClickOutside } from './useClickOutside';
+export type { UseClickOutsideOptions } from './useClickOutside';
+export { useEscapeKey } from './useEscapeKey';
+export type { UseEscapeKeyOptions } from './useEscapeKey';

package/dist/hooks/index.js

@@ -0,0 +1,8 @@
+import { useScrollLock as r } from "./useScrollLock.js";
+import { useClickOutside as c } from "./useClickOutside.js";
+import { useEscapeKey as t } from "./useEscapeKey.js";
+export {
+  c as useClickOutside,
+  t as useEscapeKey,
+  r as useScrollLock
+};

package/dist/index.d.ts

@@ -30,8 +30,3 @@ export { Dock } from './components/Dock';
 export type { DockRootProps, DockItemProps, DockSeparatorProps, DockPosition, } from './components/Dock';
 export { SpeedDial } from './components/SpeedDial';
 export type { SpeedDialDirection, SpeedDialRootProps, SpeedDialTriggerProps, SpeedDialActionsProps, SpeedDialActionProps, } from './components/SpeedDial';
-export { useScrollLock } from './hooks/useScrollLock';
-export { useClickOutside } from './hooks/useClickOutside';
-export type { UseClickOutsideOptions } from './hooks/useClickOutside';
-export { useEscapeKey } from './hooks/useEscapeKey';
-export type { UseEscapeKeyOptions } from './hooks/useEscapeKey';

package/dist/index.js

@@ -1,42 +1,36 @@
-import { useScrollLock as e } from "./hooks/useScrollLock.js";
-import { useClickOutside as p } from "./hooks/useClickOutside.js";
-import { useEscapeKey as f } from "./hooks/useEscapeKey.js";
-import { Button as a } from "./components/Button/Button.js";
-import { Input as s } from "./components/Input/Input.js";
-import { Textarea as l } from "./components/Textarea/Textarea.js";
-import { Checkbox as d } from "./components/Checkbox/Checkbox.js";
-import { Switch as S } from "./components/Switch/Switch.js";
-import { Accordion as T } from "./components/Accordion/Accordion.js";
-import { Skeleton as D } from "./components/Skeleton/Skeleton.js";
-import { Badge as w } from "./components/Badge/Badge.js";
-import { Tooltip as C } from "./components/Tooltip/Tooltip.js";
-import { Popover as b } from "./components/Popover/Popover.js";
-import { Drawer as y } from "./components/Drawer/Drawer.js";
-import { Sheet as E } from "./components/Sheet/Sheet.js";
-import { Modal as K } from "./components/Modal/Modal.js";
-import { ToastProvider as M } from "./components/Toast/Toast.js";
-import { useToast as j } from "./components/Toast/useToast.js";
-import { Dock as z } from "./components/Dock/Dock.js";
-import { SpeedDial as G } from "./components/SpeedDial/SpeedDial.js";
+import { Button as e } from "./components/Button/Button.js";
+import { Input as p } from "./components/Input/Input.js";
+import { Textarea as f } from "./components/Textarea/Textarea.js";
+import { Checkbox as a } from "./components/Checkbox/Checkbox.js";
+import { Switch as d } from "./components/Switch/Switch.js";
+import { Accordion as l } from "./components/Accordion/Accordion.js";
+import { Skeleton as S } from "./components/Skeleton/Skeleton.js";
+import { Badge as h } from "./components/Badge/Badge.js";
+import { Tooltip as s } from "./components/Tooltip/Tooltip.js";
+import { Popover as D } from "./components/Popover/Popover.js";
+import { Drawer as w } from "./components/Drawer/Drawer.js";
+import { Sheet as P } from "./components/Sheet/Sheet.js";
+import { Modal as g } from "./components/Modal/Modal.js";
+import { ToastProvider as C } from "./components/Toast/Toast.js";
+import { useToast as M } from "./components/Toast/useToast.js";
+import { Dock as q } from "./components/Dock/Dock.js";
+import { SpeedDial as z } from "./components/SpeedDial/SpeedDial.js";
 export {
-  T as Accordion,
-  w as Badge,
-  a as Button,
-  d as Checkbox,
-  z as Dock,
-  y as Drawer,
-  s as Input,
-  K as Modal,
-  b as Popover,
-  E as Sheet,
-  D as Skeleton,
-  G as SpeedDial,
-  S as Switch,
-  l as Textarea,
-  M as ToastProvider,
-  C as Tooltip,
-  p as useClickOutside,
-  f as useEscapeKey,
-  e as useScrollLock,
-  j as useToast
+  l as Accordion,
+  h as Badge,
+  e as Button,
+  a as Checkbox,
+  q as Dock,
+  w as Drawer,
+  p as Input,
+  g as Modal,
+  D as Popover,
+  P as Sheet,
+  S as Skeleton,
+  z as SpeedDial,
+  d as Switch,
+  f as Textarea,
+  C as ToastProvider,
+  s as Tooltip,
+  M as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motile-ui",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "type": "module",
   "description": "A modern React component library for webview applications",
   "main": "./dist/index.js",
@@ -48,8 +48,8 @@
       "import": "./dist/components/Popover/Popover.js"
     },
     "./Sheet": {
-      "types": "./dist/components/Sheet/Sheet.d.ts",
-      "import": "./dist/components/Sheet/Sheet.js"
+      "types": "./dist/components/Sheet/useSheetNavigation.d.ts",
+      "import": "./dist/components/Sheet/useSheetNavigation.js"
     },
     "./Skeleton": {
       "types": "./dist/components/Skeleton/Skeleton.d.ts",
@@ -83,17 +83,9 @@
       "types": "./dist/components/Toast/useToast.d.ts",
       "import": "./dist/components/Toast/useToast.js"
     },
-    "./useScrollLock": {
-      "types": "./dist/hooks/useScrollLock.d.ts",
-      "import": "./dist/hooks/useScrollLock.js"
-    },
-    "./useClickOutside": {
-      "types": "./dist/hooks/useClickOutside.d.ts",
-      "import": "./dist/hooks/useClickOutside.js"
-    },
-    "./useEscapeKey": {
-      "types": "./dist/hooks/useEscapeKey.d.ts",
-      "import": "./dist/hooks/useEscapeKey.js"
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
     }
   },
   "files": [