import { ReactNode } from 'react';
import { ClosingButtonProps } from '../../../buttons/closing-button/closing-button';
export interface ModalHeaderProps {
    /**
     * Title text. Rendered as an `<h3>` and automatically registered as the modal's
     * `aria-labelledby`. Pass `children` instead for full control of the title markup.
     */
    title?: ReactNode;
    /**
     * Description text below the title. Automatically registered as the modal's
     * `aria-describedby`.
     */
    description?: ReactNode;
    /**
     * Show the closing button.
     * @default true
     */
    closeButton?: boolean;
    /**
     * Forwarded to the closing button — use to override size, title, etc.
     */
    closeButtonProps?: Omit<ClosingButtonProps, 'onClick'>;
    /**
     * Replaces the default title/description layout entirely. When set, `title` and
     * `description` are ignored.
     *
     * Accessibility note: the automatic `aria-labelledby` / `aria-describedby` wiring
     * only fires for the `title` / `description` props. With `children` you need to
     * connect them yourself — call `useModal()` to read `labelId` / `descriptionId`
     * and put them on the right elements:
     *
     * ```tsx
     * function CustomHeader() {
     *   const { labelId, descriptionId, onOpenChange } = useModal();
     *   return (
     *     <Modal.Header>
     *       <h2 id={labelId}>Custom title</h2>
     *       <p id={descriptionId}>Supporting text</p>
     *       <ClosingButton onClick={() => onOpenChange(false)} />
     *     </Modal.Header>
     *   );
     * }
     * ```
     *
     * Alternatively, set `aria-labelledby` / `aria-describedby` explicitly on
     * `<Modal.Content>` pointing at IDs you control.
     */
    children?: ReactNode;
    /**
     * Additional class name.
     */
    className?: string;
}
export declare const ModalHeader: {
    (props: ModalHeaderProps): JSX.Element;
    displayName: string;
};
export default ModalHeader;