@mrmeg/expo-ui 0.27.0 → 0.28.0

package/dist/components/Notification.js

@@ -1,19 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, use, useEffect, useEffectEvent, useRef } from "react";
+import { useCallback, useEffect, useEffectEvent, useMemo, useRef } from "react";
 import { Animated, Easing, StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
-import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { useStore } from "zustand";
 import { Icon } from "./Icon.js";
 import { useTheme, withAlpha } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useWindowInsets } from "../hooks/useWindowInsets.js";
 import { spacing } from "../constants/spacing.js";
 import { durations } from "../constants/motion.js";
 import { StyledText } from "./StyledText.js";
 import { palette } from "../constants/colors.js";
 import { translateText } from "../lib/i18n.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
-import { globalUIStore } from "../state/globalUIStore.js";
-const timingIn = { duration: durations.fast, easing: Easing.out(Easing.quad), useNativeDriver: true };
-const timingOut = { duration: durations.instant, easing: Easing.in(Easing.quad), useNativeDriver: true };
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
+import { globalUIStore, selectNotificationOffset } from "../state/globalUIStore.js";
+const timingIn = { duration: durations.fast, easing: Easing.out(Easing.quad), useNativeDriver: shouldUseNativeDriver };
+const timingOut = { duration: durations.instant, easing: Easing.in(Easing.quad), useNativeDriver: shouldUseNativeDriver };
+/**
+ * Run an action's handler, then dismiss, even when the handler throws. A
+ * module-level function because the React Compiler can't compile a
+ * `try`/`finally` and would otherwise skip the whole component.
+ */
+function runThenDismiss(run, dismiss) {
+    try {
+        run();
+    }
+    finally {
+        dismiss();
+    }
+}
 /**
  * Notification
  *
@@ -35,22 +51,27 @@ const timingOut = { duration: durations.instant, easing: Easing.in(Easing.quad),
 export const Notification = () => {
     const { theme, getShadowStyle } = useTheme();
     const reduceMotion = useReducedMotion();
-    const insets = use(SafeAreaInsetsContext);
-    const { alert, hide } = globalUIStore();
+    // Window insets, not the provider context alone: a toast host above the
+    // app's SafeAreaProvider (or inside a Modal) used to fall back to 20 pt and
+    // sit under the Dynamic Island.
+    const insets = useWindowInsets();
+    // Read the store through zustand's `useStore`, not by calling
+    // `globalUIStore()` directly: the React Compiler recognizes hooks by their
+    // `use` prefix, so it treated that call as a plain function, cached its
+    // result, and skipped the hook on the next render (React error #311).
+    const { alert, hide } = useStore(globalUIStore);
+    // Bars a layout registered with `useNotificationOffset` (a tab bar, a
+    // floating header), measured from the window edge like the insets. Select
+    // the stable record and derive the maxima here: a selector that built a new
+    // object per call would never satisfy `useSyncExternalStore`'s snapshot check.
+    const notificationOffsets = useStore(globalUIStore, (state) => state.notificationOffsets);
+    const offset = useMemo(() => selectNotificationOffset({ notificationOffsets }), [notificationOffsets]);
     const styles = themedStyles(theme);
     const position = alert?.position ?? "top";
     const isBottom = position === "bottom";
     // Just opacity + translateY — no scale (scale = bouncy feel)
-    const opacityRef = useRef(null);
-    if (opacityRef.current === null) {
-        opacityRef.current = new Animated.Value(0);
-    }
-    const opacity = opacityRef.current;
-    const translateYRef = useRef(null);
-    if (translateYRef.current === null) {
-        translateYRef.current = new Animated.Value(0);
-    }
-    const translateY = translateYRef.current;
+    const opacity = useAnimatedValue(0);
+    const translateY = useAnimatedValue(0);
     const wasVisibleRef = useRef(false);
     const timerRef = useRef(null);
     const hideNotification = useCallback(() => {
@@ -88,12 +109,7 @@ export const Notification = () => {
         const action = alert?.action;
         if (!action)
             return;
-        try {
-            action.onPress();
-        }
-        finally {
-            animateOut();
-        }
+        runThenDismiss(() => action.onPress(), animateOut);
     }, [alert?.action, animateOut]);
     // The auto-dismiss timer only needs the latest animateOut; wrapping it in an
     // Effect Event keeps it out of the deps so the effect doesn't re-run (and
@@ -150,8 +166,10 @@ export const Notification = () => {
         opacity,
         transform: [{ translateY }],
     };
-    const topPosition = insets?.top ? insets.top : 20;
-    const bottomPosition = insets?.bottom ? insets.bottom : 20;
+    // 8 pt of air past the inset or a registered bar, whichever reaches further;
+    // without either, 20 pt from the edge (as before).
+    const topPosition = Math.max(insets.top, spacing.smd, offset.top) + spacing.sm;
+    const bottomPosition = Math.max(insets.bottom, spacing.smd, offset.bottom) + spacing.sm;
     const getIconProps = () => {
         switch (alert?.type) {
             case "error":
@@ -208,7 +226,7 @@ export const Notification = () => {
     if (!alert?.show) {
         return null;
     }
-    return (_jsx(Animated.View, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", style: [
+    return (_jsx(Animated.View, { testID: "ui-notification", accessibilityLiveRegion: "polite", accessibilityRole: "alert", style: [
             styles.container,
             isBottom
                 ? { bottom: bottomPosition }
@@ -302,4 +320,4 @@ const createStyles = (theme) => StyleSheet.create({
         ...(Platform.OS === "web" && { cursor: "pointer" }),
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);

package/dist/components/Popover.d.ts

@@ -3,22 +3,34 @@ import * as React from "react";
 import { ViewProps } from "react-native";
 /**
  * Popover Trigger Component
- * The element that triggers the popover to open/close
+ * The element that triggers the popover to open/close. Its ref exposes
+ * `open()` / `close()` for driving the popover from outside.
  */
-type PopoverTriggerProps = PopoverPrimitive.TriggerProps;
+type PopoverTriggerProps = PopoverPrimitive.TriggerProps & React.RefAttributes<PopoverPrimitive.TriggerRef>;
+/** What a `PopoverTrigger` ref holds: the pressable plus `open()` / `close()`. */
+type PopoverTriggerRef = PopoverPrimitive.TriggerRef;
 declare function PopoverTrigger({ disabled, ...props }: PopoverTriggerProps): React.JSX.Element;
 interface PopoverContentProps extends PopoverPrimitive.ContentProps {
     /**
      * Optional portal host name for custom portal mounting
      */
     portalHost?: string;
+    /**
+     * Scroll the children once they outgrow the room on the popover's side
+     * (default). Pass `false` for content that brings its own list: a `FlatList`
+     * inside a vertical ScrollView warns. The height cap still applies, but the
+     * popover can no longer measure its full height, so it stays on `side`.
+     */
+    scrollable?: boolean;
 }
 /**
  * Popover Content Component
- * The content that appears in the popover overlay
- * Supports smart positioning, animations, and theme integration
+ * The content that appears in the popover overlay. `side` is a preference: on
+ * native the popover opens on the other side when the content does not fit
+ * and there is more room there, caps its height to the room, and scrolls.
+ * A `style` merges over the themed surface; `insets` default to the safe area.
  */
-declare function PopoverContent({ side, align, sideOffset, portalHost, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverContent({ portalHost, insets, ...props }: PopoverContentProps): React.JSX.Element;
 /**
  * Popover Header Component
  * Optional header section for the popover content
@@ -62,3 +74,4 @@ type PopoverComponent = typeof PopoverRoot & {
  */
 declare const Popover: PopoverComponent;
 export { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter, };
+export type { PopoverTriggerRef };

package/dist/components/Popover.js

@@ -1,14 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext } from "./StyledText.context";
+import { TextClassContext, TextColorContext } from "./StyledText.context.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { resolvePopoverPlacement } from "../lib/popoverPlacement.js";
 import * as PopoverPrimitive from "@rn-primitives/popover";
 import * as React from "react";
-import { Animated, Platform, StyleSheet, View } from "react-native";
+import { Animated, Dimensions, Platform, ScrollView, StyleSheet, View, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { palette } from "../constants/colors.js";
+// The overlay layer covers the screen but must not swallow touches around the
+// content; a style, not the deprecated `pointerEvents` prop (web warns and
+// lazily loads its warning module mid-render).
+const styles = /*#__PURE__*/ StyleSheet.create({
+    passThrough: { pointerEvents: "box-none" },
+});
 function PopoverTrigger({ disabled, ...props }) {
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!disabled,
@@ -22,15 +30,69 @@ function PopoverTrigger({ disabled, ...props }) {
  * On Android/Web, uses Fragment to avoid unnecessary nesting
  */
 const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+/**
+ * Radix measures the viewport room on web and exposes it on the content
+ * element; the primitive's web Content applies no size cap of its own.
+ */
+const WEB_PLACEMENT_STYLE = {
+    maxWidth: "var(--radix-popover-content-available-width)",
+    maxHeight: "var(--radix-popover-content-available-height)",
+};
+const claimNoTouch = () => false;
 /**
  * Popover Content Component
- * The content that appears in the popover overlay
- * Supports smart positioning, animations, and theme integration
+ * The content that appears in the popover overlay. `side` is a preference: on
+ * native the popover opens on the other side when the content does not fit
+ * and there is more room there, caps its height to the room, and scrolls.
+ * A `style` merges over the themed surface; `insets` default to the safe area.
  */
-function PopoverContent({ side, align = "center", sideOffset = 4, portalHost, ...props }) {
-    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+function PopoverContent({ portalHost, insets, ...props }) {
+    const { theme, getContrastingColor } = useTheme();
+    const safeAreaInsets = useSafeAreaInsets();
     // Calculate text color for popover content based on background
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
+    const card = (_jsx(AnimatedView, { type: "fade", enterDuration: 200, style: [StyleSheet.absoluteFill, styles.passThrough], collapsable: false, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(PopoverCard, { insets: insets ?? safeAreaInsets, ...props }) }) }) }));
+    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: Platform.OS === "web" ? (_jsx(PopoverPrimitive.Overlay, { children: card })) : (_jsxs(_Fragment, { children: [_jsx(PopoverPrimitive.Overlay, { style: StyleSheet.absoluteFill }), card] })) }) }));
+}
+/**
+ * The positioned card. Rendered inside the portal, so it mounts on open and
+ * its measurements start fresh every time.
+ */
+function PopoverCard({ side, align = "center", sideOffset = 4, insets, avoidCollisions = true, scrollable = true, style, children, testID, ...props }) {
+    const { theme, getShadowStyle } = useTheme();
+    const { triggerPosition, contentLayout } = PopoverPrimitive.useRootContext();
+    const [scrollFrameHeight, setScrollFrameHeight] = React.useState();
+    const [scrollContentHeight, setScrollContentHeight] = React.useState();
+    const isWeb = Platform.OS === "web";
+    const wrapsInScroll = scrollable && !props.asChild;
+    // The card's own chrome (padding, border) plus the uncapped scroll content.
+    const naturalHeight = wrapsInScroll &&
+        contentLayout &&
+        scrollFrameHeight !== undefined &&
+        scrollContentHeight !== undefined
+        ? contentLayout.height - scrollFrameHeight + scrollContentHeight
+        : undefined;
+    let placementSide = side;
+    let placementStyle = WEB_PLACEMENT_STYLE;
+    if (!isWeb) {
+        const placement = resolvePopoverPlacement({
+            side,
+            sideOffset,
+            trigger: triggerPosition ?? null,
+            screenHeight: Dimensions.get("screen").height,
+            insets: insets ?? {},
+            naturalHeight,
+            avoidCollisions,
+        });
+        placementSide = placement.side;
+        // Hide the first measured frame while it may still flip. The key is
+        // omitted otherwise, so the primitive's hidden-until-measured style holds.
+        const mayStillFlip = wrapsInScroll && avoidCollisions && !!triggerPosition && naturalHeight === undefined;
+        placementStyle = {
+            ...(placement.maxHeight !== undefined ? { maxHeight: placement.maxHeight } : null),
+            ...(mayStillFlip ? { opacity: 0 } : null),
+        };
+    }
     const contentStyle = StyleSheet.flatten([
         {
             backgroundColor: theme.colors.popover,
@@ -40,8 +102,10 @@ function PopoverContent({ side, align = "center", sideOffset = 4, portalHost, ..
             padding: spacing.xs,
             ...getShadowStyle("soft"),
         },
+        placementStyle,
+        style,
     ]) ?? undefined;
-    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(PopoverPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(PopoverPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }));
+    return (_jsx(PopoverPrimitive.Content, { side: placementSide, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: avoidCollisions, testID: testID, ...(isWeb ? null : { onStartShouldSetResponder: claimNoTouch }), ...props, style: contentStyle, children: wrapsInScroll ? (_jsx(ScrollView, { testID: testID ? `${testID}-scroll` : undefined, alwaysBounceVertical: false, keyboardShouldPersistTaps: "handled", onLayout: (event) => setScrollFrameHeight(event.nativeEvent.layout.height), onContentSizeChange: (_width, height) => setScrollContentHeight(height), children: children })) : (children) }));
 }
 function PopoverHeader({ children, style, ...props }) {
     const { theme } = useTheme();

package/dist/components/Progress.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
 // ============================================================================
 // Constants
 // ============================================================================
@@ -55,12 +57,12 @@ function DeterminateFill({ value, fillColor, height, borderRadius, reduceMotion,
     // Animate scaleX (GPU compositor) instead of width (JS-thread layout each
     // frame). transformOrigin "left" grows the fill from the left edge, so a
     // full-width bar scaled by clamped/100 needs no container measurement.
-    const scaleX = useRef(new Animated.Value(0)).current;
+    const scaleX = useAnimatedValue(0);
     useEffect(() => {
         Animated.timing(scaleX, {
             toValue: clamped / 100,
             duration: reduceMotion ? 0 : 300,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [clamped, reduceMotion, scaleX]);
     return (_jsx(Animated.View, { style: [
@@ -75,7 +77,7 @@ function DeterminateFill({ value, fillColor, height, borderRadius, reduceMotion,
         ] }));
 }
 function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
-    const opacity = useRef(new Animated.Value(reduceMotion ? 0.7 : 0.4)).current;
+    const opacity = useAnimatedValue(reduceMotion ? 0.7 : 0.4);
     useEffect(() => {
         if (reduceMotion) {
             opacity.setValue(0.7);
@@ -86,12 +88,12 @@ function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
             Animated.timing(opacity, {
                 toValue: 1,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: shouldUseNativeDriver,
             }),
             Animated.timing(opacity, {
                 toValue: 0.4,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: shouldUseNativeDriver,
             }),
         ]));
         animation.start();

package/dist/components/RadioGroup.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useEffect, useRef, useState } from "react";
+import React, { createContext, use, useEffect } from "react";
 import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { hapticLight } from "../lib/haptics.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 RadioGroupPrimitive from "@rn-primitives/radio-group";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -60,38 +64,20 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
     const { size, error, value: groupValue, onValueChange } = useRadioGroupContext();
     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();
     const isChecked = groupValue === itemValue;
     // Animated dot scale — follows Checkbox opacity pattern
-    const dotScale = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
+    const dotScale = useAnimatedValue(isChecked ? 1 : 0);
     useEffect(() => {
         Animated.timing(dotScale, {
             toValue: isChecked ? 1 : 0,
             duration: reduceMotion ? 0 : 60,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [isChecked, reduceMotion, dotScale]);
     // Border color follows Checkbox pattern
@@ -101,48 +87,65 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
             ? theme.colors.primary
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const radioElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
-                ...styles.radio,
-                borderColor,
-                backgroundColor: theme.colors.background,
-                borderRadius: sizeConfig.outer / 2,
-                borderWidth: sizeConfig.borderWidth,
-                width: sizeConfig.outer,
-                height: sizeConfig.outer,
-                opacity: disabled ? 0.5 : 1,
+    // The primitive Item is the ONE control; the drawn circle is a child so the
+    // control can be bigger than it looks. `hitSlop` is inert on web, where a
+    // 16/20px circle sits under the 24px WCAG 2.5.8 minimum: the control grows
+    // to `spacing.minTarget` and takes the extra back in negative margins.
+    const hitSize = Platform.OS === "web" ? Math.max(sizeConfig.outer, spacing.minTarget) : sizeConfig.outer;
+    const hitOverflow = (hitSize - sizeConfig.outer) / 2;
+    // The label text names the control on every platform; no `useId` link (ids
+    // do not survive Expo Router's streamed hydration — see hooks/useHydrated).
+    const labelLink = label !== undefined ? { accessibilityLabel: label } : undefined;
+    const radioElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(RadioGroupPrimitive.Item, { ...labelLink, ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, 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, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
-                    { transform: [{ scale: dotScale }] },
-                    {
-                        width: sizeConfig.inner,
-                        height: sizeConfig.inner,
-                        borderRadius: sizeConfig.inner / 2,
-                        backgroundColor: theme.colors.primary,
-                    },
-                ] }) }) }));
+            }, hitSlop: DEFAULT_HIT_SLOP, children: _jsx(View, { style: {
+                    ...styles.radio,
+                    borderColor,
+                    backgroundColor: theme.colors.background,
+                    borderRadius: sizeConfig.outer / 2,
+                    borderWidth: sizeConfig.borderWidth,
+                    width: sizeConfig.outer,
+                    height: sizeConfig.outer,
+                    opacity: disabled ? 0.5 : 1,
+                    ...(focused && !disabled ? focusRingStyle : null),
+                    ...(flattenedStyle || {}),
+                }, children: _jsx(Animated.View, { style: [
+                        { transform: [{ scale: dotScale }] },
+                        {
+                            width: sizeConfig.inner,
+                            height: sizeConfig.inner,
+                            borderRadius: sizeConfig.inner / 2,
+                            backgroundColor: theme.colors.primary,
+                        },
+                    ] }) }) }) }));
     // If no label, return just the radio button
     if (!label) {
         return radioElement;
     }
-    // With label, wrap in a pressable row — tapping the label selects the item
+    // With a label, a non-accessible wrapper extends the tap area to the text;
+    // the primitive Item above stays the only radio a screen reader meets, and
+    // it carries the label text as its name.
     return (_jsxs(Pressable, { onPress: () => {
             if (!disabled) {
                 hapticLight();
                 onValueChange(itemValue);
             }
-        }, style: [styles.container, labelStyle], disabled: disabled, accessibilityRole: "radio", accessibilityState: {
-            checked: isChecked,
-            disabled: !!disabled,
-        }, accessibilityLabel: label, children: [radioElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: [
+        }, style: [styles.container, labelStyle], disabled: disabled, accessible: false, focusable: false, children: [radioElement, _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",
+    },
     radio: {
         justifyContent: "center",
         alignItems: "center",
@@ -160,7 +163,7 @@ const styles = StyleSheet.create({
         fontSize: 14,
     },
     disabledLabel: {
-        opacity: 0.5,
+        opacity: interaction.disabledOpacity,
     },
     required: {
         fontWeight: "bold",

package/dist/components/Screen.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import { type ScrollViewProps, type StyleProp, type ViewStyle } from "react-native";
+export type ScreenEdge = "top" | "bottom" | "left" | "right";
+export type ScreenEdges = ReadonlyArray<ScreenEdge>;
+export interface ScreenProps {
+    /**
+     * Which safe-area edges this screen owns. Required, with no default, so a
+     * screen never pads an edge a navigator already insets: under a Stack header
+     * pass `["bottom"]`; above a tab bar `["top"]`; inside a modal or form sheet
+     * `["bottom"]`; a headerless full screen `["top", "bottom"]`; `[]` when the
+     * navigator owns both.
+     */
+    edges: ScreenEdges;
+    /**
+     * `true` renders a `ScrollView` and puts the inset padding on its content
+     * container, so content starts clear of the island / home indicator but
+     * scrolls under them. `false` (default) renders a `View` padded on itself.
+     */
+    scroll?: boolean;
+    /** Extra `ScrollView` props when `scroll` is set (`refreshControl`, `keyboardShouldPersistTaps`, …). */
+    scrollProps?: Omit<ScrollViewProps, "style" | "contentContainerStyle" | "children">;
+    /**
+     * The screen's one horizontal inset, `spacing.screenPadding` (16), plus the
+     * left/right safe-area insets when those edges are named. `false` for
+     * full-bleed content such as `ItemGroup` rows, which carry their own 16.
+     * @default true
+     */
+    padded?: boolean;
+    /** Style of the outer View / ScrollView (defaults to `flex: 1` on the theme background). */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Content padding and layout. Its `padding*` values are added to the safe-area
+     * insets (`paddingBottom: 48` on a 34 pt home indicator gives 82), never
+     * replaced by them. On the `View` variant it merges into `style`.
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    testID?: string;
+}
+/**
+ * Screen
+ *
+ * The page container: safe-area insets on the edges the screen owns, the one
+ * 16 pt horizontal inset, and the theme background under all of it. Insets
+ * come from `useWindowInsets`, so a screen inside a modal or a native sheet
+ * still clears the home indicator.
+ *
+ * @example
+ * ```tsx
+ * // Under a Stack header, above no tab bar
+ * <Screen edges={["bottom"]} scroll contentContainerStyle={{ paddingBottom: spacing.xxl }}>
+ *   …
+ * </Screen>
+ *
+ * // Headerless, full-bleed rows
+ * <Screen edges={["top", "bottom"]} padded={false}>
+ *   <ItemGroup title="Account">…</ItemGroup>
+ * </Screen>
+ * ```
+ */
+export declare function Screen({ edges, scroll, scrollProps, padded, style, contentContainerStyle, children, testID, }: ScreenProps): React.JSX.Element;

package/dist/components/Screen.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScrollView, StyleSheet, View, } from "react-native";
+import { useTheme } from "../hooks/useTheme.js";
+import { useWindowInsets } from "../hooks/useWindowInsets.js";
+import { spacing } from "../constants/spacing.js";
+/** The caller's padding on one edge, honouring the `padding` / `paddingVertical` / `paddingHorizontal` shorthands. */
+function ownPadding(style, key) {
+    if (!style)
+        return 0;
+    const axis = key === "paddingTop" || key === "paddingBottom" ? style.paddingVertical : style.paddingHorizontal;
+    const value = style[key] ?? axis ?? style.padding;
+    return typeof value === "number" ? value : 0;
+}
+/**
+ * Screen
+ *
+ * The page container: safe-area insets on the edges the screen owns, the one
+ * 16 pt horizontal inset, and the theme background under all of it. Insets
+ * come from `useWindowInsets`, so a screen inside a modal or a native sheet
+ * still clears the home indicator.
+ *
+ * @example
+ * ```tsx
+ * // Under a Stack header, above no tab bar
+ * <Screen edges={["bottom"]} scroll contentContainerStyle={{ paddingBottom: spacing.xxl }}>
+ *   …
+ * </Screen>
+ *
+ * // Headerless, full-bleed rows
+ * <Screen edges={["top", "bottom"]} padded={false}>
+ *   <ItemGroup title="Account">…</ItemGroup>
+ * </Screen>
+ * ```
+ */
+export function Screen({ edges, scroll = false, scrollProps, padded = true, style, contentContainerStyle, children, testID, }) {
+    const { theme } = useTheme();
+    const insets = useWindowInsets();
+    const has = (edge) => edges.includes(edge);
+    const own = StyleSheet.flatten(contentContainerStyle);
+    const horizontal = padded ? spacing.screenPadding : 0;
+    // Every edge the caller pads or the screen owns gets one resolved value:
+    // the caller's spacing plus the inset. Edges neither side touches stay
+    // unset so a caller style can still use shorthands for them.
+    const padding = {};
+    const top = ownPadding(own, "paddingTop") + (has("top") ? insets.top : 0);
+    const bottom = ownPadding(own, "paddingBottom") + (has("bottom") ? insets.bottom : 0);
+    const left = ownPadding(own, "paddingLeft") + horizontal + (has("left") ? insets.left : 0);
+    const right = ownPadding(own, "paddingRight") + horizontal + (has("right") ? insets.right : 0);
+    if (has("top") || own?.paddingTop !== undefined || own?.paddingVertical !== undefined || own?.padding !== undefined)
+        padding.paddingTop = top;
+    if (has("bottom") || own?.paddingBottom !== undefined || own?.paddingVertical !== undefined || own?.padding !== undefined)
+        padding.paddingBottom = bottom;
+    if (left)
+        padding.paddingLeft = left;
+    if (right)
+        padding.paddingRight = right;
+    const base = { flex: 1, backgroundColor: theme.colors.background };
+    if (scroll) {
+        return (_jsx(ScrollView, { style: [base, style], contentContainerStyle: [own, padding], testID: testID, ...scrollProps, children: children }));
+    }
+    return (_jsx(View, { style: [base, own, padding, style], testID: testID, children: children }));
+}

package/dist/components/SectionHeader.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
-import { type TextProps } from "./StyledText";
+import { type TextProps } from "./StyledText.js";
 type TextPassthroughProps = Omit<TextProps, "style" | "children"> & {
     style?: StyleProp<TextStyle>;
 };