import type { HTMLAttributes, ReactNode } from 'react';
import { cx } from '../../utils/cx';
import './Alert.css';
export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
/* `title` is omitted from the DOM attributes so it can carry a ReactNode
heading rather than the native tooltip string. */
export interface AlertProps extends Omit, 'title'> {
tone?: AlertTone;
/** Bold first line. */
title?: ReactNode;
/** Replaces the default tone icon. Pass `null` to drop the icon entirely. */
icon?: ReactNode | null;
/** Renders a close button and is called when it is pressed. */
onDismiss?: () => void;
/** Accessible name for the close button. */
dismissLabel?: string;
children?: ReactNode;
}
const ICONS: Record = {
info: (
),
success: (
),
warning: (
),
danger: (
),
};
/**
* Inline message about the state of the page or a recent action.
* `danger` and `warning` announce assertively; the rest announce politely.
*/
export function Alert({
tone = 'info',
title,
icon,
onDismiss,
dismissLabel = 'Dismiss',
className,
children,
...rest
}: AlertProps) {
const resolvedIcon = icon === undefined ? ICONS[tone] : icon;
const assertive = tone === 'danger' || tone === 'warning';
return (