react-native-system-ui 0.0.1 → 0.0.3

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

@@ -1,16 +1,17 @@
 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); }
-import React from 'react';
-import { Animated, Easing, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { nativeDriverEnabled } from '../../platform';
-import { parseNumberLike } from '../../utils/number';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
+import { parseNumberLike } from '../../utils/number';
 import Loading from '../loading';
 import Portal from '../portal/Portal';
-import { isText } from '../../utils/validate';
+import { SafeAreaView } from '../safe-area-view';
 import { useNumberKeyboardTokens } from './tokens';
 const keyboardRegistry = new Set();
-const BASE_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const ZERO_KEY = '0';
 const shuffle = list => {
   const next = [...list];
   for (let i = next.length - 1; i > 0; i -= 1) {
@@ -19,7 +20,7 @@ const shuffle = list => {
   }
   return next;
 };
-const NumberKeyboard = props => {
+const NumberKeyboard = /*#__PURE__*/React.memo(props => {
   const {
     visible,
     title,
@@ -66,20 +67,25 @@ const NumberKeyboard = props => {
     trigger: 'onChange'
   });
   const value = mergedValue ?? '';
-  const maxlength = React.useMemo(() => {
+  const maxlength = useMemo(() => {
     const parsed = parseNumberLike(maxlengthProp, undefined);
     if (parsed === undefined || !Number.isFinite(parsed) || parsed < 0) return undefined;
     return Math.floor(parsed);
   }, [maxlengthProp]);
-  const resolvedCloseText = theme === 'custom' ? closeButtonText ?? '完成' : closeButtonText;
-  const closeSelf = React.useCallback(() => {
+  const valueRef = useRef(value);
+  const maxlengthRef = useRef(maxlength);
+  valueRef.current = value;
+  maxlengthRef.current = maxlength;
+  const isCustomTheme = theme === 'custom';
+  const resolvedCloseText = isCustomTheme ? closeButtonText ?? '完成' : closeButtonText;
+  const closeSelf = useCallback(() => {
     onClose?.();
     if (blurOnClose) {
       onBlur?.();
     }
   }, [blurOnClose, onBlur, onClose]);
-  const prevVisible = React.useRef(visible);
-  React.useEffect(() => {
+  const prevVisible = useRef(visible);
+  useEffect(() => {
     if (visible && !prevVisible.current) {
       onShow?.();
     }
@@ -88,12 +94,9 @@ const NumberKeyboard = props => {
     }
     prevVisible.current = visible;
   }, [visible, onShow, onHide]);
-
-  // 仅允许一个键盘可见：当本实例显示时，通知其他实例关闭
-  React.useEffect(() => {
+  useEffect(() => {
     if (visible) {
       keyboardRegistry.add(closeSelf);
-      // 关闭其他已注册的键盘
       keyboardRegistry.forEach(fn => {
         if (fn !== closeSelf) {
           fn();
@@ -106,18 +109,18 @@ const NumberKeyboard = props => {
       keyboardRegistry.delete(closeSelf);
     };
   }, [visible, closeSelf]);
-  const keys = React.useMemo(() => {
-    const shouldShuffle = Boolean(randomKeyOrder) && visible;
-    const numbers = shouldShuffle ? shuffle(BASE_KEYS.slice(0, 9)) : BASE_KEYS.slice(0, 9);
+  const keys = useMemo(() => {
+    const shouldShuffle = randomKeyOrder && visible;
+    const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
     const main = numbers.map(text => ({
       text,
       type: ''
     }));
-    if (theme === 'custom') {
+    if (isCustomTheme) {
       const extras = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
       if (extras.length === 1) {
         main.push({
-          text: '0',
+          text: ZERO_KEY,
           type: '',
           wider: true
         }, {
@@ -129,7 +132,7 @@ const NumberKeyboard = props => {
           text: extras[0],
           type: 'extra'
         }, {
-          text: '0',
+          text: ZERO_KEY,
           type: ''
         }, {
           text: extras[1],
@@ -137,7 +140,7 @@ const NumberKeyboard = props => {
         });
       } else {
         main.push({
-          text: '0',
+          text: ZERO_KEY,
           type: ''
         });
       }
@@ -149,7 +152,7 @@ const NumberKeyboard = props => {
       type: 'extra'
     });
     main.push({
-      text: '0',
+      text: ZERO_KEY,
       type: ''
     });
     main.push({
@@ -157,79 +160,67 @@ const NumberKeyboard = props => {
       text: showDeleteKey ? undefined : ''
     });
     return main;
-  }, [extraKey, randomKeyOrder, showDeleteKey, theme, visible]);
-  const handleInput = (text, type) => {
+  }, [extraKey, isCustomTheme, randomKeyOrder, showDeleteKey, visible]);
+  const handleInput = useCallback((text, type) => {
     if (type === 'delete') {
-      if (!value) return;
+      const currentValue = valueRef.current;
+      if (!currentValue) return;
       onDelete?.();
-      const next = value.slice(0, -1);
-      setMergedValue(next);
+      setMergedValue(currentValue.slice(0, -1));
       return;
     }
-    if (type === 'close') {
-      closeSelf();
-      return;
-    }
-    if (type === 'extra' && !text) {
+    if (type === 'close' || type === 'extra' && !text) {
       closeSelf();
       return;
     }
     if (!text) return;
-    if (maxlength !== undefined && value.length >= maxlength) {
-      return;
-    }
+    const currentValue = valueRef.current;
+    const currentMaxlength = maxlengthRef.current;
+    if (currentMaxlength !== undefined && currentValue.length >= currentMaxlength) return;
     onInput?.(text);
-    const next = `${value}${text}`;
-    setMergedValue(next);
-  };
-  const wrapperShadow = createPlatformShadow({
+    setMergedValue(`${currentValue}${text}`);
+  }, [closeSelf, onDelete, onInput, setMergedValue]);
+  const wrapperShadow = useMemo(() => createPlatformShadow({
     color: shadow.color,
     opacity: shadow.opacity,
     radius: shadow.radius,
     offsetY: shadow.offsetY,
     elevation: shadow.elevation
-  });
-  const getKeyContent = key => {
-    if (key.type === 'delete') {
-      if (deleteRender) return deleteRender();
-      return deleteButtonText ?? '⌫';
-    }
-    if (key.type === 'extra') {
-      const extraText = key.text ?? '';
-      if (extraKeyRender) return extraKeyRender(extraText);
-      return extraText || '⌨︎';
-    }
-    if (key.type === 'close') {
-      return resolvedCloseText ?? '完成';
-    }
-    const keyText = key.text ?? '';
-    if (numberKeyRender) {
-      return numberKeyRender(keyText);
-    }
-    return keyText;
-  };
-  const renderKey = (key, index, options) => {
-    const isClose = options?.isClose;
+  }), [shadow.color, shadow.opacity, shadow.radius, shadow.offsetY, shadow.elevation]);
+  const keyGap = spacing.keyGap;
+  const renderKey = useCallback((key, index, isClose = false, fullWidth = false, customHeight) => {
     const isPlaceholder = key.type === '' && !key.text;
     const disabled = isPlaceholder || isClose && closeButtonLoading;
     const onPress = disabled ? undefined : () => handleInput(key.text, key.type);
     const backgroundColor = isClose ? colors.closeBackground : colors.keyBackground;
-    const activeBackground = colors.keyActiveBackground;
+    const activeBackground = isClose ? colors.closeActiveBackground : colors.keyActiveBackground;
     const inactiveTextColor = isClose ? colors.closeText : colors.keyText;
     const pressedTextColor = isClose ? colors.closeText : colors.keyTextActive;
-    const contentNode = getKeyContent(key);
+    const keyHeight = customHeight ?? (isClose ? sizing.closeHeight : sizing.keyHeight);
+    const actionFontSize = Math.round(sizing.fontSize * 0.64);
+    const textFontSize = key.type === 'close' || key.type === 'extra' || key.type === 'delete' ? actionFontSize : sizing.fontSize;
+    const keyText = key.text ?? '';
+    const contentNode = key.type === 'delete' ? deleteRender?.() ?? deleteButtonText ?? '⌫' : key.type === 'extra' ? extraKeyRender ? extraKeyRender(keyText) : keyText || '⌨︎' : key.type === 'close' ? resolvedCloseText ?? '完成' : numberKeyRender ? numberKeyRender(keyText) : keyText;
     return /*#__PURE__*/React.createElement(Pressable, {
       key: `${key.type}-${index}-${key.text ?? index}`,
       onPress: onPress,
       disabled: disabled,
-      style: {
-        flexBasis: key.wider ? '64%' : '30%',
-        flexGrow: key.wider ? 2 : 1,
+      style: [{
         opacity: isPlaceholder ? 1 : disabled ? 0.6 : 1
-      },
+      }, fullWidth ? {
+        width: '100%',
+        flexBasis: 'auto',
+        flexGrow: 0,
+        alignSelf: 'stretch'
+      } : {
+        flexBasis: 0,
+        flexGrow: key.wider ? 2 : 1,
+        flexShrink: 1,
+        minWidth: 0
+      }],
       accessible: !isPlaceholder,
       accessibilityRole: isPlaceholder ? undefined : 'button',
-      accessibilityLabel: isPlaceholder ? undefined : key.type === 'delete' ? 'delete' : key.type === 'close' ? resolvedCloseText ?? 'close' : key.type === 'extra' ? key.text ?? 'collapse' : key.text,
+      accessibilityLabel: isPlaceholder ? undefined : key.type === 'delete' ? 'delete' : key.type === 'close' ? resolvedCloseText ?? 'close' : key.type === 'extra' ? keyText || 'collapse' : keyText,
       accessibilityState: isPlaceholder ? undefined : {
         disabled: !!disabled
       },
@@ -243,27 +234,30 @@ const NumberKeyboard = props => {
       const textColor = isPressed ? pressedTextColor : inactiveTextColor;
       return /*#__PURE__*/React.createElement(View, {
         style: [styles.key, {
-          height: isClose ? sizing.closeHeight : sizing.keyHeight,
+          height: keyHeight,
           backgroundColor: keyBackground,
           borderRadius: radii.key
         }]
       }, isClose && closeButtonLoading ? /*#__PURE__*/React.createElement(Loading, {
         size: 18,
         color: textColor
-      }) : isText(contentNode) ? /*#__PURE__*/React.createElement(Text, {
+      }) : typeof contentNode === 'string' || typeof contentNode === 'number' ? /*#__PURE__*/React.createElement(Text, {
         style: [styles.keyText, {
           color: textColor,
-          fontSize: sizing.fontSize
+          fontSize: textFontSize
         }]
       }, contentNode) : contentNode == null || contentNode === false ? null : contentNode);
     });
-  };
-  const animated = React.useRef(new Animated.Value(visible ? 1 : 0)).current;
-  const animationRef = React.useRef(null);
-  const [contentHeight, setContentHeight] = React.useState(0);
-  const [shouldRender, setShouldRender] = React.useState(visible);
+  }, [closeButtonLoading, colors.closeActiveBackground, colors.closeBackground, colors.closeText, colors.keyActiveBackground, colors.keyBackground, colors.keyText, colors.keyTextActive, deleteButtonText, deleteRender, extraKeyRender, handleInput, numberKeyRender, radii.key, sizing.closeHeight, sizing.fontSize, sizing.keyHeight, resolvedCloseText]);
+  const animated = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const animationRef = useRef(null);
+  const animationSeqRef = useRef(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [shouldRender, setShouldRender] = useState(visible);
   const effectiveDuration = transition === false ? 0 : transitionDuration;
-  React.useEffect(() => {
+  useEffect(() => {
+    animationSeqRef.current += 1;
+    const currentSeq = animationSeqRef.current;
     if (visible) {
       setShouldRender(true);
     }
@@ -278,7 +272,7 @@ const NumberKeyboard = props => {
     animation.start(({
       finished
     }) => {
-      if (finished && !visible) {
+      if (finished && !visible && animationSeqRef.current === currentSeq) {
         setShouldRender(false);
       }
     });
@@ -287,22 +281,130 @@ const NumberKeyboard = props => {
       animationRef.current = null;
     };
   }, [animated, visible, effectiveDuration]);
-  const translateY = animated.interpolate({
+  const translateY = useMemo(() => animated.interpolate({
     inputRange: [0, 1],
     outputRange: [contentHeight || 320, 0]
-  });
-  const handleLayout = e => {
+  }), [animated, contentHeight]);
+  const handleLayout = useCallback(e => {
     const {
       height
     } = e.nativeEvent.layout;
-    if (Math.abs(height - contentHeight) > 0.5) {
-      setContentHeight(height);
+    setContentHeight(prev => Math.abs(height - prev) > 0.5 ? height : prev);
+  }, []);
+  const hasHeader = !isCustomTheme && (title || closeButtonText);
+  const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
+  const memo = useMemo(() => {
+    const headerPaddingStyle = {
+      paddingHorizontal: spacing.titlePadding
+    };
+    const defaultContainerStyle = [styles.defaultRow, {
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      paddingHorizontal: spacing.paddingHorizontal,
+      paddingTop: keyGap,
+      paddingBottom: keyGap,
+      gap: keyGap
+    }];
+    const defaultLineStyle = {
+      flexDirection: 'row',
+      gap: keyGap
+    };
+    const customRowStyle = [styles.customRow, {
+      paddingHorizontal: spacing.paddingHorizontal,
+      paddingTop: hasHeader ? 0 : keyGap,
+      paddingBottom: keyGap,
+      width: '100%'
+    }];
+    const customMainStyle = [styles.customMain, {
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      gap: keyGap
+    }];
+    const customSidebarStyle = [styles.customSidebar, {
+      gap: keyGap,
+      marginLeft: keyGap
+    }];
+    const entries = keys.map((key, index) => ({
+      key,
+      index
+    }));
+    const defaultLines = [];
+    for (let i = 0; i < entries.length; i += 3) {
+      defaultLines.push(entries.slice(i, i + 3));
+    }
+    const defaultNode = /*#__PURE__*/React.createElement(View, {
+      style: defaultContainerStyle
+    }, defaultLines.map((line, lineIndex) => /*#__PURE__*/React.createElement(View, {
+      key: `l-${lineIndex}`,
+      style: defaultLineStyle
+    }, line.map(item => renderKey(item.key, item.index)))));
+    const customLines = [];
+    for (let i = 0; i < 9 && i < entries.length; i += 3) {
+      customLines.push(entries.slice(i, i + 3));
+    }
+    const tail = entries.slice(9);
+    if (tail.length === 1) {
+      customLines.push([{
+        key: {
+          type: ''
+        },
+        index: 1000001
+      }, tail[0], {
+        key: {
+          type: ''
+        },
+        index: 1000002
+      }]);
+    } else if (tail.length) {
+      customLines.push(tail);
     }
-  };
+    const customMainNode = /*#__PURE__*/React.createElement(View, {
+      style: customMainStyle
+    }, customLines.map((line, lineIndex) => /*#__PURE__*/React.createElement(View, {
+      key: `cl-${lineIndex}`,
+      style: defaultLineStyle
+    }, line.map(item => renderKey(item.key, item.index)))));
+    const deleteNode = showDeleteKey ? renderKey({
+      type: 'delete'
+    }, 999, false, true, doubleKeyHeight) : null;
+    const closeNode = renderKey({
+      type: 'close'
+    }, 1000, true, true, doubleKeyHeight);
+    const headerNode = hasHeader ? /*#__PURE__*/React.createElement(View, {
+      style: [styles.header, headerPaddingStyle]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.title, styles.titleOverlay, {
+        color: colors.title
+      }],
+      numberOfLines: 1
+    }, title), resolvedCloseText ? /*#__PURE__*/React.createElement(Pressable, {
+      onPress: closeSelf,
+      style: styles.headerClose,
+      accessibilityRole: "button",
+      accessibilityLabel: resolvedCloseText
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: colors.title
+      }
+    }, resolvedCloseText)) : null) : null;
+    const bodyNode = isCustomTheme ? /*#__PURE__*/React.createElement(View, {
+      style: customRowStyle
+    }, customMainNode, /*#__PURE__*/React.createElement(View, {
+      style: customSidebarStyle
+    }, deleteNode, closeNode)) : defaultNode;
+    const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+      edge: "bottom"
+    });
+    return {
+      headerNode,
+      bodyNode,
+      safeAreaNode
+    };
+  }, [colors.title, doubleKeyHeight, hasHeader, isCustomTheme, keyGap, keys, renderKey, resolvedCloseText, safeAreaInsetBottom, showDeleteKey, closeSelf, spacing.paddingHorizontal, spacing.titlePadding, title]);
   if (!shouldRender && !visible) {
     return null;
   }
-  const keyboardNode = /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
     pointerEvents: visible ? 'auto' : 'none',
     onLayout: handleLayout,
     style: [styles.wrapper, wrapperShadow, style, {
@@ -311,58 +413,8 @@ const NumberKeyboard = props => {
       }],
       backgroundColor: colors.background
     }]
-  }), (title || closeButtonText) && theme === 'default' && /*#__PURE__*/React.createElement(View, {
-    style: [styles.header, {
-      paddingHorizontal: spacing.titlePadding
-    }]
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.title, styles.titleOverlay, {
-      color: colors.title
-    }],
-    numberOfLines: 1
-  }, title), resolvedCloseText ? /*#__PURE__*/React.createElement(Pressable, {
-    onPress: () => handleInput(undefined, 'close'),
-    style: styles.headerClose,
-    accessibilityRole: "button",
-    accessibilityLabel: resolvedCloseText
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: {
-      color: colors.title
-    }
-  }, resolvedCloseText)) : null), theme === 'custom' ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.customRow, {
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingBottom: spacing.paddingVertical,
-      gap: spacing.keyGap
-    }]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.customMain, {
-      gap: spacing.keyGap
-    }]
-  }, keys.map((key, index) => renderKey(key, index))), /*#__PURE__*/React.createElement(View, {
-    style: [styles.customSidebar, {
-      gap: spacing.keyGap
-    }]
-  }, showDeleteKey ? renderKey({
-    type: 'delete'
-  }, 999) : null, renderKey({
-    type: 'close',
-    text: resolvedCloseText
-  }, 1000, {
-    isClose: true
-  }))) : /*#__PURE__*/React.createElement(View, {
-    style: [styles.defaultRow, {
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingBottom: spacing.paddingVertical,
-      gap: spacing.keyGap
-    }]
-  }, keys.map((key, index) => renderKey(key, index))), safeAreaInsetBottom ? /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: {
-      width: '100%'
-    }
-  }) : null);
-  return /*#__PURE__*/React.createElement(Portal, null, keyboardNode);
-};
+  }), memo.headerNode, memo.bodyNode, memo.safeAreaNode));
+});
 const styles = StyleSheet.create({
   wrapper: {
     position: 'absolute',
@@ -414,7 +466,7 @@ const styles = StyleSheet.create({
   customSidebar: {
     flex: 1,
     flexDirection: 'column',
-    justifyContent: 'space-between'
+    justifyContent: 'flex-start'
   }
 });
 NumberKeyboard.displayName = 'NumberKeyboard';

package/dist/es/components/number-keyboard/tokens.js

@@ -3,8 +3,7 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    radii,
-    fontSize
+    radii
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
@@ -12,17 +11,18 @@ const createTokens = foundations => {
       background: palette.default[100],
       title: palette.default[700],
       keyBackground: '#ffffff',
-      keyActiveBackground: palette.default[100],
+      keyActiveBackground: palette.default[50],
       keyText: palette.default[900],
       keyTextActive: palette.primary[600],
-      closeBackground: palette.primary[600],
+      closeBackground: palette.primary[500],
+      closeActiveBackground: palette.primary[400],
       closeText: onPrimary,
       border: palette.default[200]
     },
     spacing: {
-      paddingHorizontal: spacing.md,
-      paddingVertical: spacing.sm,
-      keyGap: spacing.xs,
+      paddingHorizontal: spacing.ssm,
+      paddingVertical: spacing.ssm,
+      keyGap: spacing.ssm,
       titlePadding: spacing.md
     },
     sizing: {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Animated, Pressable, StyleSheet, View } from 'react-native';
 import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
 import { parseNumberLike } from '../../utils/number';
@@ -8,30 +8,36 @@ import { useOverlayTokens } from './tokens';
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export const Overlay = props => {
   const {
-    visible = false,
     color,
-    duration,
-    lockScroll = true,
-    closeOnBackPress = false,
     tokensOverride,
     onPress,
     onClick,
     style,
-    testID = 'rv-overlay',
-    accessibilityLabel = '关闭遮罩',
     zIndex,
-    children
+    children,
+    visible: visibleProp,
+    duration: durationProp,
+    lockScroll: lockScrollProp,
+    closeOnBackPress: closeOnBackPressProp,
+    testID: testIDProp,
+    accessibilityLabel: accessibilityLabelProp
   } = props;
   const hasAction = !!onPress || !!onClick;
   const tokens = useOverlayTokens(tokensOverride);
-  const resolvedDuration = Math.max(0, parseNumberLike(duration, tokens.animationDuration) ?? tokens.animationDuration);
+  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, parseNumberLike(duration, tokens.defaults.duration) ?? tokens.defaults.duration);
   const {
     mounted,
     animated
   } = usePresenceAnimation(visible, {
     duration: resolvedDuration
   });
-  const handlePress = React.useCallback(() => {
+  const handlePress = useCallback(() => {
     if (onPress) {
       onPress();
       return;
@@ -54,12 +60,12 @@ export const Overlay = props => {
   const resolvedColor = color ?? styleBackgroundColor ?? tokens.colors.backdrop;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "box-none",
-    style: [styles.portal, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
+    style: [tokens.layout.portal, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
       zIndex: resolvedZIndex
     } : null, style]
   }, /*#__PURE__*/React.createElement(AnimatedPressable, {
     testID: testID,
-    style: [styles.overlay, {
+    style: [tokens.layout.overlay, {
       backgroundColor: resolvedColor,
       opacity: animated,
       touchAction: lockScroll ? 'none' : undefined
@@ -72,13 +78,5 @@ export const Overlay = props => {
     onPress: handlePress
   }), children));
 };
-const styles = StyleSheet.create({
-  portal: {
-    ...StyleSheet.absoluteFillObject
-  },
-  overlay: {
-    ...StyleSheet.absoluteFillObject
-  }
-});
 Overlay.displayName = 'Overlay';
 export default Overlay;

package/dist/es/components/overlay/OverlayStackStore.js

@@ -1,6 +1,6 @@
 import { BackHandler, Platform } from 'react-native';
 import { setBodyScrollLocked } from '../../platform';
-import { isNumber } from '../../utils/validate';
+import { isNumber } from '../../utils';
 const DEFAULT_BASE_Z_INDEX = 1000;
 const DEFAULT_Z_INDEX_STEP = 2;
 export class OverlayStackStore {
@@ -59,7 +59,7 @@ export class OverlayStackStore {
   getBaseZIndex = () => this.baseZIndex;
   resolveZIndex = provided => {
     if (isNumber(provided)) {
-      if (!Number.isFinite(provided)) {
+      if (!Number.isFinite(provided) || provided < 0) {
         return this.baseZIndex;
       }
       return provided >= this.baseZIndex ? provided : this.baseZIndex + provided;

package/dist/es/components/overlay/tokens.js

@@ -1,8 +1,31 @@
 import { createComponentTokensHook } from '../../design-system';
 export const createOverlayTokens = _foundations => ({
+  defaults: {
+    visible: false,
+    duration: 300,
+    lockScroll: true,
+    closeOnBackPress: false,
+    testID: 'rv-overlay',
+    accessibilityLabel: '关闭遮罩'
+  },
+  layout: {
+    portal: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    },
+    overlay: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  },
   colors: {
     backdrop: 'rgba(0, 0, 0, 0.7)'
-  },
-  animationDuration: 300
+  }
 });
 export const useOverlayTokens = createComponentTokensHook('overlay', createOverlayTokens);