react-native-system-ui 0.0.4 → 0.0.6

package/dist/cjs/components/loading/tokens.js

@@ -7,7 +7,6 @@ exports.useLoadingTokens = exports.createLoadingTokens = void 0;
 var _designSystem = require("../../design-system");
 const createLoadingTokens = foundations => ({
   defaults: {
-    type: 'circular',
     size: 30,
     textSize: foundations.fontSize.sm,
     vertical: false
@@ -16,15 +15,6 @@ const createLoadingTokens = foundations => ({
     container: {
       alignItems: 'center'
     },
-    spinnerItem: {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      alignItems: 'center',
-      justifyContent: 'flex-start'
-    },
     text: {
       includeFontPadding: false,
       textAlignVertical: 'center'
@@ -34,20 +24,6 @@ const createLoadingTokens = foundations => ({
     indicator: foundations.palette.default[400],
     text: foundations.palette.default[500]
   },
-  sizing: {
-    spinner: {
-      lineWidth: 2,
-      lineLength: 8,
-      itemCount: 12,
-      innerGapRatio: 0.25
-    },
-    ball: {
-      itemCount: 3,
-      dotSizeRatio: 0.2,
-      dotScaleMin: 0.4,
-      gapRatio: 0.25
-    }
-  },
   spacing: {
     gap: foundations.spacing.sm
   }

package/dist/cjs/components/notice-bar/NoticeBar.js

@@ -83,15 +83,15 @@ const NoticeBar = props => {
   const resolvedSpeed = (0, _number.parseNumber)(speed, 60);
   const resolvedVerticalInterval = Math.max(0, (0, _number.parseNumber)(verticalInterval, 3000));
   const resolvedVerticalDuration = Math.max(0, (0, _number.parseNumber)(verticalDuration, 300));
-  const verticalItems = (() => {
+  const verticalItems = (0, _react().useMemo)(() => {
     if (!isVertical) return [];
     if (items && items.length) return items;
     const childArray = _react().default.Children.toArray(children);
     if (childArray.length) return childArray;
     return text !== undefined ? [text] : [];
-  })();
+  }, [children, isVertical, items, text]);
   const hasVerticalLoop = isVertical && verticalItems.length > 1;
-  const verticalTrackItems = hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems;
+  const verticalTrackItems = (0, _react().useMemo)(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
   const verticalTranslateY = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
   const [itemHeight, setItemHeight] = (0, _react().useState)(0);
   const setContentWidthSafe = (0, _react().useCallback)(next => {
@@ -119,7 +119,7 @@ const NoticeBar = props => {
       accessibilityRole: 'button'
     } : undefined
   });
-  const rightNode = mode === 'closeable' ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+  const rightNode = (0, _react().useMemo)(() => mode === 'closeable' ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     hitSlop: 8
   }, closePress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
     size: 16,
@@ -129,7 +129,7 @@ const NoticeBar = props => {
     size: 16,
     fill: resolvedColor,
     color: resolvedColor
-  }) : rightIcon || null;
+  }) : rightIcon || null, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
   const hasLeft = (0, _validate.isRenderable)(leftIcon);
   const hasRight = Boolean(rightNode);
   const effectiveContainerWidth = Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0));
@@ -210,44 +210,48 @@ const NoticeBar = props => {
     if (!height) return;
     setItemHeight(prev => prev === 0 || Math.abs(prev - height) >= 0.5 ? height : prev);
   }, []);
-  const verticalContentNode = !isVertical || verticalTrackItems.length === 0 ? null : !hasVerticalLoop ? (() => {
-    const single = verticalTrackItems[0];
-    if ((0, _validate.isText)(single)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
-        onLayout: textOnLayout,
-        style: [styles.text, {
-          color: resolvedColor,
-          fontSize: tokens.typography.fontSize
-        }],
-        numberOfLines: 1,
-        ellipsizeMode: "tail"
-      }, restTextProps), single);
+  const verticalContentNode = (0, _react().useMemo)(() => {
+    if (!isVertical || verticalTrackItems.length === 0) return null;
+    if (!hasVerticalLoop) {
+      const single = verticalTrackItems[0];
+      if ((0, _validate.isText)(single)) {
+        return /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
+          onLayout: textOnLayout,
+          style: [styles.text, {
+            color: resolvedColor,
+            fontSize: tokens.typography.fontSize
+          }],
+          numberOfLines: 1,
+          ellipsizeMode: "tail"
+        }, restTextProps), single);
+      }
+      return single;
     }
-    return single;
-  })() : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.verticalViewport, itemHeight ? {
-      height: itemHeight
-    } : undefined],
-    pointerEvents: "none"
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [styles.verticalTrack, {
-      transform: [{
-        translateY: verticalTranslateY
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [styles.verticalViewport, itemHeight ? {
+        height: itemHeight
+      } : undefined],
+      pointerEvents: "none"
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+      style: [styles.verticalTrack, {
+        transform: [{
+          translateY: verticalTranslateY
+        }]
       }]
-    }]
-  }, verticalTrackItems.map((item, index) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    key: index,
-    onLayout: index === 0 ? handleItemLayout : undefined,
-    style: styles.verticalItem
-  }, (0, _validate.isText)(item) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
-    onLayout: textOnLayout,
-    style: [styles.text, {
-      color: resolvedColor,
-      fontSize: tokens.typography.fontSize
-    }],
-    numberOfLines: 1,
-    ellipsizeMode: "tail"
-  }, restTextProps), item) : item))));
+    }, verticalTrackItems.map((item, index) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: index,
+      onLayout: index === 0 ? handleItemLayout : undefined,
+      style: styles.verticalItem
+    }, (0, _validate.isText)(item) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
+      onLayout: textOnLayout,
+      style: [styles.text, {
+        color: resolvedColor,
+        fontSize: tokens.typography.fontSize
+      }],
+      numberOfLines: 1,
+      ellipsizeMode: "tail"
+    }, restTextProps), item) : item))));
+  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
   const handleContainerLayout = (0, _react().useCallback)(event => {
     setContainerWidthSafe(event.nativeEvent.layout.width);
   }, [setContainerWidthSafe]);

package/dist/cjs/components/notify/Notify.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Notify = void 0;
+exports.default = exports.NotifyContent = exports.Notify = void 0;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -20,14 +20,13 @@ function _reactNative() {
 }
 var _utils = require("../../utils");
 var _hooks = require("../../hooks");
-var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
-var _overlay = require("../overlay");
+var _platform = require("../../platform");
 var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const Notify = props => {
+const NotifyContent = props => {
   const {
     visible,
     message,
@@ -51,44 +50,41 @@ const Notify = props => {
   const tokens = (0, _tokens.useNotifyTokens)(tokensOverride);
   const paddingVertical = tokens.spacing.paddingVertical;
   const safeAreaPadding = (0, _hooks.useSafeAreaPadding)({
-    top: paddingVertical,
-    bottom: paddingVertical
+    top: 0,
+    bottom: 0
   });
   const type = typeProp ?? tokens.defaults.type;
   const position = positionProp ?? tokens.defaults.position;
   const closeOnClick = closeOnClickProp ?? tokens.defaults.closeOnClick;
   const safeAreaInsetTop = props.safeAreaInsetTop ?? (position === 'top' ? tokens.defaults.safeAreaInsetTop : false);
   const safeAreaInsetBottom = props.safeAreaInsetBottom ?? (position === 'bottom' ? tokens.defaults.safeAreaInsetBottom : false);
-  const safeTop = safeAreaInsetTop && position === 'top' ? safeAreaPadding.paddingTop : paddingVertical;
-  const safeBottom = safeAreaInsetBottom && position === 'bottom' ? safeAreaPadding.paddingBottom : paddingVertical;
+  const safeTop = safeAreaInsetTop && position === 'top' ? safeAreaPadding.paddingTop : 0;
+  const safeBottom = safeAreaInsetBottom && position === 'bottom' ? safeAreaPadding.paddingBottom : 0;
   const offset = typeof offsetProp === 'number' && Number.isFinite(offsetProp) ? Math.max(0, offsetProp) : 0;
-  const safeBottomInset = safeAreaInsetBottom && position === 'bottom' && typeof safeBottom === 'number' ? Math.max(0, safeBottom - paddingVertical) + offset : offset;
-  const webTopPadding = _reactNative().Platform.OS === 'web' && position === 'top' ? typeof safeTop === 'string' ? `calc(${safeTop} + ${offset}px)` : safeTop + offset : undefined;
-  const webBottomPadding = _reactNative().Platform.OS === 'web' && safeAreaInsetBottom && position === 'bottom' ? typeof safeBottom === 'string' ? `calc(${safeBottom} + ${offset}px)` : safeBottom + offset : undefined;
+  const addOffset = (value, delta) => typeof value === 'string' ? `calc(${value} + ${delta}px)` : value + delta;
+  const safeBottomInset = safeAreaInsetBottom && position === 'bottom' && typeof safeBottom === 'number' ? safeBottom + offset : offset;
+  const webTopPadding = _reactNative().Platform.OS === 'web' && position === 'top' ? addOffset(safeTop, offset) : undefined;
+  const webBottomPadding = _reactNative().Platform.OS === 'web' && safeAreaInsetBottom && position === 'bottom' ? addOffset(safeBottom, offset) : undefined;
   const variant = tokens.colors.variants[type];
   const resolvedBackground = background ?? variant.background;
   const resolvedTextColor = color ?? variant.text;
   const resolvedDuration = durationProp ?? tokens.defaults.duration;
   const [barHeight, setBarHeight] = _react().default.useState(0);
-  const handleLayout = event => {
+  const handleLayout = (0, _react().useCallback)(event => {
     const height = event.nativeEvent.layout.height;
     if (!height) return;
     setBarHeight(prev => prev === height ? prev : height);
-  };
+  }, []);
 
   // 关键：静态调用时 Notify 初次挂载的 visible=true，需要执行进入动画
   const canAnimate = barHeight > 0;
-  const {
-    mounted,
-    animated
-  } = (0, _usePresenceAnimation.usePresenceAnimation)(visible, {
-    duration: tokens.defaults.animationDuration,
-    appear: true,
-    canAnimate
-  });
+  const [mounted, setMounted] = _react().default.useState(visible);
+  const animated = _react().default.useRef(new (_reactNative().Animated.Value)(0)).current;
+  const animationRef = _react().default.useRef(null);
+  const animationIdRef = _react().default.useRef(0);
   const {
     zIndex: stackZIndex
-  } = (0, _overlay.useOverlayStack)({
+  } = (0, _hooks.useOverlayStack)({
     visible: mounted,
     type: 'notify',
     zIndex
@@ -96,6 +92,49 @@ const Notify = props => {
   const resolvedZIndex = stackZIndex ?? zIndex;
   const prevVisibleRef = _react().default.useRef(visible);
   const closingRef = _react().default.useRef(false);
+  _react().default.useEffect(() => {
+    animationIdRef.current += 1;
+    const animationId = animationIdRef.current;
+    animationRef.current?.stop();
+    const durationValue = tokens.defaults.animationDuration;
+    if (visible) {
+      setMounted(true);
+      if (!canAnimate) {
+        animated.setValue(0);
+        return;
+      }
+      animationRef.current = _reactNative().Animated.timing(animated, {
+        toValue: 1,
+        duration: durationValue,
+        easing: _reactNative().Easing.out(_reactNative().Easing.cubic),
+        useNativeDriver: _platform.nativeDriverEnabled,
+        isInteraction: false
+      });
+      animationRef.current.start();
+    } else {
+      if (!canAnimate) {
+        animated.setValue(0);
+        setMounted(false);
+        return;
+      }
+      animationRef.current = _reactNative().Animated.timing(animated, {
+        toValue: 0,
+        duration: durationValue,
+        easing: _reactNative().Easing.out(_reactNative().Easing.cubic),
+        useNativeDriver: _platform.nativeDriverEnabled,
+        isInteraction: false
+      });
+      animationRef.current.start(({
+        finished
+      }) => {
+        if (!finished || animationId !== animationIdRef.current) return;
+        setMounted(false);
+      });
+    }
+  }, [animated, canAnimate, tokens.defaults.animationDuration, visible]);
+  _react().default.useEffect(() => () => {
+    animationRef.current?.stop();
+  }, []);
   _react().default.useEffect(() => {
     let openedTimer = null;
     if (visible) {
@@ -131,10 +170,10 @@ const Notify = props => {
   }, [onClose, resolvedDuration, visible]);
   const contentHeight = barHeight > 0 ? barHeight : tokens.sizing.minHeight;
   const interactive = closeOnClick || (0, _utils.isFunction)(onClick);
-  const handlePress = () => {
+  const handlePress = (0, _react().useCallback)(() => {
     onClick?.();
     if (closeOnClick) onClose?.();
-  };
+  }, [closeOnClick, onClick, onClose]);
   const accessibilityRole = interactive ? 'button' : 'alert';
   const press = (0, _hooks.useAriaPress)({
     disabled: !interactive,
@@ -152,10 +191,9 @@ const Notify = props => {
     outputRange: [-contentHeight, 0]
   }), [animated, contentHeight, position]);
   const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
-  if (!mounted) return null;
-  const bar = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const bar = (0, _react().useMemo)(() => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.container, position === 'top' ? {
-      paddingTop: webTopPadding ?? (typeof safeTop === 'number' ? safeTop + offset : safeTop)
+      paddingTop: webTopPadding ?? addOffset(safeTop, offset)
     } : null, webBottomPadding !== undefined ? {
       paddingBottom: webBottomPadding
     } : null]
@@ -195,8 +233,9 @@ const Notify = props => {
     style: {
       height: safeBottomInset
     }
-  }) : null);
-  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }) : null), [accessibilityRole, animated, contentHeight, handleLayout, hasMessage, interactive, message, offset, paddingVertical, position, resolvedBackground, resolvedTextColor, safeBottomInset, safeTop, style, textStyle, tokens.layout.container, tokens.layout.content, tokens.layout.text, tokens.sizing.minHeight, tokens.spacing.paddingHorizontal, tokens.typography.fontSize, tokens.typography.lineHeight, translateY, webBottomPadding, webTopPadding]);
+  if (!mounted) return null;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     testID: "rv-notify",
     pointerEvents: interactive ? 'box-none' : 'none',
     style: [tokens.layout.portal, position === 'bottom' ? {
@@ -208,8 +247,11 @@ const Notify = props => {
     } : null]
   }, interactive ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, press.interactionProps, {
     disabled: !interactive
-  }), bar) : bar));
+  }), bar) : bar);
 };
+exports.NotifyContent = NotifyContent;
+const Notify = props => /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(NotifyContent, props));
 exports.Notify = Notify;
+NotifyContent.displayName = 'NotifyContent';
 Notify.displayName = 'Notify';
 var _default = exports.default = Notify;

package/dist/cjs/components/notify/imperative.js

@@ -13,7 +13,7 @@ function _react() {
 }
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
 var _utils = require("../../utils");
-var _Notify = _interopRequireDefault(require("./Notify"));
+var _Notify = require("./Notify");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -89,7 +89,7 @@ const NotifyPortal = ({
     options.onClosed?.();
     removeNotify(id);
   };
-  return /*#__PURE__*/_react().default.createElement(_Notify.default, _extends({}, options, {
+  return /*#__PURE__*/_react().default.createElement(_Notify.NotifyContent, _extends({}, options, {
     visible: visible,
     onClose: handleClose,
     onClosed: handleClosed

package/dist/cjs/components/notify/tokens.js

@@ -5,6 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useNotifyTokens = exports.createNotifyTokens = void 0;
 var _designSystem = require("../../design-system");
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
 const createNotifyTokens = foundations => ({
   defaults: {
     type: 'primary',
@@ -19,7 +26,10 @@ const createNotifyTokens = foundations => ({
     portal: {
       position: 'absolute',
       left: 0,
-      right: 0
+      right: 0,
+      ...(_reactNative().Platform.OS === 'web' ? {
+        position: 'fixed'
+      } : {})
     },
     container: {
       width: '100%'

package/dist/cjs/components/number-keyboard/NumberKeyboard.js

@@ -129,7 +129,7 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
       keyboardRegistry.delete(closeSelf);
     };
   }, [visible, closeSelf]);
-  const keys = (() => {
+  const keys = (0, _react().useMemo)(() => {
     const shouldShuffle = randomKeyOrder && visible;
     const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
     const main = numbers.map(text => ({
@@ -180,7 +180,7 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
       text: showDeleteKey ? undefined : ''
     });
     return main;
-  })();
+  }, [extraKey, isCustomTheme, randomKeyOrder, showDeleteKey, visible]);
   const handleInput = (0, _react().useCallback)((text, type) => {
     if (type === 'delete') {
       const currentValue = valueRef.current;
@@ -200,13 +200,13 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
     onInput?.(text);
     setMergedValue(`${currentValue}${text}`);
   }, [closeSelf, onDelete, onInput, setMergedValue]);
-  const wrapperShadow = (0, _createPlatformShadow.createPlatformShadow)({
+  const wrapperShadow = (0, _react().useMemo)(() => (0, _createPlatformShadow.createPlatformShadow)({
     color: shadow.color,
     opacity: shadow.opacity,
     radius: shadow.radius,
     offsetY: shadow.offsetY,
     elevation: shadow.elevation
-  });
+  }), [shadow.color, shadow.elevation, shadow.offsetY, shadow.opacity, shadow.radius]);
   const keyGap = spacing.keyGap;
   const renderKey = (0, _react().useCallback)((key, index, isClose = false, fullWidth = false, customHeight) => {
     const isPlaceholder = key.type === '' && !key.text;
@@ -313,7 +313,7 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
   }, []);
   const hasHeader = !isCustomTheme && (title || closeButtonText);
   const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
-  const memo = (() => {
+  const memo = (0, _react().useMemo)(() => {
     const headerPaddingStyle = {
       paddingHorizontal: spacing.titlePadding
     };
@@ -421,7 +421,7 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
       bodyNode,
       safeAreaNode
     };
-  })();
+  }, [closeSelf, colors.title, doubleKeyHeight, extraKeyRender, hasHeader, isCustomTheme, keyGap, keys, renderKey, resolvedCloseText, safeAreaInsetBottom, sizing.titleFontSize, spacing.paddingHorizontal, spacing.titlePadding, title]);
   if (!shouldRender && !visible) {
     return null;
   }

package/dist/cjs/components/overlay/Overlay.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Overlay = void 0;
+exports.default = exports.Overlay = exports.ExitAnimationContext = void 0;
 function _react() {
-  const data = _interopRequireWildcard(require("react"));
+  const data = _interopRequireDefault(require("react"));
   _react = function () {
     return data;
   };
@@ -18,86 +18,79 @@ function _reactNative() {
   };
   return data;
 }
-var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
-var _number = require("../../utils/number");
-var _Portal = _interopRequireDefault(require("../portal/Portal"));
-var _useOverlayStack = require("./useOverlayStack");
-var _tokens = require("./tokens");
+function _overlays() {
+  const data = require("@react-native-aria/overlays");
+  _overlays = function () {
+    return data;
+  };
+  return data;
+}
+function _interactions() {
+  const data = require("@react-native-aria/interactions");
+  _interactions = function () {
+    return data;
+  };
+  return data;
+}
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const AnimatedPressable = _reactNative().Animated.createAnimatedComponent(_reactNative().Pressable);
-const Overlay = props => {
+const ExitAnimationContext = exports.ExitAnimationContext = /*#__PURE__*/_react().default.createContext({
+  exited: true,
+  setExited: _exited => {}
+});
+const Overlay = exports.Overlay = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
-    color,
-    tokensOverride,
-    onPress,
-    onClick,
-    style,
-    zIndex,
     children,
-    visible: visibleProp,
-    duration: durationProp,
-    lockScroll: lockScrollProp,
-    closeOnBackPress: closeOnBackPressProp,
-    testID: testIDProp,
-    accessibilityLabel: accessibilityLabelProp
+    isOpen,
+    visible,
+    useRNModal = false,
+    useRNModalOnAndroid = false,
+    isKeyboardDismissable = true,
+    animationPreset = 'fade',
+    onRequestClose,
+    style
   } = props;
-  const hasAction = !!onPress || !!onClick;
-  const tokens = (0, _tokens.useOverlayTokens)(tokensOverride);
-  const visible = visibleProp ?? tokens.defaults.visible;
-  const lockScroll = lockScrollProp ?? tokens.defaults.lockScroll;
-  const closeOnBackPress = closeOnBackPressProp ?? tokens.defaults.closeOnBackPress;
-  const testID = testIDProp ?? tokens.defaults.testID;
-  const accessibilityLabel = accessibilityLabelProp ?? tokens.defaults.accessibilityLabel;
-  const duration = durationProp ?? tokens.defaults.duration;
-  const resolvedDuration = Math.max(0, (0, _number.parseNumberLike)(duration, tokens.defaults.duration) ?? tokens.defaults.duration);
-  const {
-    mounted,
-    animated
-  } = (0, _usePresenceAnimation.usePresenceAnimation)(visible, {
-    duration: resolvedDuration
+  const resolvedOpen = isOpen ?? visible ?? false;
+  const [exited, setExited] = _react().default.useState(!resolvedOpen);
+  (0, _interactions().useKeyboardDismissable)({
+    enabled: _reactNative().Platform.OS !== 'web' && resolvedOpen && isKeyboardDismissable,
+    callback: onRequestClose ?? (() => {})
   });
-  const handlePress = (0, _react().useCallback)(() => {
-    if (onPress) {
-      onPress();
-      return;
+  let styleObj = {};
+  if (_reactNative().Platform.OS === 'web') {
+    styleObj.zIndex = 9999;
+  }
+  if (animationPreset === 'slide') {
+    styleObj.overflow = 'hidden';
+    styleObj.display = 'flex';
+  } else {
+    styleObj.display = exited && !resolvedOpen ? 'none' : 'flex';
+  }
+  if (!resolvedOpen && exited) {
+    return null;
+  }
+  if (useRNModal || useRNModalOnAndroid && _reactNative().Platform.OS === 'android') {
+    return /*#__PURE__*/_react().default.createElement(ExitAnimationContext.Provider, {
+      value: {
+        exited,
+        setExited
+      }
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Modal, {
+      statusBarTranslucent: true,
+      transparent: true,
+      visible: resolvedOpen,
+      onRequestClose: onRequestClose,
+      animationType: animationPreset,
+      ref: ref
+    }, children));
+  }
+  return /*#__PURE__*/_react().default.createElement(_overlays().OverlayContainer, {
+    style: [style, styleObj]
+  }, /*#__PURE__*/_react().default.createElement(ExitAnimationContext.Provider, {
+    value: {
+      exited,
+      setExited
     }
-    onClick?.();
-  }, [onClick, onPress]);
-  const {
-    zIndex: stackZIndex
-  } = (0, _useOverlayStack.useOverlayStack)({
-    visible: mounted,
-    onClose: hasAction ? handlePress : undefined,
-    closeOnBack: hasAction ? closeOnBackPress : false,
-    lockScroll,
-    zIndex: (0, _number.parseNumberLike)(zIndex),
-    type: 'overlay'
-  });
-  if (!mounted) return null;
-  const resolvedZIndex = stackZIndex ?? (0, _number.parseNumberLike)(zIndex);
-  const styleBackgroundColor = _reactNative().StyleSheet.flatten(style)?.backgroundColor;
-  const resolvedColor = color ?? styleBackgroundColor ?? tokens.colors.backdrop;
-  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    pointerEvents: "box-none",
-    style: [tokens.layout.portal, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
-      zIndex: resolvedZIndex
-    } : null, style]
-  }, /*#__PURE__*/_react().default.createElement(AnimatedPressable, {
-    testID: testID,
-    style: [tokens.layout.overlay, {
-      backgroundColor: resolvedColor,
-      opacity: animated,
-      touchAction: lockScroll ? 'none' : undefined
-    }],
-    pointerEvents: mounted ? 'auto' : 'none',
-    accessible: hasAction,
-    accessibilityRole: hasAction ? 'button' : undefined,
-    accessibilityLabel: hasAction ? accessibilityLabel : undefined,
-    accessibilityHint: hasAction ? '双击即可关闭遮罩' : undefined,
-    onPress: handlePress
-  }), children));
-};
-exports.Overlay = Overlay;
+  }, children));
+});
 Overlay.displayName = 'Overlay';
 var _default = exports.default = Overlay;