react-toast-kit/dist/devtools-entry.d.ts

A modern, accessible toast notification system for React applications with automatic CSS injection

import * as React$1 from 'react';
import { JSX } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';

/**
 * A framework-agnostic DevTools component for React Toast Kit
 * This component provides a UI for monitoring and testing toasts
 */
declare const ToastDevTools: React$1.FC;

interface DevToolsConfig {
    /**
     * Whether DevTools should be enabled
     * @default false in production, true in development
     */
    enabled?: boolean;
    /**
     * Whether DevTools should be visible by default
     * @default false
     */
    defaultVisible?: boolean;
    /**
     * Keyboard shortcut to toggle DevTools
     * @default 'alt+shift+d'
     */
    shortcut?: string;
    /**
     * Whether to show DevTools button
     * @default true
     */
    showButton?: boolean;
    /**
     * Position of the DevTools button
     * @default 'bottom-right'
     */
    buttonPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
}
/**
 * Configure the DevTools globally
 * @param config DevTools configuration
 */
declare function configureDevTools(config: DevToolsConfig): void;
/**
 * Hook to access DevTools visibility state
 */
declare function useDevToolsVisible(): {
    visible: boolean;
    setVisible: (visible: boolean) => void;
    toggle: () => void;
};
declare const ClientDevTools: ({ visible }: {
    visible?: boolean;
}) => react_jsx_runtime.JSX.Element | null;
/**
 * DevToolsWrapper - A wrapper for DevTools with visibility control and keyboard shortcut
 */
declare function DevToolsWrapper({ children, config }: {
    children?: React$1.ReactNode;
    config?: DevToolsConfig;
}): react_jsx_runtime.JSX.Element;

type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
type ToastVariant = 'success' | 'error' | 'info' | 'warning' | 'default' | 'custom' | 'loading';
type ToastTheme = 'light' | 'dark' | 'system';
type ToastAnimation = 'slide' | 'fade' | 'bounce' | 'flip' | 'zoom' | 'none' | 'elastic';
type ToastStyle = 'solid' | 'gradient' | 'glass' | 'shimmer' | 'pill' | 'neon' | 'retro' | 'confetti' | 'minimal' | 'outlined';
interface ToastAction {
    label: string;
    onClick: (id: string) => void;
    variant?: 'primary' | 'secondary' | 'danger';
    closeOnClick?: boolean;
}
type ProgressBarStyle = 'default' | 'fancy' | 'gradient-wave' | 'pulse' | 'particles' | 'liquid' | 'three-d' | 'dashed' | 'glow' | 'rainbow' | 'data-flow' | 'step-progress';
interface CustomAnimation {
    initial: Record<string, unknown>;
    animate: Record<string, unknown>;
    exit: Record<string, unknown>;
    transition?: Record<string, unknown>;
}
interface ToastPlugin {
    name: string;
    description?: string;
    beforeCreate?: (options: ToastOptions) => ToastOptions;
    afterCreate?: (toast: Toast) => void;
    beforeRemove?: (toast: Toast) => boolean;
    afterRemove?: (toast: Toast) => void;
}
interface ToastOptions {
    id?: string;
    title?: string;
    description?: string;
    variant?: ToastVariant;
    duration?: number;
    position?: ToastPosition;
    dismissible?: boolean;
    pauseOnHover?: boolean;
    dismissOnClick?: boolean;
    theme?: ToastTheme;
    icon?: JSX.Element;
    component?: JSX.Element;
    onDismiss?: (id: string) => void;
    className?: string;
    style?: React.CSSProperties;
    animation?: ToastAnimation;
    customAnimation?: CustomAnimation;
    visualStyle?: ToastStyle;
    progressBarStyle?: ProgressBarStyle;
    progressBarColor?: string;
    progressBarPosition?: 'top' | 'bottom' | 'left' | 'right';
    progressBarThickness?: number;
    floating?: boolean;
    emoji?: string;
    rippleEffect?: boolean;
    stagger?: number;
    swipeToDismiss?: boolean;
    priority?: 'low' | 'normal' | 'high';
    progressAnimation?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
    actions?: ToastAction[];
}
interface Toast extends Required<Pick<ToastOptions, 'id' | 'variant' | 'position' | 'duration' | 'pauseOnHover' | 'dismissible' | 'dismissOnClick' | 'theme'>> {
    title?: string;
    description?: string;
    icon?: JSX.Element;
    component?: JSX.Element;
    createdAt: number;
    onDismiss?: (id: string) => void;
    className?: string;
    style?: React.CSSProperties;
    animation?: ToastAnimation;
    customAnimation?: CustomAnimation;
    visualStyle?: ToastStyle;
    progressBarStyle?: ProgressBarStyle;
    progressBarColor?: string;
    progressBarPosition?: 'top' | 'bottom' | 'left' | 'right';
    progressBarThickness?: number;
    floating?: boolean;
    emoji?: string;
    rippleEffect?: boolean;
    stagger?: number;
    swipeToDismiss?: boolean;
    priority?: 'low' | 'normal' | 'high';
    progressAnimation?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
    actions?: ToastAction[];
    iconString?: string;
    updating?: boolean;
}
interface ToastStoreConfig {
    defaultDuration: number;
    defaultDismissible: boolean;
    defaultPauseOnHover: boolean;
    defaultDismissOnClick: boolean;
    defaultAnimation: ToastAnimation;
    defaultStyle: ToastStyle;
    defaultProgressBarStyle?: ProgressBarStyle;
    defaultProgressBarColor?: string;
    defaultProgressBarPosition: 'top' | 'bottom' | 'left' | 'right';
    defaultProgressBarThickness: number;
    defaultProgressAnimation: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
    defaultFloating: boolean;
    defaultRippleEffect: boolean;
    defaultSwipeToDismiss: boolean;
    defaultPriority: 'low' | 'normal' | 'high';
    defaultStagger: number;
    globalClassName?: string;
    globalStyle?: React.CSSProperties;
}
interface ToastState {
    toasts: Toast[];
    maxToasts: number;
    theme: ToastTheme;
    effectiveTheme: 'light' | 'dark';
    pausedToasts: Set<string>;
    activeTimers: Map<string, number>;
    timerStartedAt: Map<string, number>;
    remainingTime: Map<string, number>;
    plugins: ToastPlugin[];
    config: ToastStoreConfig;
    addToast: (toast: Toast) => string;
    removeToast: (id: string) => void;
    updateToast: (id: string, toast: Partial<Toast>) => void;
    pauseToast: (id: string) => void;
    resumeToast: (id: string) => void;
    clearAllToasts: () => void;
    setTheme: (theme: ToastTheme) => void;
    setMaxToasts: (max: number) => void;
    updateEffectiveTheme: () => void;
    setConfig: (config: Partial<ToastStoreConfig>) => void;
    cleanup: () => void;
    registerPlugin: (plugin: ToastPlugin) => void;
    unregisterPlugin: (name: string) => void;
}
declare const toastDevTools: {
    getActiveToasts?: (() => Toast[]) | undefined;
    clearAll?: (() => void) | undefined;
    debugInfo?: (() => void) | undefined;
    getStore?: (() => ToastState) | undefined;
    simulateError?: (() => string) | undefined;
    simulateSuccess?: (() => string) | undefined;
    show: () => void;
    hide: () => void;
    toggle: () => void;
    getToasts: () => Toast[];
};

export { ClientDevTools, DevToolsWrapper, ToastDevTools, configureDevTools, toastDevTools, useDevToolsVisible };