@helpwave/hightide/dist/components/layout-and-navigation/Overlay.d.mts

helpwave's component and theming library

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { PropsWithChildren, ReactNode } from 'react';
import { PropsForTranslation } from '../../localization/useTranslation.mjs';
import { FormTranslationType } from '../../localization/defaults/form.mjs';
import '../../localization/util.mjs';

type OverlayProps = PropsWithChildren<{
    /**
     * Whether the overlay should be currently displayed
     */
    isOpen: boolean;
    /**
     *  Callback when the background is clicked
     */
    onBackgroundClick?: () => void;
    /**
     *  Styling for the background
     *
     *  To remove the darkening, set bg-transparent
     */
    backgroundClassName?: string;
}>;
/**
 * A generic overlay window which is managed by its parent
 */
declare const Overlay: ({ children, isOpen, onBackgroundClick, backgroundClassName, }: PropsWithChildren<OverlayProps>) => react.ReactPortal;
type ModalHeaderTranslation = FormTranslationType;
type OverlayHeaderProps = {
    /**
     * Callback when the close button is clicked. If omitted or undefined, the button is hidden
     */
    onClose?: () => void;
    /** The title of the Modal. If you want to only set the text use `titleText` instead */
    title?: ReactNode;
    /** The title text of the Modal. If you want to set a custom title use `title` instead */
    titleText?: string;
    /** The description of the Modal. If you want to only set the text use `descriptionText` instead */
    description?: ReactNode;
    /** The description text of the Modal. If you want to set a custom description use `description` instead */
    descriptionText?: string;
};
/**
 * A header that should be in an Overlay
 */
declare const OverlayHeader: ({ overwriteTranslation, onClose, title, titleText, description, descriptionText }: PropsForTranslation<ModalHeaderTranslation, OverlayHeaderProps>) => react_jsx_runtime.JSX.Element;
type ModalProps = {
    isOpen: boolean;
    onClose: () => void;
    className?: string;
    backgroundClassName?: string;
    headerProps?: Omit<OverlayHeaderProps, 'onClose'>;
};
/**
 * A Generic Modal Window
 */
declare const Modal: ({ children, isOpen, onClose, className, backgroundClassName, headerProps, }: PropsWithChildren<ModalProps>) => react_jsx_runtime.JSX.Element;
type DialogProps = Omit<OverlayProps, 'onBackgroundClick'> & {
    headerProps?: Omit<OverlayHeaderProps, 'onClose'>;
    className?: string;
};
/**
 * A Generic Dialog Window
 */
declare const Dialog: ({ children, isOpen, className, backgroundClassName, headerProps, }: PropsWithChildren<DialogProps>) => react_jsx_runtime.JSX.Element;

export { Dialog, type DialogProps, Modal, type ModalProps, Overlay, OverlayHeader, type OverlayHeaderProps, type OverlayProps };