import React from "react";
export type ModalSizeToken = "sm" | "md" | "lg" | "xl" | "full";
/** Preset size token or any arbitrary Tailwind width class, e.g. `"w-80"`, `"w-[50vw]"` */
export type ModalSize = ModalSizeToken | (string & {});
export type ModalVariant = "default" | "translucent";
export interface ModalTheme {
    overlay: string;
    container: string;
    containerVariants: Record<ModalVariant, string>;
    header: string;
    headerContent: string;
    title: string;
    subtitle: string;
    body: string;
    footer: string;
}
export interface ModalThemeOverrides {
    overlay?: string;
    container?: string;
    containerVariants?: Partial<Record<ModalVariant, string>>;
    header?: string;
    headerContent?: string;
    title?: string;
    subtitle?: string;
    body?: string;
    footer?: string;
}
export interface ModalContextValue {
    isOpen: boolean;
    onClose: () => void;
    size: ModalSize;
    isSizeToken: boolean;
    closeOnOverlayClick: boolean;
    closeOnEsc: boolean;
    showCloseButton: boolean;
    theme: ModalTheme;
    isBodyScrollable: boolean;
    setIsBodyScrollable: (scrollable: boolean) => void;
    titleId: string;
    subtitleId: string;
}
export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClose" | "onAnimationStart" | "onDragStart" | "onDrag" | "onDragEnd"> {
    isOpen: boolean;
    onClose: () => void;
    size?: ModalSize;
    /**
     * Visual variant of the modal container.
     * - `default`: Solid background with subtle ring
     * - `translucent`: Frosted glass effect with reduced opacity and backdrop blur
     * @default "default"
     */
    variant?: ModalVariant;
    closeOnOverlayClick?: boolean;
    closeOnEsc?: boolean;
    showCloseButton?: boolean;
    /**
     * ARIA role for the modal dialog.
     * - `dialog`: Standard dialog (default)
     * - `alertdialog`: Alert dialog requiring user acknowledgment
     * @default "dialog"
     */
    role?: "dialog" | "alertdialog";
    children: React.ReactNode;
    className?: string;
    theme?: ModalThemeOverrides;
    /**
     * Force dark mode styling for the component. Use when placing the component
     * on a dark background while the page is in light mode. This applies the
     * 'dark' class to the container, making text, borders, and other elements
     * use light colors for visibility.
     * @default false
     */
    darkMode?: boolean;
}
export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
    icon?: React.ReactNode;
    showCloseButton?: boolean;
    className?: string;
}
export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
    className?: string;
}
export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
    className?: string;
}
export interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
    children: React.ReactNode;
    className?: string;
}
export interface ModalSubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
    children: React.ReactNode;
    className?: string;
}
