@zag-js/toast 0.2.12 → 0.2.14

package/dist/{chunk-HRZITBY3.mjs → chunk-6TPPYHFP.mjs}

@@ -1,31 +1,43 @@
 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 = {
+    /**
+     * 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 id = options.id ? options.id : uid;
@@ -34,6 +46,9 @@ function groupConnect(state, send, normalize) {
       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;
@@ -43,6 +58,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");
@@ -50,6 +69,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");
@@ -57,30 +80,50 @@ 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) => {
@@ -92,6 +135,9 @@ function groupConnect(state, send, normalize) {
       });
       return promise;
     },
+    /**
+     * Function to pause a toast by id.
+     */
     pause(id) {
       if (id == null) {
         send("PAUSE_ALL");
@@ -99,6 +145,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/{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-MUJMFD4Y.mjs}

@@ -3,36 +3,78 @@ 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");
   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,
@@ -93,20 +135,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");
-        }
-      });
-    }
+    })
   };
 }
 

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({