react-native-system-ui 0.0.7 → 1.0.1

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
     },

package/dist/es/components/overlay/Overlay.js

@@ -2,64 +2,49 @@ import React from 'react';
 import { Modal, Platform } from 'react-native';
 import { OverlayContainer } from '@react-native-aria/overlays';
 import { useKeyboardDismissable } from '@react-native-aria/interactions';
-export const ExitAnimationContext = /*#__PURE__*/React.createContext({
-  exited: true,
-  setExited: _exited => {}
-});
-export const Overlay = /*#__PURE__*/React.forwardRef((props, ref) => {
+import { useOverlayTokens } from './tokens';
+const IS_WEB = Platform.OS === 'web';
+const OverlayImpl = (props, ref) => {
   const {
     children,
-    isOpen,
-    visible,
-    useRNModal = false,
-    useRNModalOnAndroid = false,
-    isKeyboardDismissable = true,
-    animationPreset = 'fade',
+    isOpen: openP,
+    visible: visP,
+    useRNModal: useModalP,
+    useRNModalOnAndroid: useModalAndroidP = false,
+    isKeyboardDismissable: kbDismissP = true,
+    animationPreset: animP = 'fade',
     onRequestClose,
     style
   } = props;
-  const resolvedOpen = isOpen ?? visible ?? false;
-  const [exited, setExited] = React.useState(!resolvedOpen);
+  const tokens = useOverlayTokens();
+  const useModal = useModalP ?? !IS_WEB;
+  const webStyle = IS_WEB ? {
+    zIndex: tokens.layer.zIndex,
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  } : undefined;
+  const open = openP ?? visP ?? false;
   useKeyboardDismissable({
-    enabled: Platform.OS !== 'web' && resolvedOpen && isKeyboardDismissable,
+    enabled: !IS_WEB && open && kbDismissP,
     callback: onRequestClose ?? (() => {})
   });
-  let styleObj = {};
-  if (Platform.OS === 'web') {
-    styleObj.zIndex = 9999;
-  }
-  if (animationPreset === 'slide') {
-    styleObj.overflow = 'hidden';
-    styleObj.display = 'flex';
-  } else {
-    styleObj.display = exited && !resolvedOpen ? 'none' : 'flex';
-  }
-  if (!resolvedOpen && exited) {
-    return null;
-  }
-  if (useRNModal || useRNModalOnAndroid && Platform.OS === 'android') {
-    return /*#__PURE__*/React.createElement(ExitAnimationContext.Provider, {
-      value: {
-        exited,
-        setExited
-      }
-    }, /*#__PURE__*/React.createElement(Modal, {
-      statusBarTranslucent: true,
-      transparent: true,
-      visible: resolvedOpen,
-      onRequestClose: onRequestClose,
-      animationType: animationPreset,
-      ref: ref
-    }, children));
-  }
+  if (!open) return null;
+  if (useModal || useModalAndroidP && Platform.OS === 'android') return /*#__PURE__*/React.createElement(Modal, {
+    statusBarTranslucent: true,
+    transparent: true,
+    visible: open,
+    onRequestClose: onRequestClose,
+    animationType: animP,
+    ref: ref
+  }, children);
   return /*#__PURE__*/React.createElement(OverlayContainer, {
-    style: [style, styleObj]
-  }, /*#__PURE__*/React.createElement(ExitAnimationContext.Provider, {
-    value: {
-      exited,
-      setExited
-    }
-  }, children));
-});
-Overlay.displayName = 'Overlay';
+    style: [style, webStyle]
+  }, children);
+};
+const OverlayForwardRef = /*#__PURE__*/React.forwardRef(OverlayImpl);
+OverlayForwardRef.displayName = 'Overlay';
+export const Overlay = /*#__PURE__*/React.memo(OverlayForwardRef);
 export default Overlay;

package/dist/es/components/overlay/tokens.js

@@ -1,5 +1,7 @@
 import { createComponentTokensHook } from '../../design-system';
-const createOverlayTokens = _foundations => {
-  return {};
-};
+const createOverlayTokens = _foundations => ({
+  layer: {
+    zIndex: 9999
+  }
+});
 export const useOverlayTokens = createComponentTokensHook('overlay', createOverlayTokens);

package/dist/es/components/password-input/PasswordInput.js

@@ -5,15 +5,16 @@ import { useControllableValue } from '../../hooks';
 import { parseNumberLike } from '../../utils/number';
 import { isString, isText } from '../../utils/validate';
 import { usePasswordInputTokens } from './tokens';
-const HIDDEN_INPUT_PROPS = {
+import { createHairlineView } from '../../utils/hairline';
+const HIP = {
   caretHidden: true,
   autoCorrect: false,
   spellCheck: false,
   importantForAutofill: 'no',
   autoComplete: 'off'
 };
-const sanitizeNumber = value => value.replace(/[^0-9]/g, '');
-const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+const stripNonNumeric = v => v.replace(/[^0-9]/g, '');
+const PasswordInputImpl = (props, ref) => {
   const {
     value,
     defaultValue,
@@ -41,7 +42,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     onBlur,
     ...rest
   } = props;
-  const lengthSafe = Math.max(1, Math.floor(parseNumberLike(length, 6) ?? 6));
+  const lenVal = Math.max(1, Math.floor(parseNumberLike(length, 6) ?? 6));
   const tokens = usePasswordInputTokens(tokensOverride);
   const {
     colors,
@@ -60,23 +61,27 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [code = '', setCode] = useControllableValue(props, {
     defaultValue: ''
   });
-  const normalizeValue = useCallback(nextValue => {
-    let next = nextValue === null || nextValue === undefined ? '' : isString(nextValue) ? nextValue : String(nextValue);
-    if (type === 'number') {
-      next = sanitizeNumber(next);
-    }
-    if (lengthSafe > 0 && next.length > lengthSafe) {
-      next = next.slice(0, lengthSafe);
-    }
-    return next;
-  }, [lengthSafe, type]);
-  const normalizedCode = normalizeValue(code);
-  const updateValue = useCallback(nextValue => {
-    const normalized = normalizeValue(nextValue);
-    if (normalized === normalizedCode) return;
-    if (validator && !validator(normalized)) return;
-    setCode(normalized);
-  }, [normalizeValue, normalizedCode, setCode, validator]);
+  const normalizeValue = useCallback(v => {
+    let n = v === null || v === undefined ? '' : isString(v) ? v : String(v);
+    if (type === 'number') n = stripNonNumeric(n);
+    if (lenVal > 0 && n.length > lenVal) n = n.slice(0, lenVal);
+    return n;
+  }, [lenVal, type]);
+  const normCode = normalizeValue(code);
+  const validatorRef = useRef(validator);
+  const onFocusRef = useRef(onFocus);
+  const onBlurRef = useRef(onBlur);
+  const onSubmitRef = useRef(onSubmit);
+  validatorRef.current = validator;
+  onFocusRef.current = onFocus;
+  onBlurRef.current = onBlur;
+  onSubmitRef.current = onSubmit;
+  const updateValue = useCallback(v => {
+    const n = normalizeValue(v);
+    if (n === normCode) return;
+    if (validatorRef.current && !validatorRef.current(n)) return;
+    setCode(n);
+  }, [normalizeValue, normCode, setCode]);
   const focusInput = useCallback(() => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -94,45 +99,46 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), [blurInput, clearInput, focusInput]);
   useEffect(() => {
     if (!autoFocus || disabled) return;
-    const timer = setTimeout(() => {
+    const t = setTimeout(() => {
       inputRef.current?.focus();
     }, 60);
-    return () => clearTimeout(timer);
+    return () => clearTimeout(t);
   }, [autoFocus, disabled]);
-  const handleChangeText = useCallback(text => {
-    updateValue(text ?? '');
+  const handleChangeText = useCallback(txt => {
+    updateValue(txt ?? '');
   }, [updateValue]);
   const handleFocus = useCallback(() => {
     setFocused(true);
-    onFocus?.();
-  }, [onFocus]);
+    onFocusRef.current?.();
+  }, []);
   const handleBlur = useCallback(() => {
     setFocused(false);
-    onBlur?.();
-  }, [onBlur]);
+    onBlurRef.current?.();
+  }, []);
   const prevSubmitRef = useRef({
-    value: normalizedCode,
-    length: lengthSafe
+    value: normCode,
+    length: lenVal
   });
   useEffect(() => {
     const prev = prevSubmitRef.current;
     prevSubmitRef.current = {
-      value: normalizedCode,
-      length: lengthSafe
+      value: normCode,
+      length: lenVal
     };
-    if (!onSubmit) return;
-    if (prev.length !== lengthSafe) return;
-    if (lengthSafe <= 0 || normalizedCode.length !== lengthSafe) return;
-    if (prev.value === normalizedCode) return;
-    onSubmit(normalizedCode);
+    if (!onSubmitRef.current) return;
+    if (prev.length !== lenVal) return;
+    if (lenVal <= 0 || normCode.length !== lenVal) return;
+    if (prev.value === normCode) return;
+    onSubmitRef.current(normCode);
     inputRef.current?.blur();
-  }, [lengthSafe, normalizedCode, onSubmit]);
+  }, [lenVal, normCode]);
   useEffect(() => {
     const shouldBlink = showCursor && focused && !disabled;
     if (blinkTimer.current) {
       clearInterval(blinkTimer.current);
       blinkTimer.current = null;
     }
+    ;
     if (shouldBlink) {
       setCursorVisible(true);
       blinkTimer.current = setInterval(() => {
@@ -141,6 +147,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     } else {
       setCursorVisible(false);
     }
+    ;
     return () => {
       if (blinkTimer.current) {
         clearInterval(blinkTimer.current);
@@ -149,50 +156,47 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     };
   }, [disabled, focused, showCursor]);
   const cells = Array.from({
-    length: lengthSafe
-  }, (_, index) => {
-    const char = normalizedCode?.[index];
+    length: lenVal
+  }, (_, i) => {
+    const char = normCode?.[i];
     const isFilled = !!char;
-    const showBlink = showCursor && focused && !disabled && normalizedCode.length === index && index < lengthSafe;
+    const showBlink = showCursor && focused && !disabled && normCode.length === i && i < lenVal;
     return {
-      key: index,
+      key: i,
       char,
       isFilled,
       showBlink
     };
   });
-  const gutterValue = Math.max(0, parseNumberLike(gutter, 0) ?? 0);
-  const hasGutter = gutterValue > 0;
-  const tip = errorInfo ?? info;
-  const tipColor = errorInfo ? colors.error : colors.muted;
-  const backgroundColor = hasGutter ? colors.transparent : colors.background;
+  const gutterVal = Math.max(0, parseNumberLike(gutter, 0) ?? 0);
+  const hasGutter = gutterVal > 0;
+  const tipInfo = errorInfo ?? info;
+  const tipClr = errorInfo ? colors.error : colors.muted;
+  const bgClr = hasGutter ? colors.transparent : colors.background;
   const hiddenInputProps = {
-    ...HIDDEN_INPUT_PROPS,
+    ...HIP,
     underlineColorAndroid: colors.transparent
   };
-  const cellTextBase = {
+  const cellTxtBase = {
     color: colors.text,
     fontSize: sizing.cellTextSize,
     fontWeight: typography.cellTextWeight,
     fontFamily: typography.fontFamily
   };
-  const wrapperStyle = [styles.wrapper, {
-    backgroundColor,
+  const wrapStyle = [S.w, {
+    backgroundColor: bgClr,
     borderRadius: radii.wrapper,
     paddingHorizontal: spacing.none,
     opacity: disabled ? opacity.disabled : 1
-  }, !hasGutter && {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: colors.border
   }];
-  const securityStyle = [styles.security, {
+  const sheetStyle = [S.s, {
     borderRadius: hasGutter ? 0 : radii.wrapper,
-    backgroundColor
+    backgroundColor: bgClr
   }];
   return /*#__PURE__*/React.createElement(View, {
     style: style
   }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
-    style: wrapperStyle,
+    style: wrapStyle,
     onPress: focusInput,
     disabled: disabled,
     accessibilityRole: "button",
@@ -200,26 +204,21 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       disabled
     }
   }), /*#__PURE__*/React.createElement(View, {
-    style: securityStyle
-  }, cells.map((item, index) => {
-    const filledTextStyle = [cellTextBase, cellTextStyle, !mask && item.isFilled && highlightTextStyle];
-    const baseCell = [styles.cell, {
+    style: sheetStyle
+  }, cells.map((item, i) => {
+    const filledTextStyle = [cellTxtBase, cellTextStyle, !mask && item.isFilled && highlightTextStyle];
+    const baseCell = [S.c, {
       backgroundColor: colors.background,
       height: sizing.cellHeight
     }, cellStyle, item.isFilled && cellFilledStyle];
     if (hasGutter) {
-      baseCell.push(styles.cellGutter, {
-        borderColor: colors.border,
+      baseCell.push(S.cg, {
         borderRadius: radii.cellGutter
-      }, index > 0 && {
-        marginLeft: gutterValue
-      });
-    } else if (index < lengthSafe - 1) {
-      baseCell.push({
-        borderRightWidth: StyleSheet.hairlineWidth,
-        borderRightColor: colors.border
+      }, i > 0 && {
+        marginLeft: gutterVal
       });
     }
+    ;
     return /*#__PURE__*/React.createElement(View, {
       key: item.key,
       style: baseCell
@@ -236,7 +235,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       numberOfLines: 1
     }, item.char ?? ''), item.showBlink ? /*#__PURE__*/React.createElement(View, {
       testID: "password-input-cursor",
-      style: [styles.cursor, {
+      style: [S.cr, {
         width: sizing.cursorWidth,
         height: `${sizing.cursorHeightRatio * 100}%`,
         borderRadius: sizing.cursorWidth / 2,
@@ -245,64 +244,84 @@ const PasswordInput = /*#__PURE__*/React.forwardRef((props, ref) => {
         backgroundColor: colors.cursor,
         opacity: cursorVisible ? 1 : 0
       }, cursorStyle]
-    }) : null);
+    }) : null, hasGutter && /*#__PURE__*/React.createElement(View, {
+      style: createHairlineView({
+        position: 'all',
+        color: colors.border,
+        borderRadius: radii.cellGutter
+      })
+    }), !hasGutter && i < lenVal - 1 && /*#__PURE__*/React.createElement(View, {
+      style: createHairlineView({
+        position: 'right',
+        color: colors.border,
+        top: 0,
+        bottom: 0
+      })
+    }));
   }), /*#__PURE__*/React.createElement(TextInput, _extends({
     ref: inputRef,
-    value: normalizedCode,
+    value: normCode,
     editable: !disabled,
     keyboardType: keyboardType,
     inputMode: inputMode,
-    maxLength: lengthSafe,
+    maxLength: lenVal,
     autoFocus: false,
     secureTextEntry: mask
   }, hiddenInputProps, {
-    style: [styles.hiddenInput, {
+    style: [S.hi, {
       opacity: opacity.hidden
     }],
     onChangeText: handleChangeText,
     onFocus: handleFocus,
     onBlur: handleBlur,
     accessible: false
-  })))), tip ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.infoWrapper, {
+  }))), !hasGutter && /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'all',
+      color: colors.border,
+      borderRadius: radii.wrapper
+    })
+  })), tipInfo ? /*#__PURE__*/React.createElement(View, {
+    style: [S.iw, {
       marginTop: spacing.infoMarginTop
     }]
-  }, isText(tip) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.infoText, {
-      color: tipColor
+  }, isText(tipInfo) ? /*#__PURE__*/React.createElement(Text, {
+    style: [S.it, {
+      color: tipClr
     }]
-  }, tip) : tip) : null);
-});
+  }, tipInfo) : tipInfo) : null);
+};
+const PasswordInputForwardRef = /*#__PURE__*/React.forwardRef(PasswordInputImpl);
+PasswordInputForwardRef.displayName = 'PasswordInput';
+const PasswordInput = /*#__PURE__*/React.memo(PasswordInputForwardRef);
 export default PasswordInput;
-const styles = StyleSheet.create({
-  wrapper: {
+const S = StyleSheet.create({
+  w: {
     alignSelf: 'stretch'
   },
-  security: {
+  s: {
     flexDirection: 'row',
     alignItems: 'center',
     position: 'relative',
     overflow: 'hidden'
   },
-  cell: {
+  c: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center'
   },
-  cellGutter: {
-    borderWidth: StyleSheet.hairlineWidth
-  },
-  cursor: {
+  cg: {},
+  cr: {
     position: 'absolute',
     left: '50%'
   },
-  hiddenInput: {
+  hi: {
     ...StyleSheet.absoluteFillObject
   },
-  infoWrapper: {
+  iw: {
     alignItems: 'center'
   },
-  infoText: {
+  it: {
     textAlign: 'center'
   }
 });