@thewhileloop/whileui 4.1.0 → 4.1.2

package/dist/blocks/navigation/header.js

@@ -14,7 +14,7 @@ export function Header({ title, subtitle, leftAction, rightActions, centerConten
                 paddingVertical: visual.controlPaddingYDefault,
             },
             style,
-        ], ...props, children: [_jsx(View, { className: "min-w-12", children: leftAction }), _jsx(View, { className: "flex-1 items-center", children: centerContent || (_jsxs(View, { className: "items-center", children: [title && (_jsx(Text, { className: "font-semibold text-foreground", style: typographyStyle(visual, 'body'), numberOfLines: 1, children: title })), subtitle && (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'caption'), numberOfLines: 1, children: subtitle }))] })) }), _jsx(View, { className: "min-w-12 flex-row items-center justify-end gap-2", children: rightActions?.map((action) => (_jsx(Pressable, { accessibilityRole: "button", onPress: action.onPress, className: "rounded-full p-2 active:bg-accent", style: withInteractivePressableStyle(undefined, interaction, {
+        ], ...props, children: [_jsx(View, { className: "min-w-12", children: leftAction }), _jsx(View, { className: "flex-1 items-center", children: centerContent || (_jsxs(View, { className: "items-center", children: [title && (_jsx(Text, { className: "font-semibold text-foreground", style: typographyStyle(visual, 'body'), numberOfLines: 1, children: title })), subtitle && (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'caption'), numberOfLines: 1, children: subtitle }))] })) }), _jsx(View, { className: "min-w-12 flex-row items-center justify-end gap-2", children: rightActions?.map((action) => (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: action.accessibilityLabel, onPress: action.onPress, className: "rounded-full p-2 active:bg-state-pressed", style: withInteractivePressableStyle(undefined, interaction, {
                         pressedVariant: 'default',
                     }), children: action.icon }, action.key))) })] }));
 }

package/dist/components/alert/alert.js

@@ -22,7 +22,10 @@ const alertVariants = tv({
 });
 const Alert = React.forwardRef(({ className, variant, style, ...props }, ref) => {
     const visual = useVisualTokens();
-    return (_jsx(View, { ref: ref, className: cn(alertVariants({ variant }), className), style: [
+    return (_jsx(View, { ref: ref, 
+        // A status message that appears is announced without focus moving to it. Set
+        // before the spread so a decorative note can opt out.
+        accessibilityRole: "alert", accessibilityLiveRegion: "polite", className: cn(alertVariants({ variant }), className), style: [
             {
                 borderRadius: surfaceRadius(visual, 'lg'),
                 borderWidth: visual.borderWidthHairline,

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { View, Modal, Pressable, Text, Alert, Platform, StyleSheet, } from 'react-native';
+import { View, Pressable, Text, Alert, Platform, StyleSheet, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { composeEventHandlers } from '../../lib/compose-event-handlers';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { OverlayHost } from '../../lib/overlay-host';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { shadowStyle, typographyStyle } from '../../lib/recipes';
 function emptyNativeCopy() {
@@ -231,7 +232,7 @@ function AlertDialogContent({ className, children, presentation = 'modal', frost
         }
         return (_jsx(View, { pointerEvents: "box-none", style: [StyleSheet.absoluteFill, { zIndex: 100 }], children: themedBody }));
     }
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", presentationStyle: Platform.OS === 'ios' ? 'overFullScreen' : undefined, statusBarTranslucent: Platform.OS === 'android', navigationBarTranslucent: Platform.OS === 'android', onRequestClose: () => setOpen(false), children: themedBody }));
+    return (_jsx(OverlayHost, { open: open, animationType: "fade", onRequestClose: () => setOpen(false), children: themedBody }));
 }
 function useAlertDialogNativeCopy() {
     return useContext(AlertDialogContext).nativeCopyRef;

package/dist/components/avatar/avatar.d.ts

@@ -27,15 +27,16 @@ declare const avatarVariants: import("tailwind-variants").TVReturnType<{
 export interface AvatarProps extends ViewProps, VariantProps<typeof avatarVariants> {
     className?: string;
 }
+export type AvatarImageStatus = 'loading' | 'loaded' | 'error';
 export interface AvatarImageProps extends Omit<ImageProps, 'style'> {
     className?: string;
-    onLoadingStatusChange?: (status: 'loading' | 'loaded' | 'error') => void;
+    onLoadingStatusChange?: (status: AvatarImageStatus) => void;
 }
 export interface AvatarFallbackProps extends ViewProps {
     className?: string;
 }
 declare const Avatar: ForwardRefComponent<ViewInstance, AvatarProps>;
-declare function AvatarImage({ className, onLoadingStatusChange, ...props }: AvatarImageProps): React.JSX.Element;
+declare function AvatarImage({ className, onLoadingStatusChange, onLoadStart, onLoad, onError, ...props }: AvatarImageProps): React.JSX.Element;
 declare namespace AvatarImage {
     var displayName: string;
 }

package/dist/components/avatar/avatar.js

@@ -20,30 +20,36 @@ const avatarVariants = tv({
     },
 });
 const AvatarContext = React.createContext({
-    imageLoaded: false,
-    setImageLoaded: () => { },
+    imageStatus: 'loading',
+    setImageStatus: () => { },
 });
 const Avatar = React.forwardRef(({ className, size, ...props }, ref) => {
-    const [imageLoaded, setImageLoaded] = useState(false);
-    const contextValue = useMemo(() => ({ imageLoaded, setImageLoaded }), [imageLoaded]);
+    const [imageStatus, setImageStatus] = useState('loading');
+    const contextValue = useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
     return (_jsx(AvatarContext.Provider, { value: contextValue, children: _jsx(View, { ref: ref, className: cn(avatarVariants({ size }), className), ...props }) }));
 });
 Avatar.displayName = 'Avatar';
-function AvatarImage({ className, onLoadingStatusChange, ...props }) {
-    const { setImageLoaded } = React.useContext(AvatarContext);
-    return (_jsx(Image, { className: cn('aspect-square h-full w-full rounded-full', className), onLoad: () => {
-            setImageLoaded(true);
+function AvatarImage({ className, onLoadingStatusChange, onLoadStart, onLoad, onError, ...props }) {
+    const { setImageStatus } = React.useContext(AvatarContext);
+    return (_jsx(Image, { ...props, className: cn('aspect-square h-full w-full rounded-full', className), onLoadStart: () => {
+            setImageStatus('loading');
+            onLoadingStatusChange?.('loading');
+            onLoadStart?.();
+        }, onLoad: (event) => {
+            setImageStatus('loaded');
             onLoadingStatusChange?.('loaded');
-        }, onError: () => {
-            setImageLoaded(false);
+            onLoad?.(event);
+        }, onError: (event) => {
+            setImageStatus('error');
             onLoadingStatusChange?.('error');
-        }, ...props }));
+            onError?.(event);
+        } }));
 }
 AvatarImage.displayName = 'AvatarImage';
 function AvatarFallback({ className, children, ...props }) {
-    const { imageLoaded } = React.useContext(AvatarContext);
+    const { imageStatus } = React.useContext(AvatarContext);
     const visual = useVisualTokens();
-    if (imageLoaded)
+    if (imageStatus === 'loaded')
         return null;
     return (_jsx(View, { className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "font-medium text-muted-foreground", style: typographyStyle(visual, 'label'), children: children })) : (children) }));
 }

package/dist/components/avatar/index.d.ts

@@ -1 +1 @@
-export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps, } from './avatar';
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarImageStatus, type AvatarFallbackProps, } from './avatar';

package/dist/components/context-menu/context-menu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useState } from 'react';
-import { View, Modal, Pressable, Text } from 'react-native';
+import { View, Pressable, Text } from 'react-native';
+import { OverlayHost } from '../../lib/overlay-host';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useVisualTokens } from '../../lib/visual-tokens';
@@ -53,7 +54,7 @@ function ContextMenuContent({ className, children, frosted = false, blurIntensit
         frostedSurface.surfaceStyle,
         style,
     ];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setOpen(false), children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { accessible: false, accessibilityRole: "menu", className: cn('w-full border-border p-2 pb-8 relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
+    return (_jsx(OverlayHost, { open: open, animationType: "slide", onRequestClose: () => setOpen(false), children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { accessible: false, accessibilityRole: "menu", className: cn('w-full border-border p-2 pb-8 relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
 }
 function ContextMenuItem({ className, style, ...props }) {
     const { setOpen } = useContext(ContextMenuContext);
@@ -64,7 +65,7 @@ function ContextMenuItem({ className, style, ...props }) {
         paddingHorizontal: visual.controlPaddingXSm,
         paddingVertical: visual.controlPaddingYSm,
     };
-    return (_jsx(Pressable, { accessibilityRole: "menuitem", className: cn('flex flex-row items-center active:bg-accent', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: (e) => {
+    return (_jsx(Pressable, { accessibilityRole: "menuitem", className: cn('flex flex-row items-center active:bg-state-pressed', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: (e) => {
             props.onPress?.(e);
             setOpen(false);
         }, ...props }));

package/dist/components/dialog/dialog.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
-import { View, Modal, Pressable, Text, } from 'react-native';
+import { View, Pressable, Text, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { composeEventHandlers } from '../../lib/compose-event-handlers';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { OverlayHost } from '../../lib/overlay-host';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { shadowStyle, typographyStyle } from '../../lib/recipes';
 const DialogContext = createContext({
@@ -47,7 +48,7 @@ function DialogContent({ className, children, frosted = false, blurIntensity, bl
         defaultBlurPreset: 'medium',
     });
     const contentStyle = [frostedSurface.surfaceStyle, style];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setOpen(false), children: _jsx(Pressable
+    return (_jsx(OverlayHost, { open: open, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(Pressable
         // Tap-to-dismiss is a pointer affordance. Left accessible it would swallow the
         // whole panel into one element; screen reader users close from inside.
         , { 
@@ -78,7 +79,7 @@ function DialogFooter({ className, ...props }) {
 }
 function DialogTitle({ className, style, ...props }) {
     const visual = useVisualTokens();
-    return (_jsx(Text, { className: cn('font-semibold text-foreground', className), style: [typographyStyle(visual, 'title'), style], ...props }));
+    return (_jsx(Text, { accessibilityRole: "header", className: cn('font-semibold text-foreground', className), style: [typographyStyle(visual, 'title'), style], ...props }));
 }
 function DialogDescription({ className, style, ...props }) {
     const visual = useVisualTokens();

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useState } from 'react';
-import { View, Modal, Pressable, Text } from 'react-native';
+import { View, Pressable, Text } from 'react-native';
+import { OverlayHost } from '../../lib/overlay-host';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useVisualTokens } from '../../lib/visual-tokens';
@@ -52,7 +53,7 @@ function DropdownMenuContent({ className, children, frosted = false, blurIntensi
         frostedSurface.surfaceStyle,
         style,
     ];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setOpen(false), children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { accessible: false, 
+    return (_jsx(OverlayHost, { open: open, animationType: "slide", onRequestClose: () => setOpen(false), children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { accessible: false, 
                 // Names the container for the `menuitem` children below; without a `menu`
                 // ancestor the role is invalid ARIA and assistive tech ignores it.
                 accessibilityRole: "menu", className: cn('w-full border-border p-2 pb-8 relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
@@ -66,7 +67,7 @@ function DropdownMenuItem({ className, style, ...props }) {
         paddingHorizontal: visual.controlPaddingXSm,
         paddingVertical: visual.controlPaddingYSm,
     };
-    return (_jsx(Pressable, { accessibilityRole: "menuitem", className: cn('flex flex-row items-center active:bg-accent', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: (e) => {
+    return (_jsx(Pressable, { accessibilityRole: "menuitem", className: cn('flex flex-row items-center active:bg-state-pressed', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: (e) => {
             props.onPress?.(e);
             setOpen(false);
         }, ...props }));

package/dist/components/hover-card/hover-card.js

@@ -4,6 +4,7 @@ import { Platform, StyleSheet } from 'react-native';
 import * as HoverCardPrimitive from '@rn-primitives/hover-card';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useNestedOverlay, useOverlayPortalTarget } from '../../lib/overlay-host';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
 import { shadowStyle, surfacePadding, surfaceRadius } from '../../lib/recipes';
@@ -22,6 +23,9 @@ const HoverCardContent = React.forwardRef(({ className, align = 'center', sideOf
     });
     const visual = useVisualTokens();
     const colors = useThemeColors();
+    const { open, onOpenChange } = HoverCardPrimitive.useRootContext();
+    const portalTarget = useOverlayPortalTarget(portalHost);
+    useNestedOverlay(open, () => onOpenChange(false));
     const resolvedStyle = StyleSheet.flatten([
         Platform.OS === 'web' ? undefined : contentStyles,
         {
@@ -33,7 +37,7 @@ const HoverCardContent = React.forwardRef(({ className, align = 'center', sideOf
         frostedSurface.surfaceStyle,
         style,
     ]);
-    return (_jsx(HoverCardPrimitive.Portal, { hostName: portalHost, children: _jsx(HoverCardPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsxs(HoverCardPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-64 border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: [frostedSurface.overlay, children] }) }) }));
+    return (_jsx(HoverCardPrimitive.Portal, { ...portalTarget, children: _jsx(HoverCardPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsxs(HoverCardPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-64 border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: [frostedSurface.overlay, children] }) }) }));
 });
 HoverCardContent.displayName = 'HoverCardContent';
 const contentStyles = {

package/dist/components/menubar/menubar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useState } from 'react';
-import { View, Modal, Pressable, Text } from 'react-native';
+import { View, Pressable, Text } from 'react-native';
+import { OverlayHost } from '../../lib/overlay-host';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useVisualTokens } from '../../lib/visual-tokens';
@@ -23,7 +24,7 @@ function MenubarTrigger({ className, style, ...props }) {
     const { setOpen } = useContext(MenubarMenuContext);
     const visual = useVisualTokens();
     const tokenStyle = controlRecipe(visual, 'sm');
-    return (_jsx(Pressable, { accessibilityRole: "button", className: cn('active:bg-accent', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: () => setOpen(true), ...props }));
+    return (_jsx(Pressable, { accessibilityRole: "button", className: cn('active:bg-state-pressed', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: () => setOpen(true), ...props }));
 }
 function MenubarContent({ className, children, frosted = false, blurIntensity, blurTintToken, style, ...props }) {
     const { open, setOpen } = useContext(MenubarMenuContext);
@@ -48,7 +49,7 @@ function MenubarContent({ className, children, frosted = false, blurIntensity, b
         frostedSurface.surfaceStyle,
         style,
     ];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setOpen(false), children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { accessible: false, accessibilityRole: "menu", className: cn('w-full border-border p-2 pb-8 relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
+    return (_jsx(OverlayHost, { open: open, animationType: "slide", onRequestClose: () => setOpen(false), children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { accessible: false, accessibilityRole: "menu", className: cn('w-full border-border p-2 pb-8 relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
 }
 function MenubarItem({ className, style, ...props }) {
     const { setOpen } = useContext(MenubarMenuContext);
@@ -59,7 +60,7 @@ function MenubarItem({ className, style, ...props }) {
         paddingHorizontal: visual.controlPaddingXSm,
         paddingVertical: visual.controlPaddingYSm,
     };
-    return (_jsx(Pressable, { accessibilityRole: "menuitem", className: cn('flex flex-row items-center active:bg-accent', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: (e) => {
+    return (_jsx(Pressable, { accessibilityRole: "menuitem", className: cn('flex flex-row items-center active:bg-state-pressed', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: (e) => {
             props.onPress?.(e);
             setOpen(false);
         }, ...props }));

package/dist/components/popover/popover.js

@@ -4,6 +4,7 @@ import { Platform, StyleSheet } from 'react-native';
 import * as PopoverPrimitive from '@rn-primitives/popover';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useNestedOverlay, useOverlayPortalTarget } from '../../lib/overlay-host';
 import { useOverlayInsets } from '../../lib/overlay-insets';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
@@ -23,6 +24,9 @@ const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffs
     });
     const visual = useVisualTokens();
     const colors = useThemeColors();
+    const { open, onOpenChange } = PopoverPrimitive.useRootContext();
+    const portalTarget = useOverlayPortalTarget(portalHost);
+    useNestedOverlay(open, () => onOpenChange(false));
     // Keeps the panel off the screen edge and out from under the notch.
     const defaultInsets = useOverlayInsets();
     const resolvedInsets = { ...defaultInsets, ...insets };
@@ -41,7 +45,7 @@ const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffs
         frostedSurface.surfaceStyle,
         style,
     ]);
-    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(PopoverPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsxs(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, insets: resolvedInsets, className: cn('z-50 w-72 border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: [frostedSurface.overlay, children] }) }) }));
+    return (_jsx(PopoverPrimitive.Portal, { ...portalTarget, children: _jsx(PopoverPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsxs(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, insets: resolvedInsets, className: cn('z-50 w-72 border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: [frostedSurface.overlay, children] }) }) }));
 });
 PopoverContent.displayName = 'PopoverContent';
 const PopoverClose = React.forwardRef(({ className, ...props }, ref) => (_jsx(PopoverPrimitive.Close, { ref: ref, className: cn(className), ...props })));

package/dist/components/select/select.js

@@ -8,6 +8,8 @@ import { cn } from '../../lib/cn';
 import { focusRing } from '../../lib/focus-ring';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useNestedOverlay, useOverlayPortalTarget } from '../../lib/overlay-host';
+import { useOverlayInsets } from '../../lib/overlay-insets';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
 import { fieldRecipe, shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
@@ -59,21 +61,40 @@ const SelectContent = React.forwardRef(({ className, children, portalHost, posit
     });
     const visual = useVisualTokens();
     const colors = useThemeColors();
-    return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsxs(SelectPrimitive.Content, { ref: ref, position: position, insets: insets, style: StyleSheet.flatten([
-                        {
-                            borderRadius: surfaceRadius(visual, 'lg'),
-                            borderWidth: visual.borderWidthHairline,
-                        },
-                        shadowStyle(visual, colors, 'md'),
-                        frostedSurface.surfaceStyle,
-                        styleProp,
-                    ]), className: cn('border-border relative z-50 min-w-32 overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', Platform.select({
-                        web: cn('max-h-96 overflow-y-auto overflow-x-hidden', props.side === 'bottom' && 'translate-y-1', props.side === 'top' && '-translate-y-1'),
+    const { open, onOpenChange } = SelectPrimitive.useRootContext();
+    const portalTarget = useOverlayPortalTarget(portalHost);
+    useNestedOverlay(open, () => onOpenChange(false));
+    // Keeps the listbox off the screen edge and clear of the notch and home indicator
+    // without every caller reading the safe area itself.
+    const defaultInsets = useOverlayInsets();
+    const resolvedInsets = { ...defaultInsets, ...insets };
+    // Radix applies its collision variables to the listbox wrapper, while
+    // @rn-primitives renders our visual surface one level inside it. Keep the sizing
+    // on that surface as inline web CSS: the Viewport's own `width: 100%` otherwise
+    // wins class merging and lets the longest option size the outer popper.
+    const webSizingStyle = Platform.OS === 'web' && position === 'popper'
+        ? {
+            boxSizing: 'border-box',
+            width: 'var(--radix-select-trigger-width)',
+            maxWidth: 'var(--radix-select-content-available-width)',
+            maxHeight: 'var(--radix-select-content-available-height)',
+        }
+        : undefined;
+    return (_jsx(SelectPrimitive.Portal, { ...portalTarget, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsxs(SelectPrimitive.Content, { ref: ref, position: position, insets: resolvedInsets, style: {
+                        ...webSizingStyle,
+                        ...StyleSheet.flatten([
+                            {
+                                borderRadius: surfaceRadius(visual, 'lg'),
+                                borderWidth: visual.borderWidthHairline,
+                            },
+                            shadowStyle(visual, colors, 'md'),
+                            frostedSurface.surfaceStyle,
+                            styleProp,
+                        ]),
+                    }, className: cn('border-border relative z-50 overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', Platform.select({
+                        web: cn('overflow-y-auto overflow-x-hidden', props.side === 'bottom' && 'translate-y-1', props.side === 'top' && '-translate-y-1'),
                         native: 'p-1',
-                    }), className), ...props, children: [frostedSurface.overlay, _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
-                                Platform.select({
-                                    web: 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)',
-                                })), children: children })] }) }) }) }));
+                    }), className), ...props, children: [frostedSurface.overlay, _jsx(SelectPrimitive.Viewport, { className: "p-1", children: children })] }) }) }) }));
 });
 SelectContent.displayName = 'SelectContent';
 const SelectItem = React.forwardRef(({ className, children, style: styleProp, ...props }, ref) => {
@@ -90,7 +111,7 @@ const SelectItem = React.forwardRef(({ className, children, style: styleProp, ..
             },
             styleProp,
             props.disabled ? { opacity: interaction.disabledOpacity } : null,
-        ]), ...props, children: [_jsx(View, { className: "absolute right-3 flex h-4 w-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(View, { className: "border-primary h-2.5 w-1.5 rotate-45 border-b-2 border-r-2 -mt-0.5" }) }) }), children, _jsx(SelectPrimitive.ItemText, { className: "text-foreground", style: typographyStyle(visual, 'body') })] }));
+        ]), ...props, children: [_jsx(View, { className: "absolute right-3 flex h-4 w-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(View, { className: "border-primary h-2.5 w-1.5 rotate-45 border-b-2 border-r-2 -mt-0.5" }) }) }), children, _jsx(SelectPrimitive.ItemText, { className: "min-w-0 flex-1 text-foreground web:whitespace-normal web:break-words", style: typographyStyle(visual, 'body') })] }));
 });
 SelectItem.displayName = 'SelectItem';
 function SelectItemIcon({ className, children }) {

package/dist/components/text/text.d.ts

@@ -10,6 +10,7 @@ declare const textVariants: import("tailwind-variants").TVReturnType<{
         body: "font-normal";
         caption: "text-muted-foreground font-normal";
         label: "font-medium leading-tight";
+        eyebrow: "text-muted-foreground font-medium";
         code: "font-mono bg-muted rounded px-1 py-0.5";
     };
     size: {
@@ -30,6 +31,7 @@ declare const textVariants: import("tailwind-variants").TVReturnType<{
         body: "font-normal";
         caption: "text-muted-foreground font-normal";
         label: "font-medium leading-tight";
+        eyebrow: "text-muted-foreground font-medium";
         code: "font-mono bg-muted rounded px-1 py-0.5";
     };
     size: {
@@ -50,6 +52,7 @@ declare const textVariants: import("tailwind-variants").TVReturnType<{
         body: "font-normal";
         caption: "text-muted-foreground font-normal";
         label: "font-medium leading-tight";
+        eyebrow: "text-muted-foreground font-medium";
         code: "font-mono bg-muted rounded px-1 py-0.5";
     };
     size: {

package/dist/components/text/text.js

@@ -16,6 +16,7 @@ const textVariants = tv({
             body: 'font-normal',
             caption: 'text-muted-foreground font-normal',
             label: 'font-medium leading-tight',
+            eyebrow: 'text-muted-foreground font-medium',
             code: 'font-mono bg-muted rounded px-1 py-0.5',
         },
         size: {
@@ -40,6 +41,7 @@ const VARIANT_ROLES = {
     body: 'body',
     caption: 'caption',
     label: 'label',
+    eyebrow: 'label',
     code: 'label',
 };
 const SIZE_ROLES = {

package/dist/components/toast/toast.js

@@ -86,10 +86,14 @@ function Toast({ toast: toastData, onDismiss, className, style, ...props }) {
                             paddingVertical: visual.controlPaddingYSm,
                         }, children: _jsx(Text, { className: cn('font-medium', textColor), style: typographyStyle(visual, 'label'), children: action.label }) })), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, className: "p-1", children: _jsx(Text, { className: cn(textColor), style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] })] }));
 }
+function ToastContainerItem({ toast, dismiss, }) {
+    const handleDismiss = useCallback(() => dismiss(toast.id), [dismiss, toast.id]);
+    return (_jsx(View, { className: "mb-2", children: _jsx(Toast, { toast: toast, onDismiss: handleDismiss }) }));
+}
 export function ToastContainer({ position = 'top', className, style, ...props }) {
     const { toasts, dismiss } = useToast();
     const visual = useVisualTokens();
     const positionClass = position === 'top' ? 'top-0' : 'bottom-0';
-    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(View, { className: "mb-2", children: _jsx(Toast, { toast: toast, onDismiss: () => dismiss(toast.id) }) }, toast.id))) }));
+    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(ToastContainerItem, { toast: toast, dismiss: dismiss }, toast.id))) }));
 }
 export { Toast, toastVariants };

package/dist/components/toggle/toggle.d.ts

@@ -15,7 +15,7 @@ declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         true: "bg-accent";
         false: "";
     };
-}, undefined, "inline-flex items-center justify-center active:bg-accent", {
+}, undefined, "inline-flex items-center justify-center active:bg-state-pressed", {
     variant: {
         default: "bg-transparent";
         outline: "border border-input bg-transparent";

package/dist/components/toggle/toggle.js

@@ -12,7 +12,7 @@ const ToggleContext = createContext({
     size: 'default',
 });
 const toggleVariants = tv({
-    base: 'inline-flex items-center justify-center active:bg-accent',
+    base: 'inline-flex items-center justify-center active:bg-state-pressed',
     variants: {
         variant: {
             default: 'bg-transparent',

package/dist/components/tooltip/tooltip.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Platform, StyleSheet, Text } from 'react-native';
 import * as TooltipPrimitive from '@rn-primitives/tooltip';
 import { cn } from '../../lib/cn';
+import { useOverlayPortalTarget } from '../../lib/overlay-host';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
 import { shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
@@ -14,6 +15,7 @@ TooltipTrigger.displayName = 'TooltipTrigger';
 const TooltipContent = React.forwardRef(({ className, sideOffset = 4, portalHost, children, style, ...props }, ref) => {
     const visual = useVisualTokens();
     const colors = useThemeColors();
+    const portalTarget = useOverlayPortalTarget(portalHost);
     const resolvedStyle = StyleSheet.flatten([
         Platform.OS === 'web' ? undefined : contentStyles,
         {
@@ -26,7 +28,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, portalHost
         shadowStyle(visual, colors, 'md'),
         style,
     ]);
-    return (_jsx(TooltipPrimitive.Portal, { hostName: portalHost, children: _jsx(TooltipPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 overflow-hidden bg-primary', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-primary-foreground", style: typographyStyle(visual, 'caption'), children: children })) : (children) }) }) }));
+    return (_jsx(TooltipPrimitive.Portal, { ...portalTarget, children: _jsx(TooltipPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 overflow-hidden bg-primary', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-primary-foreground", style: typographyStyle(visual, 'caption'), children: children })) : (children) }) }) }));
 });
 TooltipContent.displayName = 'TooltipContent';
 const contentStyles = {

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export { Spinner, spinnerVariants, type SpinnerProps } from './components/spinne
 export { Textarea, textareaVariants, type TextareaProps } from './components/textarea';
 export { Skeleton, skeletonVariants, type SkeletonProps } from './components/skeleton';
 export { AspectRatio, type AspectRatioProps } from './components/aspect-ratio';
-export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps, } from './components/avatar';
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarImageStatus, type AvatarFallbackProps, } from './components/avatar';
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, } from './components/accordion';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, type CollapsibleProps, type CollapsibleTriggerProps, type CollapsibleContentProps, } from './components/collapsible';
 export { Container, containerVariants, type ContainerProps } from './components/container';

package/dist/lib/overlay-host.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type ModalProps } from 'react-native';
+import type * as PopoverPrimitive from '@rn-primitives/popover';
+type PortalContainer = React.ComponentProps<typeof PopoverPrimitive.Portal>['container'];
+export interface OverlayHostProps extends Pick<ModalProps, 'animationType' | 'onShow' | 'onDismiss'> {
+    open: boolean;
+    /** Android back and web Escape. Omit for a host that only closes from inside. */
+    onRequestClose?: () => void;
+    children: React.ReactNode;
+}
+/**
+ * The platform `Modal` every WhileUI overlay is hosted in. Each Modal is its own window,
+ * so the platform already routes Android back and web Escape to the topmost one and, on
+ * web, traps and restores focus. The host adds what a root-level portal cannot reach:
+ * nested Select, Popover, Tooltip and HoverCard content renders inside this window, and a
+ * dismiss request closes the topmost nested overlay before the host itself.
+ */
+export declare function OverlayHost({ open, onRequestClose, children, animationType, onShow, onDismiss, }: OverlayHostProps): React.JSX.Element;
+/** Portal props for content rendered inside the nearest host. An explicit `portalHost` wins. */
+export declare function useOverlayPortalTarget(portalHost?: string): {
+    hostName?: string;
+    container?: PortalContainer;
+};
+/** Lets the nearest host close this overlay before itself while `open` is true. */
+export declare function useNestedOverlay(open: boolean, close: () => void): void;
+export {};

package/dist/lib/overlay-host.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Modal, Platform, View } from 'react-native';
+import { PortalHost } from '@rn-primitives/portal';
+const OverlayHostContext = createContext(null);
+// Radix closes a nested overlay on the Escape keydown; React Native Web closes the Modal
+// on the keyup of the same press. Seeing the keydown first lets the host drop that keyup.
+const escapeKeyTarget = Platform.OS === 'web' ? globalThis.document : undefined;
+/**
+ * The platform `Modal` every WhileUI overlay is hosted in. Each Modal is its own window,
+ * so the platform already routes Android back and web Escape to the topmost one and, on
+ * web, traps and restores focus. The host adds what a root-level portal cannot reach:
+ * nested Select, Popover, Tooltip and HoverCard content renders inside this window, and a
+ * dismiss request closes the topmost nested overlay before the host itself.
+ */
+export function OverlayHost({ open, onRequestClose, children, animationType, onShow, onDismiss, }) {
+    const hostName = useId();
+    const nested = useRef([]);
+    const consumedByNested = useRef(false);
+    const [container, setContainer] = useState(undefined);
+    const register = useCallback((overlay) => {
+        nested.current = [...nested.current, overlay];
+        return () => {
+            nested.current = nested.current.filter((entry) => entry !== overlay);
+        };
+    }, []);
+    const requestClose = useCallback(() => {
+        if (consumedByNested.current) {
+            consumedByNested.current = false;
+            return;
+        }
+        const topmost = nested.current.at(-1);
+        if (topmost) {
+            topmost.close();
+            return;
+        }
+        onRequestClose?.();
+    }, [onRequestClose]);
+    useEffect(() => {
+        if (!escapeKeyTarget || !open)
+            return;
+        const markConsumed = (event) => {
+            if (event.key === 'Escape' && nested.current.length > 0)
+                consumedByNested.current = true;
+        };
+        escapeKeyTarget.addEventListener('keydown', markConsumed, true);
+        return () => {
+            escapeKeyTarget.removeEventListener('keydown', markConsumed, true);
+            consumedByNested.current = false;
+        };
+    }, [open]);
+    const attachContainer = useCallback((node) => {
+        setContainer(node);
+    }, []);
+    const value = useMemo(() => ({ hostName, container, register }), [hostName, container, register]);
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: animationType, presentationStyle: "overFullScreen", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: requestClose, onShow: onShow, onDismiss: onDismiss, children: _jsxs(OverlayHostContext.Provider, { value: value, children: [children, Platform.OS === 'web' ? _jsx(View, { ref: attachContainer }) : _jsx(PortalHost, { name: hostName })] }) }));
+}
+/** Portal props for content rendered inside the nearest host. An explicit `portalHost` wins. */
+export function useOverlayPortalTarget(portalHost) {
+    const host = useContext(OverlayHostContext);
+    if (portalHost !== undefined)
+        return { hostName: portalHost };
+    return { hostName: host?.hostName, container: host?.container };
+}
+/** Lets the nearest host close this overlay before itself while `open` is true. */
+export function useNestedOverlay(open, close) {
+    const host = useContext(OverlayHostContext);
+    const closeRef = useRef(close);
+    useEffect(() => {
+        closeRef.current = close;
+    });
+    useEffect(() => {
+        if (!host || !open)
+            return;
+        return host.register({ close: () => closeRef.current() });
+    }, [host, open]);
+}