import { Provider, Signal, TNode } from '@tempots/dom'; import { NotificationOptions } from './notification'; import { RadiusName, ThemeColorName } from '../../tokens'; import { AnimationConfig } from '../../utils'; /** * Internal representation of a queued notification within the notification * provider. Each entry captures the resolved reactive signals, animation * configuration, and lifecycle hooks for a single notification instance. */ type NotificationEntry = { /** Unique identifier for keyed rendering. */ id: string; /** Animation configuration for the notification's enter/exit transitions. */ animation: AnimationConfig; /** Child content nodes rendered inside the notification body. */ children: TNode[]; /** Reactive signal indicating whether the notification is in a loading state. */ loading: Signal; /** Reactive signal controlling close button visibility. */ showCloseButton: Signal; /** Reactive signal controlling border visibility. */ showBorder: Signal; /** Reactive signal for the notification's theme color. */ color: Signal; /** Reactive signal for the notification's border radius. */ roundedness: Signal; /** Title content rendered above the notification body. */ title: TNode; /** Reactive signal for the Iconify icon identifier. */ icon: Signal; /** Reactive signal for additional CSS class(es). */ class: Signal; /** Registers a callback to be invoked when the notification should close. */ listenRequestClose: (fn: () => void) => void; /** Optional promise that, when resolved, triggers automatic dismissal. */ delayedClose?: Promise; }; /** * Options for showing a notification via the notification provider. * Extends {@link NotificationOptions} with animation and auto-dismiss settings. */ export type ShowNotificationOptions = NotificationOptions & { /** * Animation configuration for the notification's enter/exit transitions. * @default { fade: true } */ animation?: AnimationConfig; /** * Auto-dismiss behavior. When a `number` is provided, the notification * is dismissed after that many seconds. When a `Promise` is provided, * the notification is dismissed when the promise resolves. */ dismissAfter?: number | Promise; }; /** * Function signature for showing a notification. Accepts configuration options * and child content nodes. * * @param options - Configuration for the notification appearance and behavior. * @param children - Content nodes rendered inside the notification body. */ export type NotificationShowFn = (options: ShowNotificationOptions, ...children: TNode[]) => void; /** * Screen corner position where the notification viewport is anchored. * * - `'top-start'` - Top-left in LTR layouts, top-right in RTL * - `'top-end'` - Top-right in LTR layouts, top-left in RTL * - `'bottom-start'` - Bottom-left in LTR layouts, bottom-right in RTL * - `'bottom-end'` - Bottom-right in LTR layouts, bottom-left in RTL */ export type NotificationViewportPosition = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'; /** * Options for configuring the {@link NotificationProvider}. */ export type NotificationProviderOptions = { /** * Screen corner where notifications are displayed. * @default 'bottom-end' */ position?: NotificationViewportPosition; }; /** * Value exposed by the {@link NotificationProvider} to its consumers. * Provides methods to show and clear notifications, and reactive state * about active notification count. */ export type NotificationProviderValue = { /** Shows a new notification with the given options and content. */ show: NotificationShowFn; /** Dismisses all currently active notifications. */ clear: () => void; /** The viewport position where notifications are rendered. */ position: NotificationViewportPosition; /** * Registers a listener invoked whenever a new notification is shown. * Returns an unsubscribe function. */ listenOnShow: (fn: (entry: NotificationEntry) => void) => () => void; /** Reactive signal tracking the number of currently visible notifications. */ activeNotifications: Signal; /** Reactive list of active notification entries for declarative rendering. */ entries: Signal; /** Removes a notification entry by ID. */ removeEntry: (id: string) => void; }; /** * A subset of the notification provider value exposing only the `show` and `clear` methods. */ type NotificationServiceHandle = Pick; /** * Internal implementation of the global notification service. Maintains a * stack of attached provider handles so that the most recently attached * provider receives show/clear calls. This enables nested providers where * inner providers take precedence. */ declare class NotificationServiceImpl { private handles; attach(handle: NotificationServiceHandle): () => void; private detach; private get current(); show(options: ShowNotificationOptions, ...children: TNode[]): void; clear(): void; } /** * Global singleton notification service that delegates to the most recently * attached {@link NotificationProvider}. Use this to show notifications * imperatively from anywhere in the application without needing direct * access to the provider context. * * @example * ```typescript * // Show a notification imperatively * NotificationService.show( * { title: 'Saved', color: 'success', dismissAfter: 3 }, * 'Your changes have been saved.' * ) * * // Clear all active notifications * NotificationService.clear() * ``` */ export declare const NotificationService: NotificationServiceImpl; /** * Provider that manages the notification system lifecycle. Creates a notification * queue, registers with the global {@link NotificationService}, and exposes * `show` / `clear` methods to consumers via the Tempo provider pattern. * * Attach this provider in your application root (or use BeatUI's built-in * integration) to enable notification rendering through {@link NotificationViewport}. * * @example * ```typescript * import { Provide, Use } from '@tempots/dom' * * // Provide the notification system * Provide(NotificationProvider, { position: 'top-end' }, * // Consume from a child component * Use(NotificationProvider, ({ show }) => { * show( * { title: 'Hello', color: 'primary', dismissAfter: 5 }, * 'Welcome to the app!' * ) * return html.div('App content') * }) * ) * ``` */ export declare const NotificationProvider: Provider; /** * Renders the notification viewport container that displays active notifications. * Must be placed inside a tree that has a {@link NotificationProvider} ancestor. * * The viewport listens for new notifications via `listenOnShow` and renders * each one with enter/exit animations managed by `AnimatedToggle`. Notifications * with `delayedClose` are automatically dismissed when the delay resolves. * * @returns A renderable viewport element positioned according to the provider's * `position` setting (e.g., `'bottom-end'`). * * @example * ```typescript * import { Provide } from '@tempots/dom' * * // Place the viewport at the app root alongside the provider * Provide(NotificationProvider, { position: 'bottom-end' }, * html.div( * // ... app content ... * ), * NotificationViewport() * ) * ``` */ export declare function NotificationViewport(): import("@tempots/core").Renderable; export {};