its-just-ui/dist/components/Dialog/Dialog.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export type DialogVariant = 'default' | 'filled' | 'outlined' | 'ghost' | 'glass';
export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
export type DialogStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
export type DialogPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
export type DialogTransition = 'fade' | 'slide' | 'scale' | 'none';
export interface DialogCustomStyles {
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    backgroundColor?: string;
    background?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    margin?: string;
    marginX?: string;
    marginY?: string;
    overlayStyles?: React.CSSProperties;
    contentStyles?: React.CSSProperties;
    headerStyles?: React.CSSProperties;
    bodyStyles?: React.CSSProperties;
    footerStyles?: React.CSSProperties;
    titleStyles?: React.CSSProperties;
    descriptionStyles?: React.CSSProperties;
    closeButtonStyles?: React.CSSProperties;
}
export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    variant?: DialogVariant;
    size?: DialogSize;
    status?: DialogStatus;
    position?: DialogPosition;
    offsetX?: string | number;
    offsetY?: string | number;
    maxWidth?: string | number;
    maxHeight?: string | number;
    minWidth?: string | number;
    minHeight?: string | number;
    disabled?: boolean;
    loading?: boolean;
    required?: boolean;
    modal?: boolean;
    closeOnEsc?: boolean;
    closeOnOverlayClick?: boolean;
    preventScroll?: boolean;
    container?: HTMLElement | null;
    title?: React.ReactNode;
    description?: React.ReactNode;
    children?: React.ReactNode;
    label?: string;
    helperText?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    customStyles?: DialogCustomStyles;
    onClose?: () => void;
    onEscapeKeyDown?: (event: KeyboardEvent) => void;
    onOverlayClick?: (event: React.MouseEvent) => void;
    transitionDuration?: number;
    transition?: DialogTransition;
    backdropColor?: string;
    backgroundColor?: string;
    renderOverlay?: (props: DialogOverlayProps) => React.ReactNode;
    renderContent?: (props: DialogContentProps) => React.ReactNode;
    renderHeader?: (props: DialogHeaderProps) => React.ReactNode;
    renderBody?: (props: DialogBodyProps) => React.ReactNode;
    renderFooter?: (props: DialogFooterProps) => React.ReactNode;
}
export interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
    customStyles?: DialogCustomStyles['overlayStyles'];
}
export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
    customStyles?: DialogCustomStyles['contentStyles'];
}
export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
    customStyles?: DialogCustomStyles['headerStyles'];
}
export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
    customStyles?: DialogCustomStyles['bodyStyles'];
}
export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
    customStyles?: DialogCustomStyles['footerStyles'];
}
export interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
    children?: React.ReactNode;
    customStyles?: DialogCustomStyles['titleStyles'];
}
export interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
    children?: React.ReactNode;
    customStyles?: DialogCustomStyles['descriptionStyles'];
}
export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    children?: React.ReactNode;
    customStyles?: DialogCustomStyles['closeButtonStyles'];
}
declare const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
declare const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
export { Dialog, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose, };