@zag-js/tooltip 0.0.0-dev-20230221113221 → 0.0.0-dev-20230222181847

package/dist/chunk-3LXHM7BW.mjs

@@ -0,0 +1,17 @@
+// src/tooltip.dom.ts
+import { createScope, getScrollParent } from "@zag-js/dom-query";
+var dom = createScope({
+  getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
+  getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
+  getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
+  getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
+  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
+  getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
+});
+
+export {
+  dom
+};

package/dist/{chunk-YCQQKYLH.mjs → chunk-463EFHFN.mjs}

@@ -1,131 +1,16 @@
 import {
-  dom,
-  getScrollParents,
-  isHTMLElement
-} from "./chunk-DYQY5P2O.mjs";
+  dom
+} from "./chunk-3LXHM7BW.mjs";
 import {
   store
 } from "./chunk-GQYNO326.mjs";
 
 // src/tooltip.machine.ts
 import { createMachine, subscribe } from "@zag-js/core";
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-
-// ../../utilities/core/src/guard.ts
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../../utilities/core/src/object.ts
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
-  );
-}
-
-// ../../utilities/dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var vn = (v) => isDom() && v.test(navigator.vendor);
-var isSafari = () => isApple() && vn(/apple/i);
-var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-
-// ../../utilities/dom/src/event.ts
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
-var supportsMouseEvent = () => isDom() && window.onmousedown === null;
-var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function extractInfo(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
-  return {
-    point: {
-      x: point[`${type}X`],
-      y: point[`${type}Y`]
-    }
-  };
-}
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-function addPointerEvent(target, event, listener, options) {
-  const type = getEventName(event) ?? event;
-  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
-}
-function wrapHandler(fn, filter = false) {
-  const listener = (event) => {
-    fn(event, extractInfo(event));
-  };
-  return filter ? filterPrimaryPointer(listener) : listener;
-}
-function filterPrimaryPointer(fn) {
-  return (event) => {
-    const win = event.view ?? window;
-    const isMouseEvent = event instanceof win.MouseEvent;
-    const isPrimary = !isMouseEvent || isMouseEvent && event.button === 0;
-    if (isPrimary)
-      fn(event);
-  };
-}
-var mouseEventNames = {
-  pointerdown: "mousedown",
-  pointermove: "mousemove",
-  pointerup: "mouseup",
-  pointercancel: "mousecancel",
-  pointerover: "mouseover",
-  pointerout: "mouseout",
-  pointerenter: "mouseenter",
-  pointerleave: "mouseleave"
-};
-var touchEventNames = {
-  pointerdown: "touchstart",
-  pointermove: "touchmove",
-  pointerup: "touchend",
-  pointercancel: "touchcancel"
-};
-function getEventName(evt) {
-  if (supportsPointerEvent())
-    return evt;
-  if (supportsTouchEvent())
-    return touchEventNames[evt];
-  if (supportsMouseEvent())
-    return mouseEventNames[evt];
-  return evt;
-}
-
-// ../../utilities/dom/src/next-tick.ts
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-
-// ../../utilities/dom/src/pointerlock.ts
-function addPointerlockChangeListener(doc, fn) {
-  return addDomEvent(doc, "pointerlockchange", fn, false);
-}
-
-// src/tooltip.machine.ts
+import { addDomEvent } from "@zag-js/dom-event";
+import { getScrollParents, isHTMLElement, isSafari, raf } from "@zag-js/dom-query";
 import { getPlacement } from "@zag-js/popper";
+import { compact } from "@zag-js/utils";
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
@@ -258,9 +143,8 @@ function machine(userContext) {
           return cleanup;
         },
         trackPointerlockChange(ctx2, _evt, { send }) {
-          return addPointerlockChangeListener(dom.getDoc(ctx2), () => {
-            send("POINTER_LOCK_CHANGE");
-          });
+          const onChange = () => send("POINTER_LOCK_CHANGE");
+          return addDomEvent(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
         },
         trackScroll(ctx2, _evt, { send }) {
           const trigger = dom.getTriggerEl(ctx2);
@@ -285,7 +169,7 @@ function machine(userContext) {
           if (!isSafari())
             return;
           const doc = dom.getDoc(ctx2);
-          return addPointerEvent(doc, "pointermove", (event) => {
+          return addDomEvent(doc, "pointermove", (event) => {
             const selector = "[data-part=trigger][data-expanded]";
             if (isHTMLElement(event.target) && event.target.closest(selector))
               return;

package/dist/{chunk-VTDFWXSY.mjs → chunk-W3OSVXCZ.mjs}

@@ -3,32 +3,15 @@ import {
 } from "./chunk-RRQRIZBA.mjs";
 import {
   dom
-} from "./chunk-DYQY5P2O.mjs";
+} from "./chunk-3LXHM7BW.mjs";
 import {
   store
 } from "./chunk-GQYNO326.mjs";
 
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../utilities/dom/src/visually-hidden.ts
-var visuallyHiddenStyle = {
-  border: "0",
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: "0",
-  position: "absolute",
-  width: "1px",
-  whiteSpace: "nowrap",
-  wordWrap: "normal"
-};
-
 // src/tooltip.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
 import { getPlacementStyles } from "@zag-js/popper";
+import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
 function connect(state, send, normalize) {
   const id = state.context.id;
   const hasAriaLabel = state.context.hasAriaLabel;
@@ -41,13 +24,25 @@ function connect(state, send, normalize) {
     placement: state.context.currentPlacement
   });
   return {
+    /**
+     * Whether the tooltip is open.
+     */
     isOpen,
+    /**
+     * Function to open the tooltip.
+     */
     open() {
       send("OPEN");
     },
+    /**
+     * Function to close the tooltip.
+     */
     close() {
       send("CLOSE");
     },
+    /**
+     * Returns the animation state of the tooltip.
+     */
     getAnimationState() {
       return {
         enter: store.prevId === null && id === store.id,

package/dist/index.js

@@ -31,237 +31,14 @@ var import_anatomy = require("@zag-js/anatomy");
 var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
 var parts = anatomy.build();
 
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../utilities/dom/src/get-computed-style.ts
-function getCache() {
-  const g = globalThis;
-  g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
-  return g.__styleCache;
-}
-function getComputedStyle(el) {
-  if (!el)
-    return {};
-  const cache = getCache();
-  let style = cache.get(el);
-  if (!style) {
-    const win = el?.ownerDocument.defaultView ?? window;
-    style = win.getComputedStyle(el);
-    cache.set(el, style);
-  }
-  return style;
-}
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-
-// ../../utilities/core/src/guard.ts
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../../utilities/core/src/object.ts
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
-  );
-}
-
-// ../../utilities/dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var vn = (v) => isDom() && v.test(navigator.vendor);
-var isSafari = () => isApple() && vn(/apple/i);
-var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-
-// ../../utilities/dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function getNodeName(node) {
-  return isWindow(node) ? "" : node?.localName ?? "";
-}
-function getParent(el) {
-  const doc = getDocument(el);
-  if (getNodeName(el) === "html")
-    return el;
-  return el.assignedSlot || el.parentElement || doc.documentElement;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    queryById: (ctx, id) => {
-      const el = dom2.getById(ctx, id);
-      if (!el)
-        throw new Error(`Element with id "${id}" not found.`);
-      return el;
-    }
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-function isHTMLElement(v) {
-  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
-}
-
-// ../../utilities/dom/src/event.ts
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
-var supportsMouseEvent = () => isDom() && window.onmousedown === null;
-var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function extractInfo(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
-  return {
-    point: {
-      x: point[`${type}X`],
-      y: point[`${type}Y`]
-    }
-  };
-}
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-function addPointerEvent(target, event, listener, options) {
-  const type = getEventName(event) ?? event;
-  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
-}
-function wrapHandler(fn, filter = false) {
-  const listener = (event) => {
-    fn(event, extractInfo(event));
-  };
-  return filter ? filterPrimaryPointer(listener) : listener;
-}
-function filterPrimaryPointer(fn) {
-  return (event) => {
-    const win = event.view ?? window;
-    const isMouseEvent = event instanceof win.MouseEvent;
-    const isPrimary = !isMouseEvent || isMouseEvent && event.button === 0;
-    if (isPrimary)
-      fn(event);
-  };
-}
-var mouseEventNames = {
-  pointerdown: "mousedown",
-  pointermove: "mousemove",
-  pointerup: "mouseup",
-  pointercancel: "mousecancel",
-  pointerover: "mouseover",
-  pointerout: "mouseout",
-  pointerenter: "mouseenter",
-  pointerleave: "mouseleave"
-};
-var touchEventNames = {
-  pointerdown: "touchstart",
-  pointermove: "touchmove",
-  pointerup: "touchend",
-  pointercancel: "touchcancel"
-};
-function getEventName(evt) {
-  if (supportsPointerEvent())
-    return evt;
-  if (supportsTouchEvent())
-    return touchEventNames[evt];
-  if (supportsMouseEvent())
-    return mouseEventNames[evt];
-  return evt;
-}
-
-// ../../utilities/dom/src/next-tick.ts
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-
-// ../../utilities/dom/src/pointerlock.ts
-function addPointerlockChangeListener(doc, fn) {
-  return addDomEvent(doc, "pointerlockchange", fn, false);
-}
-
-// ../../utilities/dom/src/scrollable.ts
-function isScrollParent(el) {
-  const { overflow, overflowX, overflowY } = getComputedStyle(el);
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
-}
-function getScrollParent(el) {
-  if (["html", "body", "#document"].includes(getNodeName(el))) {
-    return getDocument(el).body;
-  }
-  if (isHTMLElement(el) && isScrollParent(el)) {
-    return el;
-  }
-  return getScrollParent(getParent(el));
-}
-function getScrollParents(el, list = []) {
-  const scrollParent = getScrollParent(el);
-  const isBody = scrollParent === getDocument(el).body;
-  const win = getWindow(scrollParent);
-  const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
-  const parents = list.concat(target);
-  if (isBody)
-    return parents;
-  return parents.concat(getScrollParents(getParent(target)));
-}
-
-// ../../utilities/dom/src/visually-hidden.ts
-var visuallyHiddenStyle = {
-  border: "0",
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: "0",
-  position: "absolute",
-  width: "1px",
-  whiteSpace: "nowrap",
-  wordWrap: "normal"
-};
-
 // src/tooltip.connect.ts
+var import_dom_query2 = require("@zag-js/dom-query");
 var import_popper = require("@zag-js/popper");
+var import_visually_hidden = require("@zag-js/visually-hidden");
 
 // src/tooltip.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
   getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
   getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
@@ -270,7 +47,7 @@ var dom = defineDomHelpers({
   getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
   getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
-  getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
+  getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
 });
 
 // src/tooltip.store.ts
@@ -297,13 +74,25 @@ function connect(state, send, normalize) {
     placement: state.context.currentPlacement
   });
   return {
+    /**
+     * Whether the tooltip is open.
+     */
     isOpen,
+    /**
+     * Function to open the tooltip.
+     */
     open() {
       send("OPEN");
     },
+    /**
+     * Function to close the tooltip.
+     */
     close() {
       send("CLOSE");
     },
+    /**
+     * Returns the animation state of the tooltip.
+     */
     getAnimationState() {
       return {
         enter: store.prevId === null && id === store.id,
@@ -313,7 +102,7 @@ function connect(state, send, normalize) {
     triggerProps: normalize.button({
       ...parts.trigger.attrs,
       id: triggerId,
-      "data-expanded": dataAttr(isOpen),
+      "data-expanded": (0, import_dom_query2.dataAttr)(isOpen),
       "aria-describedby": isOpen ? contentId : void 0,
       onClick() {
         send("CLICK");
@@ -383,7 +172,7 @@ function connect(state, send, normalize) {
       ...parts.label.attrs,
       id: contentId,
       role: "tooltip",
-      style: visuallyHiddenStyle,
+      style: import_visually_hidden.visuallyHiddenStyle,
       children: state.context["aria-label"]
     })
   };
@@ -391,9 +180,12 @@ function connect(state, send, normalize) {
 
 // src/tooltip.machine.ts
 var import_core2 = require("@zag-js/core");
+var import_dom_event = require("@zag-js/dom-event");
+var import_dom_query3 = require("@zag-js/dom-query");
 var import_popper2 = require("@zag-js/popper");
+var import_utils = require("@zag-js/utils");
 function machine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils.compact)(userContext);
   return (0, import_core2.createMachine)(
     {
       id: "tooltip",
@@ -508,7 +300,7 @@ function machine(userContext) {
         computePlacement(ctx2) {
           ctx2.currentPlacement = ctx2.positioning.placement;
           let cleanup;
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             cleanup = (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
               ...ctx2.positioning,
               onComplete(data) {
@@ -524,17 +316,16 @@ function machine(userContext) {
           return cleanup;
         },
         trackPointerlockChange(ctx2, _evt, { send }) {
-          return addPointerlockChangeListener(dom.getDoc(ctx2), () => {
-            send("POINTER_LOCK_CHANGE");
-          });
+          const onChange = () => send("POINTER_LOCK_CHANGE");
+          return (0, import_dom_event.addDomEvent)(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
         },
         trackScroll(ctx2, _evt, { send }) {
           const trigger = dom.getTriggerEl(ctx2);
           if (!trigger)
             return;
-          const cleanups = getScrollParents(trigger).map((el) => {
+          const cleanups = (0, import_dom_query3.getScrollParents)(trigger).map((el) => {
             const opts = { passive: true, capture: true };
-            return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
+            return (0, import_dom_event.addDomEvent)(el, "scroll", () => send("SCROLL"), opts);
           });
           return () => {
             cleanups.forEach((fn) => fn?.());
@@ -548,12 +339,12 @@ function machine(userContext) {
           });
         },
         trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
-          if (!isSafari())
+          if (!(0, import_dom_query3.isSafari)())
             return;
           const doc = dom.getDoc(ctx2);
-          return addPointerEvent(doc, "pointermove", (event) => {
+          return (0, import_dom_event.addDomEvent)(doc, "pointermove", (event) => {
             const selector = "[data-part=trigger][data-expanded]";
-            if (isHTMLElement(event.target) && event.target.closest(selector))
+            if ((0, import_dom_query3.isHTMLElement)(event.target) && event.target.closest(selector))
               return;
             send("POINTER_LEAVE");
           });
@@ -562,7 +353,7 @@ function machine(userContext) {
           if (!ctx2.closeOnEsc)
             return;
           const doc = dom.getDoc(ctx2);
-          return addDomEvent(doc, "keydown", (event) => {
+          return (0, import_dom_event.addDomEvent)(doc, "keydown", (event) => {
             if (event.key === "Escape") {
               send("ESCAPE");
             }

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-VTDFWXSY.mjs";
+} from "./chunk-W3OSVXCZ.mjs";
 import {
   anatomy
 } from "./chunk-RRQRIZBA.mjs";
 import {
   machine
-} from "./chunk-YCQQKYLH.mjs";
-import "./chunk-DYQY5P2O.mjs";
+} from "./chunk-463EFHFN.mjs";
+import "./chunk-3LXHM7BW.mjs";
 import "./chunk-GQYNO326.mjs";
 export {
   anatomy,

package/dist/tooltip.connect.d.ts

@@ -4,9 +4,21 @@ import '@zag-js/core';
 import '@zag-js/popper';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the tooltip is open.
+     */
     isOpen: boolean;
+    /**
+     * Function to open the tooltip.
+     */
     open(): void;
+    /**
+     * Function to close the tooltip.
+     */
     close(): void;
+    /**
+     * Returns the animation state of the tooltip.
+     */
     getAnimationState(): {
         enter: boolean;
         exit: boolean;