import { DialogRoot } from './components/dialog.root'; import { DialogTrigger } from './components/dialog.trigger'; import { DialogContent } from './components/dialog.content'; import { DialogHeader } from './components/dialog.header'; import { DialogBody } from './components/dialog.body'; import { DialogFooter } from './components/dialog.footer'; import { DialogTitle } from './components/dialog.title'; import { DialogCloseTrigger } from './components/dialog.close-trigger'; /** * Dialog * ============================================================ * A foundational dialog component for overlays that require user attention. * Built with React Aria Components for accessibility and WCAG 2.1 AA compliance. * * Features: * - Controlled and uncontrolled modes * - Customizable placement, size, and animations * - Focus management and keyboard navigation * - Click-outside and Escape key dismissal * - Portal rendering support * - Backdrop overlay with animations * * @example * ```tsx * * Open Dialog * * * Dialog Title * × * * * Dialog content goes here * * * * * * * * ``` * * @see https://nimbus-documentation.vercel.app/components/feedback/dialog */ export declare const Dialog: { /** * # Dialog.Root * * The root component that provides context and state management for the dialog. * Uses React Aria's DialogTrigger for accessibility and keyboard interaction. * * This component must wrap all dialog parts (Trigger, Content, etc.) and provides * the dialog open/close state and variant styling context. * * @example * ```tsx * * Open Dialog * * * Dialog Title * * Dialog content * * * ``` */ Root: { (props: import('./dialog.types').DialogRootProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # Dialog.Trigger * * The trigger element that opens the dialog when activated. * Uses React Aria's Button for accessibility and keyboard support. * * @example * ```tsx * * Open Dialog * ... * * ``` */ Trigger: { ({ ref: forwardedRef, children, asChild, ...props }: import('./dialog.types').DialogTriggerProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # Dialog.Content * * The main dialog content container that wraps React Aria's Modal and Dialog. * Handles portalling, backdrop, positioning, and content styling. * * This component creates the dialog overlay, positions the content, and provides * accessibility features like focus management and keyboard dismissal. * * @example * ```tsx * * Open Dialog * * * Title * * Content * Actions * * * ``` */ Content: { (props: import('./dialog.types').DialogContentProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # Dialog.Header * * The header section of the dialog content. * Typically contains the title and close button. * * @example * ```tsx * * * Dialog Title * * * ... * * ``` */ Header: { (props: import('./dialog.types').DialogHeaderProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # Dialog.Body * * The main body content section of the dialog. * Contains the primary dialog content and handles overflow/scrolling. * * @example * ```tsx * * ... * *

This is the main content of the dialog.

*
* ... *
* ``` */ Body: { (props: import('./dialog.types').DialogBodyProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # Dialog.Footer * * The footer section of the dialog, typically containing action buttons. * Provides consistent spacing and alignment for dialog actions. * * @example * ```tsx * * ... * ... * * * * * * ``` */ Footer: { (props: import('./dialog.types').DialogFooterProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # Dialog.Title * * The accessible title element for the dialog. * Uses React Aria's Heading for proper accessibility and screen reader support. * * @example * ```tsx * * * Confirm Action * * ... * * ``` */ Title: { (props: import('./dialog.types').DialogTitleProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; /** * # Dialog.CloseTrigger * * A button that closes the dialog when activated. * Displays an IconButton with a close (X) icon by default. * * The component automatically handles the close behavior through React Aria's * context, so no additional onPress handler is needed. * * @example * ```tsx * * Open Dialog * * * Title * * * Content * * * ``` */ CloseTrigger: { (props: import('./dialog.types').DialogCloseTriggerProps): import("react/jsx-runtime").JSX.Element; displayName: string; }; }; export { DialogRoot as _DialogRoot, DialogTrigger as _DialogTrigger, DialogContent as _DialogContent, DialogHeader as _DialogHeader, DialogBody as _DialogBody, DialogFooter as _DialogFooter, DialogTitle as _DialogTitle, DialogCloseTrigger as _DialogCloseTrigger, };