@buun_group/brutalist-ui
Version:
A brutalist-styled component library
70 lines (69 loc) • 3.3 kB
TypeScript
/**
* @module Dialog
* @description A modal dialog component for displaying content that requires user interaction. Supports accessibility features including focus trap and ESC key handling.
*/
import React, { HTMLAttributes, CSSProperties } from 'react';
export interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
/** Whether the dialog is open */
open?: boolean;
/** Callback when open state changes */
onOpenChange?: (open: boolean) => void;
/** Whether to show backdrop */
backdrop?: boolean;
/** Whether clicking backdrop closes dialog */
closeOnBackdropClick?: boolean;
/** Whether pressing escape closes dialog */
closeOnEscape?: boolean;
/** Dialog size */
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
/** Dialog position */
position?: 'center' | 'top' | 'bottom';
/** Whether to animate the dialog */
animate?: boolean;
/** Whether to manage focus automatically */
autoFocus?: boolean;
/** Initial focus element selector */
initialFocus?: string;
/** Additional CSS classes */
className?: string;
/** Custom styles to apply to the dialog */
style?: CSSProperties;
}
interface DialogContextValue {
close: () => void;
}
export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
export declare const DialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
export declare const DialogTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
style?: CSSProperties;
} & React.RefAttributes<HTMLHeadingElement>>;
export declare const DialogBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
export declare const DialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
interface DialogCloseProps extends HTMLAttributes<HTMLButtonElement> {
asChild?: boolean;
style?: CSSProperties;
}
export declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
export declare const useDialog: () => DialogContextValue;
declare const DialogNamespace: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>> & {
Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
style?: CSSProperties;
} & React.RefAttributes<HTMLHeadingElement>>;
Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
style?: CSSProperties;
} & React.RefAttributes<HTMLDivElement>>;
Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
};
export default DialogNamespace;