@zag-js/toast 0.9.2 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -17,7 +17,8 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/toast",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -26,12 +27,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.9.2",
-    "@zag-js/core": "0.9.2",
-    "@zag-js/dom-query": "0.9.2",
-    "@zag-js/dom-event": "0.9.2",
-    "@zag-js/utils": "0.9.2",
-    "@zag-js/types": "0.9.2"
+    "@zag-js/anatomy": "0.10.0",
+    "@zag-js/core": "0.10.0",
+    "@zag-js/dom-query": "0.10.0",
+    "@zag-js/dom-event": "0.10.0",
+    "@zag-js/utils": "0.10.0",
+    "@zag-js/types": "0.10.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -0,0 +1,31 @@
+import { isDom } from "@zag-js/dom-query"
+import { warn } from "@zag-js/utils"
+import { groupConnect, toaster } 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 const group = {
+  connect: groupConnect,
+  machine: groupMachine,
+}
+
+export function api() {
+  if (!isDom()) {
+    warn("toast.api() is only available in the browser")
+  } else {
+    return toaster
+  }
+}

package/src/toast-group.connect.ts

@@ -0,0 +1,188 @@
+import { subscribe } from "@zag-js/core"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import { runIfFn, uuid } from "@zag-js/utils"
+import { parts } from "./toast.anatomy"
+import { dom } from "./toast.dom"
+import type {
+  GroupMachineContext,
+  GroupProps,
+  GroupSend,
+  GroupState,
+  Placement,
+  PromiseOptions,
+  Toaster,
+  Options,
+} from "./toast.types"
+import { getGroupPlacementStyle, getToastsByPlacement } from "./toast.utils"
+
+export let toaster = {} as Toaster
+
+export function groupConnect<T extends PropTypes>(state: GroupState, send: GroupSend, normalize: NormalizeProps<T>) {
+  const group = {
+    /**
+     * The total number of toasts
+     */
+    count: state.context.count,
+    /**
+     * The active toasts
+     */
+    toasts: state.context.toasts,
+    /**
+     * The active toasts by placement
+     */
+    toastsByPlacement: getToastsByPlacement(state.context.toasts),
+    /**
+     * Returns whether the toast id is visible
+     */
+    isVisible(id: string) {
+      if (!state.context.toasts.length) return false
+      return !!state.context.toasts.find((toast) => toast.id == id)
+    },
+    /**
+     * Function to create a toast.
+     */
+    create(options: 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
+    },
+    /**
+     * Function to create or update a toast.
+     */
+    upsert(options: 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)
+      }
+    },
+    /**
+     * Function to dismiss a toast by id.
+     * If no id is provided, all toasts will be dismissed.
+     */
+    dismiss(id?: string) {
+      if (id == null) {
+        send("DISMISS_ALL")
+      } else if (group.isVisible(id)) {
+        send({ type: "DISMISS_TOAST", id })
+      }
+    },
+    /**
+     * Function to remove a toast by id.
+     * If no id is provided, all toasts will be removed.
+     */
+    remove(id?: string) {
+      if (id == null) {
+        send("REMOVE_ALL")
+      } else if (group.isVisible(id)) {
+        send({ type: "REMOVE_TOAST", id })
+      }
+    },
+    /**
+     * Function to dismiss all toasts by placement.
+     */
+    dismissByPlacement(placement: Placement) {
+      const toasts = group.toastsByPlacement[placement]
+      if (toasts) {
+        toasts.forEach((toast) => group.dismiss(toast.id))
+      }
+    },
+    /**
+     * Function to update a toast's options by id.
+     */
+    update(id: string, options: Options) {
+      if (!group.isVisible(id)) return
+      send({ type: "UPDATE_TOAST", id, toast: options })
+      return id
+    },
+    /**
+     * Function to create a loading toast.
+     */
+    loading(options: Options) {
+      options.type = "loading"
+      return group.upsert(options)
+    },
+    /**
+     * Function to create a success toast.
+     */
+    success(options: Options) {
+      options.type = "success"
+      return group.upsert(options)
+    },
+    /**
+     * Function to create an error toast.
+     */
+    error(options: Options) {
+      options.type = "error"
+      return group.upsert(options)
+    },
+    /**
+     * 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>(promise: Promise<T>, options: PromiseOptions<T>, shared: Options = {}) {
+      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
+    },
+    /**
+     * Function to pause a toast by id.
+     */
+    pause(id?: string) {
+      if (id == null) {
+        send("PAUSE_ALL")
+      } else if (group.isVisible(id)) {
+        send({ type: "PAUSE_TOAST", id })
+      }
+    },
+    /**
+     * Function to resume a toast by id.
+     */
+    resume(id?: string) {
+      if (id == null) {
+        send("RESUME_ALL")
+      } else if (group.isVisible(id)) {
+        send({ type: "RESUME_TOAST", id })
+      }
+    },
+
+    getGroupProps(options: GroupProps) {
+      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),
+      })
+    },
+
+    subscribe(fn: (toasts: GroupMachineContext["toasts"]) => void) {
+      return subscribe(state.context.toasts, () => fn(state.context.toasts))
+    },
+  }
+
+  Object.assign(toaster, group)
+
+  return group
+}

package/src/toast-group.machine.ts

@@ -0,0 +1,105 @@
+import { createMachine } from "@zag-js/core"
+import { MAX_Z_INDEX } from "@zag-js/dom-query"
+import { compact } from "@zag-js/utils"
+import { createToastMachine } from "./toast.machine"
+import type { GroupMachineContext, UserDefinedGroupContext } from "./toast.types"
+
+export function groupMachine(userContext: UserDefinedGroupContext) {
+  const ctx = compact(userContext)
+  return createMachine<GroupMachineContext>({
+    id: "toaster",
+    initial: "active",
+    context: {
+      dir: "ltr",
+      max: Number.MAX_SAFE_INTEGER,
+      toasts: [],
+      gutter: "1rem",
+      zIndex: MAX_Z_INDEX,
+      pauseOnPageIdle: false,
+      pauseOnInteraction: true,
+      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
+      ...ctx,
+    },
+
+    computed: {
+      count: (ctx) => ctx.toasts.length,
+    },
+
+    on: {
+      SETUP: {},
+
+      PAUSE_TOAST: {
+        actions: (_ctx, evt, { self }) => {
+          self.sendChild("PAUSE", evt.id)
+        },
+      },
+
+      PAUSE_ALL: {
+        actions: (ctx) => {
+          ctx.toasts.forEach((toast) => toast.send("PAUSE"))
+        },
+      },
+
+      RESUME_TOAST: {
+        actions: (_ctx, evt, { self }) => {
+          self.sendChild("RESUME", evt.id)
+        },
+      },
+
+      RESUME_ALL: {
+        actions: (ctx) => {
+          ctx.toasts.forEach((toast) => toast.send("RESUME"))
+        },
+      },
+
+      ADD_TOAST: {
+        guard: (ctx) => ctx.toasts.length < ctx.max,
+        actions: (ctx, evt, { self }) => {
+          const options = {
+            ...evt.toast,
+            pauseOnPageIdle: ctx.pauseOnPageIdle,
+            pauseOnInteraction: ctx.pauseOnInteraction,
+            dir: ctx.dir,
+            getRootNode: ctx.getRootNode,
+          }
+          const toast = createToastMachine(options)
+          const actor = self.spawn(toast)
+          ctx.toasts.push(actor)
+        },
+      },
+
+      UPDATE_TOAST: {
+        actions: (_ctx, evt, { self }) => {
+          self.sendChild({ type: "UPDATE", toast: evt.toast }, evt.id)
+        },
+      },
+
+      DISMISS_TOAST: {
+        actions: (_ctx, evt, { self }) => {
+          self.sendChild("DISMISS", evt.id)
+        },
+      },
+
+      DISMISS_ALL: {
+        actions: (ctx) => {
+          ctx.toasts.forEach((toast) => toast.send("DISMISS"))
+        },
+      },
+
+      REMOVE_TOAST: {
+        actions: (ctx, evt, { self }) => {
+          self.stopChild(evt.id)
+          const index = ctx.toasts.findIndex((toast) => toast.id === evt.id)
+          ctx.toasts.splice(index, 1)
+        },
+      },
+
+      REMOVE_ALL: {
+        actions: (ctx, _evt, { self }) => {
+          ctx.toasts.forEach((toast) => self.stopChild(toast.id))
+          while (ctx.toasts.length) ctx.toasts.pop()
+        },
+      },
+    },
+  })
+}

package/src/toast.anatomy.ts

@@ -0,0 +1,4 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("toast").parts("group", "root", "title", "description", "closeTrigger")
+export const parts = anatomy.build()

package/src/toast.connect.ts

@@ -0,0 +1,143 @@
+import { dataAttr } from "@zag-js/dom-query"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import { parts } from "./toast.anatomy"
+import { dom } from "./toast.dom"
+import type { Send, State } from "./toast.types"
+
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+  const isVisible = state.hasTag("visible")
+  const isPaused = state.hasTag("paused")
+
+  const pauseOnInteraction = state.context.pauseOnInteraction
+  const placement = state.context.placement
+
+  return {
+    /**
+     * The type of the toast.
+     */
+    type: state.context.type,
+    /**
+     * The title of the toast.
+     */
+    title: state.context.title,
+    /**
+     *  The description of the toast.
+     */
+    description: state.context.description,
+    /**
+     * The current placement of the toast.
+     */
+    placement,
+    /**
+     * Whether the toast is visible.
+     */
+    isVisible,
+    /**
+     * Whether the toast is paused.
+     */
+    isPaused,
+    /**
+     * Whether the toast is in RTL mode.
+     */
+    isRtl: state.context.dir === "rtl",
+    /**
+     * Function to pause the toast (keeping it visible).
+     */
+    pause() {
+      send("PAUSE")
+    },
+    /**
+     * Function to resume the toast dismissing.
+     */
+    resume() {
+      send("RESUME")
+    },
+    /**
+     * Function to instantly dismiss the toast.
+     */
+    dismiss() {
+      send("DISMISS")
+    },
+    /**
+     * Function render the toast in the DOM (based on the defined `render` property)
+     */
+    render() {
+      return state.context.render?.({
+        id: state.context.id,
+        type: state.context.type,
+        duration: state.context.duration,
+        title: state.context.title,
+        placement: state.context.placement,
+        description: state.context.description,
+        dismiss() {
+          send("DISMISS")
+        },
+      })
+    },
+
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      dir: state.context.dir,
+      id: dom.getRootId(state.context),
+      "data-open": dataAttr(isVisible),
+      "data-type": state.context.type,
+      "data-placement": placement,
+      role: "status",
+      "aria-atomic": "true",
+      tabIndex: 0,
+      style: {
+        position: "relative",
+        pointerEvents: "auto",
+        margin: "calc(var(--toast-gutter) / 2)",
+        "--remove-delay": `${state.context.removeDelay}ms`,
+        "--duration": `${state.context.duration}ms`,
+      },
+      onKeyDown(event) {
+        if (event.key == "Escape") {
+          send("DISMISS")
+          event.preventDefault()
+        }
+      },
+      onFocus() {
+        if (pauseOnInteraction) {
+          send("PAUSE")
+        }
+      },
+      onBlur() {
+        if (pauseOnInteraction) {
+          send("RESUME")
+        }
+      },
+      onPointerEnter() {
+        if (pauseOnInteraction) {
+          send("PAUSE")
+        }
+      },
+      onPointerLeave() {
+        if (pauseOnInteraction) {
+          send("RESUME")
+        }
+      },
+    }),
+
+    titleProps: normalize.element({
+      ...parts.title.attrs,
+      id: dom.getTitleId(state.context),
+    }),
+
+    descriptionProps: normalize.element({
+      ...parts.description.attrs,
+      id: dom.getDescriptionId(state.context),
+    }),
+
+    closeTriggerProps: normalize.button({
+      id: dom.getCloseTriggerId(state.context),
+      ...parts.closeTrigger.attrs,
+      type: "button",
+      "aria-label": "Dismiss notification",
+      onClick() {
+        send("DISMISS")
+      },
+    }),
+  }
+}

package/src/toast.dom.ts

@@ -0,0 +1,11 @@
+import { createScope } from "@zag-js/dom-query"
+import type { GroupMachineContext as GroupCtx, MachineContext as Ctx, Placement } from "./toast.types"
+
+export const dom = createScope({
+  getGroupId: (placement: Placement) => `toast-group:${placement}`,
+  getRootId: (ctx: Ctx) => `toast:${ctx.id}`,
+  getTitleId: (ctx: Ctx) => `toast:${ctx.id}:title`,
+  getDescriptionId: (ctx: Ctx) => `toast:${ctx.id}:description`,
+  getCloseTriggerId: (ctx: Ctx) => `toast${ctx.id}:close`,
+  getPortalId: (ctx: GroupCtx) => `toast-portal:${ctx.id}`,
+})

package/src/toast.machine.ts

@@ -0,0 +1,155 @@
+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"
+import type { MachineContext, MachineState, Options } from "./toast.types"
+import { getToastDuration } from "./toast.utils"
+
+const { not, and, or } = guards
+
+export function createToastMachine(options: Options = {}) {
+  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options
+  const ctx = compact(restProps)
+
+  const computedDuration = getToastDuration(duration, type)
+
+  return createMachine<MachineContext, MachineState>(
+    {
+      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(ctx, _evt, { send }) {
+          if (!ctx.pauseOnPageIdle) return
+          const doc = dom.getDoc(ctx)
+          return addDomEvent(doc, "visibilitychange", () => {
+            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME")
+          })
+        },
+      },
+
+      guards: {
+        isChangingToLoading: (_, evt) => evt.toast?.type === "loading",
+        isLoadingType: (ctx) => ctx.type === "loading",
+        hasTypeChanged: (ctx, evt) => evt.toast?.type !== ctx.type,
+        hasDurationChanged: (ctx, evt) => evt.toast?.duration !== ctx.duration,
+      },
+
+      delays: {
+        VISIBLE_DURATION: (ctx) => ctx.remaining,
+        REMOVE_DELAY: (ctx) => ctx.removeDelay,
+      },
+
+      actions: {
+        setRemainingDuration(ctx) {
+          ctx.remaining -= Date.now() - ctx.createdAt
+        },
+        setCreatedAt(ctx) {
+          ctx.createdAt = Date.now()
+        },
+        notifyParentToRemove(_ctx, _evt, { self }) {
+          self.sendParent({ type: "REMOVE_TOAST", id: self.id })
+        },
+        invokeOnClosing(ctx) {
+          ctx.onClosing?.()
+        },
+        invokeOnClose(ctx) {
+          ctx.onClose?.()
+        },
+        invokeOnOpen(ctx) {
+          ctx.onOpen?.()
+        },
+        invokeOnUpdate(ctx) {
+          ctx.onUpdate?.()
+        },
+        setContext(ctx, evt) {
+          const { duration, type } = evt.toast
+          const time = getToastDuration(duration, type)
+          Object.assign(ctx, { ...evt.toast, duration: time, remaining: time })
+        },
+      },
+    },
+  )
+}

package/src/toast.types.ts

@@ -0,0 +1,180 @@
+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<{
+  /**
+   * @internal
+   * The child toast machines (spawned by the toast group)
+   */
+  toasts: Service[]
+}>
+
+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>
+}

package/src/toast.utils.ts

@@ -0,0 +1,77 @@
+import type { Style } from "@zag-js/types"
+import type { GroupMachineContext, MachineContext, Placement, Service, Type } from "./toast.types"
+
+export function getToastsByPlacement(toasts: Service[]) {
+  const result: Partial<Record<Placement, Service[]>> = {}
+
+  for (const toast of toasts) {
+    const placement = toast.state.context.placement!
+    result[placement] ||= []
+    result[placement]!.push(toast)
+  }
+
+  return result
+}
+
+export const defaultTimeouts: Record<Type, number> = {
+  info: 5000,
+  error: 5000,
+  success: 2000,
+  loading: Infinity,
+  custom: 5000,
+}
+
+export function getToastDuration(duration: number | undefined, type: MachineContext["type"]) {
+  return duration ?? defaultTimeouts[type]
+}
+
+export function getGroupPlacementStyle(ctx: GroupMachineContext, placement: Placement): Style {
+  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: Style = {
+    position: "fixed",
+    pointerEvents: ctx.count > 0 ? undefined : "none",
+    display: "flex",
+    flexDirection: "column",
+    "--toast-gutter": ctx.gutter,
+    zIndex: ctx.zIndex,
+  }
+
+  let alignItems: Style["alignItems"] = "center"
+  if (isRighty) alignItems = "flex-end"
+  if (isLefty) alignItems = "flex-start"
+
+  styles.alignItems = alignItems
+
+  if (computedPlacement.includes("top")) {
+    const offset = computedOffset.top
+    styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset})`
+  }
+
+  if (computedPlacement.includes("bottom")) {
+    const offset = computedOffset.bottom
+    styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset})`
+  }
+
+  if (!computedPlacement.includes("left")) {
+    const offset = computedOffset.right
+    styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset})`
+  }
+
+  if (!computedPlacement.includes("right")) {
+    const offset = computedOffset.left
+    styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset})`
+  }
+
+  return styles
+}