@arolariu/components/dist/components/ui/alert-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 { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
import { useRender } from "@base-ui/react/use-render";
import * as React from "react";
interface AlertDialogProps extends React.ComponentPropsWithRef<typeof BaseAlertDialog.Root> {
}
interface AlertDialogTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseAlertDialog.Trigger>, "className"> {
    /** Additional CSS classes merged with the alert-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 AlertDialogOverlayProps extends Omit<React.ComponentPropsWithRef<typeof BaseAlertDialog.Backdrop>, "className"> {
    /** Additional CSS classes merged with the alert-dialog backdrop styles. @default undefined */
    className?: string;
}
interface AlertDialogContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseAlertDialog.Popup>, "className"> {
    /** Additional CSS classes merged with the alert-dialog popup styles. @default undefined */
    className?: string;
}
interface AlertDialogHeaderProps extends React.ComponentPropsWithRef<"div"> {
    /** Additional CSS classes merged with the alert-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 AlertDialogFooterProps extends React.ComponentPropsWithRef<"div"> {
    /** Additional CSS classes merged with the alert-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 AlertDialogTitleProps extends Omit<React.ComponentPropsWithRef<typeof BaseAlertDialog.Title>, "className"> {
    /** Additional CSS classes merged with the alert-dialog title styles. @default undefined */
    className?: string;
}
interface AlertDialogDescriptionProps extends Omit<React.ComponentPropsWithRef<typeof BaseAlertDialog.Description>, "className"> {
    /** Additional CSS classes merged with the alert-dialog description styles. @default undefined */
    className?: string;
}
interface AlertDialogActionProps extends Omit<React.ComponentPropsWithRef<typeof BaseAlertDialog.Close>, "className"> {
    /** Additional CSS classes merged with the primary action button styles. @default undefined */
    className?: string;
}
interface AlertDialogCancelProps extends Omit<React.ComponentPropsWithRef<typeof BaseAlertDialog.Close>, "className"> {
    /** Additional CSS classes merged with the cancel action button styles. @default undefined */
    className?: string;
}
/**
 * Coordinates destructive confirmation dialogs with modal accessibility behavior.
 *
 * @remarks
 * - Renders no DOM element by default and coordinates descendant alert-dialog parts
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports composition through descendant `render` props
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialog>
 *   <AlertDialogTrigger>Delete</AlertDialogTrigger>
 *   <AlertDialogContent>
 *     <AlertDialogTitle>Are you sure?</AlertDialogTitle>
 *   </AlertDialogContent>
 * </AlertDialog>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare function AlertDialog(props: Readonly<AlertDialog.Props>): React.ReactElement;
declare namespace AlertDialog {
    var displayName: string;
}
/**
 * Opens the alert dialog from an interactive trigger element.
 *
 * @remarks
 * - Renders a `<button>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogTrigger>Delete</AlertDialogTrigger>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
 * Portals alert-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/alert-dialog | Base UI Alert 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
 * <AlertDialogPortal>
 *   <AlertDialogOverlay />
 *   <AlertDialogContent />
 * </AlertDialogPortal>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare const AlertDialogPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Renders the dimmed backdrop behind the alert dialog popup.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogOverlay />
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare function AlertDialogOverlay(props: Readonly<AlertDialogOverlay.Props>): React.ReactElement;
declare namespace AlertDialogOverlay {
    var displayName: string;
}
/**
 * Renders the alert dialog popup inside a portal with its backdrop.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogContent>
 *   <AlertDialogTitle>Are you sure?</AlertDialogTitle>
 * </AlertDialogContent>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
 * Lays out the alert dialog heading and supporting content.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogHeader>
 *   <AlertDialogTitle>Are you sure?</AlertDialogTitle>
 * </AlertDialogHeader>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare function AlertDialogHeader(props: Readonly<AlertDialogHeader.Props>): React.ReactElement;
declare namespace AlertDialogHeader {
    var displayName: string;
}
/**
 * Lays out confirmation and dismissal actions at the bottom edge.
 *
 * @remarks
 * - Renders a `<div>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogFooter>
 *   <AlertDialogCancel>Cancel</AlertDialogCancel>
 * </AlertDialogFooter>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare function AlertDialogFooter(props: Readonly<AlertDialogFooter.Props>): React.ReactElement;
declare namespace AlertDialogFooter {
    var displayName: string;
}
/**
 * Renders the accessible heading for alert dialog content.
 *
 * @remarks
 * - Renders an `<h2>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogTitle>Are you sure?</AlertDialogTitle>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare function AlertDialogTitle(props: Readonly<AlertDialogTitle.Props>): React.ReactElement;
declare namespace AlertDialogTitle {
    var displayName: string;
}
/**
 * Renders supporting copy beneath the alert dialog title.
 *
 * @remarks
 * - Renders a `<p>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare function AlertDialogDescription(props: Readonly<AlertDialogDescription.Props>): React.ReactElement;
declare namespace AlertDialogDescription {
    var displayName: string;
}
/**
 * Renders the primary confirmation action inside the alert dialog.
 *
 * @remarks
 * - Renders a `<button>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogAction>Continue</AlertDialogAction>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogActionProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
/**
 * Renders the secondary dismissal action inside the alert dialog.
 *
 * @remarks
 * - Renders a `<button>` element by default
 * - Built on {@link https://base-ui.com/react/components/alert-dialog | Base UI Alert Dialog}
 * - Supports the `render` prop for element composition
 * - Styling via CSS Modules with `--ac-*` custom properties
 *
 * @example Basic usage
 * ```tsx
 * <AlertDialogCancel>Cancel</AlertDialogCancel>
 * ```
 *
 * @see {@link https://base-ui.com/react/components/alert-dialog | Base UI Documentation}
 */
declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogCancelProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
declare namespace AlertDialog {
    type Props = AlertDialogProps;
    type State = BaseAlertDialog.Root.State;
}
declare namespace AlertDialogTrigger {
    type Props = AlertDialogTriggerProps;
    type State = BaseAlertDialog.Trigger.State;
}
declare namespace AlertDialogOverlay {
    type Props = AlertDialogOverlayProps;
    type State = BaseAlertDialog.Backdrop.State;
}
declare namespace AlertDialogContent {
    type Props = AlertDialogContentProps;
    type State = BaseAlertDialog.Popup.State;
}
declare namespace AlertDialogHeader {
    type Props = AlertDialogHeaderProps;
    type State = Record<string, never>;
}
declare namespace AlertDialogFooter {
    type Props = AlertDialogFooterProps;
    type State = Record<string, never>;
}
declare namespace AlertDialogTitle {
    type Props = AlertDialogTitleProps;
    type State = BaseAlertDialog.Title.State;
}
declare namespace AlertDialogDescription {
    type Props = AlertDialogDescriptionProps;
    type State = BaseAlertDialog.Description.State;
}
declare namespace AlertDialogAction {
    type Props = AlertDialogActionProps;
    type State = BaseAlertDialog.Close.State;
}
declare namespace AlertDialogCancel {
    type Props = AlertDialogCancelProps;
    type State = BaseAlertDialog.Close.State;
}
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
//# sourceMappingURL=alert-dialog.d.ts.map