react-native-system-ui 0.0.2 → 0.0.4

package/dist/cjs/{number-keyboard → components/number-keyboard}/tokens.js

@@ -9,7 +9,8 @@ const createTokens = foundations => {
   const {
     palette,
     spacing,
-    radii
+    radii,
+    fontSize
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
@@ -34,7 +35,8 @@ const createTokens = foundations => {
     sizing: {
       keyHeight: 54,
       closeHeight: 44,
-      fontSize: 28
+      fontSize: 28,
+      titleFontSize: fontSize.md
     },
     radii: {
       key: radii.xs

package/dist/cjs/{overlay → components/overlay}/useOverlayStack.js

@@ -19,7 +19,11 @@ const useOverlayStack = ({
 }) => {
   const entries = useOverlayEntries();
   const entryRef = (0, _react().useRef)(null);
-  const stableOptions = (0, _react().useMemo)(() => options, [options.onClose, options.closeOnBack, options.lockScroll, options.zIndex, options.type, options.meta]);
+  const optionsRef = (0, _react().useRef)(options);
+  if (optionsRef.current.onClose !== options.onClose || optionsRef.current.closeOnBack !== options.closeOnBack || optionsRef.current.lockScroll !== options.lockScroll || optionsRef.current.zIndex !== options.zIndex || optionsRef.current.type !== options.type || optionsRef.current.meta !== options.meta) {
+    optionsRef.current = options;
+  }
+  const stableOptions = optionsRef.current;
   (0, _react().useEffect)(() => {
     if (!visible) {
       if (entryRef.current) {

package/dist/cjs/{pagination → components/pagination}/Pagination.js

@@ -58,7 +58,7 @@ const Pagination = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const showPageSizeNumber = Number.isFinite(showPageSize) ? Math.floor(showPageSize) : 0;
   const count = pageCountNumber > 0 ? pageCountNumber : totalItemsNumber > 0 && itemsPerPageNumber > 0 ? Math.max(1, Math.ceil(totalItemsNumber / itemsPerPageNumber)) : 1;
   const currentPage = (0, _number.clamp)(page, 1, count);
-  const pages = (0, _react().useMemo)(() => {
+  const pages = (() => {
     const items = [];
     if (mode !== 'multi') return items;
     const limit = Math.max(1, showPageSizeNumber);
@@ -91,7 +91,7 @@ const Pagination = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       });
     }
     return items;
-  }, [mode, count, showPageSizeNumber, currentPage, forceEllipses]);
+  })();
   (0, _react().useEffect)(() => {
     if (page !== currentPage) {
       setPage(currentPage);

package/dist/cjs/{password-input → components/password-input}/PasswordInput.js

@@ -26,7 +26,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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 HIDDEN_INPUT_PROPS = {
   caretHidden: true,
-  underlineColorAndroid: 'transparent',
   autoCorrect: false,
   spellCheck: false,
   importantForAutofill: 'no',
@@ -40,10 +39,12 @@ const createPasswordInputTokens = foundations => ({
     muted: foundations.palette.default[500],
     error: foundations.palette.danger[500],
     cursor: foundations.palette.default[800],
-    background: '#ffffff'
+    background: '#ffffff',
+    transparent: 'transparent'
   },
   radii: {
-    wrapper: foundations.radii.sm
+    wrapper: foundations.radii.sm,
+    cellGutter: foundations.radii.none
   },
   sizing: {
     cellHeight: 50,
@@ -61,10 +62,12 @@ const createPasswordInputTokens = foundations => ({
     infoWeight: foundations.typography.weight.regular
   },
   opacity: {
-    disabled: 0.6
+    disabled: 0.6,
+    hidden: 0
   },
   spacing: {
-    infoMarginTop: foundations.spacing.sm
+    infoMarginTop: foundations.spacing.sm,
+    none: foundations.spacing.none
   }
 });
 const usePasswordInputTokens = (0, _designSystem.createComponentTokensHook)('passwordInput', createPasswordInputTokens);
@@ -110,8 +113,8 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const [cursorVisible, setCursorVisible] = (0, _react().useState)(true);
   const blinkTimer = (0, _react().useRef)(null);
   const [focused, setFocused] = (0, _react().useState)(autoFocus);
-  const keyboardType = (0, _react().useMemo)(() => type === 'number' ? 'number-pad' : 'default', [type]);
-  const inputMode = (0, _react().useMemo)(() => type === 'number' ? 'numeric' : 'text', [type]);
+  const keyboardType = type === 'number' ? 'number-pad' : 'default';
+  const inputMode = type === 'number' ? 'numeric' : 'text';
   const [code = '', setCode] = (0, _hooks.useControllableValue)(props, {
     defaultValue: ''
   });
@@ -125,7 +128,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }
     return next;
   }, [lengthSafe, type]);
-  const normalizedCode = (0, _react().useMemo)(() => normalizeValue(code), [code, normalizeValue]);
+  const normalizedCode = normalizeValue(code);
   const updateValue = (0, _react().useCallback)(nextValue => {
     const normalized = normalizeValue(nextValue);
     if (normalized === normalizedCode) return;
@@ -203,7 +206,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       }
     };
   }, [disabled, focused, showCursor]);
-  const cells = (0, _react().useMemo)(() => Array.from({
+  const cells = Array.from({
     length: lengthSafe
   }, (_, index) => {
     const char = normalizedCode?.[index];
@@ -215,30 +218,35 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       isFilled,
       showBlink
     };
-  }), [disabled, focused, lengthSafe, normalizedCode, showCursor]);
-  const gutterValue = (0, _react().useMemo)(() => Math.max(0, (0, _number.parseNumberLike)(gutter, 0) ?? 0), [gutter]);
+  });
+  const gutterValue = Math.max(0, (0, _number.parseNumberLike)(gutter, 0) ?? 0);
   const hasGutter = gutterValue > 0;
   const tip = errorInfo ?? info;
   const tipColor = errorInfo ? colors.error : colors.muted;
-  const backgroundColor = hasGutter ? 'transparent' : colors.background;
-  const cellTextBase = (0, _react().useMemo)(() => ({
+  const backgroundColor = hasGutter ? colors.transparent : colors.background;
+  const hiddenInputProps = {
+    ...HIDDEN_INPUT_PROPS,
+    underlineColorAndroid: colors.transparent
+  };
+  const cellTextBase = {
     color: colors.text,
     fontSize: sizing.cellTextSize,
     fontWeight: typography.cellTextWeight,
     fontFamily: typography.fontFamily
-  }), [colors.text, sizing.cellTextSize, typography.cellTextWeight, typography.fontFamily]);
-  const wrapperStyle = (0, _react().useMemo)(() => [styles.wrapper, {
+  };
+  const wrapperStyle = [styles.wrapper, {
     backgroundColor,
     borderRadius: radii.wrapper,
+    paddingHorizontal: spacing.none,
     opacity: disabled ? opacity.disabled : 1
   }, !hasGutter && {
     borderWidth: _reactNative().StyleSheet.hairlineWidth,
     borderColor: colors.border
-  }], [backgroundColor, colors.border, disabled, hasGutter, opacity.disabled, radii.wrapper]);
-  const securityStyle = (0, _react().useMemo)(() => [styles.security, {
+  }];
+  const securityStyle = [styles.security, {
     borderRadius: hasGutter ? 0 : radii.wrapper,
     backgroundColor
-  }], [backgroundColor, hasGutter, radii.wrapper]);
+  }];
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: style
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, rest, {
@@ -259,7 +267,8 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }, cellStyle, item.isFilled && cellFilledStyle];
     if (hasGutter) {
       baseCell.push(styles.cellGutter, {
-        borderColor: colors.border
+        borderColor: colors.border,
+        borderRadius: radii.cellGutter
       }, index > 0 && {
         marginLeft: gutterValue
       });
@@ -304,8 +313,10 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     maxLength: lengthSafe,
     autoFocus: false,
     secureTextEntry: mask
-  }, HIDDEN_INPUT_PROPS, {
-    style: styles.hiddenInput,
+  }, hiddenInputProps, {
+    style: [styles.hiddenInput, {
+      opacity: opacity.hidden
+    }],
     onChangeText: handleChangeText,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -323,8 +334,7 @@ const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
 var _default = exports.default = PasswordInput;
 const styles = _reactNative().StyleSheet.create({
   wrapper: {
-    alignSelf: 'stretch',
-    paddingHorizontal: 0
+    alignSelf: 'stretch'
   },
   security: {
     flexDirection: 'row',
@@ -338,16 +348,14 @@ const styles = _reactNative().StyleSheet.create({
     alignItems: 'center'
   },
   cellGutter: {
-    borderWidth: _reactNative().StyleSheet.hairlineWidth,
-    borderRadius: 0
+    borderWidth: _reactNative().StyleSheet.hairlineWidth
   },
   cursor: {
     position: 'absolute',
     left: '50%'
   },
   hiddenInput: {
-    ..._reactNative().StyleSheet.absoluteFillObject,
-    opacity: 0
+    ..._reactNative().StyleSheet.absoluteFillObject
   },
   infoWrapper: {
     alignItems: 'center'

package/dist/cjs/{picker → components/picker}/Picker.js

@@ -36,7 +36,7 @@ function usePickerValue({
   onChange,
   onConfirm
 }) {
-  const preparedColumns = (0, _react().useMemo)(() => (0, _utils.prepareColumns)(columns), [columns]);
+  const preparedColumns = (0, _utils.prepareColumns)(columns);
   const isControlled = valueProp !== undefined;
   const [innerValue, setInnerValue] = (0, _react().useState)(() => {
     const initial = (0, _utils.toArrayValue)(valueProp ?? defaultValue);
@@ -54,7 +54,7 @@ function usePickerValue({
       commitValue(next);
     }
   }, [commitValue, isControlled, valueProp]);
-  const normalized = (0, _react().useMemo)(() => (0, _utils.normalizePicker)(preparedColumns, innerValue), [preparedColumns, innerValue]);
+  const normalized = (0, _utils.normalizePicker)(preparedColumns, innerValue);
   (0, _react().useEffect)(() => {
     if (isControlled) return;
     if (!(0, _utils.shallowEqualArray)(innerValue, normalized.values)) {
@@ -170,11 +170,11 @@ const PickerColumn = /*#__PURE__*/_react().default.memo(props => {
     swipeDuration
   } = props;
   const restVisible = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const selectedIndex = (0, _react().useMemo)(() => {
+  const selectedIndex = (() => {
     if (!options.length) return 0;
     const idx = options.findIndex(option => option.value === value);
     return (0, _utils.findEnabledIndex)(options, idx >= 0 ? idx : 0);
-  }, [options, value]);
+  })();
   const handleChange = (0, _react().useCallback)(index => {
     const target = (0, _utils.findEnabledIndex)(options, index);
     const option = options[target];
@@ -266,7 +266,6 @@ const Picker = props => {
     emitConfirmOnAutoSelect = true,
     maskColor,
     maskType = tokens.defaults.maskType,
-    interactionMode = 'auto',
     onChange,
     onConfirm,
     onCancel,
@@ -370,7 +369,8 @@ const Picker = props => {
   }) : null;
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
     style: [styles.container, {
-      backgroundColor: tokens.colors.background
+      backgroundColor: tokens.colors.background,
+      borderRadius: tokens.radius.container
     }, style],
     testID: testID
   }), toolbarPosition === 'top' && toolbar, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -398,13 +398,13 @@ const Picker = props => {
     color: effectiveMaskColor,
     maskType: maskType
   }))), loading && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.loading
+    style: [styles.loading, {
+      backgroundColor: tokens.colors.loadingMask
+    }]
   }, /*#__PURE__*/_react().default.createElement(_loading.default, null))), toolbarPosition === 'bottom' && toolbar);
 };
 const styles = _reactNative().StyleSheet.create({
-  container: {
-    borderRadius: 4
-  },
+  container: {},
   body: {
     position: 'relative',
     overflow: 'hidden'
@@ -458,8 +458,7 @@ const styles = _reactNative().StyleSheet.create({
     right: 0,
     bottom: 0,
     alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.65)'
+    justifyContent: 'center'
   }
 });
 Picker.displayName = 'Picker';

package/dist/cjs/{picker → components/picker}/WheelPicker.js

@@ -277,8 +277,8 @@ const WheelPickerInner = ({
       }]
     }, content);
   }, [itemHeight, renderItem]);
-  const webIndex = (0, _react().useMemo)(() => (0, _utils.clamp)(Math.round(-webOffset / itemHeight), 0, maxIndex), [itemHeight, maxIndex, webOffset]);
-  const webRender = (0, _react().useMemo)(() => {
+  const webIndex = (0, _utils.clamp)(Math.round(-webOffset / itemHeight), 0, maxIndex);
+  const webRender = (() => {
     if (!isWeb || total <= 0) {
       return {
         items: null,
@@ -322,24 +322,24 @@ const WheelPickerInner = ({
         }
       })
     };
-  }, [data, isWeb, itemHeight, maxIndex, renderItem, total, visibleCount, webIndex, webVirtualEnabled, webVelocityBucket]);
-  const webTransform = (0, _react().useMemo)(() => ({
+  })();
+  const webTransform = {
     transform: [{
       translateY: webOffset
     }]
-  }), [webOffset]);
-  const webTransitionStyle = (0, _react().useMemo)(() => webTransition ? {
+  };
+  const webTransitionStyle = webTransition ? {
     transitionProperty: 'transform',
     transitionDuration: `${webTransition}ms`,
     transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.68, 1)',
     willChange: 'transform'
-  } : undefined, [webTransition]);
+  } : undefined;
   const handleWebTransitionEnd = (0, _react().useCallback)(event => {
     const propertyName = event.nativeEvent?.propertyName ?? event.propertyName;
     if (propertyName && propertyName !== 'transform' && propertyName !== 'webkitTransform') return;
     finalizePendingChange();
   }, [finalizePendingChange]);
-  const panResponder = (0, _react().useMemo)(() => _reactNative().PanResponder.create({
+  const panResponder = _reactNative().PanResponder.create({
     onStartShouldSetPanResponder: () => !readOnly,
     onMoveShouldSetPanResponder: () => !readOnly,
     onPanResponderGrant: () => {
@@ -384,7 +384,7 @@ const WheelPickerInner = ({
       notifyInteractEnd();
       setWebTransition(0);
     }
-  }), [data, itemHeight, maxIndex, minOffset, notifyInteractEnd, notifyInteractStart, readOnly, setVelocityBucket, startWebSnap, stopRaf, total]);
+  });
   if (isWeb) {
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
       style: [styles.column, {

package/dist/cjs/{picker → components/picker}/tokens.js

@@ -30,7 +30,8 @@ const createPickerTokens = foundations => {
       textDisabled: palette.default[400],
       confirm: palette.primary[600],
       cancel: palette.default[600],
-      mask: '#ffffff'
+      mask: '#ffffff',
+      loadingMask: 'rgba(255,255,255,0.65)'
     },
     spacing: {
       toolbarHeight: 44,
@@ -44,7 +45,8 @@ const createPickerTokens = foundations => {
       toolbarWeight: typography.weight.medium
     },
     radius: {
-      toolbar: radii.none
+      toolbar: radii.none,
+      container: radii.xs
     }
   };
 };

package/dist/cjs/{popup → components/popup}/Popup.js

@@ -18,6 +18,7 @@ function _reactNative() {
   };
   return data;
 }
+var _safeAreaView = require("../safe-area-view");
 var _platform = require("../../platform");
 var _createPlatformShadow = require("../../utils/createPlatformShadow");
 var _validate = require("../../utils/validate");
@@ -117,19 +118,15 @@ const renderHeaderNode = (node, options) => {
 };
 const renderWithSafeArea = (children, opts, onSafeAreaTopLayout) => {
   if (opts.safeArea) {
-    return /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-      style: styles.safeAreaView
-    }, children);
+    return /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, null, children);
   }
-  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-    style: [styles.safeInsetTop, {
-      pointerEvents: 'none'
-    }],
-    onLayout: onSafeAreaTopLayout
-  }) : null, children, opts.safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-    style: [styles.safeInsetBottom, {
-      pointerEvents: 'none'
-    }]
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+    edge: "top",
+    onLayout: onSafeAreaTopLayout,
+    pointerEvents: "none"
+  }) : null, children, opts.safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+    edge: "bottom",
+    pointerEvents: "none"
   }));
 };
 const hiddenContentStyle = {
@@ -182,70 +179,59 @@ const Popup = props => {
   const shouldTranslate = placement !== 'center';
   const safeAreaInsetBottom = safeAreaInsetBottomProp ?? false;
   const tokens = (0, _tokens.usePopupTokens)(tokensOverride);
-  const dynamicStyles = (0, _react().useMemo)(() => {
-    const shadow = (0, _createPlatformShadow.createPlatformShadow)({
-      color: tokens.shadow.color,
-      opacity: tokens.shadow.opacity,
-      radius: tokens.shadow.radius,
-      offsetY: tokens.shadow.offsetY,
-      elevation: tokens.shadow.elevation
-    });
-    const popup = {
+  const shadow = (0, _createPlatformShadow.createPlatformShadow)({
+    color: tokens.shadow.color,
+    opacity: tokens.shadow.opacity,
+    radius: tokens.shadow.radius,
+    offsetY: tokens.shadow.offsetY,
+    elevation: tokens.shadow.elevation
+  });
+  const dynamicStyles = {
+    popup: {
       backgroundColor: tokens.colors.background,
       padding: tokens.spacing.padding,
       ...shadow
-    };
-    const title = {
+    },
+    title: {
       color: tokens.colors.title,
       fontSize: tokens.typography.titleSize,
       fontWeight: tokens.typography.titleWeight,
       marginHorizontal: tokens.spacing.descriptionHorizontal,
       textAlign: 'center'
-    };
-    const titleWrapper = {
+    },
+    titleWrapper: {
       marginTop: tokens.spacing.titleTop,
       marginBottom: tokens.spacing.titleBottom,
       marginHorizontal: tokens.spacing.descriptionHorizontal,
       alignItems: 'center'
-    };
-    const description = {
+    },
+    description: {
       color: tokens.colors.description,
       fontSize: tokens.typography.descriptionSize,
       lineHeight: tokens.typography.descriptionLineHeight
-    };
-    const descriptionWrapper = {
+    },
+    descriptionWrapper: {
       marginHorizontal: tokens.spacing.descriptionHorizontal,
       marginBottom: tokens.spacing.descriptionBottom
-    };
-    const closeIconBase = {
+    },
+    closeIconBase: {
       minWidth: tokens.spacing.closeIconSize,
       minHeight: tokens.spacing.closeIconSize,
-      padding: 6
-    };
-    const closeIconDefault = {
+      padding: tokens.spacing.closeIconPadding
+    },
+    closeIconDefault: {
       width: tokens.spacing.closeIconSize,
       height: tokens.spacing.closeIconSize
-    };
-    const popupSide = {
+    },
+    popupSide: {
       width: tokens.layout.sideWidth,
       maxWidth: tokens.layout.maxWidth
-    };
-    const popupCenter = {
+    },
+    popupCenter: {
       minWidth: tokens.layout.minWidth,
       maxWidth: tokens.layout.centerMaxWidth
-    };
-    return {
-      popup,
-      title,
-      titleWrapper,
-      description,
-      descriptionWrapper,
-      closeIconBase,
-      closeIconDefault,
-      popupSide,
-      popupCenter
-    };
-  }, [tokens]);
+    }
+  };
   const [mounted, setMounted] = (0, _react().useState)(visible);
   const [interactionVisible, setInteractionVisible] = (0, _react().useState)(visible);
   const isOpen = visible || interactionVisible;
@@ -364,22 +350,18 @@ const Popup = props => {
     onStartShouldSetResponder: stopPropagationResponder
   } : overlayRestProps;
   const config = placementConfig[placement];
-  const radiusStyle = (0, _react().useMemo)(() => buildRadius(round, placement, tokens.radius.round), [placement, round, tokens.radius.round]);
+  const radiusStyle = buildRadius(round, placement, tokens.radius.round);
   const {
     animated: overlayOpacity
   } = (0, _hooks.usePresenceAnimation)(visible, {
     duration
   });
-  const translateDistance = (0, _react().useMemo)(() => {
-    if (placement === 'left' || placement === 'right') {
-      return _reactNative().Dimensions.get('window').width;
-    }
-    if (placement === 'top' || placement === 'bottom') {
-      return _reactNative().Dimensions.get('window').height;
-    }
-    return 0;
-  }, [placement]);
-  const translateTransform = (0, _react().useMemo)(() => {
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = (0, _reactNative().useWindowDimensions)();
+  const translateDistance = placement === 'left' || placement === 'right' ? windowWidth : placement === 'top' || placement === 'bottom' ? windowHeight : 0;
+  const translateTransform = (() => {
     if (!shouldTranslate) return null;
     const outputRange = [translateDistance * direction, 0];
     return config.axis === 'y' ? {
@@ -393,9 +375,9 @@ const Popup = props => {
         outputRange
       })
     };
-  }, [config.axis, direction, progress, shouldTranslate, translateDistance]);
-  const baseTransform = (0, _react().useMemo)(() => translateTransform ? [translateTransform] : [], [translateTransform]);
-  const animatedContentStyle = (0, _react().useMemo)(() => {
+  })();
+  const baseTransform = translateTransform ? [translateTransform] : [];
+  const animatedContentStyle = (() => {
     const extraTransform = contentAnimationStyle?.transform;
     const transform = Array.isArray(extraTransform) ? [...baseTransform, ...extraTransform] : baseTransform;
     const baseStyle = {
@@ -415,7 +397,7 @@ const Popup = props => {
       };
     }
     return baseStyle;
-  }, [baseTransform, contentAnimationStyle, placement, progress]);
+  })();
   const handleContentLayout = (0, _react().useCallback)(event => {
     overlayOnLayout?.(event);
   }, [overlayOnLayout]);
@@ -547,15 +529,6 @@ const styles = _reactNative().StyleSheet.create({
   },
   lockLayer: {
     ..._reactNative().StyleSheet.absoluteFillObject
-  },
-  safeAreaView: {
-    width: '100%'
-  },
-  safeInsetTop: {
-    width: '100%'
-  },
-  safeInsetBottom: {
-    width: '100%'
   }
 });
 Popup.displayName = 'Popup';

package/dist/cjs/{popup → components/popup}/tokens.js

@@ -33,7 +33,8 @@ const createPopupTokens = foundations => {
       descriptionBottom: spacing.md,
       closeIconTop: spacing.md,
       closeIconRight: spacing.md,
-      closeIconSize: 36
+      closeIconSize: 36,
+      closeIconPadding: spacing.ssm
     },
     typography: {
       titleSize: fontSize.md,

package/dist/cjs/{portal → components/portal}/Portal.js

@@ -14,6 +14,7 @@ function _react() {
 var _PortalContext = require("./PortalContext");
 var _PortalHost = require("./PortalHost");
 const usePortalManager = () => (0, _react().useContext)(_PortalContext.PortalContext) ?? _PortalHost.portalManager;
+let hasWarnedNoHost = false;
 const PortalComponent = ({
   children
 }) => {
@@ -21,6 +22,10 @@ const PortalComponent = ({
   const keyRef = (0, _react().useRef)(null);
   (0, _react().useLayoutEffect)(() => {
     if (manager === _PortalHost.portalManager) {
+      if (typeof document === 'undefined' && !_PortalHost.portalStore.hasHosts() && !hasWarnedNoHost && typeof __DEV__ !== 'undefined' && __DEV__) {
+        hasWarnedNoHost = true;
+        console.warn('[Portal] 请在根节点挂载 <PortalHost> 以保证遮罩层正常工作');
+      }
       void (0, _PortalHost.ensureGlobalPortalHost)();
     }
     const key = manager.mount(children ?? null);

package/dist/cjs/{portal → components/portal}/PortalHost.js

@@ -82,8 +82,6 @@ const hostStack = [];
 const portalEntries = new Map();
 const emptyEntries = [];
 let nextPortalKey = 1;
-let warnedNative = false;
-const isJestEnv = typeof globalThis !== 'undefined' && globalThis?.process?.env?.JEST_ENV === 'true';
 let snapshotDirty = true;
 let snapshotCache = emptyEntries;
 const markSnapshotDirty = () => {
@@ -185,7 +183,6 @@ const clearPortals = () => {
     markSnapshotDirty();
     syncCurrentHost();
   }
-  warnedNative = false;
   maybeTeardownAutoHost();
 };
 const globalManager = {
@@ -259,12 +256,6 @@ const ensureGlobalPortalHost = () => {
     return Promise.resolve();
   }
   if (typeof document === 'undefined') {
-    if (!warnedNative) {
-      warnedNative = true;
-      if (typeof __DEV__ !== 'undefined' && __DEV__ || isJestEnv) {
-        console.warn('[Portal] 请在根节点挂载 <PortalHost> 或 <ConfigProvider> 以启用静态组件能力。');
-      }
-    }
     return Promise.resolve();
   }
   if (autoHostRoot) return Promise.resolve();
@@ -284,11 +275,8 @@ const ensureGlobalPortalHost = () => {
       fixed: true
     }));
     maybeTeardownAutoHost();
-  }).catch(error => {
+  }).catch(() => {
     teardownAutoHost();
-    if (typeof __DEV__ !== 'undefined' && __DEV__ || isJestEnv) {
-      console.warn('[Portal] 无法自动挂载 PortalHost:', error);
-    }
   }).finally(() => {
     hostPromise = null;
   });