@aurora-ds/components 1.5.0 → 1.7.0

package/dist/cjs/index.js

@@ -379,8 +379,8 @@ const buildActionButtonRootStyle = (theme, variant, color, focusOptions) => {
             backgroundColor: intent.main,
             borderColor: intent.main,
             color: intent.on,
-            ':hover:not(:disabled)': { backgroundColor: intent.hover, borderColor: intent.hover },
-            ':active:not(:disabled)': { backgroundColor: intent.active, borderColor: intent.active },
+            ':hover:not(:disabled)': { backgroundColor: intent.hover },
+            ':active:not(:disabled)': { backgroundColor: intent.active },
         }
         : variant === 'outlined'
             ? {
@@ -388,7 +388,7 @@ const buildActionButtonRootStyle = (theme, variant, color, focusOptions) => {
                 borderColor: intent.border,
                 color: intent.fg,
                 ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
-                ':active:not(:disabled)': { backgroundColor: intent.subtleActive, borderColor: intent.active, color: intent.active },
+                ':active:not(:disabled)': { backgroundColor: intent.subtleActive, color: intent.active },
             }
             : {
                 backgroundColor: 'transparent',
@@ -410,7 +410,7 @@ const buildActionButtonRootStyle = (theme, variant, color, focusOptions) => {
         height: DEFAULT_BUTTON_HEIGHT,
         cursor: 'pointer',
         outline: 'none',
-        transition: `background-color ${theme.transition.normal}, border-color ${theme.transition.normal}, color ${theme.transition.normal}`,
+        transition: `background-color ${theme.transition.normal}, color ${theme.transition.normal}`,
         ...colorVariantStyles,
         ':focus-visible': getFocusRingStyles(theme, focusOptions),
         ':disabled': { cursor: 'not-allowed', opacity: theme.opacity.high },
@@ -972,13 +972,13 @@ const LINK_STYLES = theme.createStyles((theme) => ({
  * In that case the component stays accessible: it gets `role="link"`,
  * `tabIndex={0}` and keyboard Enter support automatically.
  *
- * @example <Link href='/about'>About</Link>
- * @example <Link href='https://example.com' external>External site</Link>
- * @example <Link href='/profile' underline='always' startIcon={UserIcon}>Profile</Link>
- * @example <Link href='/terms' underline='none'>Terms</Link>
- * @example <Link onClick={() => navigate('/about')}>About (SPA)</Link>
+ * @example <Link href='/about' label='About' />
+ * @example <Link href='https://example.com' label='External site' external />
+ * @example <Link href='/profile' underline='always' startIcon={UserIcon} label='Profile' />
+ * @example <Link href='/terms' underline='none' label='Terms' />
+ * @example <Link onClick={() => navigate('/about')} label='About (SPA)' />
  */
-const Link = ({ ref, underline = 'hover', color = 'default', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, children, className, href, onClick, onKeyDown, ...rest }) => {
+const Link = ({ ref, label, fontSize = 'md', underline = 'hover', color = 'default', external = false, disabled = false, startIcon: StartIcon, endIcon: EndIcon, 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;
@@ -1004,7 +1004,7 @@ const Link = ({ ref, underline = 'hover', color = 'default', external = false, d
         // With href: the browser handles focusability natively (no tabIndex needed).
         tabIndex: disabled ? -1 : (!hasHref ? 0 : undefined), 
         // Without href: <a> has no implicit ARIA role — add role="link" explicitly.
-        role: !hasHref ? 'link' : undefined, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [StartIcon && (jsxRuntime.jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsxRuntime.jsx(StartIcon, { width: '1em', height: '1em' }) })), children, EndIcon && (jsxRuntime.jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsxRuntime.jsx(EndIcon, { width: '1em', height: '1em' }) }))] }));
+        role: !hasHref ? 'link' : undefined, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: [StartIcon && (jsxRuntime.jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsxRuntime.jsx(StartIcon, { width: '1em', height: '1em' }) })), jsxRuntime.jsx(Text, { as: 'span', fontSize: fontSize, children: label }), EndIcon && (jsxRuntime.jsx("span", { className: LINK_STYLES.icon, "aria-hidden": true, children: jsxRuntime.jsx(EndIcon, { width: '1em', height: '1em' }) }))] }));
 };
 Link.displayName = 'Link';
 
@@ -3298,17 +3298,17 @@ const TEXTFIELD_WRAPPER_VARIANTS = theme.createVariants((theme) => {
     return {
         base: {
             display: 'flex',
-            alignItems: 'center',
-            gap: theme.spacing.sm,
+            // `stretch` lets the inner input fill the full height of the box so
+            // clicking anywhere (including the vertical padding area) hits it.
+            alignItems: 'stretch',
             boxSizing: 'border-box',
             borderWidth: '1px',
             borderStyle: 'solid',
             borderRadius: theme.radius.md,
             backgroundColor: c.surfacePaper,
+            // No focus ring on text inputs: focus is conveyed by the status
+            // border colour change (see the `status` variants below).
             transition: `border-color ${theme.transition.fast}`,
-            // Full, always-visible focus ring when the inner input is focused
-            // (single source of truth) — complements the status border colour.
-            ':focus-within': getFocusRingStyles(theme),
             '&[data-disabled]': {
                 opacity: theme.opacity.high,
                 backgroundColor: c.disabledMain,
@@ -3317,10 +3317,12 @@ const TEXTFIELD_WRAPPER_VARIANTS = theme.createVariants((theme) => {
         },
         variants: {
             size: {
+                // Horizontal padding lives on the input itself (see TEXTFIELD_INPUT_VARIANTS),
+                // not here, so the whole bordered area is part of the clickable input.
                 // Font-size is set on the wrapper so the native input inherits it via `fontSize: 'inherit'`.
-                sm: { height: '2rem', paddingLeft: theme.spacing.sm, paddingRight: theme.spacing.xs, fontSize: theme.fontSize.xs },
-                md: { height: '2.5rem', paddingLeft: theme.spacing.sm, paddingRight: theme.spacing.xs, fontSize: theme.fontSize.sm },
-                lg: { height: '3rem', paddingLeft: theme.spacing.md, paddingRight: theme.spacing.sm, fontSize: theme.fontSize.md },
+                sm: { height: '2rem', fontSize: theme.fontSize.xs },
+                md: { height: '2.5rem', fontSize: theme.fontSize.sm },
+                lg: { height: '3rem', fontSize: theme.fontSize.md },
             },
             status: {
                 default: {
@@ -3345,11 +3347,17 @@ const TEXTFIELD_WRAPPER_VARIANTS = theme.createVariants((theme) => {
         defaultVariants: { size: 'md', status: 'default' },
     };
 }, { id: 'textfield-wrapper' });
-const TEXTFIELD_STYLES = theme.createStyles((theme) => ({
-    /** Visually hidden native input — fills the remaining space inside the wrapper. */
-    input: {
+/**
+ * The native input carries the horizontal padding and fills 100% of the
+ * wrapper height, so the entire bordered box is part of the clickable input
+ * (no dead zone between the text and the border).
+ */
+const TEXTFIELD_INPUT_VARIANTS = theme.createVariants((theme) => ({
+    base: {
         flex: 1,
         minWidth: 0,
+        height: '100%',
+        boxSizing: 'border-box',
         border: 'none',
         outline: 'none',
         background: 'transparent',
@@ -3357,15 +3365,25 @@ const TEXTFIELD_STYLES = theme.createStyles((theme) => ({
         fontFamily: 'inherit',
         fontSize: 'inherit',
         lineHeight: 'normal',
-        padding: '0',
         '&::placeholder': { color: theme.colors.textTertiary },
         '&:disabled': { cursor: 'not-allowed', color: theme.colors.textDisabled },
     },
+    variants: {
+        size: {
+            sm: { paddingLeft: theme.spacing.sm, paddingRight: theme.spacing.sm },
+            md: { paddingLeft: theme.spacing.sm, paddingRight: theme.spacing.sm },
+            lg: { paddingLeft: theme.spacing.md, paddingRight: theme.spacing.md },
+        },
+    },
+    defaultVariants: { size: 'md' },
+}), { id: 'textfield-input' });
+const TEXTFIELD_STYLES = theme.createStyles((theme) => ({
     /** Wrapper for the start icon — aligned with the input baseline. Clickable to focus the input. */
     startIconWrap: {
         display: 'flex',
         alignItems: 'center',
         flexShrink: 0,
+        paddingLeft: theme.spacing.sm,
         cursor: 'pointer',
     },
     /** Wrapper for end actions (custom content + optional password toggle). */
@@ -3373,6 +3391,7 @@ const TEXTFIELD_STYLES = theme.createStyles((theme) => ({
         display: 'flex',
         alignItems: 'center',
         flexShrink: 0,
+        paddingRight: theme.spacing.xs,
         gap: theme.spacing['2xs'],
     },
 }), { id: 'textfield-extra' });
@@ -3433,7 +3452,11 @@ const useTextField = ({ id, ref, type, size, endAction, }) => {
  */
 const TextField = ({ ref, label, helperText, size = 'md', status = 'default', startIcon: StartIcon, endAction, type, id, disabled, required, ...rest }) => {
     const { fieldId, helperId, mergedRef, isPassword, showPassword, togglePassword, resolvedType, iconSize, iconButtonSize, hasEndSection, focusInput, } = useTextField({ id, ref, type, size, endAction });
-    return (jsxRuntime.jsxs(Stack, { flexDirection: 'column', gap: 'xs', children: [label !== undefined && (jsxRuntime.jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsxRuntime.jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxRuntime.jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsxRuntime.jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, "aria-hidden": true, children: jsxRuntime.jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsxRuntime.jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, className: TEXTFIELD_STYLES.input, ...rest }), hasEndSection && (jsxRuntime.jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsxRuntime.jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', onClick: togglePassword }))] }))] }), helperText !== undefined && (jsxRuntime.jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
+    // Associate the label with the input via `aria-labelledby` (and NOT `htmlFor`)
+    // so the label stays accessible without natively focusing the input on click —
+    // only clicking inside the bordered box should focus the field.
+    const labelId = `${fieldId}-label`;
+    return (jsxRuntime.jsxs(Stack, { flexDirection: 'column', gap: 'xs', children: [label !== undefined && (jsxRuntime.jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', id: labelId, children: [label, required && (jsxRuntime.jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxRuntime.jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsxRuntime.jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, "aria-hidden": true, children: jsxRuntime.jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsxRuntime.jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-labelledby": label !== undefined ? labelId : undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, className: TEXTFIELD_INPUT_VARIANTS({ size }), ...rest }), hasEndSection && (jsxRuntime.jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsxRuntime.jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', onClick: togglePassword }))] }))] }), helperText !== undefined && (jsxRuntime.jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
 };
 TextField.displayName = 'TextField';
 
@@ -4026,8 +4049,8 @@ const SELECT_TRIGGER_VARIANTS = theme.createVariants((theme) => {
             transition: `border-color ${theme.transition.fast}`,
             outline: 'none',
             fontFamily: 'inherit',
-            // Full, always-visible focus ring (single source of truth).
-            ':focus-visible': getFocusRingStyles(theme),
+            // No focus ring on the trigger: focus is conveyed by the border
+            // colour change (see the `status` variants below).
             '&[data-open]': {
                 borderColor: c.primaryMain,
             },
@@ -4064,6 +4087,9 @@ const SELECT_TRIGGER_VARIANTS = theme.createVariants((theme) => {
                     ':hover:not([data-disabled]):not([data-open])': {
                         borderColor: c.borderStrong,
                     },
+                    '&:focus-visible:not([data-open])': {
+                        borderColor: c.primaryMain,
+                    },
                 },
                 error: {
                     borderColor: c.errorMain,
@@ -5646,7 +5672,13 @@ const DRAWER_STYLES = theme.createStyles((theme) => ({
  * Keep in sync with themeBreakpoints.
  */
 const BREAKPOINTS = {
-    sm: 640};
+    xs: 480,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
 /** Max-width media query strings (max = breakpoint - 1px). */
 const MEDIA_MAX = {
     sm: `max-width: ${BREAKPOINTS.sm - 1}px`};
@@ -6545,6 +6577,13 @@ const AlertContext = React.createContext({
 });
 const useAlertContext = () => React.useContext(AlertContext);
 
+const VARIANT_DISMISS_COLOR = {
+    default: 'neutral',
+    success: 'success',
+    error: 'error',
+    warning: 'warning',
+    info: 'info',
+};
 const VARIANT_ICONS = {
     success: AlertSuccessIcon,
     error: AlertErrorIcon,
@@ -6557,7 +6596,7 @@ const isSvgComponent = (value) => typeof value === 'function';
  * Alert title row: renders the variant icon alongside the title text.
  * Must be used inside an `<Alert>` component.
  */
-const AlertTitle = ({ children, icon }) => {
+const AlertTitle = ({ children, icon, onDismiss }) => {
     const { variant, accentColor } = useAlertContext();
     // Resolve which icon to render:
     // - custom icon prop always takes precedence over the built-in variant icon
@@ -6567,7 +6606,7 @@ const AlertTitle = ({ children, icon }) => {
     const ResolvedIcon = icon && isSvgComponent(icon) ? icon : (icon === undefined ? (builtInIcon ?? null) : null);
     const customNode = icon && !isSvgComponent(icon) ? icon : null;
     const hasIcon = ResolvedIcon !== null || customNode !== null;
-    return (jsxRuntime.jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsxRuntime.jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsxRuntime.jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsxRuntime.jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
+    return (jsxRuntime.jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', justifyContent: onDismiss ? 'space-between' : undefined, children: [jsxRuntime.jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsxRuntime.jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsxRuntime.jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsxRuntime.jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }), onDismiss && (jsxRuntime.jsx(IconButton, { icon: CloseIcon, ariaLabel: 'Dismiss', variant: 'text', color: VARIANT_DISMISS_COLOR[variant], size: 'sm', onClick: onDismiss }))] }));
 };
 AlertTitle.displayName = 'Alert.Title';
 
@@ -6577,6 +6616,22 @@ AlertTitle.displayName = 'Alert.Title';
 const AlertBody = ({ children }) => (jsxRuntime.jsx(Text, { as: 'p', fontSize: 'sm', color: 'textSecondary', children: children }));
 AlertBody.displayName = 'Alert.Body';
 
+/**
+ * Alert actions row: renders action elements (buttons, links…) at the bottom of an `<Alert>`.
+ * Must be used inside an `<Alert>` component.
+ *
+ * @example
+ * <Alert variant="error">
+ *   <Alert.Title>Something went wrong</Alert.Title>
+ *   <Alert.Body>Please try again.</Alert.Body>
+ *   <Alert.Actions>
+ *     <Button size="sm" variant="outlined" color="error">Retry</Button>
+ *   </Alert.Actions>
+ * </Alert>
+ */
+const AlertActions = ({ children }) => (jsxRuntime.jsx(Stack, { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'end', gap: 'sm', paddingTop: 'xs', children: children }));
+AlertActions.displayName = 'Alert.Actions';
+
 const VARIANT_TOKENS = {
     default: { backgroundColor: 'surfacePaper', borderColor: 'defaultMain', accentColor: 'defaultActive' },
     success: { backgroundColor: 'successSubtle', borderColor: 'successMain', accentColor: 'successActive' },
@@ -6618,6 +6673,7 @@ AlertBase.displayName = 'Alert';
 const Alert = AlertBase;
 Alert.Title = AlertTitle;
 Alert.Body = AlertBody;
+Alert.Actions = AlertActions;
 
 const TRANSITION = `${DEFAULT_TRANSITION_DURATION_MS}ms ease`;
 const DIALOG_STYLES = theme.createStyles((theme) => ({
@@ -6664,12 +6720,18 @@ const DIALOG_STYLES = theme.createStyles((theme) => ({
             transform: 'translateY(0)',
         },
     },
-    // Full-height variant on mobile (applied via `fullscreen` prop)
+    // Full-viewport variant (applied via `fullscreen` prop — all screen sizes)
     panelFullscreen: {
-        [`@media (${MEDIA_MAX.sm})`]: {
-            height: '100dvh',
-            maxHeight: 'none',
-        },
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        margin: 0,
+        width: '100%',
+        height: '100dvh',
+        maxWidth: 'none',
+        maxHeight: 'none',
+        borderRadius: 0,
     },
 }), { id: 'dialog' });
 
@@ -6766,6 +6828,114 @@ const Dialog = DialogBase;
 Dialog.Header = DialogHeader;
 Dialog.Body = DialogBody;
 
+/**
+ * Listens to a CSS media query string and returns whether it currently matches.
+ *
+ * @param query - A valid CSS media query string, e.g. `'(max-width: 639px)'`.
+ * @returns `true` when the media query matches, `false` otherwise.
+ *
+ * @example
+ * const isMobile = useMediaQuery('(max-width: 639px)')
+ */
+const useMediaQuery = (query) => {
+    const [matches, setMatches] = React.useState(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const mediaQueryList = window.matchMedia(query);
+        setMatches(mediaQueryList.matches);
+        const listener = (event) => setMatches(event.matches);
+        mediaQueryList.addEventListener('change', listener);
+        return () => mediaQueryList.removeEventListener('change', listener);
+    }, [query]);
+    return matches;
+};
+/**
+ * Returns `true` when the viewport width is **below** the given breakpoint (mobile-first max).
+ *
+ * @param breakpoint - One of the Aurora breakpoints: `xs` | `sm` | `md` | `lg` | `xl` | `2xl`.
+ *
+ * @example
+ * const isMobile = useBreakpointMax('sm') // true when width < 640px
+ */
+const useBreakpointMax = (breakpoint) => useMediaQuery(`(max-width: ${BREAKPOINTS[breakpoint] - 1}px)`);
+/**
+ * Returns `true` when the viewport width is **at or above** the given breakpoint.
+ *
+ * @param breakpoint - One of the Aurora breakpoints: `xs` | `sm` | `md` | `lg` | `xl` | `2xl`.
+ *
+ * @example
+ * const isDesktop = useBreakpointMin('md') // true when width >= 768px
+ */
+const useBreakpointMin = (breakpoint) => useMediaQuery(`(min-width: ${BREAKPOINTS[breakpoint]}px)`);
+
+/**
+ * Manages keyboard navigation for a listbox-style menu.
+ *
+ * Binds ArrowDown, ArrowUp, Home, End, and Enter using `useKeyPress`.
+ * Automatically skips disabled items and optionally wraps around (loop).
+ * Resets focus when `enabled` toggles.
+ */
+const useListKeyNav = ({ itemCount, enabled, onSelect, isDisabled, loop = true, initialIndex = 0, }) => {
+    const [focusedIndex, setFocusedIndex] = React.useState(-1);
+    const initialIndexRef = React.useRef(initialIndex);
+    React.useEffect(() => {
+        initialIndexRef.current = initialIndex;
+    }, [initialIndex]);
+    React.useEffect(() => {
+        setFocusedIndex(enabled ? initialIndexRef.current : -1);
+    }, [enabled]);
+    const getNextIndex = React.useCallback((current, direction) => {
+        if (itemCount === 0) {
+            return -1;
+        }
+        let next = current + direction;
+        for (let i = 0; i < itemCount; i++) {
+            if (next < 0) {
+                next = loop ? itemCount - 1 : 0;
+            }
+            if (next >= itemCount) {
+                next = loop ? 0 : itemCount - 1;
+            }
+            if (!isDisabled?.(next)) {
+                return next;
+            }
+            next += direction;
+        }
+        return current;
+    }, [itemCount, loop, isDisabled]);
+    useKeyPress({
+        ArrowDown: (e) => {
+            e.preventDefault();
+            setFocusedIndex((prev) => getNextIndex(prev, 1));
+        },
+        ArrowUp: (e) => {
+            e.preventDefault();
+            setFocusedIndex((prev) => getNextIndex(prev, -1));
+        },
+        Home: (e) => {
+            e.preventDefault();
+            setFocusedIndex(getNextIndex(-1, 1));
+        },
+        End: (e) => {
+            e.preventDefault();
+            setFocusedIndex(getNextIndex(itemCount, -1));
+        },
+        Enter: () => {
+            if (focusedIndex >= 0) {
+                onSelect(focusedIndex);
+            }
+        },
+    }, { enabled });
+    return { focusedIndex, setFocusedIndex };
+};
+
 const lightPalette = {
     // Surface
     surfaceBackground: '#f8fafc',
@@ -7226,5 +7396,17 @@ exports.ToggleIconButton = ToggleIconButton;
 exports.Tooltip = Tooltip;
 exports.darkTheme = darkTheme;
 exports.lightTheme = lightTheme;
+exports.useBodyScrollLock = useBodyScrollLock;
+exports.useBreakpointMax = useBreakpointMax;
+exports.useBreakpointMin = useBreakpointMin;
+exports.useControllableState = useControllableState;
 exports.useDrawerContext = useDrawerContext;
+exports.useFocusTrap = useFocusTrap;
+exports.useKeyPress = useKeyPress;
+exports.useListKeyNav = useListKeyNav;
+exports.useMediaQuery = useMediaQuery;
+exports.useMenuPosition = useMenuPosition;
+exports.useMergedRefs = useMergedRefs;
+exports.useTooltipPosition = useTooltipPosition;
+exports.useTransitionRender = useTransitionRender;
 //# sourceMappingURL=index.js.map