@mrmeg/expo-ui 0.27.1 → 0.29.0

package/dist/components/Checkbox.js

@@ -1,14 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { Icon } from "./Icon.js";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { spacing } from "../constants/spacing.js";
-import { hapticLight } from "../lib/haptics.js";
+import { hapticSelection } from "../lib/haptics.js";
+import { interaction } from "../constants/interaction.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
+import { useItemControlLabel } from "./Item.js";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
     sm: { size: 16, iconSize: 12, strokeWidth: 2.5 },
@@ -20,38 +25,20 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     const reduceMotion = useReducedMotion();
     const sizeConfig = SIZE_CONFIGS[size];
     const focusRingStyle = getFocusRingStyle();
-    const [focused, setFocused] = useState(false);
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!disabled,
         scaleTo: 0.92,
         haptic: false,
     });
-    const showFocusRing = (event) => {
-        let ringVisible = true;
-        if (Platform.OS === "web") {
-            const target = event?.nativeEvent?.target;
-            if (target && typeof target.matches === "function") {
-                try {
-                    ringVisible = target.matches(":focus-visible");
-                }
-                catch {
-                    ringVisible = true;
-                }
-            }
-        }
-        setFocused(ringVisible);
-    };
-    const hideFocusRing = () => {
-        setFocused(false);
-    };
+    const { focused, onFocus: showFocusRing, onBlur: hideFocusRing } = useFocusVisible();
     // Simple fast opacity for the checkmark icon
-    const checkOpacity = useRef(new Animated.Value(checked || indeterminate ? 1 : 0)).current;
+    const checkOpacity = useAnimatedValue(checked || indeterminate ? 1 : 0);
     const isVisuallyChecked = !!checked || indeterminate;
     const animateCheckOpacity = useCallback((nextVisible) => {
         Animated.timing(checkOpacity, {
             toValue: nextVisible ? 1 : 0,
             duration: reduceMotion ? 0 : 60,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [checkOpacity, reduceMotion]);
     useEffect(() => {
@@ -59,7 +46,7 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     }, [animateCheckOpacity, isVisuallyChecked]);
     const wrappedOnCheckedChange = (next) => {
         if (next)
-            hapticLight();
+            hapticSelection();
         animateCheckOpacity(next);
         onCheckedChange?.(next);
     };
@@ -71,39 +58,59 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     // Flatten style override for web compatibility
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const checkboxElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(CheckboxPrimitive.Root, { ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
-                ...styles.box,
-                borderColor,
-                backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
-                width: sizeConfig.size,
-                height: sizeConfig.size,
-                opacity: disabled ? 0.5 : 1,
+    // The primitive Root is the ONE control (role, state, name); the visual box
+    // is a child so the control can be larger than what it draws. On web, where
+    // `hitSlop` does nothing, a 16/20px box is below the 24px WCAG 2.5.8 minimum,
+    // so the control grows to `spacing.minTarget` and takes the extra back in
+    // negative margins — the row's layout does not move.
+    const hitSize = Platform.OS === "web" ? Math.max(sizeConfig.size, spacing.minTarget) : sizeConfig.size;
+    const hitOverflow = (hitSize - sizeConfig.size) / 2;
+    // The label text names the control on every platform (react-native-web
+    // maps `accessibilityLabel` to `aria-label`); no `useId` link, because ids
+    // do not survive Expo Router's streamed hydration (see hooks/useHydrated).
+    const rowLabel = useItemControlLabel({ ...props, accessibilityLabel: label });
+    const labelLink = label !== undefined ? { accessibilityLabel: label } : rowLabel;
+    const checkboxElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(CheckboxPrimitive.Root, { ...labelLink, ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                ...styles.control,
+                minWidth: hitSize,
+                minHeight: hitSize,
+                ...(hitOverflow > 0 && { margin: -hitOverflow }),
                 ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
-                ...(focused && !disabled ? focusRingStyle : null),
-                ...(flattenedStyle || {}),
             }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "checkbox", accessibilityState: {
                 checked: indeterminate ? "mixed" : checked,
                 disabled: !!disabled,
-            }, accessibilityLabel: label, children: _jsx(CheckboxPrimitive.Indicator, { style: {
-                    justifyContent: "center",
-                    alignItems: "center",
-                }, children: _jsx(Animated.View, { style: { opacity: checkOpacity }, children: indeterminate ? (_jsx(Icon, { name: "minus", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) : (_jsx(Icon, { name: "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) }) }) }) }));
+            }, children: _jsx(View, { style: {
+                    ...styles.box,
+                    borderColor,
+                    backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
+                    width: sizeConfig.size,
+                    height: sizeConfig.size,
+                    opacity: disabled ? 0.5 : 1,
+                    ...(focused && !disabled ? focusRingStyle : null),
+                    ...(flattenedStyle || {}),
+                }, children: _jsx(CheckboxPrimitive.Indicator, { style: {
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }, children: _jsx(Animated.View, { style: { opacity: checkOpacity }, children: indeterminate ? (_jsx(Icon, { name: "minus", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) : (_jsx(Icon, { name: "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) }) }) }) }) }));
     // If no label, return just the checkbox
     if (!label) {
         return checkboxElement;
     }
-    // With label, wrap in a container
-    return (_jsxs(Pressable, { onPress: () => !disabled && wrappedOnCheckedChange(!checked), style: [styles.container, labelStyle], disabled: disabled, accessibilityRole: "checkbox", accessibilityState: {
-            checked: indeterminate ? "mixed" : checked,
-            disabled: !!disabled,
-        }, accessibilityLabel: label, children: [checkboxElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: [
+    // With a label, a non-accessible wrapper extends the tap area to the text.
+    // It carries no role or state: the primitive Root above is the only control
+    // a screen reader meets, and it carries the label text as its name.
+    return (_jsxs(Pressable, { onPress: () => !disabled && wrappedOnCheckedChange(!checked), style: [styles.container, labelStyle], disabled: disabled, accessible: false, focusable: false, children: [checkboxElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: [
                         styles.label,
                         { color: theme.colors.text },
                         disabled && styles.disabledLabel,
                         error && { color: theme.colors.destructive },
                     ], children: [label, required && (_jsx(StyledText, { selectable: false, style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
+    control: {
+        justifyContent: "center",
+        alignItems: "center",
+    },
     box: {
         // radiusXs (not radiusSm) — at the checkbox's 16-24px sizes, radiusSm
         // post-rebase (8px) reads as over-rounded; radiusXs keeps the same
@@ -126,7 +133,7 @@ const styles = StyleSheet.create({
         fontSize: 14,
     },
     disabledLabel: {
-        opacity: 0.5,
+        opacity: interaction.disabledOpacity,
     },
     required: {
         fontWeight: "bold",

package/dist/components/Collapsible.js

@@ -1,30 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Animated, Platform, StyleSheet, View } from "react-native";
-import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
 function Collapsible({ children, ...props }) {
     return (_jsx(CollapsiblePrimitive.Root, { ...props, asChild: Platform.OS !== "web", children: _jsx(View, { children: children }) }));
 }
 function CollapsibleTrigger({ style: styleOverride, disabled, ...props }) {
-    const { theme } = useTheme();
+    const { theme, getFocusRingStyle } = useTheme();
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!disabled,
         scaleTo: 0.97,
         haptic: false,
     });
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(CollapsiblePrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+    const focus = useFocusVisible();
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(CollapsiblePrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: focus.onFocus, onBlur: focus.onBlur, style: {
                         flexDirection: "row",
                         alignItems: "center",
                         justifyContent: "space-between",
                         paddingVertical: spacing.sm,
+                        borderRadius: spacing.radiusSm,
                         ...(Platform.OS === "web" && {
                             cursor: "pointer",
                             outlineStyle: "none",
                             userSelect: "none",
                         }),
+                        ...(focus.focused && !disabled ? getFocusRingStyle() : null),
                         ...(styleOverride && typeof styleOverride !== "function"
                             ? StyleSheet.flatten(styleOverride)
                             : {}),

package/dist/components/Dialog.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
 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 { KeyboardAvoidingView } from "./KeyboardAvoidingView.js";
-import { TextClassContext, TextColorContext } from "./StyledText.context";
+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";
 // ============================================================================
@@ -64,24 +68,85 @@ function DialogPresentation({ Portal, open, portalHost, onRequestClose, children
 /**
  * Keyboard avoidance owner for dialog content.
  *
- * On iOS the `Modal` above is presented outside `UIProvider`'s root
- * `KeyboardAvoidingView`, 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`,
- * so `useKeyboardAvoidance()` is `true` inside `DialogContent` and a
+ * 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`.
  *
- * Android and web keep the portal-host tree unchanged; the portal host sits
- * outside the root avoidance there, and a dialog is not keyboard-avoided yet.
+ * 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 !== "ios") {
+    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
 // ============================================================================
@@ -97,7 +162,10 @@ 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(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
@@ -121,19 +189,19 @@ function DialogContent({ portalHost, style, children, ...props }) {
                 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, 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([
+            ]), 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 }));
@@ -191,18 +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(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, 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([
+            ]), 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%",
@@ -247,7 +318,7 @@ 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: {

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);
             },
         }