react-native-system-ui 0.0.2 → 0.0.4

package/dist/cjs/{input → components/input}/Input.js

@@ -47,14 +47,14 @@ const InputComponent = /*#__PURE__*/_react().default.forwardRef((props, ref) =>
       return inputRef.current?.nativeElement ?? null;
     }
   }), []);
-  const resolvedInputAlign = (0, _react().useMemo)(() => align ?? inputAlignProp ?? tokens.defaults.inputAlign, [align, inputAlignProp, tokens.defaults.inputAlign]);
-  const resolvedClearTrigger = (0, _react().useMemo)(() => clearTriggerOverride ?? tokens.defaults.clearTrigger, [clearTriggerOverride, tokens.defaults.clearTrigger]);
-  const resolvedKeyboardType = (0, _react().useMemo)(() => keyboardTypeProp ?? (type === 'number' ? 'decimal-pad' : undefined), [keyboardTypeProp, type]);
-  const fieldStyle = (0, _react().useMemo)(() => [{
+  const resolvedInputAlign = align ?? inputAlignProp ?? tokens.defaults.inputAlign;
+  const resolvedClearTrigger = clearTriggerOverride ?? tokens.defaults.clearTrigger;
+  const resolvedKeyboardType = keyboardTypeProp ?? (type === 'number' ? 'decimal-pad' : undefined);
+  const fieldStyle = [{
     paddingHorizontal: tokens.spacing.paddingHorizontal,
     paddingVertical: tokens.spacing.paddingVertical,
     backgroundColor: tokens.colors.background
-  }, style], [style, tokens.colors.background, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
+  }, style];
   return /*#__PURE__*/_react().default.createElement(_field.default, _extends({
     ref: inputRef
   }, rest, {
@@ -81,17 +81,14 @@ const TextArea = exports.TextArea = /*#__PURE__*/_react().default.forwardRef((pr
     if (!(0, _validate.isFiniteNumber)(height) || height <= 0) return undefined;
     return Math.max(1, Math.round(height / lineHeight));
   }, [lineHeight]);
-  const resolvedAutoSize = (0, _react().useMemo)(() => {
-    if (!autoSize || (0, _validate.isBoolean)(autoSize)) {
-      return autoSize;
-    }
+  const resolvedAutoSize = !autoSize || (0, _validate.isBoolean)(autoSize) ? autoSize : (() => {
     const minRows = toRows(autoSize.minHeight);
     const maxRows = toRows(autoSize.maxHeight);
     return minRows || maxRows ? {
       minRows,
       maxRows
     } : undefined;
-  }, [autoSize, toRows]);
+  })();
   return /*#__PURE__*/_react().default.createElement(InputComponent, _extends({
     ref: ref
   }, rest, {

package/dist/cjs/{nav-bar → components/nav-bar}/NavBar.js

@@ -28,6 +28,7 @@ function _reactNativeSystemIcon() {
 var _hooks = require("../../hooks");
 var _hairline = require("../../utils/hairline");
 var _validate = require("../../utils/validate");
+var _safeAreaView = require("../safe-area-view");
 var _tokens = require("./tokens");
 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); }
@@ -185,7 +186,7 @@ const NavBarBase = props => {
   }, renderLeft(), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.center
   }, centerContent), renderRight());
-  const wrapped = safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
+  const wrapped = safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
     onLayout: handleLayout,
     style: {
       backgroundColor: background

package/dist/cjs/{notice-bar → 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 = (0, _react().useMemo)(() => {
+  const verticalItems = (() => {
     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 = (0, _react().useMemo)(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
+  const verticalTrackItems = hasVerticalLoop ? [...verticalItems, verticalItems[0]] : 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,29 +119,21 @@ const NoticeBar = props => {
       accessibilityRole: 'button'
     } : undefined
   });
-  const rightNode = (0, _react().useMemo)(() => {
-    if (mode === 'closeable') {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-        hitSlop: 8
-      }, closePress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
-        size: 16,
-        fill: resolvedColor,
-        color: resolvedColor
-      }));
-    }
-    if (mode === 'link') {
-      return /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
-        size: 16,
-        fill: resolvedColor,
-        color: resolvedColor
-      });
-    }
-    return rightIcon || null;
-  }, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
+  const rightNode = mode === 'closeable' ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    hitSlop: 8
+  }, closePress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
+    size: 16,
+    fill: resolvedColor,
+    color: resolvedColor
+  })) : mode === 'link' ? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
+    size: 16,
+    fill: resolvedColor,
+    color: resolvedColor
+  }) : rightIcon || null;
   const hasLeft = (0, _validate.isRenderable)(leftIcon);
   const hasRight = Boolean(rightNode);
-  const effectiveContainerWidth = (0, _react().useMemo)(() => Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0)), [containerWidth, hasLeft, hasRight, tokens.spacing.sidePadding]);
-  const shouldScroll = (0, _react().useMemo)(() => !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth), [contentWidth, effectiveContainerWidth, isVertical, scrollable, wrapable]);
+  const effectiveContainerWidth = Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0));
+  const shouldScroll = !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth);
   (0, _react().useEffect)(() => {
     if (!visible) {
       translateX.stopAnimation();
@@ -192,37 +184,24 @@ const NoticeBar = props => {
       verticalTranslateY.setValue(0);
       return;
     }
-    let cancelled = false;
-    let timeout = null;
-    let nextIndex = 1;
-    const schedule = () => {
-      timeout = setTimeout(() => {
-        _reactNative().Animated.timing(verticalTranslateY, {
-          toValue: -itemHeight * nextIndex,
-          duration: resolvedVerticalDuration,
-          easing: _reactNative().Easing.linear,
-          useNativeDriver: _platform.nativeDriverEnabled
-        }).start(({
-          finished
-        }) => {
-          if (cancelled || !finished) {
-            return;
-          }
-          nextIndex += 1;
-          if (nextIndex > verticalItems.length) {
-            verticalTranslateY.setValue(0);
-            nextIndex = 1;
-          }
-          schedule();
-        });
-      }, resolvedVerticalInterval);
-    };
-    schedule();
+    const steps = [];
+    for (let i = 1; i <= verticalItems.length; i += 1) {
+      steps.push(_reactNative().Animated.delay(resolvedVerticalInterval), _reactNative().Animated.timing(verticalTranslateY, {
+        toValue: -itemHeight * i,
+        duration: resolvedVerticalDuration,
+        easing: _reactNative().Easing.linear,
+        useNativeDriver: _platform.nativeDriverEnabled
+      }));
+    }
+    steps.push(_reactNative().Animated.timing(verticalTranslateY, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: _platform.nativeDriverEnabled
+    }));
+    const loopAnimation = _reactNative().Animated.loop(_reactNative().Animated.sequence(steps));
+    loopAnimation.start();
     return () => {
-      cancelled = true;
-      if (timeout) {
-        clearTimeout(timeout);
-      }
+      loopAnimation.stop();
       verticalTranslateY.stopAnimation();
     };
   }, [visible, hasVerticalLoop, itemHeight, resolvedVerticalDuration, resolvedVerticalInterval, verticalItems, verticalTranslateY]);
@@ -231,49 +210,44 @@ const NoticeBar = props => {
     if (!height) return;
     setItemHeight(prev => prev === 0 || Math.abs(prev - height) >= 0.5 ? height : prev);
   }, []);
-  const verticalContentNode = (0, _react().useMemo)(() => {
-    if (!isVertical) return null;
-    if (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;
+  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);
     }
-    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
-        }]
+    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
       }]
-    }, 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]);
+    }]
+  }, 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))));
   const handleContainerLayout = (0, _react().useCallback)(event => {
     setContainerWidthSafe(event.nativeEvent.layout.width);
   }, [setContainerWidthSafe]);

package/dist/cjs/{notify → components/notify}/Notify.js

@@ -23,7 +23,6 @@ var _hooks = require("../../hooks");
 var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
 var _overlay = require("../overlay");
-var _safeArea = require("../safe-area");
 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); }
@@ -35,6 +34,7 @@ const Notify = props => {
     type: typeProp,
     duration: durationProp,
     position: positionProp,
+    offset: offsetProp,
     color,
     background,
     zIndex,
@@ -49,24 +49,42 @@ const Notify = props => {
     onClosed
   } = props;
   const tokens = (0, _tokens.useNotifyTokens)(tokensOverride);
+  const paddingVertical = tokens.spacing.paddingVertical;
+  const safeAreaPadding = (0, _hooks.useSafeAreaPadding)({
+    top: paddingVertical,
+    bottom: paddingVertical
+  });
   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 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 variant = tokens.colors.variants[type];
   const resolvedBackground = background ?? variant.background;
   const resolvedTextColor = color ?? variant.text;
   const resolvedDuration = durationProp ?? tokens.defaults.duration;
-  const topInsetStyle = (0, _react().useMemo)(() => ({
-    backgroundColor: resolvedBackground
-  }), [resolvedBackground]);
+  const [barHeight, setBarHeight] = _react().default.useState(0);
+  const handleLayout = 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
+    appear: true,
+    canAnimate
   });
   const {
     zIndex: stackZIndex
@@ -75,9 +93,10 @@ const Notify = props => {
     type: 'notify',
     zIndex
   });
-  const prevVisibleRef = (0, _react().useRef)(visible);
-  const closingRef = (0, _react().useRef)(false);
-  (0, _react().useEffect)(() => {
+  const resolvedZIndex = stackZIndex ?? zIndex;
+  const prevVisibleRef = _react().default.useRef(visible);
+  const closingRef = _react().default.useRef(false);
+  _react().default.useEffect(() => {
     let openedTimer = null;
     if (visible) {
       closingRef.current = false;
@@ -93,13 +112,13 @@ const Notify = props => {
       if (openedTimer) clearTimeout(openedTimer);
     };
   }, [onOpen, onOpened, tokens.defaults.animationDuration, visible]);
-  (0, _react().useEffect)(() => {
+  _react().default.useEffect(() => {
     if (!mounted && closingRef.current) {
       closingRef.current = false;
       onClosed?.();
     }
   }, [mounted, onClosed]);
-  (0, _react().useEffect)(() => {
+  _react().default.useEffect(() => {
     let timer = null;
     if (visible && resolvedDuration > 0) {
       timer = setTimeout(() => {
@@ -110,11 +129,12 @@ const Notify = props => {
       if (timer) clearTimeout(timer);
     };
   }, [onClose, resolvedDuration, visible]);
+  const contentHeight = barHeight > 0 ? barHeight : tokens.sizing.minHeight;
   const interactive = closeOnClick || (0, _utils.isFunction)(onClick);
-  const handlePress = (0, _react().useCallback)(() => {
+  const handlePress = () => {
     onClick?.();
     if (closeOnClick) onClose?.();
-  }, [closeOnClick, onClick, onClose]);
+  };
   const accessibilityRole = interactive ? 'button' : 'alert';
   const press = (0, _hooks.useAriaPress)({
     disabled: !interactive,
@@ -124,39 +144,45 @@ const Notify = props => {
       accessibilityLiveRegion: 'assertive'
     }
   });
-  const [barHeight, setBarHeight] = (0, _react().useState)(0);
-  const handleLayout = (0, _react().useCallback)(event => {
-    const height = event.nativeEvent.layout.height;
-    if (!height) return;
-    setBarHeight(prev => prev === height ? prev : height);
-  }, []);
-  const translateDistance = Math.max(barHeight, tokens.sizing.minHeight);
-  const translateY = position === 'bottom' ? animated.interpolate({
+  const translateY = (0, _react().useMemo)(() => position === 'bottom' ? animated.interpolate({
     inputRange: [0, 1],
-    outputRange: [translateDistance, 0]
+    outputRange: [contentHeight, 0]
   }) : animated.interpolate({
     inputRange: [0, 1],
-    outputRange: [-translateDistance, 0]
-  });
+    outputRange: [-contentHeight, 0]
+  }), [animated, contentHeight, position]);
   const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
   if (!mounted) return null;
-  const resolvedZIndex = stackZIndex ?? zIndex;
-  const renderBar = topInsetNode => /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+  const bar = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.container, position === 'top' ? {
+      paddingTop: webTopPadding ?? (typeof safeTop === 'number' ? safeTop + offset : safeTop)
+    } : null, webBottomPadding !== undefined ? {
+      paddingBottom: webBottomPadding
+    } : null]
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      height: contentHeight,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
     testID: "rv-notify-bar",
     accessibilityRole: !interactive ? accessibilityRole : undefined,
     accessibilityLiveRegion: !interactive ? 'assertive' : undefined,
     onLayout: handleLayout,
     style: [tokens.layout.container, {
-      backgroundColor: resolvedBackground,
       opacity: animated,
       transform: [{
         translateY
       }]
     }, style]
-  }, topInsetNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      backgroundColor: resolvedBackground
+    }
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.content, {
       paddingHorizontal: tokens.spacing.paddingHorizontal,
-      paddingVertical: tokens.spacing.paddingVertical,
+      paddingVertical,
       minHeight: tokens.sizing.minHeight
     }]
   }, hasMessage ? (0, _utils.isText)(message) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
@@ -165,13 +191,14 @@ const Notify = props => {
       fontSize: tokens.typography.fontSize,
       lineHeight: tokens.typography.lineHeight
     }, textStyle]
-  }, message) : message : null), safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-    style: tokens.layout.safeArea
-  }));
-  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_safeArea.SafeAreaClipProvider, {
-    enabled: safeAreaInsetTop,
-    position: position,
-    topInsetStyle: topInsetStyle,
+  }, message) : message : null)))), position === 'bottom' ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: {
+      height: safeBottomInset
+    }
+  }) : null);
+  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    testID: "rv-notify",
+    pointerEvents: interactive ? 'box-none' : 'none',
     style: [tokens.layout.portal, position === 'bottom' ? {
       bottom: 0
     } : {
@@ -179,20 +206,9 @@ const Notify = props => {
     }, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
       zIndex: resolvedZIndex
     } : null]
-  }, ({
-    clipTop,
-    topInset
-  }) => {
-    const topInsetNode = clipTop ? null : safeAreaInsetTop ? /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-      style: tokens.layout.safeArea
-    }) : topInset;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      testID: "rv-notify",
-      pointerEvents: interactive ? 'box-none' : 'none'
-    }, interactive ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, press.interactionProps, {
-      disabled: !interactive
-    }), renderBar(topInsetNode)) : renderBar(topInsetNode));
-  }));
+  }, interactive ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, press.interactionProps, {
+    disabled: !interactive
+  }), bar) : bar));
 };
 exports.Notify = Notify;
 Notify.displayName = 'Notify';

package/dist/cjs/{notify → components/notify}/defaults.js

@@ -10,6 +10,6 @@ const notifyDefaults = exports.notifyDefaults = {
   duration: 3000,
   closeOnClick: false,
   animationDuration: 220,
-  safeAreaInsetTop: false,
-  safeAreaInsetBottom: false
+  safeAreaInsetTop: true,
+  safeAreaInsetBottom: true
 };

package/dist/cjs/{notify → components/notify}/imperative.js

@@ -26,7 +26,7 @@ const baseOptions = {
   position: 'top',
   duration: 3000,
   safeAreaInsetTop: true,
-  safeAreaInsetBottom: false
+  safeAreaInsetBottom: true
 };
 let currentOptions = {
   ...baseOptions
@@ -98,7 +98,7 @@ const NotifyPortal = ({
 const showNotify = (input, fallbackType = 'primary') => {
   const opts = mergeOptions(parseOptions(input), fallbackType);
   if (!allowMultiple) {
-    activeKeys.forEach(key => closeNotify(key));
+    Array.from(activeKeys).forEach(key => removeNotify(key));
   }
   const key = _Portal.default.add(null);
   notifyOptions.set(key, opts);

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

@@ -13,7 +13,7 @@ const createNotifyTokens = foundations => ({
     closeOnClick: false,
     animationDuration: 180,
     safeAreaInsetTop: true,
-    safeAreaInsetBottom: false
+    safeAreaInsetBottom: true
   },
   layout: {
     portal: {
@@ -61,11 +61,12 @@ const createNotifyTokens = foundations => ({
     lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier)
   },
   sizing: {
-    minHeight: 40
+    minHeight: 35
   },
   spacing: {
-    paddingVertical: foundations.spacing.sm,
-    paddingHorizontal: foundations.spacing.md
+    paddingVertical: foundations.spacing.ssm,
+    paddingHorizontal: foundations.spacing.md,
+    none: foundations.spacing.none
   }
 });
 exports.createNotifyTokens = createNotifyTokens;

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

@@ -24,6 +24,7 @@ var _createPlatformShadow = require("../../utils/createPlatformShadow");
 var _number = require("../../utils/number");
 var _loading = _interopRequireDefault(require("../loading"));
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _safeAreaView = require("../safe-area-view");
 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); }
@@ -86,11 +87,11 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
     trigger: 'onChange'
   });
   const value = mergedValue ?? '';
-  const maxlength = (0, _react().useMemo)(() => {
+  const maxlength = (() => {
     const parsed = (0, _number.parseNumberLike)(maxlengthProp, undefined);
     if (parsed === undefined || !Number.isFinite(parsed) || parsed < 0) return undefined;
     return Math.floor(parsed);
-  }, [maxlengthProp]);
+  })();
   const valueRef = (0, _react().useRef)(value);
   const maxlengthRef = (0, _react().useRef)(maxlength);
   valueRef.current = value;
@@ -128,7 +129,7 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
       keyboardRegistry.delete(closeSelf);
     };
   }, [visible, closeSelf]);
-  const keys = (0, _react().useMemo)(() => {
+  const keys = (() => {
     const shouldShuffle = randomKeyOrder && visible;
     const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
     const main = numbers.map(text => ({
@@ -179,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;
@@ -199,13 +200,13 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
     onInput?.(text);
     setMergedValue(`${currentValue}${text}`);
   }, [closeSelf, onDelete, onInput, setMergedValue]);
-  const wrapperShadow = (0, _react().useMemo)(() => (0, _createPlatformShadow.createPlatformShadow)({
+  const wrapperShadow = (0, _createPlatformShadow.createPlatformShadow)({
     color: shadow.color,
     opacity: shadow.opacity,
     radius: shadow.radius,
     offsetY: shadow.offsetY,
     elevation: shadow.elevation
-  }), [shadow.color, shadow.opacity, shadow.radius, shadow.offsetY, shadow.elevation]);
+  });
   const keyGap = spacing.keyGap;
   const renderKey = (0, _react().useCallback)((key, index, isClose = false, fullWidth = false, customHeight) => {
     const isPlaceholder = key.type === '' && !key.text;
@@ -300,10 +301,10 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
       animationRef.current = null;
     };
   }, [animated, visible, effectiveDuration]);
-  const translateY = (0, _react().useMemo)(() => animated.interpolate({
+  const translateY = animated.interpolate({
     inputRange: [0, 1],
     outputRange: [contentHeight || 320, 0]
-  }), [animated, contentHeight]);
+  });
   const handleLayout = (0, _react().useCallback)(e => {
     const {
       height
@@ -312,7 +313,7 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
   }, []);
   const hasHeader = !isCustomTheme && (title || closeButtonText);
   const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
-  const memo = (0, _react().useMemo)(() => {
+  const memo = (() => {
     const headerPaddingStyle = {
       paddingHorizontal: spacing.titlePadding
     };
@@ -393,7 +394,8 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
       style: [styles.header, headerPaddingStyle]
     }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: [styles.title, styles.titleOverlay, {
-        color: colors.title
+        color: colors.title,
+        fontSize: sizing.titleFontSize
       }],
       numberOfLines: 1
     }, title), resolvedCloseText ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
@@ -411,17 +413,15 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
     }, customMainNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: customSidebarStyle
     }, deleteNode, closeNode)) : defaultNode;
-    const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-      style: {
-        width: '100%'
-      }
+    const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.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;
   }
@@ -451,7 +451,6 @@ const styles = _reactNative().StyleSheet.create({
     position: 'relative'
   },
   title: {
-    fontSize: 16,
     fontWeight: '600'
   },
   titleOverlay: {