@hakit/components/dist/types/Shared/Modal/index.d.ts

A series of components to work with @hakit/core

import { HTMLMotionProps, MotionProps, Variant, Transition } from 'framer-motion';
import { ReactNode } from 'react';
interface Animation {
    variants?: {
        animate?: Variant;
        initial?: Variant;
        exit?: Variant;
    };
    layoutId?: string;
    transition?: Transition;
}
/** animation variant controls for the modal container */
export type CustomModalAnimation = (duration: number, id: string) => {
    /** animation variant controls for main modal element */
    modal?: Animation;
    /** animation variant controls for the modal header element */
    header?: Animation;
    /** animation variant controls for the modal content element */
    content?: Animation;
};
type Extendable = React.ComponentPropsWithoutRef<"div"> & MotionProps;
export interface ModalProps extends Omit<Extendable, "title"> {
    /** triggers the modal opening */
    open: boolean;
    /** the react layout to include inside the Modal */
    children: React.ReactNode;
    /** The title of the dialog */
    title?: ReactNode;
    /** the description of the modal */
    description?: ReactNode;
    /** triggered when the users pressed the close button, this is also triggered when the escape key is pressed */
    onClose: () => void;
    /** any prop to pass to the backdrop element */
    backdropProps?: HTMLMotionProps<"div">;
    /** react elements to render next to the close button */
    headerActions?: () => ReactNode;
    /** the animation duration modal animation in seconds @default 0.25 */
    animationDuration?: number;
    /** controls for the modalAnimations, by default the modal will animate expanding from the originating element */
    modalAnimation?: CustomModalAnimation;
    /** Automatically close the modal after the provided number of seconds */
    autocloseSeconds?: number;
}
/** The modal component was built to easily generate a popup dialog from any element by passing through an "open" value, if you pass an id value, and the same id value is used on another motion element from framer-motion the Modal will animate from this element, see the examples below. */
export declare const Modal: import('react').NamedExoticComponent<ModalProps>;
export {};
//# sourceMappingURL=index.d.ts.map