@base-ui-components/react/toast/root/ToastRoot.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import type { BaseUIComponentProps } from "../../utils/types.js";
import type { ToastObject as ToastObjectType } from "../useToastManager.js";
import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
/**
 * Groups all parts of an individual toast.
 * Renders a `<div>` element.
 *
 * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
 */
export declare const ToastRoot: React.ForwardRefExoticComponent<ToastRootProps & React.RefAttributes<HTMLDivElement>>;
export type ToastRootToastObject<Data extends object = any> = ToastObjectType<Data>;
export interface ToastRootState {
  transitionStatus: TransitionStatus;
  /** Whether the toasts in the viewport are expanded. */
  expanded: boolean;
  /** Whether the toast was removed due to exceeding the limit. */
  limited: boolean;
  /** The type of the toast. */
  type: string | undefined;
  /** Whether the toast is being swiped. */
  swiping: boolean;
  /** The direction the toast is being swiped. */
  swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
}
export interface ToastRootProps extends BaseUIComponentProps<'div', ToastRoot.State> {
  /**
   * The toast to render.
   */
  toast: ToastRootToastObject<any>;
  /**
   * Direction(s) in which the toast can be swiped to dismiss.
   * @default ['down', 'right']
   */
  swipeDirection?: 'up' | 'down' | 'left' | 'right' | ('up' | 'down' | 'left' | 'right')[];
}
export declare namespace ToastRoot {
  type ToastObject<Data extends object = any> = ToastRootToastObject<Data>;
  type State = ToastRootState;
  type Props = ToastRootProps;
}