react-modal-sheet 5.5.0 → 5.7.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)";
@@ -131,6 +31,29 @@ var REDUCED_MOTION_TWEEN_CONFIG = {
 };
 var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
 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,251 +149,18 @@ 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;
-    }
-    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
+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);
@@ -768,77 +381,109 @@ 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;
+    let progress = Math.max(0, 1 - yValue / sheetHeight);
+    const snapThresholdPoint = snapPoints.length > 1 ? snapPoints[snapPoints.length - 2] : void 0;
+    if (snapThresholdPoint !== void 0) {
+      const snapThresholdValue = snapThresholdPoint.snapValueY;
+      if (yValue <= snapThresholdValue) {
+        progress = (snapThresholdValue - yValue) / snapThresholdValue;
+      } else {
+        progress = 0;
+      }
+    }
+    if (startThreshold !== void 0) {
+      const startThresholdValue = sheetHeight - Math.min(Math.floor(startThreshold * sheetHeight), sheetHeight);
+      if (yValue <= startThresholdValue) {
+        progress = (startThresholdValue - yValue) / startThresholdValue;
+      } else {
+        progress = 0;
+      }
+    }
+    progress = Math.max(0, Math.min(1, progress));
+    updateModalEffect(rootId, { progress, insetTop });
+  });
+  const handleYComplete = useStableCallback(() => {
+    if (!rootId) return;
+    if (y.get() + 5 >= sheetHeight) {
+      cleanupModalEffect(rootId);
+    }
+  });
+  useEffect(() => {
     if (!rootId) return;
-    const root = document.querySelector(`#${rootId}`);
-    if (!root) return;
     const removeStartListener = y.on("animationStart", () => {
-      setupModalEffect(rootId);
+      if (rootId) setupModalEffect(rootId);
     });
     const removeChangeListener = y.on("change", (yValue) => {
-      if (!root) return;
-      let progress = Math.max(0, 1 - yValue / sheetHeight);
-      const snapThresholdPoint = snapPoints.length > 1 ? snapPoints[snapPoints.length - 2] : void 0;
-      if (snapThresholdPoint !== void 0) {
-        const snapThresholdValue = snapThresholdPoint.snapValueY;
-        if (yValue <= snapThresholdValue) {
-          progress = (snapThresholdValue - yValue) / snapThresholdValue;
-        } else {
-          progress = 0;
-        }
-      }
-      if (startThreshold !== void 0) {
-        const startThresholdValue = sheetHeight - Math.min(Math.floor(startThreshold * sheetHeight), sheetHeight);
-        if (yValue <= startThresholdValue) {
-          progress = (startThresholdValue - yValue) / startThresholdValue;
-        } else {
-          progress = 0;
-        }
-      }
-      progress = Math.max(0, Math.min(1, progress));
-      const pageWidth = window.innerWidth;
-      const ty = 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`;
+      handleYChange(yValue);
     });
-    function onCompleted() {
-      if (y.get() - 5 >= sheetHeight) {
-        cleanupModalEffect(rootId);
-      }
-    }
-    const removeCompleteListener = y.on("animationComplete", onCompleted);
-    const removeCancelListener = y.on("animationCancel", onCompleted);
+    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 target = getModalEffectTarget(rootId);
+  if (!target) return;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    sheet.style.transformOrigin = "center top";
+    return;
+  }
+  const root = target.element;
   const body = document.querySelector("body");
-  if (!root) return;
-  body.style.backgroundColor = "#000";
+  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 updateModalEffect(rootId, opts) {
+  const target = getModalEffectTarget(rootId);
+  if (!target) return;
+  const { progress, insetTop } = opts;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    const sheetWidth = sheet.offsetWidth;
+    const sheetTop = sheet.offsetTop;
+    const scaleEnd2 = (sheetWidth - 16) / sheetWidth;
+    const scale2 = transform(progress, [0, 1], [1, scaleEnd2]);
+    const translateYEnd = clamp(scaleEnd2 * (24 + insetTop) - sheetTop, -10, 0);
+    const translateY2 = transform(progress, [0, 1], [0, translateYEnd]);
+    sheet.style.scale = `${scale2}`;
+    sheet.style.translate = `0 ${translateY2}px`;
+    return;
+  }
+  const root = target.element;
+  const pageWidth = window.innerWidth;
+  const scaleEnd = (pageWidth - 16) / pageWidth;
+  const scale = transform(progress, [0, 1], [1, scaleEnd]);
+  const translateY = transform(progress, [0, 1], [0, 24 + insetTop]);
+  const borderRadius = transform(progress, [0, 1], [0, 10]);
+  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}`);
+  const target = getModalEffectTarget(rootId);
+  if (!target) return;
+  if (target.type === "sheet") {
+    const sheet = target.element;
+    sheet.style.removeProperty("transform-origin");
+    sheet.style.removeProperty("scale");
+    sheet.style.removeProperty("translate");
+    return;
+  }
+  const root = target.element;
   const body = document.querySelector("body");
-  if (!root) return;
   body.style.removeProperty("background-color");
   root.style.removeProperty("overflow");
   root.style.removeProperty("transition-timing-function");
@@ -849,6 +494,19 @@ function cleanupModalEffect(rootId) {
   root.style.removeProperty("border-top-right-radius");
   root.style.removeProperty("border-top-left-radius");
 }
+function getModalEffectTarget(rootId) {
+  const root = document.getElementById(rootId);
+  if (!root) return null;
+  const sheetRoot = root.closest(".react-modal-sheet-root");
+  if (sheetRoot) {
+    const container = sheetRoot.querySelector(
+      ".react-modal-sheet-container"
+    );
+    if (!container) return null;
+    return { type: "sheet", element: container };
+  }
+  return { type: "root", element: root };
+}
 
 // src/hooks/use-prevent-scroll.ts
 var KEYBOARD_BUFFER = 24;
@@ -1150,9 +808,6 @@ function computeSnapPoints({
     // Y value is inverted as `y = 0` means sheet is at the top
   }));
 }
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
 function sign(value) {
   if (value > 0) return 1;
   if (value < 0) return -1;
@@ -1292,48 +947,152 @@ function classifyDragEnd({
   };
 }
 
-// src/sheet.tsx
-var Sheet = forwardRef(
-  ({
-    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,
-    modalEffectRootId,
-    modalEffectThreshold,
-    mountPoint,
-    prefersReducedMotion = false,
-    snapPoints: snapPointsProp,
-    style,
-    tweenConfig = DEFAULT_TWEEN_CONFIG,
-    unstyled = false,
-    onOpenStart,
-    onOpenEnd,
-    onClose,
-    onCloseStart,
-    onCloseEnd,
-    onSnap,
-    onDrag: onDragProp,
-    onDragStart: onDragStartProp,
-    onDragEnd: onDragEndProp,
-    ...rest
+// 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(
+  ({
+    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,
+    modalEffectRootId,
+    modalEffectThreshold,
+    mountPoint,
+    prefersReducedMotion = false,
+    snapPoints: snapPointsProp,
+    style,
+    tweenConfig = DEFAULT_TWEEN_CONFIG,
+    unstyled = false,
+    onOpenStart,
+    onOpenEnd,
+    onClose,
+    onCloseStart,
+    onCloseEnd,
+    onSnap,
+    onDrag: onDragProp,
+    onDragStart: onDragStartProp,
+    onDragEnd: onDragEndProp,
+    ...rest
   }, ref) => {
-    const [sheetBoundsRef, sheetBounds] = useMeasure();
+    const [sheetBoundsRef, sheetBounds] = useMeasure({ offsetSize: true });
     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);
@@ -1349,6 +1108,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);
@@ -1461,12 +1223,6 @@ var Sheet = forwardRef(
       }
       indicatorRotation.set(0);
     });
-    useImperativeHandle(ref, () => ({
-      y,
-      yInverted,
-      height: sheetHeight,
-      snapTo
-    }));
     useModalEffect({
       y,
       detent,
@@ -1486,9 +1242,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 () => {
@@ -1506,7 +1260,7 @@ var Sheet = forwardRef(
       onDragStart,
       onDragEnd
     };
-    const context = {
+    const internalContext = {
       currentSnap,
       detent,
       disableDrag,
@@ -1517,9 +1271,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,
@@ -1533,13 +1298,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, {
@@ -1547,7 +1592,8 @@ var Sheet2 = Object.assign(Sheet, {
   Header: SheetHeader,
   DragIndicator: SheetDragIndicator,
   Content: SheetContent,
-  Backdrop: SheetBackdrop
+  Backdrop: SheetBackdrop,
+  useContext: useExposedContext
 });
 
 export { Sheet2 as Sheet, useScrollPosition, useVirtualKeyboard };