tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
56 lines (55 loc) • 3.41 kB
TypeScript
/**
* `Modal` is a popup dialog component for displaying content in an overlay, supporting theming and custom styles.
*
* @param {object} props - The properties to customize the `Modal` component.
* @param {boolean} props.open - Whether the modal is open (visible).
* @param {() => void} props.onClose - Function to call when closing the modal.
* @param {string} [props.title] - Optional title for the modal.
* @param {React.ReactNode} [props.children] - Content to display inside the modal.
* @param {React.CSSProperties} [props.styles] - Custom styles for the modal container.
* @param {string} [props.className] - Additional className for the modal container.
* @param {boolean} [props.showCloseButton] - Whether to show the close (×) button. Defaults to true.
* @param {number} [props.cornerRadius] - Border radius for the modal. Overrides theme.cornerRadius if provided.
* @param {string} [props.backgroundColor] - Modal background color. Overrides theme.backgroundColor if provided.
* @param {string} [props.borderColor] - Modal border color. Overrides theme.borderColor if provided.
* @param {string} [props.shadowColor] - Modal shadow color. Overrides theme.shadowColor if provided.
* @param {string} [props.boxShadow] - Modal box-shadow. Overrides theme values if provided.
* @param {string|number} [props.padding] - Modal padding. Overrides theme.padding if provided.
* @param {string|number} [props.margin] - Modal margin. Overrides theme.margin if provided.
* @param {string} [props.fontFamily] - Modal font family. Overrides theme.fontFamily if provided.
* @param {string} [props.textColor] - Modal text color. Overrides theme.textColor if provided.
* @param {string} [props.transitionDuration] - Modal transition duration. Overrides theme.transitionDuration if provided.
*
* @returns {JSX.Element | null} A styled modal dialog, or null if not open.
*/
export interface ModalProps {
open: boolean;
onClose: () => void;
title?: string;
children?: React.ReactNode;
styles?: React.CSSProperties;
className?: string;
showCloseButton?: boolean;
/** Border radius for the modal. Overrides theme.cornerRadius if provided. */
cornerRadius?: number;
/** Modal background color. Overrides theme.backgroundColor if provided. */
backgroundColor?: string;
/** Modal border color. Overrides theme.borderColor if provided. */
borderColor?: string;
/** Modal shadow color. Overrides theme.shadowColor if provided. */
shadowColor?: string;
/** Modal box-shadow. Overrides theme values if provided. */
boxShadow?: string;
/** Modal padding. Overrides theme.padding if provided. */
padding?: string | number;
/** Modal margin. Overrides theme.margin if provided. */
margin?: string | number;
/** Modal font family. Overrides theme.fontFamily if provided. */
fontFamily?: string;
/** Modal text color. Overrides theme.textColor if provided. */
textColor?: string;
/** Modal transition duration. Overrides theme.transitionDuration if provided. */
transitionDuration?: string;
}
declare const Modal: ({ open, onClose, title, children, styles, className, showCloseButton, cornerRadius, backgroundColor, borderColor, shadowColor, boxShadow, padding, margin, fontFamily, textColor, transitionDuration, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
export default Modal;