@zag-js/toast 0.0.0-dev-20230220134212 → 0.0.0-dev-20230222120620

package/dist/{chunk-HRZITBY3.mjs → chunk-4WKKWZRA.mjs}

@@ -1,20 +1,17 @@
 import {
   parts
 } from "./chunk-GQHI2OMI.mjs";
-import {
-  runIfFn,
-  uuid
-} from "./chunk-LHAZKBRJ.mjs";
 import {
   getGroupPlacementStyle,
   getToastsByPlacement
-} from "./chunk-XQSCE3HI.mjs";
+} from "./chunk-DBPKSADW.mjs";
 import {
   dom
-} from "./chunk-AZ32UDL3.mjs";
+} from "./chunk-DUZD3NLM.mjs";
 
 // src/toast-group.connect.ts
 import { subscribe } from "@zag-js/core";
+import { runIfFn, uuid } from "@zag-js/utils";
 var toaster = {};
 function groupConnect(state, send, normalize) {
   const group = {

package/dist/{chunk-XQSCE3HI.mjs → chunk-DBPKSADW.mjs}

@@ -20,11 +20,11 @@ function getToastDuration(duration, type) {
 }
 function getGroupPlacementStyle(ctx, placement) {
   const offset = ctx.offsets;
-  const __offset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
+  const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
   const rtl = ctx.dir === "rtl";
-  const __placement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
-  const isRighty = __placement.includes("right");
-  const isLefty = __placement.includes("left");
+  const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
+  const isRighty = computedPlacement.includes("right");
+  const isLefty = computedPlacement.includes("left");
   const styles = {
     position: "fixed",
     pointerEvents: ctx.count > 0 ? void 0 : "none",
@@ -39,20 +39,20 @@ function getGroupPlacementStyle(ctx, placement) {
   if (isLefty)
     alignItems = "flex-start";
   styles.alignItems = alignItems;
-  if (__placement.includes("top")) {
-    const offset2 = __offset.top;
+  if (computedPlacement.includes("top")) {
+    const offset2 = computedOffset.top;
     styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
   }
-  if (__placement.includes("bottom")) {
-    const offset2 = __offset.bottom;
+  if (computedPlacement.includes("bottom")) {
+    const offset2 = computedOffset.bottom;
     styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
   }
-  if (!__placement.includes("left")) {
-    const offset2 = __offset.right;
+  if (!computedPlacement.includes("left")) {
+    const offset2 = computedOffset.right;
     styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
   }
-  if (!__placement.includes("right")) {
-    const offset2 = __offset.left;
+  if (!computedPlacement.includes("right")) {
+    const offset2 = computedOffset.left;
     styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
   }
   return styles;

package/dist/chunk-DUZD3NLM.mjs

@@ -0,0 +1,14 @@
+// src/toast.dom.ts
+import { createScope } from "@zag-js/dom-query";
+var dom = createScope({
+  getGroupId: (placement) => `toast-group:${placement}`,
+  getRootId: (ctx) => `toast:${ctx.id}`,
+  getTitleId: (ctx) => `toast:${ctx.id}:title`,
+  getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
+  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
+  getPortalId: (ctx) => `toast-portal:${ctx.id}`
+});
+
+export {
+  dom
+};

package/dist/{chunk-SSV22S55.mjs → chunk-EQTV3BNM.mjs}

@@ -1,51 +1,14 @@
-import {
-  cast,
-  runIfFn
-} from "./chunk-LHAZKBRJ.mjs";
 import {
   getToastDuration
-} from "./chunk-XQSCE3HI.mjs";
+} from "./chunk-DBPKSADW.mjs";
 import {
   dom
-} from "./chunk-AZ32UDL3.mjs";
+} from "./chunk-DUZD3NLM.mjs";
 
 // src/toast.machine.ts
 import { createMachine, guards } from "@zag-js/core";
-
-// ../../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/listener.ts
-var isRef = (v) => hasProp(v, "current");
-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);
-  };
-}
-
-// ../../utilities/dom/src/visibility-event.ts
-function trackDocumentVisibility(_doc, callback) {
-  const doc = cast(_doc);
-  return addDomEvent(doc, "visibilitychange", () => {
-    const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
-    callback(!!hidden);
-  });
-}
-
-// src/toast.machine.ts
+import { addDomEvent } from "@zag-js/dom-event";
+import { compact } from "@zag-js/utils";
 var { not, and, or } = guards;
 function createToastMachine(options = {}) {
   const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
@@ -136,8 +99,9 @@ function createToastMachine(options = {}) {
         trackDocumentVisibility(ctx2, _evt, { send }) {
           if (!ctx2.pauseOnPageIdle)
             return;
-          return trackDocumentVisibility(dom.getDoc(ctx2), function(hidden) {
-            send(hidden ? "PAUSE" : "RESUME");
+          const doc = dom.getDoc(ctx2);
+          return addDomEvent(doc, "visibilitychange", () => {
+            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
           });
         }
       },
@@ -184,6 +148,5 @@ function createToastMachine(options = {}) {
 }
 
 export {
-  compact,
   createToastMachine
 };

package/dist/{chunk-HDTOIF42.mjs → chunk-GMSHIBCW.mjs}

@@ -3,14 +3,10 @@ import {
 } from "./chunk-GQHI2OMI.mjs";
 import {
   dom
-} from "./chunk-AZ32UDL3.mjs";
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
+} from "./chunk-DUZD3NLM.mjs";
 
 // src/toast.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
 function connect(state, send, normalize) {
   const isVisible = state.hasTag("visible");
   const isPaused = state.hasTag("paused");

package/dist/{chunk-GKMHTDAP.mjs → chunk-TCF4OLIQ.mjs}

@@ -1,15 +1,11 @@
 import {
-  compact,
   createToastMachine
-} from "./chunk-SSV22S55.mjs";
+} from "./chunk-EQTV3BNM.mjs";
 
 // src/toast-group.machine.ts
 import { createMachine } from "@zag-js/core";
-
-// ../../utilities/dom/src/constants.ts
-var MAX_Z_INDEX = 2147483647;
-
-// src/toast-group.machine.ts
+import { MAX_Z_INDEX } from "@zag-js/dom-query";
+import { compact } from "@zag-js/utils";
 function groupMachine(userContext) {
   const ctx = compact(userContext);
   return createMachine({

package/dist/index.js

@@ -27,104 +27,12 @@ __export(src_exports, {
   group: () => group
 });
 module.exports = __toCommonJS(src_exports);
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../utilities/dom/src/constants.ts
-var MAX_Z_INDEX = 2147483647;
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var cast = (v) => v;
-var uuid = /* @__PURE__ */ (() => {
-  let id = 0;
-  return () => {
-    id++;
-    return id.toString(36);
-  };
-})();
-
-// ../../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/core/src/warning.ts
-function warn(...a) {
-  const m = a.length === 1 ? a[0] : a[1];
-  const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
-    console.warn(m);
-  }
-}
-
-// ../../utilities/dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
-
-// ../../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 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)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-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);
-  };
-}
-
-// ../../utilities/dom/src/visibility-event.ts
-function trackDocumentVisibility(_doc, callback) {
-  const doc = cast(_doc);
-  return addDomEvent(doc, "visibilitychange", () => {
-    const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
-    callback(!!hidden);
-  });
-}
+var import_dom_query4 = require("@zag-js/dom-query");
+var import_utils4 = require("@zag-js/utils");
 
 // src/toast-group.connect.ts
 var import_core = require("@zag-js/core");
+var import_utils = require("@zag-js/utils");
 
 // src/toast.anatomy.ts
 var import_anatomy = require("@zag-js/anatomy");
@@ -132,7 +40,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("group", "root",
 var parts = anatomy.build();
 
 // src/toast.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
   getGroupId: (placement) => `toast-group:${placement}`,
   getRootId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast:${ctx.id}:title`,
@@ -163,11 +72,11 @@ function getToastDuration(duration, type) {
 }
 function getGroupPlacementStyle(ctx, placement) {
   const offset = ctx.offsets;
-  const __offset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
+  const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
   const rtl = ctx.dir === "rtl";
-  const __placement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
-  const isRighty = __placement.includes("right");
-  const isLefty = __placement.includes("left");
+  const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
+  const isRighty = computedPlacement.includes("right");
+  const isLefty = computedPlacement.includes("left");
   const styles = {
     position: "fixed",
     pointerEvents: ctx.count > 0 ? void 0 : "none",
@@ -182,20 +91,20 @@ function getGroupPlacementStyle(ctx, placement) {
   if (isLefty)
     alignItems = "flex-start";
   styles.alignItems = alignItems;
-  if (__placement.includes("top")) {
-    const offset2 = __offset.top;
+  if (computedPlacement.includes("top")) {
+    const offset2 = computedOffset.top;
     styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
   }
-  if (__placement.includes("bottom")) {
-    const offset2 = __offset.bottom;
+  if (computedPlacement.includes("bottom")) {
+    const offset2 = computedOffset.bottom;
     styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
   }
-  if (!__placement.includes("left")) {
-    const offset2 = __offset.right;
+  if (!computedPlacement.includes("left")) {
+    const offset2 = computedOffset.right;
     styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
   }
-  if (!__placement.includes("right")) {
-    const offset2 = __offset.left;
+  if (!computedPlacement.includes("right")) {
+    const offset2 = computedOffset.left;
     styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
   }
   return styles;
@@ -214,7 +123,7 @@ function groupConnect(state, send, normalize) {
       return !!state.context.toasts.find((toast) => toast.id == id);
     },
     create(options) {
-      const uid = `toast:${uuid()}`;
+      const uid = `toast:${(0, import_utils.uuid)()}`;
       const id = options.id ? options.id : uid;
       if (group2.isVisible(id))
         return;
@@ -271,10 +180,10 @@ function groupConnect(state, send, normalize) {
     promise(promise, options, shared = {}) {
       const id = group2.loading({ ...shared, ...options.loading });
       promise.then((response) => {
-        const successOptions = runIfFn(options.success, response);
+        const successOptions = (0, import_utils.runIfFn)(options.success, response);
         group2.success({ ...shared, ...successOptions, id });
       }).catch((error) => {
-        const errorOptions = runIfFn(options.error, error);
+        const errorOptions = (0, import_utils.runIfFn)(options.error, error);
         group2.error({ ...shared, ...errorOptions, id });
       });
       return promise;
@@ -316,13 +225,17 @@ function groupConnect(state, send, normalize) {
 
 // src/toast-group.machine.ts
 var import_core3 = require("@zag-js/core");
+var import_dom_query2 = require("@zag-js/dom-query");
+var import_utils3 = require("@zag-js/utils");
 
 // src/toast.machine.ts
 var import_core2 = require("@zag-js/core");
+var import_dom_event = require("@zag-js/dom-event");
+var import_utils2 = require("@zag-js/utils");
 var { not, and, or } = import_core2.guards;
 function createToastMachine(options = {}) {
   const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
-  const ctx = compact(restProps);
+  const ctx = (0, import_utils2.compact)(restProps);
   const computedDuration = getToastDuration(duration, type);
   return (0, import_core2.createMachine)(
     {
@@ -409,8 +322,9 @@ function createToastMachine(options = {}) {
         trackDocumentVisibility(ctx2, _evt, { send }) {
           if (!ctx2.pauseOnPageIdle)
             return;
-          return trackDocumentVisibility(dom.getDoc(ctx2), function(hidden) {
-            send(hidden ? "PAUSE" : "RESUME");
+          const doc = dom.getDoc(ctx2);
+          return (0, import_dom_event.addDomEvent)(doc, "visibilitychange", () => {
+            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
           });
         }
       },
@@ -458,7 +372,7 @@ function createToastMachine(options = {}) {
 
 // src/toast-group.machine.ts
 function groupMachine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils3.compact)(userContext);
   return (0, import_core3.createMachine)({
     id: "toaster",
     initial: "active",
@@ -467,7 +381,7 @@ function groupMachine(userContext) {
       max: Number.MAX_SAFE_INTEGER,
       toasts: [],
       gutter: "1rem",
-      zIndex: MAX_Z_INDEX,
+      zIndex: import_dom_query2.MAX_Z_INDEX,
       pauseOnPageIdle: false,
       pauseOnInteraction: true,
       offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
@@ -547,6 +461,7 @@ function groupMachine(userContext) {
 }
 
 // src/toast.connect.ts
+var import_dom_query3 = require("@zag-js/dom-query");
 function connect(state, send, normalize) {
   const isVisible = state.hasTag("visible");
   const isPaused = state.hasTag("paused");
@@ -573,7 +488,7 @@ function connect(state, send, normalize) {
       ...parts.root.attrs,
       dir: state.context.dir,
       id: dom.getRootId(state.context),
-      "data-open": dataAttr(isVisible),
+      "data-open": (0, import_dom_query3.dataAttr)(isVisible),
       "data-type": state.context.type,
       "data-placement": placement,
       role: "status",
@@ -652,8 +567,8 @@ var group = {
   machine: groupMachine
 };
 function api() {
-  if (!isDom()) {
-    warn("toast.api() is only available in the browser");
+  if (!(0, import_dom_query4.isDom)()) {
+    (0, import_utils4.warn)("toast.api() is only available in the browser");
   } else {
     return toaster;
   }

package/dist/index.mjs

@@ -1,36 +1,25 @@
 import {
   groupConnect,
   toaster
-} from "./chunk-HRZITBY3.mjs";
+} from "./chunk-4WKKWZRA.mjs";
 import {
   groupMachine
-} from "./chunk-GKMHTDAP.mjs";
+} from "./chunk-TCF4OLIQ.mjs";
 import {
   connect
-} from "./chunk-HDTOIF42.mjs";
+} from "./chunk-GMSHIBCW.mjs";
 import {
   anatomy
 } from "./chunk-GQHI2OMI.mjs";
 import {
   createToastMachine
-} from "./chunk-SSV22S55.mjs";
-import "./chunk-LHAZKBRJ.mjs";
-import "./chunk-XQSCE3HI.mjs";
-import "./chunk-AZ32UDL3.mjs";
-
-// ../../utilities/core/src/warning.ts
-function warn(...a) {
-  const m = a.length === 1 ? a[0] : a[1];
-  const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
-    console.warn(m);
-  }
-}
-
-// ../../utilities/dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
+} from "./chunk-EQTV3BNM.mjs";
+import "./chunk-DBPKSADW.mjs";
+import "./chunk-DUZD3NLM.mjs";
 
 // src/index.ts
+import { isDom } from "@zag-js/dom-query";
+import { warn } from "@zag-js/utils";
 var group = {
   connect: groupConnect,
   machine: groupMachine

package/dist/toast-group.connect.js

@@ -25,55 +25,16 @@ __export(toast_group_connect_exports, {
 });
 module.exports = __toCommonJS(toast_group_connect_exports);
 var import_core = require("@zag-js/core");
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var uuid = /* @__PURE__ */ (() => {
-  let id = 0;
-  return () => {
-    id++;
-    return id.toString(36);
-  };
-})();
+var import_utils = require("@zag-js/utils");
 
 // src/toast.anatomy.ts
 var import_anatomy = require("@zag-js/anatomy");
 var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("group", "root", "title", "description", "closeTrigger");
 var parts = anatomy.build();
 
-// ../../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 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)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
 // src/toast.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
   getGroupId: (placement) => `toast-group:${placement}`,
   getRootId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast:${ctx.id}:title`,
@@ -94,11 +55,11 @@ function getToastsByPlacement(toasts) {
 }
 function getGroupPlacementStyle(ctx, placement) {
   const offset = ctx.offsets;
-  const __offset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
+  const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
   const rtl = ctx.dir === "rtl";
-  const __placement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
-  const isRighty = __placement.includes("right");
-  const isLefty = __placement.includes("left");
+  const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
+  const isRighty = computedPlacement.includes("right");
+  const isLefty = computedPlacement.includes("left");
   const styles = {
     position: "fixed",
     pointerEvents: ctx.count > 0 ? void 0 : "none",
@@ -113,20 +74,20 @@ function getGroupPlacementStyle(ctx, placement) {
   if (isLefty)
     alignItems = "flex-start";
   styles.alignItems = alignItems;
-  if (__placement.includes("top")) {
-    const offset2 = __offset.top;
+  if (computedPlacement.includes("top")) {
+    const offset2 = computedOffset.top;
     styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
   }
-  if (__placement.includes("bottom")) {
-    const offset2 = __offset.bottom;
+  if (computedPlacement.includes("bottom")) {
+    const offset2 = computedOffset.bottom;
     styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
   }
-  if (!__placement.includes("left")) {
-    const offset2 = __offset.right;
+  if (!computedPlacement.includes("left")) {
+    const offset2 = computedOffset.right;
     styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
   }
-  if (!__placement.includes("right")) {
-    const offset2 = __offset.left;
+  if (!computedPlacement.includes("right")) {
+    const offset2 = computedOffset.left;
     styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
   }
   return styles;
@@ -145,7 +106,7 @@ function groupConnect(state, send, normalize) {
       return !!state.context.toasts.find((toast) => toast.id == id);
     },
     create(options) {
-      const uid = `toast:${uuid()}`;
+      const uid = `toast:${(0, import_utils.uuid)()}`;
       const id = options.id ? options.id : uid;
       if (group.isVisible(id))
         return;
@@ -202,10 +163,10 @@ function groupConnect(state, send, normalize) {
     promise(promise, options, shared = {}) {
       const id = group.loading({ ...shared, ...options.loading });
       promise.then((response) => {
-        const successOptions = runIfFn(options.success, response);
+        const successOptions = (0, import_utils.runIfFn)(options.success, response);
         group.success({ ...shared, ...successOptions, id });
       }).catch((error) => {
-        const errorOptions = runIfFn(options.error, error);
+        const errorOptions = (0, import_utils.runIfFn)(options.error, error);
         group.error({ ...shared, ...errorOptions, id });
       });
       return promise;

package/dist/toast-group.connect.mjs

@@ -1,11 +1,10 @@
 import {
   groupConnect,
   toaster
-} from "./chunk-HRZITBY3.mjs";
+} from "./chunk-4WKKWZRA.mjs";
 import "./chunk-GQHI2OMI.mjs";
-import "./chunk-LHAZKBRJ.mjs";
-import "./chunk-XQSCE3HI.mjs";
-import "./chunk-AZ32UDL3.mjs";
+import "./chunk-DBPKSADW.mjs";
+import "./chunk-DUZD3NLM.mjs";
 export {
   groupConnect,
   toaster

package/dist/toast-group.machine.js

@@ -24,83 +24,17 @@ __export(toast_group_machine_exports, {
 });
 module.exports = __toCommonJS(toast_group_machine_exports);
 var import_core2 = require("@zag-js/core");
-
-// ../../utilities/dom/src/constants.ts
-var MAX_Z_INDEX = 2147483647;
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var cast = (v) => v;
-
-// ../../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/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 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)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-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);
-  };
-}
-
-// ../../utilities/dom/src/visibility-event.ts
-function trackDocumentVisibility(_doc, callback) {
-  const doc = cast(_doc);
-  return addDomEvent(doc, "visibilitychange", () => {
-    const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
-    callback(!!hidden);
-  });
-}
+var import_dom_query2 = require("@zag-js/dom-query");
+var import_utils2 = require("@zag-js/utils");
 
 // src/toast.machine.ts
 var import_core = require("@zag-js/core");
+var import_dom_event = require("@zag-js/dom-event");
+var import_utils = require("@zag-js/utils");
 
 // src/toast.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
   getGroupId: (placement) => `toast-group:${placement}`,
   getRootId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast:${ctx.id}:title`,
@@ -125,7 +59,7 @@ function getToastDuration(duration, type) {
 var { not, and, or } = import_core.guards;
 function createToastMachine(options = {}) {
   const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
-  const ctx = compact(restProps);
+  const ctx = (0, import_utils.compact)(restProps);
   const computedDuration = getToastDuration(duration, type);
   return (0, import_core.createMachine)(
     {
@@ -212,8 +146,9 @@ function createToastMachine(options = {}) {
         trackDocumentVisibility(ctx2, _evt, { send }) {
           if (!ctx2.pauseOnPageIdle)
             return;
-          return trackDocumentVisibility(dom.getDoc(ctx2), function(hidden) {
-            send(hidden ? "PAUSE" : "RESUME");
+          const doc = dom.getDoc(ctx2);
+          return (0, import_dom_event.addDomEvent)(doc, "visibilitychange", () => {
+            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
           });
         }
       },
@@ -261,7 +196,7 @@ function createToastMachine(options = {}) {
 
 // src/toast-group.machine.ts
 function groupMachine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils2.compact)(userContext);
   return (0, import_core2.createMachine)({
     id: "toaster",
     initial: "active",
@@ -270,7 +205,7 @@ function groupMachine(userContext) {
       max: Number.MAX_SAFE_INTEGER,
       toasts: [],
       gutter: "1rem",
-      zIndex: MAX_Z_INDEX,
+      zIndex: import_dom_query2.MAX_Z_INDEX,
       pauseOnPageIdle: false,
       pauseOnInteraction: true,
       offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },

package/dist/toast-group.machine.mjs

@@ -1,10 +1,9 @@
 import {
   groupMachine
-} from "./chunk-GKMHTDAP.mjs";
-import "./chunk-SSV22S55.mjs";
-import "./chunk-LHAZKBRJ.mjs";
-import "./chunk-XQSCE3HI.mjs";
-import "./chunk-AZ32UDL3.mjs";
+} from "./chunk-TCF4OLIQ.mjs";
+import "./chunk-EQTV3BNM.mjs";
+import "./chunk-DBPKSADW.mjs";
+import "./chunk-DUZD3NLM.mjs";
 export {
   groupMachine
 };

package/dist/toast.anatomy.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "closeTrigger">;
-declare const parts: Record<"group" | "title" | "root" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "group" | "root" | "description" | "closeTrigger">;
+declare const parts: Record<"title" | "group" | "root" | "description" | "closeTrigger", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/toast.connect.js

@@ -23,39 +23,7 @@ __export(toast_connect_exports, {
   connect: () => connect
 });
 module.exports = __toCommonJS(toast_connect_exports);
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../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 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)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
+var import_dom_query2 = require("@zag-js/dom-query");
 
 // src/toast.anatomy.ts
 var import_anatomy = require("@zag-js/anatomy");
@@ -63,7 +31,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("group", "root",
 var parts = anatomy.build();
 
 // src/toast.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
   getGroupId: (placement) => `toast-group:${placement}`,
   getRootId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast:${ctx.id}:title`,
@@ -99,7 +68,7 @@ function connect(state, send, normalize) {
       ...parts.root.attrs,
       dir: state.context.dir,
       id: dom.getRootId(state.context),
-      "data-open": dataAttr(isVisible),
+      "data-open": (0, import_dom_query2.dataAttr)(isVisible),
       "data-type": state.context.type,
       "data-placement": placement,
       role: "status",

package/dist/toast.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-HDTOIF42.mjs";
+} from "./chunk-GMSHIBCW.mjs";
 import "./chunk-GQHI2OMI.mjs";
-import "./chunk-AZ32UDL3.mjs";
+import "./chunk-DUZD3NLM.mjs";
 export {
   connect
 };

package/dist/toast.dom.d.ts

@@ -15,9 +15,12 @@ declare const dom: {
     getActiveElement: (ctx: {
         getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
     }) => HTMLElement | null;
-    getById: <T = HTMLElement>(ctx: {
+    getById: <T extends HTMLElement = HTMLElement>(ctx: {
         getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
     }, id: string) => T | null;
+    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, id: string) => T_1;
 } & {
     getGroupId: (placement: Placement) => string;
     getRootId: (ctx: MachineContext) => string;

package/dist/toast.dom.js

@@ -23,37 +23,8 @@ __export(toast_dom_exports, {
   dom: () => dom
 });
 module.exports = __toCommonJS(toast_dom_exports);
-
-// ../../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 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)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// src/toast.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
   getGroupId: (placement) => `toast-group:${placement}`,
   getRootId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast:${ctx.id}:title`,

package/dist/toast.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-AZ32UDL3.mjs";
+} from "./chunk-DUZD3NLM.mjs";
 export {
   dom
 };

package/dist/toast.machine.js

@@ -24,77 +24,12 @@ __export(toast_machine_exports, {
 });
 module.exports = __toCommonJS(toast_machine_exports);
 var import_core = require("@zag-js/core");
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var cast = (v) => v;
-
-// ../../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/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 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)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-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);
-  };
-}
-
-// ../../utilities/dom/src/visibility-event.ts
-function trackDocumentVisibility(_doc, callback) {
-  const doc = cast(_doc);
-  return addDomEvent(doc, "visibilitychange", () => {
-    const hidden = doc.hidden || doc.msHidden || doc.webkitHidden;
-    callback(!!hidden);
-  });
-}
+var import_dom_event = require("@zag-js/dom-event");
+var import_utils = require("@zag-js/utils");
 
 // src/toast.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var dom = (0, import_dom_query.createScope)({
   getGroupId: (placement) => `toast-group:${placement}`,
   getRootId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast:${ctx.id}:title`,
@@ -119,7 +54,7 @@ function getToastDuration(duration, type) {
 var { not, and, or } = import_core.guards;
 function createToastMachine(options = {}) {
   const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
-  const ctx = compact(restProps);
+  const ctx = (0, import_utils.compact)(restProps);
   const computedDuration = getToastDuration(duration, type);
   return (0, import_core.createMachine)(
     {
@@ -206,8 +141,9 @@ function createToastMachine(options = {}) {
         trackDocumentVisibility(ctx2, _evt, { send }) {
           if (!ctx2.pauseOnPageIdle)
             return;
-          return trackDocumentVisibility(dom.getDoc(ctx2), function(hidden) {
-            send(hidden ? "PAUSE" : "RESUME");
+          const doc = dom.getDoc(ctx2);
+          return (0, import_dom_event.addDomEvent)(doc, "visibilitychange", () => {
+            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
           });
         }
       },

package/dist/toast.machine.mjs

@@ -1,9 +1,8 @@
 import {
   createToastMachine
-} from "./chunk-SSV22S55.mjs";
-import "./chunk-LHAZKBRJ.mjs";
-import "./chunk-XQSCE3HI.mjs";
-import "./chunk-AZ32UDL3.mjs";
+} from "./chunk-EQTV3BNM.mjs";
+import "./chunk-DBPKSADW.mjs";
+import "./chunk-DUZD3NLM.mjs";
 export {
   createToastMachine
 };

package/dist/toast.utils.js

@@ -47,11 +47,11 @@ function getToastDuration(duration, type) {
 }
 function getGroupPlacementStyle(ctx, placement) {
   const offset = ctx.offsets;
-  const __offset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
+  const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
   const rtl = ctx.dir === "rtl";
-  const __placement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
-  const isRighty = __placement.includes("right");
-  const isLefty = __placement.includes("left");
+  const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
+  const isRighty = computedPlacement.includes("right");
+  const isLefty = computedPlacement.includes("left");
   const styles = {
     position: "fixed",
     pointerEvents: ctx.count > 0 ? void 0 : "none",
@@ -66,20 +66,20 @@ function getGroupPlacementStyle(ctx, placement) {
   if (isLefty)
     alignItems = "flex-start";
   styles.alignItems = alignItems;
-  if (__placement.includes("top")) {
-    const offset2 = __offset.top;
+  if (computedPlacement.includes("top")) {
+    const offset2 = computedOffset.top;
     styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
   }
-  if (__placement.includes("bottom")) {
-    const offset2 = __offset.bottom;
+  if (computedPlacement.includes("bottom")) {
+    const offset2 = computedOffset.bottom;
     styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
   }
-  if (!__placement.includes("left")) {
-    const offset2 = __offset.right;
+  if (!computedPlacement.includes("left")) {
+    const offset2 = computedOffset.right;
     styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
   }
-  if (!__placement.includes("right")) {
-    const offset2 = __offset.left;
+  if (!computedPlacement.includes("right")) {
+    const offset2 = computedOffset.left;
     styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
   }
   return styles;

package/dist/toast.utils.mjs

@@ -3,7 +3,7 @@ import {
   getGroupPlacementStyle,
   getToastDuration,
   getToastsByPlacement
-} from "./chunk-XQSCE3HI.mjs";
+} from "./chunk-DBPKSADW.mjs";
 export {
   defaultTimeouts,
   getGroupPlacementStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "0.0.0-dev-20230220134212",
+  "version": "0.0.0-dev-20230222120620",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,13 +27,14 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.4",
-    "@zag-js/core": "0.0.0-dev-20230220134212",
+    "@zag-js/core": "0.0.0-dev-20230222120620",
+    "@zag-js/dom-query": "0.0.0-dev-20230222120620",
+    "@zag-js/dom-event": "0.0.0-dev-20230222120620",
+    "@zag-js/utils": "0.3.3",
     "@zag-js/types": "0.3.4"
   },
   "devDependencies": {
-    "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.4",
-    "@zag-js/utils": "0.3.3"
+    "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",

package/dist/chunk-AZ32UDL3.mjs

@@ -1,41 +0,0 @@
-// ../../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 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)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// src/toast.dom.ts
-var dom = defineDomHelpers({
-  getGroupId: (placement) => `toast-group:${placement}`,
-  getRootId: (ctx) => `toast:${ctx.id}`,
-  getTitleId: (ctx) => `toast:${ctx.id}:title`,
-  getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
-  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
-  getPortalId: (ctx) => `toast-portal:${ctx.id}`
-});
-
-export {
-  dom
-};

package/dist/chunk-LHAZKBRJ.mjs

@@ -1,19 +0,0 @@
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var cast = (v) => v;
-var uuid = /* @__PURE__ */ (() => {
-  let id = 0;
-  return () => {
-    id++;
-    return id.toString(36);
-  };
-})();
-
-export {
-  runIfFn,
-  cast,
-  uuid
-};