react-modal-sheet 5.4.1 → 5.6.0

package/dist/index.mjs

@@ -1,122 +1,22 @@
-import { motion, useMotionValue, useTransform, useReducedMotion, animate } from 'motion/react';
-import React4, { createContext, forwardRef, useRef, useState, useImperativeHandle, useContext, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
+import React, { createContext, forwardRef, useRef, useState, useMemo, useImperativeHandle, useEffect, useLayoutEffect, useCallback, useContext } from 'react';
+import { useMotionValue, useTransform, useReducedMotion, motion, animate } from 'motion/react';
 import { createPortal } from 'react-dom';
 import useMeasure from 'react-use-measure';
 import { transform } from 'motion';
 
-// src/SheetBackdrop.tsx
-var SheetContext = createContext(
-  void 0
-);
-function useSheetContext() {
-  const context = useContext(SheetContext);
+// src/context.tsx
+var InternalSheetContext = createContext(void 0);
+var ExposedSheetContext = createContext(void 0);
+function useInternalContext() {
+  const context = useContext(InternalSheetContext);
+  if (!context) throw new Error("Sheet context error");
+  return context;
+}
+function useExposedContext() {
+  const context = useContext(ExposedSheetContext);
   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 DEFAULT_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
@@ -130,7 +30,30 @@ var REDUCED_MOTION_TWEEN_CONFIG = {
   duration: 0.01
 };
 var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
-var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
+var DEFAULT_DRAG_VELOCITY_THRESHOLD = 1200;
+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;
+}
 
 // src/utils.ts
 function applyStyles(styles2, unstyled) {
@@ -213,86 +136,9 @@ function willOpenKeyboard(target) {
 function isHTTPS() {
   return typeof window !== "undefined" && window.isSecureContext;
 }
-
-// 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
-    };
-    const animationProps = sheetContext.prefersReducedMotion ? {} : {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 1 }
-    };
-    return /* @__PURE__ */ React4.createElement(
-      Comp,
-      {
-        ...animationProps,
-        ...rest,
-        ref,
-        className: `react-modal-sheet-backdrop ${className}`,
-        style: backdropStyle
-      }
-    );
-  }
-);
-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 clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
 }
-var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
-
-// src/hooks/use-stable-callback.ts
 function useStableCallback(handler) {
   const handlerRef = useRef(void 0);
   useIsomorphicLayoutEffect(() => {
@@ -303,272 +149,39 @@ function useStableCallback(handler) {
     return fn == null ? void 0 : fn(...args);
   }, []);
 }
-
-// src/hooks/use-scroll-position.ts
-function useScrollPosition(options = {}) {
-  const { debounceDelay = 32, isEnabled = true } = options;
-  const scrollTimeoutRef = useRef(null);
-  const [element, setElement] = useState(null);
-  const [scrollPosition, setScrollPosition] = useState(void 0);
-  const scrollRef = useMemo(
-    () => (element2) => {
-      setElement(element2);
-    },
-    []
-  );
-  const determineScrollPosition = useStableCallback((element2) => {
-    const { scrollTop, scrollHeight, clientHeight } = element2;
-    const isScrollable2 = scrollHeight > clientHeight;
-    if (!isScrollable2) {
-      if (scrollPosition) setScrollPosition(void 0);
-      return;
+var virtualKeyboardOverlayUsers = 0;
+var initialVirtualKeyboardOverlaysContent = null;
+function useVirtualKeyboard(options = {}) {
+  const {
+    containerRef,
+    isEnabled = true,
+    debounceDelay = 100,
+    visualViewportThreshold = 100
+  } = options;
+  const [state, setState] = useState({
+    isVisible: false,
+    height: 0
+  });
+  const focusedElementRef = useRef(null);
+  const debounceTimer = useRef(null);
+  useEffect(() => {
+    const vv = window.visualViewport;
+    const vk = getVirtualKeyboardApi();
+    function setKeyboardInsetHeightEnv(height) {
+      const element = (containerRef == null ? void 0 : containerRef.current) || document.documentElement;
+      if (vk) {
+        element.style.setProperty(
+          "--keyboard-inset-height",
+          `env(keyboard-inset-height, ${height}px)`
+        );
+      } else {
+        element.style.setProperty("--keyboard-inset-height", `${height}px`);
+      }
     }
-    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";
-    }
-    element2.style.touchAction = isAtTop ? "pan-down" : "";
-    if (position === scrollPosition) return;
-    setScrollPosition(position);
-  });
-  const onScroll = useStableCallback((event) => {
-    if (event.currentTarget instanceof HTMLElement) {
-      const el = event.currentTarget;
-      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
-      if (debounceDelay === 0) {
-        determineScrollPosition(el);
-      } else {
-        scrollTimeoutRef.current = setTimeout(
-          () => determineScrollPosition(el),
-          debounceDelay
-        );
-      }
-    }
-  });
-  const onTouchStart = useStableCallback((event) => {
-    if (event.currentTarget instanceof HTMLElement) {
-      const element2 = event.currentTarget;
-      requestAnimationFrame(() => {
-        determineScrollPosition(element2);
-      });
-    }
-  });
-  useEffect(() => {
-    if (!element || !isEnabled) return;
-    determineScrollPosition(element);
-    element.addEventListener("scroll", onScroll);
-    element.addEventListener("touchstart", onTouchStart);
-    return () => {
-      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
-      element.removeEventListener("scroll", onScroll);
-      element.removeEventListener("touchstart", onTouchStart);
-    };
-  }, [element, isEnabled]);
-  return {
-    scrollRef,
-    scrollPosition
-  };
-}
-
-// src/SheetContent.tsx
-var SheetContent = forwardRef(
-  ({
-    disableScroll: disableScrollProp,
-    disableDrag: disableDragProp,
-    children,
-    style: styleProp,
-    className = "",
-    scrollClassName = "",
-    scrollStyle: scrollStyleProp,
-    scrollRef: scrollRefProp = null,
-    unstyled,
-    ...rest
-  }, ref) => {
-    const sheetContext = useSheetContext();
-    const dragConstraints = useDragConstraints();
-    const scroll = useScrollPosition({
-      isEnabled: typeof disableScrollProp === "function" ? true : !disableScrollProp
-    });
-    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 = isHTTPS() ? "env(keyboard-inset-height, var(--keyboard-inset-height, 0px))" : "var(--keyboard-inset-height, 0px)";
-    }
-    if (disableScroll) {
-      scrollStyle.overflowY = "hidden";
-    }
-    if (dragProps !== void 0) {
-      scrollStyle.touchAction = "pan-down";
-    }
-    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.scrollRef, scrollRefProp]),
-          style: { ...scrollStyle, ...scrollStyleProp },
-          className: `react-modal-sheet-content-scroller ${scrollClassName}`
-        },
-        children
-      )
-    );
-  }
-);
-SheetContent.displayName = "SheetContent";
-function SheetDragIndicator({
-  style,
-  className = "",
-  unstyled,
-  ...rest
-}) {
-  const sheetContext = useSheetContext();
-  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",
-    {
-      className: `react-modal-sheet-drag-indicator-container ${className}`,
-      style: indicatorWrapperStyle,
-      ...rest
-    },
-    /* @__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 }
-      }
-    )
-  );
-}
-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";
-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;
-}
-var virtualKeyboardOverlayUsers = 0;
-var initialVirtualKeyboardOverlaysContent = null;
-function useVirtualKeyboard(options = {}) {
-  const {
-    containerRef,
-    isEnabled = true,
-    debounceDelay = 100,
-    visualViewportThreshold = 100
-  } = options;
-  const [state, setState] = useState({
-    isVisible: false,
-    height: 0
-  });
-  const focusedElementRef = useRef(null);
-  const debounceTimer = useRef(null);
-  useEffect(() => {
-    const vv = window.visualViewport;
-    const vk = getVirtualKeyboardApi();
-    function setKeyboardInsetHeightEnv(height) {
-      const element = (containerRef == null ? void 0 : containerRef.current) || document.documentElement;
-      if (vk) {
-        element.style.setProperty(
-          "--keyboard-inset-height",
-          `env(keyboard-inset-height, ${height}px)`
-        );
-      } else {
-        element.style.setProperty("--keyboard-inset-height", `${height}px`);
-      }
-    }
-    function setKeyboardState(nextState) {
-      setState(
-        (prevState) => prevState.isVisible === nextState.isVisible && prevState.height === nextState.height ? prevState : nextState
-      );
+    function setKeyboardState(nextState) {
+      setState(
+        (prevState) => prevState.isVisible === nextState.isVisible && prevState.height === nextState.height ? prevState : nextState
+      );
     }
     function resetKeyboardState() {
       focusedElementRef.current = null;
@@ -768,77 +381,82 @@ function useModalEffect({
     console.warn('Using "full" detent with modal effect is not supported.');
     rootId = void 0;
   }
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      if (rootId) cleanupModalEffect(rootId);
-    };
-  }, []);
-  useIsomorphicLayoutEffect(() => {
+  const handleYChange = useStableCallback((yValue) => {
     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;
-        }
+    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;
-        }
+    }
+    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 = transform(progress, [0, 1], [0, 24 + insetTop]);
-      const s = transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]);
-      const borderRadius = 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`;
+    }
+    progress = Math.max(0, Math.min(1, progress));
+    const pageWidth = window.innerWidth;
+    updateModalEffect(rootId, {
+      scale: transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]),
+      translateY: transform(progress, [0, 1], [0, 24 + insetTop]),
+      borderRadius: transform(progress, [0, 1], [0, 10])
     });
-    function onCompleted() {
-      if (y.get() - 5 >= sheetHeight) {
-        cleanupModalEffect(rootId);
-      }
+  });
+  const handleYComplete = useStableCallback(() => {
+    if (!rootId) return;
+    if (y.get() + 5 >= sheetHeight) {
+      cleanupModalEffect(rootId);
     }
-    const removeCompleteListener = y.on("animationComplete", onCompleted);
-    const removeCancelListener = y.on("animationCancel", onCompleted);
+  });
+  useEffect(() => {
+    if (!rootId) return;
+    const removeStartListener = y.on("animationStart", () => {
+      if (rootId) setupModalEffect(rootId);
+    });
+    const removeChangeListener = y.on("change", (yValue) => {
+      handleYChange(yValue);
+    });
+    const removeCompleteListener = y.on("animationComplete", handleYComplete);
+    const removeCancelListener = y.on("animationCancel", handleYComplete);
     return () => {
+      if (rootId) cleanupModalEffect(rootId);
       removeStartListener();
       removeChangeListener();
       removeCompleteListener();
       removeCancelListener();
     };
-  }, [y, rootId, insetTop, startThreshold, sheetHeight]);
+  }, [rootId]);
 }
 function setupModalEffect(rootId) {
   const root = document.querySelector(`#${rootId}`);
-  const body = document.querySelector("body");
   if (!root) return;
-  body.style.backgroundColor = "#000";
+  const body = document.querySelector("body");
+  body.style.backgroundColor = "#000000";
   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) {
+function updateModalEffect(rootId, opts) {
   const root = document.querySelector(`#${rootId}`);
-  const body = document.querySelector("body");
   if (!root) return;
+  const { scale, translateY, borderRadius } = opts;
+  root.style.transform = `scale(${scale}) translate3d(0, ${translateY}px, 0)`;
+  root.style.borderTopRightRadius = `${borderRadius}px`;
+  root.style.borderTopLeftRadius = `${borderRadius}px`;
+}
+function cleanupModalEffect(rootId) {
+  const root = document.querySelector(`#${rootId}`);
+  if (!root) return;
+  const body = document.querySelector("body");
   body.style.removeProperty("background-color");
   root.style.removeProperty("overflow");
   root.style.removeProperty("transition-timing-function");
@@ -1150,76 +768,249 @@ function computeSnapPoints({
     // Y value is inverted as `y = 0` means sheet is at the top
   }));
 }
-function findClosestSnapPoint({
-  snapPoints,
-  currentY
-}) {
+function sign(value) {
+  if (value > 0) return 1;
+  if (value < 0) return -1;
+  return 0;
+}
+function toAscendingYSnaps(snapPoints) {
+  return snapPoints.slice().sort((a, b) => a.snapValueY - b.snapValueY);
+}
+function findNearestSnapByY(snapPoints, y) {
   return snapPoints.reduce(
-    (closest, snap) => Math.abs(snap.snapValueY - currentY) < Math.abs(closest.snapValueY - currentY) ? snap : closest
+    (closest, snap) => Math.abs(snap.snapValueY - y) < Math.abs(closest.snapValueY - y) ? snap : closest
   );
 }
-function findNextSnapPointInDirection({
+function findNearestSnapAboveY(snapPoints, y) {
+  const snaps = toAscendingYSnaps(snapPoints);
+  for (let i = snaps.length - 1; i >= 0; i--) {
+    if (snaps[i].snapValueY < y) {
+      return snaps[i];
+    }
+  }
+  return null;
+}
+function findNearestSnapBelowY(snapPoints, y) {
+  const snaps = toAscendingYSnaps(snapPoints);
+  for (let i = 0; i < snaps.length; i++) {
+    if (snaps[i].snapValueY > y) {
+      return snaps[i];
+    }
+  }
+  return null;
+}
+function resolveDirection({
+  offsetY,
+  velocityY,
+  deltaY
+}) {
+  if (Math.abs(velocityY) > 50) return sign(velocityY);
+  const offsetDirection = sign(offsetY);
+  if (offsetDirection !== 0) return offsetDirection;
+  return sign(deltaY);
+}
+function classifyDragEnd({
   y,
+  info,
+  sheetHeight,
   snapPoints,
-  dragDirection
+  dragVelocityThreshold,
+  dragCloseThreshold
 }) {
-  if (dragDirection === "down") {
-    return snapPoints.slice().reverse().find((s) => s.snapValueY > y);
-  } else {
-    return snapPoints.find((s) => s.snapValueY < y);
+  const flickVelocity = dragVelocityThreshold;
+  const strongFlickVelocity = Math.max(2e3, flickVelocity);
+  const distanceCommitRatio = 0.35;
+  const predictionTime = 0.2;
+  const minDragDistance = 20;
+  const snapStickiness = 24;
+  const minY = 0;
+  const maxY = sheetHeight;
+  const offsetY = info.offset.y;
+  const deltaY = info.delta.y;
+  const velocityY = info.velocity.y;
+  const predictedY = clamp(y + velocityY * predictionTime, minY, maxY);
+  const absVelocity = Math.abs(velocityY);
+  const direction = resolveDirection({ offsetY, velocityY, deltaY });
+  const isStrongFlick = absVelocity > strongFlickVelocity;
+  const isFlick = absVelocity > flickVelocity;
+  if (snapPoints.length === 0) {
+    if (isFlick) {
+      return {
+        yTo: direction < 0 ? minY : maxY,
+        snapIndex: void 0
+      };
+    }
+    const midpoint = minY + (maxY - minY) * dragCloseThreshold;
+    return {
+      yTo: predictedY < midpoint ? minY : maxY,
+      snapIndex: void 0
+    };
   }
-}
-function handleHighVelocityDrag({
-  dragDirection,
-  snapPoints
-}) {
-  const bottomSnapPoint = snapPoints[0];
-  const topSnapPoint = snapPoints[snapPoints.length - 1];
-  if (dragDirection === "down") {
+  const nearestSnap = findNearestSnapByY(snapPoints, y);
+  if (!isFlick && Math.abs(offsetY) < minDragDistance) {
     return {
-      yTo: bottomSnapPoint.snapValueY,
-      snapIndex: bottomSnapPoint.snapIndex
+      yTo: nearestSnap.snapValueY,
+      snapIndex: nearestSnap.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) {
+  if (!isFlick && Math.abs(y - nearestSnap.snapValueY) < snapStickiness) {
     return {
-      yTo: closestSnapRelativeToCurrentY.snapValueY,
-      snapIndex: closestSnapRelativeToCurrentY.snapIndex
+      yTo: nearestSnap.snapValueY,
+      snapIndex: nearestSnap.snapIndex
     };
   }
-  const nextSnapInDirectionRelativeToCurrentY = findNextSnapPointInDirection({
-    y: currentY,
-    snapPoints,
-    dragDirection
-  });
-  if (nextSnapInDirectionRelativeToCurrentY) {
+  if (isStrongFlick) {
+    const target = direction < 0 ? minY : maxY;
+    const targetSnap = findNearestSnapByY(snapPoints, target);
+    return {
+      yTo: target,
+      snapIndex: targetSnap.snapIndex
+    };
+  }
+  if (isFlick) {
+    const nextSnap2 = direction < 0 ? findNearestSnapAboveY(snapPoints, y) : findNearestSnapBelowY(snapPoints, y);
+    const fallbackY = direction < 0 ? minY : maxY;
+    const fallbackSnap = findNearestSnapByY(snapPoints, fallbackY);
+    const targetSnap = nextSnap2 ?? fallbackSnap;
     return {
-      yTo: nextSnapInDirectionRelativeToCurrentY.snapValueY,
-      snapIndex: nextSnapInDirectionRelativeToCurrentY.snapIndex
+      yTo: targetSnap.snapValueY,
+      snapIndex: targetSnap.snapIndex
     };
   }
+  const firstSnap = toAscendingYSnaps(snapPoints)[0];
+  const lastSnap = toAscendingYSnaps(snapPoints)[snapPoints.length - 1];
+  const prevSnap = findNearestSnapAboveY(snapPoints, y) ?? firstSnap;
+  const nextSnap = findNearestSnapBelowY(snapPoints, y) ?? lastSnap;
+  if (prevSnap.snapIndex === nextSnap.snapIndex) {
+    return {
+      yTo: prevSnap.snapValueY,
+      snapIndex: prevSnap.snapIndex
+    };
+  }
+  const range = nextSnap.snapValueY - prevSnap.snapValueY;
+  const progress = range > 0 ? (y - prevSnap.snapValueY) / range : 0;
+  let selectedSnap = nearestSnap;
+  if (direction > 0) {
+    selectedSnap = progress > distanceCommitRatio ? nextSnap : prevSnap;
+  } else if (direction < 0) {
+    selectedSnap = progress < 1 - distanceCommitRatio ? prevSnap : nextSnap;
+  }
+  if (absVelocity > 200) {
+    const predictedSnap = findNearestSnapByY(snapPoints, predictedY);
+    if (Math.abs(predictedSnap.snapValueY - y) < Math.abs(selectedSnap.snapValueY - y)) {
+      selectedSnap = predictedSnap;
+    }
+  }
   return {
-    yTo: currentSnapPoint.snapValueY,
-    snapIndex: currentSnapPoint.snapIndex
+    yTo: selectedSnap.snapValueY,
+    snapIndex: selectedSnap.snapIndex
   };
 }
 
+// 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/sheet.tsx
 var Sheet = forwardRef(
   ({
@@ -1257,11 +1048,11 @@ var Sheet = forwardRef(
     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 yProgress = useTransform(y, (val) => clamp(1 - val / closedY, 0, 1));
     const indicatorRotation = useMotionValue(0);
     const shouldReduceMotion = useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
@@ -1277,6 +1068,9 @@ var Sheet = forwardRef(
       y,
       (val) => val + 2 >= closedY ? "hidden" : "visible"
     );
+    const snapPoints = useMemo(() => {
+      return snapPointsProp && sheetHeight > 0 ? computeSnapPoints({ sheetHeight, snapPointsProp }) : [];
+    }, [sheetHeight, snapPointsProp == null ? void 0 : snapPointsProp.join("")]);
     const updateSnap = useStableCallback((snapIndex) => {
       setCurrentSnap(snapIndex);
       onSnap == null ? void 0 : onSnap(snapIndex);
@@ -1363,45 +1157,25 @@ var Sheet = forwardRef(
       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,
-            dragDirection: dragOffsetDirection,
-            snapPoints,
-            velocity: info.velocity.y
-          });
-        }
-        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);
-        }
-      } else if (info.velocity.y > dragVelocityThreshold || currentY > sheetHeight * dragCloseThreshold) {
-        if (disableDismiss) {
-          yTo = 0;
+      const result = classifyDragEnd({
+        y: currentY,
+        info,
+        sheetHeight,
+        dragCloseThreshold,
+        snapPoints,
+        dragVelocityThreshold
+      });
+      let 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 = closedY;
+          yTo = currentY;
         }
+      } else if (result.snapIndex !== void 0) {
+        updateSnap(result.snapIndex);
       }
       animate(y, yTo, animationOptions);
       if (yTo + 1 >= sheetHeight && !disableDismiss) {
@@ -1409,12 +1183,6 @@ var Sheet = forwardRef(
       }
       indicatorRotation.set(0);
     });
-    useImperativeHandle(ref, () => ({
-      y,
-      yInverted,
-      height: sheetHeight,
-      snapTo
-    }));
     useModalEffect({
       y,
       detent,
@@ -1434,9 +1202,7 @@ var Sheet = forwardRef(
         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);
-        }
+        if (initialSnap !== void 0) updateSnap(initialSnap);
         onOpenEnd == null ? void 0 : onOpenEnd();
       },
       onClosing: async () => {
@@ -1454,7 +1220,7 @@ var Sheet = forwardRef(
       onDragStart,
       onDragEnd
     };
-    const context = {
+    const internalContext = {
       currentSnap,
       detent,
       disableDrag,
@@ -1465,9 +1231,20 @@ var Sheet = forwardRef(
       sheetBoundsRef,
       sheetRef,
       unstyled,
+      yProgress,
       y
     };
-    const sheet = /* @__PURE__ */ React4.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React4.createElement(
+    const exposedContext = {
+      height: sheetHeight,
+      currentSnap,
+      snapPoints,
+      snapTo,
+      y,
+      yInverted,
+      yProgress
+    };
+    useImperativeHandle(ref, () => exposedContext);
+    const sheet = /* @__PURE__ */ React.createElement(InternalSheetContext.Provider, { value: internalContext }, /* @__PURE__ */ React.createElement(
       motion.div,
       {
         ...rest,
@@ -1481,13 +1258,293 @@ var Sheet = forwardRef(
           ...style
         }
       },
-      state !== "closed" ? children : null
+      /* @__PURE__ */ React.createElement(ExposedSheetContext.Provider, { value: exposedContext }, state !== "closed" ? children : null)
     ));
     if (IS_SSR) return sheet;
     return createPortal(sheet, mountPoint ?? document.body);
   }
 );
 Sheet.displayName = "Sheet";
+var isClickable = (props) => !!props.onClick || !!props.onTap;
+var SheetBackdrop = forwardRef(
+  ({ style, className = "", unstyled, ...rest }, ref) => {
+    const sheetContext = useInternalContext();
+    const clickable = isClickable(rest);
+    const Comp = clickable ? motion.button : motion.div;
+    const pointerEvents = clickable ? "auto" : "none";
+    const isUnstyled = unstyled ?? sheetContext.unstyled;
+    const backdropStyle = {
+      opacity: sheetContext.yProgress,
+      ...applyStyles(styles.backdrop, isUnstyled),
+      ...style,
+      pointerEvents
+    };
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: `react-modal-sheet-backdrop ${className}`,
+        style: backdropStyle
+      }
+    );
+  }
+);
+SheetBackdrop.displayName = "SheetBackdrop";
+var SheetContainer = forwardRef(
+  ({ children, style, className = "", unstyled, ...rest }, ref) => {
+    const sheetContext = useInternalContext();
+    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__ */ React.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(options = {}) {
+  const { debounceDelay = 32, isEnabled = true } = options;
+  const scrollTimeoutRef = useRef(null);
+  const [element, setElement] = useState(null);
+  const [scrollPosition, setScrollPosition] = useState(void 0);
+  const scrollRef = useMemo(
+    () => (element2) => {
+      setElement(element2);
+    },
+    []
+  );
+  const determineScrollPosition = useStableCallback((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";
+    }
+    element2.style.touchAction = isAtTop ? "pan-down" : "";
+    if (position === scrollPosition) return;
+    setScrollPosition(position);
+  });
+  const onScroll = useStableCallback((event) => {
+    if (event.currentTarget instanceof HTMLElement) {
+      const el = event.currentTarget;
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      if (debounceDelay === 0) {
+        determineScrollPosition(el);
+      } else {
+        scrollTimeoutRef.current = setTimeout(
+          () => determineScrollPosition(el),
+          debounceDelay
+        );
+      }
+    }
+  });
+  const onTouchStart = useStableCallback((event) => {
+    if (event.currentTarget instanceof HTMLElement) {
+      const element2 = event.currentTarget;
+      requestAnimationFrame(() => {
+        determineScrollPosition(element2);
+      });
+    }
+  });
+  useEffect(() => {
+    if (!element || !isEnabled) return;
+    determineScrollPosition(element);
+    element.addEventListener("scroll", onScroll);
+    element.addEventListener("touchstart", onTouchStart);
+    return () => {
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      element.removeEventListener("scroll", onScroll);
+      element.removeEventListener("touchstart", onTouchStart);
+    };
+  }, [element, isEnabled]);
+  return {
+    scrollRef,
+    scrollPosition
+  };
+}
+
+// src/sheet-content.tsx
+var SheetContent = forwardRef(
+  ({
+    disableScroll: disableScrollProp,
+    disableDrag: disableDragProp,
+    children,
+    style: styleProp,
+    className = "",
+    scrollClassName = "",
+    scrollStyle: scrollStyleProp,
+    scrollRef: scrollRefProp = null,
+    unstyled,
+    ...rest
+  }, ref) => {
+    const sheetContext = useInternalContext();
+    const dragConstraints = useDragConstraints();
+    const scroll = useScrollPosition({
+      isEnabled: typeof disableScrollProp === "function" ? true : !disableScrollProp
+    });
+    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 = isHTTPS() ? "env(keyboard-inset-height, var(--keyboard-inset-height, 0px))" : "var(--keyboard-inset-height, 0px)";
+    }
+    if (disableScroll) {
+      scrollStyle.overflowY = "clip";
+    }
+    if (dragProps !== void 0) {
+      scrollStyle.touchAction = "pan-down";
+    }
+    return /* @__PURE__ */ React.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__ */ React.createElement(
+        motion.div,
+        {
+          ref: mergeRefs([scroll.scrollRef, scrollRefProp]),
+          style: { ...scrollStyle, ...scrollStyleProp },
+          className: `react-modal-sheet-content-scroller ${scrollClassName}`
+        },
+        children
+      )
+    );
+  }
+);
+SheetContent.displayName = "SheetContent";
+function SheetDragIndicator({
+  style,
+  className = "",
+  unstyled,
+  ...rest
+}) {
+  const sheetContext = useInternalContext();
+  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__ */ React.createElement(
+    "div",
+    {
+      className: `react-modal-sheet-drag-indicator-container ${className}`,
+      style: indicatorWrapperStyle,
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(
+      motion.span,
+      {
+        className: "react-modal-sheet-drag-indicator",
+        style: { ...indicatorStyle, transform: indicator1Transform }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      motion.span,
+      {
+        className: "react-modal-sheet-drag-indicator",
+        style: { ...indicatorStyle, transform: indicator2Transform }
+      }
+    )
+  );
+}
+var SheetHeader = forwardRef(
+  ({ children, style, disableDrag, unstyled, className = "", ...rest }, ref) => {
+    const sheetContext = useInternalContext();
+    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__ */ React.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__ */ React.createElement("div", { className: "react-modal-sheet-header", style: headerStyle }, /* @__PURE__ */ React.createElement(SheetDragIndicator, null))
+    );
+  }
+);
+SheetHeader.displayName = "SheetHeader";
 
 // src/index.tsx
 var Sheet2 = Object.assign(Sheet, {
@@ -1495,7 +1552,8 @@ var Sheet2 = Object.assign(Sheet, {
   Header: SheetHeader,
   DragIndicator: SheetDragIndicator,
   Content: SheetContent,
-  Backdrop: SheetBackdrop
+  Backdrop: SheetBackdrop,
+  useContext: useExposedContext
 });
 
 export { Sheet2 as Sheet, useScrollPosition, useVirtualKeyboard };