@aurora-ds/components 0.18.2 → 0.19.0

package/README.md

@@ -47,6 +47,7 @@ function App() {
 | Component | Description |
 |-----------|-------------|
 | **Accordion** | Collapsible container to show/hide content |
+| **Alert** | Notification component with variants (default, info, warning, error, success) and auto-dismiss |
 | **Avatar** | User avatar display component with image or initials |
 | **AvatarGroup** | Group of avatars with overlapping display |
 | **Breadcrumb** | Navigation component for hierarchical page structures |

package/dist/cjs/components/data-display/avatar/Avatar.props.d.ts

@@ -6,7 +6,7 @@ export type AvatarProps = {
     /** Fallback text to display when no image */
     label?: string;
     /** Click handler */
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     /** Size of the avatar */
     size?: AvatarSize;
     /** Text color for the label */

package/dist/cjs/components/forms/date-picker/calendar/Calendar.props.d.ts

@@ -5,9 +5,9 @@ export type CalendarProps = {
     /** Callback when a date is selected */
     onDateSelect: (date: Date) => void;
     /** Minimum selectable date */
-    minDate?: Date;
+    minDate?: Date | null;
     /** Maximum selectable date */
-    maxDate?: Date;
+    maxDate?: Date | null;
     /** Locale for month/year display */
     locale?: string;
 };

package/dist/cjs/components/index.d.ts

@@ -17,12 +17,14 @@ export * from '@components/layout/separator';
 export * from '@components/layout/page-construction/page-section';
 export * from '@components/layout/page-construction/page';
 export * from '@components/overlay/accordion';
+export * from '@components/overlay/alert';
 export * from '@components/overlay/menu';
 export * from '@components/overlay/modal';
 export * from '@components/navigation/drawer-item';
 export * from '@components/navigation/breadcrumb';
 export * from '@components/navigation/tabs';
 export * from '@components/navigation/pagination';
+export type { AlertVariant, AlertPosition } from '@interfaces/alert.types';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
 export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';

package/dist/cjs/components/overlay/alert/Alert.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { AlertProps } from '@components/overlay/alert/Alert.props';
+/**
+ * Alert component - Display notifications with different variants
+ *
+ * **Variants:**
+ * - `default`: Standard alert with neutral styling
+ * - `info`: Informational alert with blue styling
+ * - `warning`: Warning alert with yellow/orange styling
+ * - `error`: Error alert with red styling
+ * - `success`: Success alert with green styling
+ *
+ * **Features:**
+ * - Auto-dismisses after 3 seconds
+ * - Positioned at screen corners
+ * - Supports stacking with offsetY
+ * - Icon based on variant
+ * - Smooth animations
+ * - Dynamic height calculation for proper stacking
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   text="Operation completed successfully"
+ *   variant="success"
+ *   position="top-right"
+ *   isVisible={true}
+ * />
+ * ```
+ */
+declare const Alert: FC<AlertProps>;
+export { Alert };

package/dist/cjs/components/overlay/alert/Alert.props.d.ts

@@ -0,0 +1,56 @@
+import { AlertPosition, AlertVariant } from '@interfaces/alert.types';
+/**
+ * Alert component props
+ */
+export interface AlertProps {
+    /**
+     * Text content of the alert
+     */
+    text: string;
+    /**
+     * Variant of the alert determining its color and icon
+     * @default 'default'
+     */
+    variant?: AlertVariant;
+    /**
+     * Position of the alert on screen
+     * @default 'top-right'
+     */
+    position?: AlertPosition;
+    /**
+     * Whether the alert is visible
+     * @default false
+     */
+    isVisible?: boolean;
+    /**
+     * Vertical offset for stacking alerts (in pixels)
+     * @default 0
+     */
+    offsetY?: number;
+    /**
+     * Maximum width of the alert in pixels
+     * @default 300
+     */
+    maxWidth?: number;
+    /**
+     * Unique identifier for the alert
+     * @internal
+     */
+    alertId?: string;
+    /**
+     * Callback when alert height changes
+     * @internal
+     */
+    onHeightChange?: (alertId: string, height: number) => void;
+}
+/**
+ * Internal style parameters for Alert component
+ * @internal
+ */
+export interface AlertStyleParams {
+    variant: AlertVariant;
+    position: AlertPosition;
+    isVisible: boolean;
+    offsetY: number;
+    maxWidth: number;
+}

package/dist/cjs/components/overlay/alert/Alert.styles.d.ts

@@ -0,0 +1,4 @@
+import { AlertStyleParams } from '@components/overlay/alert/Alert.props';
+export declare const ALERT_STYLES: {
+    root: (args_0: AlertStyleParams) => string;
+};

package/dist/cjs/components/overlay/alert/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@components/overlay/alert/Alert';
+export type { AlertProps } from '@components/overlay/alert/Alert.props';

package/dist/cjs/constants/globalConstants.d.ts

@@ -1,4 +1,5 @@
 export declare const BUTTON_SIZE = 36;
+export declare const ALERT_MAX_WIDTH = 320;
 export declare const MENU_ITEM_SIZE = 32;
 export declare const DRAWER_ITEM_HEIGHT = 32;
 export declare const DEFAULT_TRANSITION_DURATION_MS = 150;

package/dist/cjs/hooks/index.d.ts

@@ -1,3 +1,5 @@
+export { useAlert, AlertProvider } from '@hooks/useAlert.tsx';
+export type { ShowAlertOptions, AlertContextValue, AlertProviderProps } from '@hooks/useAlert.types';
 export { useAnchorPosition } from '@hooks/useAnchorPosition';
 export type { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
 export { useClickOutside } from '@hooks/useClickOutside';

package/dist/cjs/hooks/useAlert.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { AlertContextValue, AlertProviderProps } from '@hooks/useAlert.types';
+/**
+ * Alert Provider Component
+ * Manages alert queue and renders alerts in a portal
+ */
+declare const AlertProvider: FC<AlertProviderProps>;
+/**
+ * Hook to access alert functionality
+ *
+ * @example
+ * ```tsx
+ * const { showAlert } = useAlert()
+ *
+ * showAlert({
+ *   text: 'Operation completed',
+ *   variant: 'success',
+ *   position: 'top-right'
+ * })
+ * ```
+ */
+declare const useAlert: () => AlertContextValue;
+export { AlertProvider, useAlert };

package/dist/cjs/hooks/useAlert.types.d.ts

@@ -0,0 +1,56 @@
+import { AlertPosition, AlertVariant } from '@interfaces/alert.types';
+/**
+ * Alert item in the queue
+ */
+export interface AlertItem {
+    id: string;
+    text: string;
+    variant: AlertVariant;
+    position: AlertPosition;
+    timestamp: number;
+    maxWidth: number;
+}
+/**
+ * Options for showing an alert
+ */
+export interface ShowAlertOptions {
+    /**
+     * Text content of the alert
+     */
+    text: string;
+    /**
+     * Variant of the alert
+     * @default 'default'
+     */
+    variant?: AlertVariant;
+    /**
+     * Position of the alert on screen
+     * @default 'top-right'
+     */
+    position?: AlertPosition;
+    /**
+     * Duration before auto-dismiss in milliseconds
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * Maximum width of the alert in pixels
+     * @default 300
+     */
+    maxWidth?: number;
+}
+/**
+ * Alert context value
+ */
+export interface AlertContextValue {
+    /**
+     * Show an alert
+     */
+    showAlert: (options: ShowAlertOptions) => void;
+}
+/**
+ * Alert provider props
+ */
+export interface AlertProviderProps {
+    children: React.ReactNode;
+}

package/dist/cjs/index.js

@@ -143,6 +143,10 @@ const getTruncateTextStyles = (maxLines) => (maxLines === 1
         display: '-webkit-box',
         WebkitLineClamp: maxLines,
         WebkitBoxOrient: 'vertical',
+        // Improve wrapping behavior for multi-line clamp compatibility
+        whiteSpace: 'normal',
+        overflowWrap: 'break-word',
+        wordBreak: 'break-word',
         lineClamp: maxLines,
     });
 
@@ -218,8 +222,11 @@ const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLine
     const variantStyles = React.useMemo(() => getTextVariantStyles(theme$1), [theme$1]);
     const tag = variantStyles[variant].tag;
     const parsedChildren = React.useMemo(() => parseTextWithBold(children), [children]);
+    // Force inline truncate styles when needed (fix for multi-line clamp not applied in some envs)
+    const truncateStyles = maxLines ? getTruncateTextStyles(maxLines) : undefined;
     return React.createElement(tag, {
         className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline, preserveWhitespace }),
+        style: truncateStyles,
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
         'aria-describedby': ariaDescribedBy,
@@ -420,6 +427,7 @@ const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md',
 Chip.displayName = 'Chip';
 
 const BUTTON_SIZE = 36;
+const ALERT_MAX_WIDTH = 320;
 const MENU_ITEM_SIZE = 32;
 const DRAWER_ITEM_HEIGHT = 32;
 const DEFAULT_TRANSITION_DURATION_MS = 150;
@@ -478,7 +486,11 @@ const Avatar = ({ image, label, onClick, size = 'medium', color, borderColor, ba
     const AVATAR_SIZES = getAvatarSizes(theme$1);
     const hasImage = !!image;
     const clickable = !!onClick;
-    return (jsxRuntime.jsx("div", { className: AVATAR_STYLES.root({ hasImage, clickable, size, color, borderColor, backgroundColor }), onClick: onClick, children: hasImage ? (jsxRuntime.jsx("img", { src: image, alt: label || 'Avatar', className: AVATAR_STYLES.image })) : (jsxRuntime.jsx(Text, { variant: 'label', fontSize: AVATAR_SIZES[size].fontSize, children: label || '?' })) }));
+    return (jsxRuntime.jsx("div", { className: AVATAR_STYLES.root({ hasImage, clickable, size, color, borderColor, backgroundColor }), onClick: (event) => {
+            if (onClick) {
+                onClick(event);
+            }
+        }, children: hasImage ? (jsxRuntime.jsx("img", { src: image, alt: label || 'Avatar', className: AVATAR_STYLES.image })) : (jsxRuntime.jsx(Text, { variant: 'label', fontSize: AVATAR_SIZES[size].fontSize, children: label || '?' })) }));
 };
 Avatar.displayName = 'Avatar';
 
@@ -937,10 +949,22 @@ const Stack = ({ children, direction = 'row', gap = 'sm', width, height, align =
 };
 Stack.displayName = 'Stack';
 
+const AlertCircleIcon = () => {
+    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '10' }), jsxRuntime.jsx("line", { x1: '12', y1: '8', x2: '12', y2: '12' }), jsxRuntime.jsx("line", { x1: '12', y1: '16', x2: '12.01', y2: '16' })] }));
+};
+
+const AlertTriangleIcon = () => {
+    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [jsxRuntime.jsx("path", { d: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }), jsxRuntime.jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }), jsxRuntime.jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' })] }));
+};
+
 const CalendarIcon = () => {
     return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [jsxRuntime.jsx("path", { d: 'M8 2v4' }), jsxRuntime.jsx("path", { d: 'M16 2v4' }), jsxRuntime.jsx("rect", { width: '18', height: '18', x: '3', y: '4', rx: '2' }), jsxRuntime.jsx("path", { d: 'M3 10h18' })] }));
 };
 
+const CheckCircleIcon = () => {
+    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '10' }), jsxRuntime.jsx("polyline", { points: '9 12 11 14 15 10' })] }));
+};
+
 const ChevronDownIcon = () => {
     return (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-chevron-down-icon lucide-chevron-down', children: jsxRuntime.jsx("path", { d: 'm6 9 6 6 6-6' }) }));
 };
@@ -963,6 +987,10 @@ const EyeOffIcon = () => {
     return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-eye-off-icon lucide-eye-off', children: [jsxRuntime.jsx("path", { d: 'M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' }), jsxRuntime.jsx("path", { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }), jsxRuntime.jsx("path", { d: 'M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' }), jsxRuntime.jsx("path", { d: 'm2 2 20 20' })] }));
 };
 
+const InfoIcon = () => {
+    return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '10' }), jsxRuntime.jsx("line", { x1: '12', y1: '16', x2: '12', y2: '12' }), jsxRuntime.jsx("line", { x1: '12', y1: '8', x2: '12.01', y2: '8' })] }));
+};
+
 const MoreHorizontalIcon = () => {
     return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-ellipsis-icon lucide-ellipsis', children: [jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '19', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
 };
@@ -1669,7 +1697,7 @@ const Calendar = ({ value, onDateSelect, minDate, maxDate, locale = 'fr-FR', })
         const year = value?.getFullYear() ?? new Date().getFullYear();
         return Math.floor(year / 12) * 12;
     });
-    const calendarDays = React.useMemo(() => getCalendarDays(currentMonth.getFullYear(), currentMonth.getMonth(), value, minDate, maxDate), [currentMonth, value, minDate, maxDate]);
+    const calendarDays = React.useMemo(() => getCalendarDays(currentMonth.getFullYear(), currentMonth.getMonth(), value, minDate ?? undefined, maxDate ?? undefined), [currentMonth, value, minDate, maxDate]);
     const headerLabel = React.useMemo(() => {
         if (view === 'days') {
             return currentMonth.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
@@ -2131,6 +2159,160 @@ const Accordion = ({ title, children, expanded, defaultExpanded = false, onChang
 };
 Accordion.displayName = 'Accordion';
 
+const ALERT_OFFSET = 16;
+/**
+ * Get position styles for alert
+ * @param position - Alert position
+ * @param offsetY - Vertical offset for stacking (in pixels)
+ * @returns Object with CSS position styles (top/bottom + left/right)
+ */
+const getAlertPositionStyles = (position, offsetY) => {
+    const verticalPosition = `${ALERT_OFFSET + offsetY}px`;
+    switch (position) {
+        case 'top-left':
+            return { top: verticalPosition, left: `${ALERT_OFFSET}px` };
+        case 'top-right':
+            return { top: verticalPosition, right: `${ALERT_OFFSET}px` };
+        case 'bottom-left':
+            return { bottom: verticalPosition, left: `${ALERT_OFFSET}px` };
+        case 'bottom-right':
+            return { bottom: verticalPosition, right: `${ALERT_OFFSET}px` };
+        default:
+            return { top: verticalPosition, right: `${ALERT_OFFSET}px` };
+    }
+};
+
+/**
+ * Get colors for alert variants
+ * @param theme - Aurora theme
+ * @param variant - Alert variant
+ * @returns Colors for the variant
+ */
+const getAlertVariantColors = (theme, variant) => {
+    const variantColors = {
+        default: {
+            background: theme.colors.surface,
+            border: theme.colors.border,
+            iconColor: 'text'
+        },
+        info: {
+            background: theme.colors.infoSubtle,
+            border: theme.colors.info,
+            iconColor: 'info'
+        },
+        warning: {
+            background: theme.colors.warningSubtle,
+            border: theme.colors.warning,
+            iconColor: 'warning'
+        },
+        error: {
+            background: theme.colors.errorSubtle,
+            border: theme.colors.error,
+            iconColor: 'error'
+        },
+        success: {
+            background: theme.colors.successSubtle,
+            border: theme.colors.success,
+            iconColor: 'success'
+        }
+    };
+    return variantColors[variant];
+};
+
+const ALERT_STYLES = theme.createStyles((theme) => ({
+    root: ({ variant, position, isVisible, offsetY, maxWidth }) => {
+        const colors = getAlertVariantColors(theme, variant);
+        const positionStyles = getAlertPositionStyles(position, offsetY);
+        return {
+            position: 'fixed',
+            ...positionStyles,
+            display: 'flex',
+            alignItems: 'center',
+            gap: theme.spacing.sm,
+            padding: theme.spacing.sm,
+            backgroundColor: colors.background,
+            border: `1px solid ${colors.border}`,
+            borderRadius: theme.radius.md,
+            boxShadow: theme.shadows.lg,
+            minWidth: ALERT_MAX_WIDTH,
+            maxWidth,
+            overflow: 'hidden',
+            zIndex: theme.zIndex.toast,
+            opacity: isVisible ? 1 : 0,
+            transform: isVisible ? 'translateY(0)' :
+                (position.startsWith('top') ? 'translateY(-8px)' : 'translateY(8px)'),
+            transition: `all ${theme.transition.normal}, opacity ${theme.transition.fast}`,
+            pointerEvents: isVisible ? 'auto' : 'none'
+        };
+    }
+}));
+
+// Pre-create icon instances to avoid recreation on every call
+const ALERT_ICONS = {
+    default: jsxRuntime.jsx(InfoIcon, {}),
+    info: jsxRuntime.jsx(InfoIcon, {}),
+    warning: jsxRuntime.jsx(AlertTriangleIcon, {}),
+    error: jsxRuntime.jsx(AlertCircleIcon, {}),
+    success: jsxRuntime.jsx(CheckCircleIcon, {})
+};
+/**
+ * Get icon component for alert variant
+ * @param variant - Alert variant
+ * @returns JSX Element for the icon
+ */
+const getAlertIcon = (variant) => {
+    return ALERT_ICONS[variant];
+};
+
+/**
+ * Alert component - Display notifications with different variants
+ *
+ * **Variants:**
+ * - `default`: Standard alert with neutral styling
+ * - `info`: Informational alert with blue styling
+ * - `warning`: Warning alert with yellow/orange styling
+ * - `error`: Error alert with red styling
+ * - `success`: Success alert with green styling
+ *
+ * **Features:**
+ * - Auto-dismisses after 3 seconds
+ * - Positioned at screen corners
+ * - Supports stacking with offsetY
+ * - Icon based on variant
+ * - Smooth animations
+ * - Dynamic height calculation for proper stacking
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   text="Operation completed successfully"
+ *   variant="success"
+ *   position="top-right"
+ *   isVisible={true}
+ * />
+ * ```
+ */
+const Alert = React.memo(({ text, variant = 'default', position = 'top-right', isVisible = false, offsetY = 0, maxWidth = ALERT_MAX_WIDTH, alertId, onHeightChange }) => {
+    const theme$1 = theme.useTheme();
+    const alertRef = React.useRef(null);
+    const lastHeightRef = React.useRef(0);
+    const icon = React.useMemo(() => getAlertIcon(variant), [variant]);
+    const colors = React.useMemo(() => getAlertVariantColors(theme$1, variant), [theme$1, variant]);
+    // Report height changes to parent (only when height actually changes)
+    React.useEffect(() => {
+        if (alertRef.current && onHeightChange && isVisible && alertId) {
+            const height = alertRef.current.offsetHeight;
+            // Only call onHeightChange if height has actually changed
+            if (height !== lastHeightRef.current) {
+                lastHeightRef.current = height;
+                onHeightChange(alertId, height);
+            }
+        }
+    }, [isVisible, text, maxWidth, alertId, onHeightChange]);
+    return (jsxRuntime.jsxs("div", { ref: alertRef, className: ALERT_STYLES.root({ variant, position, isVisible, offsetY, maxWidth }), role: 'alert', "aria-live": 'polite', children: [jsxRuntime.jsx(Icon, { size: 'sm', color: colors.iconColor, children: icon }), jsxRuntime.jsx(Text, { variant: 'span', fontSize: 'sm', color: colors.iconColor, maxLines: 4, children: text })] }));
+});
+Alert.displayName = 'Alert';
+
 const MODAL_STYLES = theme.createStyles((theme) => ({
     background: (isFadingIn) => ({
         background: 'rgba(0, 0, 0, 0.6)',
@@ -2641,7 +2823,158 @@ const Pagination = ({ currentPage, totalPages, onPageChange, onPrevious, onNext,
 };
 Pagination.displayName = 'Pagination';
 
+const AlertContext = React.createContext(undefined);
+const ALERT_DURATION = 3000;
+const MAX_ALERTS = 2;
+const ALERT_HEIGHT = 48; // Approximate height with padding (px)
+const ALERT_SPACING = 6; // Spacing between alerts (px)
+/**
+ * Alert Provider Component
+ * Manages alert queue and renders alerts in a portal
+ */
+const AlertProvider = ({ children }) => {
+    const [alerts, setAlerts] = React.useState([]);
+    const [visibleAlerts, setVisibleAlerts] = React.useState(new Set());
+    const [alertHeights, setAlertHeights] = React.useState(new Map());
+    const timersRef = React.useRef(new Map());
+    const showAlert = React.useCallback((options) => {
+        const { text, variant = 'default', position = 'top-right', duration = ALERT_DURATION, maxWidth = 300 } = options;
+        const id = `alert-${Date.now()}-${Math.random()}`;
+        const newAlert = {
+            id,
+            text,
+            variant,
+            position,
+            timestamp: Date.now(),
+            maxWidth
+        };
+        setAlerts((prev) => {
+            const updatedAlerts = [...prev, newAlert];
+            // Keep only MAX_ALERTS for the same position
+            const samePositionAlerts = updatedAlerts.filter(a => a.position === position);
+            if (samePositionAlerts.length > MAX_ALERTS) {
+                // Remove the oldest alert for this position
+                const oldestAlert = samePositionAlerts[0];
+                const timerToRemove = timersRef.current.get(oldestAlert.id);
+                if (timerToRemove) {
+                    clearTimeout(timerToRemove);
+                    timersRef.current.delete(oldestAlert.id);
+                }
+                setVisibleAlerts((prevVisible) => {
+                    const newVisible = new Set(prevVisible);
+                    newVisible.delete(oldestAlert.id);
+                    return newVisible;
+                });
+                // Remove from alerts array after animation
+                setTimeout(() => {
+                    setAlerts((current) => current.filter(a => a.id !== oldestAlert.id));
+                    setAlertHeights((prevHeights) => {
+                        const newMap = new Map(prevHeights);
+                        newMap.delete(oldestAlert.id);
+                        return newMap;
+                    });
+                }, 300);
+                return updatedAlerts.filter(a => a.id !== oldestAlert.id);
+            }
+            return updatedAlerts;
+        });
+        // Show alert after a small delay for animation
+        setTimeout(() => {
+            setVisibleAlerts((prev) => new Set(prev).add(id));
+        }, 10);
+        // Auto-dismiss timer
+        const timer = setTimeout(() => {
+            setVisibleAlerts((prev) => {
+                const newVisible = new Set(prev);
+                newVisible.delete(id);
+                return newVisible;
+            });
+            // Remove from DOM after animation
+            setTimeout(() => {
+                setAlerts((prev) => prev.filter(a => a.id !== id));
+                setAlertHeights((prev) => {
+                    const newMap = new Map(prev);
+                    newMap.delete(id);
+                    return newMap;
+                });
+                timersRef.current.delete(id);
+            }, 300);
+        }, duration);
+        timersRef.current.set(id, timer);
+    }, []);
+    // Handle height changes from alerts (memoized to avoid re-creating on every render)
+    const handleHeightChange = React.useCallback((alertId, height) => {
+        setAlertHeights((prev) => {
+            const currentHeight = prev.get(alertId);
+            // Only update if height actually changed
+            if (currentHeight !== height) {
+                const newMap = new Map(prev);
+                newMap.set(alertId, height);
+                return newMap;
+            }
+            return prev;
+        });
+    }, []);
+    // Cleanup timers on unmount
+    React.useEffect(() => {
+        return () => {
+            timersRef.current.forEach(timer => clearTimeout(timer));
+            timersRef.current.clear();
+        };
+    }, []);
+    const contextValue = React.useMemo(() => ({ showAlert }), [showAlert]);
+    // Group alerts by position
+    const alertsByPosition = React.useMemo(() => {
+        const grouped = {};
+        alerts.forEach(alert => {
+            if (!grouped[alert.position]) {
+                grouped[alert.position] = [];
+            }
+            grouped[alert.position].push(alert);
+        });
+        return grouped;
+    }, [alerts]);
+    return (jsxRuntime.jsxs(AlertContext.Provider, { value: contextValue, children: [children, typeof window !== 'undefined' && reactDom.createPortal(jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.entries(alertsByPosition).map(([position, positionAlerts]) => {
+                    // positionAlerts is ordered from oldest -> newest
+                    const isTopPosition = position.startsWith('top');
+                    const ordered = isTopPosition ? [...positionAlerts].reverse() : positionAlerts;
+                    return ordered.map((alert, index) => {
+                        // Calculate offset based on actual heights of previous alerts
+                        let offset = 0;
+                        for (let i = 0; i < index; i++) {
+                            const prevAlert = ordered[i];
+                            const height = alertHeights.get(prevAlert.id) || ALERT_HEIGHT;
+                            offset += height + ALERT_SPACING;
+                        }
+                        return (jsxRuntime.jsx(Alert, { text: alert.text, variant: alert.variant, position: alert.position, isVisible: visibleAlerts.has(alert.id), offsetY: offset, maxWidth: alert.maxWidth, alertId: alert.id, onHeightChange: handleHeightChange }, alert.id));
+                    });
+                }) }), document.body)] }));
+};
+/**
+ * Hook to access alert functionality
+ *
+ * @example
+ * ```tsx
+ * const { showAlert } = useAlert()
+ *
+ * showAlert({
+ *   text: 'Operation completed',
+ *   variant: 'success',
+ *   position: 'top-right'
+ * })
+ * ```
+ */
+const useAlert = () => {
+    const context = React.useContext(AlertContext);
+    if (!context) {
+        throw new Error('useAlert must be used within an AlertProvider');
+    }
+    return context;
+};
+
 exports.Accordion = Accordion;
+exports.Alert = Alert;
+exports.AlertProvider = AlertProvider;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.Breadcrumb = Breadcrumb;
@@ -2674,6 +3007,7 @@ exports.TabItem = TabItem;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea_default;
+exports.useAlert = useAlert;
 exports.useAnchorPosition = useAnchorPosition;
 exports.useClickOutside = useClickOutside;
 exports.useTransitionRender = useTransitionRender;