beta-parity-react/ui/Toast/Toast.d.ts

Beta Parity React Components

import React from 'react';
import './index.css';
declare const positions: readonly string[];
/**
 * Props for the Toast component.
 *
 * Extends properties from the `div` element.
 */
export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
    /**
     * Unique identifier for the toast.
     *
     * @memberof ToastProps
     */
    id: string;
    /**
     * Function to remove the toast, called with the toast's unique identifier.
     * @param id The unique identifier of the toast to remove.
     * @memberof ToastProps
     */
    removeToast: (id: string) => void;
    /**
     * The title of the toast, which can be a string or a React node.
     *
     * @memberof ToastProps
     */
    title?: string | React.ReactNode;
    /**
     * The message displayed in the toast, which can be a string or a React node.
     *
     * @memberof ToastProps
     */
    message?: string | React.ReactNode;
    /**
     * Optional action element to display in the toast.
     *
     * @memberof ToastProps
     */
    action?: React.ReactNode;
    /**
     * The height of the toast. Determines if the toast is compact or flexible.
     *
     * @default 'flexible'
     * @memberof ToastProps
     */
    height?: 'flexible' | 'compact';
    /**
     * The emphasis level of the toast.
     * - `normal`: Default emphasis.
     * - `high`: Highlighted emphasis for important toasts.
     *
     * @default 'high'
     * @memberof ToastProps
     */
    emphasis?: 'normal' | 'high';
    /**
     * The kind of toast, which determines its purpose or styling.
     * - `generic`: Default styling.
     * - `information`: For informational messages.
     * - `affirmative`: For success or positive feedback.
     * - `cautionary`: For warnings or caution.
     * - `adverse`: For errors or negative feedback.
     *
     * @default 'generic'
     * @memberof ToastProps
     */
    kind?: 'generic' | 'information' | 'affirmative' | 'cautionary' | 'adverse';
    /**
     * The position of the toast. Should be one of the positions defined in `positions`.
     *
     * @default 'top-right'
     * @memberof ToastProps
     */
    position?: (typeof positions)[number];
    /**
     * Whether the toast should automatically dismiss after a certain duration.
     *
     * @default false
     * @memberof ToastProps
     */
    autoDismiss?: boolean;
    /**
     * The duration (in milliseconds) before the toast automatically dismisses.
     * Only applicable if `autoDismiss` is true.
     *
     * @default 5000
     * @memberof ToastProps
     */
    duration?: number;
    /**
     * Whether to pause the auto-dismiss timer when the user hovers over the toast.
     *
     * @default true
     * @memberof ToastProps
     */
    pauseOnHover?: boolean;
    /**
     * The icon to display in the toast. This can be any React node.
     *
     * Override the default icon based on the `kind` prop.
     *
     * @memberof ToastProps
     */
    icon?: React.ReactNode;
    /**
     * Whether to display a progress bar for the auto-dismiss timer.
     *
     * @default false
     * @memberof ToastProps
     */
    progressBar?: boolean;
    /**
     * Whether to display a dismiss button in the toast.
     *
     * @default true
     * @memberof ToastProps
     */
    dismissButton?: boolean;
    /**
     * The importance level of the toast. Higher values indicate higher priority.
     *
     * @default 0
     * @memberof ToastProps
     */
    importance?: number;
    /**
     * Whether the toast is in a pending state, typically used for asynchronous operations.
     *
     * @default false
     * @memberof ToastProps
     */
    pending?: boolean;
    /**
     * Callback function that is triggered when the toast is dismissed.
     *
     * @memberof ToastProps
     */
    onDismissed?: () => void;
}
/**
 * **Parity Toast**.
 *
 * @see {@link https://beta-parity-react.vercel.app/toast Parity Toast}
 */
export declare const Toast: React.FC<ToastProps>;
export interface ToastBodyProps extends React.HTMLAttributes<HTMLDivElement> {
}
export declare const ToastBody: React.ForwardRefExoticComponent<ToastBodyProps & React.RefAttributes<HTMLDivElement>>;
export interface ToastTitleProps extends React.HTMLAttributes<HTMLDivElement> {
}
export declare const ToastTitle: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
export interface ToastMessageProps extends React.HTMLAttributes<HTMLDivElement> {
}
export declare const ToastMessage: React.ForwardRefExoticComponent<ToastMessageProps & React.RefAttributes<HTMLDivElement>>;
export interface ToastActionProps extends React.HTMLAttributes<HTMLDivElement> {
}
export declare const ToastAction: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLDivElement>>;
export interface ToastCloseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
}
export declare const ToastCloseButton: React.ForwardRefExoticComponent<ToastCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
export interface ToastProgressBarProps extends React.HTMLAttributes<HTMLSpanElement> {
    duration: number;
}
export declare const ToastProgressBar: React.ForwardRefExoticComponent<ToastProgressBarProps & React.RefAttributes<HTMLSpanElement>>;
export interface ToastIconProps extends React.HTMLAttributes<HTMLSpanElement> {
    kind?: 'generic' | 'information' | 'affirmative' | 'cautionary' | 'adverse';
    icon?: React.ReactNode;
    pending?: boolean;
}
export declare const ToastIcon: React.ForwardRefExoticComponent<ToastIconProps & React.RefAttributes<HTMLSpanElement>>;
export {};
//# sourceMappingURL=Toast.d.ts.map