@zag-js/toast 0.2.12 → 0.2.13

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;
@@ -205,22 +114,40 @@ function getGroupPlacementStyle(ctx, placement) {
 var toaster = {};
 function groupConnect(state, send, normalize) {
   const group2 = {
+    /**
+     * 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 (group2.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 ? group2.isVisible(id) : false;
@@ -230,6 +157,10 @@ function groupConnect(state, send, normalize) {
         return group2.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");
@@ -237,6 +168,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");
@@ -244,41 +179,64 @@ function groupConnect(state, send, normalize) {
         send({ type: "REMOVE_TOAST", id });
       }
     },
+    /**
+     * Function to dismiss all toasts by placement.
+     */
     dismissByPlacement(placement) {
       const toasts = group2.toastsByPlacement[placement];
       if (toasts) {
         toasts.forEach((toast) => group2.dismiss(toast.id));
       }
     },
+    /**
+     * Function to update a toast's options by id.
+     */
     update(id, options) {
       if (!group2.isVisible(id))
         return;
       send({ type: "UPDATE_TOAST", id, toast: options });
       return id;
     },
+    /**
+     * Function to create a loading toast.
+     */
     loading(options) {
       options.type = "loading";
       return group2.upsert(options);
     },
+    /**
+     * Function to create a success toast.
+     */
     success(options) {
       options.type = "success";
       return group2.upsert(options);
     },
+    /**
+     * Function to create an error toast.
+     */
     error(options) {
       options.type = "error";
       return group2.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 = 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;
     },
+    /**
+     * Function to pause a toast by id.
+     */
     pause(id) {
       if (id == null) {
         send("PAUSE_ALL");
@@ -286,6 +244,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");
@@ -316,13 +277,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 +374,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 +424,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 +433,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,33 +513,80 @@ 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");
   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_query3.dataAttr)(isVisible),
       "data-type": state.context.type,
       "data-placement": placement,
       role: "status",
@@ -629,20 +642,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");
-        }
-      });
-    }
+    })
   };
 }
 
@@ -652,8 +652,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-6TPPYHFP.mjs";
 import {
   groupMachine
-} from "./chunk-GKMHTDAP.mjs";
+} from "./chunk-TCF4OLIQ.mjs";
 import {
   connect
-} from "./chunk-HDTOIF42.mjs";
+} from "./chunk-MUJMFD4Y.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.d.ts

@@ -4,21 +4,73 @@ import '@zag-js/core';
 
 declare let toaster: Toaster;
 declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
+    /**
+     * The total number of toasts
+     */
     count: number;
+    /**
+     * The active toasts
+     */
     toasts: Service[];
+    /**
+     * The active toasts by placement
+     */
     toastsByPlacement: Partial<Record<Placement, Service[]>>;
+    /**
+     * Returns whether the toast id is visible
+     */
     isVisible(id: string): boolean;
+    /**
+     * Function to create a toast.
+     */
     create(options: Options): string | undefined;
+    /**
+     * Function to create or update a toast.
+     */
     upsert(options: Options): string | undefined;
+    /**
+     * Function to dismiss a toast by id.
+     * If no id is provided, all toasts will be dismissed.
+     */
     dismiss(id?: string): void;
+    /**
+     * Function to remove a toast by id.
+     * If no id is provided, all toasts will be removed.
+     */
     remove(id?: string): void;
+    /**
+     * Function to dismiss all toasts by placement.
+     */
     dismissByPlacement(placement: Placement): void;
+    /**
+     * Function to update a toast's options by id.
+     */
     update(id: string, options: Options): string | undefined;
+    /**
+     * Function to create a loading toast.
+     */
     loading(options: Options): string | undefined;
+    /**
+     * Function to create a success toast.
+     */
     success(options: Options): string | undefined;
+    /**
+     * Function to create an error toast.
+     */
     error(options: Options): string | undefined;
+    /**
+     * 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<T_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
+    /**
+     * Function to pause a toast by id.
+     */
     pause(id?: string): void;
+    /**
+     * Function to resume a toast by id.
+     */
     resume(id?: string): void;
     getGroupProps(options: GroupProps): T["element"];
     subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;