import React from 'react';
import type { ComponentPropsWithoutRef } from 'react';
export type AlertVariant = 'error' | 'warning' | 'info' | 'success';
export type AlertLayout = 'default' | 'card';
export interface AlertProps extends ComponentPropsWithoutRef<'div'> {
    /**
     * Alert severity/type
     * - 'error': Error state (red)
     * - 'warning': Warning state (orange)
     * - 'info': Informational state (blue)
     * - 'success': Success state (green)
     * @default 'error'
     */
    variant?: AlertVariant;
    /**
     * Layout style
     * - 'default': Standard alert display
     * - 'card': Centered layout optimized for card containers
     * @default 'default'
     */
    layout?: AlertLayout;
    /**
     * Alert title/heading
     * @default Auto-generated based on variant
     */
    title?: string;
    /**
     * Detailed alert message or description
     */
    message?: string;
    /**
     * Optional action handler (typically for retry or dismiss)
     * When provided, shows an action button
     */
    onAction?: () => void;
    /**
     * Label for the action button
     * @default 'Try Again' for error, 'Dismiss' for others
     */
    actionLabel?: string;
    /**
     * Custom icon to display instead of default variant icon
     */
    icon?: React.ReactNode;
    /**
     * Hide the icon completely
     * @default false
     */
    hideIcon?: boolean;
    /**
     * Optional test ID for testing purposes
     */
    'data-testid'?: string;
}
/**
 * Alert component for displaying feedback messages
 *
 * Supports multiple severity levels (error, warning, info, success)
 * following standard design system patterns from Material UI, Chakra UI, etc.
 *
 * @example
 * ```tsx
 * // Error alert
 * <Alert
 *   variant="error"
 *   title="Failed to load"
 *   message="Unable to fetch data"
 *   onAction={handleRetry}
 * />
 *
 * // Success alert
 * <Alert
 *   variant="success"
 *   title="Saved"
 *   message="Your changes have been saved"
 * />
 *
 * // Warning alert
 * <Alert
 *   variant="warning"
 *   message="Your session will expire soon"
 * />
 *
 * // Info alert
 * <Alert
 *   variant="info"
 *   message="New features are available"
 * />
 *
 * // Card layout (centered)
 * <Alert
 *   variant="error"
 *   layout="card"
 *   title="No results found"
 *   message="Try adjusting your filters"
 * />
 *
 * // Custom icon
 * <Alert
 *   icon={<CustomIcon />}
 *   title="Custom alert"
 * />
 * ```
 */
export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=Alert.d.ts.map