welcome-ui/dist/types/components/Modal/types.d.ts

Customizable design system with react, typescript, tailwindcss and ariakit.

import { DialogOptions, DialogStore, DialogStoreProps } from '@ariakit/react';
import { ComponentProps, HTMLAttributes, PropsWithChildren } from 'react';
import { MergeProps } from '../../utils/forwardRefWithAs';
import { IconName } from '../Icon/types';
export type TriggerProps = PropsWithChildren<{
    store: DialogStore;
}>;
export type UseModal = DialogStore;
export type UseModalProps = DialogStoreProps & {
    /**
     * Call a function before closing the modal
     * @deprecated use onClose on <Modal /> instead
     */
    onClose?: () => void;
};
export type Size = 'auto' | 'sm' | 'md' | 'lg';
export interface ModalOptions {
    ariaLabel: string;
    children: React.ReactElement;
    fullscreen?: boolean;
    size?: Size;
}
type BaseDialogOptions = Omit<DialogOptions<'div'>, 'as'>;
export type ModalProps = MergeProps<BaseDialogOptions & ModalOptions, ComponentProps<'div'>>;
export type HeaderProps = HTMLAttributes<HTMLDivElement>;
export interface BodyOptions {
    iconName?: IconName;
    subtitle?: JSX.Element | string;
    title?: JSX.Element | string;
}
export type BodyProps = MergeProps<BodyOptions, PropsWithChildren<HTMLAttributes<HTMLElement>>>;
export type ContentProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
    withClosingButton?: boolean;
};
export type BackdropProps = Pick<BaseDialogOptions, 'backdrop' | 'hideOnInteractOutside'>;
export type FooterProps = HTMLAttributes<HTMLDivElement> & {
    variant?: 'full' | 'right';
};
export {};