@aurora-ds/components 0.15.4 → 0.16.1

package/dist/cjs/index.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var theme = require('@aurora-ds/theme');
+var reactDom = require('react-dom');
 
 const ICON_STYLES = theme.createStyles((theme) => ({
     root: (size, color, backgroundColor, padding, borderRadius) => ({
@@ -535,6 +536,31 @@ const AvatarGroup = ({ children, limit, size = 'medium' }) => {
 };
 AvatarGroup.displayName = 'AvatarGroup';
 
+const shimmerAnimation = theme.keyframes({
+    '0%': {
+        backgroundPosition: '-200% 0',
+    },
+    '100%': {
+        backgroundPosition: '200% 0',
+    },
+});
+
+const SKELETON_STYLES = theme.createStyles((theme) => ({
+    root: (width, height, borderRadius) => ({
+        width,
+        height,
+        borderRadius: borderRadius ? theme.radius[borderRadius] : theme.radius.md,
+        background: `linear-gradient(90deg, ${theme.colors.surfaceActive} 25%, ${theme.colors.surfaceHover} 50%, ${theme.colors.surfaceActive} 75%)`,
+        backgroundSize: '200% 100%',
+        animation: `${shimmerAnimation} 1.2s ease-in-out infinite`,
+    }),
+}));
+
+const Skeleton = ({ width, height, borderRadius }) => {
+    return (jsxRuntime.jsx("div", { className: SKELETON_STYLES.root(width, height, borderRadius) }));
+};
+Skeleton.displayName = 'Skeleton';
+
 const getButtonSizeStyles = () => ({
     small: {
         height: BUTTON_SIZE - 8,
@@ -647,12 +673,15 @@ const BUTTON_STYLES = theme.createStyles((theme) => {
     const variantStyles = getButtonVariantStyles(theme);
     const sizeStyles = getButtonSizeStyles();
     return {
-        root: ({ variant = 'contained', active = false, textColor, size = 'medium' }) => {
+        root: ({ variant = 'contained', active = false, textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size = 'medium' }) => {
             const sizeConfig = sizeStyles[size];
             const overrides = textColor ? {
                 ...(variant !== 'contained' && { color: theme.colors[textColor] }),
                 ...(variant === 'outlined' && { border: `1px solid ${theme.colors[textColor]}` }),
             } : {};
+            const backgroundOverride = backgroundColor ? { backgroundColor: theme.colors[backgroundColor] } : {};
+            const hoverBackgroundOverride = hoverBackgroundColor ? { backgroundColor: theme.colors[hoverBackgroundColor] } : {};
+            const activeBackgroundOverride = activeBackgroundColor ? { backgroundColor: theme.colors[activeBackgroundColor] } : {};
             return {
                 display: 'inline-flex',
                 alignItems: 'center',
@@ -668,10 +697,17 @@ const BUTTON_STYLES = theme.createStyles((theme) => {
                 fontFamily: 'inherit',
                 ...variantStyles[variant].default,
                 ...(active && variantStyles[variant].pressed),
-                ':hover': variantStyles[variant].hover,
-                ':active': variantStyles[variant].pressed,
+                ':hover': {
+                    ...variantStyles[variant].hover,
+                    ...hoverBackgroundOverride,
+                },
+                ':active': {
+                    ...variantStyles[variant].pressed,
+                    ...activeBackgroundOverride,
+                },
                 ':disabled': variantStyles[variant].disabled,
                 ...overrides,
+                ...backgroundOverride,
             };
         },
     };
@@ -685,12 +721,12 @@ const BUTTON_STYLES = theme.createStyles((theme) => {
  * - `outlined`: Border only button
  * - `text`: Text only button without background
  */
-const Button = ({ label, startIcon, endIcon, variant = 'contained', active = false, onClick, disabled, type = 'button', textColor: customTextColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Button = ({ label, startIcon, endIcon, variant = 'contained', active = false, onClick, disabled, type = 'button', textColor: customTextColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const theme$1 = theme.useTheme();
     const variantStyles = getButtonVariantStyles(theme$1);
     const sizeStyles = getButtonSizeStyles();
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
-    return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active, textColor: customTextColor, size }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [startIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor, fontSize: sizeStyles[size].fontSize, children: label }), endIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: endIcon }))] }));
+    return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active, textColor: customTextColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [startIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor, fontSize: sizeStyles[size].fontSize, children: label }), endIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: endIcon }))] }));
 };
 Button.displayName = 'Button';
 
@@ -716,12 +752,15 @@ const ICON_BUTTON_STYLES = theme.createStyles((theme) => {
     const variantStyles = getButtonVariantStyles(theme);
     const sizeStyles = getIconButtonSizeStyles();
     return {
-        root: ({ variant = 'contained', active = false, size = 'medium', textColor }) => {
+        root: ({ variant = 'contained', active = false, size = 'medium', textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor }) => {
             const sizeConfig = sizeStyles[size];
             const overrides = textColor ? {
                 ...(variant !== 'contained' && { color: theme.colors[textColor] }),
                 ...(variant === 'outlined' && { border: `1px solid ${theme.colors[textColor]}` }),
             } : {};
+            const backgroundOverride = backgroundColor ? { backgroundColor: theme.colors[backgroundColor] } : {};
+            const hoverBackgroundOverride = hoverBackgroundColor ? { backgroundColor: theme.colors[hoverBackgroundColor] } : {};
+            const activeBackgroundOverride = activeBackgroundColor ? { backgroundColor: theme.colors[activeBackgroundColor] } : {};
             return {
                 display: 'inline-flex',
                 alignItems: 'center',
@@ -739,21 +778,28 @@ const ICON_BUTTON_STYLES = theme.createStyles((theme) => {
                 fontFamily: 'inherit',
                 ...variantStyles[variant].default,
                 ...(active && variantStyles[variant].pressed),
-                ':hover': variantStyles[variant].hover,
-                ':active': variantStyles[variant].pressed,
+                ':hover': {
+                    ...variantStyles[variant].hover,
+                    ...hoverBackgroundOverride,
+                },
+                ':active': {
+                    ...variantStyles[variant].pressed,
+                    ...activeBackgroundOverride,
+                },
                 ':disabled': variantStyles[variant].disabled,
                 ...overrides,
+                ...backgroundOverride,
             };
         },
     };
 });
 
-const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const theme$1 = theme.useTheme();
     const variantStyles = getButtonVariantStyles(theme$1);
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
     const iconSize = getIconButtonSizeStyles()[size].iconSize;
-    return (jsxRuntime.jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active, size, textColor: customTextColor }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: jsxRuntime.jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
+    return (jsxRuntime.jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active, size, textColor: customTextColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: jsxRuntime.jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
 };
 IconButton.displayName = 'IconButton';
 
@@ -774,7 +820,7 @@ const Form = ({ children, onSubmit, ariaLabel, }) => {
     return (jsxRuntime.jsx("form", { onSubmit: handleSubmit, className: FORM_STYLES.root, "aria-label": ariaLabel, children: children }));
 };
 Form.displayName = 'Form';
-var Form_default = React.memo(Form);
+var Form$1 = React.memo(Form);
 
 /**
  * Input styles using createStyles from @aurora-ds/theme
@@ -899,6 +945,8 @@ const ChevronRightIcon = () => {
     return (jsxRuntime.jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-chevron-right-icon lucide-chevron-right', children: jsxRuntime.jsx("path", { d: 'm9 18 6-6-6-6' }) }));
 };
 
+const CloseIcon = () => (jsxRuntime.jsx("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M12 4L4 12M4 4l8 8', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
+
 const EyeIcon = () => {
     return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-eye-icon lucide-eye', children: [jsxRuntime.jsx("path", { d: 'M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' }), jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '3' })] }));
 };
@@ -1004,6 +1052,302 @@ const TextArea = React.forwardRef(({ value, onChange, label, mandatory = false,
 TextArea.displayName = 'TextArea';
 var TextArea_default = React.memo(TextArea);
 
+/**
+ * Select styles using createStyles from @aurora-ds/theme
+ */
+const SELECT_STYLES = theme.createStyles((theme) => ({
+    root: ({ disabled = false, width }) => ({
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        boxSizing: 'border-box',
+        width: width ?? '100%',
+        padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radius.md,
+        fontSize: theme.fontSize.md,
+        fontFamily: 'inherit',
+        backgroundColor: theme.colors.surface,
+        color: theme.colors.text,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        transition: `border-color ${theme.transition.fast}`,
+        outline: 'none',
+        minHeight: BUTTON_SIZE,
+        maxHeight: BUTTON_SIZE,
+        gap: theme.spacing.md,
+        lineHeight: theme.lineHeight.none,
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        ...(disabled && {
+            color: theme.colors.disabled,
+            cursor: 'not-allowed',
+            opacity: theme.opacity.high
+        }),
+        ...(!disabled && {
+            ':hover': {
+                borderColor: theme.colors.primaryHover,
+            },
+        }),
+    }),
+    trigger: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        flex: 1
+    },
+    value: {
+        flex: 1,
+        fontSize: theme.fontSize.md,
+        color: theme.colors.text
+    },
+    placeholder: {
+        flex: 1,
+        fontSize: theme.fontSize.md,
+        color: theme.colors.textSecondary
+    }
+}));
+
+/**
+ * SelectItem styles using createStyles from @aurora-ds/theme
+ */
+const SELECT_ITEM_STYLES = theme.createStyles((theme) => ({
+    root: ({ isSelected = false, disabled = false }) => ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        padding: theme.spacing.sm,
+        borderRadius: theme.radius.sm,
+        backgroundColor: isSelected ? theme.colors.primary : theme.colors.surface,
+        outline: 'none',
+        border: 'none',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        minHeight: MENU_ITEM_SIZE,
+        maxHeight: MENU_ITEM_SIZE,
+        flexShrink: 0,
+        transition: 'background-color 150ms ease-in-out',
+        color: disabled ? theme.colors.disabled : (isSelected ? theme.colors.surface : theme.colors.text),
+        opacity: disabled ? 0.5 : 1,
+        ':hover': {
+            backgroundColor: disabled ? theme.colors.surface : (isSelected ? theme.colors.primary : theme.colors.surfaceHover),
+        },
+    })
+}));
+
+/**
+ * SelectItem component for use inside Select dropdown
+ */
+const SelectItem = ({ option, isSelected = false, onSelect }) => {
+    const handleClick = () => {
+        if (!option.disabled && onSelect) {
+            onSelect(option.value);
+        }
+    };
+    return (jsxRuntime.jsx("button", { className: SELECT_ITEM_STYLES.root({ isSelected, disabled: option.disabled }), onClick: handleClick, role: 'option', "aria-selected": isSelected, children: jsxRuntime.jsx(Text, { variant: 'label', maxLines: 1, children: option.label }) }));
+};
+SelectItem.displayName = 'SelectItem';
+
+const MENU_STYLES = theme.createStyles((theme) => ({
+    root: (isFadingIn, anchorOrigin, position, width) => ({
+        position: 'absolute',
+        zIndex: theme.zIndex.dropdown,
+        marginTop: theme.spacing.xs,
+        backgroundColor: theme.colors.surface,
+        borderRadius: theme.radius.md,
+        border: `1px solid ${theme.colors.border}`,
+        boxShadow: theme.shadows.md,
+        minWidth: 150,
+        maxHeight: MENU_ITEM_SIZE * 8,
+        overflowY: 'auto',
+        width,
+        opacity: isFadingIn ? 1 : 0,
+        transform: isFadingIn ? 'scale(1)' : 'scale(0.95)',
+        transformOrigin: anchorOrigin === 'right' ? 'top right' : 'top left',
+        transition: `opacity ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out, transform ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out`,
+        top: position?.top ?? 0,
+        left: position?.left ?? 0,
+        visibility: position ? 'visible' : 'hidden',
+    }),
+}));
+
+/**
+ * Hook pour calculer la position d'un élément par rapport à son ancre
+ * @param anchor - Élément HTML servant d'ancre
+ * @param menuRef - Référence vers l'élément à positionner
+ * @param anchorOrigin - Origine de l'ancrage ('left' ou 'right')
+ * @param isVisible - Si l'élément est visible (pour recalculer la position)
+ */
+const useAnchorPosition = ({ anchor, menuRef, anchorOrigin = 'right', isVisible }) => {
+    const [position, setPosition] = React.useState(null);
+    React.useLayoutEffect(() => {
+        if (anchor && isVisible) {
+            const anchorRect = anchor.getBoundingClientRect();
+            const menuWidth = menuRef.current?.offsetWidth || 150;
+            const left = anchorOrigin === 'right'
+                ? anchorRect.right - menuWidth + window.scrollX
+                : anchorRect.left + window.scrollX;
+            setPosition({
+                top: anchorRect.bottom + window.scrollY,
+                left
+            });
+        }
+        else {
+            setPosition(null);
+        }
+    }, [anchor, anchorOrigin, isVisible, menuRef]);
+    return position;
+};
+
+/**
+ * Gestion d'un click en dehors d'un ou plusieurs éléments
+ * @param refs Tableau de références à écouter
+ * @param onClickOutside Callback si clic à l'extérieur
+ * @param shouldTrigger Activation du comportement
+ */
+const useClickOutside = (refs, onClickOutside, shouldTrigger = true) => {
+    React.useEffect(() => {
+        if (!shouldTrigger) {
+            return;
+        }
+        const handleClick = (event) => {
+            const isInside = refs.some(ref => ref.current?.contains(event.target));
+            if (!isInside) {
+                onClickOutside();
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [refs, onClickOutside, shouldTrigger]);
+};
+
+/**
+ * Hook pour gérer les animations de transition lors des renders
+ * @param isOpen - État d'ouverture
+ * @param duration - Durée de la transition en ms
+ */
+const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [isFadingIn, setIsFadingIn] = React.useState(false);
+    React.useEffect(() => {
+        if (isOpen) {
+            setIsVisible(true);
+            const timeout = setTimeout(() => {
+                setIsFadingIn(true);
+            }, 10);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+        else {
+            setIsFadingIn(false);
+            const timeout = setTimeout(() => {
+                setIsVisible(false);
+            }, duration);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [isOpen, duration]);
+    return {
+        isVisible,
+        isFadingIn
+    };
+};
+
+const Menu = ({ anchor, onClose, children, anchorOrigin = 'right', width }) => {
+    // refs
+    const menuRef = React.useRef(null);
+    const anchorRef = React.useRef(null);
+    // variables
+    const isOpen = Boolean(anchor);
+    const refs = React.useMemo(() => [menuRef, anchorRef], []);
+    // hooks
+    const { isVisible, isFadingIn } = useTransitionRender(isOpen);
+    const position = useAnchorPosition({ anchor: anchorRef.current, menuRef, anchorOrigin, isVisible });
+    // useEffects
+    React.useEffect(() => {
+        if (anchor) {
+            anchorRef.current = anchor;
+        }
+    }, [anchor]);
+    React.useEffect(() => {
+        if (!isVisible) {
+            anchorRef.current = null;
+        }
+    }, [isVisible]);
+    useClickOutside(refs, onClose, isVisible);
+    if (!isVisible) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { ref: menuRef, className: MENU_STYLES.root(isFadingIn, anchorOrigin, position, width), children: children }));
+};
+Menu.displayName = 'Menu';
+
+const MENU_GROUP_STYLES = theme.createStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing.xs,
+    },
+}));
+
+const MenuGroup = ({ children }) => {
+    return (jsxRuntime.jsx("div", { className: MENU_GROUP_STYLES.root, children: children }));
+};
+MenuGroup.displayName = 'MenuGroup';
+
+const MENU_ITEM_STYLES = theme.createStyles((theme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        padding: theme.spacing.sm,
+        borderRadius: theme.radius.sm,
+        backgroundColor: theme.colors.surface,
+        outline: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        minHeight: MENU_ITEM_SIZE,
+        maxHeight: MENU_ITEM_SIZE,
+        flexShrink: 0,
+        transition: 'background-color 150ms ease-in-out',
+        ':hover': {
+            backgroundColor: theme.colors.surfaceHover,
+        },
+    },
+}));
+
+const MenuItem = ({ label, icon, onClick, textColor, iconColor }) => {
+    return (jsxRuntime.jsxs("button", { className: MENU_ITEM_STYLES.root, onClick: onClick, children: [icon && (jsxRuntime.jsx(Icon, { color: iconColor ?? 'text', size: 'sm', children: icon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor ?? 'text', maxLines: 1, fontSize: 'sm', children: label })] }));
+};
+MenuItem.displayName = 'MenuItem';
+
+/**
+ * Select component that uses Menu for dropdown
+ */
+const Select = ({ options, value, onChange, placeholder = 'Select an option', disabled = false, width }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const triggerRef = React.useRef(null);
+    const selectedOption = options.find(option => option.value === value);
+    const handleTriggerClick = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleSelect = (selectedValue) => {
+        onChange?.(selectedValue);
+        setIsOpen(false);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { ref: triggerRef, className: SELECT_STYLES.root({ disabled, width }), onClick: handleTriggerClick, role: 'button', tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, "aria-haspopup": 'listbox', children: [jsxRuntime.jsx("div", { className: SELECT_STYLES.trigger, children: jsxRuntime.jsx(Text, { variant: 'p', maxLines: 1, color: selectedOption ? 'text' : 'textSecondary', children: selectedOption ? selectedOption.label : placeholder }) }), jsxRuntime.jsx(Icon, { children: jsxRuntime.jsx(ChevronDownIcon, {}) })] }), jsxRuntime.jsx(Menu, { anchor: isOpen ? triggerRef.current : null, onClose: handleClose, width: width, children: jsxRuntime.jsx(MenuGroup, { children: options.map(option => (jsxRuntime.jsx(SelectItem, { option: option, isSelected: option.value === value, onSelect: handleSelect }, option.value))) }) })] }));
+};
+Select.displayName = 'Select';
+
 /**
  * Card styles using createStyles from @aurora-ds/theme
  */
@@ -1035,7 +1379,7 @@ const CARD_STYLES = theme.createStyles((theme) => ({
  * - `column`: Vertical layout (default)
  * - `row`: Horizontal layout
  */
-const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'sm', align, justify, backgroundColor = 'surface', borderColor, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'none', align, justify, backgroundColor = 'surface', borderColor = 'border', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsxRuntime.jsx("div", { className: CARD_STYLES.root({
             direction,
             padding,
@@ -1265,182 +1609,66 @@ const Accordion = ({ title, children, expanded, defaultExpanded = false, onChang
 };
 Accordion.displayName = 'Accordion';
 
-const MENU_STYLES = theme.createStyles((theme) => ({
-    root: (isFadingIn, anchorOrigin, position, width) => ({
-        position: 'absolute',
-        zIndex: theme.zIndex.dropdown,
-        marginTop: theme.spacing.xs,
-        backgroundColor: theme.colors.surface,
-        borderRadius: theme.radius.md,
-        border: `1px solid ${theme.colors.border}`,
-        boxShadow: theme.shadows.md,
-        minWidth: 150,
-        maxHeight: MENU_ITEM_SIZE * 8,
-        overflowY: 'auto',
-        width,
+const MODAL_STYLES = theme.createStyles((theme) => ({
+    background: (isFadingIn) => ({
+        background: 'rgba(0, 0, 0, 0.6)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        zIndex: 999999,
+        transition: 'opacity 150ms ease-in-out',
+        width: '100vw',
+        height: '100vh',
         opacity: isFadingIn ? 1 : 0,
-        transform: isFadingIn ? 'scale(1)' : 'scale(0.95)',
-        transformOrigin: anchorOrigin === 'right' ? 'top right' : 'top left',
-        transition: `opacity ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out, transform ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out`,
-        top: position?.top ?? 0,
-        left: position?.left ?? 0,
-        visibility: position ? 'visible' : 'hidden',
+    }),
+    content: (isFadingIn) => ({
+        width: '100%',
+        maxWidth: 500,
+        borderRadius: 8,
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: isFadingIn ? 'translate(-50%, -50%) scale(1)' : 'translate(-50%, -50%) scale(0.95)',
+        transformOrigin: 'center center',
+        transition: 'transform 150ms ease-in-out',
+        backgroundColor: theme.colors.background,
+        padding: theme.spacing.md,
+        display: 'flex',
+        flexDirection: 'column',
+        height: 'fit-content',
+        alignItems: 'flex-start',
+        gap: theme.spacing.md,
     }),
 }));
 
-/**
- * Hook pour calculer la position d'un élément par rapport à son ancre
- * @param anchor - Élément HTML servant d'ancre
- * @param menuRef - Référence vers l'élément à positionner
- * @param anchorOrigin - Origine de l'ancrage ('left' ou 'right')
- * @param isVisible - Si l'élément est visible (pour recalculer la position)
- */
-const useAnchorPosition = ({ anchor, menuRef, anchorOrigin = 'right', isVisible }) => {
-    const [position, setPosition] = React.useState(null);
-    React.useLayoutEffect(() => {
-        if (anchor && isVisible) {
-            const anchorRect = anchor.getBoundingClientRect();
-            const menuWidth = menuRef.current?.offsetWidth || 150;
-            const left = anchorOrigin === 'right'
-                ? anchorRect.right - menuWidth + window.scrollX
-                : anchorRect.left + window.scrollX;
-            setPosition({
-                top: anchorRect.bottom + window.scrollY,
-                left
-            });
-        }
-        else {
-            setPosition(null);
-        }
-    }, [anchor, anchorOrigin, isVisible, menuRef]);
-    return position;
-};
-
-/**
- * Gestion d'un click en dehors d'un ou plusieurs éléments
- * @param refs Tableau de références à écouter
- * @param onClickOutside Callback si clic à l'extérieur
- * @param shouldTrigger Activation du comportement
- */
-const useClickOutside = (refs, onClickOutside, shouldTrigger = true) => {
-    React.useEffect(() => {
-        if (!shouldTrigger) {
-            return;
-        }
-        const handleClick = (event) => {
-            const isInside = refs.some(ref => ref.current?.contains(event.target));
-            if (!isInside) {
-                onClickOutside();
-            }
-        };
-        document.addEventListener('mousedown', handleClick);
-        return () => {
-            document.removeEventListener('mousedown', handleClick);
-        };
-    }, [refs, onClickOutside, shouldTrigger]);
-};
-
-/**
- * Hook pour gérer les animations de transition lors des renders
- * @param isOpen - État d'ouverture
- * @param duration - Durée de la transition en ms
- */
-const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
-    const [isVisible, setIsVisible] = React.useState(false);
-    const [isFadingIn, setIsFadingIn] = React.useState(false);
-    React.useEffect(() => {
-        if (isOpen) {
-            setIsVisible(true);
-            const timeout = setTimeout(() => {
-                setIsFadingIn(true);
-            }, 10);
-            return () => {
-                clearTimeout(timeout);
-            };
-        }
-        else {
-            setIsFadingIn(false);
-            const timeout = setTimeout(() => {
-                setIsVisible(false);
-            }, duration);
-            return () => {
-                clearTimeout(timeout);
-            };
-        }
-    }, [isOpen, duration]);
-    return {
-        isVisible,
-        isFadingIn
-    };
-};
-
-const Menu = ({ anchor, onClose, children, anchorOrigin = 'right', width }) => {
+const Modal = ({ isOpen, onClose, label, children, isForm, action }) => {
     // refs
-    const menuRef = React.useRef(null);
-    const anchorRef = React.useRef(null);
-    // variables
-    const isOpen = Boolean(anchor);
-    const refs = React.useMemo(() => [menuRef, anchorRef], []);
+    const modalRef = React.useRef(null);
     // hooks
     const { isVisible, isFadingIn } = useTransitionRender(isOpen);
-    const position = useAnchorPosition({ anchor: anchorRef.current, menuRef, anchorOrigin, isVisible });
-    // useEffects
     React.useEffect(() => {
-        if (anchor) {
-            anchorRef.current = anchor;
-        }
-    }, [anchor]);
-    React.useEffect(() => {
-        if (!isVisible) {
-            anchorRef.current = null;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose]);
+    // components
+    const Wrapper = isForm ? Form$1 : React.Fragment;
+    const wrapperProps = isForm ? {
+        onSubmit: (e) => {
+            e.preventDefault();
+            action?.onClick();
         }
-    }, [isVisible]);
-    useClickOutside(refs, onClose, isVisible);
-    if (!isVisible) {
-        return null;
-    }
-    return (jsxRuntime.jsx("div", { ref: menuRef, className: MENU_STYLES.root(isFadingIn, anchorOrigin, position, width), children: children }));
-};
-Menu.displayName = 'Menu';
-
-const MENU_GROUP_STYLES = theme.createStyles((theme) => ({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: theme.spacing.xs,
-    },
-}));
-
-const MenuGroup = ({ children }) => {
-    return (jsxRuntime.jsx("div", { className: MENU_GROUP_STYLES.root, children: children }));
+    } : {};
+    return reactDom.createPortal(jsxRuntime.jsx(React.Fragment, { children: isVisible ? (jsxRuntime.jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsxRuntime.jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: jsxRuntime.jsxs(Wrapper, { ...wrapperProps, children: [jsxRuntime.jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsxRuntime.jsx(Text, { variant: 'h3', children: label }), !action && (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxRuntime.jsxs(Stack, { justify: 'flex-end', children: [jsxRuntime.jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsxRuntime.jsx(Button, { label: action.label, onClick: !isForm ? action.onClick : undefined, type: isForm ? 'submit' : 'button', disabled: action.disabled })] }))] }) }) })) : null }), document.body);
 };
-MenuGroup.displayName = 'MenuGroup';
-
-const MENU_ITEM_STYLES = theme.createStyles((theme) => ({
-    root: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: theme.spacing.sm,
-        padding: theme.spacing.sm,
-        borderRadius: theme.radius.sm,
-        backgroundColor: theme.colors.surface,
-        outline: 'none',
-        border: 'none',
-        cursor: 'pointer',
-        minHeight: MENU_ITEM_SIZE,
-        maxHeight: MENU_ITEM_SIZE,
-        flexShrink: 0,
-        transition: 'background-color 150ms ease-in-out',
-        ':hover': {
-            backgroundColor: theme.colors.surfaceHover,
-        },
-    },
-}));
-
-const MenuItem = ({ label, icon, onClick, textColor, iconColor }) => {
-    return (jsxRuntime.jsxs("button", { className: MENU_ITEM_STYLES.root, onClick: onClick, children: [icon && (jsxRuntime.jsx(Icon, { color: iconColor ?? 'text', size: 'sm', children: icon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor ?? 'text', maxLines: 1, fontSize: 'sm', children: label })] }));
-};
-MenuItem.displayName = 'MenuItem';
+Modal.displayName = 'Modal';
 
 /**
  * DrawerItem styles using createStyles from @aurora-ds/theme
@@ -1765,7 +1993,7 @@ exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;
 exports.DrawerItem = DrawerItem;
-exports.Form = Form_default;
+exports.Form = Form$1;
 exports.Grid = Grid;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
@@ -1773,9 +2001,12 @@ exports.Input = Input_default;
 exports.Menu = Menu;
 exports.MenuGroup = MenuGroup;
 exports.MenuItem = MenuItem;
+exports.Modal = Modal;
 exports.Page = Page;
 exports.PageSection = PageSection;
+exports.Select = Select;
 exports.Separator = Separator;
+exports.Skeleton = Skeleton;
 exports.Stack = Stack;
 exports.TabItem = TabItem;
 exports.Tabs = Tabs;