@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,558 @@
+"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 _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,
+    keyboardBehavior = 'none',
+    mode = 'modal',
+    handleIndicatorStyle,
+    containerStyle,
+    header,
+    footer,
+    headerStyle,
+    footerStyle,
+    children,
+    accessibilityLabel,
+    accessibilityViewIsModal,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const [screenHeight, setScreenHeight] = (0, _react.useState)(() => _reactNative.Dimensions.get('window').height);
+
+  // Resolve snap points (px values), sorted ascending so larger height = smaller translateY.
+  const resolvedSnapPoints = (0, _react.useMemo)(() => resolveSnapPoints(snapPoints, screenHeight), [snapPoints, screenHeight]);
+
+  // Listen for orientation / window changes so % snap points stay accurate.
+  (0, _react.useEffect)(() => {
+    const sub = _reactNative.Dimensions.addEventListener('change', ({
+      window
+    }) => {
+      setScreenHeight(window.height);
+    });
+    return () => sub.remove();
+  }, []);
+  const closedY = screenHeight; // fully off-screen
+  const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
+
+  // translateY: 0 = top of screen, screenHeight = 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 => {
+    if (idx < 0 || idx >= resolvedSnapPoints.length) {
+      return closedY;
+    }
+    const sheetHeight = resolvedSnapPoints[idx];
+    return screenHeight - sheetHeight;
+  }, [resolvedSnapPoints, screenHeight, 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]);
+
+  // ───────── Gesture (UI thread) ─────────
+  // Worklet helpers must be declared inline so they capture shared values correctly.
+  const minTopY = screenHeight - maxSnapPoint; // smallest translateY (sheet fully expanded)
+  const snapTargets = (0, _react.useMemo)(() => resolvedSnapPoints.map(h => screenHeight - h), [resolvedSnapPoints, screenHeight]);
+  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]);
+  const panGesture = (0, _react.useMemo)(() => {
+    const targets = snapTargets;
+    const closed = closedY;
+    const top = minTopY;
+    const canPanDownToClose = enablePanDownToClose;
+    return _reactNativeGestureHandler.Gesture.Pan().activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]).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, translateY]);
+
+  // ───────── Keyboard tracking ─────────
+  // keyboardOffset is added to translateY in sheetStyle so we don't disturb
+  // snap-point math. 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 h = e.endCoordinates?.height ?? 0;
+      keyboardOffset.value = (0, _reactNativeReanimated.withTiming)(-h, {
+        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();
+    };
+  }, [keyboardBehavior, keyboardOffset, theme.motion.duration.normal]);
+
+  // ───────── Animated styles ─────────
+  const safeAreaTop = 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
+    };
+  });
+  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().maxDuration(250).onEnd((_e, success) => {
+    'worklet';
+
+    if (!success) {
+      return;
+    }
+    (0, _reactNativeReanimated.runOnJS)(handleBackdropPress)();
+  }), [handleBackdropPress]);
+  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.
+    ,
+    style: [mode === 'modal' ? styles.backdropModal : styles.backdropInline, {
+      backgroundColor: theme.colors.background.overlay
+    }],
+    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)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_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'],
+          paddingBottom: insets.bottom,
+          ...theme.shadows.xl
+        }, containerStyle, sheetStyle],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.handleRow,
+          pointerEvents: "box-none",
+          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
+        }), /*#__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: _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
+        style: styles.modalRoot,
+        children: wrappedTree
+      }) : wrappedTree
+    });
+  }
+  return wrappedTree;
+});
+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'
+  },
+  handleRow: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 10,
+    paddingBottom: 8
+  },
+  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 safe-area inset, which lives
+    // on the sheet'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
+  },
+  content: {
+    flex: 1
+  },
+  modalRoot: {
+    flex: 1
+  }
+});
+var _default = exports.default = BottomSheet;
+//# sourceMappingURL=BottomSheet.js.map

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.BottomSheet;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.default;
+  }
+});
+Object.defineProperty(exports, "useBottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.useBottomSheet;
+  }
+});
+var _BottomSheet = _interopRequireWildcard(require("./BottomSheet.js"));
+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); }
+//# sourceMappingURL=index.js.map