@aurora-ds/components 1.2.0 → 1.4.0

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { keyframes, createStyles, useTheme, cx, createVariants, createTheme } from '@aurora-ds/theme';
 import * as React from 'react';
-import { createElement, Fragment, useRef, useState, useCallback, useEffect, useId, isValidElement, cloneElement, useLayoutEffect, useMemo, createContext, useContext } from 'react';
+import { createElement, Fragment, useRef, useState, useCallback, useEffect, useId, isValidElement, cloneElement, useLayoutEffect, useMemo, createContext, useContext, Children } from 'react';
 import { createPortal } from 'react-dom';
 
 function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
@@ -641,36 +641,42 @@ const IconButton = ({ ref, icon: IconComponent, ariaLabel, variant = 'contained'
 IconButton.displayName = 'IconButton';
 
 const LINK_STYLES = createStyles((theme) => ({
-    root: ({ underline = 'hover' }) => ({
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '0.25em',
-        color: theme.colors.linkMain,
-        fontFamily: 'inherit',
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        fontWeight: 'inherit',
-        textDecoration: underline === 'always' ? 'underline' : 'none',
-        cursor: 'pointer',
-        borderRadius: theme.radius.xs,
-        transition: `color ${theme.transition.fast}`,
-        ':hover:not([aria-disabled="true"])': {
-            color: theme.colors.linkHover,
-            textDecoration: underline !== 'none' ? 'underline' : 'none',
-        },
-        ':active:not([aria-disabled="true"])': {
-            color: theme.colors.linkActive,
-        },
-        ':focus-visible': {
-            outline: `2px solid ${theme.colors.linkMain}`,
-            outlineOffset: '2px',
-        },
-        '&[aria-disabled="true"]': {
-            color: theme.colors.linkDisabled,
-            cursor: 'not-allowed',
-            textDecoration: 'none',
-        },
-    }),
+    root: ({ underline = 'hover', color = 'default' }) => {
+        const mainColor = color === 'secondary' ? theme.colors.textSecondary : theme.colors.linkMain;
+        const hoverColor = color === 'secondary' ? theme.colors.textTertiary : theme.colors.linkHover;
+        const activeColor = color === 'secondary' ? theme.colors.textPrimary : theme.colors.linkActive;
+        const disabledColor = color === 'secondary' ? theme.colors.textDisabled : theme.colors.linkDisabled;
+        return {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.25em',
+            color: mainColor,
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            lineHeight: 'inherit',
+            fontWeight: 'inherit',
+            textDecoration: underline === 'always' ? 'underline' : 'none',
+            cursor: 'pointer',
+            borderRadius: theme.radius.xs,
+            transition: `color ${theme.transition.fast}`,
+            ':hover:not([aria-disabled="true"])': {
+                color: hoverColor,
+                textDecoration: underline !== 'none' ? 'underline' : 'none',
+            },
+            ':active:not([aria-disabled="true"])': {
+                color: activeColor,
+            },
+            ':focus-visible': {
+                outline: `2px solid ${mainColor}`,
+                outlineOffset: '2px',
+            },
+            '&[aria-disabled="true"]': {
+                color: disabledColor,
+                cursor: 'not-allowed',
+                textDecoration: 'none',
+            },
+        };
+    },
     icon: {
         display: 'inline-flex',
         alignItems: 'center',
@@ -693,7 +699,7 @@ const LINK_STYLES = createStyles((theme) => ({
  * @example <Link href='/terms' underline='none'>Terms</Link>
  * @example <Link onClick={() => navigate('/about')}>About (SPA)</Link>
  */
-const Link = ({ ref, underline = 'hover', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, children, className, href, onClick, onKeyDown, ...rest }) => {
+const Link = ({ ref, underline = 'hover', color = 'default', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, children, className, href, onClick, onKeyDown, ...rest }) => {
     // An <a> without href has no implicit ARIA role and is not focusable.
     // When used for SPA navigation (onClick only), we restore both behaviours.
     const hasHref = !!href;
@@ -714,7 +720,7 @@ const Link = ({ ref, underline = 'hover', external = false, disabled = false, st
         }
         onKeyDown?.(e);
     };
-    return (jsxs("a", { ref: ref, href: href, className: cx(LINK_STYLES.root({ underline }), className), "aria-disabled": disabled || undefined, 
+    return (jsxs("a", { ref: ref, href: href, className: cx(LINK_STYLES.root({ underline, color }), className), "aria-disabled": disabled || undefined, 
         // Without href: must be explicitly put in the tab order.
         // With href: the browser handles focusability natively (no tabIndex needed).
         tabIndex: disabled ? -1 : (!hasHref ? 0 : undefined), 
@@ -2553,6 +2559,78 @@ const Grid = ({ display = 'grid', columns, rows, autoFlow, autoColumns, autoRows
 };
 Grid.displayName = 'Grid';
 
+const BREADCRUMB_STYLES = createStyles((_theme) => ({
+    nav: {
+        display: 'block',
+    },
+    list: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+    },
+}), { id: 'breadcrumb' });
+
+const BreadcrumbContext = createContext({
+    separator: '/',
+});
+const useBreadcrumbContext = () => useContext(BreadcrumbContext);
+
+const BREADCRUMB_ITEM_STYLES = createStyles((theme) => ({
+    item: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        fontSize: theme.fontSize.sm,
+        lineHeight: theme.lineHeight.normal,
+    },
+    separator: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        marginLeft: theme.spacing.sm,
+        marginRight: theme.spacing.sm,
+        color: theme.colors.textTertiary,
+        userSelect: 'none',
+    },
+}), { id: 'breadcrumb-item' });
+
+const BreadcrumbItem = ({ label, href, onClick, current = false, isFirst = false, }) => {
+    const { separator } = useBreadcrumbContext();
+    return (jsxs("li", { className: BREADCRUMB_ITEM_STYLES.item, "aria-current": current ? 'page' : undefined, children: [!isFirst && (jsx("span", { "aria-hidden": true, className: BREADCRUMB_ITEM_STYLES.separator, children: separator })), current ? (jsx(Text, { variant: 'span', fontWeight: 'semibold', color: 'textPrimary', children: label })) : (jsx(Link, { href: href, onClick: onClick, color: 'secondary', underline: 'hover', children: label }))] }));
+};
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
+
+/**
+ * WAI-ARIA compliant breadcrumb navigation using a compound component API.
+ *
+ * ```tsx
+ * <Breadcrumb separator='/'>
+ *     <Breadcrumb.Item label='Home' href='/' />
+ *     <Breadcrumb.Item label='Products' href='/products' />
+ *     <Breadcrumb.Item label='Laptop Pro X' current />
+ * </Breadcrumb>
+ * ```
+ *
+ * The last item is typically marked as `current` — it renders as bold text (non-clickable)
+ * and exposes `aria-current="page"` for assistive technologies.
+ */
+const BreadcrumbBase = ({ children, separator = '/', ariaLabel = 'Breadcrumb', }) => {
+    const contextValue = useMemo(() => ({ separator }), [separator]);
+    const items = Children.map(children, (child, index) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+        return cloneElement(child, {
+            isFirst: index === 0,
+        });
+    });
+    return (jsx(BreadcrumbContext.Provider, { value: contextValue, children: jsx("nav", { "aria-label": ariaLabel, className: BREADCRUMB_STYLES.nav, children: jsx("ol", { className: BREADCRUMB_STYLES.list, children: items }) }) }));
+};
+BreadcrumbBase.displayName = 'Breadcrumb';
+const Breadcrumb = BreadcrumbBase;
+Breadcrumb.Item = BreadcrumbItem;
+
 const DrawerContext = createContext({
     isExpanded: true,
 });
@@ -2908,6 +2986,234 @@ Drawer.Body = DrawerBody;
 Drawer.Footer = DrawerFooter;
 Drawer.Item = DrawerItem;
 
+const TABS_LIST_STYLES = createStyles(() => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        width: 'fit-content',
+        '::-webkit-scrollbar': { display: 'none' },
+    },
+}));
+
+const TabsContext = createContext(null);
+
+/**
+ * Internal hook — consumes the Tabs context and throws if used outside a `<Tabs>` provider.
+ * @internal
+ */
+const useTabsContext = () => {
+    const ctx = useContext(TabsContext);
+    if (!ctx) {
+        throw new Error('This component must be used inside a <Tabs> provider.');
+    }
+    return ctx;
+};
+
+const TabsList = ({ children, ariaLabel, ariaLabelledBy }) => {
+    const { value, setValue, baseId, getTabValues } = useTabsContext();
+    /**
+     * Returns true if the tab at the given index is aria-disabled.
+     * We check the DOM attribute because disabled state lives in TabItem,
+     * not in the shared context, and we want to avoid adding it to the context.
+     */
+    const isTabDisabled = (tabValue) => {
+        const el = document.getElementById(`${baseId}-tab-${tabValue}`);
+        return el?.getAttribute('aria-disabled') === 'true';
+    };
+    /**
+     * Moves focus to the nearest non-disabled tab starting from `startIndex`
+     * and stepping in the given `direction` (+1 = right, -1 = left).
+     * Stops after a full loop if all tabs are disabled.
+     */
+    const focusNextEnabled = (startIndex, direction) => {
+        const values = getTabValues();
+        for (let i = 1; i <= values.length; i++) {
+            const index = (startIndex + direction * i + values.length) % values.length;
+            const nextValue = values[index];
+            if (!isTabDisabled(nextValue)) {
+                document.getElementById(`${baseId}-tab-${nextValue}`)?.focus();
+                setValue(nextValue);
+                return;
+            }
+        }
+    };
+    const handleKeyDown = (event) => {
+        const values = getTabValues();
+        const currentIndex = values.indexOf(value);
+        if (currentIndex === -1) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                focusNextEnabled(currentIndex, 1);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                focusNextEnabled(currentIndex, -1);
+                break;
+            case 'Home': {
+                event.preventDefault();
+                // Focus the first non-disabled tab
+                const firstIdx = values.findIndex((v) => !isTabDisabled(v));
+                if (firstIdx !== -1) {
+                    document.getElementById(`${baseId}-tab-${values[firstIdx]}`)?.focus();
+                    setValue(values[firstIdx]);
+                }
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                // Focus the last non-disabled tab
+                const lastIdx = [...values].reverse().findIndex((v) => !isTabDisabled(v));
+                if (lastIdx !== -1) {
+                    const realIndex = values.length - 1 - lastIdx;
+                    document.getElementById(`${baseId}-tab-${values[realIndex]}`)?.focus();
+                    setValue(values[realIndex]);
+                }
+                break;
+            }
+        }
+    };
+    return (jsx("div", { role: 'tablist', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: TABS_LIST_STYLES.root, onKeyDown: handleKeyDown, children: children }));
+};
+TabsList.displayName = 'Tabs.List';
+
+const TABS_PANEL_STYLES = createStyles(() => ({
+    root: {
+        width: '100%',
+    },
+}));
+
+const TabsPanel = ({ value, children, keepMounted = false }) => {
+    const { value: activeValue, baseId } = useTabsContext();
+    const isActive = activeValue === value;
+    if (!isActive && !keepMounted) {
+        return null;
+    }
+    return (jsx("div", { role: 'tabpanel', id: `${baseId}-panel-${value}`, "aria-labelledby": `${baseId}-tab-${value}`, 
+        // WAI-ARIA APG: tabIndex={0} allows keyboard scrolling when the panel has no focusable child.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0, hidden: !isActive, className: TABS_PANEL_STYLES.root, children: children }));
+};
+TabsPanel.displayName = 'Tabs.Panel';
+
+const TAB_ITEM_STYLES = createStyles((theme) => ({
+    root: ({ isActive, disabled }) => ({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+        paddingTop: theme.spacing.xs,
+        paddingBottom: theme.spacing.xs,
+        paddingLeft: theme.spacing.md,
+        paddingRight: theme.spacing.md,
+        border: 'none',
+        borderBottom: `2px solid ${isActive ? theme.colors.primaryMain : 'transparent'}`,
+        background: 'transparent',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        fontFamily: 'inherit',
+        whiteSpace: 'nowrap',
+        transition: `border-color ${theme.transition.fast}`,
+        ...(disabled ? {} : {
+            ':hover': {
+                borderBottomColor: isActive ? theme.colors.primaryMain : theme.colors.textTertiary,
+            },
+        }),
+        ':focus-visible': {
+            outline: `2px solid ${theme.colors.primaryMain}`,
+            outlineOffset: '2px',
+        },
+    }),
+}));
+
+/**
+ * Handles tab registration, active state derivation and interaction props
+ * for a single `Tabs.Tab` (TabItem) button.
+ *
+ * Registers the tab value into the shared ordered registry on mount so that
+ * `TabsList` can perform correct ArrowLeft/Right/Home/End keyboard navigation.
+ */
+const useTabItem = ({ value, disabled }) => {
+    const { value: activeValue, setValue, baseId, registerTab } = useTabsContext();
+    // Maintains the ordered tab registry used by TabsList for keyboard navigation.
+    useEffect(() => registerTab(value), [registerTab, value]);
+    const isActive = activeValue === value;
+    return {
+        isActive,
+        buttonProps: {
+            id: `${baseId}-tab-${value}`,
+            'aria-selected': isActive,
+            'aria-controls': `${baseId}-panel-${value}`,
+            'aria-disabled': disabled || undefined,
+            tabIndex: isActive ? 0 : -1,
+            onClick: () => {
+                if (!disabled) {
+                    setValue(value);
+                }
+            },
+        },
+    };
+};
+
+const TabItem = ({ value, label, disabled = false }) => {
+    const { isActive, buttonProps } = useTabItem({ value, disabled });
+    return (jsx("button", { type: 'button', role: 'tab', className: TAB_ITEM_STYLES.root({ isActive, disabled }), ...buttonProps, children: jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: isActive ? 'semibold' : 'medium', color: disabled ? 'textDisabled' : isActive ? 'textPrimary' : 'textSecondary', children: label }) }));
+};
+TabItem.displayName = 'Tabs.Tab';
+
+/**
+ * WAI-ARIA compliant tab interface using a compound component API.
+ *
+ * ```tsx
+ * <Tabs defaultValue={'active'} onChange={handleChange}>
+ *     <Tabs.List ariaLabel={'Subscriptions'}>
+ *         <Tabs.Tab value={'active'} label={'Active'} />
+ *         <Tabs.Tab value={'cancelled'} label={'Cancelled'} />
+ *     </Tabs.List>
+ *     <Tabs.Panel value={'active'}>...</Tabs.Panel>
+ *     <Tabs.Panel value={'cancelled'}>...</Tabs.Panel>
+ * </Tabs>
+ * ```
+ *
+ * Supports controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) modes.
+ * Keyboard navigation: `ArrowLeft/Right`, `Home`, `End`.
+ * Only the active panel is mounted — use `keepMounted` on `Tabs.Panel` to preserve state across switches.
+ */
+const TabsBase = ({ children, value: controlledValue, defaultValue, onChange, id, }) => {
+    const reactId = useId();
+    const baseId = id ?? `tabs-${reactId}`;
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const tabsRef = useRef([]);
+    const registerTab = useCallback((tabValue) => {
+        if (!tabsRef.current.includes(tabValue)) {
+            tabsRef.current.push(tabValue);
+        }
+        return () => {
+            tabsRef.current = tabsRef.current.filter((v) => v !== tabValue);
+        };
+    }, []);
+    const getTabValues = useCallback(() => tabsRef.current, []);
+    const setValue = useCallback((next) => {
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    const contextValue = useMemo(() => ({ value, setValue, baseId, registerTab, getTabValues }), [value, setValue, baseId, registerTab, getTabValues]);
+    return (jsx(TabsContext.Provider, { value: contextValue, children: children }));
+};
+TabsBase.displayName = 'Tabs';
+const Tabs = TabsBase;
+Tabs.List = TabsList;
+Tabs.Tab = TabItem;
+Tabs.Panel = TabsPanel;
+
 const AlertContext = createContext({
     variant: 'default',
     accentColor: 'defaultActive',
@@ -3576,5 +3882,5 @@ const darkTheme = createTheme({
     breakpoints: themeBreakpoints,
 });
 
-export { Alert, Backdrop, Badge, Box, Button, Card, Checkbox, Dialog, Drawer, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Text, TextField, Tooltip, darkTheme, lightTheme, useDrawerContext };
+export { Alert, Backdrop, Badge, Box, Breadcrumb, Button, Card, Checkbox, Dialog, Drawer, Form, Grid, Icon, IconButton, InfoBubble, Link, Menu, Select, Skeleton, Stack, Switch, Tabs, Text, TextField, Tooltip, darkTheme, lightTheme, useDrawerContext };
 //# sourceMappingURL=index.js.map