@mrmeg/expo-ui 0.13.0-rsd.0 → 0.13.0

package/dist/components/BottomSheet.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { createContext, use, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, } from "react";
-import { Platform, ScrollView, useWindowDimensions, } from "react-native";
-import { css, html } from "react-strict-dom";
+import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef, useSyncExternalStore } from "react";
+import { View, Pressable, StyleSheet, ScrollView, Platform, useWindowDimensions, } from "react-native";
 import { BottomSheet as NativeBottomSheet } from "@expo/ui/community/bottom-sheet";
+import { KeyboardController } from "react-native-keyboard-controller";
 import { useSafeAreaInsets, initialWindowMetrics } from "react-native-safe-area-context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { Icon } from "./Icon.js";
-import { sanitizeWebStyle } from "../lib/styles.js";
-const IS_WEB = Platform.OS === "web";
+import { dismissKeyboardFocusedInput, hasKeyboardFocusedInput, subscribeKeyboardFocus, } from "./keyboardFocusRegistry.js";
 const DEFAULT_SNAP_POINTS = ["50%"];
 function clampSnapIndex(index, maxSnapIndex) {
     return Math.min(Math.max(index, 0), maxSnapIndex);
@@ -35,7 +33,12 @@ function bottomSheetRootReducer(state, action) {
                 state.snapDirection === snapDirection) {
                 return state;
             }
-            return { ...state, internalOpen: action.open, snapIndex, snapDirection };
+            return {
+                ...state,
+                internalOpen: action.open,
+                snapIndex,
+                snapDirection,
+            };
         }
         case "setScrollable":
             if (state.scrollable === action.scrollable)
@@ -54,7 +57,11 @@ function bottomSheetRootReducer(state, action) {
             const snapDirection = snapIndex === 0 ? 1 : snapIndex === action.maxSnapIndex ? -1 : state.snapDirection;
             if (state.snapIndex === snapIndex && state.snapDirection === snapDirection)
                 return state;
-            return { ...state, snapIndex, snapDirection };
+            return {
+                ...state,
+                snapIndex,
+                snapDirection,
+            };
         }
         case "cycleSnapPoint": {
             if (action.maxSnapIndex === 0)
@@ -68,7 +75,11 @@ function bottomSheetRootReducer(state, action) {
                 snapDirection = 1;
             if (state.snapIndex >= action.maxSnapIndex)
                 snapDirection = -1;
-            return { ...state, snapIndex: state.snapIndex + snapDirection, snapDirection };
+            return {
+                ...state,
+                snapIndex: state.snapIndex + snapDirection,
+                snapDirection,
+            };
         }
     }
 }
@@ -84,9 +95,13 @@ function useBottomSheetContext() {
     return context;
 }
 /**
- * Safe-area insets for content inside the sheet. The native sheet is presented
- * outside the React tree's SafeAreaProvider, so useSafeAreaInsets() reads zero;
- * fall back to initialWindowMetrics (the same trick the app uses for Modals).
+ * 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.
  */
 function useSheetInsets() {
     const insets = useSafeAreaInsets();
@@ -98,64 +113,95 @@ function useSheetInsets() {
         right: insets.right || fallback?.right || 0,
     };
 }
+/**
+ * Interactive (pull-down / backdrop) dismiss is off only when the consumer
+ * explicitly turned it off (`closeOnBackdropPress={false}`). Scrollable bodies
+ * keep swipe-to-dismiss: the native sheet coordinates the gesture itself (a pull
+ * at the top of the scroll view dismisses; elsewhere it scrolls), so there's no
+ * conflict to work around once the content column is height-bounded.
+ */
 function useDismissDisabled() {
     const { closeOnBackdropPress } = useBottomSheetContext();
     return !closeOnBackdropPress;
 }
+/**
+ * Whether to surface an explicit close affordance (the auto X). True when:
+ *   - swipe/backdrop dismiss is off (otherwise there'd be no way to close), or
+ *   - the body scrolls — so a long sheet always has a one-tap close without
+ *     hunting for a footer button or pulling the sheet down.
+ */
 function useShowClose() {
     const { scrollable } = useBottomSheetContext();
     return useDismissDisabled() || scrollable;
 }
 // ============================================================================
-// Shared slot pressable (asChild → clone+inject onPress, like Dialog/Drawer)
-// ============================================================================
-const slotStyles = css.create({
-    wrap: { display: "inline-flex", margin: 0, padding: 0, cursor: "pointer" },
-});
-function SlotPressable({ asChild, onActivate, ariaLabel, children, style, }) {
-    if (asChild && React.isValidElement(children)) {
-        const child = children;
-        return React.cloneElement(child, {
-            onPress: () => {
-                child.props.onPress?.();
-                onActivate();
-            },
-        });
-    }
-    return (_jsx(html.div, { role: "button", "aria-label": ariaLabel, onClick: onActivate, style: [slotStyles.wrap, sanitizeWebStyle(style)], children: children }));
-}
-// ============================================================================
-// Auto close button — shown when interactive dismiss is off / body scrolls
+// Auto close button — shown when interactive dismiss is off
 // ============================================================================
-const closeButtonStyles = css.create({
-    // spacing literals inlined: StyleX requires statically-resolvable values
-    // inside css.create (xl=32, md=16, sm=8, xs=4, touchTarget=44, radiusFull=9999).
-    base: (backgroundColor, borderColor) => ({
-        width: 32,
-        height: 32,
-        borderRadius: 16,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor,
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor,
-        margin: 0,
-        padding: 0,
-        appearance: "none",
-        cursor: "pointer",
-    }),
-});
 function SheetCloseButton({ style }) {
     const { onOpenChange } = useBottomSheetContext();
     const { theme } = useTheme();
-    return (_jsx(html.button, { type: "button", "aria-label": "Close", onClick: () => onOpenChange(false), style: [
-            closeButtonStyles.base(theme.colors.secondary, theme.colors.border),
-            sanitizeWebStyle(style),
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", onPress: () => onOpenChange(false), hitSlop: spacing.sm, style: ({ pressed }) => [
+            {
+                width: spacing.xl,
+                height: spacing.xl,
+                borderRadius: spacing.xl / 2,
+                alignItems: "center",
+                justifyContent: "center",
+                // Higher-contrast than `muted`: a solid `secondary` fill with a
+                // bordered edge so the control reads clearly against the card, and a
+                // full-strength `foreground` glyph instead of the faint muted one.
+                backgroundColor: theme.colors.secondary,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                opacity: pressed ? 0.7 : 1,
+            },
+            Platform.OS === "web" && { cursor: "pointer" },
+            style,
         ], children: _jsx(Icon, { name: "x", size: 22, color: "text" }) }));
 }
 // ============================================================================
+// Keyboard dismiss overlay — tap-away dismissal inside the sheet
+// ============================================================================
+/**
+ * Tap-away keyboard dismissal for sheet content.
+ *
+ * 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 `KeyboardProvider` / `KeyboardDismissBoundary`. Two consequences,
+ * both worked around here:
+ *
+ *  1. Detection: `react-native-keyboard-controller`'s `useKeyboardState` watches
+ *     the main window and does NOT see a keyboard raised inside the sheet's
+ *     window (the same isolation that makes `useSafeAreaInsets()` read zero in
+ *     here). So presence is read from the `keyboardFocusRegistry` instead, which
+ *     is fed by @expo/ui's own native focus events and is window-independent.
+ *  2. Dispatch: RN's JS responder chain (onStartShouldSetResponder*) is NOT
+ *     dispatched across the `RNHostView` boundary on Android — only `Pressable`
+ *     hit-testing (native `measure()`) works inside the host. So this is a
+ *     transparent `Pressable` mounted ONLY while a field is focused, mirroring
+ *     the app's `DismissKeyboardOverlay`. The tap blurs the focused field via
+ *     its own native ref (`dismissKeyboardFocusedInput`), which resigns the
+ *     responder regardless of window; `KeyboardController.dismiss()` is a
+ *     best-effort fallback for the (rare) case with no registered blur handle.
+ *
+ * iOS doesn't strictly need this (SwiftUI resigns first-responder on outside
+ * taps for free), but the same path is harmless and keeps behavior identical.
+ */
+function SheetKeyboardDismissOverlay() {
+    const hasFocus = useSyncExternalStore(subscribeKeyboardFocus, hasKeyboardFocusedInput, () => false);
+    if (Platform.OS === "web" || !hasFocus)
+        return null;
+    return (_jsx(Pressable, { style: [StyleSheet.absoluteFill, styles.keyboardDismissOverlay], onPressIn: () => {
+            if (!dismissKeyboardFocusedInput())
+                KeyboardController.dismiss();
+        }, accessibilityLabel: "Dismiss keyboard", accessibilityRole: "button" }));
+}
+const styles = StyleSheet.create({
+    keyboardDismissOverlay: {
+        zIndex: 999,
+    },
+});
+// ============================================================================
 // Root
 // ============================================================================
 function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints = DEFAULT_SNAP_POINTS, closeOnBackdropPress = true, children, }) {
@@ -164,9 +210,15 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
     const isControlled = controlledOpen !== undefined;
     const open = isControlled ? controlledOpen : state.internalOpen;
     const snapIndex = clampSnapIndex(state.snapIndex, maxSnapIndex);
-    const setSnapIndex = useCallback((index) => dispatch({ type: "setSnapIndex", index, maxSnapIndex }), [maxSnapIndex]);
+    const setSnapIndex = useCallback((index) => {
+        dispatch({ type: "setSnapIndex", index, maxSnapIndex });
+    }, [maxSnapIndex]);
     const cycleSnapPoint = useCallback(() => {
-        dispatch({ type: "cycleSnapPoint", maxSnapIndex, android: Platform.OS === "android" });
+        dispatch({
+            type: "cycleSnapPoint",
+            maxSnapIndex,
+            android: Platform.OS === "android",
+        });
     }, [maxSnapIndex]);
     const onOpenChange = useCallback((newOpen) => {
         if (isControlled) {
@@ -222,29 +274,24 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
 // ============================================================================
 // Trigger
 // ============================================================================
-function BottomSheetTrigger({ asChild, children, style }) {
+function BottomSheetTrigger({ asChild, children, style: styleOverride }) {
     const { toggle } = useBottomSheetContext();
-    return (_jsx(SlotPressable, { asChild: asChild, onActivate: toggle, style: style, children: children }));
+    const handlePress = () => toggle();
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            onPress: handlePress,
+            style: [
+                children.props.style,
+                Platform.OS === "web" && { cursor: "pointer" },
+                styleOverride,
+            ],
+        });
+    }
+    return (_jsx(Pressable, { onPress: handlePress, style: [Platform.OS === "web" && { cursor: "pointer" }, styleOverride], children: children }));
 }
 // ============================================================================
-// Content — renders the native sheet, wraps children in a themed flex column
+// Content — renders the native sheet, wraps children in themed flex column
 // ============================================================================
-const contentStyles = css.create({
-    column: (maxHeight, backgroundColor) => ({
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: "0%",
-        maxHeight,
-        backgroundColor,
-    }),
-    floatingClose: {
-        position: "absolute",
-        top: 16,
-        right: 16,
-    },
-});
 function BottomSheetContent({ 
 // Accepted-but-ignored ergonomics props (platform owns these behaviors):
 swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, style: styleOverride, children, }) {
@@ -253,14 +300,26 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
     const dismissDisabled = useDismissDisabled();
     const showClose = useShowClose();
     const { height: winH } = useWindowDimensions();
+    // 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;
-    // Cap the RN column to the expanded detent height so flex:1 resolves and the
-    // Body becomes scrollable (the native host doesn't clamp it for us).
+    // The native RN-in-SwiftUI host does NOT clamp our RN column to the sheet's
+    // detent height — it lays the column out at its full intrinsic content height,
+    // SwiftUI then clips it at the sheet edge (footer/tail fall off-screen), and
+    // `flex:1` never gets a definite parent height so the ScrollView can't bound
+    // and scroll. Cap the column to the expanded detent height (highest snap
+    // point) so `flex:1` resolves and the Body becomes scrollable.
     const expandedSnap = snapPoints[snapPoints.length - 1];
-    const detentHeight = typeof expandedSnap === "number" ? expandedSnap : (parseFloat(expandedSnap) / 100) * winH;
+    const detentHeight = typeof expandedSnap === "number"
+        ? expandedSnap
+        : (parseFloat(expandedSnap) / 100) * winH;
+    // 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).
         if (newIndex < 0) {
             if (open)
                 onOpenChange(false);
@@ -268,13 +327,31 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
         }
         setSnapIndex(newIndex);
     };
-    return (_jsx(NativeBottomSheet, { index: index, snapPoints: snapPoints, handleComponent: hasInteractiveHandle ? null : undefined, enablePanDownToClose: !dismissDisabled, onChange: handleChange, onClose: () => {
+    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);
-        }, backgroundStyle: { backgroundColor: theme.colors.card }, children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(html.div, { style: [
-                        contentStyles.column(detentHeight, theme.colors.card),
-                        sanitizeWebStyle(styleOverride),
-                    ], children: [children, showFloatingClose && _jsx(SheetCloseButton, { style: contentStyles.floatingClose })] }) }) }) }));
+        }, 
+        // Themes the scrim/background on web (vaul) and Android (containerColor).
+        backgroundStyle: { backgroundColor: theme.colors.card }, children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { style: [
+                        {
+                            flex: 1,
+                            maxHeight: detentHeight,
+                            // Themes the content surface across all platforms regardless of
+                            // native sheet chrome.
+                            backgroundColor: theme.colors.card,
+                        },
+                        styleOverride,
+                    ], children: [children, _jsx(SheetKeyboardDismissOverlay, {}), 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",
+                                top: spacing.md,
+                                right: spacing.md,
+                            } }))] }) }) }) }));
 }
 // ============================================================================
 // Handle — pressable snap-point control; native drag gestures remain active
@@ -289,37 +366,25 @@ function containsHandle(node) {
         return containsHandle(child.props.children);
     });
 }
-const handleStyles = css.create({
-    button: {
-        display: "flex",
-        minHeight: 44, // spacing.touchTarget
-        alignItems: "center",
-        justifyContent: "center",
-        margin: 0,
-        padding: 0,
-        borderWidth: 0,
-        backgroundColor: "transparent",
-        appearance: "none",
-        width: "100%",
-    },
-    enabled: { cursor: "pointer" },
-    disabled: { cursor: "default" },
-    bar: (backgroundColor) => ({
-        width: 32, // spacing.xl
-        height: 4, // spacing.xs
-        borderRadius: 9999, // spacing.radiusFull
-        backgroundColor,
-    }),
-});
 function BottomSheetHandle({ style }) {
     const { cycleSnapPoint, snapPoints } = useBottomSheetContext();
     const { theme } = useTheme();
     const disabled = snapPoints.length < 2;
-    return (_jsx(html.button, { type: "button", "aria-label": "Change sheet height", "aria-disabled": disabled, disabled: disabled, onClick: () => !disabled && cycleSnapPoint(), style: [
-            handleStyles.button,
-            disabled ? handleStyles.disabled : handleStyles.enabled,
-            sanitizeWebStyle(style),
-        ], children: _jsx(html.div, { style: handleStyles.bar(theme.colors.mutedForeground) }) }));
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Change sheet height", accessibilityHint: "Moves the sheet to the next snap point", accessibilityState: { disabled }, disabled: disabled, onPress: cycleSnapPoint, style: ({ pressed }) => [
+            {
+                minHeight: spacing.touchTarget,
+                alignItems: "center",
+                justifyContent: "center",
+                opacity: pressed ? 0.65 : 1,
+            },
+            Platform.OS === "web" && !disabled && { cursor: "pointer" },
+            style,
+        ], children: _jsx(View, { style: {
+                width: spacing.xl,
+                height: spacing.xs,
+                borderRadius: spacing.radiusFull,
+                backgroundColor: theme.colors.mutedForeground,
+            } }) }));
 }
 // ============================================================================
 // Header
@@ -334,69 +399,55 @@ function containsClose(node) {
         return containsClose(child.props.children);
     });
 }
-const headerStyles = css.create({
-    row: (borderBottomColor) => ({
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 8, // spacing.sm
-        paddingLeft: 16, // spacing.md
-        paddingRight: 16,
-        paddingTop: 16,
-        paddingBottom: 16,
-        borderBottomWidth: 1,
-        borderBottomStyle: "solid",
-        borderBottomColor,
-    }),
-    fill: { flexGrow: 1, flexShrink: 1, flexBasis: "0%" },
-});
-function BottomSheetHeader({ children, style }) {
+function BottomSheetHeader({ children, style, ...props }) {
     const { theme } = useTheme();
     const { setHasHeader } = useBottomSheetContext();
     const showClose = useShowClose();
+    // Tell Content a Header exists so it doesn't also float a close button.
     useEffect(() => {
         setHasHeader(true);
         return () => setHasHeader(false);
     }, [setHasHeader]);
+    // Auto X is a fallback: render it when a close affordance is wanted (dismiss
+    // off, or scrollable body) AND the consumer didn't already provide their own
+    // Close inside the header (avoids a double X).
     const showAutoClose = showClose && !containsClose(children);
-    return (_jsxs(html.div, { style: [headerStyles.row(theme.colors.border), sanitizeWebStyle(style)], children: [_jsx(html.div, { style: headerStyles.fill, children: children }), showAutoClose && _jsx(SheetCloseButton, {})] }));
+    return (_jsxs(View, { style: [
+            {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.sm,
+                paddingHorizontal: spacing.md,
+                paddingVertical: spacing.md,
+                borderBottomWidth: 1,
+                borderBottomColor: theme.colors.border,
+            },
+            style,
+        ], ...props, children: [_jsx(View, { style: { flex: 1 }, children: children }), showAutoClose && _jsx(SheetCloseButton, {})] }));
 }
 // ============================================================================
-// Body — platform split (native RN ScrollView / web html.div overflow)
+// Body
 // ============================================================================
-const bodyStyles = css.create({
-    webScroller: {
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: "0%",
-        overflowY: "auto",
-    },
-    webContent: (paddingBottom) => ({
-        display: "flex",
-        flexDirection: "column",
-        paddingLeft: 16, // spacing.md
-        paddingRight: 16,
-        paddingTop: 16,
-        paddingBottom,
-    }),
-});
-/** Native body: RN ScrollView with onLayout/onContentSizeChange overflow detection. */
-function NativeBottomSheetBody({ children, style, contentContainerStyle, onContentSizeChange, onLayout, ...props }) {
+function BottomSheetBody({ children, style, contentContainerStyle, onContentSizeChange, onLayout, ...props }) {
     const { setScrollable, hasFooter } = useBottomSheetContext();
     const insets = useSheetInsets();
+    // Track viewport vs content height to know whether the body actually
+    // overflows. Only a genuinely-scrolling body needs the detent height cap and
+    // the auto close X; short bodies size naturally and skip both.
     const viewportH = useRef(0);
     const contentH = useRef(0);
     const evaluate = useCallback(() => {
         const overflowing = contentH.current > viewportH.current + 1;
         setScrollable(overflowing);
     }, [setScrollable]);
+    // Reset the shared flag on unmount so a reused root doesn't stay "scrollable".
     useEffect(() => () => setScrollable(false), [setScrollable]);
     return (_jsx(ScrollView, { style: [{ flex: 1 }, style], contentContainerStyle: [
             {
                 paddingHorizontal: spacing.md,
                 paddingTop: spacing.md,
+                // When no Footer owns the bottom inset, the body must clear the home
+                // indicator so the last item is reachable.
                 paddingBottom: spacing.md + (hasFooter ? 0 : insets.bottom),
             },
             contentContainerStyle,
@@ -410,63 +461,46 @@ function NativeBottomSheetBody({ children, style, contentContainerStyle, onConte
             onContentSizeChange?.(w, h);
         }, ...props, children: children }));
 }
-/** Web body: html.div with overflow:auto; overflow detected via scrollHeight. */
-function WebBottomSheetBody({ children, style, testID }) {
-    const { setScrollable, hasFooter } = useBottomSheetContext();
-    const insets = useSheetInsets();
-    const scrollerRef = useRef(null);
-    useLayoutEffect(() => {
-        const node = scrollerRef.current;
-        if (!node)
-            return;
-        const measure = () => setScrollable(node.scrollHeight > node.clientHeight + 1);
-        measure();
-        if (typeof window === "undefined")
-            return;
-        window.addEventListener("resize", measure);
-        return () => window.removeEventListener("resize", measure);
-    });
-    useEffect(() => () => setScrollable(false), [setScrollable]);
-    return (_jsx(html.div, { ref: scrollerRef, "data-testid": testID, style: [bodyStyles.webScroller, sanitizeWebStyle(style)], children: _jsx(html.div, { style: bodyStyles.webContent(spacing.md + (hasFooter ? 0 : insets.bottom)), children: children }) }));
-}
-function BottomSheetBody(props) {
-    return IS_WEB ? _jsx(WebBottomSheetBody, { ...props }) : _jsx(NativeBottomSheetBody, { ...props });
-}
 // ============================================================================
 // Footer
 // ============================================================================
-const footerStyles = css.create({
-    base: (paddingBottom, borderTopColor) => ({
-        display: "flex",
-        flexDirection: "column",
-        paddingLeft: 16, // spacing.md
-        paddingRight: 16,
-        paddingTop: 16,
-        paddingBottom,
-        borderTopWidth: 1,
-        borderTopStyle: "solid",
-        borderTopColor,
-    }),
-});
-function BottomSheetFooter({ children, style }) {
+function BottomSheetFooter({ children, style, ...props }) {
     const { theme } = useTheme();
     const insets = useSheetInsets();
     const { setHasFooter } = useBottomSheetContext();
+    // Tell Body a Footer owns the bottom safe-area inset, so Body doesn't add it too.
     useEffect(() => {
         setHasFooter(true);
         return () => setHasFooter(false);
     }, [setHasFooter]);
-    return (_jsx(html.div, { style: [
-            footerStyles.base(spacing.md + insets.bottom, theme.colors.border),
-            sanitizeWebStyle(style),
-        ], children: children }));
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: spacing.md,
+                paddingTop: spacing.md,
+                paddingBottom: spacing.md + insets.bottom,
+                borderTopWidth: 1,
+                borderTopColor: theme.colors.border,
+            },
+            style,
+        ], ...props, children: children }));
 }
 // ============================================================================
 // Close
 // ============================================================================
-function BottomSheetClose({ asChild, children, style }) {
+function BottomSheetClose({ asChild, children, style: styleOverride }) {
     const { onOpenChange } = useBottomSheetContext();
-    return (_jsx(SlotPressable, { asChild: asChild, onActivate: () => onOpenChange(false), style: style, children: children }));
+    const handlePress = () => onOpenChange(false);
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            onPress: handlePress,
+            style: [
+                children.props.style,
+                Platform.OS === "web" && { cursor: "pointer" },
+                styleOverride,
+            ],
+        });
+    }
+    return (_jsx(Pressable, { onPress: handlePress, style: [Platform.OS === "web" && { cursor: "pointer" }, styleOverride], children: children }));
 }
 // ============================================================================
 // Compound export