import { CommonProps, type Styleable } from "@trackunit/react-components";
import { MouseEventHandler, ReactNode } from "react";
export interface ModalHeaderProps extends CommonProps, Styleable {
    /**
     * Main title displayed in the modal header.
     */
    heading: string;
    /**
     * Optional subtitle displayed below the main title.
     * Not rendered when undefined.
     */
    subHeading?: ReactNode;
    /**
     * Click handler for the close button.
     */
    onClickClose: MouseEventHandler<HTMLButtonElement>;
    /**
     * The id of the element.
     */
    id?: string;
    /**
     * Children to render in the header
     */
    children?: ReactNode;
    /**
     * Items to render next to the heading
     */
    accessories?: ReactNode;
}
/**
 * Modal header section.
 * Displays a main heading, optional subheading, and a close button.
 *
 * Use inside a Modal component to provide consistent header styling with a title, subtitle, and close button.
 *
 * @example Basic modal header
 * ```tsx
 * import { Modal, ModalHeader, ModalBody, useModal } from "@trackunit/react-modal";
 *
 * const MyModal = () => {
 *   const modal = useModal();
 *
 *   return (
 *     <Modal {...modal} size="medium">
 *       <ModalHeader
 *         heading="Confirm Action"
 *         subHeading="Please review the details below"
 *         onClose={modal.close}
 *       />
 *       <ModalBody>Modal content here</ModalBody>
 *     </Modal>
 *   );
 * };
 * ```
 * @example Modal header with accessories
 * ```tsx
 * import { Modal, ModalHeader, useModal } from "@trackunit/react-modal";
 * import { Tag } from "@trackunit/react-components";
 *
 * const StatusModal = () => {
 *   const modal = useModal();
 *
 *   return (
 *     <Modal {...modal} size="medium">
 *       <ModalHeader
 *         heading="Asset Details"
 *         onClose={modal.close}
 *         accessories={<Tag color="success">Active</Tag>}
 *       />
 *     </Modal>
 *   );
 * };
 * ```
 * @param {ModalHeaderProps} props Component props.
 * @param {string} [props.heading] Main heading text.
 * @param {string} [props.subHeading] Optional subheading content.
 * @param {() => void} props.onClickClose Close button click handler.
 * @param {string} [props."data-testid"] Optional test id for the container.
 * @param {string} [props.className] Optional additional class name(s).
 * @returns The modal header element.
 */
export declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;