react-native-system-ui 1.0.0 → 1.0.2

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

@@ -13,15 +13,17 @@ import { useLocale } from '../config-provider/useLocale';
 import { SafeAreaView } from '../safe-area-view';
 import { useNumberKeyboardTokens } from './tokens';
 const registry = new Set();
-const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
-const ZERO_KEY = '0';
+const NUM_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+const ZERO = '0';
+const RE_NUM_LIKE = /^\d+$|^\.$|^x$/i;
 const shuffle = list => {
-  const newList = [...list];
-  for (let i = newList.length - 1; i > 0; i -= 1) {
+  const n = [...list];
+  for (let i = n.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1));
-    [newList[i], newList[j]] = [newList[j], newList[i]];
+    [n[i], n[j]] = [n[j], n[i]];
   }
-  return newList;
+  ;
+  return n;
 };
 const NumberKeyboard = /*#__PURE__*/React.memo(props => {
   const {
@@ -42,8 +44,8 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     onBlur,
     onHide,
     onShow,
-    value: _value,
-    defaultValue: _defaultValue,
+    value: _v,
+    defaultValue: _dv,
     maxlength: maxlengthProp,
     blurOnClose = true,
     safeAreaInsetBottom = true,
@@ -63,7 +65,8 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     radii,
     shadow,
     sizing,
-    spacing
+    spacing,
+    typography
   } = tokens;
   const [value, setValue] = useControllableValue(props, {
     defaultValue: '',
@@ -71,37 +74,39 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const currentValue = value ?? '';
-  const parsedMaxLength = parseNumberLike(maxlengthProp, undefined);
-  const maxLength = parsedMaxLength !== undefined && Number.isFinite(parsedMaxLength) && parsedMaxLength >= 0 ? Math.floor(parsedMaxLength) : undefined;
-  const valueRef = useRef(currentValue),
-    maxLengthRef = useRef(maxLength),
-    onCloseRef = useRef(onClose),
-    onBlurRef = useRef(onBlur),
-    onShowRef = useRef(onShow),
-    onHideRef = useRef(onHide),
-    onDeleteRef = useRef(onDelete),
-    onInputRef = useRef(onInput);
-  valueRef.current = currentValue;
-  maxLengthRef.current = maxLength;
+  const curVal = value ?? '';
+  const maxLen = (() => {
+    const p = parseNumberLike(maxlengthProp, undefined);
+    return p != null && Number.isFinite(p) && p >= 0 ? Math.floor(p) : undefined;
+  })();
+  const valRef = useRef(curVal);
+  const maxRef = useRef(maxLen);
+  const onCloseRef = useRef(onClose);
+  const onBlurRef = useRef(onBlur);
+  const onShowRef = useRef(onShow);
+  const onHideRef = useRef(onHide);
+  const onDelRef = useRef(onDelete);
+  const onInpRef = useRef(onInput);
+  valRef.current = curVal;
+  maxRef.current = maxLen;
   onCloseRef.current = onClose;
   onBlurRef.current = onBlur;
   onShowRef.current = onShow;
   onHideRef.current = onHide;
-  onDeleteRef.current = onDelete;
-  onInputRef.current = onInput;
+  onDelRef.current = onDelete;
+  onInpRef.current = onInput;
   const isCustom = theme === 'custom';
-  const defaultCloseText = locale?.vanNumberKeyboard?.close ?? 'Done';
-  const closeText = isCustom ? closeButtonText ?? defaultCloseText : closeButtonText;
+  const defClose = locale?.vanNumberKeyboard?.close ?? 'Done';
+  const closeTxt = isCustom ? closeButtonText ?? defClose : closeButtonText;
   const handleClose = useCallback(() => {
     onCloseRef.current?.();
     if (blurOnClose) onBlurRef.current?.();
   }, [blurOnClose]);
-  const prevVisible = useRef(visible);
+  const prevVis = useRef(visible);
   useEffect(() => {
-    if (visible && !prevVisible.current) onShowRef.current?.();
-    if (!visible && prevVisible.current) onHideRef.current?.();
-    prevVisible.current = visible;
+    if (visible && !prevVis.current) onShowRef.current?.();
+    if (!visible && prevVis.current) onHideRef.current?.();
+    prevVis.current = visible;
   }, [visible]);
   useEffect(() => {
     if (visible) {
@@ -115,91 +120,94 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
     };
   }, [visible, handleClose]);
   const keys = useMemo(() => {
-    const shouldShuffle = randomKeyOrder && visible;
-    const numberKeys = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
-    const matrix = numberKeys.map(text => ({
-      text,
+    const sh = randomKeyOrder && visible;
+    const nK = sh ? shuffle(NUM_KEYS) : NUM_KEYS;
+    const mat = nK.map(t => ({
+      text: t,
       type: ''
     }));
     if (isCustom) {
-      const extraKeys = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
-      if (extraKeys.length === 1) matrix.push({
-        text: ZERO_KEY,
+      const e = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
+      if (e.length === 1) mat.push({
+        text: ZERO,
         type: '',
         wider: true
       }, {
-        text: extraKeys[0],
+        text: e[0],
         type: 'extra'
-      });else if (extraKeys.length >= 2) matrix.push({
-        text: extraKeys[0],
+      });else if (e.length >= 2) mat.push({
+        text: e[0],
         type: 'extra'
       }, {
-        text: ZERO_KEY,
+        text: ZERO,
         type: ''
       }, {
-        text: extraKeys[1],
+        text: e[1],
         type: 'extra'
-      });else matrix.push({
-        text: ZERO_KEY,
+      });else mat.push({
+        text: ZERO,
         type: ''
       });
-      return matrix;
+      return mat;
     }
-    const nextExtra = Array.isArray(extraKey) ? extraKey[0] ?? '' : extraKey ?? '';
-    matrix.push({
-      text: nextExtra,
+    const nE = Array.isArray(extraKey) ? extraKey[0] ?? '' : extraKey ?? '';
+    mat.push({
+      text: nE,
       type: 'extra'
-    });
-    matrix.push({
-      text: ZERO_KEY,
+    }, {
+      text: ZERO,
       type: ''
-    });
-    matrix.push({
+    }, {
       type: showDeleteKey ? 'delete' : '',
       text: showDeleteKey ? undefined : ''
     });
-    return matrix;
+    return mat;
   }, [extraKey, isCustom, randomKeyOrder, showDeleteKey, visible]);
   const handleInput = useCallback((text, type) => {
     if (type === 'delete') {
-      const currentValue = valueRef.current;
-      if (!currentValue) return;
-      onDeleteRef.current?.();
-      setValue(currentValue.slice(0, -1));
+      const c = valRef.current;
+      if (!c) return;
+      onDelRef.current?.();
+      setValue(c.slice(0, -1));
       return;
     }
     if (type === 'close' || type === 'extra' && !text) {
       handleClose();
       return;
     }
+    ;
     if (!text) return;
-    const currentValue = valueRef.current,
-      currentMaxLength = maxLengthRef.current;
-    if (currentMaxLength !== undefined && currentValue.length >= currentMaxLength) return;
-    onInputRef.current?.(text);
-    setValue(`${currentValue}${text}`);
+    const c = valRef.current;
+    const m = maxRef.current;
+    if (m !== undefined && c.length >= m) return;
+    onInpRef.current?.(text);
+    setValue(`${c}${text}`);
   }, [handleClose, setValue]);
-  const windowShadow = useMemo(() => createPlatformShadow(shadow), [shadow.color, shadow.elevation, shadow.offsetY, shadow.opacity, shadow.radius]);
-  const renderKey = useCallback((key, index, isCustomTheme = false, fullWidth = false, customHeight) => {
-    const isPlaceholder = key.type === '' && !key.text;
-    const disabled = isPlaceholder || isCustomTheme && closeButtonLoading;
-    const onPress = disabled ? undefined : () => handleInput(key.text, key.type);
-    const background = isCustomTheme ? colors.closeBackground : colors.keyBackground;
-    const activeBackground = isCustomTheme ? colors.closeActiveBackground : colors.keyActiveBackground;
-    const inactiveTextColor = isCustomTheme ? colors.closeText : colors.keyText;
-    const pressedTextColor = isCustomTheme ? colors.closeText : colors.keyTextActive;
-    const keyHeight = customHeight ?? (isCustomTheme ? sizing.closeHeight : sizing.keyHeight);
-    const auxFontSize = Math.round(sizing.fontSize * 0.64);
-    const textFontSize = key.type === 'close' || key.type === 'extra' || key.type === 'delete' ? auxFontSize : sizing.fontSize;
-    const keyText = key.text ?? '';
-    const contentNode = key.type === 'delete' ? deleteRender?.() ?? deleteButtonText ?? '⌫' : key.type === 'extra' ? extraKeyRender ? extraKeyRender(keyText) : keyText || '⌨︎' : key.type === 'close' ? closeText ?? defaultCloseText : numberKeyRender ? numberKeyRender(keyText) : keyText;
+  const winShadow = useMemo(() => createPlatformShadow(shadow), [shadow.color, shadow.elevation, shadow.offsetY, shadow.opacity, shadow.radius]);
+  const renderKey = useCallback((key, index, isClose = false, fullW = false, customH) => {
+    const kt = key.type;
+    const isPh = kt === '' && !key.text;
+    const dis = isPh || isClose && closeButtonLoading;
+    const onP = dis ? undefined : () => handleInput(key.text, kt);
+    const bg = isClose ? colors.closeBackground : colors.keyBackground;
+    const aBg = isClose ? colors.closeActiveBackground : colors.keyActiveBackground;
+    const tInact = isClose ? colors.closeText : colors.keyText;
+    const tPress = isClose ? colors.closeText : colors.keyTextActive;
+    const kH = customH ?? (isClose ? sizing.closeHeight : sizing.keyHeight);
+    const auxFs = sizing.auxFontSize ?? Math.round(sizing.fontSize * 0.64);
+    const defIconFs = sizing.defaultIconFontSize ?? sizing.fontSize;
+    const kTxt = key.text ?? '';
+    const cnt = kt === 'delete' ? deleteRender?.() ?? deleteButtonText ?? '⌫' : kt === 'extra' ? extraKeyRender ? extraKeyRender(kTxt) : kTxt || '⌨︎' : kt === 'close' ? closeTxt ?? defClose : numberKeyRender ? numberKeyRender(kTxt) : kTxt;
+    const isDefIcon = kt === 'delete' && deleteRender == null && deleteButtonText == null || kt === 'extra' && !extraKeyRender && !kTxt;
+    const isNumLike = kt === 'extra' && typeof cnt === 'string' && RE_NUM_LIKE.test(cnt);
+    const tFs = kt === '' ? sizing.fontSize : isDefIcon ? defIconFs : isNumLike ? sizing.fontSize : auxFs;
     return /*#__PURE__*/React.createElement(Pressable, {
-      key: `${key.type}-${index}-${key.text ?? index}`,
-      onPress: onPress,
-      disabled: disabled,
+      key: `${kt}-${index}-${key.text ?? index}`,
+      onPress: onP,
+      disabled: dis,
       style: [{
-        opacity: isPlaceholder ? 1 : disabled ? 0.6 : 1
-      }, fullWidth ? {
+        opacity: isPh ? 1 : dis ? 0.6 : 1
+      }, fullW ? {
         width: '100%',
         flexBasis: 'auto',
         flexGrow: 0,
@@ -210,184 +218,192 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
         flexShrink: 1,
         minWidth: 0
       }],
-      accessible: !isPlaceholder,
-      accessibilityRole: isPlaceholder ? undefined : 'button',
-      accessibilityLabel: isPlaceholder ? undefined : key.type === 'delete' ? 'delete' : key.type === 'close' ? closeText ?? 'close' : key.type === 'extra' ? keyText || 'collapse' : keyText,
-      accessibilityState: isPlaceholder ? undefined : {
-        disabled: !!disabled
+      accessible: !isPh,
+      accessibilityRole: isPh ? undefined : 'button',
+      accessibilityLabel: isPh ? undefined : kt === 'delete' ? 'delete' : kt === 'close' ? closeTxt ?? 'close' : kt === 'extra' ? kTxt || 'collapse' : kTxt,
+      accessibilityState: isPh ? undefined : {
+        disabled: !!dis
       },
-      accessibilityElementsHidden: isPlaceholder,
-      importantForAccessibility: isPlaceholder ? 'no-hide-descendants' : undefined
+      accessibilityElementsHidden: isPh,
+      importantForAccessibility: isPh ? 'no-hide-descendants' : undefined
     }, ({
       pressed
     }) => {
-      const isPressed = pressed && !disabled;
-      const keyBackground = disabled ? colors.keyBackground : isPressed ? activeBackground : background;
-      const textColor = isPressed ? pressedTextColor : inactiveTextColor;
+      const isP = pressed && !dis;
+      const kBg = dis ? colors.keyBackground : isP ? aBg : bg;
+      const tClr = isP ? tPress : tInact;
       return /*#__PURE__*/React.createElement(View, {
         style: [S.k, {
-          height: keyHeight,
-          backgroundColor: keyBackground,
+          height: kH,
+          backgroundColor: kBg,
           borderRadius: radii.key
         }]
-      }, isCustomTheme && closeButtonLoading ? /*#__PURE__*/React.createElement(Loading, {
+      }, isClose && closeButtonLoading ? /*#__PURE__*/React.createElement(Loading, {
         size: 18,
-        color: textColor
-      }) : isRenderable(contentNode) ? renderTextOrNode(contentNode, [S.kT, {
-        color: textColor,
-        fontSize: textFontSize
+        color: tClr
+      }) : isRenderable(cnt) ? renderTextOrNode(cnt, [S.kTxt, {
+        color: tClr,
+        fontFamily: typography.fontFamily,
+        fontSize: tFs
       }]) : null);
     });
-  }, [closeButtonLoading, colors.closeActiveBackground, colors.closeBackground, colors.closeText, colors.keyActiveBackground, colors.keyBackground, colors.keyText, colors.keyTextActive, deleteButtonText, deleteRender, extraKeyRender, handleInput, numberKeyRender, radii.key, sizing.closeHeight, sizing.fontSize, sizing.keyHeight, closeText]);
-  const animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
-  const animationRef = useRef(null);
-  const animationSequence = useRef(0);
-  const [contentHeight, setContentHeight] = useState(0);
+  }, [closeButtonLoading, colors.closeActiveBackground, colors.closeBackground, colors.closeText, colors.keyActiveBackground, colors.keyBackground, colors.keyText, colors.keyTextActive, defClose, deleteButtonText, deleteRender, extraKeyRender, handleInput, numberKeyRender, radii.key, sizing.auxFontSize, sizing.closeHeight, sizing.defaultIconFontSize, sizing.fontSize, sizing.keyHeight, typography.fontFamily, closeTxt]);
+  const animVal = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const animRef = useRef(null);
+  const seqRef = useRef(0);
+  const [contentH, setContentH] = useState(0);
   const [shouldRender, setShouldRender] = useState(visible);
-  const effectiveDuration = reducedMotion ? 0 : transition === false ? 0 : transitionDuration;
+  const effD = reducedMotion ? 0 : transition === false ? 0 : transitionDuration;
   useEffect(() => {
-    animationSequence.current += 1;
-    const currentSequence = animationSequence.current;
+    seqRef.current += 1;
+    const seq = seqRef.current;
     if (visible) setShouldRender(true);
-    animationRef.current?.stop();
-    const animation = Animated.timing(animatedValue, {
+    animRef.current?.stop();
+    const a = Animated.timing(animVal, {
       toValue: visible ? 1 : 0,
-      duration: effectiveDuration,
+      duration: effD,
       useNativeDriver: nativeDriverEnabled,
       easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
       isInteraction: false
     });
-    animationRef.current = animation;
-    animation.start(({
+    animRef.current = a;
+    a.start(({
       finished
     }) => {
-      if (finished && !visible && animationSequence.current === currentSequence) setShouldRender(false);
+      if (finished && !visible && seqRef.current === seq) setShouldRender(false);
     });
     return () => {
-      animationRef.current?.stop();
-      animationRef.current = null;
+      animRef.current?.stop();
+      animRef.current = null;
     };
-  }, [animatedValue, visible, effectiveDuration]);
-  const translateY = animatedValue.interpolate({
+  }, [animVal, visible, effD]);
+  const translateY = animVal.interpolate({
     inputRange: [0, 1],
-    outputRange: [contentHeight || 320, 0]
+    outputRange: [contentH || 320, 0]
   });
-  const handleLayout = useCallback(e => {
+  const onLayout = useCallback(e => {
     const {
       height
     } = e.nativeEvent.layout;
-    setContentHeight(prev => Math.abs(height - prev) > 0.5 ? height : prev);
+    setContentH(prev => Math.abs(height - prev) > 0.5 ? height : prev);
   }, []);
-  const hasHeader = !isCustom && (title || closeButtonText);
-  const doubleKeyHeight = sizing.keyHeight * 2 + spacing.keyGap;
+  const hasHdr = !isCustom && (title || closeButtonText);
+  const dblH = sizing.keyHeight * 2 + spacing.keyGap;
   const memoized = useMemo(() => {
-    const headerPaddingStyle = {
-      paddingHorizontal: spacing.titlePadding
+    const kg = spacing.keyGap;
+    const ph = spacing.paddingHorizontal;
+    const tp = spacing.titlePadding;
+    const hP = {
+      paddingHorizontal: tp
     };
-    const defaultContainerStyle = [S.dR, {
+    const dC = [S.dRow, {
       flexDirection: 'column',
       flexWrap: 'nowrap',
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingTop: spacing.keyGap,
-      paddingBottom: spacing.keyGap,
-      gap: spacing.keyGap
+      paddingHorizontal: ph,
+      paddingTop: kg,
+      paddingBottom: kg,
+      gap: kg
     }];
-    const defaultLineStyle = {
+    const dL = {
       flexDirection: 'row',
-      gap: spacing.keyGap
+      gap: kg
     };
-    const customRowStyle = [S.cR, {
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingTop: hasHeader ? 0 : spacing.keyGap,
-      paddingBottom: spacing.keyGap,
+    const cR = [S.cRow, {
+      paddingHorizontal: ph,
+      paddingTop: hasHdr ? 0 : kg,
+      paddingBottom: kg,
       width: '100%'
     }];
-    const customMatrixStyle = [S.cM, {
+    const cM = [S.cMat, {
       flexDirection: 'column',
       flexWrap: 'nowrap',
-      gap: spacing.keyGap
+      gap: kg
     }];
-    const customSideStyle = [S.cS, {
-      gap: spacing.keyGap,
-      marginLeft: spacing.keyGap
+    const cS = [S.cSide, {
+      gap: kg,
+      marginLeft: kg
     }];
-    const entries = keys.map((key, i) => ({
-      key,
+    const ents = keys.map((k, i) => ({
+      key: k,
       index: i
     }));
-    const defaultLines = [];
-    for (let i = 0; i < entries.length; i += 3) defaultLines.push(entries.slice(i, i + 3));
-    const defaultNode = /*#__PURE__*/React.createElement(View, {
-      style: defaultContainerStyle
-    }, defaultLines.map((line, li) => /*#__PURE__*/React.createElement(View, {
+    const dLns = [];
+    for (let i = 0; i < ents.length; i += 3) dLns.push(ents.slice(i, i + 3));
+    const dN = /*#__PURE__*/React.createElement(View, {
+      style: dC
+    }, dLns.map((line, li) => /*#__PURE__*/React.createElement(View, {
       key: `l-${li}`,
-      style: defaultLineStyle
-    }, line.map(item => renderKey(item.key, item.index)))));
-    const customLines = [];
-    for (let i = 0; i < 9 && i < entries.length; i += 3) customLines.push(entries.slice(i, i + 3));
-    const tailKeys = entries.slice(9);
-    if (tailKeys.length === 1) customLines.push([{
+      style: dL
+    }, line.map(it => renderKey(it.key, it.index)))));
+    const cLns = [];
+    for (let i = 0; i < 9 && i < ents.length; i += 3) cLns.push(ents.slice(i, i + 3));
+    const tl = ents.slice(9);
+    if (tl.length === 1) cLns.push([{
       key: {
         type: ''
       },
       index: 1000001
-    }, tailKeys[0], {
+    }, tl[0], {
       key: {
         type: ''
       },
       index: 1000002
-    }]);else if (tailKeys.length) customLines.push(tailKeys);
-    const customMatrixNode = /*#__PURE__*/React.createElement(View, {
-      style: customMatrixStyle
-    }, customLines.map((line, li) => /*#__PURE__*/React.createElement(View, {
+    }]);else if (tl.length) cLns.push(tl);
+    const cMN = /*#__PURE__*/React.createElement(View, {
+      style: cM
+    }, cLns.map((line, li) => /*#__PURE__*/React.createElement(View, {
       key: `cl-${li}`,
-      style: defaultLineStyle
-    }, line.map(item => renderKey(item.key, item.index)))));
-    const deleteNode = showDeleteKey && renderKey({
+      style: dL
+    }, line.map(it => renderKey(it.key, it.index)))));
+    const delN = showDeleteKey && renderKey({
       type: 'delete'
-    }, 999, false, true, doubleKeyHeight);
-    const closeNode = renderKey({
+    }, 999, false, true, dblH);
+    const closeN = renderKey({
       type: 'close'
-    }, 1000, true, true, doubleKeyHeight);
-    const headerNode = hasHeader ? /*#__PURE__*/React.createElement(View, {
-      style: [S.h, headerPaddingStyle]
+    }, 1000, true, true, dblH);
+    const tS = {
+      color: colors.title,
+      fontFamily: typography.fontFamily,
+      fontSize: sizing.titleFontSize
+    };
+    const closeStyle = {
+      color: colors.title,
+      fontFamily: typography.fontFamily,
+      fontSize: sizing.auxFontSize ?? Math.round(sizing.fontSize * 0.64)
+    };
+    const hN = hasHdr ? /*#__PURE__*/React.createElement(View, {
+      style: [S.hdr, hP]
     }, /*#__PURE__*/React.createElement(Text, {
-      style: [S.t, S.tO, {
-        color: colors.title,
-        fontSize: sizing.titleFontSize
-      }],
+      style: [S.tBold, S.tCenter, tS],
       numberOfLines: 1
-    }, title), closeText && /*#__PURE__*/React.createElement(Pressable, {
+    }, title), closeTxt && /*#__PURE__*/React.createElement(Pressable, {
       onPress: handleClose,
-      style: S.hC,
+      style: S.hdrClose,
       accessibilityRole: "button",
-      accessibilityLabel: closeText
+      accessibilityLabel: closeTxt
     }, /*#__PURE__*/React.createElement(Text, {
-      style: {
-        color: colors.title
-      }
-    }, closeText))) : null;
-    const bodyNode = isCustom ? /*#__PURE__*/React.createElement(View, {
-      style: customRowStyle
-    }, customMatrixNode, /*#__PURE__*/React.createElement(View, {
-      style: customSideStyle
-    }, deleteNode, closeNode)) : defaultNode;
-    const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-      edge: "bottom"
-    });
+      style: closeStyle
+    }, closeTxt))) : null;
+    const bN = isCustom ? /*#__PURE__*/React.createElement(View, {
+      style: cR
+    }, cMN, /*#__PURE__*/React.createElement(View, {
+      style: cS
+    }, delN, closeN)) : dN;
     return {
-      headerNode,
-      bodyNode,
-      safeAreaNode
+      headerNode: hN,
+      bodyNode: bN,
+      safeAreaNode: safeAreaInsetBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
+        edge: "bottom"
+      })
     };
-  }, [handleClose, colors.title, doubleKeyHeight, extraKeyRender, hasHeader, isCustom, keys, renderKey, closeText, safeAreaInsetBottom, sizing.titleFontSize, spacing.keyGap, spacing.paddingHorizontal, spacing.titlePadding, title]);
+  }, [handleClose, colors.title, dblH, hasHdr, isCustom, keys, renderKey, closeTxt, safeAreaInsetBottom, sizing.auxFontSize, sizing.fontSize, sizing.titleFontSize, spacing.keyGap, spacing.paddingHorizontal, spacing.titlePadding, typography.fontFamily, title, showDeleteKey]);
   if (!shouldRender && !visible) return null;
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
     pointerEvents: visible ? 'auto' : 'none',
     renderToHardwareTextureAndroid: true,
     shouldRasterizeIOS: true,
-    onLayout: handleLayout,
-    style: [S.w, windowShadow, style, {
+    onLayout: onLayout,
+    style: [S.wrap, winShadow, style, {
       transform: [{
         translateY
       }],
@@ -396,29 +412,29 @@ const NumberKeyboard = /*#__PURE__*/React.memo(props => {
   }), memoized.headerNode, memoized.bodyNode, memoized.safeAreaNode));
 });
 const S = StyleSheet.create({
-  w: {
+  wrap: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0
   },
-  h: {
+  hdr: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
     height: 44,
     position: 'relative'
   },
-  t: {
+  tBold: {
     fontWeight: '600'
   },
-  tO: {
+  tCenter: {
     position: 'absolute',
     left: 12,
     right: 12,
     textAlign: 'center'
   },
-  hC: {
+  hdrClose: {
     minWidth: 56,
     alignItems: 'flex-end'
   },
@@ -426,23 +442,23 @@ const S = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
-  kT: {
+  kTxt: {
     includeFontPadding: false,
     textAlign: 'center'
   },
-  dR: {
+  dRow: {
     flexDirection: 'row',
     flexWrap: 'wrap'
   },
-  cR: {
+  cRow: {
     flexDirection: 'row'
   },
-  cM: {
+  cMat: {
     flex: 3,
     flexDirection: 'row',
     flexWrap: 'wrap'
   },
-  cS: {
+  cSide: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'flex-start'

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

@@ -4,7 +4,8 @@ const createTokens = foundations => {
     palette,
     spacing,
     radii,
-    fontSize
+    fontSize,
+    typography
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
@@ -30,8 +31,13 @@ const createTokens = foundations => {
       keyHeight: 54,
       closeHeight: 44,
       fontSize: 28,
+      defaultIconFontSize: 30,
+      auxFontSize: 18,
       titleFontSize: fontSize.md
     },
+    typography: {
+      fontFamily: typography.fontFamily
+    },
     radii: {
       key: radii.xs
     },