react-modal-sheet 5.5.0 → 5.6.0

package/dist/index.js

@@ -1,129 +1,29 @@
 'use strict';
 
+var React = require('react');
 var react = require('motion/react');
-var React4 = require('react');
 var reactDom = require('react-dom');
 var useMeasure = require('react-use-measure');
 var motion = require('motion');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React__default = /*#__PURE__*/_interopDefault(React);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
 
-// src/SheetBackdrop.tsx
-var SheetContext = React4.createContext(
-  void 0
-);
-function useSheetContext() {
-  const context = React4.useContext(SheetContext);
+// src/context.tsx
+var InternalSheetContext = React.createContext(void 0);
+var ExposedSheetContext = React.createContext(void 0);
+function useInternalContext() {
+  const context = React.useContext(InternalSheetContext);
+  if (!context) throw new Error("Sheet context error");
+  return context;
+}
+function useExposedContext() {
+  const context = React.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)";
@@ -138,6 +38,29 @@ var REDUCED_MOTION_TWEEN_CONFIG = {
 };
 var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
 var DEFAULT_DRAG_VELOCITY_THRESHOLD = 1200;
+var useIsomorphicLayoutEffect = IS_SSR ? React.useEffect : React.useLayoutEffect;
+
+// src/hooks/use-dimensions.ts
+function useDimensions() {
+  const [dimensions, setDimensions] = React.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) {
@@ -220,356 +143,46 @@ function willOpenKeyboard(target) {
 function isHTTPS() {
   return typeof window !== "undefined" && window.isSecureContext;
 }
-
-// src/SheetBackdrop.tsx
-var isClickable = (props) => !!props.onClick || !!props.onTap;
-var SheetBackdrop = React4.forwardRef(
-  ({ style, className = "", unstyled, ...rest }, ref) => {
-    const sheetContext = useSheetContext();
-    const clickable = isClickable(rest);
-    const Comp = clickable ? react.motion.button : react.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__default.default.createElement(
-      Comp,
-      {
-        ...animationProps,
-        ...rest,
-        ref,
-        className: `react-modal-sheet-backdrop ${className}`,
-        style: backdropStyle
-      }
-    );
-  }
-);
-SheetBackdrop.displayName = "SheetBackdrop";
-var SheetContainer = React4.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__default.default.createElement(
-      react.motion.div,
-      {
-        ...rest,
-        ref: mergeRefs([
-          ref,
-          sheetContext.sheetRef,
-          sheetContext.sheetBoundsRef
-        ]),
-        className: `react-modal-sheet-container ${className}`,
-        style: containerStyle
-      },
-      children
-    );
-  }
-);
-SheetContainer.displayName = "SheetContainer";
-var constraints = { bottom: 0, top: 0, left: 0, right: 0 };
-function useDragConstraints() {
-  const ref = React4.useRef(null);
-  const onMeasure = React4.useCallback(() => constraints, []);
-  return { ref, onMeasure };
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
 }
-var useIsomorphicLayoutEffect = IS_SSR ? React4.useEffect : React4.useLayoutEffect;
-
-// src/hooks/use-stable-callback.ts
 function useStableCallback(handler) {
-  const handlerRef = React4.useRef(void 0);
+  const handlerRef = React.useRef(void 0);
   useIsomorphicLayoutEffect(() => {
     handlerRef.current = handler;
   });
-  return React4.useCallback((...args) => {
+  return React.useCallback((...args) => {
     const fn = handlerRef.current;
     return fn == null ? void 0 : fn(...args);
   }, []);
 }
-
-// src/hooks/use-scroll-position.ts
-function useScrollPosition(options = {}) {
-  const { debounceDelay = 32, isEnabled = true } = options;
-  const scrollTimeoutRef = React4.useRef(null);
-  const [element, setElement] = React4.useState(null);
-  const [scrollPosition, setScrollPosition] = React4.useState(void 0);
-  const scrollRef = React4.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);
+var virtualKeyboardOverlayUsers = 0;
+var initialVirtualKeyboardOverlaysContent = null;
+function useVirtualKeyboard(options = {}) {
+  const {
+    containerRef,
+    isEnabled = true,
+    debounceDelay = 100,
+    visualViewportThreshold = 100
+  } = options;
+  const [state, setState] = React.useState({
+    isVisible: false,
+    height: 0
   });
-  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 focusedElementRef = React.useRef(null);
+  const debounceTimer = React.useRef(null);
+  React.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)`
         );
-      }
-    }
-  });
-  const onTouchStart = useStableCallback((event) => {
-    if (event.currentTarget instanceof HTMLElement) {
-      const element2 = event.currentTarget;
-      requestAnimationFrame(() => {
-        determineScrollPosition(element2);
-      });
-    }
-  });
-  React4.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 = React4.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__default.default.createElement(
-      react.motion.div,
-      {
-        ...rest,
-        ref: mergeRefs([ref, dragConstraints.ref]),
-        className: `react-modal-sheet-content ${className}`,
-        style: contentStyle,
-        ...dragProps,
-        dragConstraints: dragConstraints.ref,
-        onMeasureDragConstraints: dragConstraints.onMeasure
-      },
-      /* @__PURE__ */ React4__default.default.createElement(
-        react.motion.div,
-        {
-          ref: mergeRefs([scroll.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 = react.useTransform(
-    sheetContext.indicatorRotation,
-    (r) => `translateX(2px) rotate(${r}deg)`
-  );
-  const indicator2Transform = react.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__default.default.createElement(
-    "div",
-    {
-      className: `react-modal-sheet-drag-indicator-container ${className}`,
-      style: indicatorWrapperStyle,
-      ...rest
-    },
-    /* @__PURE__ */ React4__default.default.createElement(
-      react.motion.span,
-      {
-        className: "react-modal-sheet-drag-indicator",
-        style: { ...indicatorStyle, transform: indicator1Transform }
-      }
-    ),
-    /* @__PURE__ */ React4__default.default.createElement(
-      react.motion.span,
-      {
-        className: "react-modal-sheet-drag-indicator",
-        style: { ...indicatorStyle, transform: indicator2Transform }
-      }
-    )
-  );
-}
-var SheetHeader = React4.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__default.default.createElement(
-      react.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__default.default.createElement("div", { className: "react-modal-sheet-header", style: headerStyle }, /* @__PURE__ */ React4__default.default.createElement(SheetDragIndicator, null))
-    );
-  }
-);
-SheetHeader.displayName = "SheetHeader";
-function useDimensions() {
-  const [dimensions, setDimensions] = React4.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] = React4.useState({
-    isVisible: false,
-    height: 0
-  });
-  const focusedElementRef = React4.useRef(null);
-  const debounceTimer = React4.useRef(null);
-  React4.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`);
+      } else {
+        element.style.setProperty("--keyboard-inset-height", `${height}px`);
       }
     }
     function setKeyboardState(nextState) {
@@ -691,7 +304,7 @@ function useKeyboardAvoidance({
   onWillOpenKeyboard,
   onDidOpenKeyboard
 }) {
-  const [focusedElement, setFocusedElement] = React4.useState(
+  const [focusedElement, setFocusedElement] = React.useState(
     null
   );
   const keyboard = useVirtualKeyboard({
@@ -712,7 +325,7 @@ function useKeyboardAvoidance({
       setFocusedElement(null);
     }
   });
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (!isEnabled) return;
     document.addEventListener("focusin", handleFocusIn);
     document.addEventListener("focusout", handleFocusOut);
@@ -721,7 +334,7 @@ function useKeyboardAvoidance({
       document.removeEventListener("focusout", handleFocusOut);
     };
   }, [isEnabled]);
-  React4.useEffect(() => {
+  React.useEffect(() => {
     const containerElement = containerRef.current;
     if (!isEnabled || !focusedElement || !containerElement || !keyboard.isKeyboardOpen) {
       return;
@@ -733,7 +346,7 @@ function useKeyboardAvoidance({
   return keyboard;
 }
 function useSafeAreaInsets() {
-  const [insets] = React4.useState(() => {
+  const [insets] = React.useState(() => {
     const fallback = { top: 0, left: 0, right: 0, bottom: 0 };
     if (IS_SSR) return fallback;
     const root = document.querySelector(":root");
@@ -775,77 +388,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 = motion.transform(progress, [0, 1], [0, 24 + insetTop]);
-      const s = motion.transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]);
-      const borderRadius = motion.transform(progress, [0, 1], [0, 10]);
-      root.style.transform = `scale(${s}) translate3d(0, ${ty}px, 0)`;
-      root.style.borderTopRightRadius = `${borderRadius}px`;
-      root.style.borderTopLeftRadius = `${borderRadius}px`;
+    }
+    progress = Math.max(0, Math.min(1, progress));
+    const pageWidth = window.innerWidth;
+    updateModalEffect(rootId, {
+      scale: motion.transform(progress, [0, 1], [1, (pageWidth - 16) / pageWidth]),
+      translateY: motion.transform(progress, [0, 1], [0, 24 + insetTop]),
+      borderRadius: motion.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);
+  });
+  React.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 updateModalEffect(rootId, opts) {
+  const root = document.querySelector(`#${rootId}`);
+  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}`);
-  const body = document.querySelector("body");
   if (!root) return;
+  const body = document.querySelector("body");
   body.style.removeProperty("background-color");
   root.style.removeProperty("overflow");
   root.style.removeProperty("transition-timing-function");
@@ -1065,19 +683,19 @@ function useSheetState({
   onOpen: _onOpen,
   onClosing: _onClosing
 }) {
-  const [state, setState] = React4.useState(isOpen ? "opening" : "closed");
+  const [state, setState] = React.useState(isOpen ? "opening" : "closed");
   const onClosed = useStableCallback(() => _onClosed == null ? void 0 : _onClosed());
   const onOpening = useStableCallback(() => _onOpening == null ? void 0 : _onOpening());
   const onOpen = useStableCallback(() => _onOpen == null ? void 0 : _onOpen());
   const onClosing = useStableCallback(() => _onClosing == null ? void 0 : _onClosing());
-  React4.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen && state === "closed") {
       setState("opening");
     } else if (!isOpen && (state === "open" || state === "opening")) {
       setState("closing");
     }
   }, [isOpen, state]);
-  React4.useEffect(() => {
+  React.useEffect(() => {
     async function handle() {
       switch (state) {
         case "closed":
@@ -1157,9 +775,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;
@@ -1299,48 +914,152 @@ function classifyDragEnd({
   };
 }
 
-// src/sheet.tsx
-var Sheet = React4.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,
+// 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 = React.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__default.default();
-    const sheetRef = React4.useRef(null);
+    const sheetRef = React.useRef(null);
     const sheetHeight = Math.round(sheetBounds.height);
-    const [currentSnap, setCurrentSnap] = React4.useState(initialSnap);
-    const snapPoints = snapPointsProp && sheetHeight > 0 ? computeSnapPoints({ sheetHeight, snapPointsProp }) : [];
+    const [currentSnap, setCurrentSnap] = React.useState(initialSnap);
     const { windowHeight } = useDimensions();
     const closedY = sheetHeight > 0 ? sheetHeight : windowHeight;
     const y = react.useMotionValue(closedY);
     const yInverted = react.useTransform(y, (val) => Math.max(sheetHeight - val, 0));
+    const yProgress = react.useTransform(y, (val) => clamp(1 - val / closedY, 0, 1));
     const indicatorRotation = react.useMotionValue(0);
     const shouldReduceMotion = react.useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
@@ -1356,6 +1075,9 @@ var Sheet = React4.forwardRef(
       y,
       (val) => val + 2 >= closedY ? "hidden" : "visible"
     );
+    const snapPoints = React.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);
@@ -1468,12 +1190,6 @@ var Sheet = React4.forwardRef(
       }
       indicatorRotation.set(0);
     });
-    React4.useImperativeHandle(ref, () => ({
-      y,
-      yInverted,
-      height: sheetHeight,
-      snapTo
-    }));
     useModalEffect({
       y,
       detent,
@@ -1493,9 +1209,7 @@ var Sheet = React4.forwardRef(
         const initialSnapPoint = initialSnap !== void 0 ? getSnapPoint(initialSnap) : null;
         const yTo = (initialSnapPoint == null ? void 0 : initialSnapPoint.snapValueY) ?? 0;
         await react.animate(y, yTo, animationOptions);
-        if (initialSnap !== void 0) {
-          updateSnap(initialSnap);
-        }
+        if (initialSnap !== void 0) updateSnap(initialSnap);
         onOpenEnd == null ? void 0 : onOpenEnd();
       },
       onClosing: async () => {
@@ -1513,7 +1227,7 @@ var Sheet = React4.forwardRef(
       onDragStart,
       onDragEnd
     };
-    const context = {
+    const internalContext = {
       currentSnap,
       detent,
       disableDrag,
@@ -1524,9 +1238,20 @@ var Sheet = React4.forwardRef(
       sheetBoundsRef,
       sheetRef,
       unstyled,
+      yProgress,
       y
     };
-    const sheet = /* @__PURE__ */ React4__default.default.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React4__default.default.createElement(
+    const exposedContext = {
+      height: sheetHeight,
+      currentSnap,
+      snapPoints,
+      snapTo,
+      y,
+      yInverted,
+      yProgress
+    };
+    React.useImperativeHandle(ref, () => exposedContext);
+    const sheet = /* @__PURE__ */ React__default.default.createElement(InternalSheetContext.Provider, { value: internalContext }, /* @__PURE__ */ React__default.default.createElement(
       react.motion.div,
       {
         ...rest,
@@ -1540,13 +1265,293 @@ var Sheet = React4.forwardRef(
           ...style
         }
       },
-      state !== "closed" ? children : null
+      /* @__PURE__ */ React__default.default.createElement(ExposedSheetContext.Provider, { value: exposedContext }, state !== "closed" ? children : null)
     ));
     if (IS_SSR) return sheet;
     return reactDom.createPortal(sheet, mountPoint ?? document.body);
   }
 );
 Sheet.displayName = "Sheet";
+var isClickable = (props) => !!props.onClick || !!props.onTap;
+var SheetBackdrop = React.forwardRef(
+  ({ style, className = "", unstyled, ...rest }, ref) => {
+    const sheetContext = useInternalContext();
+    const clickable = isClickable(rest);
+    const Comp = clickable ? react.motion.button : react.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__default.default.createElement(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: `react-modal-sheet-backdrop ${className}`,
+        style: backdropStyle
+      }
+    );
+  }
+);
+SheetBackdrop.displayName = "SheetBackdrop";
+var SheetContainer = React.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__default.default.createElement(
+      react.motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([
+          ref,
+          sheetContext.sheetRef,
+          sheetContext.sheetBoundsRef
+        ]),
+        className: `react-modal-sheet-container ${className}`,
+        style: containerStyle
+      },
+      children
+    );
+  }
+);
+SheetContainer.displayName = "SheetContainer";
+var constraints = { bottom: 0, top: 0, left: 0, right: 0 };
+function useDragConstraints() {
+  const ref = React.useRef(null);
+  const onMeasure = React.useCallback(() => constraints, []);
+  return { ref, onMeasure };
+}
+function useScrollPosition(options = {}) {
+  const { debounceDelay = 32, isEnabled = true } = options;
+  const scrollTimeoutRef = React.useRef(null);
+  const [element, setElement] = React.useState(null);
+  const [scrollPosition, setScrollPosition] = React.useState(void 0);
+  const scrollRef = React.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);
+      });
+    }
+  });
+  React.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 = React.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__default.default.createElement(
+      react.motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([ref, dragConstraints.ref]),
+        className: `react-modal-sheet-content ${className}`,
+        style: contentStyle,
+        ...dragProps,
+        dragConstraints: dragConstraints.ref,
+        onMeasureDragConstraints: dragConstraints.onMeasure
+      },
+      /* @__PURE__ */ React__default.default.createElement(
+        react.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 = react.useTransform(
+    sheetContext.indicatorRotation,
+    (r) => `translateX(2px) rotate(${r}deg)`
+  );
+  const indicator2Transform = react.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__default.default.createElement(
+    "div",
+    {
+      className: `react-modal-sheet-drag-indicator-container ${className}`,
+      style: indicatorWrapperStyle,
+      ...rest
+    },
+    /* @__PURE__ */ React__default.default.createElement(
+      react.motion.span,
+      {
+        className: "react-modal-sheet-drag-indicator",
+        style: { ...indicatorStyle, transform: indicator1Transform }
+      }
+    ),
+    /* @__PURE__ */ React__default.default.createElement(
+      react.motion.span,
+      {
+        className: "react-modal-sheet-drag-indicator",
+        style: { ...indicatorStyle, transform: indicator2Transform }
+      }
+    )
+  );
+}
+var SheetHeader = React.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__default.default.createElement(
+      react.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__default.default.createElement("div", { className: "react-modal-sheet-header", style: headerStyle }, /* @__PURE__ */ React__default.default.createElement(SheetDragIndicator, null))
+    );
+  }
+);
+SheetHeader.displayName = "SheetHeader";
 
 // src/index.tsx
 var Sheet2 = Object.assign(Sheet, {
@@ -1554,7 +1559,8 @@ var Sheet2 = Object.assign(Sheet, {
   Header: SheetHeader,
   DragIndicator: SheetDragIndicator,
   Content: SheetContent,
-  Backdrop: SheetBackdrop
+  Backdrop: SheetBackdrop,
+  useContext: useExposedContext
 });
 
 exports.Sheet = Sheet2;