@mrmeg/expo-ui 0.27.0 → 0.28.0

package/dist/components/Dialog.js

@@ -1,16 +1,152 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Platform, StyleSheet, View } from "react-native";
-import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { Modal, Platform, StyleSheet, View } from "react-native";
 import * as DialogPrimitive from "@rn-primitives/dialog";
 import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext } from "./StyledText.context";
+import { KeyboardAvoidingView } from "./KeyboardAvoidingView.js";
+import { useWindowInsets } from "../hooks/useWindowInsets.js";
+import { useKeyboardDismissResponder } from "./keyboardDismiss.js";
+import { TextClassContext, TextColorContext } from "./StyledText.context.js";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
 import { palette } from "../constants/colors.js";
-const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+// ============================================================================
+// Presentation
+// ============================================================================
+/** The Modal follows the app's own orientation mask instead of RN's portrait-only default. */
+const SUPPORTED_ORIENTATIONS = [
+    "portrait",
+    "portrait-upside-down",
+    "landscape",
+    "landscape-left",
+    "landscape-right",
+];
+/**
+ * Presentation for dialog content.
+ *
+ * iOS presents through React Native's `Modal`, rendered inline where the
+ * dialog sits in the tree rather than through the portal host. Until 0.27.1
+ * both dialogs rendered into `UIProvider`'s portal host inside
+ * react-native-screens' `FullWindowOverlay`, which stacks above native stack
+ * modals by adding its container straight to the `UIWindow`. No
+ * `UIViewController` sits above that container, and `expo-modules-core`'s
+ * `ExpoSwiftUI.HostingView` — which attaches its `UIHostingController` only
+ * when `reactViewController()` finds a parent controller — removed the SwiftUI
+ * view instead. Every `@expo/ui`-hosted control inside (`TextInput`, `Slider`,
+ * `SegmentedControl`) was a zero-height box: no editable element, no focus, no
+ * keyboard (fieldnest on iOS 27, `@mrmeg/expo-ui` 0.27.0; reproduced in the
+ * template's `Dialog` `form` variant — the accessibility tree listed only the
+ * field labels, and the same content mounted with the overlay removed).
+ *
+ * `Modal` presents a real view controller, so hosted controls mount and take
+ * focus on the first tap. RN presents it from the view controller nearest the
+ * `Modal`'s own host view, which is why it renders inline: a `Modal` in the
+ * root portal host presents from the root controller and silently fails
+ * whenever that controller already presents a native stack modal or a sheet
+ * (device-verified: the trigger reported expanded, nothing appeared). Inline,
+ * the presenter is whatever screen, native stack modal or sheet contains the
+ * dialog, and the dialog stacks above it. The trade-off: content hosted by
+ * `FullWindowOverlay` (`Drawer`, `Popover`, `Select`, `DropdownMenu`,
+ * `Tooltip`) has no view controller either, so a dialog placed inside that
+ * content cannot present on iOS — render it at screen level and open it from
+ * the item's `onPress`.
+ *
+ * Android and web render into the portal host, as before.
+ */
+function DialogPresentation({ Portal, open, portalHost, onRequestClose, children, }) {
+    if (Platform.OS !== "ios") {
+        return _jsx(Portal, { hostName: portalHost, children: children });
+    }
+    if (!open) {
+        return null;
+    }
+    return (_jsx(Modal, { visible: true, transparent: true, animationType: "none", presentationStyle: "overFullScreen", supportedOrientations: SUPPORTED_ORIENTATIONS, onRequestClose: onRequestClose, children: children }));
+}
+/**
+ * Keyboard avoidance owner for dialog content.
+ *
+ * Dialog content sits outside `UIProvider`'s root `KeyboardAvoidingView` on
+ * both native platforms — the iOS `Modal` above is presented outside it, and
+ * on Android the primitive `Portal` renders into `UIProvider`'s `PortalHost`,
+ * a sibling of the root avoidance — so nothing else can keep a focused dialog
+ * field and the footer above the keyboard. This wrapper pads the centered
+ * container by the keyboard height, and the card (capped at 85% of the
+ * remaining height) recenters in the space that is left. It is the package
+ * `KeyboardAvoidingView` (keyboard-controller on native, which observes the
+ * main window's IME on Android, where the portal-hosted dialog lives), so
+ * `useKeyboardAvoidance()` is `true` inside `DialogContent` and a
+ * `DismissKeyboard` in dialog content adds no second layer. Do not wrap dialog
+ * content in another `KeyboardAvoidingView`.
+ *
+ * Web has no software keyboard and keeps the portal-host tree unchanged.
+ */
+/**
+ * On native the overlay (an iOS `Modal`, the Android portal) covers the whole
+ * window, so the centered container pads the safe-area insets: `sizer`'s 85 %
+ * is then 85 % of the area between the Dynamic Island and the home indicator,
+ * not of the screen. Web's overlay is the viewport; nothing to pad.
+ */
+function useDialogSafeAreaPadding() {
+    const insets = useWindowInsets();
+    if (Platform.OS === "web")
+        return null;
+    return {
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+    };
+}
+function DialogKeyboardAvoidance({ children }) {
+    if (Platform.OS === "web") {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(KeyboardAvoidingView, { style: overlayStyles.fill, behavior: "padding", keyboardVerticalOffset: 0, children: children }));
+}
+/**
+ * Tap-away keyboard dismissal for dialog content.
+ *
+ * The iOS `Modal` sits outside any app-level `DismissKeyboard`, and the
+ * portal-hosted tree on Android does too, so a tap on the card's dead space
+ * (padding, labels, the gap between fields and footer) left the keyboard up.
+ * The dialogs carry the same boundary as `DismissKeyboard` and
+ * `BottomSheet.Content` (`useKeyboardDismissResponder`): `Close` / `Action` /
+ * `Cancel`, buttons and fields win the negotiation and fire on the first tap,
+ * and the boundary dismisses on release of an otherwise unclaimed single-finger
+ * tap within the travel slop, through the registered field's blur handle with a
+ * `KeyboardController.dismiss()` fallback. Inert on web (returns `{}`).
+ *
+ * Where it sits differs per primitive. `@rn-primitives/dialog`'s native
+ * `Content` claims every touch that reaches it (`onStartShouldSetResponder`
+ * returning `true`), so the overlay `Pressable`'s `closeOnPress` never fires for
+ * a tap inside the card — and that claim ends the bubble negotiation before any
+ * ancestor is asked, so a boundary on the centered container was never armed
+ * for a card tap (Pixel 6a: dead-space taps left the keyboard up). `Dialog`
+ * therefore puts the boundary on the `Content` itself and keeps the claim
+ * (`claimsTouch`): the boundary arms, then answers `true` as the primitive
+ * did. `@rn-primitives/alert-dialog`'s `Content` claims nothing, so
+ * `AlertDialog` keeps the never-claiming boundary on its centered container,
+ * which also covers its backdrop (the alert overlay does not close on press).
+ * A `Dialog` backdrop tap is still the primitive `Overlay`'s: it closes the
+ * dialog and the keyboard drops with it.
+ */
+function useDialogKeyboardDismissBoundary(claimsTouch = false) {
+    const boundary = useKeyboardDismissResponder();
+    return React.useMemo(() => {
+        if (!claimsTouch || Platform.OS === "web")
+            return boundary;
+        return {
+            ...boundary,
+            onStartShouldSetResponder: (event) => {
+                boundary.onStartShouldSetResponder?.(event);
+                return true;
+            },
+        };
+    }, [boundary, claimsTouch]);
+}
 // ============================================================================
 // Dialog
 // ============================================================================
@@ -26,8 +162,21 @@ function DialogRoot({ children, ...props }) {
 }
 function DialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const dialogRadius = useShape("dialog")?.borderRadius ?? spacing.radiusLg;
+    const safeAreaPadding = useDialogSafeAreaPadding();
+    const { open, onOpenChange } = DialogPrimitive.useRootContext();
+    const dismissBoundaryProps = useDialogKeyboardDismissBoundary(true);
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
-    return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DialogPrimitive.Overlay
+    return (_jsx(DialogPresentation, { Portal: DialogPrimitive.Portal, open: open, portalHost: portalHost, onRequestClose: () => onOpenChange(false), children: _jsx(DialogPrimitive.Overlay
+        // On web the primitive wraps the overlay in a react-native-web
+        // Pressable whose click handler stops propagation unconditionally.
+        // With that Pressable between the overlay and the Radix content,
+        // outside presses (mouse and touch) and Escape never dismissed the
+        // dialog, so a dialog without a Close button was stuck. `asChild`
+        // makes the primitive clone our fade wrapper instead, removing the
+        // Pressable; Radix dismissal then works. Native keeps the Pressable,
+        // which is what implements closeOnPress there.
+        , { 
             // On web the primitive wraps the overlay in a react-native-web
             // Pressable whose click handler stops propagation unconditionally.
             // With that Pressable between the overlay and the Radix content,
@@ -36,32 +185,23 @@ function DialogContent({ portalHost, style, children, ...props }) {
             // makes the primitive clone our fade wrapper instead, removing the
             // Pressable; Radix dismissal then works. Native keeps the Pressable,
             // which is what implements closeOnPress there.
-            , { 
-                // On web the primitive wraps the overlay in a react-native-web
-                // Pressable whose click handler stops propagation unconditionally.
-                // With that Pressable between the overlay and the Radix content,
-                // outside presses (mouse and touch) and Escape never dismissed the
-                // dialog, so a dialog without a Close button was stuck. `asChild`
-                // makes the primitive clone our fade wrapper instead, removing the
-                // Pressable; Radix dismissal then works. Native keeps the Pressable,
-                // which is what implements closeOnPress there.
-                asChild: Platform.OS === "web", style: StyleSheet.flatten([
-                    StyleSheet.absoluteFill,
-                    { backgroundColor: theme.colors.overlay },
-                    Platform.OS === "web" && { zIndex: 50 },
-                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
+            asChild: Platform.OS === "web", style: StyleSheet.flatten([
+                StyleSheet.absoluteFill,
+                { backgroundColor: theme.colors.overlay },
+                Platform.OS === "web" && { zIndex: 50 },
+            ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(DialogKeyboardAvoidance, { children: _jsx(View, { style: [overlayStyles.centeredContainer, safeAreaPadding], testID: "dialog-safe-area", children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
                                             {
                                                 backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
-                                                borderRadius: spacing.radiusLg,
+                                                borderRadius: dialogRadius,
                                                 padding: spacing.dialogPadding,
                                                 gap: spacing.md,
                                                 width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },
                                             style,
-                                        ]), ...props, children: children }) }) }) }) }) }) }) }) }));
+                                        ]), ...dismissBoundaryProps, ...props, children: children }) }) }) }) }) }) }) }) }));
 }
 function DialogHeader({ children, style, ...props }) {
     return (_jsx(View, { style: StyleSheet.flatten([{ gap: spacing.xs }, style]), ...props, children: children }));
@@ -119,17 +259,21 @@ function AlertDialogRoot({ children, ...props }) {
 }
 function AlertDialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const dialogRadius = useShape("dialog")?.borderRadius ?? spacing.radiusLg;
+    const safeAreaPadding = useDialogSafeAreaPadding();
+    const { open, onOpenChange } = AlertDialogPrimitive.useRootContext();
+    const dismissBoundaryProps = useDialogKeyboardDismissBoundary();
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
-    return (_jsx(AlertDialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(AlertDialogPrimitive.Overlay, { style: StyleSheet.flatten([
-                    StyleSheet.absoluteFill,
-                    { backgroundColor: theme.colors.overlay },
-                    Platform.OS === "web" && { zIndex: 52 },
-                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
+    return (_jsx(DialogPresentation, { Portal: AlertDialogPrimitive.Portal, open: open, portalHost: portalHost, onRequestClose: () => onOpenChange(false), children: _jsx(AlertDialogPrimitive.Overlay, { style: StyleSheet.flatten([
+                StyleSheet.absoluteFill,
+                { backgroundColor: theme.colors.overlay },
+                Platform.OS === "web" && { zIndex: 52 },
+            ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(DialogKeyboardAvoidance, { children: _jsx(View, { style: [overlayStyles.centeredContainer, safeAreaPadding], ...dismissBoundaryProps, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
                                             {
                                                 backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
-                                                borderRadius: spacing.radiusLg,
+                                                borderRadius: dialogRadius,
                                                 padding: spacing.dialogPadding,
                                                 gap: spacing.md,
                                                 width: "100%",
@@ -174,7 +318,12 @@ const AlertDialog = Object.assign(AlertDialogRoot, {
 // ============================================================================
 // Shared styles
 // ============================================================================
-const overlayStyles = StyleSheet.create({
+const overlayStyles = /*#__PURE__*/ StyleSheet.create({
+    // The keyboard-avoiding wrapper fills the overlay so its bottom padding
+    // shrinks the centered container instead of the card.
+    fill: {
+        flex: 1,
+    },
     centeredContainer: {
         flex: 1,
         justifyContent: "center",

package/dist/components/Drawer.d.ts

@@ -80,7 +80,7 @@ interface DrawerBodyProps extends ViewProps {
 interface DrawerFooterProps extends ViewProps {
     children: React.ReactNode;
 }
-declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, variant, collapsedWidth, expandedWidth, expandOnHover, defaultExpanded, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }: DrawerProps): React.JSX.Element;
+declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, variant, collapsedWidth, expandedWidth, expandOnHover: expandOnHoverProp, defaultExpanded, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }: DrawerProps): React.JSX.Element;
 declare function DrawerTrigger({ asChild, children, style: styleOverride }: DrawerTriggerProps): React.JSX.Element;
 interface DrawerToggleCollapseProps {
     /** Use child component as the toggle */

package/dist/components/Drawer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useState, useReducer, useRef } from "react";
+import React, { createContext, use, useEffectEvent, useLayoutEffect, useState, useReducer, useRef } from "react";
 import { View, Pressable, Animated, StyleSheet, Platform, PanResponder, } from "react-native";
 import { Portal } from "@rn-primitives/portal";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
@@ -7,9 +7,10 @@ import { Pressable as SlotPressable } from "@rn-primitives/slot";
 import { useTheme } from "../hooks/useTheme.js";
 import { useDimensions } from "../hooks/useDimensions.js";
 import { shouldUseNativeDriver } from "../lib/animations.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
 import { spacing } from "../constants/spacing.js";
 import { durations } from "../constants/motion.js";
-import { TextColorContext, TextClassContext } from "./StyledText.context";
+import { TextColorContext, TextClassContext } from "./StyledText.context.js";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { SansSerifBoldText } from "./StyledText.js";
 /**
@@ -80,7 +81,10 @@ function drawerReducer(state, action) {
 // ============================================================================
 // Drawer Root Component
 // ============================================================================
-function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, side = "left", width = 300, closeOnBackdropPress = true, variant = "overlay", collapsedWidth = 72, expandedWidth = 240, expandOnHover = Platform.OS === "web", defaultExpanded = false, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }) {
+function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, side = "left", width = 300, closeOnBackdropPress = true, variant = "overlay", collapsedWidth = 72, expandedWidth = 240, expandOnHover: expandOnHoverProp, defaultExpanded = false, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }) {
+    // Resolved in the body rather than as a default parameter: the React
+    // Compiler can't reorder a computed default, and skipped the component.
+    const expandOnHover = expandOnHoverProp === undefined ? Platform.OS === "web" : expandOnHoverProp;
     // Use reducer for stable state management - dispatch is stable and reducer always gets current state
     const [internalOpen, dispatch] = useReducer(drawerReducer, defaultOpen);
     const isControlled = controlledOpen !== undefined;
@@ -219,42 +223,43 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
     const { open, onOpenChange, side, width, closeOnBackdropPress } = drawerContext;
     const { theme, getShadowStyle } = useTheme();
     const insets = useSafeAreaInsets();
-    // Animation values - initialize lazily so the Animated.Value is allocated
-    // once on first render instead of being rebuilt and discarded every render.
+    // Animation values, allocated once. Both start closed: a drawer that mounts
+    // open slides in from there (see the open-change effect below).
     const closedPosition = side === "left" ? -width : width;
-    const translateXRef = useRef(null);
-    if (translateXRef.current === null) {
-        translateXRef.current = new Animated.Value(open ? 0 : closedPosition);
-    }
-    const translateX = translateXRef.current;
-    const backdropOpacityRef = useRef(null);
-    if (backdropOpacityRef.current === null) {
-        backdropOpacityRef.current = new Animated.Value(open ? 1 : 0);
-    }
-    const backdropOpacity = backdropOpacityRef.current;
+    const translateX = useAnimatedValue(closedPosition);
+    const backdropOpacity = useAnimatedValue(0);
     // Track if drawer is actually visible (for unmounting after close animation)
     const [isVisible, setIsVisible] = useState(open);
+    // Opening marks the panel visible in the same render, so it stays mounted
+    // through the close animation that follows. State adjusted during render
+    // (React re-runs the render before committing it), keyed on `open` changing.
+    const [previousOpenProp, setPreviousOpenProp] = useState(open);
+    if (open !== previousOpenProp) {
+        setPreviousOpenProp(open);
+        if (open && !isVisible) {
+            setIsVisible(true);
+        }
+    }
     // Track what we last animated to - persists across renders
     const lastOpenRef = useRef(null);
     // Track running animation to properly cancel it
     const runningAnimationRef = useRef(null);
     // Use semantic foreground color for text on background
     const textColor = theme.colors.foreground;
-    // Trigger animation during render if open changed
-    if (open !== lastOpenRef.current) {
+    // Animate when `open` changes. Runs in the commit's layout phase, before
+    // the frame paints, and reads that commit's position and width.
+    const animateOpenChange = useEffectEvent((nextOpen) => {
         const previousOpen = lastOpenRef.current;
-        lastOpenRef.current = open;
+        if (nextOpen === previousOpen)
+            return;
+        lastOpenRef.current = nextOpen;
         // Stop any running animations immediately
         if (runningAnimationRef.current) {
             runningAnimationRef.current.stop();
             runningAnimationRef.current = null;
         }
-        if (open) {
-            // Opening - set visible immediately
-            if (!isVisible) {
-                setIsVisible(true);
-            }
-            // If this is first render (previousOpen is null), set initial position
+        if (nextOpen) {
+            // If this is the first run (previousOpen is null), start from closed.
             // Otherwise animate from current position (handles mid-animation toggle)
             if (previousOpen === null) {
                 translateX.setValue(closedPosition);
@@ -303,9 +308,13 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
                 }
             });
         }
-    }
-    // Create pan responder for swipe gestures (native only)
-    const panResponder = useRef(Platform.OS !== "web" && swipeEnabled
+    });
+    useLayoutEffect(() => {
+        animateOpenChange(open);
+    }, [open]);
+    // Create pan responder for swipe gestures (native only). Built once, from
+    // the first render's props, like the ref it replaces.
+    const [panResponder] = useState(() => Platform.OS !== "web" && swipeEnabled
         ? PanResponder.create({
             onStartShouldSetPanResponder: () => false,
             onMoveShouldSetPanResponder: (_evt, gestureState) => {
@@ -377,7 +386,7 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
                 }
             },
         })
-        : null).current;
+        : null);
     // Handle backdrop press
     const handleBackdropPress = () => {
         if (closeOnBackdropPress) {
@@ -458,44 +467,45 @@ swipeEnabled: _swipeEnabled, swipeThreshold: _swipeThreshold, velocityThreshold:
     // `expanded` true→false) while the pointer is still over it, the active hover
     // would instantly re-expand it and the collapse would look like a no-op.
     // Suppress the current hover session in that case; a fresh mouse-enter clears
-    // the suppression so peek-on-hover works again. Tracked in a ref, read during
-    // the re-render that the `expanded` change already triggers (same pattern as
-    // `lastExpandedRef` below).
-    const hoverSuppressedRef = useRef(false);
-    const prevExpandedRef = useRef(expanded);
-    if (prevExpandedRef.current !== expanded) {
-        const wasExpanded = prevExpandedRef.current;
-        prevExpandedRef.current = expanded;
-        if (wasExpanded && !expanded && hovered) {
-            hoverSuppressedRef.current = true;
+    // the suppression so peek-on-hover works again. State adjusted during the
+    // render that the `expanded` change already triggers: React re-runs that
+    // render with the suppression applied before committing it.
+    const [hoverSuppressed, setHoverSuppressed] = useState(false);
+    const [previousExpanded, setPreviousExpanded] = useState(expanded);
+    if (previousExpanded !== expanded) {
+        setPreviousExpanded(expanded);
+        if (previousExpanded && !expanded && hovered) {
+            setHoverSuppressed(true);
         }
     }
-    const effectiveExpanded = expanded || (expandOnHover && hovered && !hoverSuppressedRef.current);
+    const effectiveExpanded = expanded || (expandOnHover && hovered && !hoverSuppressed);
     const textColor = theme.colors.foreground;
     const targetWidth = effectiveExpanded ? expandedWidth : collapsedWidth;
     // Native animates width via Animated.Value (layout prop → useNativeDriver: false).
     // Web sets the width directly and lets the inline CSS `transition` animate it.
-    const widthRef = useRef(null);
-    if (widthRef.current === null) {
-        widthRef.current = new Animated.Value(targetWidth);
-    }
-    const widthAnim = widthRef.current;
-    // Trigger the native width animation during render when expansion changes,
-    // mirroring the overlay's lastOpenRef pattern above. Skip the first render:
-    // the Animated.Value is already initialized to the current target, so there is
-    // nothing to animate toward on mount.
+    const widthAnim = useAnimatedValue(targetWidth);
+    // Start the native width animation when expansion changes, in the commit's
+    // layout phase (before the frame paints), mirroring the overlay's open-change
+    // effect above. Skip the first run: the Animated.Value is already
+    // initialized to the current target, so there is nothing to animate toward
+    // on mount.
     const lastExpandedRef = useRef(null);
-    if (Platform.OS !== "web" && effectiveExpanded !== lastExpandedRef.current) {
-        const previousExpanded = lastExpandedRef.current;
-        lastExpandedRef.current = effectiveExpanded;
-        if (previousExpanded !== null) {
+    const animateExpandedChange = useEffectEvent((nextExpanded) => {
+        if (Platform.OS === "web" || nextExpanded === lastExpandedRef.current)
+            return;
+        const previousAnimatedExpanded = lastExpandedRef.current;
+        lastExpandedRef.current = nextExpanded;
+        if (previousAnimatedExpanded !== null) {
             Animated.timing(widthAnim, {
                 toValue: targetWidth,
                 duration: durations.normal,
                 useNativeDriver: false,
             }).start();
         }
-    }
+    });
+    useLayoutEffect(() => {
+        animateExpandedChange(effectiveExpanded);
+    }, [effectiveExpanded]);
     const shadowStyle = effectiveExpanded
         ? StyleSheet.flatten(getShadowStyle("elevated"))
         : undefined;
@@ -521,11 +531,11 @@ swipeEnabled: _swipeEnabled, swipeThreshold: _swipeThreshold, velocityThreshold:
     const hoverHandlers = Platform.OS === "web" && expandOnHover
         ? {
             onMouseEnter: () => {
-                hoverSuppressedRef.current = false;
+                setHoverSuppressed(false);
                 setHovered(true);
             },
             onMouseLeave: () => {
-                hoverSuppressedRef.current = false;
+                setHoverSuppressed(false);
                 setHovered(false);
             },
         }

package/dist/components/DropdownMenu.js

@@ -3,9 +3,10 @@ import * as React from "react";
 import { Animated, Platform, StyleSheet, Text, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
@@ -76,7 +77,7 @@ function DropdownMenuContent({ side, align = "start", sideOffset = 4, portalHost
     return (_jsx(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DropdownMenuPrimitive.Overlay, { style: Platform.select({
                     native: StyleSheet.absoluteFill,
                     default: undefined,
-                }), children: _jsx(AnimatedView, { type: "fade", style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
+                }), children: _jsx(AnimatedView, { type: "fade", style: [StyleSheet.absoluteFill, styles.passThrough], children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
                                     backgroundColor: theme.colors.popover,
                                     borderWidth: 1,
                                     borderColor: theme.colors.border,
@@ -109,7 +110,7 @@ function DropdownMenuItem({ inset = false, variant = "default", style: styleOver
                             outlineStyle: "none",
                             userSelect: "none",
                         }),
-                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(props.disabled && { opacity: interaction.disabledOpacity }),
                         ...(inset && { paddingLeft: spacing.xl }),
                         ...(styleOverride && typeof styleOverride !== "function"
                             ? StyleSheet.flatten(styleOverride)
@@ -130,7 +131,7 @@ function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props })
                             outlineStyle: "none",
                             userSelect: "none",
                         }),
-                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(props.disabled && { opacity: interaction.disabledOpacity }),
                         ...(styleOverride && typeof styleOverride !== "function"
                             ? StyleSheet.flatten(styleOverride)
                             : {}),
@@ -157,7 +158,7 @@ function DropdownMenuRadioItem({ children, style: styleOverride, ...props }) {
                             outlineStyle: "none",
                             userSelect: "none",
                         }),
-                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(props.disabled && { opacity: interaction.disabledOpacity }),
                         ...(styleOverride && typeof styleOverride !== "function"
                             ? StyleSheet.flatten(styleOverride)
                             : {}),
@@ -172,7 +173,7 @@ function DropdownMenuRadioItem({ children, style: styleOverride, ...props }) {
                                         backgroundColor: theme.colors.text,
                                         height: 8,
                                         width: 8,
-                                        borderRadius: 4,
+                                        borderRadius: spacing.radiusFull,
                                     } }) }) }), typeof children === "function" ? null : children] }) }) }) }));
 }
 function DropdownMenuLabel({ inset = false, style: styleOverride, ...props }) {
@@ -216,7 +217,10 @@ function DropdownMenuShortcut({ children, text, style: styleOverride, ...props }
             styleOverride,
         ], children: text ?? children }));
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
+    // Overlay layer: covers the screen without swallowing touches (style, not the
+    // deprecated `pointerEvents` prop).
+    passThrough: { pointerEvents: "box-none" },
     item: {
         position: "relative",
         flexDirection: "row",

package/dist/components/EmptyState.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-import { type ButtonProps } from "./Button";
-import { type IconName } from "./Icon";
+import { type ButtonProps } from "./Button.js";
+import { type IconName } from "./Icon.js";
 export interface EmptyStateProps {
     /** Icon name to display */
     icon?: IconName;

package/dist/components/EmptyState.js

@@ -4,6 +4,7 @@ import { SansSerifBoldText, SansSerifText } from "./StyledText.js";
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { shapeRadius, useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
 /**
@@ -26,7 +27,9 @@ import { createThemedStyles } from "../lib/themedStyles.js";
 export function EmptyState({ icon, iconSize = spacing.iconMd, title, description, actionLabel, onAction, actionPreset = "default", style, children, bordered = false, }) {
     const { theme } = useTheme();
     const styles = themedStyles(theme);
-    return (_jsxs(View, { style: [styles.container, bordered && styles.bordered, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, size: "lg", style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, size: "base", style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, text: actionLabel, style: styles.action }))] }));
+    // Host-app `setShape({ card })` shapes the bordered frame like a Card.
+    const cardRadius = shapeRadius(useShape("card"));
+    return (_jsxs(View, { style: [styles.container, bordered && styles.bordered, bordered && cardRadius, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, size: "lg", style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, size: "base", style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, text: actionLabel, style: styles.action }))] }));
 }
 const MEDIA_SIZE = 56;
 const createStyles = (theme) => StyleSheet.create({
@@ -74,4 +77,4 @@ const createStyles = (theme) => StyleSheet.create({
         alignSelf: "center",
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);

package/dist/components/Hydrated.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+export interface HydratedProps {
+    /** What the server HTML and the hydration pass show in place of the children. @default null */
+    fallback?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Hydrated
+ *
+ * Renders `fallback` on the server and through the hydration pass, then its
+ * children in the first client render — the gate for markup the server cannot
+ * reproduce. Under Expo Router's SSR the server renders the app inside
+ * `+html.tsx` while the client hydrates `#root`, so every `useId()` differs
+ * between the two trees; the kit defers its own ids, but a Radix-backed
+ * component (`Tabs`, `Accordion`, `Collapsible`, `Select`, `DropdownMenu`,
+ * `Popover`) emits ids on both sides and logs a hydration mismatch when it is
+ * part of a server-rendered route. Wrap that subtree, not the page: the rest of
+ * the screen keeps its server HTML. Give it a fallback that holds the layout
+ * (a placeholder the same height) so nothing shifts when the children mount.
+ *
+ * Do not use it for content that must be in the server HTML (a FAQ's questions,
+ * a product's description); accept the development-only log there instead. On
+ * native there is no hydration pass, so children render immediately.
+ *
+ * ```tsx
+ * <Hydrated fallback={<View style={{ height: 240 }} />}>
+ *   <Tabs defaultValue="day">…</Tabs>
+ * </Hydrated>
+ * ```
+ */
+export declare function Hydrated({ fallback, children }: HydratedProps): import("react").JSX.Element;