@zag-js/toast 0.10.4 → 0.11.0

package/dist/index.d.mts

@@ -0,0 +1,288 @@
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+import { RootProperties, CommonProperties, Direction, DirectionProperty, Context, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+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>;
+};
+
+declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
+    /**
+     * The total number of toasts
+     */
+    count: number;
+    /**
+     * The active toasts
+     */
+    toasts: Service[];
+    /**
+     * The active toasts by placement
+     */
+    toastsByPlacement: Partial<Record<Placement, Service[]>>;
+    /**
+     * Returns whether the toast id is visible
+     */
+    isVisible(id: string): boolean;
+    /**
+     * Function to create a toast.
+     */
+    create(options: Options): string | undefined;
+    /**
+     * Function to create or update a toast.
+     */
+    upsert(options: Options): string | undefined;
+    /**
+     * Function to dismiss a toast by id.
+     * If no id is provided, all toasts will be dismissed.
+     */
+    dismiss(id?: string): void;
+    /**
+     * Function to remove a toast by id.
+     * If no id is provided, all toasts will be removed.
+     */
+    remove(id?: string): void;
+    /**
+     * Function to dismiss all toasts by placement.
+     */
+    dismissByPlacement(placement: Placement): void;
+    /**
+     * Function to update a toast's options by id.
+     */
+    update(id: string, options: Options): string | undefined;
+    /**
+     * Function to create a loading toast.
+     */
+    loading(options: Options): string | undefined;
+    /**
+     * Function to create a success toast.
+     */
+    success(options: Options): string | undefined;
+    /**
+     * Function to create an error toast.
+     */
+    error(options: Options): string | undefined;
+    /**
+     * Function to create a toast from a promise.
+     * - 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_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
+    /**
+     * Function to pause a toast by id.
+     */
+    pause(id?: string): void;
+    /**
+     * Function to resume a toast by id.
+     */
+    resume(id?: string): void;
+    getGroupProps(options: GroupProps): T["element"];
+    subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
+};
+
+declare function groupMachine(userContext: UserDefinedGroupContext): _zag_js_core.Machine<GroupMachineContext, _zag_js_core.StateMachine.StateSchema, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare function createToastMachine(options?: Options): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "group" | "root" | "description" | "closeTrigger">;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * The type of the toast.
+     */
+    type: Type;
+    /**
+     * The title of the toast.
+     */
+    title: string | undefined;
+    /**
+     *  The description of the toast.
+     */
+    description: string | undefined;
+    /**
+     * The current placement of the toast.
+     */
+    placement: Placement;
+    /**
+     * Whether the toast is visible.
+     */
+    isVisible: boolean;
+    /**
+     * Whether the toast is paused.
+     */
+    isPaused: boolean;
+    /**
+     * Whether the toast is in RTL mode.
+     */
+    isRtl: boolean;
+    /**
+     * Function to pause the toast (keeping it visible).
+     */
+    pause(): void;
+    /**
+     * Function to resume the toast dismissing.
+     */
+    resume(): void;
+    /**
+     * Function to instantly dismiss the toast.
+     */
+    dismiss(): void;
+    /**
+     * Function render the toast in the DOM (based on the defined `render` property)
+     */
+    render(): any;
+    rootProps: T["element"];
+    titleProps: T["element"];
+    descriptionProps: T["element"];
+    closeTriggerProps: T["button"];
+};
+
+declare const group: {
+    connect: typeof groupConnect;
+    machine: typeof groupMachine;
+};
+declare function api(): Toaster | undefined;
+
+export { GroupMachineContext, MachineContext, MachineState, Placement, Service, ToastOptions, Type, anatomy, api, connect, createToastMachine as createMachine, group };

package/dist/index.d.ts

@@ -1,13 +1,288 @@
-import { Toaster } from './toast.types';
-import { groupConnect } from "./toast-group.connect";
-import { groupMachine } from "./toast-group.machine";
-import { createToastMachine as createMachine } from "./toast.machine";
-export { anatomy } from "./toast.anatomy";
-export { connect } from "./toast.connect";
-export type { GroupMachineContext, MachineContext, MachineState, Placement, Service, ToastOptions, Type, } from "./toast.types";
-export { createMachine };
-export declare const group: {
+import * as _zag_js_core from '@zag-js/core';
+import { Machine, StateMachine } from '@zag-js/core';
+import { RootProperties, CommonProperties, Direction, DirectionProperty, Context, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+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>;
+};
+
+declare function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>): {
+    /**
+     * The total number of toasts
+     */
+    count: number;
+    /**
+     * The active toasts
+     */
+    toasts: Service[];
+    /**
+     * The active toasts by placement
+     */
+    toastsByPlacement: Partial<Record<Placement, Service[]>>;
+    /**
+     * Returns whether the toast id is visible
+     */
+    isVisible(id: string): boolean;
+    /**
+     * Function to create a toast.
+     */
+    create(options: Options): string | undefined;
+    /**
+     * Function to create or update a toast.
+     */
+    upsert(options: Options): string | undefined;
+    /**
+     * Function to dismiss a toast by id.
+     * If no id is provided, all toasts will be dismissed.
+     */
+    dismiss(id?: string): void;
+    /**
+     * Function to remove a toast by id.
+     * If no id is provided, all toasts will be removed.
+     */
+    remove(id?: string): void;
+    /**
+     * Function to dismiss all toasts by placement.
+     */
+    dismissByPlacement(placement: Placement): void;
+    /**
+     * Function to update a toast's options by id.
+     */
+    update(id: string, options: Options): string | undefined;
+    /**
+     * Function to create a loading toast.
+     */
+    loading(options: Options): string | undefined;
+    /**
+     * Function to create a success toast.
+     */
+    success(options: Options): string | undefined;
+    /**
+     * Function to create an error toast.
+     */
+    error(options: Options): string | undefined;
+    /**
+     * Function to create a toast from a promise.
+     * - 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_1>(promise: Promise<T_1>, options: PromiseOptions<T_1>, shared?: Options): Promise<T_1>;
+    /**
+     * Function to pause a toast by id.
+     */
+    pause(id?: string): void;
+    /**
+     * Function to resume a toast by id.
+     */
+    resume(id?: string): void;
+    getGroupProps(options: GroupProps): T["element"];
+    subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void): () => void;
+};
+
+declare function groupMachine(userContext: UserDefinedGroupContext): _zag_js_core.Machine<GroupMachineContext, _zag_js_core.StateMachine.StateSchema, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare function createToastMachine(options?: Options): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "group" | "root" | "description" | "closeTrigger">;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * The type of the toast.
+     */
+    type: Type;
+    /**
+     * The title of the toast.
+     */
+    title: string | undefined;
+    /**
+     *  The description of the toast.
+     */
+    description: string | undefined;
+    /**
+     * The current placement of the toast.
+     */
+    placement: Placement;
+    /**
+     * Whether the toast is visible.
+     */
+    isVisible: boolean;
+    /**
+     * Whether the toast is paused.
+     */
+    isPaused: boolean;
+    /**
+     * Whether the toast is in RTL mode.
+     */
+    isRtl: boolean;
+    /**
+     * Function to pause the toast (keeping it visible).
+     */
+    pause(): void;
+    /**
+     * Function to resume the toast dismissing.
+     */
+    resume(): void;
+    /**
+     * Function to instantly dismiss the toast.
+     */
+    dismiss(): void;
+    /**
+     * Function render the toast in the DOM (based on the defined `render` property)
+     */
+    render(): any;
+    rootProps: T["element"];
+    titleProps: T["element"];
+    descriptionProps: T["element"];
+    closeTriggerProps: T["button"];
+};
+
+declare const group: {
     connect: typeof groupConnect;
     machine: typeof groupMachine;
 };
-export declare function api(): Toaster | undefined;
+declare function api(): Toaster | undefined;
+
+export { GroupMachineContext, MachineContext, MachineState, Placement, Service, ToastOptions, Type, anatomy, api, connect, createToastMachine as createMachine, group };