react-native-system-ui 0.0.2 → 0.0.4

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

@@ -1,10 +1,11 @@
 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, useState } from 'react';
-import { Pressable, SafeAreaView, Text, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
 import { ArrowLeft } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
 import { createHairlineBorderBottom } from '../../utils/hairline';
 import { isRenderable, isText } from '../../utils/validate';
+import { SafeAreaView } from '../safe-area-view';
 import { useNavBarTokens } from './tokens';
 const NavBarBase = props => {
   const {

package/dist/es/{notice-bar → components/notice-bar}/NoticeBar.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 { Animated, Easing, Pressable, StyleSheet, Text, View, Platform } from 'react-native';
 import { Arrow, Close } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
@@ -58,15 +58,15 @@ export const NoticeBar = props => {
   const resolvedSpeed = parseNumber(speed, 60);
   const resolvedVerticalInterval = Math.max(0, parseNumber(verticalInterval, 3000));
   const resolvedVerticalDuration = Math.max(0, parseNumber(verticalDuration, 300));
-  const verticalItems = useMemo(() => {
+  const verticalItems = (() => {
     if (!isVertical) return [];
     if (items && items.length) return items;
     const childArray = React.Children.toArray(children);
     if (childArray.length) return childArray;
     return text !== undefined ? [text] : [];
-  }, [children, isVertical, items, text]);
+  })();
   const hasVerticalLoop = isVertical && verticalItems.length > 1;
-  const verticalTrackItems = useMemo(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
+  const verticalTrackItems = hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems;
   const verticalTranslateY = useRef(new Animated.Value(0)).current;
   const [itemHeight, setItemHeight] = useState(0);
   const setContentWidthSafe = useCallback(next => {
@@ -94,29 +94,21 @@ export const NoticeBar = props => {
       accessibilityRole: 'button'
     } : undefined
   });
-  const rightNode = useMemo(() => {
-    if (mode === 'closeable') {
-      return /*#__PURE__*/React.createElement(Pressable, _extends({
-        hitSlop: 8
-      }, closePress.interactionProps), /*#__PURE__*/React.createElement(Close, {
-        size: 16,
-        fill: resolvedColor,
-        color: resolvedColor
-      }));
-    }
-    if (mode === 'link') {
-      return /*#__PURE__*/React.createElement(Arrow, {
-        size: 16,
-        fill: resolvedColor,
-        color: resolvedColor
-      });
-    }
-    return rightIcon || null;
-  }, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
+  const rightNode = mode === 'closeable' ? /*#__PURE__*/React.createElement(Pressable, _extends({
+    hitSlop: 8
+  }, closePress.interactionProps), /*#__PURE__*/React.createElement(Close, {
+    size: 16,
+    fill: resolvedColor,
+    color: resolvedColor
+  })) : mode === 'link' ? /*#__PURE__*/React.createElement(Arrow, {
+    size: 16,
+    fill: resolvedColor,
+    color: resolvedColor
+  }) : rightIcon || null;
   const hasLeft = isRenderable(leftIcon);
   const hasRight = Boolean(rightNode);
-  const effectiveContainerWidth = useMemo(() => Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0)), [containerWidth, hasLeft, hasRight, tokens.spacing.sidePadding]);
-  const shouldScroll = 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);
   useEffect(() => {
     if (!visible) {
       translateX.stopAnimation();
@@ -167,37 +159,24 @@ export const NoticeBar = props => {
       verticalTranslateY.setValue(0);
       return;
     }
-    let cancelled = false;
-    let timeout = null;
-    let nextIndex = 1;
-    const schedule = () => {
-      timeout = setTimeout(() => {
-        Animated.timing(verticalTranslateY, {
-          toValue: -itemHeight * nextIndex,
-          duration: resolvedVerticalDuration,
-          easing: Easing.linear,
-          useNativeDriver: 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(Animated.delay(resolvedVerticalInterval), Animated.timing(verticalTranslateY, {
+        toValue: -itemHeight * i,
+        duration: resolvedVerticalDuration,
+        easing: Easing.linear,
+        useNativeDriver: nativeDriverEnabled
+      }));
+    }
+    steps.push(Animated.timing(verticalTranslateY, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: nativeDriverEnabled
+    }));
+    const loopAnimation = Animated.loop(Animated.sequence(steps));
+    loopAnimation.start();
     return () => {
-      cancelled = true;
-      if (timeout) {
-        clearTimeout(timeout);
-      }
+      loopAnimation.stop();
       verticalTranslateY.stopAnimation();
     };
   }, [visible, hasVerticalLoop, itemHeight, resolvedVerticalDuration, resolvedVerticalInterval, verticalItems, verticalTranslateY]);
@@ -206,49 +185,44 @@ export const NoticeBar = props => {
     if (!height) return;
     setItemHeight(prev => prev === 0 || Math.abs(prev - height) >= 0.5 ? height : prev);
   }, []);
-  const verticalContentNode = useMemo(() => {
-    if (!isVertical) return null;
-    if (verticalTrackItems.length === 0) return null;
-    if (!hasVerticalLoop) {
-      const single = verticalTrackItems[0];
-      if (isText(single)) {
-        return /*#__PURE__*/React.createElement(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 (isText(single)) {
+      return /*#__PURE__*/React.createElement(Text, _extends({
+        onLayout: textOnLayout,
+        style: [styles.text, {
+          color: resolvedColor,
+          fontSize: tokens.typography.fontSize
+        }],
+        numberOfLines: 1,
+        ellipsizeMode: "tail"
+      }, restTextProps), single);
     }
-    return /*#__PURE__*/React.createElement(View, {
-      style: [styles.verticalViewport, itemHeight ? {
-        height: itemHeight
-      } : undefined],
-      pointerEvents: "none"
-    }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: [styles.verticalTrack, {
-        transform: [{
-          translateY: verticalTranslateY
-        }]
+    return single;
+  })() : /*#__PURE__*/React.createElement(View, {
+    style: [styles.verticalViewport, itemHeight ? {
+      height: itemHeight
+    } : undefined],
+    pointerEvents: "none"
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.verticalTrack, {
+      transform: [{
+        translateY: verticalTranslateY
       }]
-    }, verticalTrackItems.map((item, index) => /*#__PURE__*/React.createElement(View, {
-      key: index,
-      onLayout: index === 0 ? handleItemLayout : undefined,
-      style: styles.verticalItem
-    }, isText(item) ? /*#__PURE__*/React.createElement(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.createElement(View, {
+    key: index,
+    onLayout: index === 0 ? handleItemLayout : undefined,
+    style: styles.verticalItem
+  }, isText(item) ? /*#__PURE__*/React.createElement(Text, _extends({
+    onLayout: textOnLayout,
+    style: [styles.text, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize
+    }],
+    numberOfLines: 1,
+    ellipsizeMode: "tail"
+  }, restTextProps), item) : item))));
   const handleContainerLayout = useCallback(event => {
     setContainerWidthSafe(event.nativeEvent.layout.width);
   }, [setContainerWidthSafe]);

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

@@ -1,12 +1,11 @@
 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, Pressable, SafeAreaView, Text, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { Animated, Platform, Pressable, Text, View } from 'react-native';
 import { isFunction, isText } from '../../utils';
-import { useAriaPress } from '../../hooks';
+import { useAriaPress, useSafeAreaPadding } from '../../hooks';
 import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
 import Portal from '../portal/Portal';
 import { useOverlayStack } from '../overlay';
-import { SafeAreaClipProvider } from '../safe-area';
 import { useNotifyTokens } from './tokens';
 export const Notify = props => {
   const {
@@ -15,6 +14,7 @@ export const Notify = props => {
     type: typeProp,
     duration: durationProp,
     position: positionProp,
+    offset: offsetProp,
     color,
     background,
     zIndex,
@@ -29,24 +29,42 @@ export const Notify = props => {
     onClosed
   } = props;
   const tokens = useNotifyTokens(tokensOverride);
+  const paddingVertical = tokens.spacing.paddingVertical;
+  const safeAreaPadding = 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 = Platform.OS === 'web' && position === 'top' ? typeof safeTop === 'string' ? `calc(${safeTop} + ${offset}px)` : safeTop + offset : undefined;
+  const webBottomPadding = 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 = useMemo(() => ({
-    backgroundColor: resolvedBackground
-  }), [resolvedBackground]);
+  const [barHeight, setBarHeight] = React.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
   } = usePresenceAnimation(visible, {
     duration: tokens.defaults.animationDuration,
-    appear: true
+    appear: true,
+    canAnimate
   });
   const {
     zIndex: stackZIndex
@@ -55,9 +73,10 @@ export const Notify = props => {
     type: 'notify',
     zIndex
   });
-  const prevVisibleRef = useRef(visible);
-  const closingRef = useRef(false);
-  useEffect(() => {
+  const resolvedZIndex = stackZIndex ?? zIndex;
+  const prevVisibleRef = React.useRef(visible);
+  const closingRef = React.useRef(false);
+  React.useEffect(() => {
     let openedTimer = null;
     if (visible) {
       closingRef.current = false;
@@ -73,13 +92,13 @@ export const Notify = props => {
       if (openedTimer) clearTimeout(openedTimer);
     };
   }, [onOpen, onOpened, tokens.defaults.animationDuration, visible]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (!mounted && closingRef.current) {
       closingRef.current = false;
       onClosed?.();
     }
   }, [mounted, onClosed]);
-  useEffect(() => {
+  React.useEffect(() => {
     let timer = null;
     if (visible && resolvedDuration > 0) {
       timer = setTimeout(() => {
@@ -90,11 +109,12 @@ export const Notify = props => {
       if (timer) clearTimeout(timer);
     };
   }, [onClose, resolvedDuration, visible]);
+  const contentHeight = barHeight > 0 ? barHeight : tokens.sizing.minHeight;
   const interactive = closeOnClick || isFunction(onClick);
-  const handlePress = useCallback(() => {
+  const handlePress = () => {
     onClick?.();
     if (closeOnClick) onClose?.();
-  }, [closeOnClick, onClick, onClose]);
+  };
   const accessibilityRole = interactive ? 'button' : 'alert';
   const press = useAriaPress({
     disabled: !interactive,
@@ -104,39 +124,45 @@ export const Notify = props => {
       accessibilityLiveRegion: 'assertive'
     }
   });
-  const [barHeight, setBarHeight] = useState(0);
-  const handleLayout = 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 = 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.createElement(Animated.View, {
+  const bar = /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.container, position === 'top' ? {
+      paddingTop: webTopPadding ?? (typeof safeTop === 'number' ? safeTop + offset : safeTop)
+    } : null, webBottomPadding !== undefined ? {
+      paddingBottom: webBottomPadding
+    } : null]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: contentHeight,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(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.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      backgroundColor: resolvedBackground
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.content, {
       paddingHorizontal: tokens.spacing.paddingHorizontal,
-      paddingVertical: tokens.spacing.paddingVertical,
+      paddingVertical,
       minHeight: tokens.sizing.minHeight
     }]
   }, hasMessage ? isText(message) ? /*#__PURE__*/React.createElement(Text, {
@@ -145,13 +171,14 @@ export const Notify = props => {
       fontSize: tokens.typography.fontSize,
       lineHeight: tokens.typography.lineHeight
     }, textStyle]
-  }, message) : message : null), safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: tokens.layout.safeArea
-  }));
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(SafeAreaClipProvider, {
-    enabled: safeAreaInsetTop,
-    position: position,
-    topInsetStyle: topInsetStyle,
+  }, message) : message : null)))), position === 'bottom' ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: safeBottomInset
+    }
+  }) : null);
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+    testID: "rv-notify",
+    pointerEvents: interactive ? 'box-none' : 'none',
     style: [tokens.layout.portal, position === 'bottom' ? {
       bottom: 0
     } : {
@@ -159,20 +186,9 @@ export const Notify = props => {
     }, resolvedZIndex !== undefined && resolvedZIndex !== null ? {
       zIndex: resolvedZIndex
     } : null]
-  }, ({
-    clipTop,
-    topInset
-  }) => {
-    const topInsetNode = clipTop ? null : safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
-      style: tokens.layout.safeArea
-    }) : topInset;
-    return /*#__PURE__*/React.createElement(View, {
-      testID: "rv-notify",
-      pointerEvents: interactive ? 'box-none' : 'none'
-    }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, press.interactionProps, {
-      disabled: !interactive
-    }), renderBar(topInsetNode)) : renderBar(topInsetNode));
-  }));
+  }, interactive ? /*#__PURE__*/React.createElement(Pressable, _extends({}, press.interactionProps, {
+    disabled: !interactive
+  }), bar) : bar));
 };
 Notify.displayName = 'Notify';
 export default Notify;

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

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

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

@@ -12,7 +12,7 @@ const baseOptions = {
   position: 'top',
   duration: 3000,
   safeAreaInsetTop: true,
-  safeAreaInsetBottom: false
+  safeAreaInsetBottom: true
 };
 let currentOptions = {
   ...baseOptions
@@ -84,7 +84,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.add(null);
   notifyOptions.set(key, opts);

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

@@ -7,7 +7,7 @@ export const createNotifyTokens = foundations => ({
     closeOnClick: false,
     animationDuration: 180,
     safeAreaInsetTop: true,
-    safeAreaInsetBottom: false
+    safeAreaInsetBottom: true
   },
   layout: {
     portal: {
@@ -55,11 +55,12 @@ export 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
   }
 });
 export const useNotifyTokens = createComponentTokensHook('notify', createNotifyTokens);

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

@@ -1,12 +1,13 @@
 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, Easing, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { nativeDriverEnabled } from '../../platform';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
 import { parseNumberLike } from '../../utils/number';
 import Loading from '../loading';
 import Portal from '../portal/Portal';
+import { SafeAreaView } from '../safe-area-view';
 import { useNumberKeyboardTokens } from './tokens';
 const keyboardRegistry = new Set();
 const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -66,11 +67,11 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     trigger: 'onChange'
   });
   const value = mergedValue ?? '';
-  const maxlength = useMemo(() => {
+  const maxlength = (() => {
     const parsed = parseNumberLike(maxlengthProp, undefined);
     if (parsed === undefined || !Number.isFinite(parsed) || parsed < 0) return undefined;
     return Math.floor(parsed);
-  }, [maxlengthProp]);
+  })();
   const valueRef = useRef(value);
   const maxlengthRef = useRef(maxlength);
   valueRef.current = value;
@@ -108,7 +109,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       keyboardRegistry.delete(closeSelf);
     };
   }, [visible, closeSelf]);
-  const keys = useMemo(() => {
+  const keys = (() => {
     const shouldShuffle = randomKeyOrder && visible;
     const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
     const main = numbers.map(text => ({
@@ -159,7 +160,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       text: showDeleteKey ? undefined : ''
     });
     return main;
-  }, [extraKey, isCustomTheme, randomKeyOrder, showDeleteKey, visible]);
+  })();
   const handleInput = useCallback((text, type) => {
     if (type === 'delete') {
       const currentValue = valueRef.current;
@@ -179,13 +180,13 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     onInput?.(text);
     setMergedValue(`${currentValue}${text}`);
   }, [closeSelf, onDelete, onInput, setMergedValue]);
-  const wrapperShadow = useMemo(() => createPlatformShadow({
+  const wrapperShadow = 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 = useCallback((key, index, isClose = false, fullWidth = false, customHeight) => {
     const isPlaceholder = key.type === '' && !key.text;
@@ -280,10 +281,10 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       animationRef.current = null;
     };
   }, [animated, visible, effectiveDuration]);
-  const translateY = useMemo(() => animated.interpolate({
+  const translateY = animated.interpolate({
     inputRange: [0, 1],
     outputRange: [contentHeight || 320, 0]
-  }), [animated, contentHeight]);
+  });
   const handleLayout = useCallback(e => {
     const {
       height
@@ -292,7 +293,7 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
   }, []);
   const hasHeader = !isCustomTheme && (title || closeButtonText);
   const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
-  const memo = useMemo(() => {
+  const memo = (() => {
     const headerPaddingStyle = {
       paddingHorizontal: spacing.titlePadding
     };
@@ -373,7 +374,8 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       style: [styles.header, headerPaddingStyle]
     }, /*#__PURE__*/React.createElement(Text, {
       style: [styles.title, styles.titleOverlay, {
-        color: colors.title
+        color: colors.title,
+        fontSize: sizing.titleFontSize
       }],
       numberOfLines: 1
     }, title), resolvedCloseText ? /*#__PURE__*/React.createElement(Pressable, {
@@ -392,16 +394,14 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
       style: customSidebarStyle
     }, deleteNode, closeNode)) : defaultNode;
     const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-      style: {
-        width: '100%'
-      }
+      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;
   }
@@ -431,7 +431,6 @@ const styles = StyleSheet.create({
     position: 'relative'
   },
   title: {
-    fontSize: 16,
     fontWeight: '600'
   },
   titleOverlay: {

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

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

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { overlayStackStore } from './OverlayStackStore';
 const useOverlayEntries = () => useSyncExternalStore(overlayStackStore.subscribe, overlayStackStore.getSnapshot, overlayStackStore.getSnapshot);
 export const useOverlayStack = ({
@@ -7,7 +7,11 @@ export const useOverlayStack = ({
 }) => {
   const entries = useOverlayEntries();
   const entryRef = useRef(null);
-  const stableOptions = useMemo(() => options, [options.onClose, options.closeOnBack, options.lockScroll, options.zIndex, options.type, options.meta]);
+  const optionsRef = 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;
   useEffect(() => {
     if (!visible) {
       if (entryRef.current) {