@zag-js/toast 0.10.2 → 0.10.4

package/dist/index.mjs

@@ -1,26 +1,12 @@
-import {
-  groupConnect,
-  toaster
-} from "./chunk-6TPPYHFP.mjs";
-import {
-  groupMachine
-} from "./chunk-TCF4OLIQ.mjs";
-import {
-  connect
-} from "./chunk-MUJMFD4Y.mjs";
-import {
-  anatomy
-} from "./chunk-GQHI2OMI.mjs";
-import {
-  createToastMachine
-} from "./chunk-EQTV3BNM.mjs";
-import "./chunk-DBPKSADW.mjs";
-import "./chunk-DUZD3NLM.mjs";
+import { isDom } from '@zag-js/dom-query';
+import { warn } from '@zag-js/utils';
+import { groupConnect, toaster } from './toast-group.connect.mjs';
+import { groupMachine } from './toast-group.machine.mjs';
+export { createToastMachine as createMachine } from './toast.machine.mjs';
+export { anatomy } from './toast.anatomy.mjs';
+export { connect } from './toast.connect.mjs';
 
-// src/index.ts
-import { isDom } from "@zag-js/dom-query";
-import { warn } from "@zag-js/utils";
-var group = {
+const group = {
   connect: groupConnect,
   machine: groupMachine
 };
@@ -31,10 +17,5 @@ function api() {
     return toaster;
   }
 }
-export {
-  anatomy,
-  api,
-  connect,
-  createToastMachine as createMachine,
-  group
-};
+
+export { api, group };

package/dist/toast-group.connect.d.ts

@@ -1,9 +1,7 @@
-import { Toaster, GroupState, GroupSend, Service, Placement, Options, PromiseOptions, GroupProps, GroupMachineContext } from './toast.types.js';
-import { PropTypes, NormalizeProps } from '@zag-js/types';
-import '@zag-js/core';
-
-declare let toaster: Toaster;
-declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import { Service, GroupMachineContext, GroupProps, GroupSend, GroupState, Placement, PromiseOptions, Toaster, Options } from './toast.types';
+export declare let toaster: Toaster;
+export declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
     /**
      * The total number of toasts
      */
@@ -75,5 +73,3 @@ declare function groupConnect<T extends PropTypes>(state: GroupState, send: Grou
     getGroupProps(options: GroupProps): T["element"];
     subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
 };
-
-export { groupConnect, toaster };

package/dist/toast-group.connect.js

@@ -1,100 +1,14 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/toast-group.connect.ts
-var toast_group_connect_exports = {};
-__export(toast_group_connect_exports, {
-  groupConnect: () => groupConnect,
-  toaster: () => toaster
-});
-module.exports = __toCommonJS(toast_group_connect_exports);
-var import_core = require("@zag-js/core");
-var import_utils = require("@zag-js/utils");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// 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();
+const core = require('@zag-js/core');
+const utils = require('@zag-js/utils');
+const toast_anatomy = require('./toast.anatomy.js');
+const toast_dom = require('./toast.dom.js');
+const toast_utils = require('./toast.utils.js');
 
-// src/toast.dom.ts
-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`,
-  getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
-  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
-  getPortalId: (ctx) => `toast-portal:${ctx.id}`
-});
-
-// src/toast.utils.ts
-function getToastsByPlacement(toasts) {
-  const result = {};
-  for (const toast of toasts) {
-    const placement = toast.state.context.placement;
-    result[placement] || (result[placement] = []);
-    result[placement].push(toast);
-  }
-  return result;
-}
-function getGroupPlacementStyle(ctx, placement) {
-  const offset = ctx.offsets;
-  const computedOffset = typeof offset === "string" ? { left: offset, right: offset, bottom: offset, top: offset } : offset;
-  const rtl = ctx.dir === "rtl";
-  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",
-    display: "flex",
-    flexDirection: "column",
-    "--toast-gutter": ctx.gutter,
-    zIndex: ctx.zIndex
-  };
-  let alignItems = "center";
-  if (isRighty)
-    alignItems = "flex-end";
-  if (isLefty)
-    alignItems = "flex-start";
-  styles.alignItems = alignItems;
-  if (computedPlacement.includes("top")) {
-    const offset2 = computedOffset.top;
-    styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
-  }
-  if (computedPlacement.includes("bottom")) {
-    const offset2 = computedOffset.bottom;
-    styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
-  }
-  if (!computedPlacement.includes("left")) {
-    const offset2 = computedOffset.right;
-    styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
-  }
-  if (!computedPlacement.includes("right")) {
-    const offset2 = computedOffset.left;
-    styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
-  }
-  return styles;
-}
-
-// src/toast-group.connect.ts
-var toaster = {};
+let toaster = {};
 function groupConnect(state, send, normalize) {
   const group = {
     /**
@@ -108,7 +22,7 @@ function groupConnect(state, send, normalize) {
     /**
      * The active toasts by placement
      */
-    toastsByPlacement: getToastsByPlacement(state.context.toasts),
+    toastsByPlacement: toast_utils.getToastsByPlacement(state.context.toasts),
     /**
      * Returns whether the toast id is visible
      */
@@ -121,7 +35,7 @@ function groupConnect(state, send, normalize) {
      * Function to create a toast.
      */
     create(options) {
-      const uid = `toast:${(0, import_utils.uuid)()}`;
+      const uid = `toast:${utils.uuid()}`;
       const id = options.id ? options.id : uid;
       if (group.isVisible(id))
         return;
@@ -209,10 +123,10 @@ function groupConnect(state, send, normalize) {
     promise(promise, options, shared = {}) {
       const id = group.loading({ ...shared, ...options.loading });
       promise.then((response) => {
-        const successOptions = (0, import_utils.runIfFn)(options.success, response);
+        const successOptions = utils.runIfFn(options.success, response);
         group.success({ ...shared, ...successOptions, id });
       }).catch((error) => {
-        const errorOptions = (0, import_utils.runIfFn)(options.error, error);
+        const errorOptions = utils.runIfFn(options.error, error);
         group.error({ ...shared, ...errorOptions, id });
       });
       return promise;
@@ -240,25 +154,23 @@ function groupConnect(state, send, normalize) {
     getGroupProps(options) {
       const { placement, label = "Notifications" } = options;
       return normalize.element({
-        ...parts.group.attrs,
+        ...toast_anatomy.parts.group.attrs,
         tabIndex: -1,
         "aria-label": label,
-        id: dom.getGroupId(placement),
+        id: toast_dom.dom.getGroupId(placement),
         "data-placement": placement,
         "aria-live": "polite",
         role: "region",
-        style: getGroupPlacementStyle(state.context, placement)
+        style: toast_utils.getGroupPlacementStyle(state.context, placement)
       });
     },
     subscribe(fn) {
-      return (0, import_core.subscribe)(state.context.toasts, () => fn(state.context.toasts));
+      return core.subscribe(state.context.toasts, () => fn(state.context.toasts));
     }
   };
   Object.assign(toaster, group);
   return group;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  groupConnect,
-  toaster
-});
+
+exports.groupConnect = groupConnect;
+exports.toaster = toaster;

package/dist/toast-group.connect.mjs

@@ -1,11 +1,171 @@
-import {
-  groupConnect,
-  toaster
-} from "./chunk-6TPPYHFP.mjs";
-import "./chunk-GQHI2OMI.mjs";
-import "./chunk-DBPKSADW.mjs";
-import "./chunk-DUZD3NLM.mjs";
-export {
-  groupConnect,
-  toaster
-};
+import { subscribe } from '@zag-js/core';
+import { uuid, runIfFn } from '@zag-js/utils';
+import { parts } from './toast.anatomy.mjs';
+import { dom } from './toast.dom.mjs';
+import { getToastsByPlacement, getGroupPlacementStyle } from './toast.utils.mjs';
+
+let 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;
+      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;
+      if (isVisible && id != null) {
+        return group.update(id, options);
+      } else {
+        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");
+      } else if (group.isVisible(id)) {
+        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");
+      } else if (group.isVisible(id)) {
+        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);
+        group.success({ ...shared, ...successOptions, id });
+      }).catch((error) => {
+        const errorOptions = 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");
+      } else if (group.isVisible(id)) {
+        send({ type: "PAUSE_TOAST", id });
+      }
+    },
+    /**
+     * Function to resume a toast by id.
+     */
+    resume(id) {
+      if (id == null) {
+        send("RESUME_ALL");
+      } else if (group.isVisible(id)) {
+        send({ type: "RESUME_TOAST", id });
+      }
+    },
+    getGroupProps(options) {
+      const { placement, label = "Notifications" } = options;
+      return normalize.element({
+        ...parts.group.attrs,
+        tabIndex: -1,
+        "aria-label": label,
+        id: dom.getGroupId(placement),
+        "data-placement": placement,
+        "aria-live": "polite",
+        role: "region",
+        style: getGroupPlacementStyle(state.context, placement)
+      });
+    },
+    subscribe(fn) {
+      return subscribe(state.context.toasts, () => fn(state.context.toasts));
+    }
+  };
+  Object.assign(toaster, group);
+  return group;
+}
+
+export { groupConnect, toaster };

package/dist/toast-group.machine.d.ts

@@ -1,7 +1,3 @@
-import * as _zag_js_core from '@zag-js/core';
-import { UserDefinedGroupContext, GroupMachineContext } from './toast.types.js';
-import '@zag-js/types';
-
-declare function groupMachine(userContext: UserDefinedGroupContext): _zag_js_core.Machine<GroupMachineContext, _zag_js_core.StateMachine.StateSchema, _zag_js_core.StateMachine.AnyEventObject>;
-
-export { groupMachine };
+import { Machine, StateMachine } from '@zag-js/core';
+import type { GroupMachineContext, UserDefinedGroupContext } from "./toast.types";
+export declare function groupMachine(userContext: UserDefinedGroupContext): Machine<GroupMachineContext, StateMachine.StateSchema, StateMachine.AnyEventObject>;

package/dist/toast-group.machine.js

@@ -1,203 +1,15 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/toast-group.machine.ts
-var toast_group_machine_exports = {};
-__export(toast_group_machine_exports, {
-  groupMachine: () => groupMachine
-});
-module.exports = __toCommonJS(toast_group_machine_exports);
-var import_core2 = require("@zag-js/core");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_utils2 = require("@zag-js/utils");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// 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");
+const core = require('@zag-js/core');
+const domQuery = require('@zag-js/dom-query');
+const utils = require('@zag-js/utils');
+const toast_machine = require('./toast.machine.js');
 
-// src/toast.dom.ts
-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`,
-  getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
-  getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
-  getPortalId: (ctx) => `toast-portal:${ctx.id}`
-});
-
-// src/toast.utils.ts
-var defaultTimeouts = {
-  info: 5e3,
-  error: 5e3,
-  success: 2e3,
-  loading: Infinity,
-  custom: 5e3
-};
-function getToastDuration(duration, type) {
-  return duration ?? defaultTimeouts[type];
-}
-
-// src/toast.machine.ts
-var { not, and, or } = import_core.guards;
-function createToastMachine(options = {}) {
-  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
-  const ctx = (0, import_utils.compact)(restProps);
-  const computedDuration = getToastDuration(duration, type);
-  return (0, import_core.createMachine)(
-    {
-      id,
-      entry: "invokeOnOpen",
-      initial: type === "loading" ? "persist" : "active",
-      context: {
-        id,
-        type,
-        remaining: computedDuration,
-        duration: computedDuration,
-        removeDelay,
-        createdAt: Date.now(),
-        placement,
-        ...ctx
-      },
-      on: {
-        UPDATE: [
-          {
-            guard: and("hasTypeChanged", "isChangingToLoading"),
-            target: "persist",
-            actions: ["setContext", "invokeOnUpdate"]
-          },
-          {
-            guard: or("hasDurationChanged", "hasTypeChanged"),
-            target: "active:temp",
-            actions: ["setContext", "invokeOnUpdate"]
-          },
-          {
-            actions: ["setContext", "invokeOnUpdate"]
-          }
-        ]
-      },
-      states: {
-        "active:temp": {
-          tags: ["visible", "updating"],
-          after: {
-            0: "active"
-          }
-        },
-        persist: {
-          tags: ["visible", "paused"],
-          activities: "trackDocumentVisibility",
-          on: {
-            RESUME: {
-              guard: not("isLoadingType"),
-              target: "active",
-              actions: ["setCreatedAt"]
-            },
-            DISMISS: "dismissing"
-          }
-        },
-        active: {
-          tags: ["visible"],
-          activities: "trackDocumentVisibility",
-          after: {
-            VISIBLE_DURATION: "dismissing"
-          },
-          on: {
-            DISMISS: "dismissing",
-            PAUSE: {
-              target: "persist",
-              actions: "setRemainingDuration"
-            }
-          }
-        },
-        dismissing: {
-          entry: "invokeOnClosing",
-          after: {
-            REMOVE_DELAY: {
-              target: "inactive",
-              actions: "notifyParentToRemove"
-            }
-          }
-        },
-        inactive: {
-          entry: "invokeOnClose",
-          type: "final"
-        }
-      }
-    },
-    {
-      activities: {
-        trackDocumentVisibility(ctx2, _evt, { send }) {
-          if (!ctx2.pauseOnPageIdle)
-            return;
-          const doc = dom.getDoc(ctx2);
-          return (0, import_dom_event.addDomEvent)(doc, "visibilitychange", () => {
-            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
-          });
-        }
-      },
-      guards: {
-        isChangingToLoading: (_, evt) => evt.toast?.type === "loading",
-        isLoadingType: (ctx2) => ctx2.type === "loading",
-        hasTypeChanged: (ctx2, evt) => evt.toast?.type !== ctx2.type,
-        hasDurationChanged: (ctx2, evt) => evt.toast?.duration !== ctx2.duration
-      },
-      delays: {
-        VISIBLE_DURATION: (ctx2) => ctx2.remaining,
-        REMOVE_DELAY: (ctx2) => ctx2.removeDelay
-      },
-      actions: {
-        setRemainingDuration(ctx2) {
-          ctx2.remaining -= Date.now() - ctx2.createdAt;
-        },
-        setCreatedAt(ctx2) {
-          ctx2.createdAt = Date.now();
-        },
-        notifyParentToRemove(_ctx, _evt, { self }) {
-          self.sendParent({ type: "REMOVE_TOAST", id: self.id });
-        },
-        invokeOnClosing(ctx2) {
-          ctx2.onClosing?.();
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onClose?.();
-        },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpen?.();
-        },
-        invokeOnUpdate(ctx2) {
-          ctx2.onUpdate?.();
-        },
-        setContext(ctx2, evt) {
-          const { duration: duration2, type: type2 } = evt.toast;
-          const time = getToastDuration(duration2, type2);
-          Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
-        }
-      }
-    }
-  );
-}
-
-// src/toast-group.machine.ts
 function groupMachine(userContext) {
-  const ctx = (0, import_utils2.compact)(userContext);
-  return (0, import_core2.createMachine)({
+  const ctx = utils.compact(userContext);
+  return core.createMachine({
     id: "toaster",
     initial: "active",
     context: {
@@ -205,7 +17,7 @@ function groupMachine(userContext) {
       max: Number.MAX_SAFE_INTEGER,
       toasts: [],
       gutter: "1rem",
-      zIndex: import_dom_query2.MAX_Z_INDEX,
+      zIndex: domQuery.MAX_Z_INDEX,
       pauseOnPageIdle: false,
       pauseOnInteraction: true,
       offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
@@ -246,7 +58,7 @@ function groupMachine(userContext) {
             dir: ctx2.dir,
             getRootNode: ctx2.getRootNode
           };
-          const toast = createToastMachine(options);
+          const toast = toast_machine.createToastMachine(options);
           const actor = self.spawn(toast);
           ctx2.toasts.push(actor);
         }
@@ -283,7 +95,5 @@ function groupMachine(userContext) {
     }
   });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  groupMachine
-});
+
+exports.groupMachine = groupMachine;