@mrmeg/expo-ui 0.7.2 → 0.7.3

package/dist/components/BottomSheet.js

@@ -1,48 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
-import { View, Pressable, Animated, StyleSheet, Platform, PanResponder, ScrollView, } from "react-native";
-import { Portal } from "@rn-primitives/portal";
-import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
-import { Pressable as SlotPressable } from "@rn-primitives/slot";
+import React, { createContext, use, useCallback, useEffect, useRef, useState } from "react";
+import { View, Pressable, ScrollView, Platform, useWindowDimensions, } from "react-native";
+import { BottomSheet as NativeBottomSheet } from "@expo/ui/community/bottom-sheet";
+import { useSafeAreaInsets, initialWindowMetrics } from "react-native-safe-area-context";
 import { useTheme } from "../hooks/useTheme.js";
-import { useDimensions } from "../hooks/useDimensions.js";
 import { spacing } from "../constants/spacing.js";
-import { shouldUseNativeDriver } from "../lib/animations.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { BottomSheetKeyboardController, useBottomSheetKeyboardAnimation, } from "./BottomSheetKeyboard.js";
-/**
- * BottomSheet Component with Sub-components
- *
- * A sliding bottom sheet overlay with snap points, swipe gestures,
- * and compound component pattern matching Drawer.tsx.
- *
- * @example
- * ```tsx
- * <BottomSheet>
- *   <BottomSheet.Trigger asChild>
- *     <Button>Open Sheet</Button>
- *   </BottomSheet.Trigger>
- *   <BottomSheet.Content>
- *     <BottomSheet.Handle />
- *     <BottomSheet.Header>
- *       <SansSerifBoldText>Title</SansSerifBoldText>
- *     </BottomSheet.Header>
- *     <BottomSheet.Body>
- *       <SansSerifText>Content here</SansSerifText>
- *     </BottomSheet.Body>
- *     <BottomSheet.Footer>
- *       <Button>Action</Button>
- *     </BottomSheet.Footer>
- *   </BottomSheet.Content>
- * </BottomSheet>
- * ```
- */
-// Platform-specific overlay wrapper
-const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
-// Floor for the keyboard-avoiding height shrink, so a tall keyboard on a short
-// screen can't collapse the sheet to nothing.
-const MIN_KEYBOARD_SHEET_HEIGHT = 220;
+import { Icon } from "./Icon.js";
 // ============================================================================
 // Context
 // ============================================================================
@@ -54,103 +18,102 @@ function useBottomSheetContext() {
     }
     return context;
 }
-const DragContext = createContext(null);
-function BottomSheetPanel({ accessibilityViewIsModal, animatedHeight, animatedBottom, children, panHandlers, sheetStyle, styleOverride, translateY, ...props }) {
-    return (_jsx(Animated.View, { style: [
-            sheetStyle,
-            // Layout overrides (JS-driven) must come after sheetStyle so they win.
-            animatedBottom ? { bottom: animatedBottom } : undefined,
-            animatedHeight ? { height: animatedHeight } : undefined,
-            // Open/close + drag (native-driven) live on transform, a separate node.
-            { transform: [{ translateY }] },
-            styleOverride && typeof styleOverride !== "function"
-                ? StyleSheet.flatten(styleOverride)
-                : undefined,
-        ], accessibilityViewIsModal: accessibilityViewIsModal, ...panHandlers, ...props, children: children }));
-}
 /**
- * Lifts the sheet above the keyboard while keeping its top edge on-screen.
+ * Safe-area insets for content *inside* the sheet.
  *
- * The naive approach translates the whole rigid box up by the keyboard height,
- * which shoves the header (and any inputs near the top) off the top of the
- * screen on tall sheets. Instead we lift the sheet's bottom to sit just above
- * the keyboard and shrink its height by the same amount, so the top edge holds
- * steady. The flex Body soaks up the lost height and scrolls, leaving the
- * header, focused input, and footer all visible.
- *
- * This drives layout props (`bottom`/`height`) with a JS-driven keyboard value,
- * intentionally separate from the native-driven open/close `translateY` — a
- * single Animated.Value can't feed both a native transform and a JS layout
- * prop, but distinct nodes on the same view can.
+ * 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 KeyboardAvoidingBottomSheetPanel(props) {
-    const { height: keyboardHeight } = useBottomSheetKeyboardAnimation();
-    // sheetStyle.height is the resolved max snap height (a number, set by Content).
-    const baseHeight = typeof props.sheetStyle.height === "number" ? props.sheetStyle.height : undefined;
-    const animatedHeight = useMemo(() => {
-        if (baseHeight === undefined)
-            return undefined;
-        // keyboardHeight: 0 (closed) → keyboard px (open). Shrink the sheet by it,
-        // clamped to a usable minimum so it never collapses on short screens.
-        const shrunk = Animated.subtract(baseHeight, keyboardHeight);
-        return shrunk.interpolate({
-            inputRange: [MIN_KEYBOARD_SHEET_HEIGHT, baseHeight],
-            outputRange: [MIN_KEYBOARD_SHEET_HEIGHT, baseHeight],
-            extrapolate: "clamp",
-        });
-    }, [baseHeight, keyboardHeight]);
-    return (_jsx(BottomSheetPanel, { ...props, animatedHeight: animatedHeight, animatedBottom: keyboardHeight }));
+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,
+    };
+}
+/**
+ * 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;
 }
 // ============================================================================
-// Utility Functions
+// Auto close button — shown when interactive dismiss is off
 // ============================================================================
-function resolveSnapPoints(points, screenHeight) {
-    return points.map((p) => {
-        if (typeof p === "number")
-            return p;
-        return (parseFloat(p) / 100) * screenHeight;
-    });
-}
-function sheetReducer(state, action) {
-    switch (action.type) {
-        case "OPEN": return true;
-        case "CLOSE": return false;
-        case "TOGGLE": return !state;
-    }
+function SheetCloseButton({ style }) {
+    const { onOpenChange } = useBottomSheetContext();
+    const { theme } = useTheme();
+    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" }) }));
 }
 // ============================================================================
-// BottomSheet Root
+// Root
 // ============================================================================
-function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints: rawSnapPoints = ["50%"], closeOnBackdropPress = true, children, }) {
-    const [internalOpen, dispatch] = useReducer(sheetReducer, defaultOpen);
+function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints = ["50%"], closeOnBackdropPress = true, children, }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const [scrollable, setScrollable] = useState(false);
+    const [hasHeader, setHasHeader] = useState(false);
+    const [hasFooter, setHasFooter] = useState(false);
     const isControlled = controlledOpen !== undefined;
     const open = isControlled ? controlledOpen : internalOpen;
-    // useDimensions reacts to rotation / split-screen, unlike Dimensions.get.
-    const { height: screenHeight } = useDimensions();
-    const snapPoints = resolveSnapPoints(rawSnapPoints, screenHeight);
-    const toggle = () => {
-        if (isControlled) {
-            controlledOnOpenChange?.(!controlledOpen);
-        }
-        else {
-            dispatch({ type: "TOGGLE" });
-        }
-    };
     const onOpenChange = (newOpen) => {
         if (isControlled) {
             controlledOnOpenChange?.(newOpen);
         }
         else {
-            dispatch({ type: newOpen ? "OPEN" : "CLOSE" });
+            setInternalOpen(newOpen);
         }
     };
+    const toggle = () => onOpenChange(!open);
     const contextValue = {
         open,
         onOpenChange,
         toggle,
         snapPoints,
-        currentSnapIndex: 0,
         closeOnBackdropPress,
+        scrollable,
+        setScrollable,
+        hasHeader,
+        setHasHeader,
+        hasFooter,
+        setHasFooter,
     };
     return (_jsx(BottomSheetContext.Provider, { value: contextValue, children: children }));
 }
@@ -170,346 +133,156 @@ function BottomSheetTrigger({ asChild, children, style: styleOverride }) {
             ],
         });
     }
-    return (_jsx(Pressable, { onPress: handlePress, style: [
-            Platform.OS === "web" && { cursor: "pointer" },
-            styleOverride,
-        ], children: children }));
+    return (_jsx(Pressable, { onPress: handlePress, style: [Platform.OS === "web" && { cursor: "pointer" }, styleOverride], children: children }));
 }
 // ============================================================================
-// Content
+// Content — renders the native sheet, wraps children in themed flex column
 // ============================================================================
-function BottomSheetContent({ swipeEnabled = true, velocityThreshold = 500, avoidKeyboard = true, dismissKeyboardOnDrag = true, style: styleOverride, children, ...props }) {
-    const sheetContext = useBottomSheetContext();
-    const { open, onOpenChange, snapPoints, closeOnBackdropPress } = sheetContext;
+function BottomSheetContent({ 
+// Accepted-but-ignored ergonomics props (platform owns these behaviors):
+swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, style: styleOverride, children, }) {
+    const { open, onOpenChange, snapPoints, hasHeader } = useBottomSheetContext();
     const { theme } = useTheme();
-    // Highest snap point is the max height
-    const maxHeight = Math.max(...snapPoints);
-    // With bottom:0 positioning, translateY=0 means visible, translateY=maxHeight means hidden below
-    const closedPosition = maxHeight;
-    // Initialize lazily so each Animated.Value is allocated once on first render
-    // instead of being rebuilt and discarded on every render.
-    const translateYRef = useRef(null);
-    if (translateYRef.current === null) {
-        translateYRef.current = new Animated.Value(open ? 0 : closedPosition);
-    }
-    const translateY = translateYRef.current;
-    const backdropOpacityRef = useRef(null);
-    if (backdropOpacityRef.current === null) {
-        backdropOpacityRef.current = new Animated.Value(open ? 1 : 0);
-    }
-    const backdropOpacity = backdropOpacityRef.current;
-    const [isVisible, setIsVisible] = useState(open);
-    const lastOpenRef = useRef(null);
-    const runningAnimationRef = useRef(null);
-    const currentHeightRef = useRef(maxHeight);
-    // Track which snap we're at
-    const currentSnapRef = useRef(snapPoints.length - 1);
-    const textColor = theme.colors.foreground;
-    const handleDragRelease = useCallback((dragDistance, velocity) => {
-        const visibleHeight = currentHeightRef.current - dragDistance;
-        if (velocity > velocityThreshold / 1000 || dragDistance > currentHeightRef.current * 0.4) {
-            const lowerSnaps = snapPoints.filter((s) => s < currentHeightRef.current);
-            if (lowerSnaps.length > 0 && dragDistance < currentHeightRef.current * 0.4) {
-                const nextSnap = lowerSnaps[lowerSnaps.length - 1];
-                currentHeightRef.current = nextSnap;
-                const targetY = maxHeight - nextSnap;
-                Animated.parallel([
-                    Animated.spring(translateY, {
-                        toValue: targetY,
-                        tension: 65,
-                        friction: 11,
-                        useNativeDriver: shouldUseNativeDriver,
-                    }),
-                    Animated.timing(backdropOpacity, {
-                        toValue: 1,
-                        duration: 150,
-                        useNativeDriver: shouldUseNativeDriver,
-                    }),
-                ]).start();
-            }
-            else {
-                Animated.parallel([
-                    Animated.timing(translateY, {
-                        toValue: closedPosition,
-                        duration: 200,
-                        useNativeDriver: shouldUseNativeDriver,
-                    }),
-                    Animated.timing(backdropOpacity, {
-                        toValue: 0,
-                        duration: 200,
-                        useNativeDriver: shouldUseNativeDriver,
-                    }),
-                ]).start(() => {
-                    onOpenChange(false);
-                    setIsVisible(false);
-                });
-            }
-        }
-        else {
-            let nearestSnap = snapPoints[0];
-            let minDistance = Infinity;
-            for (const snap of snapPoints) {
-                const dist = Math.abs(visibleHeight - snap);
-                if (dist < minDistance) {
-                    minDistance = dist;
-                    nearestSnap = snap;
-                }
-            }
-            currentHeightRef.current = nearestSnap;
-            const targetY = maxHeight - nearestSnap;
-            Animated.parallel([
-                Animated.spring(translateY, {
-                    toValue: targetY,
-                    tension: 65,
-                    friction: 11,
-                    useNativeDriver: shouldUseNativeDriver,
-                }),
-                Animated.timing(backdropOpacity, {
-                    toValue: 1,
-                    duration: 150,
-                    useNativeDriver: shouldUseNativeDriver,
-                }),
-            ]).start();
-        }
-    }, [snapPoints, maxHeight, closedPosition, translateY, backdropOpacity, onOpenChange, velocityThreshold]);
-    const handleDragMove = useCallback((dy) => {
-        // Base offset: where the sheet sits at the current snap point
-        // translateY=0 means top snap (maxHeight visible), higher values = further down
-        const baseOffset = maxHeight - currentHeightRef.current;
-        const newY = Math.max(baseOffset, baseOffset + dy);
-        translateY.setValue(newY);
-        // Progress: 1 = fully at current snap, 0 = fully closed
-        const dragFromBase = newY - baseOffset;
-        const progress = 1 - dragFromBase / currentHeightRef.current;
-        backdropOpacity.setValue(Math.max(0, progress));
-    }, [translateY, backdropOpacity, maxHeight]);
-    const dismissKeyboardForDrag = useCallback(() => {
-        if (Platform.OS !== "web" && dismissKeyboardOnDrag) {
-            void BottomSheetKeyboardController.dismiss();
-        }
-    }, [dismissKeyboardOnDrag]);
-    if (open !== lastOpenRef.current) {
-        const previousOpen = lastOpenRef.current;
-        lastOpenRef.current = open;
-        if (runningAnimationRef.current) {
-            runningAnimationRef.current.stop();
-            runningAnimationRef.current = null;
-        }
-        if (open) {
-            if (!isVisible) {
-                setIsVisible(true);
-            }
-            currentSnapRef.current = snapPoints.length - 1;
-            currentHeightRef.current = maxHeight;
-            if (previousOpen === null) {
-                translateY.setValue(closedPosition);
-                backdropOpacity.setValue(0);
-            }
-            const animation = Animated.parallel([
-                Animated.spring(translateY, {
-                    toValue: 0,
-                    tension: 65,
-                    friction: 11,
-                    useNativeDriver: shouldUseNativeDriver,
-                }),
-                Animated.timing(backdropOpacity, {
-                    toValue: 1,
-                    duration: 200,
-                    useNativeDriver: shouldUseNativeDriver,
-                }),
-            ]);
-            runningAnimationRef.current = animation;
-            animation.start(({ finished }) => {
-                if (finished)
-                    runningAnimationRef.current = null;
-            });
-        }
-        else if (previousOpen === true) {
-            const animation = Animated.parallel([
-                Animated.timing(translateY, {
-                    toValue: closedPosition,
-                    duration: 200,
-                    useNativeDriver: shouldUseNativeDriver,
-                }),
-                Animated.timing(backdropOpacity, {
-                    toValue: 0,
-                    duration: 200,
-                    useNativeDriver: shouldUseNativeDriver,
-                }),
-            ]);
-            runningAnimationRef.current = animation;
-            animation.start(({ finished }) => {
-                runningAnimationRef.current = null;
-                if (finished)
-                    setIsVisible(false);
-            });
-        }
-    }
-    const panResponder = useMemo(() => Platform.OS !== "web" && swipeEnabled
-        ? PanResponder.create({
-            onStartShouldSetPanResponder: () => false,
-            onMoveShouldSetPanResponder: (_evt, gestureState) => {
-                const isVertical = Math.abs(gestureState.dy) > Math.abs(gestureState.dx);
-                const isSignificant = Math.abs(gestureState.dy) > 10;
-                const isDownward = gestureState.dy > 0;
-                return isVertical && isSignificant && isDownward;
-            },
-            onPanResponderGrant: dismissKeyboardForDrag,
-            onPanResponderMove: (_evt, gestureState) => {
-                handleDragMove(gestureState.dy);
-            },
-            onPanResponderRelease: (_evt, gestureState) => {
-                handleDragRelease(Math.max(0, gestureState.dy), gestureState.vy);
-            },
-        })
-        : null, [dismissKeyboardForDrag, handleDragMove, handleDragRelease, swipeEnabled]);
-    const dragContextValue = Platform.OS === "web" && swipeEnabled
-        ? {
-            onDragMove: handleDragMove,
-            onDragEnd: (dy, velocity) => {
-                handleDragRelease(Math.max(0, dy), velocity);
-            },
-        }
-        : null;
-    const handleBackdropPress = () => {
-        if (closeOnBackdropPress) {
+    const dismissDisabled = useDismissDisabled();
+    const showClose = useShowClose();
+    const { height: winH } = useWindowDimensions();
+    // Boolean open → native imperative index. Open at the highest snap point so
+    // the sheet starts fully expanded; -1 keeps it closed.
+    const index = open ? snapPoints.length - 1 : -1;
+    // 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;
+    // 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 handleChange = (newIndex) => {
+        // Native fires onChange(-1) on dismiss (swipe / backdrop / back button).
+        if (newIndex < 0 && open)
             onOpenChange(false);
-        }
-    };
-    if (!isVisible && !open) {
-        return null;
-    }
-    const sheetStyle = {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: maxHeight,
-        backgroundColor: theme.colors.card,
-        borderTopLeftRadius: spacing.radiusXl,
-        borderTopRightRadius: spacing.radiusXl,
-        borderTopWidth: 1,
-        borderLeftWidth: 1,
-        borderRightWidth: 1,
-        borderColor: theme.colors.border,
-        ...(Platform.OS === "web" && { zIndex: 51 }),
     };
-    const sheetContent = (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: children }) }));
-    const PanelComponent = Platform.OS !== "web" && avoidKeyboard
-        ? KeyboardAvoidingBottomSheetPanel
-        : BottomSheetPanel;
-    return (_jsx(BottomSheetContentPortal, { sheetContext: sheetContext, theme: theme, backdropOpacity: backdropOpacity, onBackdropPress: handleBackdropPress, PanelComponent: PanelComponent, sheetStyle: sheetStyle, styleOverride: styleOverride, translateY: translateY, panHandlers: panResponder ? panResponder.panHandlers : undefined, panelProps: props, dragContextValue: dragContextValue, sheetContent: sheetContent }));
-}
-function BottomSheetContentPortal({ sheetContext, theme, backdropOpacity, onBackdropPress, PanelComponent, sheetStyle, styleOverride, translateY, panHandlers, panelProps, dragContextValue, sheetContent, }) {
-    return (_jsx(Portal, { name: "bottom-sheet-portal", children: _jsx(FullWindowOverlay, { children: _jsx(BottomSheetContext.Provider, { value: sheetContext, children: _jsxs(View, { style: StyleSheet.absoluteFill, children: [_jsx(Animated.View, { style: [
-                                StyleSheet.absoluteFill,
-                                {
-                                    backgroundColor: theme.colors.overlay,
-                                    opacity: backdropOpacity,
-                                },
-                                Platform.OS === "web" && { zIndex: 50 },
-                            ], children: _jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: onBackdropPress }) }), _jsx(PanelComponent, { sheetStyle: sheetStyle, styleOverride: styleOverride, translateY: translateY, accessibilityViewIsModal: true, ...(Platform.OS === "web" && {
-                                role: "dialog",
-                                "aria-modal": true,
-                            }), panHandlers: panHandlers, ...panelProps, children: dragContextValue ? (_jsx(DragContext.Provider, { value: dragContextValue, children: sheetContent })) : (sheetContent) })] }) }) }) }));
+    return (_jsx(NativeBottomSheet, { index: index, snapPoints: snapPoints, enablePanDownToClose: !dismissDisabled, onChange: handleChange, onClose: () => {
+            if (open)
+                onOpenChange(false);
+        }, 
+        // 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, 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
+// Handle — no-op (the platform draws the drag indicator)
 // ============================================================================
-function BottomSheetHandle({ style }) {
-    const { theme } = useTheme();
-    const dragCtx = use(DragContext);
-    // Web pointer-event drag — attaches move/up listeners on document
-    const dragStartY = useRef(0);
-    const lastTimestamp = useRef(0);
-    const lastDy = useRef(0);
-    const isDragging = useRef(false);
-    useEffect(() => {
-        if (Platform.OS !== "web" || !dragCtx)
-            return;
-        const onPointerMove = (e) => {
-            if (!isDragging.current)
-                return;
-            const dy = e.clientY - dragStartY.current;
-            const now = Date.now();
-            const dt = (now - lastTimestamp.current) / 1000;
-            lastTimestamp.current = now;
-            lastDy.current = dy;
-            dragCtx.onDragMove(dy);
-            // Store velocity data on the event for release calculation
-            isDragging._lastDt = dt;
-            isDragging._lastDy = dy;
-        };
-        const onPointerUp = (e) => {
-            if (!isDragging.current)
-                return;
-            isDragging.current = false;
-            document.body.style.cursor = "";
-            document.body.style.userSelect = "";
-            const dy = e.clientY - dragStartY.current;
-            const dt = isDragging._lastDt || 0.016;
-            const prevDy = isDragging._lastDy || 0;
-            const velocity = dt > 0 ? (dy - prevDy) / dt / 1000 : 0;
-            dragCtx.onDragEnd(dy, velocity);
-        };
-        document.addEventListener("pointermove", onPointerMove);
-        document.addEventListener("pointerup", onPointerUp);
-        return () => {
-            document.removeEventListener("pointermove", onPointerMove);
-            document.removeEventListener("pointerup", onPointerUp);
-        };
-    }, [dragCtx]);
-    const handlePointerDown = useCallback((e) => {
-        if (Platform.OS !== "web" || !dragCtx)
-            return;
-        isDragging.current = true;
-        dragStartY.current = e.nativeEvent?.clientY ?? e.clientY;
-        lastTimestamp.current = Date.now();
-        lastDy.current = 0;
-        document.body.style.cursor = "grabbing";
-        document.body.style.userSelect = "none";
-    }, [dragCtx]);
-    return (_jsx(View, { style: [
-            staticStyles.handleContainer,
-            Platform.OS === "web" && { cursor: "grab" },
-            style,
-        ], ...(Platform.OS === "web" && dragCtx
-            ? { onPointerDown: handlePointerDown }
-            : {}), children: _jsx(View, { style: [
-                staticStyles.handle,
-                { backgroundColor: theme.colors.muted },
-            ] }) }));
+function BottomSheetHandle(_props) {
+    return null;
 }
 // ============================================================================
 // Header
 // ============================================================================
+/** Walk a React children tree looking for a `BottomSheet.Close` element. */
+function containsClose(node) {
+    return React.Children.toArray(node).some((child) => {
+        if (!React.isValidElement(child))
+            return false;
+        if (child.type === BottomSheetClose)
+            return true;
+        return containsClose(child.props.children);
+    });
+}
 function BottomSheetHeader({ children, style, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(View, { style: [
+    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(View, { style: [
             {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.sm,
                 paddingHorizontal: spacing.md,
                 paddingVertical: spacing.md,
                 borderBottomWidth: 1,
                 borderBottomColor: theme.colors.border,
             },
             style,
-        ], ...props, children: children }));
+        ], ...props, children: [_jsx(View, { style: { flex: 1 }, children: children }), showAutoClose && _jsx(SheetCloseButton, {})] }));
 }
 // ============================================================================
 // Body
 // ============================================================================
-function BottomSheetBody({ children, style, ...props }) {
-    return (_jsx(ScrollView, { style: [{ flex: 1 }, style], contentContainerStyle: {
-            paddingHorizontal: spacing.md,
-            paddingVertical: spacing.md,
-        }, showsVerticalScrollIndicator: false, ...props, children: children }));
+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,
+        ], showsVerticalScrollIndicator: false, onLayout: (e) => {
+            viewportH.current = e.nativeEvent.layout.height;
+            evaluate();
+            onLayout?.(e);
+        }, onContentSizeChange: (w, h) => {
+            contentH.current = h;
+            evaluate();
+            onContentSizeChange?.(w, h);
+        }, ...props, children: children }));
 }
 // ============================================================================
 // Footer
 // ============================================================================
 function BottomSheetFooter({ children, style, ...props }) {
     const { theme } = useTheme();
-    const insets = useSafeAreaInsets();
+    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(View, { style: [
             {
                 paddingHorizontal: spacing.md,
@@ -527,33 +300,19 @@ function BottomSheetFooter({ children, style, ...props }) {
 function BottomSheetClose({ asChild, children, style: styleOverride }) {
     const { onOpenChange } = useBottomSheetContext();
     const handlePress = () => onOpenChange(false);
-    if (asChild) {
-        return (_jsx(SlotPressable, { onPress: handlePress, style: [
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            onPress: handlePress,
+            style: [
+                children.props.style,
                 Platform.OS === "web" && { cursor: "pointer" },
                 styleOverride,
-            ], children: children }));
+            ],
+        });
     }
-    return (_jsx(Pressable, { onPress: handlePress, style: [
-            Platform.OS === "web" && { cursor: "pointer" },
-            styleOverride,
-        ], children: children }));
+    return (_jsx(Pressable, { onPress: handlePress, style: [Platform.OS === "web" && { cursor: "pointer" }, styleOverride], children: children }));
 }
 // ============================================================================
-// Static styles
-// ============================================================================
-const staticStyles = StyleSheet.create({
-    handleContainer: {
-        alignItems: "center",
-        paddingTop: spacing.sm,
-        paddingBottom: spacing.xs,
-    },
-    handle: {
-        width: 36,
-        height: 4,
-        borderRadius: 2,
-    },
-});
-// ============================================================================
 // Compound export
 // ============================================================================
 const BottomSheet = Object.assign(BottomSheetRoot, {