reablocks/dist/layers/Dialog/Dialog.d.ts

Component library for React

import { FC, ReactElement, ReactNode } from 'react';
import { GlobalOverlayProps } from '../../utils/Overlay';
import { MotionNodeAnimationOptions, MotionProps, TargetAndTransition, Transition, VariantLabels } from 'motion/react';
import { DialogHeader, DialogHeaderProps } from './DialogHeader';
import { DialogTheme } from './DialogTheme';
export interface DialogProps extends Omit<GlobalOverlayProps, 'children'>, Omit<MotionProps, 'children'> {
    /**
     * The CSS class name for the root element of the component.
     */
    className?: string;
    /**
     * The CSS class name for the inner content element of the component.
     */
    innerClassName?: string;
    /**
     * The CSS class name for the content of the component.
     */
    contentClassName?: string;
    /**
     * The size of the dialog. Can be a string or a number.
     * @default '50%'
     */
    size?: string | number;
    /**
     * Whether to show the close button in the dialog header.
     * @default true
     */
    showCloseButton?: boolean;
    /**
     * The content of the dialog.
     * Supports slot-based approach with DialogHeader, DialogContent, and DialogFooter.
     */
    children?: ReactNode | (() => ReactNode);
    /**
     * Whether to disable padding for the dialog content.
     * @default false
     */
    disablePadding?: boolean;
    /**
     * The footer of the dialog.
     * @deprecated Use DialogFooter slot component instead.
     * @example
     * // Instead of:
     * <Dialog footer={<Button>Save</Button>}>...</Dialog>
     *
     * // Use:
     * <Dialog>
     *   <DialogContent>...</DialogContent>
     *   <DialogFooter><Button>Save</Button></DialogFooter>
     * </Dialog>
     */
    footer?: ReactNode;
    /**
     * The header of the dialog.
     * @deprecated Use DialogHeader slot component instead.
     * @example
     * // Instead of:
     * <Dialog header="My Title">...</Dialog>
     *
     * // Use:
     * <Dialog>
     *   <DialogHeader>My Title</DialogHeader>
     *   <DialogContent>...</DialogContent>
     * </Dialog>
     */
    header?: ReactNode;
    /**
     * The React element for the dialog header.
     * @deprecated Use DialogHeader slot component instead.
     * @default <DialogHeader />
     */
    headerElement?: ReactElement<DialogHeaderProps, typeof DialogHeader> | null;
    /**
     * Theme for the Dialog.
     */
    theme?: DialogTheme;
    /**
     * @deprecated Use animation configuration instead.
     */
    initial?: TargetAndTransition | VariantLabels | boolean;
    /**
     * @deprecated Use animation configuration instead.
     */
    animate?: TargetAndTransition | VariantLabels | boolean;
    /**
     * @deprecated Use animation configuration instead.
     */
    exit?: TargetAndTransition | VariantLabels;
    /**
     * @deprecated Use animation configuration instead.
     */
    transition?: Transition;
    /**
     * Animation configuration for the dialog.
     */
    animation?: MotionNodeAnimationOptions;
}
export declare const Dialog: FC<DialogProps>;