react-modal-sheet 4.4.0 → 5.1.0

package/dist/index.mjs

@@ -1,12 +1,125 @@
+import { motion, useMotionValue, useTransform, useReducedMotion, animate } from 'motion/react';
+import React4, { createContext, forwardRef, 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/SheetBackdrop.tsx
+var SheetContext = createContext(
+  void 0
+);
+function useSheetContext() {
+  const context = useContext(SheetContext);
+  if (!context) throw new Error("Sheet context error");
+  return context;
+}
+
+// src/styles.ts
+var styles = {
+  root: {
+    base: {
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      overflow: "hidden",
+      pointerEvents: "none"
+    },
+    decorative: {}
+  },
+  backdrop: {
+    base: {
+      zIndex: 1,
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      touchAction: "none",
+      userSelect: "none"
+    },
+    decorative: {
+      backgroundColor: "rgba(0, 0, 0, 0.2)",
+      border: "none",
+      WebkitTapHighlightColor: "transparent"
+    }
+  },
+  container: {
+    base: {
+      zIndex: 2,
+      position: "absolute",
+      left: 0,
+      bottom: 0,
+      width: "100%",
+      pointerEvents: "auto",
+      display: "flex",
+      flexDirection: "column"
+    },
+    decorative: {
+      backgroundColor: "#fff",
+      borderTopRightRadius: "8px",
+      borderTopLeftRadius: "8px",
+      boxShadow: "0px -2px 16px rgba(0, 0, 0, 0.3)"
+    }
+  },
+  headerWrapper: {
+    base: {
+      width: "100%"
+    },
+    decorative: {}
+  },
+  header: {
+    base: {
+      width: "100%",
+      position: "relative"
+    },
+    decorative: {
+      height: "40px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  },
+  indicatorWrapper: {
+    base: {
+      display: "flex"
+    },
+    decorative: {}
+  },
+  indicator: {
+    base: {
+      display: "inline-block"
+    },
+    decorative: {
+      width: "18px",
+      height: "4px",
+      borderRadius: "99px",
+      backgroundColor: "#ddd"
+    }
+  },
+  content: {
+    base: {
+      minHeight: "0px",
+      position: "relative",
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column"
+    },
+    decorative: {}
+  },
+  scroller: {
+    base: {
+      height: "100%",
+      overflowY: "auto",
+      overscrollBehaviorY: "none"
+    },
+    decorative: {}
+  }
+};
 
 // src/constants.ts
-var MAX_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
+var DEFAULT_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
 var IS_SSR = typeof window === "undefined";
 var DEFAULT_TWEEN_CONFIG = {
   ease: "easeOut",
@@ -20,96 +133,15 @@ 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 applyStyles(styles2, unstyled) {
+  return unstyled ? styles2.base : { ...styles2.base, ...styles2.decorative };
 }
-function inDescendingOrder(arr) {
+function isAscendingOrder(arr) {
   for (let i = 0; i < arr.length; i++) {
-    if (arr[i + 1] > arr[i]) return false;
+    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) => {
@@ -121,10 +153,6 @@ function mergeRefs(refs) {
     });
   };
 }
-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(
@@ -153,109 +181,287 @@ var isIPad = cached(function() {
 var isIOS = cached(function() {
   return isIPhone() || isIPad();
 });
-var SheetContext = createContext(
-  void 0
+
+// src/SheetBackdrop.tsx
+var isClickable = (props) => !!props.onClick || !!props.onTap;
+var SheetBackdrop = forwardRef(
+  ({ style, className = "", unstyled, ...rest }, ref) => {
+    const sheetContext = useSheetContext();
+    const clickable = isClickable(rest);
+    const Comp = clickable ? motion.button : motion.div;
+    const pointerEvents = clickable ? "auto" : "none";
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
+    const backdropStyle = {
+      ...applyStyles(styles.backdrop, isUnstyled),
+      ...style,
+      pointerEvents
+    };
+    return /* @__PURE__ */ React4.createElement(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: `react-modal-sheet-backdrop ${className}`,
+        style: backdropStyle,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 1 }
+      }
+    );
+  }
 );
-function useSheetContext() {
-  const context = useContext(SheetContext);
-  if (!context) throw new Error("Sheet context error");
-  return context;
+SheetBackdrop.displayName = "SheetBackdrop";
+var SheetContainer = forwardRef(
+  ({ children, style, className = "", unstyled, ...rest }, ref) => {
+    const sheetContext = useSheetContext();
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
+    const containerStyle = {
+      ...applyStyles(styles.container, isUnstyled),
+      ...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 };
 }
-var SheetScrollerContext = createContext(void 0);
-function SheetScrollerContextProvider({
-  children
+
+// src/SheetContent.tsx
+var SheetContent = forwardRef(
+  ({
+    disableScroll: disableScrollProp,
+    disableDrag: disableDragProp,
+    children,
+    style: styleProp,
+    className = "",
+    scrollRef: scrollRefProp = null,
+    unstyled,
+    ...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 isUnstyled = unstyled ?? sheetContext.unstyled;
+    const contentStyle = {
+      ...applyStyles(styles.content, isUnstyled),
+      ...styleProp
+    };
+    const scrollStyle = applyStyles(styles.scroller, isUnstyled);
+    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";
+function SheetDragIndicator({
+  style,
+  className = "",
+  unstyled,
+  ...rest
 }) {
   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,
+  const indicator1Transform = useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(2px) rotate(${r}deg)`
+  );
+  const indicator2Transform = useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(-2px) rotate(${ -1 * r}deg)`
+  );
+  const isUnstyled = unstyled ?? sheetContext.unstyled;
+  const indicatorWrapperStyle = {
+    ...applyStyles(styles.indicatorWrapper, isUnstyled),
+    ...style
+  };
+  const indicatorStyle = applyStyles(styles.indicator, isUnstyled);
+  return /* @__PURE__ */ React4.createElement(
+    "div",
     {
-      value: { disableDrag, setDragEnabled, setDragDisabled }
+      className: `react-modal-sheet-drag-indicator-container ${className}`,
+      style: indicatorWrapperStyle,
+      ...rest
     },
-    children
+    /* @__PURE__ */ React4.createElement(
+      motion.span,
+      {
+        className: "react-modal-sheet-drag-indicator",
+        style: { ...indicatorStyle, transform: indicator1Transform }
+      }
+    ),
+    /* @__PURE__ */ React4.createElement(
+      motion.span,
+      {
+        className: "react-modal-sheet-drag-indicator",
+        style: { ...indicatorStyle, transform: indicator2Transform }
+      }
+    )
   );
 }
-function useSheetScrollerContext() {
-  const context = useContext(SheetScrollerContext);
-  if (!context) throw new Error("Sheet scroller context error");
-  return context;
-}
-
-// src/styles.ts
-var styles = {
-  wrapper: {
-    position: "fixed",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    overflow: "hidden",
-    pointerEvents: "none"
-  },
-  backdrop: {
-    zIndex: 1,
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    touchAction: "none",
-    border: "none",
-    userSelect: "none",
-    WebkitTapHighlightColor: "transparent"
-  },
-  container: {
-    zIndex: 2,
-    position: "absolute",
-    left: 0,
-    bottom: 0,
-    width: "100%",
-    backgroundColor: "#fff",
-    borderTopRightRadius: "8px",
-    borderTopLeftRadius: "8px",
-    boxShadow: "0px -2px 16px rgba(0, 0, 0, 0.3)",
-    display: "flex",
-    flexDirection: "column",
-    pointerEvents: "auto"
-  },
-  headerWrapper: {
-    width: "100%"
-  },
-  header: {
-    height: "40px",
-    width: "100%",
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  indicator: {
-    width: "18px",
-    height: "4px",
-    borderRadius: "99px",
-    backgroundColor: "#ddd"
-  },
-  content: {
-    flexGrow: 1,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: "0px",
-    position: "relative"
-  },
-  scroller: {
-    height: "100%",
-    overflowY: "auto",
-    overscrollBehaviorY: "none"
+var SheetHeader = forwardRef(
+  ({ children, style, disableDrag, unstyled, className = "", ...rest }, ref) => {
+    const sheetContext = useSheetContext();
+    const dragConstraints = useDragConstraints();
+    const dragProps = disableDrag || sheetContext.disableDrag ? void 0 : sheetContext.dragProps;
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
+    const headerWrapperStyle = {
+      ...applyStyles(styles.headerWrapper, isUnstyled),
+      ...style
+    };
+    const headerStyle = applyStyles(styles.header, isUnstyled);
+    return /* @__PURE__ */ React4.createElement(
+      motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([ref, dragConstraints.ref]),
+        style: headerWrapperStyle,
+        className: `react-modal-sheet-header-container ${className}`,
+        ...dragProps,
+        dragConstraints: dragConstraints.ref,
+        onMeasureDragConstraints: dragConstraints.onMeasure
+      },
+      children || /* @__PURE__ */ React4.createElement("div", { className: "react-modal-sheet-header", style: headerStyle }, /* @__PURE__ */ React4.createElement(SheetDragIndicator, null))
+    );
   }
-};
+);
+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 +493,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 +514,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 +559,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 +586,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;
@@ -623,83 +802,370 @@ function scrollIntoView(target) {
 function willOpenKeyboard(target) {
   return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
 }
-
-// src/sheet.tsx
+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 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 = forwardRef(
   ({
-    onOpenStart,
-    onOpenEnd,
-    onClose,
-    onCloseStart,
-    onCloseEnd,
-    onSnap,
+    avoidKeyboard = true,
     children,
+    className = "",
+    detent = "default",
+    disableDismiss = false,
+    disableDrag: disableDragProp = false,
     disableScrollLocking = false,
+    dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
+    dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
+    initialSnap,
     isOpen,
-    snapPoints: snapPointsProp,
-    rootId,
     modalEffectRootId,
+    modalEffectThreshold,
     mountPoint,
-    style,
-    detent = "full-height",
-    initialSnap = 0,
-    disableDrag = false,
     prefersReducedMotion = false,
+    snapPoints: snapPointsProp,
+    style,
     tweenConfig = DEFAULT_TWEEN_CONFIG,
-    dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
-    dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
-    modalEffectThreshold,
+    unstyled = false,
+    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
-    });
-    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 onDragStart = useStableCallback(() => {
+    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 blurActiveInput = useStableCallback(() => {
       const focusedElement = document.activeElement;
       if (!focusedElement || !sheetRef.current) return;
       const isInput = focusedElement.tagName === "INPUT" || focusedElement.tagName === "TEXTAREA";
@@ -707,351 +1173,153 @@ 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,
+      unstyled,
+      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: {
+          ...applyStyles(styles.root, unstyled),
+          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(
-  ({
-    autoPadding = true,
-    disableScroll = false,
-    draggableAt = "top",
-    children,
-    style: styleProp,
-    className = "",
-    ...rest
-  }, ref) => {
-    const { y } = useSheetContext();
-    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;
-    const style = {
-      ...styles.scroller,
-      ...styleProp
-    };
-    if (autoPadding) {
-      style.paddingBottom = y;
-    }
-    if (disableScroll) {
-      style.overflowY = "hidden";
-    }
-    return /* @__PURE__ */ React2.createElement(
-      motion.div,
-      {
-        ...rest,
-        ref,
-        className: `react-modal-sheet-scroller ${className}`,
-        style,
-        ...scrollProps
-      },
-      children
-    );
-  }
-);
-SheetScroller.displayName = "SheetScroller";
 
 // src/index.tsx
 var Sheet2 = Object.assign(Sheet, {
   Container: SheetContainer,
   Header: SheetHeader,
+  DragIndicator: SheetDragIndicator,
   Content: SheetContent,
-  Backdrop: SheetBackdrop,
-  Scroller: SheetScroller
+  Backdrop: SheetBackdrop
 });
 
 export { Sheet2 as Sheet };