/** * Unique identifier assigned to each toast instance. */ type ToastId = string; /** * Supported viewport anchors where toasts can stack. */ type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"; /** * Supported toast data alignments. */ type ToastAlignment = "left" | "right"; /** * Supported toast progress alignments. */ type ToastProgressAlignment = "left-to-right" | "right-to-left"; /** * Order to display and evict toasts in a stack. */ type ToastOrder = "newest" | "oldest"; /** * Determines how the timer behaves after an interaction pause. */ type PauseStrategy = "resume" | "reset"; /** * Semantic type that controls the toast's appearance. */ type ToastType = "loading" | "default" | "success" | "error" | "info" | "warning" | "custom"; /** * Internal lifecycle markers used for animations and cleanup. */ type ToastPhase = "enter" | "leaving" | "clear-all"; /** * Event kinds emitted to event subscribers. */ type ToastEventKind = "duplicate" | "timer-reset" | "update"; /** * Payload emitted whenever the store dispatches a toast event. */ interface ToastEvent { id: ToastId; kind: ToastEventKind; } /** * Async work passed to the loading helper. */ type ToastLoadingInput = Promise | (() => Promise); /** * Text and rendering options for the loading helper phases. */ interface ToastLoadingConfig { loading: ToastContentInput; success: ToastLoadingRender; error: ToastLoadingRender; } /** * CSS class names used to animate toasts. */ interface ToastAnimation { name: string; bump: string; clearAll: string; update: string; } /** * Minimal context shared with lifecycle and click callbacks. */ interface ToastContext { id: ToastId; position: ToastPosition; type: ToastType; title: string; description: string; createdAt: number; } /** * Supported alignments for in-toast button groups. */ type ToastButtonsAlignment = "top-left" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-right"; /** * Layout direction for action buttons. */ type ToastButtonsLayout = "row" | "column"; /** * Single action button rendered inside a toast. * Use `label` for plain text or `html`. */ type ToastButton = ToastButtonText | ToastButtonHtml; interface ToastButtonBase { /** * Optional identifier you can use as a stable key in renderers. */ id?: string; /** * Accessible label for icon-only buttons or custom HTML. */ ariaLabel?: string; /** * Optional CSS class. */ className?: string; /** * Called when the button is clicked. */ onClick?(ctx: ToastContext, event: MouseEvent): void; } interface ToastButtonText extends ToastButtonBase { label: string; html?: never; } interface ToastButtonHtml extends ToastButtonBase { html: string; label?: never; } /** * Button group configuration for a toast. */ interface ToastButtonsConfig { /** * Placement of the button group around the toast content. (Default: "bottom-right") */ alignment?: ToastButtonsAlignment; /** * Button stack direction. (Default: "row") */ layout?: ToastButtonsLayout; /** * Buttons to render in the group. (Default: []) */ buttons?: ToastButton[]; /** * Gap between individual buttons. (Default: "calc(var(--tf-toast-gap) / 2)") */ gap?: string; /** * Spacing between the button group and the toast content. (Default: "calc(var(--tf-toast-gap) / 2)") */ contentGap?: string; } /** * Global configuration that shapes how toasts look and behave. */ interface ToastConfig { /** * Distance from the viewport edge where toasts start. (Default: "16px") */ offset: string; /** * Gap between toasts stacked at the same position. (Default: "8px") */ gap: string; /** * z-index applied to the toast container. (Default: 9999) */ zIndex: number; /** * Fixed width applied to each toast. (Default: "350px") */ width: string; /** * Beta: enable scrolling when a stack overflows; currently only works for top-* positions. (Default: false) */ overflowScroll: boolean; /** * Time in milliseconds before a toast auto-dismisses. * Use Infinity or 0 to keep it visible until manually dismissed. * (Default: 5000) */ duration: number; /** * Maximum number of visible toasts per position; extra items are evicted. (Default: 5) */ maxVisible: number; /** * When true, overflowed toasts are queued and shown when space frees up instead of evicting. (Default: false) */ queue: boolean; /** * Default stack position used when none is provided. (Default: "top-right") */ position: ToastPosition; /** * Alignment of data in the toast. (Default: "left") */ alignment: ToastAlignment; /** * Alignment of toast progress. (Default: "right-to-left") */ progressAlignment: ToastProgressAlignment; /** * When true, skip showing identical toasts that are still visible. (Default: false) */ preventDuplicates: boolean; /** * Controls whether new toasts appear before or after older ones. (Default: "newest") */ order: ToastOrder; /** * When enabled, render a progress bar for finite durations. (Default: true) */ progressBar: boolean; /** * Pause the timer while the toast is hovered. (Default: true) */ pauseOnHover: boolean; /** * Whether resuming should continue the remaining time or restart it. (Default: "resume") */ pauseStrategy: PauseStrategy; /** * CSS animation class overrides for various toast transitions. * (Default: { name: "Toastflow__animation", bump: "Toastflow__animation-bump", clearAll: "Toastflow__animation-clearAll", update: "Toastflow__animation-update" }) */ animation: Partial; /** * Show a close button inside each toast. (Default: true) */ closeButton: boolean; /** * Show the icon inside each toast. (Default: true) */ showIcon: boolean; /** * Allow closing a toast by clicking anywhere on it. (Default: false) */ closeOnClick: boolean; /** * Allow dismissing a toast by swiping/dragging it to the right. (Default: false) */ swipeToDismiss: boolean; /** * Optional action buttons rendered inside a toast. */ buttons?: ToastButtonsConfig; /** * Per-toast CSS variable overrides applied as inline styles on the toast element. * Allows programmatic control over any visual token without writing CSS. */ css?: ToastCssOverrides; /** * When true, title/description may contain HTML. (Default: false) */ supportHtml: boolean; /** * Show the createdAt timestamp in the rendered toast. (Default: false) */ showCreatedAt: boolean; /** * Format the createdAt timestamp when displayed. * (Default: locale time formatter with ISO fallback) */ createdAtFormatter: (createdAt: number) => string; /** * Called after the toast is added to state. */ onMount?(ctx: ToastContext): void; /** * Called after the toast is removed from state. */ onUnmount?(ctx: ToastContext): void; /** * Called when the toast is clicked. */ onClick?(ctx: ToastContext, event: MouseEvent): void; /** * Called right before a toast starts leaving. */ onClose?(ctx: ToastContext): void; } /** * Per-toast CSS variable overrides applied as inline styles. * * Use `accentColor` as a shorthand to set text, title, description, and * progress bar colors in one go. Individual properties always win over * the shorthand. */ interface ToastCssOverrides { /** * Sets `color`, `titleColor`, `descriptionColor`, and `progressBarBg` at once. * Individual properties listed below override the shorthand. */ accentColor?: string; /** * Overrides the icon SVG color. */ iconColor?: string; /** `--tf-toast-bg` */ bg?: string; /** * `--tf-toast-color` — also cascades to `titleColor` and `descriptionColor` * when those are not explicitly set, because accent classes pin them to * type-specific values that would otherwise ignore a plain `color` override. */ color?: string; /** `--tf-toast-border-color` */ borderColor?: string; /** `--tf-toast-border-radius` */ borderRadius?: string; /** `--tf-toast-border-width` */ borderWidth?: string; /** `--tf-toast-padding` */ padding?: string; /** `--tf-toast-font-family` */ fontFamily?: string; /** `--tf-toast-gap` */ gap?: string; /** `--tf-toast-title-color` */ titleColor?: string; /** `--tf-toast-title-font-size` */ titleFontSize?: string; /** `--tf-toast-title-font-weight` */ titleFontWeight?: string; /** `--tf-toast-title-line-height` */ titleLineHeight?: string; /** `--tf-toast-description-color` */ descriptionColor?: string; /** `--tf-toast-description-font-size` */ descriptionFontSize?: string; /** `--tf-toast-description-line-height` */ descriptionLineHeight?: string; /** `--tf-toast-icon-size` */ iconSize?: string; /** `--tf-toast-progress-bar-bg` */ progressBarBg?: string; /** `--tf-toast-progress-bg` */ progressBg?: string; /** `--tf-toast-progress-height` */ progressHeight?: string; /** `--tf-toast-close-bg` */ closeBg?: string; /** `--tf-toast-close-color` */ closeColor?: string; /** `--tf-toast-close-border-color` */ closeBorderColor?: string; /** `--tf-toast-close-size` */ closeSize?: string; /** `--tf-toast-close-icon-size` */ closeIconSize?: string; /** `--tf-toast-button-bg` */ buttonBg?: string; /** `--tf-toast-button-color` */ buttonColor?: string; /** `--tf-toast-button-border-color` */ buttonBorderColor?: string; /** `--tf-toast-created-at-color` */ createdAtColor?: string; /** `--tf-toast-created-at-bg` */ createdAtBg?: string; /** `--tf-toast-created-at-border-color` */ createdAtBorderColor?: string; } /** * Fully resolved options applied to a toast instance. */ interface ToastOptions extends ToastConfig { type: ToastType; title: string; description: string; /** * Custom accent theme applied by the renderer (e.g. "my-theme" -> "tf-toast-accent--my-theme"). */ theme?: string; } /** * Minimal text payload required to render a toast. */ type ToastTextInput = { title: string; description?: string; } | { title?: string; description: string; }; /** * Text payload with optional configuration overrides. */ type ToastContentInput = ToastTextInput & Partial>; /** * Options accepted when calling the show helper with text provided separately. */ type ToastShowOptions = Partial> & Partial & { type?: ToastType; }; /** * Payload required to create a toast. */ type ToastShowInput = { type: ToastType; } & ToastContentInput; /** * Allowed fields when updating an existing toast. * Title and description are optional — omitted fields keep their current values. */ type ToastUpdateInput = Partial; /** * Render instructions for the loading helper's success/error states. */ type ToastLoadingRender = ToastContentInput | ((value: T) => ToastContentInput); /** * Promise returned from the loading helper that also exposes the toast id. */ type ToastLoadingResult = Promise & { toastId: ToastId; }; /** * Concrete toast stored in state, including timing metadata. */ interface ToastInstance extends ToastOptions { id: ToastId; createdAt: number; phase?: ToastPhase; } /** * Standalone shape matching ToastContext but with optional id/type/createdAt and the remaining ToastInstance fields available. */ type ToastStandaloneInstance = { id?: ToastId; type?: ToastType; createdAt?: number; } & ToastTextInput & Partial>; /** * Shape of the store's current state. */ interface ToastState { toasts: ToastInstance[]; queue: ToastInstance[]; } /** * Public API for interacting with the toast store. */ interface ToastStore { /** * Return the current toast state snapshot. */ getState(): ToastState; /** * Subscribe to state changes; immediately emits the current state. */ subscribe(listener: (state: ToastState) => void): () => void; /** * Subscribe to one-off toast events such as duplicates or timer resets. */ subscribeEvents(listener: (event: ToastEvent) => void): () => void; /** * Create and show a toast; returns its id. */ show(options: ToastShowInput): ToastId; show(content: string | ToastTextInput, options?: ToastShowOptions): ToastId; /** * Update an existing toast by id. */ update(id: ToastId, options: ToastUpdateInput): void; /** * Dismiss a single toast by id. */ dismiss(id: ToastId): void; /** * Dismiss all toasts at once. */ dismissAll(): void; /** * Pause the auto-dismiss timer for a toast. */ pause(id: ToastId): void; /** * Resume the auto-dismiss timer using the configured strategy. */ resume(id: ToastId): void; /** * Pause queue processing so queued toasts remain pending until resumed. */ pauseQueue(): void; /** * Resume queue processing so queued toasts can appear again. */ resumeQueue(): void; /** * Return the resolved global configuration. */ getConfig(): ToastConfig; /** * Wrap an async task with a loading toast that updates on completion. */ loading(input: ToastLoadingInput, config: ToastLoadingConfig): ToastLoadingResult; } declare function createToastStore(globalConfig?: Partial): ToastStore; /** * Generate a UUID v4 using `crypto.randomUUID` when available; otherwise fall back * to the classic template with random nibbles (uses `crypto.getRandomValues` when possible). */ declare function generateUuid(): string; /** * Check if a value is a finite number greater than zero. */ declare function isNumberFinite(value: unknown): value is number; /** * Valid toast type values. */ declare const VALID_TOAST_TYPES: Set; /** * Default formatter for createdAt timestamps. */ declare function defaultCreatedAtFormatter(createdAt: number): string; export { type PauseStrategy, type ToastAlignment, type ToastAnimation, type ToastButton, type ToastButtonHtml, type ToastButtonText, type ToastButtonsAlignment, type ToastButtonsConfig, type ToastButtonsLayout, type ToastConfig, type ToastContentInput, type ToastContext, type ToastCssOverrides, type ToastEvent, type ToastEventKind, type ToastId, type ToastInstance, type ToastLoadingConfig, type ToastLoadingInput, type ToastLoadingRender, type ToastLoadingResult, type ToastOptions, type ToastOrder, type ToastPhase, type ToastPosition, type ToastProgressAlignment, type ToastShowInput, type ToastShowOptions, type ToastStandaloneInstance, type ToastState, type ToastStore, type ToastTextInput, type ToastType, type ToastUpdateInput, VALID_TOAST_TYPES, createToastStore, defaultCreatedAtFormatter, generateUuid, isNumberFinite };