@mrmeg/expo-ui 0.27.0 → 0.28.0

package/dist/components/Accordion.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Animated, Platform, Pressable, View } from "react-native";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
 import { spacing } from "../constants/spacing.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
 import * as AccordionPrimitive from "@rn-primitives/accordion";
 function normalizeSingleValue(value) {
     return value ?? "";
@@ -98,21 +101,22 @@ const Trigger = Platform.OS === "web" ? View : Pressable;
  * Includes animated chevron icon
  */
 function AccordionTrigger({ children, style: styleOverride, disabled, ...props }) {
-    const { theme } = useTheme();
+    const { theme, getFocusRingStyle } = useTheme();
     const reduceMotion = useReducedMotion();
     const { isExpanded } = AccordionPrimitive.useItemContext();
-    const rotation = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+    const rotation = useAnimatedValue(isExpanded ? 1 : 0);
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!disabled,
         scaleTo: 0.97,
         haptic: false,
     });
+    const focus = useFocusVisible();
     useEffect(() => {
         const target = isExpanded ? 1 : 0;
         Animated.timing(rotation, {
             toValue: target,
             duration: reduceMotion ? 0 : isExpanded ? 200 : 150,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [isExpanded, reduceMotion, rotation]);
     const chevronStyle = {
@@ -125,7 +129,7 @@ function AccordionTrigger({ children, style: styleOverride, disabled, ...props }
             },
         ],
     };
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(AccordionPrimitive.Header, { children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(AccordionPrimitive.Trigger, { ...props, disabled: disabled, asChild: true, children: _jsxs(Trigger, { onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: [
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(AccordionPrimitive.Header, { children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(AccordionPrimitive.Trigger, { ...props, disabled: disabled, asChild: true, children: _jsxs(Trigger, { onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: focus.onFocus, onBlur: focus.onBlur, style: [
                                 {
                                     flexDirection: "row",
                                     alignItems: "center",
@@ -136,8 +140,10 @@ function AccordionTrigger({ children, style: styleOverride, disabled, ...props }
                                     ...(Platform.OS === "web" && {
                                         cursor: "pointer",
                                         userSelect: "none",
+                                        outlineStyle: "none",
                                     }),
                                 },
+                                focus.focused && !disabled && getFocusRingStyle(),
                                 // Spread array styles from primitives to prevent nested arrays on web
                                 ...(styleOverride && typeof styleOverride !== "function"
                                     ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])

package/dist/components/AnimatedView.d.ts

@@ -51,5 +51,5 @@ interface AnimatedViewProps extends ViewProps {
  * </AnimatedView>
  * ```
  */
-export declare function AnimatedView({ children, type, enterDuration, delay, style, ...props }: AnimatedViewProps): React.JSX.Element;
+export declare function AnimatedView({ children, type, enterDuration, delay, style, pointerEvents, ...props }: AnimatedViewProps): React.JSX.Element;
 export {};

package/dist/components/AnimatedView.js

@@ -29,11 +29,14 @@ import { useStaggeredEntrance } from "../hooks/useStaggeredEntrance.js";
  * </AnimatedView>
  * ```
  */
-export function AnimatedView({ children, type = "fade", enterDuration = 200, delay = 0, style, ...props }) {
+export function AnimatedView({ children, type = "fade", enterDuration = 200, delay = 0, style, pointerEvents, ...props }) {
     const entranceStyle = useStaggeredEntrance({
         type,
         delay,
         duration: enterDuration,
     });
-    return (_jsx(Animated.View, { style: [style, entranceStyle], ...props, children: children }));
+    // The `pointerEvents` prop is deprecated on web (react-native-web warns and
+    // lazily loads its warning module mid-render, which overflowed the first SSR
+    // render of deep routes); keep accepting it for consumers, but as a style.
+    return (_jsx(Animated.View, { style: [style, pointerEvents ? { pointerEvents } : null, entranceStyle], ...props, children: children }));
 }

package/dist/components/Avatar.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { type ImageSourcePropType, type StyleProp, type ViewStyle } from "react-native";
-import { type IconName } from "./Icon";
+import { type IconName } from "./Icon.js";
 /** Named size tokens, or an explicit pixel diameter. */
 export type AvatarSize = "sm" | "md" | "lg" | number;
 export type AvatarShape = "circle" | "square";

package/dist/components/Avatar.js

@@ -223,7 +223,7 @@ const SIZE_TOKEN_FOR_PX = {
 // Geometry carries no theme values, so a plain module-scope sheet is enough to
 // get these rules into the prerendered <head>. Only colors go through
 // createThemedStyles below. See "Enable Server Output" in docs/server-guide.md.
-const geometry = StyleSheet.create({
+const geometry = /*#__PURE__*/ StyleSheet.create({
     base: {
         alignItems: "center",
         justifyContent: "center",
@@ -297,5 +297,5 @@ const createStyles = (theme) => StyleSheet.create({
         color: theme.colors.accentForeground,
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);
 export { Avatar, AvatarGroup };

package/dist/components/Badge.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { View, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
+import { shapeRadius, useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
@@ -21,6 +22,8 @@ import { createThemedStyles } from "../lib/themedStyles.js";
 function Badge({ children, text, variant = "default", style: styleOverride }) {
     const { theme } = useTheme();
     const styles = themedStyles(theme);
+    // Host-app `setShape({ badge })`; the default is a pill.
+    const badgeRadius = shapeRadius(useShape("badge"));
     const badgeContent = text ?? children;
     const textStyle = [
         styles.text,
@@ -43,6 +46,7 @@ function Badge({ children, text, variant = "default", style: styleOverride }) {
     }));
     return (_jsx(View, { accessibilityRole: "text", style: [
             styles.badge,
+            badgeRadius,
             variant === "default" && styles.default,
             variant === "secondary" && styles.secondary,
             variant === "outline" && styles.outline,
@@ -75,5 +79,5 @@ const createStyles = (theme) => StyleSheet.create({
         userSelect: "none",
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);
 export { Badge };

package/dist/components/BottomSheet.d.ts

@@ -20,8 +20,18 @@ import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
  * nothing in JS can measure the column in screen space (`measureInWindow`
  * inside the `layoutRoot` sheet host reports host-relative coordinates), and a
  * window-height estimate would lift a lifted sheet twice. Android: Material3's
- * `ModalBottomSheet` owns it (no JS keyboard signal exists inside the Compose
- * dialog window). Web: none. Never nest a `KeyboardAvoidingView` in a sheet.
+ * `ModalBottomSheet` shrinks the sheet with `imePadding()`, `@expo/ui`'s
+ * `RNHostView` re-reports its Compose size to the shadow tree, and the
+ * `flexGrow: 1, height: 0` column the host wraps our children in follows, so
+ * `Footer` and the tail of `Body` stay above the keyboard. That report is
+ * delivered reliably only by `expo-modules-core` >= 57.0.4 (expo/expo#47778,
+ * fixed by #47810): older cores flushed it from a pre-draw listener on the
+ * activity window, which does not draw while the sheet's dialog window animates
+ * the IME, so the column kept its detent height until the activity redrew. The
+ * package warns once in dev on Android below that floor
+ * (`bottomSheetHostSupport.ts`). No JS keyboard signal exists inside the
+ * Compose dialog window, and none is needed. Web: none. Never nest a
+ * `KeyboardAvoidingView` in a sheet.
  *
  * Platform-owned behaviors (props accepted for ergonomics, but the platform
  * decides):
@@ -37,7 +47,31 @@ import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
  *   - `Body` sets `keyboardShouldPersistTaps="always"` on its ScrollView so RN's
  *     own tap-dismissal never claims the first tap on a chip, button or field
  *     while a sheet field is focused; the `Content` boundary owns tap-away
- *     dismissal instead.
+ *     dismissal instead. That covers ScrollViews *inside* the sheet only. The
+ *     sheet's content is drawn in another native window but stays in the
+ *     screen's React tree, and RN's responder negotiation walks that tree, so a
+ *     ScrollView *around* the `BottomSheet` with the default
+ *     `keyboardShouldPersistTaps="never"` claims a tap on any sheet control
+ *     (`Footer` included) in the capture phase once a field is focused and
+ *     blurs the field on release: the keyboard closes and the control never
+ *     fires (Pixel_10 / API 36: 0 of 3 taps inside a default ScrollView, 3 of 3
+ *     inside `always` or a plain View). Nothing inside the tree can preempt a
+ *     capture-phase claim, so `Content` warns once in dev on Android when it
+ *     observes one (`useAncestorClaimWarning`); the remedy is
+ *     `keyboardShouldPersistTaps="always"` / `"handled"` on scroll views that
+ *     contain a sheet, or `DismissKeyboard`, which already sets it.
+ *
+ * Dismiss completion: `onDismissed` (root prop) fires once per close after the
+ * sheet is fully gone, so the next modal (an RN `Modal`-backed `Dialog`, a
+ * native stack modal) can be presented from it without UIKit rejecting the
+ * presentation while the sheet is still animating out. iOS: `@expo/ui` raises
+ * its close callback from the native `onDismiss` event of SwiftUI
+ * `.sheet(isPresented:onDismiss:)`, which runs after the dismissal transition.
+ * Android: `@expo/ui` raises it after Material's hide animation for a swipe /
+ * back / scrim dismissal, and with the removal of the Compose sheet for a
+ * prop-driven close (which has no exit animation). Web: `@expo/ui` raises it
+ * before its exit animation, so the package waits for the HTML `<dialog>`'s
+ * `close` event instead (`bottomSheetDismiss.ts`).
  *
  * Scrollable bodies: the native sheet doesn't bound the hosted RN content to
  * the detent height, so a tall `Body` overflows and clips its footer/tail. When
@@ -94,12 +128,28 @@ interface BottomSheetContextValue {
     /** Whether a `Footer` is mounted, so `Body` can own the bottom safe-area inset when it isn't. */
     hasFooter: boolean;
     setHasFooter: (present: boolean) => void;
+    /** Called by `Content` once the native sheet has fully dismissed; invokes the root's `onDismissed`. */
+    notifyDismissed: () => void;
 }
 interface BottomSheetProps {
     /** Controlled open state. Omit to use uncontrolled mode with `defaultOpen`. */
     open?: boolean;
     /** Callback when open state changes. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Called once per close, after the sheet has fully dismissed on every
+     * platform. Present the next modal (a `Dialog`, a native stack modal) from
+     * here rather than from `onOpenChange(false)` or a timer: on iOS the
+     * `UISheetPresentationController` is still dismissing when `onOpenChange`
+     * fires, and a `Modal` presented then is rejected ("already presenting")
+     * without retry. Detection — iOS: `@expo/ui`'s native `onDismiss` event
+     * (SwiftUI `.sheet(onDismiss:)`, after the transition). Android: `@expo/ui`'s
+     * close callback (after Material's hide animation for swipe / back / scrim; a
+     * prop-driven close removes the Compose sheet with no exit animation). Web:
+     * the HTML `<dialog>`'s `close` event, which `@expo/ui` raises when its exit
+     * animation ends.
+     */
+    onDismissed?: () => void;
     /** Initial open state for uncontrolled mode. Default: false. */
     defaultOpen?: boolean;
     /** Snap point heights (px or percentage strings). Default: ["50%"]. */
@@ -138,11 +188,12 @@ interface BottomSheetContentProps extends ViewProps {
     /** Accepted for call-site ergonomics; ignored (platform owns keyboard). */
     dismissKeyboardOnDrag?: boolean;
     /**
-     * Style for the native sheet surface behind the RN content — the web (vaul)
-     * panel, Android `containerColor`, iOS `presentationBackground`. Merged over
-     * the themed card default, so `{ backgroundColor: "transparent" }` lets a
-     * custom chrome (e.g. a glass backdrop) show through. The RN content column
-     * paints its own card fill too; clear that via `style`.
+     * Style for the native sheet surface — the web (vaul) panel, Android
+     * `containerColor`, iOS `presentationBackground`. Merged over the themed card
+     * default. This is the sheet's only background: the RN content column paints
+     * no fill of its own, so a translucent color here reads as one layer from the
+     * grabber down, and `{ backgroundColor: "transparent" }` lets custom chrome
+     * (e.g. a glass backdrop) show through with nothing to clear via `style`.
      */
     backgroundStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
@@ -165,8 +216,14 @@ interface BottomSheetCloseProps {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
+/**
+ * Dev warning (Android) when an ancestor claimed a tap inside the sheet before
+ * the sheet was asked, while a package field held focus. See the header and
+ * `useAncestorClaimWarning`.
+ */
+export declare const bottomSheetAncestorClaimWarning: string;
 declare function useBottomSheetContext(): BottomSheetContextValue;
-declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): React.JSX.Element;
+declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, onDismissed, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): React.JSX.Element;
 declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): React.JSX.Element;
 declare function BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, testID, children, }: BottomSheetContentProps): React.JSX.Element;
 declare function BottomSheetHandle({ style }: BottomSheetHandleProps): React.JSX.Element;

package/dist/components/BottomSheet.js

@@ -1,15 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import React, { createContext, use, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
 import { View, Pressable, StyleSheet, ScrollView, Platform, Animated, useWindowDimensions, } from "react-native";
 import { BottomSheet as NativeBottomSheet } from "@expo/ui/community/bottom-sheet";
-import { useSafeAreaInsets, initialWindowMetrics } from "react-native-safe-area-context";
+import { useWindowInsets } from "../hooks/useWindowInsets.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
 import { useScalePress } from "../hooks/useScalePress.js";
-import { TextColorContext, TextClassContext } from "./StyledText.context";
+import { TextColorContext, TextClassContext } from "./StyledText.context.js";
 import { Icon } from "./Icon.js";
-import { useKeyboardDismissResponder } from "./keyboardDismiss.js";
+import { useAncestorClaimWarning, useKeyboardDismissResponder } from "./keyboardDismiss.js";
+import { warnIfBottomSheetHostDropsResize } from "./bottomSheetHostSupport.js";
+import { awaitDialogClose } from "./bottomSheetDismiss.js";
 const DEFAULT_SNAP_POINTS = ["50%"];
+/**
+ * UIKit keeps a `.large` sheet's top edge 10 pt below the top safe-area inset;
+ * SwiftUI's `.fraction()` detents are fractions of the height that remains.
+ */
+const IOS_SHEET_TOP_GAP = 10;
+/**
+ * `@expo/ui` pads the hosted RN column 16 pt below the native drag indicator
+ * (`paddingTop: 16` in its iOS `BottomSheet` when `handleComponent !== null`).
+ */
+const IOS_HOST_HANDLE_PADDING = 16;
 function clampSnapIndex(index, maxSnapIndex) {
     return Math.min(Math.max(index, 0), maxSnapIndex);
 }
@@ -86,6 +99,18 @@ function bottomSheetRootReducer(state, action) {
 // ============================================================================
 // Context
 // ============================================================================
+/**
+ * Dev warning (Android) when an ancestor claimed a tap inside the sheet before
+ * the sheet was asked, while a package field held focus. See the header and
+ * `useAncestorClaimWarning`.
+ */
+export const bottomSheetAncestorClaimWarning = "@mrmeg/expo-ui BottomSheet: an ancestor claimed a tap inside the sheet before the sheet " +
+    "was asked, while a sheet field was focused, so the tapped control did not fire and the " +
+    "keyboard was dismissed instead. That is usually a ScrollView around the BottomSheet on React " +
+    'Native\'s default keyboardShouldPersistTaps="never" (sheet content stays in the screen\'s ' +
+    "React tree even though it is drawn in another window). Set " +
+    'keyboardShouldPersistTaps="always" or "handled" on scroll views that contain the ' +
+    "BottomSheet, or wrap the screen in DismissKeyboard.";
 const BottomSheetContext = createContext(null);
 function useBottomSheetContext() {
     const context = use(BottomSheetContext);
@@ -95,23 +120,23 @@ function useBottomSheetContext() {
     return context;
 }
 /**
- * Safe-area insets for content *inside* the sheet.
- *
- * The native sheet (SwiftUI `.sheet()` / Material `ModalBottomSheet`) is
- * presented outside the React tree's `SafeAreaProvider`, so `useSafeAreaInsets()`
- * reads all-zero in here. Fall back to `initialWindowMetrics` — the same trick
- * the app uses for its full-screen Modals — so bottom padding actually clears
- * the home indicator and the last row of a scroll body is reachable.
+ * Safe-area insets for content *inside* the sheet. The native sheet (SwiftUI
+ * `.sheet()` / Material `ModalBottomSheet`) is presented outside the React
+ * tree's `SafeAreaProvider`, and inside a tab screen the provider context even
+ * carries the tab bar (83 pt on an iPhone with a home indicator), so the raw
+ * context is the wrong number here. `useWindowInsets` gives the window's
+ * insets; `top` sizes the iOS detent cap below. Both native hosts already lay
+ * the column out inside the safe area — SwiftUI keeps `RNHostView` 34 pt above
+ * the home indicator, and Material3's `ModalBottomSheet` applies the system
+ * bars as `contentWindowInsets`, so on an edge-to-edge Pixel the hosted column
+ * ends exactly at the navigation bar's top — so `bottom` is 0 on iOS and
+ * Android: padding it again pushed the footer up by the inset (measured 64 dp
+ * under Save instead of 40 on a Pixel 6a) and squeezed the body. Web is the
+ * kit's own overlay inside the React tree and keeps the window's bottom inset.
  */
 function useSheetInsets() {
-    const insets = useSafeAreaInsets();
-    const fallback = initialWindowMetrics?.insets;
-    return {
-        top: insets.top || fallback?.top || 0,
-        bottom: insets.bottom || fallback?.bottom || 0,
-        left: insets.left || fallback?.left || 0,
-        right: insets.right || fallback?.right || 0,
-    };
+    const insets = useWindowInsets();
+    return Platform.OS === "web" ? insets : { ...insets, bottom: 0 };
 }
 /**
  * Interactive (pull-down / backdrop) dismiss is off only when the consumer
@@ -147,7 +172,7 @@ function SheetCloseButton({ style }) {
                 {
                     width: spacing.xl,
                     height: spacing.xl,
-                    borderRadius: spacing.xl / 2,
+                    borderRadius: spacing.radiusFull,
                     alignItems: "center",
                     justifyContent: "center",
                     // Higher-contrast than `muted`: a solid `secondary` fill with a
@@ -163,7 +188,7 @@ function SheetCloseButton({ style }) {
 // ============================================================================
 // Root
 // ============================================================================
-function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints = DEFAULT_SNAP_POINTS, closeOnBackdropPress = true, children, }) {
+function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, onDismissed, defaultOpen = false, snapPoints = DEFAULT_SNAP_POINTS, closeOnBackdropPress = true, children, }) {
     const maxSnapIndex = Math.max(snapPoints.length - 1, 0);
     const [state, dispatch] = useReducer(bottomSheetRootReducer, undefined, () => createInitialRootState(defaultOpen, maxSnapIndex));
     const isControlled = controlledOpen !== undefined;
@@ -188,6 +213,16 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
         }
     }, [controlledOnOpenChange, isControlled, maxSnapIndex]);
     const toggle = useCallback(() => onOpenChange(!open), [onOpenChange, open]);
+    // Latest callback without re-creating the context value on every render.
+    // Synced after each commit (the sheet reports its dismissal from a native
+    // or DOM event, never during render) instead of written during render.
+    const onDismissedRef = useRef(onDismissed);
+    useLayoutEffect(() => {
+        onDismissedRef.current = onDismissed;
+    });
+    const notifyDismissed = useCallback(() => {
+        onDismissedRef.current?.();
+    }, []);
     const setScrollable = useCallback((scrollable) => {
         dispatch({ type: "setScrollable", scrollable });
     }, []);
@@ -212,6 +247,7 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
         setHasHeader,
         hasFooter: state.hasFooter,
         setHasFooter,
+        notifyDismissed,
     }), [
         open,
         onOpenChange,
@@ -227,6 +263,7 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
         setHasHeader,
         state.hasFooter,
         setHasFooter,
+        notifyDismissed,
     ]);
     return (_jsx(BottomSheetContext.Provider, { value: contextValue, children: children }));
 }
@@ -254,11 +291,15 @@ function BottomSheetTrigger({ asChild, children, style: styleOverride }) {
 function BottomSheetContent({ 
 // Accepted-but-ignored ergonomics props (platform owns these behaviors):
 swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, testID, children, }) {
-    const { open, onOpenChange, snapPoints, snapIndex, setSnapIndex, hasHeader } = useBottomSheetContext();
+    const { open, onOpenChange, snapPoints, snapIndex, setSnapIndex, hasHeader, notifyDismissed } = useBottomSheetContext();
     const { theme } = useTheme();
+    const sheetShape = useShape("sheet");
     const dismissDisabled = useDismissDisabled();
     const showClose = useShowClose();
     const { height: winH } = useWindowDimensions();
+    // Window insets (not the provider context, which reads zero inside the
+    // native sheet's window): the top inset sizes the iOS detent cap below.
+    const insets = useSheetInsets();
     // Tap-away keyboard dismissal inside the sheet. The native sheet (SwiftUI
     // `.sheet()` / Material `ModalBottomSheet`) hosts its RN children in a separate
     // native window via @expo/ui's `RNHostView`, OUTSIDE the app's
@@ -272,6 +313,15 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
     // dead-space tap dismisses on release only, through the registered field's
     // own window-independent blur handle.
     const dismissResponderProps = useKeyboardDismissResponder();
+    // Android, dev, once per session: name an ancestor ScrollView that claimed a
+    // tap inside the sheet in the capture phase (nothing in here can preempt it).
+    const columnResponderProps = useAncestorClaimWarning(dismissResponderProps, bottomSheetAncestorClaimWarning);
+    // Android only, dev only, once per session: name the host floor the column's
+    // keyboard avoidance depends on when the app was built against an
+    // `expo-modules-core` that drops `RNHostView`'s size update (see the header).
+    useEffect(() => {
+        warnIfBottomSheetHostDropsResize();
+    }, []);
     // Boolean open → native imperative index. The root resets snapIndex to the
     // highest point while closed; -1 keeps the native sheet closed.
     const index = open ? snapIndex : -1;
@@ -287,18 +337,35 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
     // and Material's `ModalBottomSheet` ignores percentage snap points
     // (partial / expanded only) — a window-percentage cap would leave the Body
     // short of the rendered sheet with a blank strip below it. Android therefore
-    // keeps `flex:1` alone (see the content column style).
+    // keeps `flex:1` alone (see the content column style). The same measured
+    // height is how the column follows the keyboard: Material shrinks the sheet
+    // with `imePadding()` and `RNHostView` re-reports its Compose size to the
+    // shadow tree, which needs `expo-modules-core` >= 57.0.4 to always land
+    // (expo/expo#47778) — see `warnIfBottomSheetHostDropsResize` above.
+    //
+    // The cap has to be the height SwiftUI really gives the sheet, not a share
+    // of the window. `@expo/ui` maps "50%" to `.fraction(0.5)`, a fraction of
+    // the *maximum* sheet height — the window minus the top safe-area inset
+    // minus UIKit's 10 pt gap above a `.large` sheet — and a numeric snap to
+    // `.height(n)`, clamped to that maximum. `@expo/ui` then pads the hosted
+    // column 16 pt below the native grabber whenever that grabber is shown. A
+    // cap of `fraction × window height` overshot by `fraction × (inset + 10) +
+    // 16` ≈ 52 pt on a Dynamic Island phone at 50 %, so the sheet clipped its
+    // last row on every such device.
+    const hasInteractiveHandle = containsHandle(children);
     const expandedSnap = snapPoints[snapPoints.length - 1];
-    const detentHeight = typeof expandedSnap === "number"
-        ? expandedSnap
-        : (parseFloat(expandedSnap) / 100) * winH;
+    const availableSheetHeight = winH - insets.top - IOS_SHEET_TOP_GAP;
+    const sheetHeight = typeof expandedSnap === "number"
+        ? Math.min(expandedSnap, availableSheetHeight)
+        : (parseFloat(expandedSnap) / 100) * availableSheetHeight;
+    const detentHeight = sheetHeight - (hasInteractiveHandle ? 0 : IOS_HOST_HANDLE_PADDING);
     // When there's no Header to host the X (so a close affordance is wanted —
     // dismiss is off, or the body scrolls), float one over the top-right corner.
     // A Header, when present, renders its own (see BottomSheetHeader).
     const showFloatingClose = showClose && !hasHeader;
-    const hasInteractiveHandle = containsHandle(children);
     const handleChange = (newIndex) => {
         // Native fires onChange(-1) on dismiss (swipe / backdrop / back button).
+        // The same close also reaches `handleNativeClose`, which owns `onDismissed`.
         if (newIndex < 0) {
             if (open)
                 onOpenChange(false);
@@ -306,30 +373,67 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
         }
         setSnapIndex(newIndex);
     };
+    // `onDismissed`: once per close. `@expo/ui` fires `onClose` once per close
+    // itself (post-dismissal on iOS and Android, see the header); the guard here
+    // is defensive and is re-armed when the sheet opens again. On web the close
+    // callback precedes the exit animation, so completion is the enclosing
+    // `<dialog>`'s `close` event, found from the content column's DOM node.
+    const columnRef = useRef(null);
+    const dismissedRef = useRef(false);
+    const cancelDismissWaitRef = useRef(null);
+    useEffect(() => {
+        if (open)
+            dismissedRef.current = false;
+    }, [open]);
+    useEffect(() => () => {
+        cancelDismissWaitRef.current?.();
+        cancelDismissWaitRef.current = null;
+    }, []);
+    const handleNativeClose = () => {
+        if (open)
+            onOpenChange(false);
+        if (dismissedRef.current)
+            return;
+        dismissedRef.current = true;
+        if (Platform.OS !== "web") {
+            notifyDismissed();
+            return;
+        }
+        cancelDismissWaitRef.current?.();
+        cancelDismissWaitRef.current = awaitDialogClose(columnRef.current, () => {
+            cancelDismissWaitRef.current = null;
+            notifyDismissed();
+        });
+    };
     return (_jsx(NativeBottomSheet, { index: index, snapPoints: snapPoints, 
         // The native indicator lives outside the hosted RN tree and cannot
         // receive JS presses. Hide it only when the compound Handle supplies the
         // interactive replacement; sheets without Handle retain native chrome.
-        handleComponent: hasInteractiveHandle ? null : undefined, enablePanDownToClose: !dismissDisabled, onChange: handleChange, onClose: () => {
-            if (open)
-                onOpenChange(false);
-        }, 
+        handleComponent: hasInteractiveHandle ? null : undefined, enablePanDownToClose: !dismissDisabled, onChange: handleChange, onClose: handleNativeClose, 
         // Themes the scrim/background on web (vaul), Android (containerColor),
         // and iOS (presentationBackground). Flattened so native readers that
         // expect a plain object (not a style array) keep working.
         backgroundStyle: StyleSheet.flatten([
             { backgroundColor: theme.colors.card },
+            // Host-app `setShape({ sheet })`: the top corners, where the platform
+            // lets the sheet draw them (web's drawer, Android). iOS system sheets
+            // keep the system corner radius.
+            sheetShape?.borderRadius !== undefined && {
+                borderTopLeftRadius: sheetShape.borderRadius,
+                borderTopRightRadius: sheetShape.borderRadius,
+            },
             backgroundStyleOverride,
-        ]), children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { testID: testID, style: [
-                        {
-                            flex: 1,
-                            // Themes the content surface across all platforms regardless of
-                            // native sheet chrome.
-                            backgroundColor: theme.colors.card,
-                        },
+        ]), children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { ref: columnRef, testID: testID, style: [
+                        // No fill of its own: the native surface (`backgroundStyle`) is
+                        // the sheet's only background. On iOS the hosted column starts
+                        // 16 pt below the sheet's top edge when the native grabber is
+                        // shown, so a second, column-level fill made a translucent card
+                        // read as two layers below that line and one above it — a
+                        // differently colored strip behind the grabber.
+                        { flex: 1 },
                         Platform.OS !== "android" && { maxHeight: detentHeight },
                         styleOverride,
-                    ], ...dismissResponderProps, children: [children, showFloatingClose && (_jsx(SheetCloseButton, { style: {
+                    ], ...columnResponderProps, children: [children, showFloatingClose && (_jsx(SheetCloseButton, { style: {
                                 // The sheet card sits below the status bar, so no top inset
                                 // is needed — just clear the sheet's own top edge / handle.
                                 position: "absolute",

package/dist/components/Button.d.ts

@@ -1,7 +1,7 @@
 import React, { ComponentType } from "react";
-import { PressableProps, PressableStateCallbackType, DimensionValue, StyleProp, TextStyle, ViewStyle } from "react-native";
-import { TextProps } from "./StyledText";
-import { type IconProps } from "./Icon";
+import { Pressable, PressableProps, PressableStateCallbackType, DimensionValue, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { TextProps } from "./StyledText.js";
+import { type IconProps } from "./Icon.js";
 /**
  * Button variants
  */
@@ -27,6 +27,12 @@ export interface ButtonAccessoryProps {
     disabled?: boolean;
 }
 export interface ButtonProps extends PressableProps {
+    /**
+     * Reaches the underlying `Pressable`. React 19 passes `ref` as a prop; the
+     * button composes it with its own host ref (web `aria-disabled`), so
+     * `asChild` slots and consumers keep theirs.
+     */
+    ref?: React.Ref<React.ComponentRef<typeof Pressable>>;
     /**
      * Text which is looked up via i18n.
      */
@@ -82,13 +88,23 @@ export interface ButtonProps extends PressableProps {
      */
     children?: React.ReactNode;
     /**
-     * disabled prop, accessed directly for declarative styling reasons.
+     * Blocks presses: no `onPress`, no scale, no haptic, dimmed, and out of the
+     * web tab order. To announce and dim a button that must stay pressable so
+     * the press can say why the action is unavailable ("Add a title first"),
+     * pass `aria-disabled` (or `accessibilityState={{ disabled: true }}`)
+     * instead — ARIA's contract: announced as disabled, still focusable, still
+     * fires `onPress`.
      */
     disabled?: boolean;
     /**
      * An optional style override for the disabled state
      */
     disabledStyle?: StyleProp<ViewStyle>;
+    /**
+     * Haptic on press-in. Omit it to follow the provider-level `haptics` setting
+     * (a light tap only under `"all"`); `true` always taps, `false` never does.
+     */
+    haptic?: boolean;
     /**
      * Whether to show shadow.
      * @default true for the `default` preset, `false` for every other preset.