@zag-js/toast 0.45.0 → 0.47.0

package/dist/index.d.mts

@@ -3,36 +3,23 @@ import * as _zag_js_core from '@zag-js/core';
 import { Machine, StateMachine } from '@zag-js/core';
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-type Type = "success" | "error" | "loading" | "info" | "custom";
+type Type = "success" | "error" | "loading" | "info" | (string & {});
 type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
-interface GenericOptions {
-    render?: (api: any) => any;
-    title?: any;
-    description?: any;
-}
-interface DefaultGenericOptions {
-    /**
-     * Custom function to render the toast element.
-     */
-    render?: (api: MachineApi<any, DefaultGenericOptions>) => any;
+type Status = "visible" | "dismissing" | "unmounted";
+interface GenericOptions<T = string> {
     /**
      * The title of the toast.
      */
-    title?: string;
+    title?: T;
     /**
      * The description of the toast.
      */
-    description?: string;
+    description?: T;
 }
-type GlobalToastOptions<T extends GenericOptions> = Pick<T, "render"> & {
-    /**
-     * Whether to pause toast when the user leaves the browser tab
-     */
-    pauseOnPageIdle?: boolean;
-    /**
-     * Whether to pause the toast when interacted with
-     */
-    pauseOnInteraction?: boolean;
+interface StatusChangeDetails {
+    status: Status;
+}
+interface Options<T> extends GenericOptions<T> {
     /**
      * The duration the toast will be visible
      */
@@ -46,35 +33,24 @@ type GlobalToastOptions<T extends GenericOptions> = Pick<T, "render"> & {
      * The placement of the toast
      */
     placement?: Placement;
-};
-type ToastOptions<T extends GenericOptions = DefaultGenericOptions> = T & {
     /**
      * The unique id of the toast
      */
-    id: string;
+    id?: string;
     /**
      * The type of the toast
      */
-    type: Type;
-    /**
-     * Function called when the toast has been closed and removed
-     */
-    onClose?: VoidFunction;
+    type?: Type;
     /**
-     * Function called when the toast is leaving
+     * Function called when the toast is visible
      */
-    onClosing?: VoidFunction;
+    onStatusChange?(details: StatusChangeDetails): void;
     /**
-     * Function called when the toast is shown
+     * The metadata of the toast
      */
-    onOpen?: VoidFunction;
-    /**
-     * Function called when the toast is updated
-     */
-    onUpdate?: VoidFunction;
-};
-type Options<T extends GenericOptions> = Partial<ToastOptions<T> & GlobalToastOptions<T>>;
-type MachineContext<T extends GenericOptions = DefaultGenericOptions> = GlobalToastOptions<T> & CommonProperties & Omit<ToastOptions<T>, "removeDelay"> & {
+    meta?: Record<string, unknown>;
+}
+interface MachineContext<T = any> extends Omit<CommonProperties, "id">, MachinePrivateContext, Omit<Options<T>, "removeDelay"> {
     /**
      * The duration for the toast to kept alive before it is removed.
      * Useful for exit transitions.
@@ -92,23 +68,25 @@ type MachineContext<T extends GenericOptions = DefaultGenericOptions> = GlobalTo
      * The time left before the toast is removed
      */
     remaining: number;
-};
+}
+interface MachinePrivateContext {
+}
 interface MachineState {
-    value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
+    value: "visible" | "visible:updating" | "dismissing" | "unmounted" | "visible:persist";
     tags: "visible" | "paused" | "updating";
 }
-type State<T extends GenericOptions = DefaultGenericOptions> = StateMachine.State<MachineContext<T>, MachineState>;
+type State<T = any> = StateMachine.State<MachineContext<T>, MachineState>;
 type Send = StateMachine.Send;
-type Service<T extends GenericOptions = DefaultGenericOptions> = Machine<MachineContext<T>, MachineState>;
-type GroupPublicContext<T extends GenericOptions> = GlobalToastOptions<T> & DirectionProperty & CommonProperties & {
+type Service<T = any> = Machine<MachineContext<T>, MachineState>;
+interface GroupPublicContext extends DirectionProperty, CommonProperties {
     /**
-     * The gutter or spacing between toasts
+     * Whether to pause toast when the user leaves the browser tab
      */
-    gutter: string;
+    pauseOnPageIdle: boolean;
     /**
-     * The z-index applied to each toast group
+     * The gap or spacing between toasts
      */
-    zIndex: number;
+    gap: number;
     /**
      * The maximum number of toasts that can be shown at once
      */
@@ -117,8 +95,30 @@ type GroupPublicContext<T extends GenericOptions> = GlobalToastOptions<T> & Dire
      * The offset from the safe environment edge of the viewport
      */
     offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
-};
-type UserDefinedGroupContext<T extends GenericOptions> = RequiredBy<GroupPublicContext<T>, "id">;
+    /**
+     * The hotkey that will move focus to the toast group
+     */
+    hotkey: string[];
+    /**
+     * Whether the toasts should overlap each other
+     */
+    overlap?: boolean;
+    /**
+     * The placement of the toast
+     */
+    placement: Placement;
+    /**
+     * The duration for the toast to kept alive before it is removed.
+     * Useful for exit transitions.
+     */
+    removeDelay: number;
+    /**
+     * The duration the toast will be visible
+     */
+    duration?: number;
+}
+interface UserDefinedGroupContext extends RequiredBy<GroupPublicContext, "id"> {
+}
 type GroupComputedContext = Readonly<{
     /**
      * @computed
@@ -126,35 +126,46 @@ type GroupComputedContext = Readonly<{
      */
     count: number;
 }>;
-interface GroupPrivateContext<T extends GenericOptions> {
+interface GroupPrivateContext<T> extends GenericOptions<T> {
+}
+interface GroupMachineContext<T = any> extends GroupPublicContext, GroupPrivateContext<T>, GroupComputedContext {
 }
-interface GroupMachineContext<T extends GenericOptions = DefaultGenericOptions> extends GroupPublicContext<T>, GroupComputedContext, GroupPrivateContext<T> {
+interface GroupMachineState {
+    value: "stack" | "overlap";
 }
-type GroupState<T extends GenericOptions = DefaultGenericOptions> = StateMachine.State<GroupMachineContext<T>>;
+type GroupState<T = any> = StateMachine.State<GroupMachineContext<T>>;
 type GroupSend = StateMachine.Send;
+type GroupService<T = any> = Machine<GroupMachineContext<T>, GroupMachineState>;
 type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
-interface PromiseOptions<V, O extends GenericOptions = DefaultGenericOptions> {
-    loading: ToastOptions<O>;
-    success: MaybeFunction<ToastOptions<O>, V>;
-    error: MaybeFunction<ToastOptions<O>, Error>;
+interface PromiseOptions<V, O = any> {
+    loading: Options<O>;
+    success: MaybeFunction<Options<O>, V>;
+    error: MaybeFunction<Options<O>, Error>;
+    finally?: () => void | Promise<void>;
 }
 interface GroupProps {
+    /**
+     * The placement of the toast region
+     */
     placement: Placement;
+    /**
+     * The human-readable label for the toast region
+     */
     label?: string;
 }
-interface GroupMachineApi<T extends PropTypes = PropTypes, O extends GenericOptions = DefaultGenericOptions> {
+interface GroupMachineApi<T extends PropTypes = PropTypes, O = any> {
     /**
      * The total number of toasts
      */
-    count: number;
+    getCount(): number;
     /**
-     * The active toasts
+     * The placements of the active toasts
      */
-    toasts: Service<O>[];
+    getPlacements(): Placement[];
     /**
      * The active toasts by placement
      */
-    toastsByPlacement: Partial<Record<Placement, Service<O>[]>>;
+    getToastsByPlacement(placement: Placement): Service<O>[];
     /**
      * Returns whether the toast id is visible
      */
@@ -210,14 +221,14 @@ interface GroupMachineApi<T extends PropTypes = PropTypes, O extends GenericOpti
      * - 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<T>(promise: Promise<T>, options: PromiseOptions<T, O>, shared?: Partial<ToastOptions<O>>): Promise<T>;
+    promise<T>(promise: Promise<T> | (() => Promise<T>), options: PromiseOptions<T, O>, shared?: Partial<Options<O>>): string;
     /**
      * Function to subscribe to the toast group.
      */
-    subscribe(callback: (toasts: Service<O>[]) => void): VoidFunction;
+    subscribe(callback: (toasts: Options<O>[]) => void): VoidFunction;
     getGroupProps(options: GroupProps): T["element"];
 }
-type MachineApi<T extends PropTypes = PropTypes, O extends GenericOptions = DefaultGenericOptions> = Pick<O, "title" | "description"> & {
+interface MachineApi<T extends PropTypes = PropTypes, O = any> extends GenericOptions<O> {
     /**
      * The type of the toast.
      */
@@ -252,23 +263,26 @@ type MachineApi<T extends PropTypes = PropTypes, O extends GenericOptions = Defa
     dismiss(): void;
     rootProps: T["element"];
     titleProps: T["element"];
+    ghostBeforeProps: T["element"];
+    ghostAfterProps: T["element"];
     descriptionProps: T["element"];
     closeTriggerProps: T["button"];
-};
+    actionTriggerProps: T["button"];
+}
 
-declare function groupConnect<T extends PropTypes, O extends GenericOptions = DefaultGenericOptions>(state: GroupState<O>, send: GroupSend, normalize: NormalizeProps<T>): GroupMachineApi<T, O>;
+declare function groupConnect<T extends PropTypes, O = any>(serviceOrState: GroupState<O> | GroupService<O>, send: GroupSend, normalize: NormalizeProps<T>): GroupMachineApi<T, O>;
 
-declare function groupMachine<T extends GenericOptions>(userContext: UserDefinedGroupContext<T>): _zag_js_core.Machine<GroupMachineContext<T>, _zag_js_core.StateMachine.StateSchema, _zag_js_core.StateMachine.AnyEventObject>;
+declare function groupMachine<T = any>(userContext: UserDefinedGroupContext): _zag_js_core.Machine<GroupMachineContext<T>, GroupMachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare function createToastMachine<T extends GenericOptions = DefaultGenericOptions>(options?: Options<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare function createToastMachine<T>(options: Options<T>): _zag_js_core.Machine<MachineContext<T>, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "closeTrigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "group" | "root" | "description" | "actionTrigger" | "closeTrigger">;
 
-declare function connect<T extends PropTypes, O extends GenericOptions>(state: State<O>, send: Send, normalize: NormalizeProps<T>): MachineApi<T, O>;
+declare function connect<T extends PropTypes, O>(state: State<O>, send: Send, normalize: NormalizeProps<T>): MachineApi<T, O>;
 
 declare const group: {
     connect: typeof groupConnect;
     machine: typeof groupMachine;
 };
 
-export { type MachineApi as Api, type DefaultGenericOptions, type GenericOptions, type GroupMachineApi as GroupApi, type GroupMachineContext, type GroupProps, type GroupState, type MachineContext, type Placement, type PromiseOptions, type Service, type ToastOptions, type Type, anatomy, connect, createToastMachine as createMachine, group };
+export { type MachineApi as Api, type GenericOptions, type GroupMachineApi as GroupApi, type GroupMachineContext, type GroupProps, type GroupService, type GroupState, type MachineContext, type Options, type Placement, type PromiseOptions, type Service, type Status, type StatusChangeDetails, type Type, anatomy, connect, createToastMachine as createMachine, group };

package/dist/index.d.ts

@@ -3,36 +3,23 @@ import * as _zag_js_core from '@zag-js/core';
 import { Machine, StateMachine } from '@zag-js/core';
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-type Type = "success" | "error" | "loading" | "info" | "custom";
+type Type = "success" | "error" | "loading" | "info" | (string & {});
 type Placement = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
-interface GenericOptions {
-    render?: (api: any) => any;
-    title?: any;
-    description?: any;
-}
-interface DefaultGenericOptions {
-    /**
-     * Custom function to render the toast element.
-     */
-    render?: (api: MachineApi<any, DefaultGenericOptions>) => any;
+type Status = "visible" | "dismissing" | "unmounted";
+interface GenericOptions<T = string> {
     /**
      * The title of the toast.
      */
-    title?: string;
+    title?: T;
     /**
      * The description of the toast.
      */
-    description?: string;
+    description?: T;
 }
-type GlobalToastOptions<T extends GenericOptions> = Pick<T, "render"> & {
-    /**
-     * Whether to pause toast when the user leaves the browser tab
-     */
-    pauseOnPageIdle?: boolean;
-    /**
-     * Whether to pause the toast when interacted with
-     */
-    pauseOnInteraction?: boolean;
+interface StatusChangeDetails {
+    status: Status;
+}
+interface Options<T> extends GenericOptions<T> {
     /**
      * The duration the toast will be visible
      */
@@ -46,35 +33,24 @@ type GlobalToastOptions<T extends GenericOptions> = Pick<T, "render"> & {
      * The placement of the toast
      */
     placement?: Placement;
-};
-type ToastOptions<T extends GenericOptions = DefaultGenericOptions> = T & {
     /**
      * The unique id of the toast
      */
-    id: string;
+    id?: string;
     /**
      * The type of the toast
      */
-    type: Type;
-    /**
-     * Function called when the toast has been closed and removed
-     */
-    onClose?: VoidFunction;
+    type?: Type;
     /**
-     * Function called when the toast is leaving
+     * Function called when the toast is visible
      */
-    onClosing?: VoidFunction;
+    onStatusChange?(details: StatusChangeDetails): void;
     /**
-     * Function called when the toast is shown
+     * The metadata of the toast
      */
-    onOpen?: VoidFunction;
-    /**
-     * Function called when the toast is updated
-     */
-    onUpdate?: VoidFunction;
-};
-type Options<T extends GenericOptions> = Partial<ToastOptions<T> & GlobalToastOptions<T>>;
-type MachineContext<T extends GenericOptions = DefaultGenericOptions> = GlobalToastOptions<T> & CommonProperties & Omit<ToastOptions<T>, "removeDelay"> & {
+    meta?: Record<string, unknown>;
+}
+interface MachineContext<T = any> extends Omit<CommonProperties, "id">, MachinePrivateContext, Omit<Options<T>, "removeDelay"> {
     /**
      * The duration for the toast to kept alive before it is removed.
      * Useful for exit transitions.
@@ -92,23 +68,25 @@ type MachineContext<T extends GenericOptions = DefaultGenericOptions> = GlobalTo
      * The time left before the toast is removed
      */
     remaining: number;
-};
+}
+interface MachinePrivateContext {
+}
 interface MachineState {
-    value: "active" | "active:temp" | "dismissing" | "inactive" | "persist";
+    value: "visible" | "visible:updating" | "dismissing" | "unmounted" | "visible:persist";
     tags: "visible" | "paused" | "updating";
 }
-type State<T extends GenericOptions = DefaultGenericOptions> = StateMachine.State<MachineContext<T>, MachineState>;
+type State<T = any> = StateMachine.State<MachineContext<T>, MachineState>;
 type Send = StateMachine.Send;
-type Service<T extends GenericOptions = DefaultGenericOptions> = Machine<MachineContext<T>, MachineState>;
-type GroupPublicContext<T extends GenericOptions> = GlobalToastOptions<T> & DirectionProperty & CommonProperties & {
+type Service<T = any> = Machine<MachineContext<T>, MachineState>;
+interface GroupPublicContext extends DirectionProperty, CommonProperties {
     /**
-     * The gutter or spacing between toasts
+     * Whether to pause toast when the user leaves the browser tab
      */
-    gutter: string;
+    pauseOnPageIdle: boolean;
     /**
-     * The z-index applied to each toast group
+     * The gap or spacing between toasts
      */
-    zIndex: number;
+    gap: number;
     /**
      * The maximum number of toasts that can be shown at once
      */
@@ -117,8 +95,30 @@ type GroupPublicContext<T extends GenericOptions> = GlobalToastOptions<T> & Dire
      * The offset from the safe environment edge of the viewport
      */
     offsets: string | Record<"left" | "right" | "bottom" | "top", string>;
-};
-type UserDefinedGroupContext<T extends GenericOptions> = RequiredBy<GroupPublicContext<T>, "id">;
+    /**
+     * The hotkey that will move focus to the toast group
+     */
+    hotkey: string[];
+    /**
+     * Whether the toasts should overlap each other
+     */
+    overlap?: boolean;
+    /**
+     * The placement of the toast
+     */
+    placement: Placement;
+    /**
+     * The duration for the toast to kept alive before it is removed.
+     * Useful for exit transitions.
+     */
+    removeDelay: number;
+    /**
+     * The duration the toast will be visible
+     */
+    duration?: number;
+}
+interface UserDefinedGroupContext extends RequiredBy<GroupPublicContext, "id"> {
+}
 type GroupComputedContext = Readonly<{
     /**
      * @computed
@@ -126,35 +126,46 @@ type GroupComputedContext = Readonly<{
      */
     count: number;
 }>;
-interface GroupPrivateContext<T extends GenericOptions> {
+interface GroupPrivateContext<T> extends GenericOptions<T> {
+}
+interface GroupMachineContext<T = any> extends GroupPublicContext, GroupPrivateContext<T>, GroupComputedContext {
 }
-interface GroupMachineContext<T extends GenericOptions = DefaultGenericOptions> extends GroupPublicContext<T>, GroupComputedContext, GroupPrivateContext<T> {
+interface GroupMachineState {
+    value: "stack" | "overlap";
 }
-type GroupState<T extends GenericOptions = DefaultGenericOptions> = StateMachine.State<GroupMachineContext<T>>;
+type GroupState<T = any> = StateMachine.State<GroupMachineContext<T>>;
 type GroupSend = StateMachine.Send;
+type GroupService<T = any> = Machine<GroupMachineContext<T>, GroupMachineState>;
 type MaybeFunction<Value, Args> = Value | ((arg: Args) => Value);
-interface PromiseOptions<V, O extends GenericOptions = DefaultGenericOptions> {
-    loading: ToastOptions<O>;
-    success: MaybeFunction<ToastOptions<O>, V>;
-    error: MaybeFunction<ToastOptions<O>, Error>;
+interface PromiseOptions<V, O = any> {
+    loading: Options<O>;
+    success: MaybeFunction<Options<O>, V>;
+    error: MaybeFunction<Options<O>, Error>;
+    finally?: () => void | Promise<void>;
 }
 interface GroupProps {
+    /**
+     * The placement of the toast region
+     */
     placement: Placement;
+    /**
+     * The human-readable label for the toast region
+     */
     label?: string;
 }
-interface GroupMachineApi<T extends PropTypes = PropTypes, O extends GenericOptions = DefaultGenericOptions> {
+interface GroupMachineApi<T extends PropTypes = PropTypes, O = any> {
     /**
      * The total number of toasts
      */
-    count: number;
+    getCount(): number;
     /**
-     * The active toasts
+     * The placements of the active toasts
      */
-    toasts: Service<O>[];
+    getPlacements(): Placement[];
     /**
      * The active toasts by placement
      */
-    toastsByPlacement: Partial<Record<Placement, Service<O>[]>>;
+    getToastsByPlacement(placement: Placement): Service<O>[];
     /**
      * Returns whether the toast id is visible
      */
@@ -210,14 +221,14 @@ interface GroupMachineApi<T extends PropTypes = PropTypes, O extends GenericOpti
      * - 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<T>(promise: Promise<T>, options: PromiseOptions<T, O>, shared?: Partial<ToastOptions<O>>): Promise<T>;
+    promise<T>(promise: Promise<T> | (() => Promise<T>), options: PromiseOptions<T, O>, shared?: Partial<Options<O>>): string;
     /**
      * Function to subscribe to the toast group.
      */
-    subscribe(callback: (toasts: Service<O>[]) => void): VoidFunction;
+    subscribe(callback: (toasts: Options<O>[]) => void): VoidFunction;
     getGroupProps(options: GroupProps): T["element"];
 }
-type MachineApi<T extends PropTypes = PropTypes, O extends GenericOptions = DefaultGenericOptions> = Pick<O, "title" | "description"> & {
+interface MachineApi<T extends PropTypes = PropTypes, O = any> extends GenericOptions<O> {
     /**
      * The type of the toast.
      */
@@ -252,23 +263,26 @@ type MachineApi<T extends PropTypes = PropTypes, O extends GenericOptions = Defa
     dismiss(): void;
     rootProps: T["element"];
     titleProps: T["element"];
+    ghostBeforeProps: T["element"];
+    ghostAfterProps: T["element"];
     descriptionProps: T["element"];
     closeTriggerProps: T["button"];
-};
+    actionTriggerProps: T["button"];
+}
 
-declare function groupConnect<T extends PropTypes, O extends GenericOptions = DefaultGenericOptions>(state: GroupState<O>, send: GroupSend, normalize: NormalizeProps<T>): GroupMachineApi<T, O>;
+declare function groupConnect<T extends PropTypes, O = any>(serviceOrState: GroupState<O> | GroupService<O>, send: GroupSend, normalize: NormalizeProps<T>): GroupMachineApi<T, O>;
 
-declare function groupMachine<T extends GenericOptions>(userContext: UserDefinedGroupContext<T>): _zag_js_core.Machine<GroupMachineContext<T>, _zag_js_core.StateMachine.StateSchema, _zag_js_core.StateMachine.AnyEventObject>;
+declare function groupMachine<T = any>(userContext: UserDefinedGroupContext): _zag_js_core.Machine<GroupMachineContext<T>, GroupMachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare function createToastMachine<T extends GenericOptions = DefaultGenericOptions>(options?: Options<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare function createToastMachine<T>(options: Options<T>): _zag_js_core.Machine<MachineContext<T>, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "closeTrigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "group" | "root" | "description" | "actionTrigger" | "closeTrigger">;
 
-declare function connect<T extends PropTypes, O extends GenericOptions>(state: State<O>, send: Send, normalize: NormalizeProps<T>): MachineApi<T, O>;
+declare function connect<T extends PropTypes, O>(state: State<O>, send: Send, normalize: NormalizeProps<T>): MachineApi<T, O>;
 
 declare const group: {
     connect: typeof groupConnect;
     machine: typeof groupMachine;
 };
 
-export { type MachineApi as Api, type DefaultGenericOptions, type GenericOptions, type GroupMachineApi as GroupApi, type GroupMachineContext, type GroupProps, type GroupState, type MachineContext, type Placement, type PromiseOptions, type Service, type ToastOptions, type Type, anatomy, connect, createToastMachine as createMachine, group };
+export { type MachineApi as Api, type GenericOptions, type GroupMachineApi as GroupApi, type GroupMachineContext, type GroupProps, type GroupService, type GroupState, type MachineContext, type Options, type Placement, type PromiseOptions, type Service, type Status, type StatusChangeDetails, type Type, anatomy, connect, createToastMachine as createMachine, group };