@zag-js/toast 0.10.4 → 0.11.0

package/dist/toast.machine.mjs

@@ -1,145 +0,0 @@
-import { createMachine, guards } from '@zag-js/core';
-import { addDomEvent } from '@zag-js/dom-event';
-import { compact } from '@zag-js/utils';
-import { dom } from './toast.dom.mjs';
-import { getToastDuration } from './toast.utils.mjs';
-
-const { not, and, or } = 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 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 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 });
-        }
-      }
-    }
-  );
-}
-
-export { createToastMachine };

package/dist/toast.types.d.ts

@@ -1,148 +0,0 @@
-import type { Machine, StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, Direction, DirectionProperty, RequiredBy, RootProperties } from "@zag-js/types";
-export type Type = "success" | "error" | "loading" | "info" | "custom";
-export 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;
-};
-export 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;
-};
-export type Options = Partial<ToastOptions>;
-export type RenderOptions = Omit<ToastOptions, "render"> & {
-    dismiss(): void;
-};
-export 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;
-};
-export type MachineState = {
-    value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
-    tags: "visible" | "paused" | "updating";
-};
-export type State = S.State<MachineContext, MachineState>;
-export type Send = S.Send;
-export 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>;
-};
-export type UserDefinedGroupContext = RequiredBy<GroupPublicContext, "id">;
-type GroupComputedContext = Readonly<{
-    /**
-     * @computed
-     * The total number of toasts in the group
-     */
-    readonly count: number;
-}>;
-type GroupPrivateContext = Context<{}>;
-export type GroupMachineContext = GroupPublicContext & GroupComputedContext & GroupPrivateContext;
-export type GroupState = S.State<GroupMachineContext>;
-export type GroupSend = (event: S.Event<S.AnyEventObject>) => void;
-type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
-export type PromiseOptions<Value> = {
-    loading: ToastOptions;
-    success: MaybeFunction<ToastOptions, Value>;
-    error: MaybeFunction<ToastOptions, Error>;
-};
-export type GroupProps = {
-    placement: Placement;
-    label?: string;
-};
-export 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 {};

package/dist/toast.utils.d.ts

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

package/dist/toast.utils.js

@@ -1,67 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-function getToastsByPlacement(toasts) {
-  const result = {};
-  for (const toast of toasts) {
-    const placement = toast.state.context.placement;
-    result[placement] ||= [];
-    result[placement].push(toast);
-  }
-  return result;
-}
-const defaultTimeouts = {
-  info: 5e3,
-  error: 5e3,
-  success: 2e3,
-  loading: Infinity,
-  custom: 5e3
-};
-function getToastDuration(duration, type) {
-  return duration ?? defaultTimeouts[type];
-}
-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;
-}
-
-exports.defaultTimeouts = defaultTimeouts;
-exports.getGroupPlacementStyle = getGroupPlacementStyle;
-exports.getToastDuration = getToastDuration;
-exports.getToastsByPlacement = getToastsByPlacement;

package/dist/toast.utils.mjs

@@ -1,60 +0,0 @@
-function getToastsByPlacement(toasts) {
-  const result = {};
-  for (const toast of toasts) {
-    const placement = toast.state.context.placement;
-    result[placement] ||= [];
-    result[placement].push(toast);
-  }
-  return result;
-}
-const defaultTimeouts = {
-  info: 5e3,
-  error: 5e3,
-  success: 2e3,
-  loading: Infinity,
-  custom: 5e3
-};
-function getToastDuration(duration, type) {
-  return duration ?? defaultTimeouts[type];
-}
-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;
-}
-
-export { defaultTimeouts, getGroupPlacementStyle, getToastDuration, getToastsByPlacement };