@aurora-ds/components 0.18.2 → 0.19.0

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import React, { Children, isValidElement, cloneElement, createElement, Fragment, useMemo, memo, useCallback, forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
+import React, { Children, isValidElement, cloneElement, createElement, Fragment, useMemo, memo, useCallback, forwardRef, useState, useRef, useEffect, useLayoutEffect, createContext, useContext } from 'react';
 import { createStyles, useTheme, keyframes, colors } from '@aurora-ds/theme';
 import { createPortal } from 'react-dom';
 
@@ -141,6 +141,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,
     });
 
@@ -216,8 +220,11 @@ const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLine
     const variantStyles = useMemo(() => getTextVariantStyles(theme), [theme]);
     const tag = variantStyles[variant].tag;
     const parsedChildren = 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 createElement(tag, {
         className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline, preserveWhitespace }),
+        style: truncateStyles,
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
         'aria-describedby': ariaDescribedBy,
@@ -418,6 +425,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;
@@ -476,7 +484,11 @@ const Avatar = ({ image, label, onClick, size = 'medium', color, borderColor, ba
     const AVATAR_SIZES = getAvatarSizes(theme);
     const hasImage = !!image;
     const clickable = !!onClick;
-    return (jsx("div", { className: AVATAR_STYLES.root({ hasImage, clickable, size, color, borderColor, backgroundColor }), onClick: onClick, children: hasImage ? (jsx("img", { src: image, alt: label || 'Avatar', className: AVATAR_STYLES.image })) : (jsx(Text, { variant: 'label', fontSize: AVATAR_SIZES[size].fontSize, children: label || '?' })) }));
+    return (jsx("div", { className: AVATAR_STYLES.root({ hasImage, clickable, size, color, borderColor, backgroundColor }), onClick: (event) => {
+            if (onClick) {
+                onClick(event);
+            }
+        }, children: hasImage ? (jsx("img", { src: image, alt: label || 'Avatar', className: AVATAR_STYLES.image })) : (jsx(Text, { variant: 'label', fontSize: AVATAR_SIZES[size].fontSize, children: label || '?' })) }));
 };
 Avatar.displayName = 'Avatar';
 
@@ -935,10 +947,22 @@ const Stack = ({ children, direction = 'row', gap = 'sm', width, height, align =
 };
 Stack.displayName = 'Stack';
 
+const AlertCircleIcon = () => {
+    return (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: [jsx("circle", { cx: '12', cy: '12', r: '10' }), jsx("line", { x1: '12', y1: '8', x2: '12', y2: '12' }), jsx("line", { x1: '12', y1: '16', x2: '12.01', y2: '16' })] }));
+};
+
+const AlertTriangleIcon = () => {
+    return (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: [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' }), jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }), jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' })] }));
+};
+
 const CalendarIcon = () => {
     return (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: [jsx("path", { d: 'M8 2v4' }), jsx("path", { d: 'M16 2v4' }), jsx("rect", { width: '18', height: '18', x: '3', y: '4', rx: '2' }), jsx("path", { d: 'M3 10h18' })] }));
 };
 
+const CheckCircleIcon = () => {
+    return (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: [jsx("circle", { cx: '12', cy: '12', r: '10' }), jsx("polyline", { points: '9 12 11 14 15 10' })] }));
+};
+
 const ChevronDownIcon = () => {
     return (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: jsx("path", { d: 'm6 9 6 6 6-6' }) }));
 };
@@ -961,6 +985,10 @@ const EyeOffIcon = () => {
     return (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: [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' }), jsx("path", { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }), 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' }), jsx("path", { d: 'm2 2 20 20' })] }));
 };
 
+const InfoIcon = () => {
+    return (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: [jsx("circle", { cx: '12', cy: '12', r: '10' }), jsx("line", { x1: '12', y1: '16', x2: '12', y2: '12' }), jsx("line", { x1: '12', y1: '8', x2: '12.01', y2: '8' })] }));
+};
+
 const MoreHorizontalIcon = () => {
     return (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: [jsx("circle", { cx: '12', cy: '12', r: '1' }), jsx("circle", { cx: '19', cy: '12', r: '1' }), jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
 };
@@ -1667,7 +1695,7 @@ const Calendar$1 = ({ value, onDateSelect, minDate, maxDate, locale = 'fr-FR', }
         const year = value?.getFullYear() ?? new Date().getFullYear();
         return Math.floor(year / 12) * 12;
     });
-    const calendarDays = useMemo(() => getCalendarDays(currentMonth.getFullYear(), currentMonth.getMonth(), value, minDate, maxDate), [currentMonth, value, minDate, maxDate]);
+    const calendarDays = useMemo(() => getCalendarDays(currentMonth.getFullYear(), currentMonth.getMonth(), value, minDate ?? undefined, maxDate ?? undefined), [currentMonth, value, minDate, maxDate]);
     const headerLabel = useMemo(() => {
         if (view === 'days') {
             return currentMonth.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
@@ -2129,6 +2157,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 = 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: jsx(InfoIcon, {}),
+    info: jsx(InfoIcon, {}),
+    warning: jsx(AlertTriangleIcon, {}),
+    error: jsx(AlertCircleIcon, {}),
+    success: 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 = memo(({ text, variant = 'default', position = 'top-right', isVisible = false, offsetY = 0, maxWidth = ALERT_MAX_WIDTH, alertId, onHeightChange }) => {
+    const theme = useTheme();
+    const alertRef = useRef(null);
+    const lastHeightRef = useRef(0);
+    const icon = useMemo(() => getAlertIcon(variant), [variant]);
+    const colors = useMemo(() => getAlertVariantColors(theme, variant), [theme, variant]);
+    // Report height changes to parent (only when height actually changes)
+    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 (jsxs("div", { ref: alertRef, className: ALERT_STYLES.root({ variant, position, isVisible, offsetY, maxWidth }), role: 'alert', "aria-live": 'polite', children: [jsx(Icon, { size: 'sm', color: colors.iconColor, children: icon }), jsx(Text, { variant: 'span', fontSize: 'sm', color: colors.iconColor, maxLines: 4, children: text })] }));
+});
+Alert.displayName = 'Alert';
+
 const MODAL_STYLES = createStyles((theme) => ({
     background: (isFadingIn) => ({
         background: 'rgba(0, 0, 0, 0.6)',
@@ -2639,5 +2821,154 @@ const Pagination = ({ currentPage, totalPages, onPageChange, onPrevious, onNext,
 };
 Pagination.displayName = 'Pagination';
 
-export { Accordion, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DatePicker_default as DatePicker, DrawerItem, Form, Grid, Icon, IconButton, Input_default as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, TextArea_default as TextArea, useAnchorPosition, useClickOutside, useTransitionRender };
+const AlertContext = 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] = useState([]);
+    const [visibleAlerts, setVisibleAlerts] = useState(new Set());
+    const [alertHeights, setAlertHeights] = useState(new Map());
+    const timersRef = useRef(new Map());
+    const showAlert = 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 = 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
+    useEffect(() => {
+        return () => {
+            timersRef.current.forEach(timer => clearTimeout(timer));
+            timersRef.current.clear();
+        };
+    }, []);
+    const contextValue = useMemo(() => ({ showAlert }), [showAlert]);
+    // Group alerts by position
+    const alertsByPosition = useMemo(() => {
+        const grouped = {};
+        alerts.forEach(alert => {
+            if (!grouped[alert.position]) {
+                grouped[alert.position] = [];
+            }
+            grouped[alert.position].push(alert);
+        });
+        return grouped;
+    }, [alerts]);
+    return (jsxs(AlertContext.Provider, { value: contextValue, children: [children, typeof window !== 'undefined' && createPortal(jsx(Fragment$1, { 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 (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 = useContext(AlertContext);
+    if (!context) {
+        throw new Error('useAlert must be used within an AlertProvider');
+    }
+    return context;
+};
+
+export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DatePicker_default as DatePicker, DrawerItem, Form, Grid, Icon, IconButton, Input_default as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, TextArea_default as TextArea, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
 //# sourceMappingURL=index.js.map