@arolariu/components/dist/components/ui/dialog.d.ts

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

import { Dialog as BaseDialog } from "@base-ui/react/dialog";
import { useRender } from "@base-ui/react/use-render";
import * as React from "react";
interface DialogProps extends React.ComponentPropsWithRef<typeof BaseDialog.Root> {
}
interface DialogTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Trigger>, "className"> {
    /** Additional CSS classes merged with the dialog trigger styles. @default undefined */
    className?: string;
    /** Backward-compatible child-slot API that maps the child element to `render`. @default false @deprecated Prefer Base UI's `render` prop. */
    asChild?: boolean;
}
interface DialogCloseProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Close>, "className"> {
    /** Additional CSS classes merged with the dialog close control styles. @default undefined */
    className?: string;
}
interface DialogOverlayProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Backdrop>, "className"> {
    /** Additional CSS classes merged with the dialog backdrop styles. @default undefined */
    className?: string;
}
interface DialogContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Popup>, "className"> {
    /** Additional CSS classes merged with the dialog content styles. @default undefined */
    className?: string;
}
interface DialogHeaderProps extends React.ComponentPropsWithRef<"div"> {
    /** Additional CSS classes merged with the dialog header layout styles. @default undefined */
    className?: string;
    /** Custom element or render callback used to replace the default header container. @default undefined */
    render?: useRender.RenderProp<Record<string, never>>;
    /** Backward-compatible child-slot API that maps the child element to `render`. @default false @deprecated Prefer the `render` prop. */
    asChild?: boolean;
}
interface DialogFooterProps extends React.ComponentPropsWithRef<"div"> {
    /** Additional CSS classes merged with the dialog footer layout styles. @default undefined */
    className?: string;
    /** Custom element or render callback used to replace the default footer container. @default undefined */
    render?: useRender.RenderProp<Record<string, never>>;
    /** Backward-compatible child-slot API that maps the child element to `render`. @default false @deprecated Prefer the `render` prop. */
    asChild?: boolean;
}
interface DialogTitleProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Title>, "className"> {
    /** Additional CSS classes merged with the dialog title styles. @default undefined */
    className?: string;
}
interface DialogDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof BaseDialog.Description>, "className"> {
    /** Additional CSS classes merged with the dialog description styles. @default undefined */
    className?: string;
}
/**
 * Coordinates modal dialog state, focus management, and accessibility semantics.
 *
 * @remarks
 * - Renders no DOM element by default and coordinates descendant dialog parts
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports composition through descendant `render` props
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <Dialog>
 *   <DialogTrigger>Open</DialogTrigger>
 *   <DialogContent>
 *     <DialogTitle>Details</DialogTitle>
 *   </DialogContent>
 * </Dialog>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare function Dialog(props: Readonly<Dialog.Props>): React.ReactElement;
declare namespace Dialog {
    var displayName: string;
}
/**
 * Opens the dialog from an interactive trigger element.
 *
 * @remarks
 * - Renders a `<button>` element by default
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <DialogTrigger>Open</DialogTrigger>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
 * Portals dialog descendants outside the local DOM hierarchy.
 *
 * @remarks
 * - Renders no DOM element by default and portals descendants into the document body
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Does not expose a `render` prop because it only controls mounting context
 * - Styling via CSS Modules with `--ac-*` custom properties through descendant components
 *
 * @example Basic usage
 * ```tsx
 * <DialogPortal>
 *   <DialogOverlay />
 *   <DialogContent />
 * </DialogPortal>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare const DialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Closes the dialog from an interactive control inside the modal.
 *
 * @remarks
 * - Renders a `<button>` element by default
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <DialogClose>Dismiss</DialogClose>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare function DialogClose(props: Readonly<DialogClose.Props>): React.ReactElement;
declare namespace DialogClose {
    var displayName: string;
}
/**
 * Renders the dimmed backdrop behind dialog content.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <DialogOverlay />
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare function DialogOverlay(props: Readonly<DialogOverlay.Props>): React.ReactElement;
declare namespace DialogOverlay {
    var displayName: string;
}
/**
 * Renders the dialog popup inside a portal with its backdrop.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <DialogContent>
 *   <DialogTitle>Details</DialogTitle>
 * </DialogContent>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Lays out the title and supporting content at the top of a dialog.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <DialogHeader>
 *   <DialogTitle>Details</DialogTitle>
 * </DialogHeader>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare function DialogHeader(props: Readonly<DialogHeader.Props>): React.ReactElement;
declare namespace DialogHeader {
    var displayName: string;
}
/**
 * Lays out dialog actions and secondary controls at the bottom edge.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <DialogFooter>
 *   <DialogClose>Close</DialogClose>
 * </DialogFooter>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare function DialogFooter(props: Readonly<DialogFooter.Props>): React.ReactElement;
declare namespace DialogFooter {
    var displayName: string;
}
/**
 * Renders the accessible heading for dialog content.
 *
 * @remarks
 * - Renders an `<h2>` element by default
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <DialogTitle>Details</DialogTitle>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare function DialogTitle(props: Readonly<DialogTitle.Props>): React.ReactElement;
declare namespace DialogTitle {
    var displayName: string;
}
/**
 * Renders supporting copy beneath the dialog title.
 *
 * @remarks
 * - Renders a `<p>` element by default
 * - Built on {@link https://base-ui.com/react/components/dialog | Base UI Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <DialogDescription>Review the details before continuing.</DialogDescription>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
 */
declare function DialogDescription(props: Readonly<DialogDescription.Props>): React.ReactElement;
declare namespace DialogDescription {
    var displayName: string;
}
declare namespace Dialog {
    type Props = DialogProps;
    type State = BaseDialog.Root.State;
}
declare namespace DialogTrigger {
    type Props = DialogTriggerProps;
    type State = BaseDialog.Trigger.State;
}
declare namespace DialogClose {
    type Props = DialogCloseProps;
    type State = BaseDialog.Close.State;
}
declare namespace DialogOverlay {
    type Props = DialogOverlayProps;
    type State = BaseDialog.Backdrop.State;
}
declare namespace DialogContent {
    type Props = DialogContentProps;
    type State = BaseDialog.Popup.State;
}
declare namespace DialogHeader {
    type Props = DialogHeaderProps;
    type State = Record<string, never>;
}
declare namespace DialogFooter {
    type Props = DialogFooterProps;
    type State = Record<string, never>;
}
declare namespace DialogTitle {
    type Props = DialogTitleProps;
    type State = BaseDialog.Title.State;
}
declare namespace DialogDescription {
    type Props = DialogDescriptionProps;
    type State = BaseDialog.Description.State;
}
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
//# sourceMappingURL=dialog.d.ts.map