@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,732 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBottomSheet = exports.default = exports.BottomSheet = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _corners = require("../../utils/corners.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * BottomSheet — Reanimated 3 + Gesture Handler 2 implementation.
+ *
+ * A polished, theme-aware bottom sheet with multi-snap-point support,
+ * UI-thread driven pan gestures, and native-driver spring animations.
+ *
+ * USAGE:
+ *
+ * const ref = useRef<BottomSheetRef>(null);
+ * <BottomSheet ref={ref} snapPoints={[200, '50%', '90%']}>
+ *   <YourContent />
+ * </BottomSheet>
+ *
+ * ref.current?.expand();   // open at first snap point (or `index` prop)
+ * ref.current?.expand(2);  // open at specific index
+ * ref.current?.collapse(); // animate to smallest snap point
+ * ref.current?.close();    // dismiss
+ */
+
+/**
+ * State + actions exposed to anything rendered inside a `<BottomSheet>` —
+ * including the `header` and `footer` slots. Read via `useBottomSheet()`.
+ *
+ * `snapIndex` is the JS-thread mirror of the current snap point. -1 means the
+ * sheet is closed (mid-close-animation included). Use it to drive footer
+ * button enable state, conditional headers, etc. If you need per-frame
+ * progress (e.g. fade a header in as the sheet expands), reach for the
+ * animated value via a future enhancement — not exposed today to keep the
+ * surface minimal.
+ */
+
+const BottomSheetContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Access the enclosing `<BottomSheet>`'s state and imperative actions.
+ * Must be called from a component rendered inside a `<BottomSheet>` (as
+ * `children`, `header`, or `footer`).
+ */
+const useBottomSheet = () => {
+  const ctx = (0, _react.useContext)(BottomSheetContext);
+  if (!ctx) {
+    throw new Error('useBottomSheet must be used inside a <BottomSheet>.');
+  }
+  return ctx;
+};
+exports.useBottomSheet = useBottomSheet;
+const SPRING_CONFIG = {
+  damping: 20,
+  stiffness: 240,
+  mass: 1
+};
+const CLOSE_VELOCITY_THRESHOLD = 1000;
+const DRAG_ACTIVATION_OFFSET = 10;
+const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    snapPoints,
+    index: controlledIndex,
+    onChange,
+    onAnimate,
+    enablePanDownToClose = true,
+    enableBackdropPress = true,
+    scrollable = false,
+    keyboardBehavior = 'shift',
+    mode = 'modal',
+    handleIndicatorStyle,
+    containerStyle,
+    header,
+    footer,
+    headerStyle,
+    footerStyle,
+    children,
+    accessibilityLabel,
+    accessibilityViewIsModal,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  // Height of the host the sheet is positioned in: the Modal's root in modal
+  // mode, the parent overlay in inline mode. Measured with onLayout; the
+  // window size is only the guess before the first layout lands. It cannot
+  // be the reference itself: on Android `Dimensions.get('window')` excludes
+  // the status and navigation bars while the translucent Modal spans both, so
+  // a sheet positioned from the window height stopped one bar short of the
+  // screen edge (54 dp of backdrop under the sheet on a OnePlus, Android 14).
+  // Rotation re-lays out the host, so onLayout covers that case too.
+  const [hostHeight, setHostHeight] = (0, _react.useState)(() => _reactNative.Dimensions.get('window').height);
+  const handleHostLayout = (0, _react.useCallback)(e => {
+    const next = e.nativeEvent.layout.height;
+    if (next > 0) {
+      setHostHeight(prev => prev === next ? prev : next);
+    }
+  }, []);
+
+  // Resolve snap points (px values), sorted ascending so larger height = smaller translateY.
+  const resolvedSnapPoints = (0, _react.useMemo)(() => resolveSnapPoints(snapPoints, hostHeight), [snapPoints, hostHeight]);
+  const closedY = hostHeight; // fully off-screen
+  const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
+
+  // translateY: 0 = top of the host, hostHeight = fully closed.
+  const translateY = (0, _reactNativeReanimated.useSharedValue)(closedY);
+  // Captures the translateY at gesture start so onUpdate can be additive.
+  const dragStartY = (0, _reactNativeReanimated.useSharedValue)(closedY);
+  // Tracks current snap index on the JS thread (mirrored to a shared value for worklets).
+  const currentIndexShared = (0, _reactNativeReanimated.useSharedValue)(-1);
+  const [currentIndex, setCurrentIndex] = (0, _react.useState)(-1);
+  const isAnimatingRef = (0, _react.useRef)(false);
+  // Drives the native <Modal>'s visible prop in modal mode. We mount the modal
+  // synchronously on open and unmount only after the close animation finishes
+  // so the slide-down stays visible.
+  const [modalVisible, setModalVisible] = (0, _react.useState)(false);
+  // Inline-mode mirror of modalVisible: gates the absoluteFill backdrop +
+  // sheet tree so a closed inline sheet doesn't sit over the parent dimming
+  // it and swallowing touches. Set true on expand, cleared in
+  // markAnimationDone once the close animation completes.
+  const [inlineMounted, setInlineMounted] = (0, _react.useState)(false);
+
+  // Convert a snap-point index → translateY position. -1 = closed.
+  const yForIndex = (0, _react.useCallback)(idx => {
+    // NOT dead code, despite every ordinary call site clamping first.
+    // `expand()` has no empty-snapPoints guard (unlike `collapse`), so with
+    // snapPoints={[]} it arrives here out of range — and without this,
+    // `hostHeight - resolvedSnapPoints[idx]` is `hostHeight - undefined`,
+    // i.e. NaN into the sheet position, which breaks layout silently rather
+    // than degrading. Covered by the "degenerate snapPoints" tests.
+    if (idx < 0 || idx >= resolvedSnapPoints.length) {
+      return closedY;
+    }
+    const sheetHeight = resolvedSnapPoints[idx];
+    return hostHeight - sheetHeight;
+  }, [resolvedSnapPoints, hostHeight, closedY]);
+  const setIndexJS = (0, _react.useCallback)(next => {
+    const previous = currentIndex;
+    if (previous === next) {
+      return;
+    }
+    setCurrentIndex(next);
+    currentIndexShared.value = next;
+    onChange?.(next);
+  }, [currentIndex, currentIndexShared, onChange]);
+  const markAnimationDone = (0, _react.useCallback)(() => {
+    isAnimatingRef.current = false;
+    // If we just finished a close animation, unmount the sheet wrapper.
+    if (currentIndexShared.value < 0) {
+      if (mode === 'modal') {
+        setModalVisible(false);
+      } else {
+        setInlineMounted(false);
+      }
+    }
+  }, [mode, currentIndexShared]);
+  const animateTo = (0, _react.useCallback)((to, fromIndex, toIndex) => {
+    isAnimatingRef.current = true;
+    onAnimate?.(fromIndex, toIndex);
+    translateY.value = (0, _reactNativeReanimated.withSpring)(to, SPRING_CONFIG, finished => {
+      'worklet';
+
+      if (finished) {
+        (0, _reactNativeReanimated.runOnJS)(markAnimationDone)();
+      }
+    });
+  }, [onAnimate, translateY, markAnimationDone]);
+  const expand = (0, _react.useCallback)(idx => {
+    const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
+    const fromIndex = currentIndexShared.value;
+    const to = yForIndex(target);
+    // Mount the host (Modal in modal mode, inline overlay in inline mode)
+    // before kicking off the spring so the sheet has somewhere to animate
+    // into. Inline mode also gates the backdrop on this so a closed sheet
+    // doesn't dim the parent.
+    if (mode === 'modal') {
+      setModalVisible(true);
+    } else {
+      setInlineMounted(true);
+    }
+    // Reset translateY to the closed position so the first open animates
+    // up from off-screen rather than snapping in place.
+    if (fromIndex < 0) {
+      translateY.value = closedY;
+    }
+    setIndexJS(target);
+    animateTo(to, fromIndex, target);
+  }, [animateTo, closedY, currentIndex, currentIndexShared, mode, resolvedSnapPoints.length, setIndexJS, translateY, yForIndex]);
+  const collapse = (0, _react.useCallback)(() => {
+    if (resolvedSnapPoints.length === 0) {
+      return;
+    }
+    const fromIndex = currentIndexShared.value;
+    const to = yForIndex(0);
+    setIndexJS(0);
+    animateTo(to, fromIndex, 0);
+  }, [animateTo, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
+  const close = (0, _react.useCallback)(() => {
+    const fromIndex = currentIndexShared.value;
+    setIndexJS(-1);
+    isAnimatingRef.current = true;
+    onAnimate?.(fromIndex, -1);
+    translateY.value = (0, _reactNativeReanimated.withTiming)(closedY, {
+      duration: theme.motion.duration.fast,
+      easing: _reactNativeReanimated.Easing.bezier(...theme.motion.easing.accelerate)
+    }, finished => {
+      'worklet';
+
+      if (finished) {
+        (0, _reactNativeReanimated.runOnJS)(markAnimationDone)();
+      }
+    });
+  }, [closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    expand,
+    collapse,
+    close
+  }), [expand, collapse, close]);
+
+  // Drive the controlled `index` prop.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled-prop driver: adding `currentIndex` would fight the user's drag by re-snapping to the controlled index
+  (0, _react.useEffect)(() => {
+    if (typeof controlledIndex !== 'number') {
+      return;
+    }
+    if (controlledIndex === currentIndex) {
+      return;
+    }
+    if (controlledIndex === -1) {
+      close();
+    } else {
+      expand(controlledIndex);
+    }
+  }, [controlledIndex]);
+
+  // A re-measured host moves every snap target: the first layout lands a
+  // frame after expand() mounted the Modal, and rotation brings another.
+  // Re-aim the sheet at its current target so it does not stay parked at the
+  // offset computed from the old height. A closed sheet re-aims at the new
+  // closedY, which is still fully off-screen.
+  const lastHostHeight = (0, _react.useRef)(hostHeight);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: runs only when the host is re-measured; the target is read fresh at that moment, and listing yForIndex would re-spring on every render that passes a new snapPoints array
+  (0, _react.useEffect)(() => {
+    if (lastHostHeight.current === hostHeight) {
+      return;
+    }
+    lastHostHeight.current = hostHeight;
+    translateY.value = (0, _reactNativeReanimated.withSpring)(yForIndex(currentIndexShared.value), SPRING_CONFIG);
+  }, [hostHeight]);
+
+  // ───────── Gesture (UI thread) ─────────
+  // Worklet helpers must be declared inline so they capture shared values correctly.
+  const minTopY = hostHeight - maxSnapPoint; // smallest translateY (sheet fully expanded)
+  const snapTargets = (0, _react.useMemo)(() => resolvedSnapPoints.map(h => hostHeight - h), [resolvedSnapPoints, hostHeight]);
+  const handleSnapEnd = (0, _react.useCallback)((toIndex, toY) => {
+    const fromIndex = currentIndexShared.value;
+    if (toIndex === -1) {
+      (0, _index2.triggerHaptic)('selection');
+      setIndexJS(-1);
+      isAnimatingRef.current = true;
+      onAnimate?.(fromIndex, -1);
+      translateY.value = (0, _reactNativeReanimated.withTiming)(closedY, {
+        duration: theme.motion.duration.fast,
+        easing: _reactNativeReanimated.Easing.bezier(...theme.motion.easing.accelerate)
+      }, finished => {
+        'worklet';
+
+        if (finished) {
+          (0, _reactNativeReanimated.runOnJS)(markAnimationDone)();
+        }
+      });
+      return;
+    }
+    setIndexJS(toIndex);
+    animateTo(toY, fromIndex, toIndex);
+  }, [animateTo, closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+
+  // The drag lives on the handle row only (spec: a drag on the content never
+  // moves or closes the sheet; the handle drags it, the backdrop tap closes
+  // it). Because the pan is not an ancestor of the content, a ScrollView or
+  // any other gesture inside `children` works natively with no yielding.
+  // Native gesture for the scrollable content (see the ScrollView below). It
+  // does not take part in the sheet's drag: the pan lives on the handle only.
+  const contentGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Native().withTestId(testID ? `${testID}-content-gesture` : 'bottom-sheet-content-gesture'), [testID]);
+  const panGesture = (0, _react.useMemo)(() => {
+    const targets = snapTargets;
+    const closed = closedY;
+    const top = minTopY;
+    const canPanDownToClose = enablePanDownToClose;
+    return _reactNativeGestureHandler.Gesture.Pan().withTestId(testID ? `${testID}-pan-gesture` : 'bottom-sheet-pan-gesture').activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15])
+    // No hitSlop here on purpose. With a hitSlop set, gesture-handler on
+    // iOS tests the touch against the detector view's own bounds, and the
+    // detector (display: contents) reports bounds far larger than the
+    // handle row, so a flick on the content activated the pan and closed
+    // the sheet. The grab area is the 40 px handle row itself instead.
+    .onStart(() => {
+      'worklet';
+
+      dragStartY.value = translateY.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      const next = dragStartY.value + event.translationY;
+      // Clamp at the top (most-expanded) snap point with a touch of rubber-banding.
+      if (next < top) {
+        translateY.value = top + (next - top) * 0.25;
+      } else {
+        translateY.value = next;
+      }
+    }).onEnd(event => {
+      'worklet';
+
+      const releaseY = translateY.value;
+      const velocity = event.velocityY;
+
+      // Fast downward swipe → close (if allowed) or snap to smallest.
+      if (velocity > CLOSE_VELOCITY_THRESHOLD) {
+        if (canPanDownToClose) {
+          (0, _reactNativeReanimated.runOnJS)(handleSnapEnd)(-1, closed);
+          return;
+        }
+        (0, _reactNativeReanimated.runOnJS)(handleSnapEnd)(0, targets[0]);
+        return;
+      }
+
+      // Find nearest snap target by distance.
+      let nearestIdx = 0;
+      let nearestDist = Math.abs(releaseY - targets[0]);
+      for (let i = 1; i < targets.length; i++) {
+        const d = Math.abs(releaseY - targets[i]);
+        if (d < nearestDist) {
+          nearestDist = d;
+          nearestIdx = i;
+        }
+      }
+
+      // If user dragged below smallest snap point past threshold and pan-to-close is on, dismiss.
+      const smallest = targets[0];
+      const overshoot = releaseY - smallest;
+      if (canPanDownToClose && overshoot > 80) {
+        (0, _reactNativeReanimated.runOnJS)(handleSnapEnd)(-1, closed);
+        return;
+      }
+      (0, _reactNativeReanimated.runOnJS)(handleSnapEnd)(nearestIdx, targets[nearestIdx]);
+    });
+  }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, testID, translateY]);
+
+  // ───────── Keyboard tracking ─────────
+  // keyboardOffset is minus the part of the host the keyboard covers. It is
+  // added to translateY in sheetStyle (so snap-point math is untouched) and
+  // taken off the body height in bodyStyle (so nothing sits behind the
+  // keyboard). iOS gets keyboardWillShow/Hide (smoother), Android only emits
+  // keyboardDidShow/Hide.
+  const keyboardOffset = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (keyboardBehavior === 'none') {
+      return;
+    }
+    const showEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const onShow = e => {
+      const height = e.endCoordinates?.height ?? 0;
+      const screenY = e.endCoordinates?.screenY;
+      // The keyboard's top edge in host coordinates. In modal mode the host
+      // spans the whole screen, so the event's screen coordinate is directly
+      // usable and stays right when the reported height leaves out Android's
+      // navigation bar. Inline hosts are not screen-aligned, so fall back to
+      // the height there.
+      const keyboardTop = mode === 'modal' && typeof screenY === 'number' && screenY > 0 ? screenY : hostHeight - height;
+      const overlap = Math.max(0, hostHeight - keyboardTop);
+      keyboardOffset.value = (0, _reactNativeReanimated.withTiming)(-overlap, {
+        duration: theme.motion.duration.normal
+      });
+    };
+    const onHide = () => {
+      keyboardOffset.value = (0, _reactNativeReanimated.withTiming)(0, {
+        duration: theme.motion.duration.normal
+      });
+    };
+    const showSub = _reactNative.Keyboard.addListener(showEvt, onShow);
+    const hideSub = _reactNative.Keyboard.addListener(hideEvt, onHide);
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [hostHeight, keyboardBehavior, keyboardOffset, mode, theme.motion.duration.normal]);
+
+  // ───────── Animated styles ─────────
+  // The top clamp (how high the sheet may ride with the keyboard up) must
+  // come from the window the sheet is drawn in. In modal mode that is the
+  // translucent Modal, which spans the status bar; the app window's provider
+  // reports a top inset of 0 there on Android (the app is not edge to edge),
+  // which put the handle under the status bar clock. A probe inside the
+  // Modal's own provider reports the right value; inline mode keeps the
+  // app-level inset.
+  const [modalTopInset, setModalTopInset] = (0, _react.useState)(insets.top);
+  const safeAreaTop = mode === 'modal' ? modalTopInset : insets.top;
+  const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const yWithKb = translateY.value + keyboardOffset.value;
+    // When the keyboard is up, allow the sheet to slide above its natural
+    // max-snap-point top (`minTopY`) so the input area stays visible. We still
+    // clamp to the safe-area top so the sheet doesn't disappear under the
+    // status bar / notch.
+    const lowerBound = keyboardOffset.value < 0 ? safeAreaTop : minTopY;
+    const clamped = yWithKb < lowerBound ? lowerBound : yWithKb;
+    // Animate `top` (layout prop) instead of `transform: translateY`
+    // (visual only). Layout-prop animation under Reanimated still runs on
+    // the UI thread, but crucially the sheet's *hit-test box* moves with
+    // its visual position. With translateY the layout box stayed parked
+    // at top:0..maxSnap regardless of visual offset, so:
+    //   (a) the empty top half intercepted backdrop taps (worked around
+    //       previously via pointerEvents="box-none"), and
+    //   (b) drag gestures on the handle could be claimed by sibling
+    //       gesture handlers because the actual sheet view was effectively
+    //       hidden from the responder chain.
+    // Animating `top` collapses both problems into nothing — visible area
+    // == hit area — so we can drop the box-none hack too.
+    return {
+      top: clamped
+    };
+  });
+
+  // The sheet box is always maxSnapPoint tall (so a drag up reveals content
+  // that is already laid out), which means at a lower snap point its bottom
+  // part hangs below the host's edge. The body is therefore sized to the
+  // VISIBLE part of the sheet: from the sheet's actual (clamped) top down to
+  // the host's bottom, or to the keyboard's top edge while the keyboard is
+  // up. So the footer pins to the visible bottom at every snap, during a
+  // drag, and above the keyboard, and the content area is exactly what the
+  // user can see. Nothing is laid out behind the keyboard.
+  const bodyStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const kb = keyboardOffset.value;
+    const lowerBound = kb < 0 ? safeAreaTop : minTopY;
+    const y = translateY.value + kb;
+    const top = y < lowerBound ? lowerBound : y;
+    const visible = hostHeight + kb - top;
+    return {
+      height: visible < 0 ? 0 : visible > maxSnapPoint ? maxSnapPoint : visible
+    };
+  });
+  const isExpanded = currentIndex >= 0;
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const handleBackdropPress = (0, _react.useCallback)(() => {
+    if (!enableBackdropPress) {
+      return;
+    }
+    (0, _index2.triggerHaptic)('selection');
+    close();
+  }, [enableBackdropPress, close]);
+
+  // RNGH Tap gesture for the backdrop. Plain RN Pressable on a sibling of a
+  // gesture-handler/reanimated sheet doesn't fire reliably on RN 0.85 / Fabric
+  // (the gesture system swallows the touch sequence). gorhom/bottom-sheet uses
+  // the same Gesture.Tap() pattern for the same reason.
+  const backdropTapGesture = (0, _react.useMemo)(() => _reactNativeGestureHandler.Gesture.Tap().withTestId(testID ? `${testID}-backdrop-gesture` : 'bottom-sheet-backdrop-gesture').maxDuration(250).onEnd((_e, success) => {
+    'worklet';
+
+    if (!success) {
+      return;
+    }
+    (0, _reactNativeReanimated.runOnJS)(handleBackdropPress)();
+  }), [handleBackdropPress, testID]);
+  const contextValue = (0, _react.useMemo)(() => ({
+    snapIndex: currentIndex,
+    snapPoints: resolvedSnapPoints,
+    expand,
+    collapse,
+    close
+  }), [currentIndex, resolvedSnapPoints, expand, collapse, close]);
+
+  // Don't render the backdrop / sheet tree when the sheet is fully closed.
+  // Inline: gated by `inlineMounted` (set in expand, cleared in
+  // markAnimationDone after close animation) — keeps an idle inline sheet
+  // from sitting over the parent and swallowing touches.
+  // Modal: gated by `modalVisible` for the same reason.
+  if (mode === 'inline' && !inlineMounted) {
+    return null;
+  }
+  if (mode === 'modal' && !modalVisible) {
+    return null;
+  }
+  const sheetTree = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    collapsable: false
+    // Modal mode: the backdrop is the modal's root, so it fills via flex.
+    // Inline mode: the backdrop overlays the parent, so it positions absolute.
+    // Either way it is exactly the box the sheet is positioned in, which is
+    // why the host height is measured here (see hostHeight).
+    ,
+    style: [mode === 'modal' ? styles.backdropModal : styles.backdropInline, {
+      backgroundColor: theme.colors.background.overlay
+    }],
+    onLayout: handleHostLayout,
+    testID: testID,
+    accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: backdropTapGesture,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close bottom sheet"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      // 'dialog' is a valid platform role on web/iOS; RN's typings list it as a string union
+      // that varies by platform — cast keeps strict-mode happy.
+      accessibilityRole: "alert",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
+      style: [styles.sheet, {
+        height: maxSnapPoint,
+        backgroundColor: theme.colors.background.elevated,
+        borderTopLeftRadius: theme.radius['2xl'],
+        borderTopRightRadius: theme.radius['2xl'],
+        ..._corners.smoothCorners,
+        ...theme.shadows.xl
+      }, containerStyle, sheetStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(SheetBody, {
+        style: [styles.body, bodyStyle],
+        keyboardOffset: keyboardOffset,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: panGesture,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.handleRow,
+            accessible: true,
+            accessibilityLabel: "Drag handle",
+            accessibilityHint: "Drag up or down to resize the sheet, or swipe down to close it",
+            testID: testID ? `${testID}-handle` : 'bottom-sheet-handle',
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.handle, {
+                backgroundColor: theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
+              }, handleIndicatorStyle]
+            })
+          })
+        }), header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.header, headerStyle],
+          children: header
+        }), scrollable ?
+        /*#__PURE__*/
+        // The ScrollView is registered as a native gesture so that, once
+        // it starts scrolling, gesture-handler cancels the React Native
+        // touch under the finger. Without it a fast flick that starts on
+        // a button inside the content released before the scroll had
+        // cancelled the press on iOS, and the button fired (a "Send" that
+        // closes the sheet looked like the flick closing it).
+        (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: contentGesture,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+            style: styles.content
+            // "always", not "handled": with "handled" the scroll responder
+            // blurs the focused input on release unless it has already seen
+            // a scroll event, and on iOS a fast flick releases before the
+            // first scroll event reaches JS, so the flick closed the
+            // keyboard. Taps on blank content therefore keep the keyboard;
+            // its own key, a backdrop tap or a handle drag still dismiss it.
+            ,
+            keyboardShouldPersistTaps: "always",
+            keyboardDismissMode: "none",
+            children: children
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.content,
+          children: children
+        }), footer != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.footer, footerStyle],
+          children: footer
+        })]
+      })
+    })]
+  });
+  const wrappedTree = /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomSheetContext.Provider, {
+    value: contextValue,
+    children: sheetTree
+  });
+  if (mode === 'modal') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      transparent: true,
+      visible: modalVisible,
+      onRequestClose: close,
+      statusBarTranslucent: true,
+      navigationBarTranslucent: true,
+      animationType: "none",
+      supportedOrientations: ['portrait', 'landscape'],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSafeAreaContext.SafeAreaProvider, {
+        style: styles.modalRoot,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TopInsetProbe, {
+          onChange: setModalTopInset
+        }), _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
+          style: styles.modalRoot,
+          children: wrappedTree
+        }) : wrappedTree]
+      })
+    });
+  }
+  return wrappedTree;
+});
+
+/**
+ * The sheet's inner column: handle, header, content, footer. Pads its bottom
+ * by the safe-area inset of the nearest provider, which in modal mode is the
+ * one inside the Modal (see there) and in inline mode the app's.
+ */
+/**
+ * Reads the top inset of the nearest safe-area provider and reports it up.
+ * Rendered inside the Modal's own provider so the sheet's top clamp follows
+ * the Modal window (status bar included on Android), not the app window.
+ */
+const TopInsetProbe = ({
+  onChange
+}) => {
+  const {
+    top
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  (0, _react.useEffect)(() => {
+    onChange(top);
+  }, [top, onChange]);
+  return null;
+};
+const SheetBody = ({
+  style,
+  keyboardOffset,
+  children
+}) => {
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const bottom = insets.bottom;
+  // The bottom safe-area padding keeps the footer clear of the gesture bar or
+  // home indicator. With the keyboard up that bar sits under the keyboard, so
+  // the padding would only be a blank strip above the keys: it shrinks by the
+  // covered height, to 0 once the keyboard covers the whole inset. Apps that
+  // want a gap above the keyboard add their own.
+  const paddingStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const remaining = bottom + keyboardOffset.value;
+    return {
+      paddingBottom: remaining > 0 ? remaining : 0
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [style, paddingStyle],
+    children: children
+  });
+};
+BottomSheet.displayName = 'BottomSheet';
+
+// ───────── Helpers ─────────
+
+const resolveSnapPoints = (points, screenH) => {
+  const resolved = points.map(p => {
+    if (typeof p === 'number') {
+      return p;
+    }
+    const pct = parseFloat(p);
+    if (Number.isNaN(pct)) {
+      return 0;
+    }
+    return pct / 100 * screenH;
+  });
+  return [...resolved].sort((a, b) => a - b);
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  backdropModal: {
+    // The backdrop is the modal's root View. On Fabric, an absolute-
+    // positioned root inside RNModal has no positioned ancestor and
+    // collapses to zero size, taking the scrim with it. `flex: 1` fills
+    // the modal content area reliably.
+    flex: 1
+  },
+  backdropInline: {
+    // Inline mode: overlay the parent. Parent must be positioned for this
+    // to take effect (the consumer is expected to render BottomSheet inside
+    // a relatively-positioned container).
+    ..._reactNative.StyleSheet.absoluteFill
+  },
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    // `top` is driven by the animated style (see sheetStyle). Omitted
+    // here so the static `0` doesn't fight the animated value during
+    // initial paint.
+    overflow: 'hidden'
+  },
+  body: {
+    // Height is animated to the visible part of the sheet (see bodyStyle);
+    // width follows the sheet.
+    overflow: 'hidden'
+  },
+  handleRow: {
+    // 40 px tall: the whole row is the drag target, not just the 4 px pill.
+    // The row, not a gesture hitSlop, sets the grab area (see panGesture).
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'stretch',
+    paddingTop: 12,
+    paddingBottom: 24
+  },
+  header: {
+    // No opinionated padding — slot owns its own styling. Sits between the
+    // drag handle and the scrollable content; does not flex.
+  },
+  footer: {
+    // Pinned to the bottom of the sheet (above the safe-area inset, which
+    // lives on SheetBody's paddingBottom). Does not flex, does not scroll
+    // with content. Rides with the keyboard via the sheet's `top` animation.
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    ..._corners.smoothCorners
+  },
+  content: {
+    flex: 1,
+    // Content taller than the area between header and footer is clipped
+    // here instead of drawing under the footer and the safe-area padding.
+    // Scrolling is the consumer's choice (wrap children in a ScrollView).
+    overflow: 'hidden'
+  },
+  modalRoot: {
+    flex: 1
+  }
+});
+var _default = exports.default = BottomSheet;
+//# sourceMappingURL=BottomSheet.js.map