@zag-js/toast 0.10.2 → 0.10.4

package/dist/toast-group.machine.mjs

@@ -1,9 +1,95 @@
-import {
-  groupMachine
-} from "./chunk-TCF4OLIQ.mjs";
-import "./chunk-EQTV3BNM.mjs";
-import "./chunk-DBPKSADW.mjs";
-import "./chunk-DUZD3NLM.mjs";
-export {
-  groupMachine
-};
+import { createMachine } from '@zag-js/core';
+import { MAX_Z_INDEX } from '@zag-js/dom-query';
+import { compact } from '@zag-js/utils';
+import { createToastMachine } from './toast.machine.mjs';
+
+function groupMachine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine({
+    id: "toaster",
+    initial: "active",
+    context: {
+      dir: "ltr",
+      max: Number.MAX_SAFE_INTEGER,
+      toasts: [],
+      gutter: "1rem",
+      zIndex: MAX_Z_INDEX,
+      pauseOnPageIdle: false,
+      pauseOnInteraction: true,
+      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
+      ...ctx
+    },
+    computed: {
+      count: (ctx2) => ctx2.toasts.length
+    },
+    on: {
+      SETUP: {},
+      PAUSE_TOAST: {
+        actions: (_ctx, evt, { self }) => {
+          self.sendChild("PAUSE", evt.id);
+        }
+      },
+      PAUSE_ALL: {
+        actions: (ctx2) => {
+          ctx2.toasts.forEach((toast) => toast.send("PAUSE"));
+        }
+      },
+      RESUME_TOAST: {
+        actions: (_ctx, evt, { self }) => {
+          self.sendChild("RESUME", evt.id);
+        }
+      },
+      RESUME_ALL: {
+        actions: (ctx2) => {
+          ctx2.toasts.forEach((toast) => toast.send("RESUME"));
+        }
+      },
+      ADD_TOAST: {
+        guard: (ctx2) => ctx2.toasts.length < ctx2.max,
+        actions: (ctx2, evt, { self }) => {
+          const options = {
+            ...evt.toast,
+            pauseOnPageIdle: ctx2.pauseOnPageIdle,
+            pauseOnInteraction: ctx2.pauseOnInteraction,
+            dir: ctx2.dir,
+            getRootNode: ctx2.getRootNode
+          };
+          const toast = createToastMachine(options);
+          const actor = self.spawn(toast);
+          ctx2.toasts.push(actor);
+        }
+      },
+      UPDATE_TOAST: {
+        actions: (_ctx, evt, { self }) => {
+          self.sendChild({ type: "UPDATE", toast: evt.toast }, evt.id);
+        }
+      },
+      DISMISS_TOAST: {
+        actions: (_ctx, evt, { self }) => {
+          self.sendChild("DISMISS", evt.id);
+        }
+      },
+      DISMISS_ALL: {
+        actions: (ctx2) => {
+          ctx2.toasts.forEach((toast) => toast.send("DISMISS"));
+        }
+      },
+      REMOVE_TOAST: {
+        actions: (ctx2, evt, { self }) => {
+          self.stopChild(evt.id);
+          const index = ctx2.toasts.findIndex((toast) => toast.id === evt.id);
+          ctx2.toasts.splice(index, 1);
+        }
+      },
+      REMOVE_ALL: {
+        actions: (ctx2, _evt, { self }) => {
+          ctx2.toasts.forEach((toast) => self.stopChild(toast.id));
+          while (ctx2.toasts.length)
+            ctx2.toasts.pop();
+        }
+      }
+    }
+  });
+}
+
+export { groupMachine };

package/dist/toast.anatomy.d.ts

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

package/dist/toast.anatomy.js

@@ -1,34 +1,11 @@
-"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.anatomy.ts
-var toast_anatomy_exports = {};
-__export(toast_anatomy_exports, {
-  anatomy: () => anatomy,
-  parts: () => parts
-});
-module.exports = __toCommonJS(toast_anatomy_exports);
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("toast").parts("group", "root", "title", "description", "closeTrigger");
-var parts = anatomy.build();
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  parts
-});
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const anatomy$1 = require('@zag-js/anatomy');
+
+const anatomy = anatomy$1.createAnatomy("toast").parts("group", "root", "title", "description", "closeTrigger");
+const parts = anatomy.build();
+
+exports.anatomy = anatomy;
+exports.parts = parts;

package/dist/toast.anatomy.mjs

@@ -1,8 +1,6 @@
-import {
-  anatomy,
-  parts
-} from "./chunk-GQHI2OMI.mjs";
-export {
-  anatomy,
-  parts
-};
+import { createAnatomy } from '@zag-js/anatomy';
+
+const anatomy = createAnatomy("toast").parts("group", "root", "title", "description", "closeTrigger");
+const parts = anatomy.build();
+
+export { anatomy, parts };

package/dist/toast.connect.d.ts

@@ -1,8 +1,6 @@
-import { State, Send, Type, Placement } from './toast.types.js';
-import { PropTypes, NormalizeProps } from '@zag-js/types';
-import '@zag-js/core';
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import { Type, Placement, Send, State } from './toast.types';
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     /**
      * The type of the toast.
      */
@@ -52,5 +50,3 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     descriptionProps: T["element"];
     closeTriggerProps: T["button"];
 };
-
-export { connect };

package/dist/toast.connect.js

@@ -1,47 +1,11 @@
-"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.connect.ts
-var toast_connect_exports = {};
-__export(toast_connect_exports, {
-  connect: () => connect
-});
-module.exports = __toCommonJS(toast_connect_exports);
-var import_dom_query2 = require("@zag-js/dom-query");
+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 domQuery = require('@zag-js/dom-query');
+const toast_anatomy = require('./toast.anatomy.js');
+const toast_dom = require('./toast.dom.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.connect.ts
 function connect(state, send, normalize) {
   const isVisible = state.hasTag("visible");
   const isPaused = state.hasTag("paused");
@@ -111,10 +75,10 @@ function connect(state, send, normalize) {
       });
     },
     rootProps: normalize.element({
-      ...parts.root.attrs,
+      ...toast_anatomy.parts.root.attrs,
       dir: state.context.dir,
-      id: dom.getRootId(state.context),
-      "data-open": (0, import_dom_query2.dataAttr)(isVisible),
+      id: toast_dom.dom.getRootId(state.context),
+      "data-open": domQuery.dataAttr(isVisible),
       "data-type": state.context.type,
       "data-placement": placement,
       role: "status",
@@ -155,16 +119,16 @@ function connect(state, send, normalize) {
       }
     }),
     titleProps: normalize.element({
-      ...parts.title.attrs,
-      id: dom.getTitleId(state.context)
+      ...toast_anatomy.parts.title.attrs,
+      id: toast_dom.dom.getTitleId(state.context)
     }),
     descriptionProps: normalize.element({
-      ...parts.description.attrs,
-      id: dom.getDescriptionId(state.context)
+      ...toast_anatomy.parts.description.attrs,
+      id: toast_dom.dom.getDescriptionId(state.context)
     }),
     closeTriggerProps: normalize.button({
-      id: dom.getCloseTriggerId(state.context),
-      ...parts.closeTrigger.attrs,
+      id: toast_dom.dom.getCloseTriggerId(state.context),
+      ...toast_anatomy.parts.closeTrigger.attrs,
       type: "button",
       "aria-label": "Dismiss notification",
       onClick() {
@@ -173,7 +137,5 @@ function connect(state, send, normalize) {
     })
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  connect
-});
+
+exports.connect = connect;

package/dist/toast.connect.mjs

@@ -1,8 +1,137 @@
-import {
-  connect
-} from "./chunk-MUJMFD4Y.mjs";
-import "./chunk-GQHI2OMI.mjs";
-import "./chunk-DUZD3NLM.mjs";
-export {
-  connect
-};
+import { dataAttr } from '@zag-js/dom-query';
+import { parts } from './toast.anatomy.mjs';
+import { dom } from './toast.dom.mjs';
+
+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-type": state.context.type,
+      "data-placement": placement,
+      role: "status",
+      "aria-atomic": "true",
+      tabIndex: 0,
+      style: {
+        position: "relative",
+        pointerEvents: "auto",
+        margin: "calc(var(--toast-gutter) / 2)",
+        "--remove-delay": `${state.context.removeDelay}ms`,
+        "--duration": `${state.context.duration}ms`
+      },
+      onKeyDown(event) {
+        if (event.key == "Escape") {
+          send("DISMISS");
+          event.preventDefault();
+        }
+      },
+      onFocus() {
+        if (pauseOnInteraction) {
+          send("PAUSE");
+        }
+      },
+      onBlur() {
+        if (pauseOnInteraction) {
+          send("RESUME");
+        }
+      },
+      onPointerEnter() {
+        if (pauseOnInteraction) {
+          send("PAUSE");
+        }
+      },
+      onPointerLeave() {
+        if (pauseOnInteraction) {
+          send("RESUME");
+        }
+      }
+    }),
+    titleProps: normalize.element({
+      ...parts.title.attrs,
+      id: dom.getTitleId(state.context)
+    }),
+    descriptionProps: normalize.element({
+      ...parts.description.attrs,
+      id: dom.getDescriptionId(state.context)
+    }),
+    closeTriggerProps: normalize.button({
+      id: dom.getCloseTriggerId(state.context),
+      ...parts.closeTrigger.attrs,
+      type: "button",
+      "aria-label": "Dismiss notification",
+      onClick() {
+        send("DISMISS");
+      }
+    })
+  };
+}
+
+export { connect };

package/dist/toast.dom.d.ts

@@ -1,8 +1,5 @@
-import { Placement, MachineContext, GroupMachineContext } from './toast.types.js';
-import '@zag-js/core';
-import '@zag-js/types';
-
-declare const dom: {
+import type { GroupMachineContext as GroupCtx, MachineContext as Ctx, Placement } from "./toast.types";
+export declare const dom: {
     getRootNode: (ctx: {
         getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
     }) => Document | ShadowRoot;
@@ -23,11 +20,9 @@ declare const dom: {
     }, id: string) => T_1;
 } & {
     getGroupId: (placement: Placement) => string;
-    getRootId: (ctx: MachineContext) => string;
-    getTitleId: (ctx: MachineContext) => string;
-    getDescriptionId: (ctx: MachineContext) => string;
-    getCloseTriggerId: (ctx: MachineContext) => string;
-    getPortalId: (ctx: GroupMachineContext) => string;
+    getRootId: (ctx: Ctx) => string;
+    getTitleId: (ctx: Ctx) => string;
+    getDescriptionId: (ctx: Ctx) => string;
+    getCloseTriggerId: (ctx: Ctx) => string;
+    getPortalId: (ctx: GroupCtx) => string;
 };
-
-export { dom };

package/dist/toast.dom.js

@@ -1,30 +1,10 @@
-"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.dom.ts
-var toast_dom_exports = {};
-__export(toast_dom_exports, {
-  dom: () => dom
-});
-module.exports = __toCommonJS(toast_dom_exports);
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domQuery = require('@zag-js/dom-query');
+
+const dom = domQuery.createScope({
   getGroupId: (placement) => `toast-group:${placement}`,
   getRootId: (ctx) => `toast:${ctx.id}`,
   getTitleId: (ctx) => `toast:${ctx.id}:title`,
@@ -32,7 +12,5 @@ var dom = (0, import_dom_query.createScope)({
   getCloseTriggerId: (ctx) => `toast${ctx.id}:close`,
   getPortalId: (ctx) => `toast-portal:${ctx.id}`
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  dom
-});
+
+exports.dom = dom;

package/dist/toast.dom.mjs

@@ -1,6 +1,12 @@
-import {
-  dom
-} from "./chunk-DUZD3NLM.mjs";
-export {
-  dom
-};
+import { createScope } from '@zag-js/dom-query';
+
+const 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/toast.machine.d.ts

@@ -1,7 +1,3 @@
-import * as _zag_js_core from '@zag-js/core';
-import { Options, MachineContext, MachineState } from './toast.types.js';
-import '@zag-js/types';
-
-declare function createToastMachine(options?: Options): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
-
-export { createToastMachine };
+import { Machine, StateMachine } from '@zag-js/core';
+import type { MachineContext, MachineState, Options } from "./toast.types";
+export declare function createToastMachine(options?: Options): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;

package/dist/toast.machine.js

@@ -1,62 +1,19 @@
-"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.machine.ts
-var toast_machine_exports = {};
-__export(toast_machine_exports, {
-  createToastMachine: () => createToastMachine
-});
-module.exports = __toCommonJS(toast_machine_exports);
-var import_core = require("@zag-js/core");
-var import_dom_event = require("@zag-js/dom-event");
-var import_utils = require("@zag-js/utils");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// 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}`
-});
+const core = require('@zag-js/core');
+const domEvent = require('@zag-js/dom-event');
+const utils = require('@zag-js/utils');
+const toast_dom = require('./toast.dom.js');
+const toast_utils = require('./toast.utils.js');
 
-// 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;
+const { not, and, or } = 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)(
+  const ctx = utils.compact(restProps);
+  const computedDuration = toast_utils.getToastDuration(duration, type);
+  return core.createMachine(
     {
       id,
       entry: "invokeOnOpen",
@@ -141,8 +98,8 @@ function createToastMachine(options = {}) {
         trackDocumentVisibility(ctx2, _evt, { send }) {
           if (!ctx2.pauseOnPageIdle)
             return;
-          const doc = dom.getDoc(ctx2);
-          return (0, import_dom_event.addDomEvent)(doc, "visibilitychange", () => {
+          const doc = toast_dom.dom.getDoc(ctx2);
+          return domEvent.addDomEvent(doc, "visibilitychange", () => {
             send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
           });
         }
@@ -181,14 +138,12 @@ function createToastMachine(options = {}) {
         },
         setContext(ctx2, evt) {
           const { duration: duration2, type: type2 } = evt.toast;
-          const time = getToastDuration(duration2, type2);
+          const time = toast_utils.getToastDuration(duration2, type2);
           Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
         }
       }
     }
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createToastMachine
-});
+
+exports.createToastMachine = createToastMachine;