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

ITS Just UI - React 18 & React 19 UI component library. 36+ accessible, TypeScript-native components with Tailwind CSS. Zero-config Material UI alternative for SaaS dashboards and enterprise apps.

import { default as React } from 'react';

export type AlertVariant = 'default' | 'filled' | 'outlined' | 'ghost';
export type AlertSize = 'sm' | 'md' | 'lg';
export type AlertStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
export interface AlertCustomStyles {
    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;
    titleStyles?: React.CSSProperties;
    descriptionStyles?: React.CSSProperties;
    iconStyles?: React.CSSProperties;
    dismissButtonStyles?: React.CSSProperties;
}
export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'title'> {
    value?: boolean;
    onChange?: (value: boolean) => void;
    defaultOpen?: boolean;
    variant?: AlertVariant;
    size?: AlertSize;
    status?: AlertStatus;
    disabled?: boolean;
    loading?: boolean;
    dismissible?: boolean;
    required?: boolean;
    title?: React.ReactNode;
    description?: React.ReactNode;
    icon?: React.ReactNode;
    children?: React.ReactNode;
    label?: string;
    helperText?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    customStyles?: AlertCustomStyles;
    onDismiss?: () => void;
    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
    transitionDuration?: number;
    _transitionType?: 'fade' | 'slide' | 'scale' | 'none';
    renderTitle?: (props: AlertTitleProps) => React.ReactNode;
    renderDescription?: (props: AlertDescriptionProps) => React.ReactNode;
    renderIcon?: (props: AlertIconProps) => React.ReactNode;
    renderDismissButton?: (props: AlertDismissButtonProps) => React.ReactNode;
}
export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
    children?: React.ReactNode;
    customStyles?: AlertCustomStyles['titleStyles'];
}
export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
    children?: React.ReactNode;
    customStyles?: AlertCustomStyles['descriptionStyles'];
}
export interface AlertIconProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
    customStyles?: AlertCustomStyles['iconStyles'];
}
export interface AlertDismissButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    children?: React.ReactNode;
    customStyles?: AlertCustomStyles['dismissButtonStyles'];
    onDismiss?: () => void;
}
declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLHeadingElement>>;
declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
declare const AlertIcon: React.ForwardRefExoticComponent<AlertIconProps & React.RefAttributes<HTMLDivElement>>;
declare const AlertDismissButton: React.ForwardRefExoticComponent<AlertDismissButtonProps & React.RefAttributes<HTMLButtonElement>>;
export { Alert, AlertTitle, AlertDescription, AlertIcon, AlertDismissButton };