@zag-js/toast 0.2.6 → 0.2.7

package/dist/toast.connect.mjs

@@ -0,0 +1,8 @@
+import {
+  connect
+} from "./chunk-IEPKBUZZ.mjs";
+import "./chunk-GQHI2OMI.mjs";
+import "./chunk-KHVXQ4ZE.mjs";
+export {
+  connect
+};

package/dist/toast.dom.d.ts

@@ -0,0 +1,36 @@
+import { Placement, MachineContext, GroupMachineContext } from './toast.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const dom: {
+    getRootNode: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => HTMLElement | null;
+    getById: <T = HTMLElement>(ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, id: string) => T | null;
+    createEmitter: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, target: HTMLElement) => (evt: string, detail: Record<string, any>, options?: EventInit | undefined) => void;
+    createListener: (target: HTMLElement) => <T_1 = any>(evt: string, handler: (e: CustomEvent<T_1>) => void) => () => void;
+} & {
+    getGroupId: (placement: Placement) => string;
+    getRootId: (ctx: MachineContext) => string;
+    getTitleId: (ctx: MachineContext) => string;
+    getDescriptionId: (ctx: MachineContext) => string;
+    getCloseTriggerId: (ctx: MachineContext) => string;
+    getPortalId: (ctx: GroupMachineContext) => string;
+    getPortalEl: (ctx: GroupMachineContext) => HTMLElement | null;
+    createPortalEl: (ctx: GroupMachineContext) => HTMLElement;
+};
+
+export { dom };

package/dist/toast.dom.js

@@ -0,0 +1,101 @@
+"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);
+
+// src/toast.dom.ts
+var toast_dom_exports = {};
+__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 == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+
+// src/toast.dom.ts
+var dom = defineDomHelpers({
+  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}`,
+  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
+  createPortalEl: (ctx) => {
+    const existing = dom.getPortalEl(ctx);
+    if (existing)
+      return existing;
+    const portal = dom.getDoc(ctx).createElement("toast-portal");
+    portal.id = dom.getPortalId(ctx);
+    return portal;
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dom
+});

package/dist/toast.dom.mjs

@@ -0,0 +1,6 @@
+import {
+  dom
+} from "./chunk-KHVXQ4ZE.mjs";
+export {
+  dom
+};

package/dist/toast.machine.d.ts

@@ -0,0 +1,7 @@
+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 };

package/dist/toast.machine.js

@@ -0,0 +1,305 @@
+"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);
+
+// 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");
+
+// ../../utilities/core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? 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 == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  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 == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : 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.dom.ts
+var dom = defineDomHelpers({
+  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}`,
+  getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getPortalId(ctx)),
+  createPortalEl: (ctx) => {
+    const existing = dom.getPortalEl(ctx);
+    if (existing)
+      return existing;
+    const portal = dom.getDoc(ctx).createElement("toast-portal");
+    portal.id = dom.getPortalId(ctx);
+    return portal;
+  }
+});
+
+// src/toast.utils.ts
+var defaultTimeouts = {
+  info: 5e3,
+  error: 5e3,
+  success: 2e3,
+  loading: Infinity,
+  custom: 5e3
+};
+function getToastDuration(duration, type) {
+  return duration != null ? 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 = 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;
+          return trackDocumentVisibility(dom.getDoc(ctx2), function(hidden) {
+            send(hidden ? "PAUSE" : "RESUME");
+          });
+        }
+      },
+      guards: {
+        isChangingToLoading: (_, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.type) === "loading";
+        },
+        isLoadingType: (ctx2) => ctx2.type === "loading",
+        hasTypeChanged: (ctx2, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.type) !== ctx2.type;
+        },
+        hasDurationChanged: (ctx2, evt) => {
+          var _a;
+          return ((_a = evt.toast) == null ? void 0 : _a.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) {
+          var _a;
+          (_a = ctx2.onClosing) == null ? void 0 : _a.call(ctx2);
+        },
+        invokeOnClose(ctx2) {
+          var _a;
+          (_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
+        },
+        invokeOnOpen(ctx2) {
+          var _a;
+          (_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
+        },
+        invokeOnUpdate(ctx2) {
+          var _a;
+          (_a = ctx2.onUpdate) == null ? void 0 : _a.call(ctx2);
+        },
+        setContext(ctx2, evt) {
+          const { duration: duration2, type: type2 } = evt.toast;
+          const time = 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
+});

package/dist/toast.machine.mjs

@@ -0,0 +1,9 @@
+import {
+  createToastMachine
+} from "./chunk-YVNTR4MK.mjs";
+import "./chunk-YVYADWQR.mjs";
+import "./chunk-LOJTIJID.mjs";
+import "./chunk-KHVXQ4ZE.mjs";
+export {
+  createToastMachine
+};

package/dist/toast.types.d.ts

@@ -0,0 +1,150 @@
+import { StateMachine, Machine } from '@zag-js/core';
+import { RootProperties, CommonProperties, Direction, RequiredBy, DirectionProperty, Context } from '@zag-js/types';
+
+type Type = "success" | "error" | "loading" | "info" | "custom";
+type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
+type SharedContext = {
+    /**
+     * Whether to pause toast when the user leaves the browser tab
+     */
+    pauseOnPageIdle?: boolean;
+    /**
+     * Whether to pause the toast when interacted with
+     */
+    pauseOnInteraction?: boolean;
+};
+type ToastOptions = {
+    /**
+     * The unique id of the toast
+     */
+    id: string;
+    /**
+     * The type of the toast
+     */
+    type: Type;
+    /**
+     * The placement of the toast
+     */
+    placement: Placement;
+    /**
+     * The message of the toast
+     */
+    title?: string;
+    /**
+     * The description of the toast
+     */
+    description?: string;
+    /**
+     * The duration the toast will be visible
+     */
+    duration: number;
+    /**
+     * Custom function to render the toast element.
+     */
+    render?: (options: RenderOptions) => any;
+    /**
+     * The duration for the toast to kept alive before it is removed.
+     * Useful for exit transitions.
+     */
+    removeDelay?: number;
+    /**
+     * Function called when the toast has been closed and removed
+     */
+    onClose?: VoidFunction;
+    /**
+     * Function called when the toast is leaving
+     */
+    onClosing?: VoidFunction;
+    /**
+     * Function called when the toast is shown
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Function called when the toast is updated
+     */
+    onUpdate?: VoidFunction;
+};
+type Options = Partial<ToastOptions>;
+type RenderOptions = Omit<ToastOptions, "render"> & {
+    dismiss(): void;
+};
+type MachineContext = SharedContext & RootProperties & CommonProperties & Omit<ToastOptions, "removeDelay"> & {
+    /**
+     * The duration for the toast to kept alive before it is removed.
+     * Useful for exit transitions.
+     */
+    removeDelay: number;
+    /**
+     * The document's text/writing direction.
+     */
+    dir?: Direction;
+    /**
+     * The time the toast was created
+     */
+    createdAt: number;
+    /**
+     * The time left before the toast is removed
+     */
+    remaining: number;
+};
+type MachineState = {
+    value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
+    tags: "visible" | "paused" | "updating";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send;
+type Service = Machine<MachineContext, MachineState>;
+type GroupPublicContext = SharedContext & DirectionProperty & CommonProperties & {
+    /**
+     * The gutter or spacing between toasts
+     */
+    gutter: string;
+    /**
+     * The z-index applied to each toast group
+     */
+    zIndex: number;
+    /**
+     * The maximum number of toasts that can be shown at once
+     */
+    max: number;
+    /**
+     * The offset from the safe environment edge of the viewport
+     */
+    offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
+};
+type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
+type GroupComputedContext = Readonly<{
+    /**
+     * @computed
+     * The total number of toasts in the group
+     */
+    readonly count: number;
+}>;
+type GroupPrivateContext = Context<{}>;
+type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
+type GroupState = StateMachine.State<GroupMachineContext>;
+type GroupSend = (event: StateMachine.Event<StateMachine.AnyEventObject>) => void;
+type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
+type PromiseOptions<Value> = {
+    loading: ToastOptions;
+    success: MaybeFunction<ToastOptions, Value>;
+    error: MaybeFunction<ToastOptions, Error>;
+};
+type GroupProps = {
+    placement: Placement;
+    label?: string;
+};
+type Toaster = {
+    count: number;
+    isVisible(id: string): boolean;
+    upsert(options: ToastOptions): string | undefined;
+    create(options: ToastOptions): string | undefined;
+    success(options: ToastOptions): string | undefined;
+    error(options: ToastOptions): string | undefined;
+    loading(options: ToastOptions): string | undefined;
+    dismiss(id?: string | undefined): void;
+    remove(id?: string | undefined): void;
+    promise<T>(promise: Promise<T>, options: PromiseOptions<T>, shared?: ToastOptions): Promise<T>;
+};
+
+export { GroupMachineContext, GroupProps, GroupSend, GroupState, MachineContext, MachineState, Options, Placement, PromiseOptions, RenderOptions, Send, Service, State, ToastOptions, Toaster, Type, UserDefinedGroupContext };

package/dist/toast.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// src/toast.types.ts
+var toast_types_exports = {};
+module.exports = __toCommonJS(toast_types_exports);

package/dist/toast.utils.d.ts

@@ -0,0 +1,10 @@
+import { Style } from '@zag-js/types';
+import { Service, Placement, Type, MachineContext, GroupMachineContext } from './toast.types.js';
+import '@zag-js/core';
+
+declare function getToastsByPlacement(toasts: Service[]): Partial<Record<Placement, Service[]>>;
+declare const defaultTimeouts: Record<Type, number>;
+declare function getToastDuration(duration: number | undefined, type: MachineContext["type"]): number;
+declare function getGroupPlacementStyle(ctx: GroupMachineContext, placement: Placement): Style;
+
+export { defaultTimeouts, getGroupPlacementStyle, getToastDuration, getToastsByPlacement };