@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -1,727 +1 @@
-"use strict";
-
-/**
- * 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
- */
-
-import React, { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Dimensions, Keyboard, Modal, Platform, ScrollView, StyleSheet, View } from 'react-native';
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from "../../theme/index.js";
-import { triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-
-/**
- * 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.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BottomSheetContext = /*#__PURE__*/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`).
- */
-export const useBottomSheet = () => {
-  const ctx = useContext(BottomSheetContext);
-  if (!ctx) {
-    throw new Error('useBottomSheet must be used inside a <BottomSheet>.');
-  }
-  return ctx;
-};
-const SPRING_CONFIG = {
-  damping: 20,
-  stiffness: 240,
-  mass: 1
-};
-const CLOSE_VELOCITY_THRESHOLD = 1000;
-const DRAG_ACTIVATION_OFFSET = 10;
-const BottomSheet = /*#__PURE__*/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 = useTheme();
-  const insets = 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] = useState(() => Dimensions.get('window').height);
-  const handleHostLayout = 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 = 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 = useSharedValue(closedY);
-  // Captures the translateY at gesture start so onUpdate can be additive.
-  const dragStartY = useSharedValue(closedY);
-  // Tracks current snap index on the JS thread (mirrored to a shared value for worklets).
-  const currentIndexShared = useSharedValue(-1);
-  const [currentIndex, setCurrentIndex] = useState(-1);
-  const isAnimatingRef = 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] = 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] = useState(false);
-
-  // Convert a snap-point index → translateY position. -1 = closed.
-  const yForIndex = 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 = useCallback(next => {
-    const previous = currentIndex;
-    if (previous === next) {
-      return;
-    }
-    setCurrentIndex(next);
-    currentIndexShared.value = next;
-    onChange?.(next);
-  }, [currentIndex, currentIndexShared, onChange]);
-  const markAnimationDone = 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 = useCallback((to, fromIndex, toIndex) => {
-    isAnimatingRef.current = true;
-    onAnimate?.(fromIndex, toIndex);
-    translateY.value = withSpring(to, SPRING_CONFIG, finished => {
-      'worklet';
-
-      if (finished) {
-        runOnJS(markAnimationDone)();
-      }
-    });
-  }, [onAnimate, translateY, markAnimationDone]);
-  const expand = 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 = 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 = useCallback(() => {
-    const fromIndex = currentIndexShared.value;
-    setIndexJS(-1);
-    isAnimatingRef.current = true;
-    onAnimate?.(fromIndex, -1);
-    translateY.value = withTiming(closedY, {
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.accelerate)
-    }, finished => {
-      'worklet';
-
-      if (finished) {
-        runOnJS(markAnimationDone)();
-      }
-    });
-  }, [closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
-  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
-  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 = 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
-  useEffect(() => {
-    if (lastHostHeight.current === hostHeight) {
-      return;
-    }
-    lastHostHeight.current = hostHeight;
-    translateY.value = 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 = useMemo(() => resolvedSnapPoints.map(h => hostHeight - h), [resolvedSnapPoints, hostHeight]);
-  const handleSnapEnd = useCallback((toIndex, toY) => {
-    const fromIndex = currentIndexShared.value;
-    if (toIndex === -1) {
-      triggerHaptic('selection');
-      setIndexJS(-1);
-      isAnimatingRef.current = true;
-      onAnimate?.(fromIndex, -1);
-      translateY.value = withTiming(closedY, {
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.accelerate)
-      }, finished => {
-        'worklet';
-
-        if (finished) {
-          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 = useMemo(() => Gesture.Native().withTestId(testID ? `${testID}-content-gesture` : 'bottom-sheet-content-gesture'), [testID]);
-  const panGesture = useMemo(() => {
-    const targets = snapTargets;
-    const closed = closedY;
-    const top = minTopY;
-    const canPanDownToClose = enablePanDownToClose;
-    return 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) {
-          runOnJS(handleSnapEnd)(-1, closed);
-          return;
-        }
-        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) {
-        runOnJS(handleSnapEnd)(-1, closed);
-        return;
-      }
-      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 = useSharedValue(0);
-  useEffect(() => {
-    if (keyboardBehavior === 'none') {
-      return;
-    }
-    const showEvt = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvt = 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 = withTiming(-overlap, {
-        duration: theme.motion.duration.normal
-      });
-    };
-    const onHide = () => {
-      keyboardOffset.value = withTiming(0, {
-        duration: theme.motion.duration.normal
-      });
-    };
-    const showSub = Keyboard.addListener(showEvt, onShow);
-    const hideSub = 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] = useState(insets.top);
-  const safeAreaTop = mode === 'modal' ? modalTopInset : insets.top;
-  const sheetStyle = 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 = 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 = useMemo(() => buildStyles(theme), [theme]);
-  const handleBackdropPress = useCallback(() => {
-    if (!enableBackdropPress) {
-      return;
-    }
-    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 = useMemo(() => Gesture.Tap().withTestId(testID ? `${testID}-backdrop-gesture` : 'bottom-sheet-backdrop-gesture').maxDuration(250).onEnd((_e, success) => {
-    'worklet';
-
-    if (!success) {
-      return;
-    }
-    runOnJS(handleBackdropPress)();
-  }), [handleBackdropPress, testID]);
-  const contextValue = 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__*/_jsxs(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__*/_jsx(GestureDetector, {
-      gesture: backdropTapGesture,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: StyleSheet.absoluteFill,
-        accessibilityRole: "button",
-        accessibilityLabel: "Close bottom sheet"
-      })
-    }), /*#__PURE__*/_jsx(Animated.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'],
-        ...smoothCorners,
-        ...theme.shadows.xl
-      }, containerStyle, sheetStyle],
-      children: /*#__PURE__*/_jsxs(SheetBody, {
-        style: [styles.body, bodyStyle],
-        keyboardOffset: keyboardOffset,
-        children: [/*#__PURE__*/_jsx(GestureDetector, {
-          gesture: panGesture,
-          children: /*#__PURE__*/_jsx(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__*/_jsx(View, {
-              style: [styles.handle, {
-                backgroundColor: theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
-              }, handleIndicatorStyle]
-            })
-          })
-        }), header != null && /*#__PURE__*/_jsx(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).
-        _jsx(GestureDetector, {
-          gesture: contentGesture,
-          children: /*#__PURE__*/_jsx(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__*/_jsx(View, {
-          style: styles.content,
-          children: children
-        }), footer != null && /*#__PURE__*/_jsx(View, {
-          style: [styles.footer, footerStyle],
-          children: footer
-        })]
-      })
-    })]
-  });
-  const wrappedTree = /*#__PURE__*/_jsx(BottomSheetContext.Provider, {
-    value: contextValue,
-    children: sheetTree
-  });
-  if (mode === 'modal') {
-    return /*#__PURE__*/_jsx(Modal, {
-      transparent: true,
-      visible: modalVisible,
-      onRequestClose: close,
-      statusBarTranslucent: true,
-      navigationBarTranslucent: true,
-      animationType: "none",
-      supportedOrientations: ['portrait', 'landscape'],
-      children: /*#__PURE__*/_jsxs(SafeAreaProvider, {
-        style: styles.modalRoot,
-        children: [/*#__PURE__*/_jsx(TopInsetProbe, {
-          onChange: setModalTopInset
-        }), Platform.OS === 'android' ? /*#__PURE__*/_jsx(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
-  } = useSafeAreaInsets();
-  useEffect(() => {
-    onChange(top);
-  }, [top, onChange]);
-  return null;
-};
-const SheetBody = ({
-  style,
-  keyboardOffset,
-  children
-}) => {
-  const insets = 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 = useAnimatedStyle(() => {
-    const remaining = bottom + keyboardOffset.value;
-    return {
-      paddingBottom: remaining > 0 ? remaining : 0
-    };
-  });
-  return /*#__PURE__*/_jsx(Animated.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 => 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).
-    ...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,
-    ...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
-  }
-});
-export { BottomSheet };
-export default BottomSheet;
-//# sourceMappingURL=BottomSheet.js.map
+import e,{createContext as t,forwardRef as o,useCallback as n,useContext as r,useEffect as a,useImperativeHandle as i,useMemo as l,useRef as s,useState as c}from"react";import{Dimensions as d,Modal as u,Platform as h,ScrollView as m,StyleSheet as p,useWindowDimensions as b,View as g}from"react-native";import{Gesture as f,GestureDetector as v,GestureHandlerRootView as y}from"react-native-gesture-handler";import{useReanimatedKeyboardAnimation as w}from"react-native-keyboard-controller";import x,{Easing as S,runOnJS as k,useAnimatedStyle as C,useDerivedValue as R,useSharedValue as T,withSpring as I,withTiming as L}from"react-native-reanimated";import{SafeAreaProvider as M,useSafeAreaInsets as B}from"react-native-safe-area-context";import{useTheme as D}from"../../theme/index.js";import{triggerHaptic as j}from"../../utils/index.js";import{smoothCorners as O}from"../../utils/corners.js";import{ToastHost as P}from"../Toast/ToastProvider.js";import{jsx as E,jsxs as V}from"react/jsx-runtime";const z=t(null);export const useBottomSheet=()=>{const e=r(z);if(!e)throw new Error("useBottomSheet must be used inside a <BottomSheet>.");return e};const H={damping:20,stiffness:240,mass:1},N=o((e,t)=>{const{snapPoints:o,index:r,onChange:N,onAnimate:$,onAfterClose:F,enablePanDownToClose:Y=!0,enableBackdropPress:A=!0,scrollable:q=!1,scrollRef:U,onScroll:X,onContentSizeChange:G,onScrollLayout:J,scrollEventThrottle:K,keyboardBehavior:Q="shift",mode:W="modal",presentation:Z="sheet",handleIndicatorStyle:_,containerStyle:ee,header:te,footer:oe,headerStyle:ne,footerStyle:re,children:ae,accessibilityLabel:ie,accessibilityViewIsModal:le,testID:se}=e,ce=D(),de=B(),[ue,he]=c(()=>d.get("window").height),[me,pe]=c(()=>d.get("window").width),be=n(e=>{const{height:t,width:o}=e.nativeEvent.layout;t>0&&he(e=>e===t?e:t),o>0&&pe(e=>e===o?e:o)},[]),ge=b(),fe="dialog"===Z||"auto"===Z&&Math.min(ge.width,ge.height)>=600,ve=Math.min(560,me-2*ce.spacing.xl),[ye,we]=c({top:de.top,bottom:de.bottom}),xe="modal"===W?ye.top:de.top,Se="modal"===W?ye.bottom:de.bottom,ke=o.includes("content"),[Ce,Re]=useMeasuredHeight(),[Te,Ie]=useMeasuredHeight(),[Le,Me,Be]=useMeasuredHeight(),[De,je]=useMeasuredHeight(),Oe=fe?ce.spacing.md:Ce,Pe=ke?Math.min(Oe+(null!=te?Te:0)+Le+(null!=oe?De:0)+Se,ue-xe):0,Ee=n((e,t)=>{ke&&Be(t),G?.(e,t)},[ke,G,Be]),Ve=l(()=>resolveSnapPoints(o,ue,Pe),[o,ue,Pe]),ze=ue,He=Ve[Ve.length-1]??0,Ne=T(ze),$e=T(ze),Fe=T(-1),[Ye,Ae]=c(-1),qe=s(!1),[Ue,Xe]=c(!1),[Ge,Je]=c(!1),Ke=s(!1),Qe=s(F);Qe.current=F;const[We,Ze]=c(!1),_e=n(e=>{if(e<0||e>=Ve.length)return ze;const t=Ve[e];return fe?(ue-t)/2:ue-t},[Ve,ue,ze,fe]),et=n(e=>{Ye!==e&&(Ae(e),Fe.value=e,N?.(e))},[Ye,Fe,N]),tt=n(()=>{qe.current=!1,Fe.value<0&&(Ke.current=!0,"modal"===W?(Xe(!1),"ios"!==h.OS&&Je(!1)):Ze(!1))},[W,Fe]),ot=n(()=>{Ke.current&&Je(!1)},[]);a(()=>{("modal"===W?!Ge:!We)&&Ke.current&&(Ke.current=!1,Qe.current?.())},[W,Ge,We]);const nt=n((e,t,o)=>{qe.current=!0,$?.(t,o),Ne.value=I(e,H,e=>{e&&k(tt)()})},[$,Ne,tt]),rt=n(e=>{const t="number"==typeof e?clamp(e,0,Ve.length-1):Ye>=0?Ye:0,o=Fe.value,n=_e(t);Ke.current=!1,"modal"===W?(Je(!0),Xe(!0)):Ze(!0),o<0&&(Ne.value=ze),et(t),nt(n,o,t)},[nt,ze,Ye,Fe,W,Ve.length,et,Ne,_e]),at=n(()=>{if(0===Ve.length)return;const e=Fe.value,t=_e(0);et(0),nt(t,e,0)},[nt,Fe,Ve.length,et,_e]),it=n(()=>{const e=Fe.value;et(-1),qe.current=!0,$?.(e,-1),Ne.value=L(ze,{duration:ce.motion.duration.fast,easing:S.bezier(...ce.motion.easing.accelerate)},e=>{e&&k(tt)()})},[ze,Fe,tt,$,et,Ne,ce.motion.duration.fast,ce.motion.easing.accelerate]);i(t,()=>({expand:rt,collapse:at,close:it}),[rt,at,it]),a(()=>{"number"==typeof r&&r!==Ye&&(-1===r?it():rt(r))},[r]);const lt=s({hostHeight:ue,contentSnap:Pe});a(()=>{const e=lt.current;e.hostHeight===ue&&e.contentSnap===Pe||(lt.current={hostHeight:ue,contentSnap:Pe},e.hostHeight===ue&&Fe.value<0||(Ne.value=I(_e(Fe.value),H)))},[ue,Pe]);const st=ue-He,ct=l(()=>Ve.map(e=>ue-e),[Ve,ue]),dt=n((e,t)=>{const o=Fe.value;if(-1===e)return j("selection"),et(-1),qe.current=!0,$?.(o,-1),void(Ne.value=L(ze,{duration:ce.motion.duration.fast,easing:S.bezier(...ce.motion.easing.accelerate)},e=>{e&&k(tt)()}));et(e),nt(t,o,e)},[nt,ze,Fe,tt,$,et,Ne,ce.motion.duration.fast,ce.motion.easing.accelerate]),ut=l(()=>f.Native().withTestId(se?`${se}-content-gesture`:"bottom-sheet-content-gesture"),[se]),ht=l(()=>{const e=ct,t=ze,o=st,n=Y;return f.Pan().withTestId(se?`${se}-pan-gesture`:"bottom-sheet-pan-gesture").activeOffsetY([-10,10]).failOffsetX([-15,15]).onStart(()=>{$e.value=Ne.value}).onUpdate(e=>{const t=$e.value+e.translationY;Ne.value=t<o?o+.25*(t-o):t}).onEnd(o=>{const r=Ne.value;if(o.velocityY>1e3)return n?void k(dt)(-1,t):void k(dt)(0,e[0]);let a=0,i=Math.abs(r-e[0]);for(let t=1;t<e.length;t++){const o=Math.abs(r-e[t]);o<i&&(i=o,a=t)}const l=e[0];n&&r-l>80?k(dt)(-1,t):k(dt)(a,e[a])})},[ze,$e,Y,dt,st,ct,se,Ne]),{height:mt}=w(),pt="shift"===Q,bt=R(()=>pt?mt.value:0),gt=Ve[Ye>=0?Ye:0]??He,ft=ce.spacing.md,vt=C(()=>{if(fe){const e=bt.value,t=ue+e-gt-ft,o=e<0&&Ne.value>t?t:Ne.value;return{top:o<xe?xe:o}}const e=Ne.value+bt.value,t=bt.value<0?xe:st;return{top:e<t?t:e}}),yt=C(()=>{const e=bt.value;if(fe){const t=ue+e-gt-ft,o=e<0&&Ne.value>t?t:Ne.value,n=ue+e-ft-(o<xe?xe:o);return{height:n<0?0:n>gt?gt:n}}const t=e<0?xe:st,o=Ne.value+e,n=ue+e-(o<t?t:o);return{height:n<0?0:n>He?He:n}}),wt=Ye>=0,xt=l(()=>buildStyles(ce),[ce]),St=n(()=>{A&&(j("selection"),it())},[A,it]),kt=l(()=>f.Tap().withTestId(se?`${se}-backdrop-gesture`:"bottom-sheet-backdrop-gesture").maxDuration(250).onEnd((e,t)=>{t&&k(St)()}),[St,se]),Ct=l(()=>({snapIndex:Ye,snapPoints:Ve,expand:rt,collapse:at,close:it}),[Ye,Ve,rt,at,it]);if("inline"===W&&!We)return null;if("modal"===W&&!Ge)return null;const Rt=V(g,{collapsable:!1,style:["modal"===W?xt.backdropModal:xt.backdropInline,{backgroundColor:ce.colors.background.overlay}],onLayout:be,testID:se,accessibilityViewIsModal:le??wt,children:[E(v,{gesture:kt,children:E(x.View,{style:p.absoluteFill,accessibilityRole:"button",accessibilityLabel:"Close bottom sheet"})}),E(x.View,{accessibilityRole:"alert",accessibilityLabel:ie,accessibilityViewIsModal:le??wt,style:[xt.sheet,{height:He,backgroundColor:ce.colors.background.elevated,borderTopLeftRadius:ce.radius["2xl"],borderTopRightRadius:ce.radius["2xl"],...O,...ce.shadows.xl},fe?{height:gt,left:(me-ve)/2,right:void 0,width:ve,borderBottomLeftRadius:ce.radius["2xl"],borderBottomRightRadius:ce.radius["2xl"]}:null,ee,vt],children:V(SheetBody,{style:[xt.body,yt],keyboardOffset:bt,children:[fe?E(g,{style:{height:ce.spacing.md}}):E(v,{gesture:ht,children:E(g,{style:xt.handleRow,onLayout:ke?Re:void 0,accessible:!0,accessibilityLabel:"Drag handle",accessibilityHint:"Drag up or down to resize the sheet, or swipe down to close it",testID:se?`${se}-handle`:"bottom-sheet-handle",children:E(g,{style:[xt.handle,{backgroundColor:ce.components.bottomSheet?.handleColor??ce.colors.border.primary},_]})})}),null!=te&&E(g,{style:[xt.header,ne],onLayout:ke?Ie:void 0,children:te}),q?E(v,{gesture:ut,children:E(m,{ref:U,style:xt.content,onScroll:X,onContentSizeChange:Ee,onLayout:J,scrollEventThrottle:K,keyboardShouldPersistTaps:"always",keyboardDismissMode:"none",children:ae})}):E(g,{style:xt.content,children:ke?E(g,{onLayout:Me,children:ae}):ae}),null!=oe&&E(g,{style:[xt.footer,re],onLayout:ke?je:void 0,children:oe})]})})]}),Tt=E(z.Provider,{value:Ct,children:Rt});return"modal"===W?E(u,{transparent:!0,visible:Ue,onRequestClose:it,onDismiss:"ios"===h.OS?ot:void 0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",supportedOrientations:["portrait","landscape"],children:V(M,{style:xt.modalRoot,children:[E(InsetsProbe,{onChange:we}),"android"===h.OS?E(y,{style:xt.modalRoot,children:Tt}):Tt,E(P,{})]})}):Tt}),InsetsProbe=({onChange:e})=>{const{top:t,bottom:o}=B();return a(()=>{e(e=>e.top===t&&e.bottom===o?e:{top:t,bottom:o})},[t,o,e]),null},SheetBody=({style:e,keyboardOffset:t,children:o})=>{const n=B().bottom,r=C(()=>{const e=n+t.value;return{paddingBottom:e>0?e:0}});return E(x.View,{style:[e,r],children:o})};N.displayName="BottomSheet";const useMeasuredHeight=()=>{const[e,t]=c(0),o=n(e=>{t(t=>t===e?t:e)},[]);return[e,n(e=>o(e.nativeEvent.layout.height),[o]),o]},resolveSnapPoints=(e,t,o)=>[...e.map(e=>{if("number"==typeof e)return e;if("content"===e)return o;const n=parseFloat(e);return Number.isNaN(n)?0:n/100*t})].sort((e,t)=>e-t),clamp=(e,t,o)=>Math.min(Math.max(e,t),o),buildStyles=e=>p.create({backdropModal:{flex:1},backdropInline:{...p.absoluteFill},sheet:{position:"absolute",left:0,right:0,overflow:"hidden"},body:{overflow:"hidden"},handleRow:{alignItems:"center",justifyContent:"center",alignSelf:"stretch",paddingTop:12,paddingBottom:24},header:{},footer:{},handle:{width:36,height:4,borderRadius:2,...O},content:{flex:1,overflow:"hidden"},modalRoot:{flex:1}});export{N as BottomSheet};export default N;