@zag-js/toast 0.2.12 → 0.2.14

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;
@@ -136,22 +97,40 @@ function getGroupPlacementStyle(ctx, placement) {
 var toaster = {};
 function groupConnect(state, send, normalize) {
   const group = {
+    /**
+     * The total number of toasts
+     */
     count: state.context.count,
+    /**
+     * The active toasts
+     */
     toasts: state.context.toasts,
+    /**
+     * The active toasts by placement
+     */
     toastsByPlacement: getToastsByPlacement(state.context.toasts),
+    /**
+     * Returns whether the toast id is visible
+     */
     isVisible(id) {
       if (!state.context.toasts.length)
         return false;
       return !!state.context.toasts.find((toast) => toast.id == id);
     },
+    /**
+     * Function to create a toast.
+     */
     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;
       send({ type: "ADD_TOAST", toast: { ...options, id } });
       return id;
     },
+    /**
+     * Function to create or update a toast.
+     */
     upsert(options) {
       const { id } = options;
       const isVisible = id ? group.isVisible(id) : false;
@@ -161,6 +140,10 @@ function groupConnect(state, send, normalize) {
         return group.create(options);
       }
     },
+    /**
+     * Function to dismiss a toast by id.
+     * If no id is provided, all toasts will be dismissed.
+     */
     dismiss(id) {
       if (id == null) {
         send("DISMISS_ALL");
@@ -168,6 +151,10 @@ function groupConnect(state, send, normalize) {
         send({ type: "DISMISS_TOAST", id });
       }
     },
+    /**
+     * Function to remove a toast by id.
+     * If no id is provided, all toasts will be removed.
+     */
     remove(id) {
       if (id == null) {
         send("REMOVE_ALL");
@@ -175,41 +162,64 @@ function groupConnect(state, send, normalize) {
         send({ type: "REMOVE_TOAST", id });
       }
     },
+    /**
+     * Function to dismiss all toasts by placement.
+     */
     dismissByPlacement(placement) {
       const toasts = group.toastsByPlacement[placement];
       if (toasts) {
         toasts.forEach((toast) => group.dismiss(toast.id));
       }
     },
+    /**
+     * Function to update a toast's options by id.
+     */
     update(id, options) {
       if (!group.isVisible(id))
         return;
       send({ type: "UPDATE_TOAST", id, toast: options });
       return id;
     },
+    /**
+     * Function to create a loading toast.
+     */
     loading(options) {
       options.type = "loading";
       return group.upsert(options);
     },
+    /**
+     * Function to create a success toast.
+     */
     success(options) {
       options.type = "success";
       return group.upsert(options);
     },
+    /**
+     * Function to create an error toast.
+     */
     error(options) {
       options.type = "error";
       return group.upsert(options);
     },
+    /**
+     * Function to create a toast from a promise.
+     * - When the promise resolves, the toast will be updated with the success options.
+     * - When the promise rejects, the toast will be updated with the error options.
+     */
     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;
     },
+    /**
+     * Function to pause a toast by id.
+     */
     pause(id) {
       if (id == null) {
         send("PAUSE_ALL");
@@ -217,6 +227,9 @@ function groupConnect(state, send, normalize) {
         send({ type: "PAUSE_TOAST", id });
       }
     },
+    /**
+     * Function to resume a toast by id.
+     */
     resume(id) {
       if (id == null) {
         send("RESUME_ALL");

package/dist/toast-group.connect.mjs

@@ -1,11 +1,10 @@
 import {
   groupConnect,
   toaster
-} from "./chunk-HRZITBY3.mjs";
+} from "./chunk-6TPPYHFP.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.d.ts

@@ -3,21 +3,54 @@ import { PropTypes, NormalizeProps } from '@zag-js/types';
 import '@zag-js/core';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * The type of the toast.
+     */
     type: Type;
+    /**
+     * The title of the toast.
+     */
     title: string | undefined;
+    /**
+     *  The description of the toast.
+     */
     description: string | undefined;
+    /**
+     * The current placement of the toast.
+     */
     placement: Placement;
+    /**
+     * Whether the toast is visible.
+     */
     isVisible: boolean;
+    /**
+     * Whether the toast is paused.
+     */
     isPaused: boolean;
+    /**
+     * Whether the toast is in RTL mode.
+     */
     isRtl: boolean;
+    /**
+     * Function to pause the toast (keeping it visible).
+     */
     pause(): void;
+    /**
+     * Function to resume the toast dismissing.
+     */
     resume(): void;
+    /**
+     * Function to instantly dismiss the toast.
+     */
     dismiss(): void;
+    /**
+     * Function render the toast in the DOM (based on the defined `render` property)
+     */
+    render(): any;
     rootProps: T["element"];
     titleProps: T["element"];
     descriptionProps: T["element"];
     closeTriggerProps: T["button"];
-    render(): any;
 };
 
 export { connect };

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`,
@@ -79,27 +48,73 @@ function connect(state, send, normalize) {
   const pauseOnInteraction = state.context.pauseOnInteraction;
   const placement = state.context.placement;
   return {
+    /**
+     * The type of the toast.
+     */
     type: state.context.type,
+    /**
+     * The title of the toast.
+     */
     title: state.context.title,
+    /**
+     *  The description of the toast.
+     */
     description: state.context.description,
+    /**
+     * The current placement of the toast.
+     */
     placement,
+    /**
+     * Whether the toast is visible.
+     */
     isVisible,
+    /**
+     * Whether the toast is paused.
+     */
     isPaused,
+    /**
+     * Whether the toast is in RTL mode.
+     */
     isRtl: state.context.dir === "rtl",
+    /**
+     * Function to pause the toast (keeping it visible).
+     */
     pause() {
       send("PAUSE");
     },
+    /**
+     * Function to resume the toast dismissing.
+     */
     resume() {
       send("RESUME");
     },
+    /**
+     * Function to instantly dismiss the toast.
+     */
     dismiss() {
       send("DISMISS");
     },
+    /**
+     * Function render the toast in the DOM (based on the defined `render` property)
+     */
+    render() {
+      return state.context.render?.({
+        id: state.context.id,
+        type: state.context.type,
+        duration: state.context.duration,
+        title: state.context.title,
+        placement: state.context.placement,
+        description: state.context.description,
+        dismiss() {
+          send("DISMISS");
+        }
+      });
+    },
     rootProps: normalize.element({
       ...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",
@@ -155,20 +170,7 @@ function connect(state, send, normalize) {
       onClick() {
         send("DISMISS");
       }
-    }),
-    render() {
-      return state.context.render?.({
-        id: state.context.id,
-        type: state.context.type,
-        duration: state.context.duration,
-        title: state.context.title,
-        placement: state.context.placement,
-        description: state.context.description,
-        dismiss() {
-          send("DISMISS");
-        }
-      });
-    }
+    })
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/toast.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-HDTOIF42.mjs";
+} from "./chunk-MUJMFD4Y.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
 };