react-modal-sheet 4.3.0 → 5.0.0

package/dist/index.mjs

@@ -1,195 +1,14 @@
+import { motion, useTransform, useMotionValue, useReducedMotion, animate } from 'motion/react';
+import React4, { forwardRef, createContext, useRef, useState, useImperativeHandle, useContext, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import React2, { createContext, forwardRef, useRef, useEffect, useLayoutEffect, useImperativeHandle, useMemo, Children, cloneElement, useState, useCallback, useContext } from 'react';
-import { useMotionValue, useReducedMotion, useTransform, animate, motion, AnimatePresence } from 'motion/react';
+import useMeasure from 'react-use-measure';
 import { transform } from 'motion';
 
-// src/sheet.tsx
-
-// src/constants.ts
-var MAX_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
-var IS_SSR = typeof window === "undefined";
-var DEFAULT_TWEEN_CONFIG = {
-  ease: "easeOut",
-  duration: 0.2
-};
-var REDUCED_MOTION_TWEEN_CONFIG = {
-  ease: "linear",
-  duration: 0.01
-};
-var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
-var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
-
-// src/utils.ts
-function getSheetHeight(sheetRef) {
-  const sheetEl = sheetRef.current;
-  if (!sheetEl) {
-    console.warn(
-      "Sheet height is not available because the sheet element is not mounted yet."
-    );
-    return 0;
-  }
-  return Math.round(sheetEl.getBoundingClientRect().height);
-}
-function getSnapPoints({
-  snapPointsProp,
-  sheetHeight
-}) {
-  const snapPointValues = snapPointsProp.map((point) => {
-    if (point > 0 && point <= 1) {
-      return Math.round(point * sheetHeight);
-    }
-    return point < 0 ? sheetHeight + point : point;
-  });
-  console.assert(
-    inDescendingOrder(snapPointValues) || sheetHeight === 0,
-    `Snap points need to be in descending order got: [${snapPointsProp.join(", ")}]`
-  );
-  return snapPointValues;
-}
-function getClosestSnapPoint({
-  snapPoints,
-  currentY,
-  sheetHeight,
-  detent
-}) {
-  const snapInverse = snapPoints.map(
-    (p) => sheetHeight - Math.min(p, sheetHeight)
-  );
-  if (detent === "content-height" && !snapInverse.includes(0)) {
-    snapInverse.unshift(0);
-  }
-  const snapTo = getClosest(snapInverse, currentY);
-  const snapIndex = snapInverse.indexOf(snapTo);
-  const snapY = validateSnapTo({
-    snapTo: getClosest(snapInverse, currentY),
-    sheetHeight
-  });
-  return { snapY, snapIndex };
-}
-function getClosest(nums, goal) {
-  let closest = nums[0];
-  let minDifference = Math.abs(nums[0] - goal);
-  for (let i = 1; i < nums.length; i++) {
-    const difference = Math.abs(nums[i] - goal);
-    if (difference < minDifference) {
-      closest = nums[i];
-      minDifference = difference;
-    }
-  }
-  return closest;
-}
-function inDescendingOrder(arr) {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i + 1] > arr[i]) return false;
-  }
-  return true;
-}
-function getSnapY({
-  sheetHeight,
-  snapPoints,
-  snapIndex
-}) {
-  const snapPoint = snapPoints[snapIndex];
-  if (snapPoint === void 0) {
-    console.warn(
-      `Invalid snap index ${snapIndex}. Snap points are: [${snapPoints.join(", ")}]`
-    );
-    return null;
-  }
-  const y = validateSnapTo({ snapTo: sheetHeight - snapPoint, sheetHeight });
-  return y;
-}
-function validateSnapTo({
-  snapTo,
-  sheetHeight
-}) {
-  if (snapTo < 0) {
-    console.warn(
-      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight + Math.abs(snapTo)}.`
-    );
-  }
-  return Math.max(Math.round(snapTo), 0);
-}
-function mergeRefs(refs) {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref) {
-        ref.current = value;
-      }
-    });
-  };
-}
-function isTouchDevice() {
-  if (IS_SSR) return false;
-  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
-}
-function testPlatform(re) {
-  var _a;
-  return typeof window !== "undefined" && window.navigator != null ? re.test(
-    // @ts-expect-error
-    ((_a = window.navigator.userAgentData) == null ? void 0 : _a.platform) || window.navigator.platform
-  ) : false;
-}
-function cached(fn) {
-  let res = null;
-  return () => {
-    if (res == null) {
-      res = fn();
-    }
-    return res;
-  };
-}
-var isMac = cached(function() {
-  return testPlatform(/^Mac/i);
-});
-var isIPhone = cached(function() {
-  return testPlatform(/^iPhone/i);
-});
-var isIPad = cached(function() {
-  return testPlatform(/^iPad/i) || isMac() && navigator.maxTouchPoints > 1;
-});
-var isIOS = cached(function() {
-  return isIPhone() || isIPad();
-});
-var SheetContext = createContext(
-  void 0
-);
-function useSheetContext() {
-  const context = useContext(SheetContext);
-  if (!context) throw new Error("Sheet context error");
-  return context;
-}
-var SheetScrollerContext = createContext(void 0);
-function SheetScrollerContextProvider({
-  children
-}) {
-  const sheetContext = useSheetContext();
-  const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);
-  function setDragEnabled() {
-    if (!sheetContext.disableDrag) setDisableDrag(false);
-  }
-  function setDragDisabled() {
-    if (!disableDrag) setDisableDrag(true);
-  }
-  return /* @__PURE__ */ React2.createElement(
-    SheetScrollerContext.Provider,
-    {
-      value: { disableDrag, setDragEnabled, setDragDisabled }
-    },
-    children
-  );
-}
-function useSheetScrollerContext() {
-  const context = useContext(SheetScrollerContext);
-  if (!context) throw new Error("Sheet scroller context error");
-  return context;
-}
+// src/SheetBackdrop.tsx
 
 // src/styles.ts
 var styles = {
-  wrapper: {
+  root: {
     position: "fixed",
     top: 0,
     bottom: 0,
@@ -255,7 +74,319 @@ var styles = {
     overscrollBehaviorY: "none"
   }
 };
+
+// src/SheetBackdrop.tsx
+var isClickable = (props) => !!props.onClick || !!props.onTap;
+var SheetBackdrop = forwardRef(
+  ({ style, className = "", ...rest }, ref) => {
+    const clickable = isClickable(rest);
+    const Comp = clickable ? motion.button : motion.div;
+    const pointerEvents = clickable ? "auto" : "none";
+    return /* @__PURE__ */ React4.createElement(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: `react-modal-sheet-backdrop ${className}`,
+        style: { ...styles.backdrop, ...style, pointerEvents },
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 1 }
+      }
+    );
+  }
+);
+SheetBackdrop.displayName = "SheetBackdrop";
+
+// src/constants.ts
+var DEFAULT_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
+var IS_SSR = typeof window === "undefined";
+var DEFAULT_TWEEN_CONFIG = {
+  ease: "easeOut",
+  duration: 0.2
+};
+var REDUCED_MOTION_TWEEN_CONFIG = {
+  ease: "linear",
+  duration: 0.01
+};
+var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
+var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
+var SheetContext = createContext(
+  void 0
+);
+function useSheetContext() {
+  const context = useContext(SheetContext);
+  if (!context) throw new Error("Sheet context error");
+  return context;
+}
+
+// src/utils.ts
+function isAscendingOrder(arr) {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i + 1] < arr[i]) return false;
+  }
+  return true;
+}
+function mergeRefs(refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref) {
+        ref.current = value;
+      }
+    });
+  };
+}
+function testPlatform(re) {
+  var _a;
+  return typeof window !== "undefined" && window.navigator != null ? re.test(
+    // @ts-expect-error
+    ((_a = window.navigator.userAgentData) == null ? void 0 : _a.platform) || window.navigator.platform
+  ) : false;
+}
+function cached(fn) {
+  let res = null;
+  return () => {
+    if (res == null) {
+      res = fn();
+    }
+    return res;
+  };
+}
+var isMac = cached(function() {
+  return testPlatform(/^Mac/i);
+});
+var isIPhone = cached(function() {
+  return testPlatform(/^iPhone/i);
+});
+var isIPad = cached(function() {
+  return testPlatform(/^iPad/i) || isMac() && navigator.maxTouchPoints > 1;
+});
+var isIOS = cached(function() {
+  return isIPhone() || isIPad();
+});
+
+// src/SheetContainer.tsx
+var SheetContainer = forwardRef(
+  ({ children, style, className = "", ...rest }, ref) => {
+    const sheetContext = useSheetContext();
+    const containerStyle = {
+      ...styles.container,
+      ...style,
+      y: sheetContext.y
+    };
+    if (sheetContext.detent === "default") {
+      containerStyle.height = DEFAULT_HEIGHT;
+    }
+    if (sheetContext.detent === "full") {
+      containerStyle.height = "100%";
+      containerStyle.maxHeight = "100%";
+    }
+    if (sheetContext.detent === "content") {
+      containerStyle.height = "auto";
+      containerStyle.maxHeight = DEFAULT_HEIGHT;
+    }
+    return /* @__PURE__ */ React4.createElement(
+      motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([
+          ref,
+          sheetContext.sheetRef,
+          sheetContext.sheetBoundsRef
+        ]),
+        className: `react-modal-sheet-container ${className}`,
+        style: containerStyle
+      },
+      children
+    );
+  }
+);
+SheetContainer.displayName = "SheetContainer";
+var constraints = { bottom: 0, top: 0, left: 0, right: 0 };
+function useDragConstraints() {
+  const ref = useRef(null);
+  const onMeasure = useCallback(() => constraints, []);
+  return { ref, onMeasure };
+}
+function useScrollPosition() {
+  const ref = useRef(null);
+  const [scrollPosition, setScrollPosition] = useState(void 0);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    let scrollTimeout = null;
+    function determineScrollPosition(element2) {
+      const { scrollTop, scrollHeight, clientHeight } = element2;
+      const isScrollable2 = scrollHeight > clientHeight;
+      if (!isScrollable2) {
+        if (scrollPosition) setScrollPosition(void 0);
+        return;
+      }
+      const isAtTop = scrollTop <= 0;
+      const isAtBottom = Math.ceil(scrollHeight) - Math.ceil(scrollTop) === Math.ceil(clientHeight);
+      let position;
+      if (isAtTop) {
+        position = "top";
+      } else if (isAtBottom) {
+        position = "bottom";
+      } else {
+        position = "middle";
+      }
+      if (position === scrollPosition) return;
+      setScrollPosition(position);
+    }
+    function onScroll(event) {
+      if (event.currentTarget instanceof HTMLDivElement) {
+        const el = event.currentTarget;
+        if (scrollTimeout) clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => determineScrollPosition(el), 32);
+      }
+    }
+    function onTouchStart(event) {
+      if (event.currentTarget instanceof HTMLDivElement) {
+        determineScrollPosition(event.currentTarget);
+      }
+    }
+    determineScrollPosition(element);
+    element.addEventListener("scroll", onScroll);
+    element.addEventListener("touchstart", onTouchStart);
+    return () => {
+      if (scrollTimeout) clearTimeout(scrollTimeout);
+      element.removeEventListener("scroll", onScroll);
+      element.removeEventListener("touchstart", onTouchStart);
+    };
+  }, []);
+  return { ref, scrollPosition };
+}
+
+// src/SheetContent.tsx
+var SheetContent = forwardRef(
+  ({
+    disableScroll: disableScrollProp,
+    disableDrag: disableDragProp,
+    children,
+    style: styleProp,
+    className = "",
+    scrollRef: scrollRefProp = null,
+    ...rest
+  }, ref) => {
+    const sheetContext = useSheetContext();
+    const dragConstraints = useDragConstraints();
+    const scroll = useScrollPosition();
+    const disableScroll = typeof disableScrollProp === "function" ? disableScrollProp({
+      scrollPosition: scroll.scrollPosition,
+      currentSnap: sheetContext.currentSnap
+    }) : Boolean(disableScrollProp);
+    const disableDragDueToScroll = !disableScroll && scroll.scrollPosition && scroll.scrollPosition !== "top";
+    const disableDragDueToProp = typeof disableDragProp === "function" ? disableDragProp({
+      scrollPosition: scroll.scrollPosition,
+      currentSnap: sheetContext.currentSnap
+    }) : Boolean(disableDragProp);
+    const disableDrag = disableDragDueToProp || disableDragDueToScroll || sheetContext.disableDrag;
+    const dragProps = disableDrag || sheetContext.disableDrag ? void 0 : sheetContext.dragProps;
+    const contentStyle = {
+      ...styles.content,
+      ...styleProp
+    };
+    const scrollStyle = {
+      ...styles.scroller
+    };
+    if (sheetContext.avoidKeyboard) {
+      scrollStyle.paddingBottom = "env(keyboard-inset-height, var(--keyboard-inset-height, 0px))";
+    }
+    if (disableScroll) {
+      scrollStyle.overflowY = "hidden";
+    }
+    return /* @__PURE__ */ React4.createElement(
+      motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([ref, dragConstraints.ref]),
+        className: `react-modal-sheet-content ${className}`,
+        style: contentStyle,
+        ...dragProps,
+        dragConstraints: dragConstraints.ref,
+        onMeasureDragConstraints: dragConstraints.onMeasure
+      },
+      /* @__PURE__ */ React4.createElement(
+        motion.div,
+        {
+          ref: mergeRefs([scroll.ref, scrollRefProp]),
+          style: scrollStyle,
+          className: "react-modal-sheet-content-scroller"
+        },
+        children
+      )
+    );
+  }
+);
+SheetContent.displayName = "SheetContent";
+var SheetHeader = forwardRef(
+  ({ children, style, disableDrag, ...rest }, ref) => {
+    const sheetContext = useSheetContext();
+    const dragConstraints = useDragConstraints();
+    const dragProps = disableDrag || sheetContext.disableDrag ? void 0 : sheetContext.dragProps;
+    const indicator1Transform = useTransform(
+      sheetContext.indicatorRotation,
+      (r) => `translateX(2px) rotate(${r}deg)`
+    );
+    const indicator2Transform = useTransform(
+      sheetContext.indicatorRotation,
+      (r) => `translateX(-2px) rotate(${ -1 * r}deg)`
+    );
+    return /* @__PURE__ */ React4.createElement(
+      motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([ref, dragConstraints.ref]),
+        style: { ...styles.headerWrapper, ...style },
+        ...dragProps,
+        dragConstraints: dragConstraints.ref,
+        onMeasureDragConstraints: dragConstraints.onMeasure
+      },
+      children || /* @__PURE__ */ React4.createElement("div", { className: "react-modal-sheet-header", style: styles.header }, /* @__PURE__ */ React4.createElement(
+        motion.span,
+        {
+          className: "react-modal-sheet-drag-indicator",
+          style: { ...styles.indicator, transform: indicator1Transform }
+        }
+      ), /* @__PURE__ */ React4.createElement(
+        motion.span,
+        {
+          className: "react-modal-sheet-drag-indicator",
+          style: { ...styles.indicator, transform: indicator2Transform }
+        }
+      ))
+    );
+  }
+);
+SheetHeader.displayName = "SheetHeader";
 var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
+
+// src/hooks/use-dimensions.ts
+function useDimensions() {
+  const [dimensions, setDimensions] = useState(() => ({
+    windowHeight: !IS_SSR ? window.innerHeight : 0,
+    windowWidth: !IS_SSR ? window.innerWidth : 0
+  }));
+  useIsomorphicLayoutEffect(() => {
+    function handler() {
+      setDimensions({
+        windowHeight: window.innerHeight,
+        windowWidth: window.innerWidth
+      });
+    }
+    handler();
+    window.addEventListener("resize", handler);
+    return () => {
+      window.removeEventListener("resize", handler);
+    };
+  }, []);
+  return dimensions;
+}
 function useSafeAreaInsets() {
   const [insets] = useState(() => {
     const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
@@ -287,12 +418,18 @@ function getComputedValue(computed, property) {
 // src/hooks/use-modal-effect.ts
 function useModalEffect({
   y,
-  rootId,
-  sheetRef,
-  snapPointsProp,
+  detent,
+  rootId: _rootId,
+  sheetHeight,
+  snapPoints,
   startThreshold
 }) {
   const insetTop = useSafeAreaInsets().top;
+  let rootId = _rootId;
+  if (rootId && detent === "full") {
+    console.warn('Using "full" detent with modal effect is not supported.');
+    rootId = void 0;
+  }
   useIsomorphicLayoutEffect(() => {
     return () => {
       if (rootId) cleanupModalEffect(rootId);
@@ -302,18 +439,15 @@ function useModalEffect({
     if (!rootId) return;
     const root = document.querySelector(`#${rootId}`);
     if (!root) return;
-    let sheetHeight = 0;
     const removeStartListener = y.on("animationStart", () => {
-      sheetHeight = getSheetHeight(sheetRef);
       setupModalEffect(rootId);
     });
     const removeChangeListener = y.on("change", (yValue) => {
       if (!root) return;
       let progress = Math.max(0, 1 - yValue / sheetHeight);
-      const snapPoints = snapPointsProp ? getSnapPoints({ snapPointsProp, sheetHeight }) : void 0;
-      const snapThresholdPoint = snapPoints && snapPoints.length > 1 ? snapPoints[1] : void 0;
+      const snapThresholdPoint = snapPoints.length > 1 ? snapPoints[snapPoints.length - 2] : void 0;
       if (snapThresholdPoint !== void 0) {
-        const snapThresholdValue = sheetHeight - Math.min(snapThresholdPoint, sheetHeight);
+        const snapThresholdValue = snapThresholdPoint.snapValueY;
         if (yValue <= snapThresholdValue) {
           progress = (snapThresholdValue - yValue) / snapThresholdValue;
         } else {
@@ -350,7 +484,7 @@ function useModalEffect({
       removeCompleteListener();
       removeCancelListener();
     };
-  }, [y, rootId, insetTop, startThreshold, snapPointsProp]);
+  }, [y, rootId, insetTop, startThreshold, sheetHeight]);
 }
 function setupModalEffect(rootId) {
   const root = document.querySelector(`#${rootId}`);
@@ -377,36 +511,6 @@ function cleanupModalEffect(rootId) {
   root.style.removeProperty("border-top-right-radius");
   root.style.removeProperty("border-top-left-radius");
 }
-function useDimensions() {
-  const [dimensions, setDimensions] = useState(() => ({
-    height: !IS_SSR ? window.innerHeight : 0,
-    width: !IS_SSR ? window.innerWidth : 0
-  }));
-  useIsomorphicLayoutEffect(() => {
-    function handler() {
-      setDimensions({
-        height: window.innerHeight,
-        width: window.innerWidth
-      });
-    }
-    handler();
-    window.addEventListener("resize", handler);
-    return () => {
-      window.removeEventListener("resize", handler);
-    };
-  }, []);
-  return dimensions;
-}
-function useStableCallback(handler) {
-  const handlerRef = useRef(void 0);
-  useIsomorphicLayoutEffect(() => {
-    handlerRef.current = handler;
-  });
-  return useCallback((...args) => {
-    const fn = handlerRef.current;
-    return fn == null ? void 0 : fn(...args);
-  }, []);
-}
 
 // src/hooks/use-prevent-scroll.ts
 var KEYBOARD_BUFFER = 24;
@@ -585,121 +689,407 @@ function preventScrollMobileSafari() {
     addEvent(document, "focus", onFocus, true),
     addEvent(window, "scroll", onWindowScroll)
   );
-  return () => {
-    restoreStyles();
-    removeEvents();
-    window.scrollTo(scrollX, scrollY);
-  };
+  return () => {
+    restoreStyles();
+    removeEvents();
+    window.scrollTo(scrollX, scrollY);
+  };
+}
+function setStyle(element, style, value) {
+  const cur = element.style[style];
+  element.style[style] = value;
+  return () => {
+    element.style[style] = cur;
+  };
+}
+function addEvent(target, event, handler, options) {
+  target.addEventListener(event, handler, options);
+  return () => {
+    target.removeEventListener(event, handler, options);
+  };
+}
+function scrollIntoView(target) {
+  const root = document.scrollingElement || document.documentElement;
+  while (target && target !== root) {
+    const scrollable = getScrollParent(target);
+    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
+      const scrollableTop = scrollable.getBoundingClientRect().top;
+      const targetTop = target.getBoundingClientRect().top;
+      const targetBottom = target.getBoundingClientRect().bottom;
+      const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
+      if (targetBottom > keyboardHeight) {
+        scrollable.scrollTop += targetTop - scrollableTop;
+      }
+    }
+    target = scrollable.parentElement;
+  }
+}
+function willOpenKeyboard(target) {
+  return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
+function useStableCallback(handler) {
+  const handlerRef = useRef(void 0);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return useCallback((...args) => {
+    const fn = handlerRef.current;
+    return fn == null ? void 0 : fn(...args);
+  }, []);
+}
+
+// src/hooks/use-sheet-state.ts
+function useSheetState({
+  isOpen,
+  onClosed: _onClosed,
+  onOpening: _onOpening,
+  onOpen: _onOpen,
+  onClosing: _onClosing
+}) {
+  const [state, setState] = useState(isOpen ? "opening" : "closed");
+  const onClosed = useStableCallback(() => _onClosed == null ? void 0 : _onClosed());
+  const onOpening = useStableCallback(() => _onOpening == null ? void 0 : _onOpening());
+  const onOpen = useStableCallback(() => _onOpen == null ? void 0 : _onOpen());
+  const onClosing = useStableCallback(() => _onClosing == null ? void 0 : _onClosing());
+  useEffect(() => {
+    if (isOpen && state === "closed") {
+      setState("opening");
+    } else if (!isOpen && (state === "open" || state === "opening")) {
+      setState("closing");
+    }
+  }, [isOpen, state]);
+  useEffect(() => {
+    async function handle() {
+      switch (state) {
+        case "closed":
+          await (onClosed == null ? void 0 : onClosed());
+          break;
+        case "opening":
+          await (onOpening == null ? void 0 : onOpening());
+          setState("open");
+          break;
+        case "open":
+          await (onOpen == null ? void 0 : onOpen());
+          break;
+        case "closing":
+          await (onClosing == null ? void 0 : onClosing());
+          setState("closed");
+          break;
+      }
+    }
+    handle().catch((error) => {
+      console.error("Internal sheet state error:", error);
+    });
+  }, [state]);
+  return state;
+}
+function useVirtualKeyboard({
+  containerRef,
+  isEnabled = true,
+  debounceDelay = 100,
+  includeContentEditable = true,
+  visualViewportThreshold = 100
+}) {
+  const [state, setState] = useState({
+    isVisible: false,
+    height: 0
+  });
+  const focusedElementRef = useRef(null);
+  const debounceTimer = useRef(null);
+  const isTextInput = useStableCallback((el) => {
+    return (el == null ? void 0 : el.tagName) === "INPUT" || (el == null ? void 0 : el.tagName) === "TEXTAREA" || includeContentEditable && el instanceof HTMLElement && el.isContentEditable;
+  });
+  useEffect(() => {
+    if (!isEnabled) return;
+    const vv = window.visualViewport;
+    const vk = navigator.virtualKeyboard;
+    function setKeyboardInsetHeightEnv(height) {
+      var _a;
+      (_a = containerRef.current) == null ? void 0 : _a.style.setProperty(
+        "--keyboard-inset-height",
+        `${height}px`
+      );
+    }
+    function handleFocusIn(e) {
+      if (e.target instanceof HTMLElement && isTextInput(e.target)) {
+        focusedElementRef.current = e.target;
+        updateKeyboardState();
+      }
+    }
+    function handleFocusOut() {
+      focusedElementRef.current = null;
+      updateKeyboardState();
+    }
+    function updateKeyboardState() {
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+      debounceTimer.current = setTimeout(() => {
+        const active = focusedElementRef.current;
+        const inputIsFocused = isTextInput(active);
+        if (!inputIsFocused) {
+          setKeyboardInsetHeightEnv(0);
+          setState({ isVisible: false, height: 0 });
+          return;
+        }
+        if (vv) {
+          const heightDiff = window.innerHeight - vv.height;
+          if (heightDiff > visualViewportThreshold) {
+            setKeyboardInsetHeightEnv(heightDiff);
+            setState({ isVisible: true, height: heightDiff });
+          } else {
+            setKeyboardInsetHeightEnv(0);
+            setState({ isVisible: false, height: 0 });
+          }
+        }
+      }, debounceDelay);
+    }
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("focusout", handleFocusOut);
+    if (vv) {
+      vv.addEventListener("resize", updateKeyboardState);
+      vv.addEventListener("scroll", updateKeyboardState);
+    }
+    let currentOverlaysContent = false;
+    if (vk) {
+      currentOverlaysContent = vk.overlaysContent;
+      vk.overlaysContent = true;
+    }
+    return () => {
+      window.removeEventListener("focusin", handleFocusIn);
+      window.removeEventListener("focusout", handleFocusOut);
+      if (vv) {
+        vv.removeEventListener("resize", updateKeyboardState);
+        vv.removeEventListener("scroll", updateKeyboardState);
+      }
+      if (vk) {
+        vk.overlaysContent = currentOverlaysContent;
+      }
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+    };
+  }, [
+    debounceDelay,
+    includeContentEditable,
+    isEnabled,
+    visualViewportThreshold
+  ]);
+  return {
+    keyboardHeight: state.height,
+    isKeyboardOpen: state.isVisible
+  };
+}
+
+// src/snap.ts
+function computeSnapPoints({
+  snapPointsProp,
+  sheetHeight
+}) {
+  if (sheetHeight <= 0) {
+    console.warn(
+      `Sheet height is ${sheetHeight}, cannot compute snap points. Make sure the sheet is mounted and has a valid height.`
+    );
+    return [];
+  }
+  const snapPointValues = snapPointsProp.map((point) => {
+    if (point > 0 && point <= 1) {
+      return Math.round(point * sheetHeight);
+    }
+    return point < 0 ? sheetHeight + point : point;
+  });
+  console.assert(
+    isAscendingOrder(snapPointValues),
+    `Snap points need to be in ascending order got: [${snapPointsProp.join(", ")}]`
+  );
+  snapPointValues.forEach((snap) => {
+    if (snap < 0 || snap > sheetHeight) {
+      console.warn(
+        `Snap point ${snap} is outside of the sheet height ${sheetHeight}. This can cause unexpected behavior. Consider adjusting your snap points.`
+      );
+    }
+  });
+  if (!snapPointValues.includes(sheetHeight)) {
+    console.warn(
+      "Snap points do not include the sheet height.Please include `1` as the last snap point or it will be included automatically.This is to ensure the sheet can be fully opened."
+    );
+    snapPointValues.push(sheetHeight);
+  }
+  return snapPointValues.map((snap, index) => ({
+    snapIndex: index,
+    snapValue: snap,
+    // Absolute value from the bottom of the sheet
+    snapValueY: sheetHeight - snap
+    // Y value is inverted as `y = 0` means sheet is at the top
+  }));
+}
+function findClosestSnapPoint({
+  snapPoints,
+  currentY
+}) {
+  return snapPoints.reduce(
+    (closest, snap) => Math.abs(snap.snapValueY - currentY) < Math.abs(closest.snapValueY - currentY) ? snap : closest
+  );
 }
-function setStyle(element, style, value) {
-  const cur = element.style[style];
-  element.style[style] = value;
-  return () => {
-    element.style[style] = cur;
-  };
+function findNextSnapPointInDirection({
+  y,
+  snapPoints,
+  dragDirection
+}) {
+  if (dragDirection === "down") {
+    return snapPoints.slice().reverse().find((s) => s.snapValueY > y);
+  } else {
+    return snapPoints.find((s) => s.snapValueY < y);
+  }
 }
-function addEvent(target, event, handler, options) {
-  target.addEventListener(event, handler, options);
-  return () => {
-    target.removeEventListener(event, handler, options);
+function handleHighVelocityDrag({
+  dragDirection,
+  snapPoints
+}) {
+  const bottomSnapPoint = snapPoints[0];
+  const topSnapPoint = snapPoints[snapPoints.length - 1];
+  if (dragDirection === "down") {
+    return {
+      yTo: bottomSnapPoint.snapValueY,
+      snapIndex: bottomSnapPoint.snapIndex
+    };
+  }
+  return {
+    yTo: topSnapPoint.snapValueY,
+    snapIndex: topSnapPoint.snapIndex
   };
 }
-function scrollIntoView(target) {
-  const root = document.scrollingElement || document.documentElement;
-  while (target && target !== root) {
-    const scrollable = getScrollParent(target);
-    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
-      const scrollableTop = scrollable.getBoundingClientRect().top;
-      const targetTop = target.getBoundingClientRect().top;
-      const targetBottom = target.getBoundingClientRect().bottom;
-      const keyboardHeight = scrollable.getBoundingClientRect().bottom + KEYBOARD_BUFFER;
-      if (targetBottom > keyboardHeight) {
-        scrollable.scrollTop += targetTop - scrollableTop;
-      }
-    }
-    target = scrollable.parentElement;
+function handleLowVelocityDrag({
+  currentSnapPoint,
+  currentY,
+  dragDirection,
+  snapPoints,
+  velocity
+}) {
+  const closestSnapRelativeToCurrentY = findClosestSnapPoint({
+    snapPoints,
+    currentY
+  });
+  if (Math.abs(velocity) < 20) {
+    return {
+      yTo: closestSnapRelativeToCurrentY.snapValueY,
+      snapIndex: closestSnapRelativeToCurrentY.snapIndex
+    };
   }
-}
-function willOpenKeyboard(target) {
-  return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+  const nextSnapInDirectionRelativeToCurrentY = findNextSnapPointInDirection({
+    y: currentY,
+    snapPoints,
+    dragDirection
+  });
+  if (nextSnapInDirectionRelativeToCurrentY) {
+    return {
+      yTo: nextSnapInDirectionRelativeToCurrentY.snapValueY,
+      snapIndex: nextSnapInDirectionRelativeToCurrentY.snapIndex
+    };
+  }
+  return {
+    yTo: currentSnapPoint.snapValueY,
+    snapIndex: currentSnapPoint.snapIndex
+  };
 }
 
 // src/sheet.tsx
 var Sheet = forwardRef(
   ({
-    onOpenStart,
-    onOpenEnd,
-    onClose,
-    onCloseStart,
-    onCloseEnd,
-    onSnap,
+    avoidKeyboard = true,
     children,
+    className = "",
+    detent = "default",
+    disableDrag: disableDragProp = false,
     disableScrollLocking = false,
+    disableDismiss = false,
+    dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
+    dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
     isOpen,
-    snapPoints: snapPointsProp,
-    rootId,
     modalEffectRootId,
+    modalEffectThreshold,
     mountPoint,
-    style,
-    detent = "full-height",
-    initialSnap = 0,
-    disableDrag = false,
     prefersReducedMotion = false,
+    snapPoints: snapPointsProp,
+    initialSnap,
+    style,
     tweenConfig = DEFAULT_TWEEN_CONFIG,
-    dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
-    dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
-    modalEffectThreshold,
+    onOpenStart,
+    onOpenEnd,
+    onClose,
+    onCloseStart,
+    onCloseEnd,
+    onSnap,
+    onDrag: onDragProp,
+    onDragStart: onDragStartProp,
+    onDragEnd: onDragEndProp,
     ...rest
   }, ref) => {
+    const [sheetBoundsRef, sheetBounds] = useMeasure();
     const sheetRef = useRef(null);
+    const sheetHeight = Math.round(sheetBounds.height);
+    const [currentSnap, setCurrentSnap] = useState(initialSnap);
+    const snapPoints = snapPointsProp && sheetHeight > 0 ? computeSnapPoints({ sheetHeight, snapPointsProp }) : [];
+    const { windowHeight } = useDimensions();
+    const closedY = sheetHeight > 0 ? sheetHeight : windowHeight;
+    const y = useMotionValue(closedY);
+    const yInverted = useTransform(y, (val) => Math.max(sheetHeight - val, 0));
     const indicatorRotation = useMotionValue(0);
-    const { height: windowHeight } = useDimensions();
     const shouldReduceMotion = useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
     const animationOptions = {
       type: "tween",
       ...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
     };
-    const y = useMotionValue(windowHeight);
+    const keyboard = useVirtualKeyboard({
+      isEnabled: isOpen && avoidKeyboard,
+      containerRef: sheetRef
+    });
+    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
     const zIndex = useTransform(
       y,
-      (value) => value + 2 >= windowHeight ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999
+      (val) => val + 2 >= closedY ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999
     );
     const visibility = useTransform(
       y,
-      (value) => value + 2 >= windowHeight ? "hidden" : "visible"
+      (val) => val + 2 >= closedY ? "hidden" : "visible"
     );
-    const callbacks = useRef({
-      onOpenStart,
-      onOpenEnd,
-      onCloseStart,
-      onCloseEnd
+    const updateSnap = useStableCallback((snapIndex) => {
+      setCurrentSnap(snapIndex);
+      onSnap == null ? void 0 : onSnap(snapIndex);
     });
-    useIsomorphicLayoutEffect(() => {
-      callbacks.current = {
-        onOpenStart,
-        onOpenEnd,
-        onCloseStart,
-        onCloseEnd
-      };
-    });
-    const onDrag = useStableCallback((_, info) => {
-      const currentY = y.get();
-      if (snapPointsProp) {
-        const sheetHeight = getSheetHeight(sheetRef);
-        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const topSnapPoint = sheetHeight - snapPoints[0];
-        if (info.delta.y < 0 && currentY <= topSnapPoint) {
-          y.set(topSnapPoint);
-          return;
+    const getSnapPoint = useStableCallback((snapIndex) => {
+      if (snapPointsProp && snapPoints) {
+        if (snapIndex < 0 || snapIndex >= snapPoints.length) {
+          console.warn(
+            `Invalid snap index ${snapIndex}. Snap points are: [${snapPointsProp.join(", ")}] and their computed values are: [${snapPoints.map((point) => point.snapValue).join(", ")}]`
+          );
+          return null;
         }
+        return snapPoints[snapIndex];
       }
-      const velocity = y.getVelocity();
-      if (velocity > 0) indicatorRotation.set(10);
-      if (velocity < 0) indicatorRotation.set(-10);
-      y.set(Math.max(currentY + info.delta.y, 0));
+      return null;
+    });
+    const snapTo = useStableCallback(async (snapIndex) => {
+      if (!snapPointsProp) {
+        console.warn("Snapping is not possible without `snapPoints` prop.");
+        return;
+      }
+      const snapPoint = getSnapPoint(snapIndex);
+      if (snapPoint === null) {
+        console.warn(`Invalid snap index ${snapIndex}.`);
+        return;
+      }
+      if (snapIndex === 0) {
+        onClose();
+        return;
+      }
+      await animate(y, snapPoint.snapValueY, {
+        ...animationOptions,
+        onComplete: () => updateSnap(snapIndex)
+      });
     });
-    const onDragStart = useStableCallback(() => {
+    const blurActiveInput = useStableCallback(() => {
       const focusedElement = document.activeElement;
       if (!focusedElement || !sheetRef.current) return;
       const isInput = focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA";
@@ -707,343 +1097,146 @@ var Sheet = forwardRef(
         focusedElement.blur();
       }
     });
-    const onDragEnd = useStableCallback((_, { velocity }) => {
-      if (velocity.y > dragVelocityThreshold) {
-        onClose();
-      } else {
-        const sheetHeight = getSheetHeight(sheetRef);
-        const currentY = y.get();
-        let yTo = 0;
-        const snapPoints = snapPointsProp ? getSnapPoints({ snapPointsProp, sheetHeight }) : void 0;
-        if (snapPoints) {
-          const { snapY, snapIndex } = getClosestSnapPoint({
+    const onDrag = useStableCallback((event, info) => {
+      onDragProp == null ? void 0 : onDragProp(event, info);
+      const currentY = y.get();
+      const velocity = y.getVelocity();
+      if (velocity > 0) indicatorRotation.set(10);
+      if (velocity < 0) indicatorRotation.set(-10);
+      y.set(Math.max(currentY + info.delta.y, 0));
+    });
+    const onDragStart = useStableCallback((event, info) => {
+      blurActiveInput();
+      onDragStartProp == null ? void 0 : onDragStartProp(event, info);
+    });
+    const onDragEnd = useStableCallback((event, info) => {
+      blurActiveInput();
+      onDragEndProp == null ? void 0 : onDragEndProp(event, info);
+      const currentY = y.get();
+      let yTo = 0;
+      const currentSnapPoint = currentSnap !== void 0 ? getSnapPoint(currentSnap) : null;
+      if (currentSnapPoint) {
+        const dragOffsetDirection = info.offset.y > 0 ? "down" : "up";
+        const dragVelocityDirection = info.velocity.y > 0 ? "down" : "up";
+        const isHighVelocity = Math.abs(info.velocity.y) > dragVelocityThreshold;
+        let result;
+        if (isHighVelocity) {
+          result = handleHighVelocityDrag({
             snapPoints,
+            dragDirection: dragVelocityDirection
+          });
+        } else {
+          result = handleLowVelocityDrag({
+            currentSnapPoint,
             currentY,
-            sheetHeight,
-            detent
+            dragDirection: dragOffsetDirection,
+            snapPoints,
+            velocity: info.velocity.y
           });
-          yTo = snapY;
-          onSnap == null ? void 0 : onSnap(snapIndex);
-        } else if (currentY / sheetHeight > dragCloseThreshold) {
-          yTo = sheetHeight;
         }
-        animate(y, yTo, animationOptions);
-        if (yTo + 1 >= sheetHeight) {
-          onClose();
+        yTo = result.yTo;
+        if (disableDismiss && yTo + 1 >= sheetHeight) {
+          const bottomSnapPoint = snapPoints.find((s) => s.snapValue > 0);
+          if (bottomSnapPoint) {
+            yTo = bottomSnapPoint.snapValueY;
+            updateSnap(bottomSnapPoint.snapIndex);
+          } else {
+            yTo = currentY;
+          }
+        } else if (result.snapIndex !== void 0) {
+          updateSnap(result.snapIndex);
         }
-      }
-      indicatorRotation.set(0);
-    });
-    useEffect(() => {
-      if (snapPointsProp && onSnap) {
-        onSnap(isOpen ? initialSnap : snapPointsProp.length - 1);
-      }
-    }, [isOpen]);
-    useEffect(() => {
-      if (!isOpen) return;
-      let yTo = 0;
-      if (snapPointsProp) {
-        const snapIndex = initialSnap;
-        const sheetHeight = getSheetHeight(sheetRef);
-        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
-        if (snapY !== null) {
-          yTo = snapY;
+      } else if (info.velocity.y > dragVelocityThreshold || currentY > sheetHeight * dragCloseThreshold) {
+        if (disableDismiss) {
+          yTo = 0;
+        } else {
+          yTo = closedY;
         }
       }
       animate(y, yTo, animationOptions);
-    }, [isOpen]);
+      if (yTo + 1 >= sheetHeight && !disableDismiss) {
+        onClose();
+      }
+      indicatorRotation.set(0);
+    });
     useImperativeHandle(ref, () => ({
       y,
-      snapTo: (snapIndex) => {
-        if (!snapPointsProp) {
-          console.warn("Snapping is not possible without `snapPoints` prop.");
-          return;
-        }
-        const sheetHeight = getSheetHeight(sheetRef);
-        const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
-        const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
-        if (snapY !== null) {
-          animate(y, snapY, animationOptions);
-          onSnap == null ? void 0 : onSnap(snapIndex);
-          if (snapY + 1 >= sheetHeight) {
-            onClose();
-          }
-        }
-      }
+      yInverted,
+      height: sheetHeight,
+      snapTo
     }));
-    if (rootId) {
-      console.warn(
-        "The `rootId` prop is deprecated and will be removed in the next major version. Use `modalEffectRootId` instead."
-      );
-    }
     useModalEffect({
       y,
-      sheetRef,
-      snapPointsProp,
-      rootId: rootId || modalEffectRootId,
+      detent,
+      sheetHeight,
+      snapPoints,
+      rootId: modalEffectRootId,
       startThreshold: modalEffectThreshold
     });
     usePreventScroll({
       isDisabled: disableScrollLocking || !isOpen
     });
-    const dragProps = useMemo(() => {
-      const dragProps2 = {
-        drag: "y",
-        dragElastic: 0,
-        dragMomentum: false,
-        dragPropagation: false,
-        onDrag,
-        onDragStart,
-        onDragEnd
-      };
-      return disableDrag ? void 0 : dragProps2;
-    }, [disableDrag, windowHeight]);
-    const context = {
-      y,
-      sheetRef,
+    const state = useSheetState({
       isOpen,
-      initialSnap,
+      onOpen: async () => {
+        onOpenStart == null ? void 0 : onOpenStart();
+        const initialSnapPoint = initialSnap !== void 0 ? getSnapPoint(initialSnap) : null;
+        const yTo = (initialSnapPoint == null ? void 0 : initialSnapPoint.snapValueY) ?? 0;
+        await animate(y, yTo, animationOptions);
+        if (initialSnap !== void 0) {
+          updateSnap(initialSnap);
+        }
+        onOpenEnd == null ? void 0 : onOpenEnd();
+      },
+      onClosing: async () => {
+        onCloseStart == null ? void 0 : onCloseStart();
+        await animate(y, closedY, animationOptions);
+        onCloseEnd == null ? void 0 : onCloseEnd();
+      }
+    });
+    const dragProps = {
+      drag: "y",
+      dragElastic: 0,
+      dragMomentum: false,
+      dragPropagation: false,
+      onDrag,
+      onDragStart,
+      onDragEnd
+    };
+    const context = {
+      currentSnap,
       detent,
-      indicatorRotation,
-      callbacks,
+      disableDrag,
       dragProps,
-      windowHeight,
-      animationOptions,
-      reduceMotion,
-      disableDrag
+      indicatorRotation,
+      avoidKeyboard,
+      sheetBoundsRef,
+      sheetRef,
+      y
     };
-    const sheet = /* @__PURE__ */ React2.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React2.createElement(
+    const sheet = /* @__PURE__ */ React4.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React4.createElement(
       motion.div,
       {
         ...rest,
         ref,
-        style: { ...styles.wrapper, zIndex, visibility, ...style }
+        "data-sheet-state": state,
+        className: `react-modal-sheet-root ${className}`,
+        style: { ...styles.root, zIndex, visibility, ...style }
       },
-      /* @__PURE__ */ React2.createElement(AnimatePresence, null, isOpen ? /* @__PURE__ */ React2.createElement(SheetScrollerContextProvider, null, Children.map(
-        children,
-        (child, i) => cloneElement(child, { key: `sheet-child-${i}` })
-      )) : null)
+      state !== "closed" ? children : null
     ));
     if (IS_SSR) return sheet;
     return createPortal(sheet, mountPoint ?? document.body);
   }
 );
 Sheet.displayName = "Sheet";
-function useEventCallbacks(isOpen, callbacks) {
-  const prevOpen = usePrevious(isOpen);
-  const didOpen = useRef(false);
-  const handleAnimationComplete = useCallback(() => {
-    var _a, _b, _c, _d;
-    if (!didOpen.current) {
-      (_b = (_a = callbacks.current).onOpenEnd) == null ? void 0 : _b.call(_a);
-      didOpen.current = true;
-    } else {
-      (_d = (_c = callbacks.current).onCloseEnd) == null ? void 0 : _d.call(_c);
-      didOpen.current = false;
-    }
-  }, [isOpen, prevOpen]);
-  useEffect(() => {
-    var _a, _b, _c, _d;
-    if (!prevOpen && isOpen) {
-      (_b = (_a = callbacks.current).onOpenStart) == null ? void 0 : _b.call(_a);
-    } else if (!isOpen && prevOpen) {
-      (_d = (_c = callbacks.current).onCloseStart) == null ? void 0 : _d.call(_c);
-    }
-  }, [isOpen, prevOpen]);
-  return { handleAnimationComplete };
-}
-function usePrevious(state) {
-  const ref = useRef(void 0);
-  useEffect(() => {
-    ref.current = state;
-  });
-  return ref.current;
-}
-
-// src/SheetContainer.tsx
-var SheetContainer = forwardRef(
-  ({ children, style, className = "", ...rest }, ref) => {
-    const {
-      y,
-      isOpen,
-      callbacks,
-      sheetRef,
-      windowHeight,
-      detent,
-      animationOptions
-    } = useSheetContext();
-    const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);
-    const height = detent === "full-height" ? MAX_HEIGHT : void 0;
-    const maxHeight = detent === "content-height" ? MAX_HEIGHT : void 0;
-    return /* @__PURE__ */ React2.createElement(
-      motion.div,
-      {
-        ...rest,
-        ref: mergeRefs([sheetRef, ref]),
-        className: `react-modal-sheet-container ${className}`,
-        style: { ...styles.container, height, maxHeight, ...style, y },
-        initial: { y: windowHeight },
-        exit: { y: windowHeight, transition: animationOptions },
-        onAnimationComplete: handleAnimationComplete
-      },
-      children
-    );
-  }
-);
-SheetContainer.displayName = "SheetContainer";
-var constraints = { bottom: 0, top: 0, left: 0, right: 0 };
-function useDragConstraints() {
-  const constraintsRef = useRef(null);
-  const onMeasureDragConstraints = useCallback(() => constraints, []);
-  return { constraintsRef, onMeasureDragConstraints };
-}
-
-// src/SheetContent.tsx
-var SheetContent = forwardRef(
-  ({ children, style, disableDrag, className = "", ...rest }, ref) => {
-    const sheetContext = useSheetContext();
-    const sheetScrollerContext = useSheetScrollerContext();
-    const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
-    const dragProps = disableDrag || sheetScrollerContext.disableDrag ? void 0 : sheetContext.dragProps;
-    return /* @__PURE__ */ React2.createElement(
-      motion.div,
-      {
-        ...rest,
-        ref: mergeRefs([ref, constraintsRef]),
-        className: `react-modal-sheet-content ${className}`,
-        style: { ...styles.content, ...style },
-        ...dragProps,
-        dragConstraints: constraintsRef,
-        onMeasureDragConstraints
-      },
-      children
-    );
-  }
-);
-SheetContent.displayName = "SheetContent";
-var SheetHeader = forwardRef(
-  ({ children, style, disableDrag, ...rest }, ref) => {
-    const { indicatorRotation, dragProps } = useSheetContext();
-    const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
-    const _dragProps = disableDrag ? void 0 : dragProps;
-    const indicator1Transform = useTransform(
-      indicatorRotation,
-      (r) => `translateX(2px) rotate(${r}deg)`
-    );
-    const indicator2Transform = useTransform(
-      indicatorRotation,
-      (r) => `translateX(-2px) rotate(${ -1 * r}deg)`
-    );
-    return /* @__PURE__ */ React2.createElement(
-      motion.div,
-      {
-        ...rest,
-        ref: mergeRefs([ref, constraintsRef]),
-        style: { ...styles.headerWrapper, ...style },
-        ..._dragProps,
-        dragConstraints: constraintsRef,
-        onMeasureDragConstraints
-      },
-      children || /* @__PURE__ */ React2.createElement("div", { className: "react-modal-sheet-header", style: styles.header }, /* @__PURE__ */ React2.createElement(
-        motion.span,
-        {
-          className: "react-modal-sheet-drag-indicator",
-          style: { ...styles.indicator, transform: indicator1Transform }
-        }
-      ), /* @__PURE__ */ React2.createElement(
-        motion.span,
-        {
-          className: "react-modal-sheet-drag-indicator",
-          style: { ...styles.indicator, transform: indicator2Transform }
-        }
-      ))
-    );
-  }
-);
-SheetHeader.displayName = "SheetHeader";
-var isClickable = (props) => !!props.onClick || !!props.onTap;
-var SheetBackdrop = forwardRef(
-  ({ style = {}, className = "", ...rest }, ref) => {
-    const Comp = isClickable(rest) ? motion.button : motion.div;
-    const pointerEvents = isClickable(rest) ? "auto" : "none";
-    return /* @__PURE__ */ React2.createElement(
-      Comp,
-      {
-        ...rest,
-        ref,
-        className: `react-modal-sheet-backdrop ${className}`,
-        style: { ...styles.backdrop, ...style, pointerEvents },
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 }
-      }
-    );
-  }
-);
-SheetBackdrop.displayName = "SheetBackdrop";
-var SheetScroller = forwardRef(
-  ({
-    disableScroll = false,
-    draggableAt = "top",
-    children,
-    style,
-    className = "",
-    ...rest
-  }, ref) => {
-    const { setDragEnabled, setDragDisabled } = useSheetScrollerContext();
-    function determineDragState(element) {
-      if (disableScroll) {
-        setDragEnabled();
-        return;
-      }
-      const { scrollTop, scrollHeight, clientHeight } = element;
-      const isScrollable2 = scrollHeight > clientHeight;
-      if (!isScrollable2) return;
-      const isAtTop = scrollTop <= 0;
-      const isAtBottom = scrollHeight - scrollTop === clientHeight;
-      const shouldEnable = draggableAt === "top" && isAtTop || draggableAt === "bottom" && isAtBottom || draggableAt === "both" && (isAtTop || isAtBottom);
-      if (shouldEnable) {
-        setDragEnabled();
-      } else {
-        setDragDisabled();
-      }
-    }
-    function onScroll(event) {
-      determineDragState(event.currentTarget);
-      if (rest.onScroll) rest.onScroll(event);
-    }
-    function onTouchStart(event) {
-      determineDragState(event.currentTarget);
-      if (rest.onTouchStart) rest.onTouchStart(event);
-    }
-    const scrollProps = isTouchDevice() ? { onScroll, onTouchStart } : void 0;
-    return /* @__PURE__ */ React2.createElement(
-      "div",
-      {
-        ...rest,
-        ref,
-        className: `react-modal-sheet-scroller ${className}`,
-        style: {
-          ...styles.scroller,
-          ...style,
-          overflowY: disableScroll ? "hidden" : "auto"
-        },
-        ...scrollProps
-      },
-      children
-    );
-  }
-);
-SheetScroller.displayName = "SheetScroller";
 
 // src/index.tsx
 var Sheet2 = Object.assign(Sheet, {
   Container: SheetContainer,
   Header: SheetHeader,
   Content: SheetContent,
-  Backdrop: SheetBackdrop,
-  Scroller: SheetScroller
+  Backdrop: SheetBackdrop
 });
 
 export { Sheet2 as Sheet };