import type React from 'react';
import type { CloseDetail } from './types.js';
export interface DialogRef extends HTMLElement {
    /** Opens the dialog modal with entrance animation. */
    open(): void;
    /** Closes the dialog modal with exit animation. */
    close(): void;
    /** Toggles the dialog open/close state. */
    toggle(): void;
}
/**
 * Content goes in named slots (`header`, `children`, `footer`), not as flat children.
 * The dialog uses Shadow DOM — `<form onSubmit>` won't intercept Enter from internal CEs. Listen for `onKeydown` on input fields instead.
 * Open and close imperatively — see the framework access note below — or declaratively with the `open` boolean prop.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<DialogRef>(null)`, pass `ref={api}`, then `api.current?.open()`.
 * Available: open(), close(), toggle().
 *
 * @csspart base, body, footer, header
 */
export interface DialogOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Title text.
     * @example 'Example title'
     */
    title: string;
    /**
     * Visual style variant. Allowed values: `standard`, `alert`.
     * @example 'standard'
     */
    variant?: 'standard' | 'alert';
    /**
     * Secondary descriptive text rendered inside Shadow DOM. Not the same as React children — use the `description` prop for helper text.
     * @example 'Additional context'
     */
    description?: string;
    /**
     * Dialog width preset: sm, md (default), lg, xl, or full. Allowed values: `sm`, `md`, `lg`, `xl`, `full`.
     * @example 'sm'
     */
    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /**
     * Whether to render a close button.
     * @example true
     */
    closeButton?: boolean;
    /**
     * Renders the dialog as a drawer (slides in from an edge instead of centering). Allowed values: `bottom`, `left`, `right`, `centered`.
     * @example 'bottom'
     */
    drawer?: 'bottom' | 'left' | 'right' | 'centered';
    /**
     * Whether the component is in an open/expanded state.
     * @defaultValue false
     * @example true
     */
    open?: boolean;
    /**
     * Fires when the component closes. Detail: `CloseDetail`.
     * @example (event) => console.log(event.detail.reason)
     */
    onClose?: (event: CustomEvent<CloseDetail>) => void;
    /** Default slot content.
     * @example <span>Content</span>
     */
    children?: React.ReactNode;
    /** Content for the `footer` slot.
     * @example <span>Content</span>
     */
    footer?: React.ReactNode;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<Dialog>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-dialog>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type DialogProps = DialogOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof DialogOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Dialog: React.ForwardRefExoticComponent<DialogOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "dangerouslySetInnerHTML" | keyof DialogOwnProps> & React.RefAttributes<DialogRef>>;