@zag-js/toast 0.2.5 → 0.2.7

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

@@ -0,0 +1,28 @@
+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>): {
+    count: number;
+    toasts: Service[];
+    toastsByPlacement: Partial<Record<Placement, Service[]>>;
+    isVisible(id: string): boolean;
+    create(options: Options): string | undefined;
+    upsert(options: Options): string | undefined;
+    dismiss(id?: string): void;
+    remove(id?: string): void;
+    dismissByPlacement(placement: Placement): void;
+    update(id: string, options: Options): string | undefined;
+    loading(options: Options): string | undefined;
+    success(options: Options): string | undefined;
+    error(options: Options): string | undefined;
+    promise<T_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
+    pause(id?: string): void;
+    resume(id?: string): void;
+    getGroupProps(options: GroupProps): T["element"];
+    createPortal(): HTMLElement;
+    subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
+};
+
+export { groupConnect, toaster };

package/dist/toast-group.connect.js

@@ -0,0 +1,296 @@
+"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-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");
+
+// ../../utilities/core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var uuid = /* @__PURE__ */ (() => {
+  let id = 0;
+  return () => {
+    id++;
+    return id.toString(36);
+  };
+})();
+
+// 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();
+
+// ../../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;
+  }
+});
+
+// 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 __offset = 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 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 (__placement.includes("top")) {
+    const offset2 = __offset.top;
+    styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
+  }
+  if (__placement.includes("bottom")) {
+    const offset2 = __offset.bottom;
+    styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
+  }
+  if (!__placement.includes("left")) {
+    const offset2 = __offset.right;
+    styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
+  }
+  if (!__placement.includes("right")) {
+    const offset2 = __offset.left;
+    styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
+  }
+  return styles;
+}
+
+// src/toast-group.connect.ts
+var toaster = {};
+function groupConnect(state, send, normalize) {
+  const group = {
+    count: state.context.count,
+    toasts: state.context.toasts,
+    toastsByPlacement: getToastsByPlacement(state.context.toasts),
+    isVisible(id) {
+      if (!state.context.toasts.length)
+        return false;
+      return !!state.context.toasts.find((toast) => toast.id == id);
+    },
+    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;
+    },
+    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);
+      }
+    },
+    dismiss(id) {
+      if (id == null) {
+        send("DISMISS_ALL");
+      } else if (group.isVisible(id)) {
+        send({ type: "DISMISS_TOAST", id });
+      }
+    },
+    remove(id) {
+      if (id == null) {
+        send("REMOVE_ALL");
+      } else if (group.isVisible(id)) {
+        send({ type: "REMOVE_TOAST", id });
+      }
+    },
+    dismissByPlacement(placement) {
+      const toasts = group.toastsByPlacement[placement];
+      if (toasts) {
+        toasts.forEach((toast) => group.dismiss(toast.id));
+      }
+    },
+    update(id, options) {
+      if (!group.isVisible(id))
+        return;
+      send({ type: "UPDATE_TOAST", id, toast: options });
+      return id;
+    },
+    loading(options) {
+      options.type = "loading";
+      return group.upsert(options);
+    },
+    success(options) {
+      options.type = "success";
+      return group.upsert(options);
+    },
+    error(options) {
+      options.type = "error";
+      return group.upsert(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;
+    },
+    pause(id) {
+      if (id == null) {
+        send("PAUSE_ALL");
+      } else if (group.isVisible(id)) {
+        send({ type: "PAUSE_TOAST", 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)
+      });
+    },
+    createPortal() {
+      const doc = dom.getDoc(state.context);
+      const exist = dom.getPortalEl(state.context);
+      if (exist)
+        return exist;
+      const portal = dom.createPortalEl(state.context);
+      doc.body.appendChild(portal);
+      return portal;
+    },
+    subscribe(fn) {
+      return (0, import_core.subscribe)(state.context.toasts, () => fn(state.context.toasts));
+    }
+  };
+  if (!state.matches("unknown")) {
+    Object.assign(toaster, group);
+  }
+  return group;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  groupConnect,
+  toaster
+});

package/dist/toast-group.connect.mjs

@@ -0,0 +1,12 @@
+import {
+  groupConnect,
+  toaster
+} from "./chunk-6MVNQK7B.mjs";
+import "./chunk-GQHI2OMI.mjs";
+import "./chunk-YVYADWQR.mjs";
+import "./chunk-LOJTIJID.mjs";
+import "./chunk-KHVXQ4ZE.mjs";
+export {
+  groupConnect,
+  toaster
+};

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

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