@tamagui/sheet 1.88.12 → 1.89.0-1706308641099

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/esm/Sheet.mjs

@@ -0,0 +1,91 @@
+import { styled } from "@tamagui/core";
+import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
+import { SHEET_HANDLE_NAME, SHEET_NAME, SHEET_OVERLAY_NAME } from "./constants.mjs";
+import { createSheet } from "./createSheet.mjs";
+import { createSheetScope } from "./SheetContext.mjs";
+export * from "./types.mjs";
+const Handle = styled(XStack, {
+    name: SHEET_HANDLE_NAME,
+    variants: {
+      open: {
+        true: {
+          pointerEvents: "auto"
+        },
+        false: {
+          opacity: 0,
+          pointerEvents: "none"
+        }
+      },
+      unstyled: {
+        false: {
+          height: 10,
+          borderRadius: 100,
+          backgroundColor: "$background",
+          zIndex: 10,
+          marginHorizontal: "35%",
+          marginBottom: "$2",
+          opacity: 0.5,
+          hoverStyle: {
+            opacity: 0.7
+          }
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  }),
+  Overlay = styled(ThemeableStack, {
+    name: SHEET_OVERLAY_NAME,
+    variants: {
+      open: {
+        true: {
+          opacity: 1,
+          pointerEvents: "auto"
+        },
+        false: {
+          opacity: 0,
+          pointerEvents: "none"
+        }
+      },
+      unstyled: {
+        false: {
+          fullscreen: !0,
+          position: "absolute",
+          backgrounded: !0,
+          zIndex: 99999,
+          pointerEvents: "auto"
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  }),
+  Frame = styled(YStack, {
+    name: SHEET_NAME,
+    variants: {
+      unstyled: {
+        false: {
+          flex: 1,
+          backgroundColor: "$background",
+          borderTopLeftRadius: "$true",
+          borderTopRightRadius: "$true",
+          width: "100%",
+          maxHeight: "100%",
+          overflow: "hidden"
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  }),
+  Sheet = createSheet({
+    Frame,
+    Handle,
+    Overlay
+  }),
+  SheetOverlayFrame = Overlay,
+  SheetHandleFrame = Handle;
+export { Frame, Handle, Overlay, Sheet, SheetHandleFrame, SheetOverlayFrame, createSheetScope };

package/dist/esm/SheetContext.mjs

@@ -0,0 +1,5 @@
+import { createContextScope } from "@tamagui/create-context";
+import { SHEET_NAME } from "./constants.mjs";
+const [createSheetContext, createSheetScope] = createContextScope(SHEET_NAME),
+  [SheetProvider, useSheetContext] = createSheetContext(SHEET_NAME, {});
+export { SheetProvider, createSheetContext, createSheetScope, useSheetContext };

package/dist/esm/SheetController.mjs

@@ -0,0 +1,22 @@
+import { useEvent } from "@tamagui/core";
+import { useMemo } from "react";
+import { SheetControllerContext } from "./useSheetController.mjs";
+import { jsx } from "react/jsx-runtime";
+const SheetController = ({
+  children,
+  onOpenChange: onOpenChangeProp,
+  ...value
+}) => {
+  const onOpenChange = useEvent(onOpenChangeProp),
+    memoValue = useMemo(() => ({
+      open: value.open,
+      hidden: value.hidden,
+      disableDrag: value.disableDrag,
+      onOpenChange
+    }), [onOpenChange, value.open, value.hidden, value.disableDrag]);
+  return /* @__PURE__ */jsx(SheetControllerContext.Provider, {
+    value: memoValue,
+    children
+  });
+};
+export { SheetController };

package/dist/esm/SheetImplementationCustom.mjs

@@ -0,0 +1,313 @@
+import { AdaptParentContext } from "@tamagui/adapt";
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { Stack, Theme, getConfig, themeable, useConfiguration, useEvent, useThemeName } from "@tamagui/core";
+import { Portal } from "@tamagui/portal";
+import { useKeyboardVisible } from "@tamagui/use-keyboard-visible";
+import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Dimensions, Keyboard, PanResponder, View } from "react-native-web";
+import { SHEET_HIDDEN_STYLESHEET } from "./constants.mjs";
+import { ParentSheetContext, SheetInsideSheetContext } from "./contexts.mjs";
+import { resisted } from "./helpers.mjs";
+import { SheetProvider } from "./SheetContext.mjs";
+import { useSheetOpenState } from "./useSheetOpenState.mjs";
+import { useSheetProviderProps } from "./useSheetProviderProps.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+let hiddenSize = 10000.1;
+const SheetImplementationCustom = themeable(forwardRef(function (props, forwardedRef) {
+  const parentSheet = useContext(ParentSheetContext),
+    {
+      animation,
+      animationConfig: animationConfigProp,
+      modal = !1,
+      zIndex = parentSheet.zIndex + 1,
+      moveOnKeyboardChange = !1,
+      unmountChildrenWhenHidden = !1,
+      portalProps
+    } = props,
+    keyboardIsVisible = useKeyboardVisible(),
+    state = useSheetOpenState(props),
+    [overlayComponent, setOverlayComponent] = useState(null),
+    providerProps = useSheetProviderProps(props, state, {
+      onOverlayComponent: setOverlayComponent
+    }),
+    {
+      frameSize,
+      setFrameSize,
+      snapPoints,
+      snapPointsMode,
+      hasFit,
+      position,
+      setPosition,
+      scrollBridge,
+      screenSize,
+      setMaxContentSize,
+      maxSnapPoint
+    } = providerProps,
+    {
+      open,
+      controller,
+      isHidden
+    } = state,
+    sheetRef = useRef(null),
+    ref = useComposedRefs(forwardedRef, sheetRef),
+    animationConfig = (() => {
+      const [animationProp, animationPropConfig] = animation ? Array.isArray(animation) ? animation : [animation] : [];
+      return animationConfigProp ?? (animationProp ? {
+        ...getConfig().animations.animations[animationProp],
+        ...animationPropConfig
+      } : null);
+    })(),
+    [isShowingInnerSheet, setIsShowingInnerSheet] = useState(!1),
+    shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet,
+    parentSheetContext = useContext(SheetInsideSheetContext),
+    onInnerSheet = useCallback(hasChild => {
+      setIsShowingInnerSheet(hasChild);
+    }, []),
+    positions = useMemo(() => snapPoints.map(point => getYPositions(snapPointsMode, point, screenSize, frameSize)), [screenSize, frameSize, snapPoints, snapPointsMode]),
+    {
+      animationDriver
+    } = useConfiguration(),
+    {
+      useAnimatedNumber,
+      useAnimatedNumberStyle,
+      useAnimatedNumberReaction
+    } = animationDriver,
+    AnimatedView = animationDriver.View ?? Stack;
+  useIsomorphicLayoutEffect(() => {
+    if (parentSheetContext && open) return parentSheetContext(!0), () => {
+      parentSheetContext(!1);
+    };
+  }, [parentSheetContext, open]);
+  const nextParentContext = useMemo(() => ({
+      zIndex
+    }), [zIndex]),
+    animatedNumber = useAnimatedNumber(hiddenSize),
+    at = useRef(hiddenSize);
+  useAnimatedNumberReaction({
+    value: animatedNumber,
+    hostRef: sheetRef
+  }, useCallback(value => {
+    at.current = value, scrollBridge.paneY = value;
+  }, [animationDriver]));
+  function stopSpring() {
+    animatedNumber.stop(), scrollBridge.onFinishAnimate && (scrollBridge.onFinishAnimate(), scrollBridge.onFinishAnimate = void 0);
+  }
+  const hasntMeasured = at.current === hiddenSize,
+    animateTo = useEvent(position2 => {
+      if (frameSize === 0) return;
+      let toValue = isHidden || position2 === -1 ? screenSize : positions[position2];
+      if (at.current !== toValue) {
+        if (at.current = toValue, stopSpring(), hasntMeasured || isHidden) {
+          if (animatedNumber.setValue(screenSize, {
+            type: "timing",
+            duration: 0
+          }), isHidden) return;
+          toValue = positions[position2], at.current = toValue;
+        }
+        animatedNumber.setValue(toValue, {
+          type: "spring",
+          ...animationConfig
+        });
+      }
+    });
+  useIsomorphicLayoutEffect(() => {
+    screenSize && hasntMeasured && animatedNumber.setValue(screenSize, {
+      type: "timing",
+      duration: 0
+    });
+  }, [hasntMeasured, screenSize]), useIsomorphicLayoutEffect(() => {
+    !frameSize || !screenSize || isHidden || hasntMeasured && !open || animateTo(position);
+  }, [isHidden, frameSize, screenSize, open, position]);
+  const disableDrag = props.disableDrag ?? controller?.disableDrag,
+    themeName = useThemeName(),
+    [isDragging, setIsDragging] = useState(!1),
+    panResponder = useMemo(() => {
+      if (disableDrag || !frameSize || isShowingInnerSheet) return;
+      const minY = positions[0];
+      scrollBridge.paneMinY = minY;
+      let startY = at.current;
+      function setPanning(val) {
+        setIsDragging(val), SHEET_HIDDEN_STYLESHEET && (val ? SHEET_HIDDEN_STYLESHEET.innerText = ":root * { user-select: none !important; -webkit-user-select: none !important; }" : SHEET_HIDDEN_STYLESHEET.innerText = "");
+      }
+      const release = ({
+          vy,
+          dragAt
+        }) => {
+          isExternalDrag = !1, previouslyScrolling = !1, setPanning(!1);
+          const end = dragAt + startY + frameSize * vy * 0.2;
+          let closestPoint = 0,
+            dist = 1 / 0;
+          for (let i = 0; i < positions.length; i++) {
+            const position2 = positions[i],
+              curDist = end > position2 ? end - position2 : position2 - end;
+            curDist < dist && (dist = curDist, closestPoint = i);
+          }
+          setPosition(closestPoint), animateTo(closestPoint);
+        },
+        finish = (_e, state2) => {
+          release({
+            vy: state2.vy,
+            dragAt: state2.dy
+          });
+        };
+      let previouslyScrolling = !1;
+      const onMoveShouldSet = (_e, {
+          dy
+        }) => {
+          const isScrolled = scrollBridge.y !== 0,
+            isDraggingUp = dy < 0,
+            isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY;
+          return isScrolled ? (previouslyScrolling = !0, !1) : isNearTop && !isScrolled && isDraggingUp ? !1 : Math.abs(dy) > 5;
+        },
+        grant = () => {
+          setPanning(!0), stopSpring(), startY = at.current;
+        };
+      let isExternalDrag = !1;
+      return scrollBridge.drag = dy => {
+        isExternalDrag || (isExternalDrag = !0, grant());
+        const to = dy + startY;
+        animatedNumber.setValue(resisted(to, minY), {
+          type: "direct"
+        });
+      }, scrollBridge.release = release, PanResponder.create({
+        onMoveShouldSetPanResponder: onMoveShouldSet,
+        onPanResponderGrant: grant,
+        onPanResponderMove: (_e, {
+          dy
+        }) => {
+          const toFull = dy + startY,
+            to = resisted(toFull, minY);
+          animatedNumber.setValue(to, {
+            type: "direct"
+          });
+        },
+        onPanResponderEnd: finish,
+        onPanResponderTerminate: finish,
+        onPanResponderRelease: finish
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]),
+    handleAnimationViewLayout = useCallback(e => {
+      const next = Math.min(e.nativeEvent?.layout.height, Dimensions.get("window").height);
+      next && setFrameSize(next);
+    }, [keyboardIsVisible]),
+    handleMaxContentViewLayout = useCallback(e => {
+      const next = Math.min(e.nativeEvent?.layout.height, Dimensions.get("window").height);
+      next && setMaxContentSize(next);
+    }, [keyboardIsVisible]),
+    animatedStyle = useAnimatedNumberStyle(animatedNumber, val => {
+      "worklet";
+
+      return {
+        transform: [{
+          translateY: frameSize === 0 ? hiddenSize : val
+        }]
+      };
+    }),
+    sizeBeforeKeyboard = useRef(null);
+  useEffect(() => {
+    if (isWeb || !moveOnKeyboardChange) return;
+    const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", e => {
+        sizeBeforeKeyboard.current === null && (sizeBeforeKeyboard.current = animatedNumber.getValue(), animatedNumber.setValue(Math.max(animatedNumber.getValue() - e.endCoordinates.height, 0)));
+      }),
+      keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
+        sizeBeforeKeyboard.current !== null && (animatedNumber.setValue(sizeBeforeKeyboard.current), sizeBeforeKeyboard.current = null);
+      });
+    return () => {
+      keyboardDidHideListener.remove(), keyboardDidShowListener.remove();
+    };
+  }, [moveOnKeyboardChange]);
+  const [opacity, setOpacity] = useState(open ? 1 : 0);
+  open && opacity === 0 && setOpacity(1), useEffect(() => {
+    if (!open) {
+      const tm = setTimeout(() => {
+        setOpacity(0);
+      }, 400);
+      return () => {
+        clearTimeout(tm);
+      };
+    }
+  }, [open]);
+  const forcedContentHeight = hasFit ? void 0 : snapPointsMode === "percent" ? `${maxSnapPoint}%` : maxSnapPoint,
+    contents = /* @__PURE__ */jsx(ParentSheetContext.Provider, {
+      value: nextParentContext,
+      children: /* @__PURE__ */jsxs(SheetProvider, {
+        ...providerProps,
+        children: [/* @__PURE__ */jsx(AnimatePresence, {
+          enterExitVariant: "open",
+          children: shouldHideParentSheet || !open ? null : overlayComponent
+        }), snapPointsMode !== "percent" && /* @__PURE__ */jsx(View, {
+          style: {
+            opacity: 0,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            pointerEvents: "none"
+          },
+          pointerEvents: "none",
+          onLayout: handleMaxContentViewLayout
+        }), /* @__PURE__ */jsx(AnimatedView, {
+          ref,
+          ...panResponder?.panHandlers,
+          onLayout: handleAnimationViewLayout,
+          pointerEvents: open && !shouldHideParentSheet ? "auto" : "none",
+          ...(!isDragging && {
+            // @ts-ignore for CSS driver this is necessary to attach the transition
+            animation
+          }),
+          style: [{
+            position: "absolute",
+            zIndex,
+            width: "100%",
+            height: forcedContentHeight,
+            minHeight: forcedContentHeight,
+            opacity
+          }, animatedStyle],
+          children: props.children
+        })]
+      })
+    }),
+    adaptContext = useContext(AdaptParentContext),
+    shouldMountChildren = !!(opacity || !unmountChildrenWhenHidden);
+  if (modal) {
+    const modalContents = /* @__PURE__ */jsx(Portal, {
+      zIndex,
+      ...portalProps,
+      children: shouldMountChildren && /* @__PURE__ */jsx(Theme, {
+        forceClassName: !0,
+        name: themeName,
+        children: /* @__PURE__ */jsx(AdaptParentContext.Provider, {
+          value: adaptContext,
+          children: contents
+        })
+      })
+    });
+    return isWeb ? modalContents : /* @__PURE__ */jsx(SheetInsideSheetContext.Provider, {
+      value: onInnerSheet,
+      children: modalContents
+    });
+  }
+  return contents;
+}));
+function getYPositions(mode, point, screenSize, frameSize) {
+  if (!screenSize || !frameSize) return 0;
+  if (mode === "mixed") {
+    if (typeof point == "number") return screenSize - Math.min(screenSize, Math.max(0, point));
+    if (point === "fit") return screenSize - Math.min(screenSize, frameSize);
+    if (point.endsWith("%")) {
+      const pct2 = Math.min(100, Math.max(0, Number(point.slice(0, -1)))) / 100;
+      return Number.isNaN(pct2) ? (console.warn("Invalid snapPoint percentage string"), 0) : Math.round(screenSize - pct2 * screenSize);
+    }
+    return console.warn("Invalid snapPoint unknown value"), 0;
+  }
+  if (mode === "fit") return point === 0 ? screenSize : screenSize - Math.min(screenSize, frameSize);
+  if (mode === "constant" && typeof point == "number") return screenSize - Math.min(screenSize, Math.max(0, point));
+  const pct = Math.min(100, Math.max(0, Number(point))) / 100;
+  return Number.isNaN(pct) ? (console.warn("Invalid snapPoint percentage"), 0) : Math.round(screenSize - pct * screenSize);
+}
+export { SheetImplementationCustom };

package/dist/esm/SheetScrollView.mjs

@@ -0,0 +1,57 @@
+import { composeRefs } from "@tamagui/compose-refs";
+import { ScrollView } from "@tamagui/scroll-view";
+import { forwardRef, useMemo, useRef } from "react";
+import { useSheetContext } from "./SheetContext.mjs";
+import { jsx } from "react/jsx-runtime";
+const SHEET_SCROLL_VIEW_NAME = "SheetScrollView",
+  SheetScrollView = forwardRef(({
+    __scopeSheet,
+    children,
+    onScroll,
+    ...props
+  }, ref) => {
+    const context = useSheetContext(SHEET_SCROLL_VIEW_NAME, __scopeSheet),
+      {
+        scrollBridge
+      } = context,
+      scrollRef = useRef(null),
+      state = useRef({
+        lastPageY: 0,
+        dragAt: 0,
+        dys: [],
+        // store a few recent dys to get velocity on release
+        isScrolling: !1,
+        isDragging: !1
+      }),
+      release = () => {
+        if (!state.current.isDragging) return;
+        state.current.isDragging = !1, scrollBridge.scrollStartY = -1, state.current.isScrolling = !1;
+        let vy = 0;
+        if (state.current.dys.length) {
+          const recentDys = state.current.dys.slice(-10);
+          vy = (recentDys.length ? recentDys.reduce((a, b) => a + b, 0) : 0) / recentDys.length * 0.04;
+        }
+        state.current.dys = [], scrollBridge.release({
+          dragAt: state.current.dragAt,
+          vy
+        });
+      };
+    return /* @__PURE__ */jsx(ScrollView, {
+      ref: composeRefs(scrollRef, ref),
+      flex: 1,
+      scrollEventThrottle: 8,
+      onScroll: e => {
+        const {
+          y
+        } = e.nativeEvent.contentOffset;
+        scrollBridge.y = y, y > 0 && (scrollBridge.scrollStartY = -1), onScroll?.(e);
+      },
+      onStartShouldSetResponder: () => (scrollBridge.scrollStartY = -1, state.current.isDragging = !0, !0),
+      onMoveShouldSetResponder: () => !1,
+      onResponderRelease: release,
+      className: "_ovs-contain",
+      ...props,
+      children: useMemo(() => children, [children])
+    });
+  });
+export { SheetScrollView };

package/dist/esm/constants.mjs

@@ -0,0 +1,8 @@
+import { isClient } from "@tamagui/core";
+const constants = {},
+  SHEET_NAME = "Sheet",
+  SHEET_HANDLE_NAME = "SheetHandle",
+  SHEET_OVERLAY_NAME = "SheetOverlay",
+  SHEET_HIDDEN_STYLESHEET = isClient ? document.createElement("style") : null;
+SHEET_HIDDEN_STYLESHEET && document.head.appendChild(SHEET_HIDDEN_STYLESHEET);
+export { SHEET_HANDLE_NAME, SHEET_HIDDEN_STYLESHEET, SHEET_NAME, SHEET_OVERLAY_NAME, constants };

package/dist/esm/contexts.mjs

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const ParentSheetContext = createContext({
+    zIndex: 1e5
+  }),
+  SheetInsideSheetContext = createContext(null);
+export { ParentSheetContext, SheetInsideSheetContext };

package/dist/esm/createSheet.mjs

@@ -0,0 +1,138 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { Stack } from "@tamagui/core";
+import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
+import { RemoveScroll } from "@tamagui/remove-scroll";
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
+import { forwardRef, memo, useMemo } from "react";
+import { Platform } from "react-native-web";
+import { SHEET_HANDLE_NAME, SHEET_NAME, SHEET_OVERLAY_NAME } from "./constants.mjs";
+import { useSheetContext } from "./SheetContext.mjs";
+import { SheetImplementationCustom } from "./SheetImplementationCustom.mjs";
+import { SheetScrollView } from "./SheetScrollView.mjs";
+import { useSheetController } from "./useSheetController.mjs";
+import { useSheetOffscreenSize } from "./useSheetOffscreenSize.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function createSheet({
+  Handle,
+  Frame,
+  Overlay
+}) {
+  const SheetHandle = Handle.extractable(({
+      __scopeSheet,
+      ...props
+    }) => {
+      const context = useSheetContext(SHEET_HANDLE_NAME, __scopeSheet);
+      return context.onlyShowFrame ? null :
+      // @ts-ignore
+      /* @__PURE__ */
+      jsx(Handle, {
+        onPress: () => {
+          const max = context.snapPoints.length + (context.dismissOnSnapToBottom ? -1 : 0),
+            nextPos = (context.position + 1) % max;
+          context.setPosition(nextPos);
+        },
+        open: context.open,
+        ...props
+      });
+    }),
+    SheetOverlay = Overlay.extractable(memo(propsIn => {
+      const {
+          __scopeSheet,
+          ...props
+        } = propsIn,
+        context = useSheetContext(SHEET_OVERLAY_NAME, __scopeSheet),
+        element = useMemo(() =>
+        // @ts-ignore
+        /* @__PURE__ */
+        jsx(Overlay, {
+          ...props,
+          onPress: composeEventHandlers(props.onPress, context.dismissOnOverlayPress ? () => {
+            context.setOpen(!1);
+          } : void 0)
+        }), [props.onPress, context.dismissOnOverlayPress]);
+      return useIsomorphicLayoutEffect(() => {
+        context.onOverlayComponent?.(element);
+      }, [element]), context.onlyShowFrame, null;
+    })),
+    SheetFrame = Frame.extractable(forwardRef(({
+      __scopeSheet,
+      adjustPaddingForOffscreenContent,
+      disableHideBottomOverflow,
+      children,
+      ...props
+    }, forwardedRef) => {
+      const context = useSheetContext(SHEET_NAME, __scopeSheet),
+        {
+          hasFit,
+          removeScrollEnabled,
+          frameSize,
+          contentRef
+        } = context,
+        composedContentRef = useComposedRefs(forwardedRef, contentRef),
+        offscreenSize = useSheetOffscreenSize(context),
+        sheetContents = useMemo(() =>
+        // @ts-ignore
+        /* @__PURE__ */
+        jsxs(Frame, {
+          ref: composedContentRef,
+          flex: hasFit ? 0 : 1,
+          height: hasFit ? void 0 : frameSize,
+          ...props,
+          children: [children, adjustPaddingForOffscreenContent && /* @__PURE__ */jsx(Stack, {
+            "data-sheet-offscreen-pad": !0,
+            height: offscreenSize,
+            width: "100%"
+          })]
+        }), [props, frameSize, offscreenSize, adjustPaddingForOffscreenContent, hasFit]);
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(RemoveScroll, {
+          forwardProps: !0,
+          enabled: removeScrollEnabled,
+          allowPinchZoom: !0,
+          shards: [contentRef],
+          removeScrollBar: !1,
+          children: sheetContents
+        }), !disableHideBottomOverflow &&
+        // @ts-ignore
+        /* @__PURE__ */
+        jsx(Frame, {
+          ...props,
+          componentName: "SheetCover",
+          children: null,
+          position: "absolute",
+          bottom: "-50%",
+          zIndex: -1,
+          height: context.frameSize,
+          left: 0,
+          right: 0,
+          borderWidth: 0,
+          borderRadius: 0,
+          shadowOpacity: 0
+        })]
+      });
+    })),
+    Sheet = forwardRef(function (props, ref) {
+      const hydrated = useDidFinishSSR(),
+        {
+          isShowingNonSheet
+        } = useSheetController();
+      let SheetImplementation = SheetImplementationCustom;
+      return props.native && Platform.OS, isShowingNonSheet || !hydrated ? null : /* @__PURE__ */jsx(SheetImplementation, {
+        ref,
+        ...props
+      });
+    }),
+    components = {
+      Frame: SheetFrame,
+      Overlay: SheetOverlay,
+      Handle: SheetHandle,
+      ScrollView: SheetScrollView
+    },
+    Controlled = withStaticProperties(Sheet, components);
+  return withStaticProperties(Sheet, {
+    ...components,
+    Controlled
+  });
+}
+export { createSheet };

package/dist/esm/helpers.mjs

@@ -0,0 +1,9 @@
+function resisted(y, minY, maxOverflow = 25) {
+  if (y < minY) {
+    const past = minY - y,
+      extra = -(1.1 - 0.1 ** (Math.min(maxOverflow, past) / maxOverflow)) * maxOverflow;
+    return minY + extra;
+  }
+  return y;
+}
+export { resisted };

package/dist/esm/index.mjs

@@ -0,0 +1,7 @@
+export * from "./Sheet.mjs";
+export * from "./useSheet.mjs";
+export * from "./createSheet.mjs";
+export * from "./SheetController.mjs";
+export * from "./useSheetController.mjs";
+import { setupNativeSheet } from "./nativeSheet.mjs";
+export { setupNativeSheet };