motile-ui 1.0.3 → 1.1.0

package/dist/components/Tooltip/Tooltip.js

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

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.3",
+  "version": "1.1.0",
   "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": [