react-native-system-ui 0.0.7 → 1.0.1

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

@@ -20,25 +20,30 @@ function _reactNative() {
 }
 var _hooks = require("../../hooks");
 var _platform = require("../../platform");
+var _animation = require("../../hooks/animation");
 var _createPlatformShadow = require("../../utils/createPlatformShadow");
 var _number = require("../../utils/number");
+var _utils = require("../../utils");
 var _loading = _interopRequireDefault(require("../loading"));
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _useLocale = require("../config-provider/useLocale");
 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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const keyboardRegistry = new Set();
-const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
-const ZERO_KEY = '0';
+const registry = new Set();
+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 next = [...list];
-  for (let i = next.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));
-    [next[i], next[j]] = [next[j], next[i]];
+    [n[i], n[j]] = [n[j], n[i]];
   }
-  return next;
+  ;
+  return n;
 };
 const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
   const {
@@ -59,8 +64,8 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
     onBlur,
     onHide,
     onShow,
-    value: _value,
-    defaultValue: _defaultValue,
+    value: _v,
+    defaultValue: _dv,
     maxlength: maxlengthProp,
     blurOnClose = true,
     safeAreaInsetBottom = true,
@@ -72,162 +77,157 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
     style,
     ...rest
   } = props;
+  const locale = (0, _useLocale.useLocale)();
+  const reducedMotion = (0, _animation.useReducedMotion)();
   const tokens = (0, _tokens.useNumberKeyboardTokens)(tokensOverride);
   const {
     colors,
     radii,
     shadow,
     sizing,
-    spacing
+    spacing,
+    typography
   } = tokens;
-  const [mergedValue, setMergedValue] = (0, _hooks.useControllableValue)(props, {
+  const [value, setValue] = (0, _hooks.useControllableValue)(props, {
     defaultValue: '',
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const value = mergedValue ?? '';
-  const maxlength = (() => {
-    const parsed = (0, _number.parseNumberLike)(maxlengthProp, undefined);
-    if (parsed === undefined || !Number.isFinite(parsed) || parsed < 0) return undefined;
-    return Math.floor(parsed);
+  const curVal = value ?? '';
+  const maxLen = (() => {
+    const p = (0, _number.parseNumberLike)(maxlengthProp, undefined);
+    return p != null && Number.isFinite(p) && p >= 0 ? Math.floor(p) : undefined;
   })();
-  const valueRef = (0, _react().useRef)(value);
-  const maxlengthRef = (0, _react().useRef)(maxlength);
-  valueRef.current = value;
-  maxlengthRef.current = maxlength;
-  const isCustomTheme = theme === 'custom';
-  const resolvedCloseText = isCustomTheme ? closeButtonText ?? '完成' : closeButtonText;
-  const closeSelf = (0, _react().useCallback)(() => {
-    onClose?.();
-    if (blurOnClose) {
-      onBlur?.();
-    }
-  }, [blurOnClose, onBlur, onClose]);
-  const prevVisible = (0, _react().useRef)(visible);
+  const valRef = (0, _react().useRef)(curVal);
+  const maxRef = (0, _react().useRef)(maxLen);
+  const onCloseRef = (0, _react().useRef)(onClose);
+  const onBlurRef = (0, _react().useRef)(onBlur);
+  const onShowRef = (0, _react().useRef)(onShow);
+  const onHideRef = (0, _react().useRef)(onHide);
+  const onDelRef = (0, _react().useRef)(onDelete);
+  const onInpRef = (0, _react().useRef)(onInput);
+  valRef.current = curVal;
+  maxRef.current = maxLen;
+  onCloseRef.current = onClose;
+  onBlurRef.current = onBlur;
+  onShowRef.current = onShow;
+  onHideRef.current = onHide;
+  onDelRef.current = onDelete;
+  onInpRef.current = onInput;
+  const isCustom = theme === 'custom';
+  const defClose = locale?.vanNumberKeyboard?.close ?? 'Done';
+  const closeTxt = isCustom ? closeButtonText ?? defClose : closeButtonText;
+  const handleClose = (0, _react().useCallback)(() => {
+    onCloseRef.current?.();
+    if (blurOnClose) onBlurRef.current?.();
+  }, [blurOnClose]);
+  const prevVis = (0, _react().useRef)(visible);
   (0, _react().useEffect)(() => {
-    if (visible && !prevVisible.current) {
-      onShow?.();
-    }
-    if (!visible && prevVisible.current) {
-      onHide?.();
-    }
-    prevVisible.current = visible;
-  }, [visible, onShow, onHide]);
+    if (visible && !prevVis.current) onShowRef.current?.();
+    if (!visible && prevVis.current) onHideRef.current?.();
+    prevVis.current = visible;
+  }, [visible]);
   (0, _react().useEffect)(() => {
     if (visible) {
-      keyboardRegistry.add(closeSelf);
-      keyboardRegistry.forEach(fn => {
-        if (fn !== closeSelf) {
-          fn();
-        }
+      registry.add(handleClose);
+      registry.forEach(fn => {
+        if (fn !== handleClose) fn();
       });
-    } else {
-      keyboardRegistry.delete(closeSelf);
-    }
+    } else registry.delete(handleClose);
     return () => {
-      keyboardRegistry.delete(closeSelf);
+      registry.delete(handleClose);
     };
-  }, [visible, closeSelf]);
+  }, [visible, handleClose]);
   const keys = (0, _react().useMemo)(() => {
-    const shouldShuffle = randomKeyOrder && visible;
-    const numbers = shouldShuffle ? shuffle(NUMBER_KEYS) : NUMBER_KEYS;
-    const main = numbers.map(text => ({
-      text,
+    const sh = randomKeyOrder && visible;
+    const nK = sh ? shuffle(NUM_KEYS) : NUM_KEYS;
+    const mat = nK.map(t => ({
+      text: t,
       type: ''
     }));
-    if (isCustomTheme) {
-      const extras = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
-      if (extras.length === 1) {
-        main.push({
-          text: ZERO_KEY,
-          type: '',
-          wider: true
-        }, {
-          text: extras[0],
-          type: 'extra'
-        });
-      } else if (extras.length >= 2) {
-        main.push({
-          text: extras[0],
-          type: 'extra'
-        }, {
-          text: ZERO_KEY,
-          type: ''
-        }, {
-          text: extras[1],
-          type: 'extra'
-        });
-      } else {
-        main.push({
-          text: ZERO_KEY,
-          type: ''
-        });
-      }
-      return main;
+    if (isCustom) {
+      const e = Array.isArray(extraKey) ? extraKey : extraKey ? [extraKey] : [];
+      if (e.length === 1) mat.push({
+        text: ZERO,
+        type: '',
+        wider: true
+      }, {
+        text: e[0],
+        type: 'extra'
+      });else if (e.length >= 2) mat.push({
+        text: e[0],
+        type: 'extra'
+      }, {
+        text: ZERO,
+        type: ''
+      }, {
+        text: e[1],
+        type: 'extra'
+      });else mat.push({
+        text: ZERO,
+        type: ''
+      });
+      return mat;
     }
-    const normalizedExtra = Array.isArray(extraKey) ? extraKey[0] ?? '' : extraKey ?? '';
-    main.push({
-      text: normalizedExtra,
+    const nE = Array.isArray(extraKey) ? extraKey[0] ?? '' : extraKey ?? '';
+    mat.push({
+      text: nE,
       type: 'extra'
-    });
-    main.push({
-      text: ZERO_KEY,
+    }, {
+      text: ZERO,
       type: ''
-    });
-    main.push({
+    }, {
       type: showDeleteKey ? 'delete' : '',
       text: showDeleteKey ? undefined : ''
     });
-    return main;
-  }, [extraKey, isCustomTheme, randomKeyOrder, showDeleteKey, visible]);
+    return mat;
+  }, [extraKey, isCustom, randomKeyOrder, showDeleteKey, visible]);
   const handleInput = (0, _react().useCallback)((text, type) => {
     if (type === 'delete') {
-      const currentValue = valueRef.current;
-      if (!currentValue) return;
-      onDelete?.();
-      setMergedValue(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) {
-      closeSelf();
+      handleClose();
       return;
     }
+    ;
     if (!text) return;
-    const currentValue = valueRef.current;
-    const currentMaxlength = maxlengthRef.current;
-    if (currentMaxlength !== undefined && currentValue.length >= currentMaxlength) return;
-    onInput?.(text);
-    setMergedValue(`${currentValue}${text}`);
-  }, [closeSelf, onDelete, onInput, setMergedValue]);
-  const wrapperShadow = (0, _react().useMemo)(() => (0, _createPlatformShadow.createPlatformShadow)({
-    color: shadow.color,
-    opacity: shadow.opacity,
-    radius: shadow.radius,
-    offsetY: shadow.offsetY,
-    elevation: shadow.elevation
-  }), [shadow.color, shadow.elevation, shadow.offsetY, shadow.opacity, shadow.radius]);
-  const keyGap = spacing.keyGap;
-  const renderKey = (0, _react().useCallback)((key, index, isClose = false, fullWidth = false, customHeight) => {
-    const isPlaceholder = key.type === '' && !key.text;
-    const disabled = isPlaceholder || isClose && closeButtonLoading;
-    const onPress = disabled ? undefined : () => handleInput(key.text, key.type);
-    const backgroundColor = isClose ? colors.closeBackground : colors.keyBackground;
-    const activeBackground = isClose ? colors.closeActiveBackground : colors.keyActiveBackground;
-    const inactiveTextColor = isClose ? colors.closeText : colors.keyText;
-    const pressedTextColor = isClose ? colors.closeText : colors.keyTextActive;
-    const keyHeight = customHeight ?? (isClose ? sizing.closeHeight : sizing.keyHeight);
-    const actionFontSize = Math.round(sizing.fontSize * 0.64);
-    const textFontSize = key.type === 'close' || key.type === 'extra' || key.type === 'delete' ? actionFontSize : sizing.fontSize;
-    const keyText = key.text ?? '';
-    const contentNode = key.type === 'delete' ? deleteRender?.() ?? deleteButtonText ?? '⌫' : key.type === 'extra' ? extraKeyRender ? extraKeyRender(keyText) : keyText || '⌨︎' : key.type === 'close' ? resolvedCloseText ?? '完成' : numberKeyRender ? numberKeyRender(keyText) : keyText;
+    const c = valRef.current;
+    const m = maxRef.current;
+    if (m !== undefined && c.length >= m) return;
+    onInpRef.current?.(text);
+    setValue(`${c}${text}`);
+  }, [handleClose, setValue]);
+  const winShadow = (0, _react().useMemo)(() => (0, _createPlatformShadow.createPlatformShadow)(shadow), [shadow.color, shadow.elevation, shadow.offsetY, shadow.opacity, shadow.radius]);
+  const renderKey = (0, _react().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().default.createElement(_reactNative().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,
@@ -238,256 +238,250 @@ const NumberKeyboard = /*#__PURE__*/_react().default.memo(props => {
         flexShrink: 1,
         minWidth: 0
       }],
-      accessible: !isPlaceholder,
-      accessibilityRole: isPlaceholder ? undefined : 'button',
-      accessibilityLabel: isPlaceholder ? undefined : key.type === 'delete' ? 'delete' : key.type === 'close' ? resolvedCloseText ?? '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 : backgroundColor;
-      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().default.createElement(_reactNative().View, {
-        style: [styles.key, {
-          height: keyHeight,
-          backgroundColor: keyBackground,
+        style: [S.k, {
+          height: kH,
+          backgroundColor: kBg,
           borderRadius: radii.key
         }]
       }, isClose && closeButtonLoading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
         size: 18,
-        color: textColor
-      }) : typeof contentNode === 'string' || typeof contentNode === 'number' ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: [styles.keyText, {
-          color: textColor,
-          fontSize: textFontSize
-        }]
-      }, contentNode) : contentNode == null || contentNode === false ? null : contentNode);
+        color: tClr
+      }) : (0, _utils.isRenderable)(cnt) ? (0, _utils.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, resolvedCloseText]);
-  const animated = (0, _react().useRef)(new (_reactNative().Animated.Value)(visible ? 1 : 0)).current;
-  const animationRef = (0, _react().useRef)(null);
-  const animationSeqRef = (0, _react().useRef)(0);
-  const [contentHeight, setContentHeight] = (0, _react().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 = (0, _react().useRef)(new (_reactNative().Animated.Value)(visible ? 1 : 0)).current;
+  const animRef = (0, _react().useRef)(null);
+  const seqRef = (0, _react().useRef)(0);
+  const [contentH, setContentH] = (0, _react().useState)(0);
   const [shouldRender, setShouldRender] = (0, _react().useState)(visible);
-  const effectiveDuration = transition === false ? 0 : transitionDuration;
+  const effD = reducedMotion ? 0 : transition === false ? 0 : transitionDuration;
   (0, _react().useEffect)(() => {
-    animationSeqRef.current += 1;
-    const currentSeq = animationSeqRef.current;
-    if (visible) {
-      setShouldRender(true);
-    }
-    animationRef.current?.stop();
-    const animation = _reactNative().Animated.timing(animated, {
+    seqRef.current += 1;
+    const seq = seqRef.current;
+    if (visible) setShouldRender(true);
+    animRef.current?.stop();
+    const a = _reactNative().Animated.timing(animVal, {
       toValue: visible ? 1 : 0,
-      duration: effectiveDuration,
+      duration: effD,
       useNativeDriver: _platform.nativeDriverEnabled,
-      easing: visible ? _reactNative().Easing.out(_reactNative().Easing.cubic) : _reactNative().Easing.in(_reactNative().Easing.cubic)
+      easing: visible ? _reactNative().Easing.out(_reactNative().Easing.cubic) : _reactNative().Easing.in(_reactNative().Easing.cubic),
+      isInteraction: false
     });
-    animationRef.current = animation;
-    animation.start(({
+    animRef.current = a;
+    a.start(({
       finished
     }) => {
-      if (finished && !visible && animationSeqRef.current === currentSeq) {
-        setShouldRender(false);
-      }
+      if (finished && !visible && seqRef.current === seq) setShouldRender(false);
     });
     return () => {
-      animationRef.current?.stop();
-      animationRef.current = null;
+      animRef.current?.stop();
+      animRef.current = null;
     };
-  }, [animated, visible, effectiveDuration]);
-  const translateY = animated.interpolate({
+  }, [animVal, visible, effD]);
+  const translateY = animVal.interpolate({
     inputRange: [0, 1],
-    outputRange: [contentHeight || 320, 0]
+    outputRange: [contentH || 320, 0]
   });
-  const handleLayout = (0, _react().useCallback)(e => {
+  const onLayout = (0, _react().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 = !isCustomTheme && (title || closeButtonText);
-  const doubleKeyHeight = sizing.keyHeight * 2 + keyGap;
-  const memo = (0, _react().useMemo)(() => {
-    const headerPaddingStyle = {
-      paddingHorizontal: spacing.titlePadding
+  const hasHdr = !isCustom && (title || closeButtonText);
+  const dblH = sizing.keyHeight * 2 + spacing.keyGap;
+  const memoized = (0, _react().useMemo)(() => {
+    const kg = spacing.keyGap;
+    const ph = spacing.paddingHorizontal;
+    const tp = spacing.titlePadding;
+    const hP = {
+      paddingHorizontal: tp
     };
-    const defaultContainerStyle = [styles.defaultRow, {
+    const dC = [S.dRow, {
       flexDirection: 'column',
       flexWrap: 'nowrap',
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingTop: keyGap,
-      paddingBottom: keyGap,
-      gap: keyGap
+      paddingHorizontal: ph,
+      paddingTop: kg,
+      paddingBottom: kg,
+      gap: kg
     }];
-    const defaultLineStyle = {
+    const dL = {
       flexDirection: 'row',
-      gap: keyGap
+      gap: kg
     };
-    const customRowStyle = [styles.customRow, {
-      paddingHorizontal: spacing.paddingHorizontal,
-      paddingTop: hasHeader ? 0 : keyGap,
-      paddingBottom: keyGap,
+    const cR = [S.cRow, {
+      paddingHorizontal: ph,
+      paddingTop: hasHdr ? 0 : kg,
+      paddingBottom: kg,
       width: '100%'
     }];
-    const customMainStyle = [styles.customMain, {
+    const cM = [S.cMat, {
       flexDirection: 'column',
       flexWrap: 'nowrap',
-      gap: keyGap
+      gap: kg
     }];
-    const customSidebarStyle = [styles.customSidebar, {
-      gap: keyGap,
-      marginLeft: keyGap
+    const cS = [S.cSide, {
+      gap: kg,
+      marginLeft: kg
     }];
-    const entries = keys.map((key, index) => ({
-      key,
-      index
+    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().default.createElement(_reactNative().View, {
-      style: defaultContainerStyle
-    }, defaultLines.map((line, lineIndex) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      key: `l-${lineIndex}`,
-      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 tail = entries.slice(9);
-    if (tail.length === 1) {
-      customLines.push([{
-        key: {
-          type: ''
-        },
-        index: 1000001
-      }, tail[0], {
-        key: {
-          type: ''
-        },
-        index: 1000002
-      }]);
-    } else if (tail.length) {
-      customLines.push(tail);
-    }
-    const customMainNode = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: customMainStyle
-    }, customLines.map((line, lineIndex) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      key: `cl-${lineIndex}`,
-      style: defaultLineStyle
-    }, line.map(item => renderKey(item.key, item.index)))));
-    const deleteNode = showDeleteKey ? renderKey({
+    const dLns = [];
+    for (let i = 0; i < ents.length; i += 3) dLns.push(ents.slice(i, i + 3));
+    const dN = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: dC
+    }, dLns.map((line, li) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: `l-${li}`,
+      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
+    }, tl[0], {
+      key: {
+        type: ''
+      },
+      index: 1000002
+    }]);else if (tl.length) cLns.push(tl);
+    const cMN = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: cM
+    }, cLns.map((line, li) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: `cl-${li}`,
+      style: dL
+    }, line.map(it => renderKey(it.key, it.index)))));
+    const delN = showDeleteKey && renderKey({
       type: 'delete'
-    }, 999, false, true, doubleKeyHeight) : null;
-    const closeNode = renderKey({
+    }, 999, false, true, dblH);
+    const closeN = renderKey({
       type: 'close'
-    }, 1000, true, true, doubleKeyHeight);
-    const headerNode = hasHeader ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [styles.header, 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().default.createElement(_reactNative().View, {
+      style: [S.hdr, hP]
     }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [styles.title, styles.titleOverlay, {
-        color: colors.title,
-        fontSize: sizing.titleFontSize
-      }],
+      style: [S.tBold, S.tCenter, tS],
       numberOfLines: 1
-    }, title), resolvedCloseText ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-      onPress: closeSelf,
-      style: styles.headerClose,
+    }, title), closeTxt && /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      onPress: handleClose,
+      style: S.hdrClose,
       accessibilityRole: "button",
-      accessibilityLabel: resolvedCloseText
+      accessibilityLabel: closeTxt
     }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: {
-        color: colors.title
-      }
-    }, resolvedCloseText)) : null) : null;
-    const bodyNode = isCustomTheme ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: customRowStyle
-    }, customMainNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: customSidebarStyle
-    }, deleteNode, closeNode)) : defaultNode;
-    const safeAreaNode = safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
-      edge: "bottom"
-    });
+      style: closeStyle
+    }, closeTxt))) : null;
+    const bN = isCustom ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: cR
+    }, cMN, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: cS
+    }, delN, closeN)) : dN;
     return {
-      headerNode,
-      bodyNode,
-      safeAreaNode
+      headerNode: hN,
+      bodyNode: bN,
+      safeAreaNode: safeAreaInsetBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+        edge: "bottom"
+      })
     };
-  }, [closeSelf, colors.title, doubleKeyHeight, extraKeyRender, hasHeader, isCustomTheme, keyGap, keys, renderKey, resolvedCloseText, safeAreaInsetBottom, sizing.titleFontSize, spacing.paddingHorizontal, spacing.titlePadding, title]);
-  if (!shouldRender && !visible) {
-    return null;
-  }
+  }, [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().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, _extends({}, rest, {
     pointerEvents: visible ? 'auto' : 'none',
-    onLayout: handleLayout,
-    style: [styles.wrapper, wrapperShadow, style, {
+    renderToHardwareTextureAndroid: true,
+    shouldRasterizeIOS: true,
+    onLayout: onLayout,
+    style: [S.wrap, winShadow, style, {
       transform: [{
         translateY
       }],
       backgroundColor: colors.background
     }]
-  }), memo.headerNode, memo.bodyNode, memo.safeAreaNode));
+  }), memoized.headerNode, memoized.bodyNode, memoized.safeAreaNode));
 });
-const styles = _reactNative().StyleSheet.create({
-  wrapper: {
+const S = _reactNative().StyleSheet.create({
+  wrap: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0
   },
-  header: {
+  hdr: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
     height: 44,
     position: 'relative'
   },
-  title: {
+  tBold: {
     fontWeight: '600'
   },
-  titleOverlay: {
+  tCenter: {
     position: 'absolute',
     left: 12,
     right: 12,
     textAlign: 'center'
   },
-  headerClose: {
+  hdrClose: {
     minWidth: 56,
     alignItems: 'flex-end'
   },
-  key: {
+  k: {
     justifyContent: 'center',
     alignItems: 'center'
   },
-  keyText: {
+  kTxt: {
     includeFontPadding: false,
     textAlign: 'center'
   },
-  defaultRow: {
+  dRow: {
     flexDirection: 'row',
     flexWrap: 'wrap'
   },
-  customRow: {
+  cRow: {
     flexDirection: 'row'
   },
-  customMain: {
+  cMat: {
     flex: 3,
     flexDirection: 'row',
     flexWrap: 'wrap'
   },
-  customSidebar: {
+  cSide: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'flex-start'
   }
 });
-NumberKeyboard.displayName = 'NumberKeyboard';
 var _default = exports.default = NumberKeyboard;