import { Renderable, TNode, Value } from '@tempots/dom';
import { ThemeColorName } from '../../tokens/colors';
import { RadiusName } from '../../tokens/radius';
/**
 * Configuration options for the {@link Notification} component.
 */
export type NotificationOptions = {
    /**
     * Whether the notification is in a loading state. When `true`, a spinner
     * icon replaces the custom icon.
     * @default false
     */
    loading?: Value<boolean>;
    /**
     * Whether to display a close button in the notification.
     * @default false
     */
    showCloseButton?: Value<boolean>;
    /**
     * Whether the notification displays a colored border.
     * @default false
     */
    showBorder?: Value<boolean>;
    /**
     * Theme color applied to the notification accent, icon, and close button.
     * @default 'primary'
     */
    color?: Value<ThemeColorName>;
    /**
     * Border radius applied to the notification container.
     * @default 'md'
     */
    roundedness?: Value<RadiusName>;
    /**
     * Optional title content rendered above the notification body.
     */
    title?: TNode;
    /**
     * Iconify icon identifier to display. When `undefined` and not loading,
     * a colored accent bar is shown instead.
     */
    icon?: Value<string | undefined>;
    /**
     * Callback invoked when the close button is clicked.
     */
    onClose?: () => void;
    /**
     * Additional CSS class name(s) to apply to the notification root element.
     */
    class?: Value<string | undefined>;
};
/**
 * Builds the CSS class string for a Notification element based on its state flags.
 *
 * @param showBorder - Whether the bordered modifier class is applied.
 * @param hasIcon - Whether the has-icon modifier class is applied.
 * @param hasCloseButton - Whether the closable modifier class is applied.
 * @param loading - Whether the loading modifier class is applied.
 * @param extra - Optional additional CSS class(es) to append.
 * @returns A space-separated class string for the notification root element.
 */
export declare function generateNotificationClasses(showBorder: boolean, hasIcon: boolean, hasCloseButton: boolean, loading: boolean, extra?: string): string;
/**
 * Builds the inline CSS style string for a Notification element, setting
 * CSS custom properties for accent color and border radius.
 *
 * @param color - Theme color name used for the accent (maps to the 500 shade).
 * @param roundedness - Radius token name for the notification border radius.
 * @returns A semicolon-separated CSS variable declaration string.
 */
export declare function generateNotificationStyles(color: ThemeColorName, roundedness: RadiusName): string;
/**
 * Renders a notification card with optional icon, title, body content,
 * loading state, and close button. Uses ARIA live regions for accessibility.
 *
 * The notification displays one of three visual states for the left column:
 * - A loading spinner when `loading` is `true`
 * - A custom icon when `icon` is provided
 * - A colored accent bar as a fallback
 *
 * @param options - Configuration options for the notification.
 * @param children - Content nodes rendered inside the notification body.
 * @returns A renderable notification section element.
 *
 * @example
 * ```typescript
 * // Basic notification with title
 * Notification(
 *   { title: html.strong('Upload complete'), color: 'success' },
 *   'Your file has been uploaded successfully.'
 * )
 *
 * // Notification with icon and close button
 * Notification(
 *   {
 *     icon: 'material-symbols:info-outline',
 *     showCloseButton: true,
 *     onClose: () => console.log('closed'),
 *   },
 *   'A new version is available.'
 * )
 *
 * // Loading notification
 * Notification(
 *   { loading: true, title: html.span('Processing...') },
 *   'Please wait while we process your request.'
 * )
 * ```
 */
export declare function Notification({ loading, showCloseButton, showBorder, color, roundedness, title, icon, onClose, class: cls, }?: NotificationOptions, ...children: TNode[]): Renderable;