@aurora-ds/components 0.10.0 → 0.14.0

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var theme = require('@aurora-ds/theme');
 
 const ICON_STYLES = theme.createStyles((theme) => ({
@@ -58,9 +58,9 @@ const ICON_STYLES = theme.createStyles((theme) => ({
  */
 const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     // Clone child element to apply width and height
-    const child = react.Children.only(children);
-    const styledChild = react.isValidElement(child)
-        ? react.cloneElement(child, {
+    const child = React.Children.only(children);
+    const styledChild = React.isValidElement(child)
+        ? React.cloneElement(child, {
             width: '100%',
             height: '100%',
         })
@@ -183,7 +183,7 @@ const parseTextWithBold = (children) => {
         if (match.index > lastIndex) {
             parts.push(children.slice(lastIndex, match.index));
         }
-        parts.push(react.createElement('strong', { key: match.index }, match[1]));
+        parts.push(React.createElement('strong', { key: match.index }, match[1]));
         lastIndex = match.index + match[0].length;
     }
     if (parts.length === 0) {
@@ -192,7 +192,7 @@ const parseTextWithBold = (children) => {
     if (lastIndex < children.length) {
         parts.push(children.slice(lastIndex));
     }
-    return react.createElement(react.Fragment, null, ...parts);
+    return React.createElement(React.Fragment, null, ...parts);
 };
 
 /**
@@ -214,10 +214,10 @@ const parseTextWithBold = (children) => {
  */
 const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLines, underline, preserveWhitespace, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const theme$1 = theme.useTheme();
-    const variantStyles = react.useMemo(() => getTextVariantStyles(theme$1), [theme$1]);
+    const variantStyles = React.useMemo(() => getTextVariantStyles(theme$1), [theme$1]);
     const tag = variantStyles[variant].tag;
-    const parsedChildren = react.useMemo(() => parseTextWithBold(children), [children]);
-    return react.createElement(tag, {
+    const parsedChildren = React.useMemo(() => parseTextWithBold(children), [children]);
+    return React.createElement(tag, {
         className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline, preserveWhitespace }),
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
@@ -420,6 +420,119 @@ Chip.displayName = 'Chip';
 
 const BUTTON_SIZE = 36;
 const DRAWER_ITEM_HEIGHT = 32;
+const DEFAULT_TRANSITION_DURATION_MS = 150;
+
+/**
+ * Get avatar sizes configuration based on the theme
+ * @param theme
+ */
+const getAvatarSizes = (theme) => ({
+    small: { size: BUTTON_SIZE - 8, fontSize: 'xs', overlap: `-${theme.spacing.md}` },
+    medium: { size: BUTTON_SIZE, fontSize: 'sm', overlap: `-${theme.spacing.md}` },
+    large: { size: BUTTON_SIZE + 8, fontSize: 'sm', overlap: `-${theme.spacing.lg}` },
+});
+
+/**
+ * Avatar styles using createStyles from @aurora-ds/theme
+ */
+const AVATAR_STYLES = theme.createStyles((theme) => {
+    const AVATAR_SIZES = getAvatarSizes(theme);
+    return {
+        root: ({ hasImage = false, clickable = false, size = 'medium', color, borderColor, backgroundColor }) => {
+            const sizeConfig = AVATAR_SIZES[size];
+            return {
+                width: sizeConfig.size,
+                height: sizeConfig.size,
+                borderRadius: theme.radius.full,
+                backgroundColor: backgroundColor || (hasImage ? 'transparent' : theme.colors.surfaceHover),
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: clickable ? 'pointer' : 'default',
+                border: hasImage && !borderColor ? 'none' : `1px solid ${borderColor || theme.colors.border}`,
+                overflow: 'hidden',
+                flexShrink: 0,
+                color: color || theme.colors.textSecondary,
+                fontWeight: theme.fontWeight.medium,
+            };
+        },
+        image: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+        },
+    };
+});
+
+/**
+ * Avatar component
+ *
+ * Displays a user's avatar with optional image or fallback text.
+ */
+const Avatar = ({ image, label, onClick, size = 'medium', color, borderColor, backgroundColor, }) => {
+    // hooks
+    const theme$1 = theme.useTheme();
+    // variables
+    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 || '?' })) }));
+};
+Avatar.displayName = 'Avatar';
+
+/**
+ * AvatarGroup styles using createStyles from @aurora-ds/theme
+ */
+const AVATAR_GROUP_STYLES = theme.createStyles((theme) => {
+    const AVATAR_SIZES = getAvatarSizes(theme);
+    return {
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+        },
+        child: ({ size = 'medium' }) => ({
+            marginLeft: AVATAR_SIZES[size].overlap,
+        }),
+        firstChild: {
+            marginLeft: '0',
+        },
+        more: ({ size = 'medium' }) => {
+            const sizeConfig = AVATAR_SIZES[size];
+            return {
+                width: sizeConfig.size,
+                height: sizeConfig.size,
+                borderRadius: theme.radius.full,
+                backgroundColor: theme.colors.surfaceHover,
+                border: `1px solid ${theme.colors.border}`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.colors.textSecondary,
+                fontSize: sizeConfig.fontSize,
+                fontWeight: theme.fontWeight.medium,
+                flexShrink: 0,
+                marginLeft: AVATAR_SIZES[size].overlap,
+            };
+        },
+    };
+});
+
+/**
+ * AvatarGroup component
+ *
+ * Groups multiple avatars with overlapping display and optional limit.
+ */
+const AvatarGroup = ({ children, limit, size = 'medium' }) => {
+    // hooks
+    const theme$1 = theme.useTheme();
+    // variables
+    const AVATAR_SIZES = getAvatarSizes(theme$1);
+    const childArray = React.Children.toArray(children);
+    const displayedChildren = limit ? childArray.slice(0, limit) : childArray;
+    const moreCount = limit && childArray.length > limit ? childArray.length - limit : 0;
+    return (jsxRuntime.jsxs("div", { className: AVATAR_GROUP_STYLES.root, children: [displayedChildren.map((child, index) => (jsxRuntime.jsx("div", { className: index === 0 ? AVATAR_GROUP_STYLES.firstChild : AVATAR_GROUP_STYLES.child({ size }), children: child }, index))), moreCount > 0 && (jsxRuntime.jsx("div", { className: AVATAR_GROUP_STYLES.more({ size }), children: jsxRuntime.jsxs(Text, { variant: 'label', fontSize: AVATAR_SIZES[size].fontSize, children: ["+", moreCount] }) }))] }));
+};
+AvatarGroup.displayName = 'AvatarGroup';
 
 const getButtonSizeStyles = () => ({
     small: {
@@ -653,14 +766,14 @@ const FORM_STYLES = theme.createStyles(() => ({
  * Form component - A transparent wrapper for form elements with automatic preventDefault handling
  */
 const Form = ({ children, onSubmit, ariaLabel, }) => {
-    const handleSubmit = react.useCallback((e) => {
+    const handleSubmit = React.useCallback((e) => {
         e.preventDefault();
         onSubmit?.(e);
     }, [onSubmit]);
     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_default = React.memo(Form);
 
 /**
  * Input styles using createStyles from @aurora-ds/theme
@@ -800,8 +913,8 @@ const MoreHorizontalIcon = () => {
 /**
  * Input component
  */
-const Input = react.forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, type = 'text', ariaLabel, startIcon, endIcon, width, }, ref) => {
-    const [showPassword, setShowPassword] = react.useState(false);
+const Input = React.forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, type = 'text', ariaLabel, startIcon, endIcon, width, }, ref) => {
+    const [showPassword, setShowPassword] = React.useState(false);
     const handleChange = (event) => {
         onChange(event.target.value);
     };
@@ -810,7 +923,7 @@ const Input = react.forwardRef(({ value, onChange, label, mandatory = false, pla
     return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsxs("div", { className: `${INPUT_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: [jsxRuntime.jsx("input", { ref: ref, type: inputType, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, className: INPUT_STYLES.root({ disabled, hasStartIcon: !!startIcon, hasEndIcon: !!endIcon, hasPasswordToggle }), "aria-label": ariaLabel || label }), startIcon && (jsxRuntime.jsx("div", { className: INPUT_STYLES.startIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: startIcon }) })), endIcon && (jsxRuntime.jsx("div", { className: hasPasswordToggle ? INPUT_STYLES.endIconShifted : INPUT_STYLES.endIcon, children: jsxRuntime.jsx(Icon, { color: 'textTertiary', children: endIcon }) })), hasPasswordToggle && (jsxRuntime.jsx("div", { className: INPUT_STYLES.passwordToggle, children: jsxRuntime.jsx(IconButton, { icon: showPassword ? jsxRuntime.jsx(EyeOffIcon, {}) : jsxRuntime.jsx(EyeIcon, {}), onClick: () => setShowPassword(!showPassword), disabled: disabled, ariaLabel: ariaLabel || label, variant: 'text', size: 'small', textColor: 'textSecondary' }) }))] })] }));
 });
 Input.displayName = 'Input';
-var Input_default = react.memo(Input);
+var Input_default = React.memo(Input);
 
 /**
  * TextArea styles using createStyles from @aurora-ds/theme
@@ -860,10 +973,10 @@ const TEXTAREA_STYLES = theme.createStyles((theme) => ({
 /**
  * TextArea component with auto-expanding height based on content
  */
-const TextArea = react.forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, ariaLabel, width, minRows = 3, maxRows, }, ref) => {
-    const internalRef = react.useRef(null);
+const TextArea = React.forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, ariaLabel, width, minRows = 3, maxRows, }, ref) => {
+    const internalRef = React.useRef(null);
     const textareaRef = ref || internalRef;
-    const adjustHeight = react.useCallback(() => {
+    const adjustHeight = React.useCallback(() => {
         const textarea = textareaRef.current;
         if (textarea) {
             // Reset height to calculate the correct scrollHeight
@@ -879,7 +992,7 @@ const TextArea = react.forwardRef(({ value, onChange, label, mandatory = false,
             textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
         }
     }, [minRows, maxRows, textareaRef]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         adjustHeight();
     }, [value, adjustHeight]);
     const handleChange = (event) => {
@@ -888,7 +1001,7 @@ const TextArea = react.forwardRef(({ value, onChange, label, mandatory = false,
     return (jsxRuntime.jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxRuntime.jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsxRuntime.jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxRuntime.jsx("div", { className: `${TEXTAREA_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: jsxRuntime.jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, className: TEXTAREA_STYLES.root({ disabled }), "aria-label": ariaLabel || label, rows: minRows }) })] }));
 });
 TextArea.displayName = 'TextArea';
-var TextArea_default = react.memo(TextArea);
+var TextArea_default = React.memo(TextArea);
 
 /**
  * Card styles using createStyles from @aurora-ds/theme
@@ -1009,6 +1122,34 @@ const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, widt
 };
 Grid.displayName = 'Grid';
 
+/**
+ * Separator styles using createStyles from @aurora-ds/theme
+ */
+const SEPARATOR_STYLES = theme.createStyles((theme) => ({
+    root: ({ direction = 'horizontal', color = 'border', width, height }) => ({
+        backgroundColor: theme.colors[color],
+        ...(direction === 'horizontal' ? {
+            width: '100%',
+            height: '1px',
+        } : {
+            width: '1px',
+            height: '100%',
+        }),
+        ...(width !== undefined && { width }),
+        ...(height !== undefined && { height }),
+    }),
+}));
+
+/**
+ * Separator component
+ *
+ * A simple separator line for horizontal or vertical division.
+ */
+const Separator = ({ direction = 'horizontal', width, height, color = 'border', }) => {
+    return (jsxRuntime.jsx("div", { className: SEPARATOR_STYLES.root({ direction, color, width, height }) }));
+};
+Separator.displayName = 'Separator';
+
 const PAGE_SECTION_STYLES = theme.createStyles((theme) => ({
     root: ({ gap, paddingHorizontal, paddingVertical, alignItems = 'center', maxWidth, minHeight }) => ({
         display: 'flex',
@@ -1106,7 +1247,7 @@ const ACCORDION_STYLES = theme.createStyles((theme) => {
  * Supports controlled and uncontrolled modes.
  */
 const Accordion = ({ title, children, expanded, defaultExpanded = false, onChange, disabled = false, icon, backgroundColor, width, headerPadding, contentPadding, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
-    const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded);
+    const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
     // Use controlled value if provided, otherwise use internal state
     const isExpanded = expanded !== undefined ? expanded : internalExpanded;
     const handleToggle = () => {
@@ -1123,6 +1264,141 @@ const Accordion = ({ title, children, expanded, defaultExpanded = false, onChang
 };
 Accordion.displayName = 'Accordion';
 
+const MENU_STYLES = theme.createStyles((theme) => ({
+    root: (isFadingIn, anchorOrigin, position) => ({
+        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,
+        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' }) => {
+    // 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), children: children }));
+};
+Menu.displayName = 'Menu';
+
 /**
  * DrawerItem styles using createStyles from @aurora-ds/theme
  */
@@ -1226,8 +1502,8 @@ const insertSeparators = (items, SeparatorComponent) => {
     const result = [];
     items.forEach((item, index) => {
         // Add the item with a key
-        const itemWithKey = react.isValidElement(item)
-            ? react.cloneElement(item, { key: `item-${index}` })
+        const itemWithKey = React.isValidElement(item)
+            ? React.cloneElement(item, { key: `item-${index}` })
             : item;
         result.push(itemWithKey);
         // Add separator after each item except the last one
@@ -1253,8 +1529,8 @@ const buildBreadcrumbChildren = (items, maxItems, EllipsisComponent, SeparatorCo
     // Build the result: first + separator + ellipsis + separator + last items with separators between them
     const result = [];
     // Add first item with key
-    const firstWithKey = react.isValidElement(firstItem)
-        ? react.cloneElement(firstItem, { key: 'first' })
+    const firstWithKey = React.isValidElement(firstItem)
+        ? React.cloneElement(firstItem, { key: 'first' })
         : firstItem;
     result.push(firstWithKey);
     // Add separator + ellipsis + separator
@@ -1263,8 +1539,8 @@ const buildBreadcrumbChildren = (items, maxItems, EllipsisComponent, SeparatorCo
     result.push(jsxRuntime.jsx(SeparatorComponent, {}, 'sep-ellipsis-after'));
     // Add last items with separators between them
     lastItems.forEach((item, index) => {
-        const itemWithKey = react.isValidElement(item)
-            ? react.cloneElement(item, { key: `last-${index}` })
+        const itemWithKey = React.isValidElement(item)
+            ? React.cloneElement(item, { key: `last-${index}` })
             : item;
         result.push(itemWithKey);
         // Add separator between items (but not after the last one)
@@ -1280,8 +1556,8 @@ const buildBreadcrumbChildren = (items, maxItems, EllipsisComponent, SeparatorCo
  */
 const flattenChildren = (children) => {
     const result = [];
-    react.Children.forEach(children, (child) => {
-        if (react.isValidElement(child) && child.type === react.Fragment) {
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.type === React.Fragment) {
             result.push(...flattenChildren(child.props.children));
         }
         else {
@@ -1295,7 +1571,7 @@ const flattenChildren = (children) => {
  * Checks if a React element is a BreadcrumbSeparator
  */
 const isSeparator = (child) => {
-    return react.isValidElement(child) && child.type?.displayName === 'BreadcrumbSeparator';
+    return React.isValidElement(child) && child.type?.displayName === 'BreadcrumbSeparator';
 };
 
 /**
@@ -1307,11 +1583,11 @@ const isSeparator = (child) => {
  * @param children
  * @param props
  */
-const Breadcrumb = react.memo(({ maxItems, children, ...props }) => {
+const Breadcrumb = React.memo(({ maxItems, children, ...props }) => {
     const allChildren = flattenChildren(children);
     // Filter out any manually added separators (in case user added them)
     const items = allChildren.filter(child => !isSeparator(child));
-    const renderedChildren = react.useMemo(() => buildBreadcrumbChildren(items, maxItems, BreadcrumbEllipsis, BreadcrumbSeparator), [items, maxItems]);
+    const renderedChildren = React.useMemo(() => buildBreadcrumbChildren(items, maxItems, BreadcrumbEllipsis, BreadcrumbSeparator), [items, maxItems]);
     return (jsxRuntime.jsx("nav", { "aria-label": 'breadcrumb', ...props, children: jsxRuntime.jsx("ol", { className: BREADCRUMB_STYLES.list, children: renderedChildren }) }));
 });
 Breadcrumb.displayName = 'Breadcrumb';
@@ -1343,7 +1619,7 @@ const BREADCRUMB_LINK_STYLES = theme.createStyles((theme) => ({
  * BreadcrumbLink component
  * Renders a clickable breadcrumb item with a link
  */
-const BreadcrumbLink = react.memo((props) => {
+const BreadcrumbLink = React.memo((props) => {
     const { children, onClick } = props;
     return (jsxRuntime.jsx("li", { className: BREADCRUMB_LINK_STYLES.item, children: jsxRuntime.jsx("a", { className: BREADCRUMB_LINK_STYLES.link, onClick: onClick, children: jsxRuntime.jsx(Text, { variant: 'span', fontSize: 'sm', children: children }) }) }));
 });
@@ -1368,10 +1644,75 @@ const BREADCRUMB_PAGE_STYLES = theme.createStyles((theme) => ({
  * BreadcrumbPage component
  * Renders the current page (non-clickable) in the breadcrumb
  */
-const BreadcrumbPage = react.memo(({ children }) => (jsxRuntime.jsx("li", { className: BREADCRUMB_PAGE_STYLES.item, children: jsxRuntime.jsx("span", { className: BREADCRUMB_PAGE_STYLES.page, children: jsxRuntime.jsx(Text, { variant: 'span', fontSize: 'sm', color: 'primary', children: children }) }) })));
+const BreadcrumbPage = React.memo(({ children }) => (jsxRuntime.jsx("li", { className: BREADCRUMB_PAGE_STYLES.item, children: jsxRuntime.jsx("span", { className: BREADCRUMB_PAGE_STYLES.page, children: jsxRuntime.jsx(Text, { variant: 'span', fontSize: 'sm', color: 'primary', children: children }) }) })));
 BreadcrumbPage.displayName = 'BreadcrumbPage';
 
+/**
+ * Tabs styles using createStyles from @aurora-ds/theme
+ */
+const TABS_STYLES = theme.createStyles((theme) => ({
+    root: ({ width = '100%' }) => ({
+        display: 'flex',
+        width,
+        backgroundColor: theme.colors.surfaceHover,
+        borderRadius: theme.radius.md,
+        overflow: 'hidden',
+        padding: theme.spacing.xs,
+        height: `calc(2 * ${theme.spacing.xs} + ${BUTTON_SIZE}px)`,
+    }),
+}));
+
+/**
+ * Tabs component for navigation between multiple sections
+ */
+const Tabs = ({ children, activeTab, width = '100%', }) => {
+    return (jsxRuntime.jsx("div", { className: TABS_STYLES.root({ width }), children: React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child)) {
+                const tabValue = child.props.value;
+                const isActive = activeTab === tabValue || (activeTab === undefined && index === 0);
+                return React.cloneElement(child, {
+                    isActive,
+                });
+            }
+            return child;
+        }) }));
+};
+Tabs.displayName = 'Tabs';
+
+/**
+ * Tabs styles using createStyles from @aurora-ds/theme
+ */
+const TAB_ITEM_STYLES = theme.createStyles((theme) => ({
+    tab: (isActive) => ({
+        flex: 1,
+        padding: theme.spacing.sm,
+        height: BUTTON_SIZE,
+        borderRadius: theme.radius.sm,
+        cursor: 'pointer',
+        transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}, boxShadow ${theme.transition.fast}`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: isActive ? theme.colors.background : 'transparent',
+        color: isActive ? theme.colors.text : theme.colors.textSecondary,
+        boxShadow: isActive ? theme.shadows.sm : undefined,
+        ':hover': {
+            backgroundColor: !isActive ? theme.colors.secondaryActive : undefined,
+        },
+    }),
+}));
+
+/**
+ * TabItem component for use inside Tabs
+ */
+const TabItem = ({ label, isActive = false, onClick, }) => {
+    return (jsxRuntime.jsx("div", { className: TAB_ITEM_STYLES.tab(isActive), onClick: onClick, children: jsxRuntime.jsx(Text, { variant: 'label', preserveWhitespace: true, maxLines: 1, children: label }) }));
+};
+TabItem.displayName = 'TabItem';
+
 exports.Accordion = Accordion;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbLink = BreadcrumbLink;
@@ -1386,9 +1727,16 @@ exports.Grid = Grid;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input_default;
+exports.Menu = Menu;
 exports.Page = Page;
 exports.PageSection = PageSection;
+exports.Separator = Separator;
 exports.Stack = Stack;
+exports.TabItem = TabItem;
+exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea_default;
+exports.useAnchorPosition = useAnchorPosition;
+exports.useClickOutside = useClickOutside;
+exports.useTransitionRender = useTransitionRender;
 //# sourceMappingURL=index.js.map