react-modal-sheet 4.3.0 → 5.0.0

package/dist/index.js

@@ -1,201 +1,21 @@
 'use strict';
 
-var reactDom = require('react-dom');
-var React2 = require('react');
 var react = require('motion/react');
+var React4 = require('react');
+var reactDom = require('react-dom');
+var useMeasure = require('react-use-measure');
 var motion = require('motion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
-
-// 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;
+var React4__default = /*#__PURE__*/_interopDefault(React4);
+var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
-// 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 = React2.createContext(
-  void 0
-);
-function useSheetContext() {
-  const context = React2.useContext(SheetContext);
-  if (!context) throw new Error("Sheet context error");
-  return context;
-}
-var SheetScrollerContext = React2.createContext(void 0);
-function SheetScrollerContextProvider({
-  children
-}) {
-  const sheetContext = useSheetContext();
-  const [disableDrag, setDisableDrag] = React2.useState(!!sheetContext.disableDrag);
-  function setDragEnabled() {
-    if (!sheetContext.disableDrag) setDisableDrag(false);
-  }
-  function setDragDisabled() {
-    if (!disableDrag) setDisableDrag(true);
-  }
-  return /* @__PURE__ */ React2__default.default.createElement(
-    SheetScrollerContext.Provider,
-    {
-      value: { disableDrag, setDragEnabled, setDragDisabled }
-    },
-    children
-  );
-}
-function useSheetScrollerContext() {
-  const context = React2.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,
@@ -261,138 +81,309 @@ var styles = {
     overscrollBehaviorY: "none"
   }
 };
-var useIsomorphicLayoutEffect = IS_SSR ? React2.useEffect : React2.useLayoutEffect;
-function useSafeAreaInsets() {
-  const [insets] = React2.useState(() => {
-    const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
-    if (IS_SSR) return fallback;
-    const root = document.querySelector(":root");
-    if (!root) return fallback;
-    root.style.setProperty("--rms-sat", "env(safe-area-inset-top)");
-    root.style.setProperty("--rms-sal", "env(safe-area-inset-left)");
-    root.style.setProperty("--rms-sar", "env(safe-area-inset-right)");
-    root.style.setProperty("--rms-sab", "env(safe-area-inset-bottom)");
-    const computedStyle = getComputedStyle(root);
-    const sat = getComputedValue(computedStyle, "--rms-sat");
-    const sal = getComputedValue(computedStyle, "--rms-sal");
-    const sar = getComputedValue(computedStyle, "--rms-sar");
-    const sab = getComputedValue(computedStyle, "--rms-sab");
-    root.style.removeProperty("--rms-sat");
-    root.style.removeProperty("--rms-sal");
-    root.style.removeProperty("--rms-sar");
-    root.style.removeProperty("--rms-sab");
-    return { top: sat, left: sal, right: sar, bottom: sab };
-  });
-  return insets;
-}
-function getComputedValue(computed, property) {
-  const strValue = computed.getPropertyValue(property).replace("px", "").trim();
-  return parseInt(strValue, 10) || 0;
-}
 
-// src/hooks/use-modal-effect.ts
-function useModalEffect({
-  y,
-  rootId,
-  sheetRef,
-  snapPointsProp,
-  startThreshold
-}) {
-  const insetTop = useSafeAreaInsets().top;
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      if (rootId) cleanupModalEffect(rootId);
-    };
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    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;
-      if (snapThresholdPoint !== void 0) {
-        const snapThresholdValue = sheetHeight - Math.min(snapThresholdPoint, sheetHeight);
-        if (yValue <= snapThresholdValue) {
-          progress = (snapThresholdValue - yValue) / snapThresholdValue;
-        } else {
-          progress = 0;
-        }
+// src/SheetBackdrop.tsx
+var isClickable = (props) => !!props.onClick || !!props.onTap;
+var SheetBackdrop = React4.forwardRef(
+  ({ style, className = "", ...rest }, ref) => {
+    const clickable = isClickable(rest);
+    const Comp = clickable ? react.motion.button : react.motion.div;
+    const pointerEvents = clickable ? "auto" : "none";
+    return /* @__PURE__ */ React4__default.default.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 }
       }
-      if (startThreshold !== void 0) {
-        const startThresholdValue = sheetHeight - Math.min(Math.floor(startThreshold * sheetHeight), sheetHeight);
-        if (yValue <= startThresholdValue) {
-          progress = (startThresholdValue - yValue) / startThresholdValue;
-        } else {
-          progress = 0;
-        }
+    );
+  }
+);
+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 = React4.createContext(
+  void 0
+);
+function useSheetContext() {
+  const context = React4.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;
       }
-      progress = Math.max(0, Math.min(1, progress));
-      const pageWidth = window.innerWidth;
-      const ty = motion.transform(progress, [0, 1], [0, 24 + insetTop]);
-      const s = motion.transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]);
-      const borderRadius = motion.transform(progress, [0, 1], [0, 10]);
-      root.style.transform = `scale(${s}) translate3d(0, ${ty}px, 0)`;
-      root.style.borderTopRightRadius = `${borderRadius}px`;
-      root.style.borderTopLeftRadius = `${borderRadius}px`;
     });
-    function onCompleted() {
-      if (y.get() - 5 >= sheetHeight) {
-        cleanupModalEffect(rootId);
-      }
-    }
-    const removeCompleteListener = y.on("animationComplete", onCompleted);
-    const removeCancelListener = y.on("animationCancel", onCompleted);
-    return () => {
-      removeStartListener();
-      removeChangeListener();
-      removeCompleteListener();
-      removeCancelListener();
-    };
-  }, [y, rootId, insetTop, startThreshold, snapPointsProp]);
-}
-function setupModalEffect(rootId) {
-  const root = document.querySelector(`#${rootId}`);
-  const body = document.querySelector("body");
-  if (!root) return;
-  body.style.backgroundColor = "#000";
-  root.style.overflow = "hidden";
-  root.style.transitionTimingFunction = "cubic-bezier(0.32, 0.72, 0, 1)";
-  root.style.transitionProperty = "transform, border-radius";
-  root.style.transitionDuration = "0.5s";
-  root.style.transformOrigin = "center top";
+  };
 }
-function cleanupModalEffect(rootId) {
-  const root = document.querySelector(`#${rootId}`);
-  const body = document.querySelector("body");
-  if (!root) return;
-  body.style.removeProperty("background-color");
-  root.style.removeProperty("overflow");
-  root.style.removeProperty("transition-timing-function");
-  root.style.removeProperty("transition-property");
-  root.style.removeProperty("transition-duration");
-  root.style.removeProperty("transform-origin");
-  root.style.removeProperty("transform");
-  root.style.removeProperty("border-top-right-radius");
-  root.style.removeProperty("border-top-left-radius");
+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 = React4.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__default.default.createElement(
+      react.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 = React4.useRef(null);
+  const onMeasure = React4.useCallback(() => constraints, []);
+  return { ref, onMeasure };
+}
+function useScrollPosition() {
+  const ref = React4.useRef(null);
+  const [scrollPosition, setScrollPosition] = React4.useState(void 0);
+  React4.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 = React4.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__default.default.createElement(
+      react.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__default.default.createElement(
+        react.motion.div,
+        {
+          ref: mergeRefs([scroll.ref, scrollRefProp]),
+          style: scrollStyle,
+          className: "react-modal-sheet-content-scroller"
+        },
+        children
+      )
+    );
+  }
+);
+SheetContent.displayName = "SheetContent";
+var SheetHeader = React4.forwardRef(
+  ({ children, style, disableDrag, ...rest }, ref) => {
+    const sheetContext = useSheetContext();
+    const dragConstraints = useDragConstraints();
+    const dragProps = disableDrag || sheetContext.disableDrag ? void 0 : sheetContext.dragProps;
+    const indicator1Transform = react.useTransform(
+      sheetContext.indicatorRotation,
+      (r) => `translateX(2px) rotate(${r}deg)`
+    );
+    const indicator2Transform = react.useTransform(
+      sheetContext.indicatorRotation,
+      (r) => `translateX(-2px) rotate(${ -1 * r}deg)`
+    );
+    return /* @__PURE__ */ React4__default.default.createElement(
+      react.motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([ref, dragConstraints.ref]),
+        style: { ...styles.headerWrapper, ...style },
+        ...dragProps,
+        dragConstraints: dragConstraints.ref,
+        onMeasureDragConstraints: dragConstraints.onMeasure
+      },
+      children || /* @__PURE__ */ React4__default.default.createElement("div", { className: "react-modal-sheet-header", style: styles.header }, /* @__PURE__ */ React4__default.default.createElement(
+        react.motion.span,
+        {
+          className: "react-modal-sheet-drag-indicator",
+          style: { ...styles.indicator, transform: indicator1Transform }
+        }
+      ), /* @__PURE__ */ React4__default.default.createElement(
+        react.motion.span,
+        {
+          className: "react-modal-sheet-drag-indicator",
+          style: { ...styles.indicator, transform: indicator2Transform }
+        }
+      ))
+    );
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var useIsomorphicLayoutEffect = IS_SSR ? React4.useEffect : React4.useLayoutEffect;
+
+// src/hooks/use-dimensions.ts
 function useDimensions() {
-  const [dimensions, setDimensions] = React2.useState(() => ({
-    height: !IS_SSR ? window.innerHeight : 0,
-    width: !IS_SSR ? window.innerWidth : 0
+  const [dimensions, setDimensions] = React4.useState(() => ({
+    windowHeight: !IS_SSR ? window.innerHeight : 0,
+    windowWidth: !IS_SSR ? window.innerWidth : 0
   }));
   useIsomorphicLayoutEffect(() => {
     function handler() {
       setDimensions({
-        height: window.innerHeight,
-        width: window.innerWidth
+        windowHeight: window.innerHeight,
+        windowWidth: window.innerWidth
       });
     }
     handler();
@@ -403,15 +394,129 @@ function useDimensions() {
   }, []);
   return dimensions;
 }
-function useStableCallback(handler) {
-  const handlerRef = React2.useRef(void 0);
-  useIsomorphicLayoutEffect(() => {
-    handlerRef.current = handler;
+function useSafeAreaInsets() {
+  const [insets] = React4.useState(() => {
+    const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
+    if (IS_SSR) return fallback;
+    const root = document.querySelector(":root");
+    if (!root) return fallback;
+    root.style.setProperty("--rms-sat", "env(safe-area-inset-top)");
+    root.style.setProperty("--rms-sal", "env(safe-area-inset-left)");
+    root.style.setProperty("--rms-sar", "env(safe-area-inset-right)");
+    root.style.setProperty("--rms-sab", "env(safe-area-inset-bottom)");
+    const computedStyle = getComputedStyle(root);
+    const sat = getComputedValue(computedStyle, "--rms-sat");
+    const sal = getComputedValue(computedStyle, "--rms-sal");
+    const sar = getComputedValue(computedStyle, "--rms-sar");
+    const sab = getComputedValue(computedStyle, "--rms-sab");
+    root.style.removeProperty("--rms-sat");
+    root.style.removeProperty("--rms-sal");
+    root.style.removeProperty("--rms-sar");
+    root.style.removeProperty("--rms-sab");
+    return { top: sat, left: sal, right: sar, bottom: sab };
   });
-  return React2.useCallback((...args) => {
-    const fn = handlerRef.current;
-    return fn == null ? void 0 : fn(...args);
+  return insets;
+}
+function getComputedValue(computed, property) {
+  const strValue = computed.getPropertyValue(property).replace("px", "").trim();
+  return parseInt(strValue, 10) || 0;
+}
+
+// src/hooks/use-modal-effect.ts
+function useModalEffect({
+  y,
+  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);
+    };
   }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!rootId) return;
+    const root = document.querySelector(`#${rootId}`);
+    if (!root) return;
+    const removeStartListener = y.on("animationStart", () => {
+      setupModalEffect(rootId);
+    });
+    const removeChangeListener = y.on("change", (yValue) => {
+      if (!root) return;
+      let progress = Math.max(0, 1 - yValue / sheetHeight);
+      const snapThresholdPoint = snapPoints.length > 1 ? snapPoints[snapPoints.length - 2] : void 0;
+      if (snapThresholdPoint !== void 0) {
+        const snapThresholdValue = snapThresholdPoint.snapValueY;
+        if (yValue <= snapThresholdValue) {
+          progress = (snapThresholdValue - yValue) / snapThresholdValue;
+        } else {
+          progress = 0;
+        }
+      }
+      if (startThreshold !== void 0) {
+        const startThresholdValue = sheetHeight - Math.min(Math.floor(startThreshold * sheetHeight), sheetHeight);
+        if (yValue <= startThresholdValue) {
+          progress = (startThresholdValue - yValue) / startThresholdValue;
+        } else {
+          progress = 0;
+        }
+      }
+      progress = Math.max(0, Math.min(1, progress));
+      const pageWidth = window.innerWidth;
+      const ty = motion.transform(progress, [0, 1], [0, 24 + insetTop]);
+      const s = motion.transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]);
+      const borderRadius = motion.transform(progress, [0, 1], [0, 10]);
+      root.style.transform = `scale(${s}) translate3d(0, ${ty}px, 0)`;
+      root.style.borderTopRightRadius = `${borderRadius}px`;
+      root.style.borderTopLeftRadius = `${borderRadius}px`;
+    });
+    function onCompleted() {
+      if (y.get() - 5 >= sheetHeight) {
+        cleanupModalEffect(rootId);
+      }
+    }
+    const removeCompleteListener = y.on("animationComplete", onCompleted);
+    const removeCancelListener = y.on("animationCancel", onCompleted);
+    return () => {
+      removeStartListener();
+      removeChangeListener();
+      removeCompleteListener();
+      removeCancelListener();
+    };
+  }, [y, rootId, insetTop, startThreshold, sheetHeight]);
+}
+function setupModalEffect(rootId) {
+  const root = document.querySelector(`#${rootId}`);
+  const body = document.querySelector("body");
+  if (!root) return;
+  body.style.backgroundColor = "#000";
+  root.style.overflow = "hidden";
+  root.style.transitionTimingFunction = "cubic-bezier(0.32, 0.72, 0, 1)";
+  root.style.transitionProperty = "transform, border-radius";
+  root.style.transitionDuration = "0.5s";
+  root.style.transformOrigin = "center top";
+}
+function cleanupModalEffect(rootId) {
+  const root = document.querySelector(`#${rootId}`);
+  const body = document.querySelector("body");
+  if (!root) return;
+  body.style.removeProperty("background-color");
+  root.style.removeProperty("overflow");
+  root.style.removeProperty("transition-timing-function");
+  root.style.removeProperty("transition-property");
+  root.style.removeProperty("transition-duration");
+  root.style.removeProperty("transform-origin");
+  root.style.removeProperty("transform");
+  root.style.removeProperty("border-top-right-radius");
+  root.style.removeProperty("border-top-left-radius");
 }
 
 // src/hooks/use-prevent-scroll.ts
@@ -629,83 +734,369 @@ function scrollIntoView(target) {
 function willOpenKeyboard(target) {
   return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
 }
+function useStableCallback(handler) {
+  const handlerRef = React4.useRef(void 0);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return React4.useCallback((...args) => {
+    const fn = handlerRef.current;
+    return fn == null ? void 0 : fn(...args);
+  }, []);
+}
 
-// src/sheet.tsx
-var Sheet = React2.forwardRef(
-  ({
-    onOpenStart,
-    onOpenEnd,
-    onClose,
-    onCloseStart,
-    onCloseEnd,
-    onSnap,
+// src/hooks/use-sheet-state.ts
+function useSheetState({
+  isOpen,
+  onClosed: _onClosed,
+  onOpening: _onOpening,
+  onOpen: _onOpen,
+  onClosing: _onClosing
+}) {
+  const [state, setState] = React4.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());
+  React4.useEffect(() => {
+    if (isOpen && state === "closed") {
+      setState("opening");
+    } else if (!isOpen && (state === "open" || state === "opening")) {
+      setState("closing");
+    }
+  }, [isOpen, state]);
+  React4.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] = React4.useState({
+    isVisible: false,
+    height: 0
+  });
+  const focusedElementRef = React4.useRef(null);
+  const debounceTimer = React4.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;
+  });
+  React4.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 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 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 handleLowVelocityDrag({
+  currentSnapPoint,
+  currentY,
+  dragDirection,
+  snapPoints,
+  velocity
+}) {
+  const closestSnapRelativeToCurrentY = findClosestSnapPoint({
+    snapPoints,
+    currentY
+  });
+  if (Math.abs(velocity) < 20) {
+    return {
+      yTo: closestSnapRelativeToCurrentY.snapValueY,
+      snapIndex: closestSnapRelativeToCurrentY.snapIndex
+    };
+  }
+  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 = React4.forwardRef(
+  ({
+    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 sheetRef = React2.useRef(null);
+    const [sheetBoundsRef, sheetBounds] = useMeasure__default.default();
+    const sheetRef = React4.useRef(null);
+    const sheetHeight = Math.round(sheetBounds.height);
+    const [currentSnap, setCurrentSnap] = React4.useState(initialSnap);
+    const snapPoints = snapPointsProp && sheetHeight > 0 ? computeSnapPoints({ sheetHeight, snapPointsProp }) : [];
+    const { windowHeight } = useDimensions();
+    const closedY = sheetHeight > 0 ? sheetHeight : windowHeight;
+    const y = react.useMotionValue(closedY);
+    const yInverted = react.useTransform(y, (val) => Math.max(sheetHeight - val, 0));
     const indicatorRotation = react.useMotionValue(0);
-    const { height: windowHeight } = useDimensions();
     const shouldReduceMotion = react.useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
     const animationOptions = {
       type: "tween",
       ...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
     };
-    const y = react.useMotionValue(windowHeight);
+    const keyboard = useVirtualKeyboard({
+      isEnabled: isOpen && avoidKeyboard,
+      containerRef: sheetRef
+    });
+    const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
     const zIndex = react.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 = react.useTransform(
       y,
-      (value) => value + 2 >= windowHeight ? "hidden" : "visible"
+      (val) => val + 2 >= closedY ? "hidden" : "visible"
     );
-    const callbacks = React2.useRef({
-      onOpenStart,
-      onOpenEnd,
-      onCloseStart,
-      onCloseEnd
-    });
-    useIsomorphicLayoutEffect(() => {
-      callbacks.current = {
-        onOpenStart,
-        onOpenEnd,
-        onCloseStart,
-        onCloseEnd
-      };
+    const updateSnap = useStableCallback((snapIndex) => {
+      setCurrentSnap(snapIndex);
+      onSnap == null ? void 0 : onSnap(snapIndex);
     });
-    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 react.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";
@@ -713,343 +1104,146 @@ var Sheet = React2.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;
         }
-        react.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);
-    });
-    React2.useEffect(() => {
-      if (snapPointsProp && onSnap) {
-        onSnap(isOpen ? initialSnap : snapPointsProp.length - 1);
-      }
-    }, [isOpen]);
-    React2.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;
         }
       }
       react.animate(y, yTo, animationOptions);
-    }, [isOpen]);
-    React2.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) {
-          react.animate(y, snapY, animationOptions);
-          onSnap == null ? void 0 : onSnap(snapIndex);
-          if (snapY + 1 >= sheetHeight) {
-            onClose();
-          }
-        }
+      if (yTo + 1 >= sheetHeight && !disableDismiss) {
+        onClose();
       }
+      indicatorRotation.set(0);
+    });
+    React4.useImperativeHandle(ref, () => ({
+      y,
+      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 = React2.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 react.animate(y, yTo, animationOptions);
+        if (initialSnap !== void 0) {
+          updateSnap(initialSnap);
+        }
+        onOpenEnd == null ? void 0 : onOpenEnd();
+      },
+      onClosing: async () => {
+        onCloseStart == null ? void 0 : onCloseStart();
+        await react.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__default.default.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React2__default.default.createElement(
+    const sheet = /* @__PURE__ */ React4__default.default.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React4__default.default.createElement(
       react.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__default.default.createElement(react.AnimatePresence, null, isOpen ? /* @__PURE__ */ React2__default.default.createElement(SheetScrollerContextProvider, null, React2.Children.map(
-        children,
-        (child, i) => React2.cloneElement(child, { key: `sheet-child-${i}` })
-      )) : null)
+      state !== "closed" ? children : null
     ));
     if (IS_SSR) return sheet;
     return reactDom.createPortal(sheet, mountPoint ?? document.body);
   }
 );
 Sheet.displayName = "Sheet";
-function useEventCallbacks(isOpen, callbacks) {
-  const prevOpen = usePrevious(isOpen);
-  const didOpen = React2.useRef(false);
-  const handleAnimationComplete = React2.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]);
-  React2.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 = React2.useRef(void 0);
-  React2.useEffect(() => {
-    ref.current = state;
-  });
-  return ref.current;
-}
-
-// src/SheetContainer.tsx
-var SheetContainer = React2.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__default.default.createElement(
-      react.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 = React2.useRef(null);
-  const onMeasureDragConstraints = React2.useCallback(() => constraints, []);
-  return { constraintsRef, onMeasureDragConstraints };
-}
-
-// src/SheetContent.tsx
-var SheetContent = React2.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__default.default.createElement(
-      react.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 = React2.forwardRef(
-  ({ children, style, disableDrag, ...rest }, ref) => {
-    const { indicatorRotation, dragProps } = useSheetContext();
-    const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
-    const _dragProps = disableDrag ? void 0 : dragProps;
-    const indicator1Transform = react.useTransform(
-      indicatorRotation,
-      (r) => `translateX(2px) rotate(${r}deg)`
-    );
-    const indicator2Transform = react.useTransform(
-      indicatorRotation,
-      (r) => `translateX(-2px) rotate(${ -1 * r}deg)`
-    );
-    return /* @__PURE__ */ React2__default.default.createElement(
-      react.motion.div,
-      {
-        ...rest,
-        ref: mergeRefs([ref, constraintsRef]),
-        style: { ...styles.headerWrapper, ...style },
-        ..._dragProps,
-        dragConstraints: constraintsRef,
-        onMeasureDragConstraints
-      },
-      children || /* @__PURE__ */ React2__default.default.createElement("div", { className: "react-modal-sheet-header", style: styles.header }, /* @__PURE__ */ React2__default.default.createElement(
-        react.motion.span,
-        {
-          className: "react-modal-sheet-drag-indicator",
-          style: { ...styles.indicator, transform: indicator1Transform }
-        }
-      ), /* @__PURE__ */ React2__default.default.createElement(
-        react.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 = React2.forwardRef(
-  ({ style = {}, className = "", ...rest }, ref) => {
-    const Comp = isClickable(rest) ? react.motion.button : react.motion.div;
-    const pointerEvents = isClickable(rest) ? "auto" : "none";
-    return /* @__PURE__ */ React2__default.default.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 = React2.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__default.default.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
 });
 
 exports.Sheet = Sheet2;