react-modal-sheet 2.2.1 → 3.0.0

package/dist/index.mjs

@@ -0,0 +1,824 @@
+import React2, { createContext, forwardRef, useRef, useEffect, useImperativeHandle, useMemo, Children, cloneElement, useLayoutEffect, useCallback, useState, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { useMotionValue, useReducedMotion, useTransform, animate, motion, AnimatePresence } from 'framer-motion';
+import { useLayoutEffect as useLayoutEffect$1, isIOS, chain, getScrollParent } from '@react-aria/utils';
+
+// src/sheet.tsx
+
+// src/constants.ts
+var MAX_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
+var IS_SSR = typeof window === "undefined";
+var DEFAULT_TWEEN_CONFIG = {
+  ease: "easeOut",
+  duration: 0.2
+};
+var REDUCED_MOTION_TWEEN_CONFIG = {
+  ease: "linear",
+  duration: 0.01
+};
+var DRAG_CLOSE_THRESHOLD = 0.6;
+var DRAG_VELOCITY_THRESHOLD = 500;
+
+// src/utils.ts
+function getClosest(nums, goal) {
+  let closest = nums[0];
+  let minDifference = Math.abs(nums[0] - goal);
+  for (let i = 1; i < nums.length; i++) {
+    const difference = Math.abs(nums[i] - goal);
+    if (difference < minDifference) {
+      closest = nums[i];
+      minDifference = difference;
+    }
+  }
+  return closest;
+}
+function applyRootStyles(rootId) {
+  const body = document.querySelector("body");
+  const root = document.querySelector(`#${rootId}`);
+  if (root) {
+    const p = 24;
+    const h = window.innerHeight;
+    const s = (h - p) / h;
+    body.style.backgroundColor = "#000";
+    root.style.overflow = "hidden";
+    root.style.willChange = "transform";
+    root.style.transition = "transform 200ms ease-in-out, border-radius 200ms linear";
+    root.style.transform = `translateY(calc(env(safe-area-inset-top) + ${p / 2}px)) scale(${s})`;
+    root.style.borderTopRightRadius = "10px";
+    root.style.borderTopLeftRadius = "10px";
+  }
+}
+function cleanupRootStyles(rootId) {
+  const body = document.querySelector("body");
+  const root = document.getElementById(rootId);
+  function onTransitionEnd() {
+    root.style.removeProperty("overflow");
+    root.style.removeProperty("will-change");
+    root.style.removeProperty("transition");
+    body.style.removeProperty("background-color");
+    root.removeEventListener("transitionend", onTransitionEnd);
+  }
+  if (root) {
+    root.style.removeProperty("border-top-right-radius");
+    root.style.removeProperty("border-top-left-radius");
+    root.style.removeProperty("transform");
+    root.addEventListener("transitionend", onTransitionEnd);
+  }
+}
+function inDescendingOrder(arr) {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i + 1] > arr[i])
+      return false;
+  }
+  return true;
+}
+function validateSnapTo({
+  snapTo,
+  sheetHeight
+}) {
+  if (snapTo < 0) {
+    console.warn(
+      `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight + Math.abs(snapTo)}.`
+    );
+  }
+  return Math.max(Math.round(snapTo), 0);
+}
+function mergeRefs(refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref) {
+        ref.current = value;
+      }
+    });
+  };
+}
+function isTouchDevice() {
+  if (typeof window === "undefined")
+    return false;
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+
+// src/hooks.tsx
+var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
+function useModalEffect(isOpen, rootId) {
+  const prevOpen = usePrevious(isOpen);
+  useEffect(() => {
+    if (rootId && !prevOpen && isOpen) {
+      applyRootStyles(rootId);
+    } else if (rootId && !isOpen && prevOpen) {
+      cleanupRootStyles(rootId);
+    }
+  }, [isOpen, prevOpen]);
+  useEffect(() => {
+    return () => {
+      if (rootId && isOpen)
+        cleanupRootStyles(rootId);
+    };
+  }, [isOpen]);
+}
+function useEventCallbacks(isOpen, callbacks) {
+  const prevOpen = usePrevious(isOpen);
+  const didOpen = useRef(false);
+  const handleAnimationComplete = useCallback(() => {
+    var _a, _b, _c, _d;
+    if (!didOpen.current) {
+      (_b = (_a = callbacks.current).onOpenEnd) == null ? void 0 : _b.call(_a);
+      didOpen.current = true;
+    } else {
+      (_d = (_c = callbacks.current).onCloseEnd) == null ? void 0 : _d.call(_c);
+      didOpen.current = false;
+    }
+  }, [isOpen, prevOpen]);
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    if (!prevOpen && isOpen) {
+      (_b = (_a = callbacks.current).onOpenStart) == null ? void 0 : _b.call(_a);
+    } else if (!isOpen && prevOpen) {
+      (_d = (_c = callbacks.current).onCloseStart) == null ? void 0 : _d.call(_c);
+    }
+  }, [isOpen, prevOpen]);
+  return { handleAnimationComplete };
+}
+function useDimensions() {
+  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
+  useIsomorphicLayoutEffect(() => {
+    const updateHeight = () => {
+      setDimensions({ height: window.innerHeight, width: window.innerWidth });
+    };
+    window.addEventListener("resize", updateHeight);
+    updateHeight();
+    return () => {
+      window.removeEventListener("resize", updateHeight);
+    };
+  }, []);
+  return dimensions;
+}
+function usePrevious(state) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = state;
+  });
+  return ref.current;
+}
+function useEvent(handler) {
+  const handlerRef = useRef();
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return useCallback((...args) => {
+    const fn = handlerRef.current;
+    return fn == null ? void 0 : fn(...args);
+  }, []);
+}
+var constraints = { bottom: 0, top: 0, left: 0, right: 0 };
+function useDragConstraints() {
+  const constraintsRef = useRef(null);
+  const onMeasureDragConstraints = useCallback(() => constraints, []);
+  return { constraintsRef, onMeasureDragConstraints };
+}
+var SheetContext = createContext(
+  void 0
+);
+var useSheetContext = () => {
+  const context = useContext(SheetContext);
+  if (!context)
+    throw Error("Sheet context error");
+  return context;
+};
+var SheetScrollerContext = createContext(void 0);
+function SheetScrollerContextProvider({
+  children
+}) {
+  const sheetContext = useSheetContext();
+  const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);
+  function setDragEnabled() {
+    if (!sheetContext.disableDrag)
+      setDisableDrag(false);
+  }
+  function setDragDisabled() {
+    if (!disableDrag)
+      setDisableDrag(true);
+  }
+  return /* @__PURE__ */ React2.createElement(
+    SheetScrollerContext.Provider,
+    {
+      value: { disableDrag, setDragEnabled, setDragDisabled }
+    },
+    children
+  );
+}
+var useSheetScrollerContext = () => {
+  const context = useContext(SheetScrollerContext);
+  if (!context)
+    throw Error("Sheet scroller context error");
+  return context;
+};
+var visualViewport = typeof window !== "undefined" ? window.visualViewport : void 0;
+var nonTextInputTypes = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset"
+]);
+var preventScrollCount = 0;
+var restore;
+function usePreventScroll(options = {}) {
+  const { isDisabled } = options;
+  useLayoutEffect$1(() => {
+    if (isDisabled) {
+      return;
+    }
+    preventScrollCount++;
+    if (preventScrollCount === 1) {
+      if (isIOS()) {
+        restore = preventScrollMobileSafari();
+      } else {
+        restore = preventScrollStandard();
+      }
+    }
+    return () => {
+      preventScrollCount--;
+      if (preventScrollCount === 0) {
+        restore();
+      }
+    };
+  }, [isDisabled]);
+}
+function preventScrollStandard() {
+  return chain(
+    setStyle(
+      document.documentElement,
+      "paddingRight",
+      `${window.innerWidth - document.documentElement.clientWidth}px`
+    ),
+    setStyle(document.documentElement, "overflow", "hidden")
+  );
+}
+function preventScrollMobileSafari() {
+  let scrollable;
+  let lastY = 0;
+  const onTouchStart = (e) => {
+    scrollable = getScrollParent(e.target);
+    if (scrollable === document.documentElement && scrollable === document.body) {
+      return;
+    }
+    lastY = e.changedTouches[0].pageY;
+  };
+  const onTouchMove = (e) => {
+    if (scrollable === void 0) {
+      return;
+    }
+    if (scrollable === document.documentElement || scrollable === document.body) {
+      e.preventDefault();
+      return;
+    }
+    const y = e.changedTouches[0].pageY;
+    const scrollTop = scrollable.scrollTop;
+    const bottom = scrollable.scrollHeight - scrollable.clientHeight;
+    if (bottom === 0) {
+      return;
+    }
+    if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
+      e.preventDefault();
+    }
+    lastY = y;
+  };
+  const onTouchEnd = (e) => {
+    const target = e.target;
+    if (willOpenKeyboard(target) && target !== document.activeElement) {
+      e.preventDefault();
+      target.style.transform = "translateY(-2000px)";
+      target.focus();
+      requestAnimationFrame(() => {
+        target.style.transform = "";
+      });
+    }
+  };
+  const onFocus = (e) => {
+    const target = e.target;
+    if (willOpenKeyboard(target)) {
+      target.style.transform = "translateY(-2000px)";
+      requestAnimationFrame(() => {
+        target.style.transform = "";
+        if (visualViewport) {
+          if (visualViewport.height < window.innerHeight) {
+            requestAnimationFrame(() => {
+              scrollIntoView(target);
+            });
+          } else {
+            visualViewport.addEventListener(
+              "resize",
+              () => {
+                scrollIntoView(target);
+              },
+              { once: true }
+            );
+          }
+        }
+      });
+    }
+  };
+  const onWindowScroll = () => {
+    window.scrollTo(0, 0);
+  };
+  const scrollX = window.pageXOffset;
+  const scrollY = window.pageYOffset;
+  const restoreStyles = chain(
+    setStyle(
+      document.documentElement,
+      "paddingRight",
+      `${window.innerWidth - document.documentElement.clientWidth}px`
+    ),
+    setStyle(document.documentElement, "overflow", "hidden"),
+    setStyle(document.body, "marginTop", `-${scrollY}px`)
+  );
+  window.scrollTo(0, 0);
+  const removeEvents = chain(
+    addEvent(document, "touchstart", onTouchStart, {
+      passive: false,
+      capture: true
+    }),
+    addEvent(document, "touchmove", onTouchMove, {
+      passive: false,
+      capture: true
+    }),
+    addEvent(document, "touchend", onTouchEnd, {
+      passive: false,
+      capture: true
+    }),
+    addEvent(document, "focus", onFocus, true),
+    addEvent(window, "scroll", onWindowScroll)
+  );
+  return () => {
+    restoreStyles();
+    removeEvents();
+    window.scrollTo(scrollX, scrollY);
+  };
+}
+function setStyle(element, style, value) {
+  const cur = element.style[style];
+  element.style[style] = value;
+  return () => {
+    element.style[style] = cur;
+  };
+}
+function addEvent(target, event, handler, options) {
+  target.addEventListener(event, handler, options);
+  return () => {
+    target.removeEventListener(event, handler, options);
+  };
+}
+function scrollIntoView(target) {
+  const root = document.scrollingElement || document.documentElement;
+  while (target && target !== root) {
+    const scrollable = getScrollParent(target);
+    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
+      const scrollableTop = scrollable.getBoundingClientRect().top;
+      const targetTop = target.getBoundingClientRect().top;
+      if (targetTop > scrollableTop + target.clientHeight) {
+        scrollable.scrollTop += targetTop - scrollableTop;
+      }
+    }
+    target = scrollable.parentElement;
+  }
+}
+function willOpenKeyboard(target) {
+  return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
+
+// src/styles.ts
+var styles = {
+  wrapper: {
+    position: "fixed",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    overflow: "hidden",
+    pointerEvents: "none"
+  },
+  backdrop: {
+    zIndex: 1,
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    touchAction: "none",
+    // Disable iOS body scrolling
+    border: "none"
+  },
+  container: {
+    zIndex: 2,
+    position: "absolute",
+    left: 0,
+    bottom: 0,
+    width: "100%",
+    backgroundColor: "#fff",
+    borderTopRightRadius: "8px",
+    borderTopLeftRadius: "8px",
+    boxShadow: "0px -2px 16px rgba(0, 0, 0, 0.3)",
+    display: "flex",
+    flexDirection: "column",
+    pointerEvents: "auto"
+  },
+  headerWrapper: {
+    width: "100%"
+  },
+  header: {
+    height: "40px",
+    width: "100%",
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  indicator: {
+    width: "18px",
+    height: "4px",
+    borderRadius: "99px",
+    backgroundColor: "#ddd"
+  },
+  content: {
+    flexGrow: 1,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "0px",
+    position: "relative"
+  },
+  scroller: {
+    height: "100%",
+    overflowY: "auto"
+  }
+};
+var styles_default = styles;
+
+// src/sheet.tsx
+var Sheet = forwardRef(
+  ({
+    onOpenStart,
+    onOpenEnd,
+    onClose,
+    onCloseStart,
+    onCloseEnd,
+    onSnap,
+    children,
+    disableScrollLocking = false,
+    isOpen,
+    snapPoints,
+    rootId,
+    mountPoint,
+    style,
+    detent = "full-height",
+    initialSnap = 0,
+    disableDrag = false,
+    prefersReducedMotion = false,
+    tweenConfig = DEFAULT_TWEEN_CONFIG,
+    ...rest
+  }, ref) => {
+    const sheetRef = useRef(null);
+    const constraintsRef = useRef(null);
+    const indicatorRotation = useMotionValue(0);
+    const { height: windowHeight } = useDimensions();
+    const shouldReduceMotion = useReducedMotion();
+    const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
+    const animationOptions = {
+      type: "tween",
+      ...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
+    };
+    const y = useMotionValue(0);
+    const zIndex = useTransform(
+      y,
+      (value) => value >= windowHeight ? -1 : 9999999
+    );
+    const visibility = useTransform(
+      y,
+      (value) => value >= windowHeight ? "hidden" : "visible"
+    );
+    const callbacks = useRef({
+      onOpenStart,
+      onOpenEnd,
+      onCloseStart,
+      onCloseEnd
+    });
+    useIsomorphicLayoutEffect(() => {
+      callbacks.current = {
+        onOpenStart,
+        onOpenEnd,
+        onCloseStart,
+        onCloseEnd
+      };
+    });
+    if (snapPoints) {
+      snapPoints = snapPoints.map((point) => {
+        if (point > 0 && point <= 1)
+          return Math.round(point * windowHeight);
+        return point < 0 ? windowHeight + point : point;
+      });
+      console.assert(
+        inDescendingOrder(snapPoints) || windowHeight === 0,
+        `Snap points need to be in descending order got: [${snapPoints.join(
+          ", "
+        )}]`
+      );
+    }
+    const onDrag = useEvent((_, { delta }) => {
+      const velocity = y.getVelocity();
+      if (velocity > 0)
+        indicatorRotation.set(10);
+      if (velocity < 0)
+        indicatorRotation.set(-10);
+      y.set(Math.max(y.get() + delta.y, 0));
+    });
+    const onDragEnd = useEvent((_, { velocity }) => {
+      if (velocity.y > DRAG_VELOCITY_THRESHOLD) {
+        onClose();
+      } else {
+        const sheetEl = sheetRef.current;
+        const sheetHeight = sheetEl.getBoundingClientRect().height;
+        const currentY = y.get();
+        let snapTo = 0;
+        if (snapPoints) {
+          const snapToValues = snapPoints.map(
+            (p) => sheetHeight - Math.min(p, sheetHeight)
+          );
+          if (detent === "content-height" && !snapToValues.includes(0)) {
+            snapToValues.unshift(0);
+          }
+          snapTo = getClosest(snapToValues, currentY);
+        } else if (currentY / sheetHeight > DRAG_CLOSE_THRESHOLD) {
+          snapTo = sheetHeight;
+        }
+        snapTo = validateSnapTo({ snapTo, sheetHeight });
+        void animate(y, snapTo, animationOptions);
+        if (snapPoints && onSnap) {
+          const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
+          const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue));
+          onSnap(snapIndex);
+        }
+        const roundedSheetHeight = Math.round(sheetHeight);
+        const shouldClose = snapTo >= roundedSheetHeight;
+        if (shouldClose)
+          onClose();
+      }
+      indicatorRotation.set(0);
+    });
+    useEffect(() => {
+      if (!snapPoints || !onSnap)
+        return;
+      const snapIndex = isOpen ? initialSnap : snapPoints.length - 1;
+      onSnap(snapIndex);
+    }, [isOpen]);
+    useImperativeHandle(ref, () => ({
+      y,
+      snapTo: (snapIndex) => {
+        const sheetEl = sheetRef.current;
+        if ((snapPoints == null ? void 0 : snapPoints[snapIndex]) !== void 0 && sheetEl !== null) {
+          const sheetHeight = sheetEl.getBoundingClientRect().height;
+          const snapPoint = snapPoints[snapIndex];
+          const snapTo = validateSnapTo({
+            snapTo: sheetHeight - snapPoint,
+            sheetHeight
+          });
+          void animate(y, snapTo, animationOptions);
+          if (onSnap)
+            onSnap(snapIndex);
+          if (snapTo >= sheetHeight)
+            onClose();
+        }
+      }
+    }));
+    useModalEffect(isOpen, rootId);
+    usePreventScroll({ isDisabled: disableScrollLocking || !isOpen });
+    const dragProps = useMemo(() => {
+      const dragProps2 = {
+        drag: "y",
+        dragElastic: 0,
+        dragMomentum: false,
+        dragPropagation: false,
+        onDrag,
+        onDragEnd
+      };
+      return disableDrag ? void 0 : dragProps2;
+    }, [disableDrag, windowHeight]);
+    const context = {
+      y,
+      sheetRef,
+      isOpen,
+      initialSnap,
+      snapPoints,
+      detent,
+      indicatorRotation,
+      callbacks,
+      dragProps,
+      windowHeight,
+      animationOptions,
+      reduceMotion,
+      disableDrag
+    };
+    const sheet = /* @__PURE__ */ React2.createElement(SheetContext.Provider, { value: context }, /* @__PURE__ */ React2.createElement(
+      motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([ref, constraintsRef]),
+        style: { ...styles_default.wrapper, zIndex, visibility, ...style }
+      },
+      /* @__PURE__ */ React2.createElement(AnimatePresence, null, isOpen ? /* @__PURE__ */ React2.createElement(SheetScrollerContextProvider, null, Children.map(
+        children,
+        (child, i) => cloneElement(child, { key: `sheet-child-${i}` })
+      )) : null)
+    ));
+    if (IS_SSR)
+      return sheet;
+    return createPortal(sheet, mountPoint ?? document.body);
+  }
+);
+Sheet.displayName = "Sheet";
+var sheet_default = Sheet;
+var SheetContainer = forwardRef(
+  ({ children, style = {}, className = "", ...rest }, ref) => {
+    const {
+      y,
+      isOpen,
+      callbacks,
+      snapPoints,
+      initialSnap = 0,
+      sheetRef,
+      windowHeight,
+      detent,
+      animationOptions,
+      reduceMotion
+    } = useSheetContext();
+    const { handleAnimationComplete } = useEventCallbacks(isOpen, callbacks);
+    const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
+    const maxSnapHeight = snapPoints ? snapPoints[0] : null;
+    const height = maxSnapHeight !== null ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})` : MAX_HEIGHT;
+    return /* @__PURE__ */ React2.createElement(
+      motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([sheetRef, ref]),
+        className: `react-modal-sheet-container ${className}`,
+        style: {
+          ...styles_default.container,
+          ...style,
+          ...detent === "full-height" && { height },
+          ...detent === "content-height" && { maxHeight: height },
+          y
+        },
+        initial: reduceMotion ? false : { y: windowHeight },
+        animate: { y: initialY, transition: animationOptions },
+        exit: { y: windowHeight, transition: animationOptions },
+        onAnimationComplete: handleAnimationComplete
+      },
+      children
+    );
+  }
+);
+SheetContainer.displayName = "SheetContainer";
+var SheetContainer_default = SheetContainer;
+var SheetContent = forwardRef(
+  ({ children, style, disableDrag, className = "", ...rest }, ref) => {
+    const sheetContext = useSheetContext();
+    const sheetScrollerContext = useSheetScrollerContext();
+    const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
+    const dragProps = disableDrag || sheetScrollerContext.disableDrag ? void 0 : sheetContext.dragProps;
+    return /* @__PURE__ */ React2.createElement(
+      motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([ref, constraintsRef]),
+        className: `react-modal-sheet-content ${className}`,
+        style: { ...styles_default.content, ...style },
+        ...dragProps,
+        dragConstraints: constraintsRef,
+        onMeasureDragConstraints
+      },
+      children
+    );
+  }
+);
+SheetContent.displayName = "SheetContent";
+var SheetContent_default = SheetContent;
+var SheetHeader = forwardRef(
+  ({ children, style, disableDrag, ...rest }, ref) => {
+    const { indicatorRotation, dragProps } = useSheetContext();
+    const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
+    const _dragProps = disableDrag ? void 0 : dragProps;
+    const indicator1Transform = useTransform(
+      indicatorRotation,
+      (r) => `translateX(2px) rotate(${r}deg)`
+    );
+    const indicator2Transform = useTransform(
+      indicatorRotation,
+      (r) => `translateX(-2px) rotate(${-1 * r}deg)`
+    );
+    return /* @__PURE__ */ React2.createElement(
+      motion.div,
+      {
+        ...rest,
+        ref: mergeRefs([ref, constraintsRef]),
+        style: { ...styles_default.headerWrapper, ...style },
+        ..._dragProps,
+        dragConstraints: constraintsRef,
+        onMeasureDragConstraints
+      },
+      children || /* @__PURE__ */ React2.createElement("div", { className: "react-modal-sheet-header", style: styles_default.header }, /* @__PURE__ */ React2.createElement(
+        motion.span,
+        {
+          className: "react-modal-sheet-drag-indicator",
+          style: { ...styles_default.indicator, transform: indicator1Transform }
+        }
+      ), /* @__PURE__ */ React2.createElement(
+        motion.span,
+        {
+          className: "react-modal-sheet-drag-indicator",
+          style: { ...styles_default.indicator, transform: indicator2Transform }
+        }
+      ))
+    );
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetHeader_default = SheetHeader;
+var isClickable = (props) => !!props.onClick || !!props.onTap;
+var SheetBackdrop = forwardRef(
+  ({ style = {}, className = "", ...rest }, ref) => {
+    const Comp = isClickable(rest) ? motion.button : motion.div;
+    const pointerEvents = isClickable(rest) ? "auto" : "none";
+    return /* @__PURE__ */ React2.createElement(
+      Comp,
+      {
+        ...rest,
+        ref,
+        className: `react-modal-sheet-backdrop ${className}`,
+        style: { ...styles_default.backdrop, ...style, pointerEvents },
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 }
+      }
+    );
+  }
+);
+SheetBackdrop.displayName = "SheetBackdrop";
+var SheetBackdrop_default = SheetBackdrop;
+var SheetScroller = forwardRef(
+  ({ draggableAt = "top", children, style, className = "", ...rest }, ref) => {
+    const sheetScrollerContext = useSheetScrollerContext();
+    function determineDragState(element) {
+      const { scrollTop, scrollHeight, clientHeight } = element;
+      const isScrollable = scrollHeight > clientHeight;
+      if (!isScrollable)
+        return;
+      const isAtTop = scrollTop <= 0;
+      const isAtBottom = scrollHeight - scrollTop === clientHeight;
+      const shouldEnable = draggableAt === "top" && isAtTop || draggableAt === "bottom" && isAtBottom || draggableAt === "both" && (isAtTop || isAtBottom);
+      if (shouldEnable) {
+        sheetScrollerContext.setDragEnabled();
+      } else {
+        sheetScrollerContext.setDragDisabled();
+      }
+    }
+    function onScroll(e) {
+      determineDragState(e.currentTarget);
+    }
+    function onTouchStart(e) {
+      determineDragState(e.currentTarget);
+    }
+    const scrollProps = isTouchDevice() ? { onScroll, onTouchStart } : void 0;
+    return /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: `react-modal-sheet-scroller ${className}`,
+        style: { ...styles_default.scroller, ...style },
+        ...scrollProps
+      },
+      children
+    );
+  }
+);
+SheetScroller.displayName = "SheetScroller";
+var SheetScroller_default = SheetScroller;
+
+// src/index.tsx
+var _SheetCompound = sheet_default;
+_SheetCompound.Container = SheetContainer_default;
+_SheetCompound.Header = SheetHeader_default;
+_SheetCompound.Content = SheetContent_default;
+_SheetCompound.Backdrop = SheetBackdrop_default;
+_SheetCompound.Scroller = SheetScroller_default;
+var Sheet2 = _SheetCompound;
+
+export { Sheet2 as Sheet };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map