react-native-system-ui 0.0.2 → 0.0.4

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

@@ -1,5 +1,5 @@
 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, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { usePaginationTokens } from './tokens';
 import { useControllableValue } from '../../hooks';
@@ -39,7 +39,7 @@ const Pagination = /*#__PURE__*/React.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 = clamp(page, 1, count);
-  const pages = useMemo(() => {
+  const pages = (() => {
     const items = [];
     if (mode !== 'multi') return items;
     const limit = Math.max(1, showPageSizeNumber);
@@ -72,7 +72,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
       });
     }
     return items;
-  }, [mode, count, showPageSizeNumber, currentPage, forceEllipses]);
+  })();
   useEffect(() => {
     if (page !== currentPage) {
       setPage(currentPage);

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

@@ -1,5 +1,5 @@
 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, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { createComponentTokensHook } from '../../design-system';
 import { useControllableValue } from '../../hooks';
@@ -7,7 +7,6 @@ import { parseNumberLike } from '../../utils/number';
 import { isString, isText } from '../../utils/validate';
 const HIDDEN_INPUT_PROPS = {
   caretHidden: true,
-  underlineColorAndroid: 'transparent',
   autoCorrect: false,
   spellCheck: false,
   importantForAutofill: 'no',
@@ -21,10 +20,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,
@@ -42,10 +43,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 = createComponentTokensHook('passwordInput', createPasswordInputTokens);
@@ -91,8 +94,8 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [cursorVisible, setCursorVisible] = useState(true);
   const blinkTimer = useRef(null);
   const [focused, setFocused] = useState(autoFocus);
-  const keyboardType = useMemo(() => type === 'number' ? 'number-pad' : 'default', [type]);
-  const inputMode = useMemo(() => type === 'number' ? 'numeric' : 'text', [type]);
+  const keyboardType = type === 'number' ? 'number-pad' : 'default';
+  const inputMode = type === 'number' ? 'numeric' : 'text';
   const [code = '', setCode] = useControllableValue(props, {
     defaultValue: ''
   });
@@ -106,7 +109,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     return next;
   }, [lengthSafe, type]);
-  const normalizedCode = useMemo(() => normalizeValue(code), [code, normalizeValue]);
+  const normalizedCode = normalizeValue(code);
   const updateValue = useCallback(nextValue => {
     const normalized = normalizeValue(nextValue);
     if (normalized === normalizedCode) return;
@@ -184,7 +187,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     };
   }, [disabled, focused, showCursor]);
-  const cells = useMemo(() => Array.from({
+  const cells = Array.from({
     length: lengthSafe
   }, (_, index) => {
     const char = normalizedCode?.[index];
@@ -196,30 +199,35 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       isFilled,
       showBlink
     };
-  }), [disabled, focused, lengthSafe, normalizedCode, showCursor]);
-  const gutterValue = useMemo(() => Math.max(0, parseNumberLike(gutter, 0) ?? 0), [gutter]);
+  });
+  const gutterValue = Math.max(0, 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 = 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 = useMemo(() => [styles.wrapper, {
+  };
+  const wrapperStyle = [styles.wrapper, {
     backgroundColor,
     borderRadius: radii.wrapper,
+    paddingHorizontal: spacing.none,
     opacity: disabled ? opacity.disabled : 1
   }, !hasGutter && {
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: colors.border
-  }], [backgroundColor, colors.border, disabled, hasGutter, opacity.disabled, radii.wrapper]);
-  const securityStyle = useMemo(() => [styles.security, {
+  }];
+  const securityStyle = [styles.security, {
     borderRadius: hasGutter ? 0 : radii.wrapper,
     backgroundColor
-  }], [backgroundColor, hasGutter, radii.wrapper]);
+  }];
   return /*#__PURE__*/React.createElement(View, {
     style: style
   }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
@@ -240,7 +248,8 @@ const PasswordInput = /*#__PURE__*/React.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
       });
@@ -285,8 +294,10 @@ const PasswordInput = /*#__PURE__*/React.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,
@@ -304,8 +315,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
 export default PasswordInput;
 const styles = StyleSheet.create({
   wrapper: {
-    alignSelf: 'stretch',
-    paddingHorizontal: 0
+    alignSelf: 'stretch'
   },
   security: {
     flexDirection: 'row',
@@ -319,16 +329,14 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   cellGutter: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 0
+    borderWidth: StyleSheet.hairlineWidth
   },
   cursor: {
     position: 'absolute',
     left: '50%'
   },
   hiddenInput: {
-    ...StyleSheet.absoluteFillObject,
-    opacity: 0
+    ...StyleSheet.absoluteFillObject
   },
   infoWrapper: {
     alignItems: 'center'

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

@@ -1,5 +1,5 @@
 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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Pressable, Text, View, Platform, StyleSheet } from 'react-native';
 import Loading from '../loading';
 import { withAlpha } from '../../utils/color';
@@ -15,7 +15,7 @@ export function usePickerValue({
   onChange,
   onConfirm
 }) {
-  const preparedColumns = useMemo(() => prepareColumns(columns), [columns]);
+  const preparedColumns = prepareColumns(columns);
   const isControlled = valueProp !== undefined;
   const [innerValue, setInnerValue] = useState(() => {
     const initial = toArrayValue(valueProp ?? defaultValue);
@@ -33,7 +33,7 @@ export function usePickerValue({
       commitValue(next);
     }
   }, [commitValue, isControlled, valueProp]);
-  const normalized = useMemo(() => normalizePicker(preparedColumns, innerValue), [preparedColumns, innerValue]);
+  const normalized = normalizePicker(preparedColumns, innerValue);
   useEffect(() => {
     if (isControlled) return;
     if (!shallowEqualArray(innerValue, normalized.values)) {
@@ -149,11 +149,11 @@ const PickerColumn = /*#__PURE__*/React.memo(props => {
     swipeDuration
   } = props;
   const restVisible = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const selectedIndex = useMemo(() => {
+  const selectedIndex = (() => {
     if (!options.length) return 0;
     const idx = options.findIndex(option => option.value === value);
     return findEnabledIndex(options, idx >= 0 ? idx : 0);
-  }, [options, value]);
+  })();
   const handleChange = useCallback(index => {
     const target = findEnabledIndex(options, index);
     const option = options[target];
@@ -245,7 +245,6 @@ const Picker = props => {
     emitConfirmOnAutoSelect = true,
     maskColor,
     maskType = tokens.defaults.maskType,
-    interactionMode = 'auto',
     onChange,
     onConfirm,
     onCancel,
@@ -349,7 +348,8 @@ const Picker = props => {
   }) : null;
   return /*#__PURE__*/React.createElement(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.createElement(View, {
@@ -377,13 +377,13 @@ const Picker = props => {
     color: effectiveMaskColor,
     maskType: maskType
   }))), loading && /*#__PURE__*/React.createElement(View, {
-    style: styles.loading
+    style: [styles.loading, {
+      backgroundColor: tokens.colors.loadingMask
+    }]
   }, /*#__PURE__*/React.createElement(Loading, null))), toolbarPosition === 'bottom' && toolbar);
 };
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 4
-  },
+  container: {},
   body: {
     position: 'relative',
     overflow: 'hidden'
@@ -437,8 +437,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.65)'
+    justifyContent: 'center'
   }
 });
 Picker.displayName = 'Picker';

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

@@ -1,5 +1,5 @@
 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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FlatList, Platform, View, StyleSheet, PanResponder } from 'react-native';
 import { clamp } from '../../utils';
 import { findEnabledIndex } from './utils';
@@ -258,8 +258,8 @@ const WheelPickerInner = ({
       }]
     }, content);
   }, [itemHeight, renderItem]);
-  const webIndex = useMemo(() => clamp(Math.round(-webOffset / itemHeight), 0, maxIndex), [itemHeight, maxIndex, webOffset]);
-  const webRender = useMemo(() => {
+  const webIndex = clamp(Math.round(-webOffset / itemHeight), 0, maxIndex);
+  const webRender = (() => {
     if (!isWeb || total <= 0) {
       return {
         items: null,
@@ -303,24 +303,24 @@ const WheelPickerInner = ({
         }
       })
     };
-  }, [data, isWeb, itemHeight, maxIndex, renderItem, total, visibleCount, webIndex, webVirtualEnabled, webVelocityBucket]);
-  const webTransform = useMemo(() => ({
+  })();
+  const webTransform = {
     transform: [{
       translateY: webOffset
     }]
-  }), [webOffset]);
-  const webTransitionStyle = 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 = useCallback(event => {
     const propertyName = event.nativeEvent?.propertyName ?? event.propertyName;
     if (propertyName && propertyName !== 'transform' && propertyName !== 'webkitTransform') return;
     finalizePendingChange();
   }, [finalizePendingChange]);
-  const panResponder = useMemo(() => PanResponder.create({
+  const panResponder = PanResponder.create({
     onStartShouldSetPanResponder: () => !readOnly,
     onMoveShouldSetPanResponder: () => !readOnly,
     onPanResponderGrant: () => {
@@ -365,7 +365,7 @@ const WheelPickerInner = ({
       notifyInteractEnd();
       setWebTransition(0);
     }
-  }), [data, itemHeight, maxIndex, minOffset, notifyInteractEnd, notifyInteractStart, readOnly, setVelocityBucket, startWebSnap, stopRaf, total]);
+  });
   if (isWeb) {
     return /*#__PURE__*/React.createElement(View, _extends({
       style: [styles.column, {

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

@@ -24,7 +24,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,
@@ -38,7 +39,8 @@ const createPickerTokens = foundations => {
       toolbarWeight: typography.weight.medium
     },
     radius: {
-      toolbar: radii.none
+      toolbar: radii.none,
+      container: radii.xs
     }
   };
 };

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

@@ -1,6 +1,7 @@
 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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Dimensions, Easing, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { SafeAreaView } from '../safe-area-view';
 import { addPopStateListener, nativeDriverEnabled } from '../../platform';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
 import { isRenderable, isText } from '../../utils/validate';
@@ -91,19 +92,15 @@ const renderHeaderNode = (node, options) => {
 };
 const renderWithSafeArea = (children, opts, onSafeAreaTopLayout) => {
   if (opts.safeArea) {
-    return /*#__PURE__*/React.createElement(SafeAreaView, {
-      style: styles.safeAreaView
-    }, children);
+    return /*#__PURE__*/React.createElement(SafeAreaView, null, children);
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, opts.safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: [styles.safeInsetTop, {
-      pointerEvents: 'none'
-    }],
-    onLayout: onSafeAreaTopLayout
+    edge: "top",
+    onLayout: onSafeAreaTopLayout,
+    pointerEvents: "none"
   }) : null, children, opts.safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: [styles.safeInsetBottom, {
-      pointerEvents: 'none'
-    }]
+    edge: "bottom",
+    pointerEvents: "none"
   }));
 };
 const hiddenContentStyle = {
@@ -156,70 +153,59 @@ export const Popup = props => {
   const shouldTranslate = placement !== 'center';
   const safeAreaInsetBottom = safeAreaInsetBottomProp ?? false;
   const tokens = usePopupTokens(tokensOverride);
-  const dynamicStyles = useMemo(() => {
-    const shadow = 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 = 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] = useState(visible);
   const [interactionVisible, setInteractionVisible] = useState(visible);
   const isOpen = visible || interactionVisible;
@@ -338,22 +324,18 @@ export const Popup = props => {
     onStartShouldSetResponder: stopPropagationResponder
   } : overlayRestProps;
   const config = placementConfig[placement];
-  const radiusStyle = useMemo(() => buildRadius(round, placement, tokens.radius.round), [placement, round, tokens.radius.round]);
+  const radiusStyle = buildRadius(round, placement, tokens.radius.round);
   const {
     animated: overlayOpacity
   } = usePresenceAnimation(visible, {
     duration
   });
-  const translateDistance = useMemo(() => {
-    if (placement === 'left' || placement === 'right') {
-      return Dimensions.get('window').width;
-    }
-    if (placement === 'top' || placement === 'bottom') {
-      return Dimensions.get('window').height;
-    }
-    return 0;
-  }, [placement]);
-  const translateTransform = useMemo(() => {
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = 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' ? {
@@ -367,9 +349,9 @@ export const Popup = props => {
         outputRange
       })
     };
-  }, [config.axis, direction, progress, shouldTranslate, translateDistance]);
-  const baseTransform = useMemo(() => translateTransform ? [translateTransform] : [], [translateTransform]);
-  const animatedContentStyle = useMemo(() => {
+  })();
+  const baseTransform = translateTransform ? [translateTransform] : [];
+  const animatedContentStyle = (() => {
     const extraTransform = contentAnimationStyle?.transform;
     const transform = Array.isArray(extraTransform) ? [...baseTransform, ...extraTransform] : baseTransform;
     const baseStyle = {
@@ -389,7 +371,7 @@ export const Popup = props => {
       };
     }
     return baseStyle;
-  }, [baseTransform, contentAnimationStyle, placement, progress]);
+  })();
   const handleContentLayout = useCallback(event => {
     overlayOnLayout?.(event);
   }, [overlayOnLayout]);
@@ -520,15 +502,6 @@ const styles = StyleSheet.create({
   },
   lockLayer: {
     ...StyleSheet.absoluteFillObject
-  },
-  safeAreaView: {
-    width: '100%'
-  },
-  safeInsetTop: {
-    width: '100%'
-  },
-  safeInsetBottom: {
-    width: '100%'
   }
 });
 Popup.displayName = 'Popup';

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

@@ -27,7 +27,8 @@ export 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/es/{portal → components/portal}/Portal.js

@@ -2,6 +2,7 @@ import { useContext, useLayoutEffect, useRef } from 'react';
 import { PortalContext } from './PortalContext';
 import { PortalHost, ensureGlobalPortalHost, portalManager as globalManager, portalStore } from './PortalHost';
 const usePortalManager = () => useContext(PortalContext) ?? globalManager;
+let hasWarnedNoHost = false;
 const PortalComponent = ({
   children
 }) => {
@@ -9,6 +10,10 @@ const PortalComponent = ({
   const keyRef = useRef(null);
   useLayoutEffect(() => {
     if (manager === globalManager) {
+      if (typeof document === 'undefined' && !portalStore.hasHosts() && !hasWarnedNoHost && typeof __DEV__ !== 'undefined' && __DEV__) {
+        hasWarnedNoHost = true;
+        console.warn('[Portal] 请在根节点挂载 <PortalHost> 以保证遮罩层正常工作');
+      }
       void ensureGlobalPortalHost();
     }
     const key = manager.mount(children ?? null);

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

@@ -63,8 +63,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 = () => {
@@ -166,7 +164,6 @@ const clearPortals = () => {
     markSnapshotDirty();
     syncCurrentHost();
   }
-  warnedNative = false;
   maybeTeardownAutoHost();
 };
 const globalManager = {
@@ -239,12 +236,6 @@ export 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();
@@ -264,11 +255,8 @@ export const ensureGlobalPortalHost = () => {
       fixed: true
     }));
     maybeTeardownAutoHost();
-  }).catch(error => {
+  }).catch(() => {
     teardownAutoHost();
-    if (typeof __DEV__ !== 'undefined' && __DEV__ || isJestEnv) {
-      console.warn('[Portal] 无法自动挂载 PortalHost:', error);
-    }
   }).finally(() => {
     hostPromise = null;
   });