@kitn.ai/ui/dist/components/toast.d.ts

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { ToastItem, ToastVariant, ToastAppearance } from '../primitives/toast-store';
export type { ToastItem, ToastVariant, ToastAppearance };
/** Why a toast went away — surfaced to `onDismiss` (and the facade event). */
export type ToastDismissReason = 'timeout' | 'close' | 'action';
export type ToastPosition = 'top-center' | 'top-right' | 'top-left' | 'bottom-center' | 'bottom-right' | 'bottom-left';
export interface ToastRegionProps {
    /** The toasts to render. Newest is shown on top. Set as a JS property on the
     *  element; mutate by passing a new array reference. */
    toasts: ToastItem[];
    /** Where the stack anchors. Defaults to `'top-center'`. */
    position?: ToastPosition;
    /** Max simultaneously-visible toasts; the rest queue and promote as slots
     *  free up. Defaults to `3`. */
    max?: number;
    /** Stacking: 'expanded' (default, full column) | 'collapsed' (Sonner-style
     *  pile that expands on hover/focus). Attribute: stack. */
    stack?: 'expanded' | 'collapsed';
    /** Region-level default appearance for toasts that don't set their own. A
     *  per-toast `appearance` always wins. Defaults to `'pill'`. */
    appearance?: ToastAppearance;
    /** Region-level default inverse treatment for toasts that don't set their own.
     *  A per-toast `inverse` always wins. Defaults to `false`. */
    inverse?: boolean;
    /** When set, this region renders only the toasts scoped to that element and
     *  anchors over its bounds (top-center), following it on scroll/resize. Unset =
     *  the global, viewport-anchored region. */
    target?: HTMLElement;
    /** Fired when a toast leaves, with the reason. */
    onDismiss?: (id: string, reason: ToastDismissReason) => void;
    /** Fired when a toast's action button is pressed. */
    onAction?: (id: string, label: string) => void;
}
interface ToastProps {
    item: ToastItem;
    onDismiss: (reason: ToastDismissReason) => void;
    onAction?: (label: string) => void;
    /** Hold the auto-dismiss timer (the region sets this true while the whole stack
     *  is hovered/expanded, so peers don't dismiss out from under the cursor). */
    paused?: boolean;
    /** Region-level default appearance, used when the item doesn't set its own. */
    appearance?: ToastAppearance;
    /** Region-level default inverse, used when the item doesn't set its own. */
    inverse?: boolean;
}
/**
 * A single toast pill. Auto-dismisses after its (action-floored) duration, holds
 * the timer while hovered (this pill) OR while `paused` (the whole stack is
 * hovered), and animates in/out via `createPresence`. Pure + prop-driven — the
 * parent `ToastRegion` owns the list + queue.
 */
export declare function Toast(props: ToastProps): import("solid-js").JSX.Element;
/**
 * Renders a stack of toasts at a viewport edge. Caps the visible count at `max`
 * (newest on top); overflow waits in a queue and is promoted as visible toasts
 * leave. `aria-live=polite` / `role=region` so screen readers announce new
 * toasts without stealing focus.
 */
export declare function ToastRegion(props: ToastRegionProps): import("solid-js").JSX.Element;