@postenbring/hedwig-react/dist/modal/modal.d.ts

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

import { forwardRef } from "react";
interface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
    /**
     * Change the default rendered element for the one passed as a child, merging their props and behavior.
     *
     * @default false
     */
    asChild?: boolean;
}
export declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Change the default rendered element for the one passed as a child, merging their props and behavior.
     *
     * @default false
     */
    asChild?: boolean;
}
export declare const ModalContent: import("react").ForwardRefExoticComponent<ModalContentProps & import("react").RefAttributes<HTMLDivElement>>;
interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Change the default rendered element for the one passed as a child, merging their props and behavior.
     *
     * @default false
     */
    asChild?: boolean;
}
export declare const ModalFooter: import("react").ForwardRefExoticComponent<ModalFooterProps & import("react").RefAttributes<HTMLDivElement>>;
export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
    children: React.ReactNode;
    /**
     * Controls the open state of the modal
     */
    open?: boolean;
    /**
     * Whether to close when clicking on the backdrop.
     */
    closeOnBackdropClick?: boolean;
}
/**
 * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.
 *
 * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.
 *
 * @example
 * ```tsx
 *   const modalRef = useRef<HTMLDialogElement>(null);
 *   const onClose = () => modalRef.current?.close();
 *
 *   return (
 *     <>
 *       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
 *       <Modal ref={modalRef}>
 *         <Modal.Header>Dialog header</Modal.Header>
 *         <Modal.Content>
 *           <p>
 *             Dialog header Dialog description - a description of what is about to happen and maybe
 *             something about the consequences.
 *           </p>
 *         </Modal.Content>
 *         <Modal.Footer>
 *           <HStack gap="16" wrap>
 *             <Button onClick={onMainAction}>Main action</Button>
 *             <Button variant="secondary" onClick={onClose}>
 *               Cancel
 *             </Button>
 *           </HStack>
 *         </Modal.Footer>
 *       </Modal>
 *     </>
 *   );
 * ```
 */
export declare const Modal: ModalType;
type ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {
    Header: typeof ModalHeader;
    Content: typeof ModalContent;
    Footer: typeof ModalFooter;
};
export {};
//# sourceMappingURL=modal.d.ts.map