react-native-system-ui 0.0.7 → 1.0.1

package/dist/cjs/components/grid/GridItem.js

@@ -18,20 +18,21 @@ function _reactNative() {
   };
   return data;
 }
+var _designSystem = require("../../design-system");
 var _badge = _interopRequireDefault(require("../badge"));
 var _utils = require("../../utils");
 var _GridContext = require("./GridContext");
 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 GridItem = props => {
-  const context = (0, _react().useContext)(_GridContext.GridContext);
-  if (!context) throw new Error('GridItem must be used within Grid');
+const GridItemImpl = p => {
+  const ctx = (0, _react().useContext)(_GridContext.GridContext);
+  if (!ctx) throw new Error('GridItem must be used within Grid');
   const {
     gridItemIndex = 0,
     text,
     icon,
-    iconColor: iconColorProp,
+    iconColor: icp,
     badge,
     dot,
     contentStyle,
@@ -40,113 +41,118 @@ const GridItem = props => {
     style,
     onPress,
     ...rest
-  } = props;
+  } = p;
   const {
-    tokens,
-    columnNum,
-    gutter,
-    border,
-    center,
-    square,
-    direction,
-    reverse,
-    clickable,
-    iconSize,
-    iconColor,
+    tokens: t,
+    columnNum: cn,
+    gutter: g,
+    border: b,
+    center: c,
+    square: sq,
+    direction: d,
+    reverse: r,
+    clickable: cl,
+    iconSize: is,
+    iconColor: ic,
     count
-  } = context;
-  const widthPercent = (0, _react().useMemo)(() => `${100 / columnNum}%`, [columnNum]);
-  const isLastColumn = (0, _react().useMemo)(() => (gridItemIndex + 1) % columnNum === 0, [columnNum, gridItemIndex]);
-  const rowIndex = (0, _react().useMemo)(() => Math.floor(gridItemIndex / columnNum), [columnNum, gridItemIndex]);
-  const lastRowIndex = (0, _react().useMemo)(() => Math.floor((count - 1) / columnNum), [columnNum, count]);
-  const contentWrapperStyle = (0, _react().useMemo)(() => [tokens.layout.itemContentBase, direction === 'horizontal' ? tokens.layout.itemHorizontal : tokens.layout.itemVertical, center && tokens.layout.itemCenter, reverse ? direction === 'horizontal' ? tokens.layout.itemReverseRow : tokens.layout.itemReverseColumn : null, square ? tokens.layout.itemContentSquare : null, {
-    paddingHorizontal: tokens.spacing.paddingHorizontal,
-    paddingVertical: tokens.spacing.paddingVertical,
-    backgroundColor: tokens.colors.background
-  }, contentStyle], [center, contentStyle, direction, reverse, square, tokens.colors.background, tokens.layout.itemContentBase, tokens.layout.itemContentSquare, tokens.layout.itemHorizontal, tokens.layout.itemReverseColumn, tokens.layout.itemReverseRow, tokens.layout.itemVertical, tokens.layout.itemCenter, tokens.spacing.paddingHorizontal, tokens.spacing.paddingVertical]);
-  const hasText = (0, _utils.isRenderable)(text);
-  const resolvedIconColor = (0, _react().useMemo)(() => iconColorProp ?? iconColor ?? tokens.colors.text, [iconColor, iconColorProp, tokens.colors.text]);
-  const innerContent = (0, _react().useMemo)(() => {
-    if (children) return children;
-    let iconElement = null;
+  } = ctx;
+  const wp = `${100 / cn}%`;
+  const ilc = (gridItemIndex + 1) % cn === 0;
+  const ri = Math.floor(gridItemIndex / cn);
+  const lri = Math.floor((count - 1) / cn);
+  const cws = [t.layout.itemContentBase, d === 'horizontal' ? t.layout.itemHorizontal : t.layout.itemVertical, c && t.layout.itemCenter, r ? d === 'horizontal' ? t.layout.itemReverseRow : t.layout.itemReverseColumn : null, sq ? t.layout.itemContentSquare : null, {
+    paddingHorizontal: t.spacing.paddingHorizontal,
+    paddingVertical: t.spacing.paddingVertical,
+    backgroundColor: t.colors.background
+  }, contentStyle];
+  const ht = (0, _utils.isRenderable)(text);
+  const ric = icp ?? ic ?? t.colors.text;
+  const icn = (0, _react().useMemo)(() => {
+    if (children) return (0, _utils.isText)(children) ? (0, _utils.renderTextOrNode)(children, [t.layout.text, {
+      color: t.colors.text,
+      fontSize: t.typography.fontSize,
+      lineHeight: t.typography.lineHeight,
+      fontFamily: t.typography.fontFamily,
+      fontWeight: t.typography.fontWeight
+    }, textStyle]) : children;
+    let ie = null;
     if (icon || badge || dot) {
       const {
-        style: badgeWrapperStyle,
-        ...badgeRest
+        style: bws,
+        ...br
       } = badge ?? {};
-      const marginKey = direction === 'vertical' ? reverse ? 'marginTop' : 'marginBottom' : reverse ? 'marginLeft' : 'marginRight';
-      const iconWrapperStyle = [tokens.layout.iconWrapper, hasText && {
-        [marginKey]: tokens.spacing.iconGap
+      const mk = d === 'vertical' ? r ? 'marginTop' : 'marginBottom' : r ? 'marginLeft' : 'marginRight';
+      const iws = [t.layout.iconWrapper, ht && {
+        [mk]: t.spacing.iconGap
       }];
-      const iconNode = (0, _utils.isFunction)(icon) ? icon(iconSize, resolvedIconColor) : icon;
-      const content = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: iconWrapperStyle
-      }, iconNode);
-      iconElement = badge || dot ? /*#__PURE__*/_react().default.createElement(_badge.default, _extends({
+      const ino = (0, _utils.isFunction)(icon) ? icon(is, ric) : icon;
+      const cnt = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        style: iws
+      }, ino);
+      ie = badge || dot ? /*#__PURE__*/_react().default.createElement(_badge.default, _extends({
         dot: dot
-      }, badgeRest, {
-        style: center ? [badgeWrapperStyle, {
+      }, br, {
+        style: c ? [bws, {
           alignSelf: 'center'
-        }] : badgeWrapperStyle
-      }), content) : content;
+        }] : bws
+      }), cnt) : cnt;
     }
-    const textElement = hasText && ((0, _utils.isText)(text) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: [tokens.layout.text, {
-        color: tokens.colors.text,
-        fontSize: tokens.typography.fontSize,
-        lineHeight: tokens.typography.lineHeight,
-        fontFamily: tokens.typography.fontFamily,
-        fontWeight: tokens.typography.fontWeight
+    const te = ht && ((0, _utils.isText)(text) ? /*#__PURE__*/_react().default.createElement(_designSystem.Text, {
+      style: [t.layout.text, {
+        color: t.colors.text,
+        fontSize: t.typography.fontSize,
+        lineHeight: t.typography.lineHeight,
+        fontFamily: t.typography.fontFamily,
+        fontWeight: t.typography.fontWeight
       }, textStyle],
-      numberOfLines: tokens.defaults.textNumberOfLines
+      numberOfLines: t.defaults.textNumberOfLines
     }, text) : text);
-    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, iconElement, textElement);
-  }, [badge, center, children, direction, dot, hasText, icon, iconSize, resolvedIconColor, reverse, text, textStyle, tokens.colors.text, tokens.defaults.textNumberOfLines, tokens.layout.iconWrapper, tokens.layout.text, tokens.spacing.iconGap, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeight]);
-  const rightBorder = (0, _react().useMemo)(() => border && !gutter && !isLastColumn ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.itemBorderRight, (0, _utils.createHairlineView)({
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, ie, te);
+  }, [badge, c, children, d, dot, ht, icon, is, ric, r, text, textStyle, t.colors.text, t.defaults.textNumberOfLines, t.layout.iconWrapper, t.layout.text, t.spacing.iconGap, t.typography.fontFamily, t.typography.fontSize, t.typography.fontWeight, t.typography.lineHeight]);
+  const rb = b && !g && !ilc ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [t.layout.itemBorderRight, (0, _utils.createHairlineView)({
       position: 'right',
-      color: tokens.colors.border,
+      color: t.colors.border,
       top: 0,
       bottom: 0,
       right: 0
     })]
-  }) : null, [border, gutter, isLastColumn, tokens.colors.border, tokens.layout.itemBorderRight]);
-  const bottomBorder = (0, _react().useMemo)(() => border && !gutter && rowIndex < lastRowIndex ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.itemBorderBottom, (0, _utils.createHairlineView)({
+  }) : null;
+  const bb = b && !g && ri < lri ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [t.layout.itemBorderBottom, (0, _utils.createHairlineView)({
       position: 'bottom',
-      color: tokens.colors.border,
+      color: t.colors.border,
       left: 0,
       right: 0,
       bottom: 0
     })]
-  }) : null, [border, gutter, lastRowIndex, rowIndex, tokens.colors.border, tokens.layout.itemBorderBottom]);
-  const content = (0, _react().useMemo)(() => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: contentWrapperStyle
-  }, innerContent, rightBorder, bottomBorder), [bottomBorder, contentWrapperStyle, innerContent, rightBorder]);
-  const baseItemStyle = (0, _react().useMemo)(() => ({
-    width: _reactNative().Platform.OS === 'web' ? undefined : widthPercent,
+  }) : null;
+  const cnt = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: cws
+  }, icn, rb, bb);
+  const bis = {
+    width: _reactNative().Platform.OS === 'web' ? undefined : wp,
     flexGrow: 0,
     flexShrink: 0,
-    paddingRight: _reactNative().Platform.OS === 'web' ? undefined : gutter ? gutter : undefined,
-    marginTop: _reactNative().Platform.OS === 'web' ? undefined : gutter && rowIndex > 0 ? gutter : undefined
-  }), [gutter, rowIndex, widthPercent]);
-  const isInteractive = clickable || (0, _utils.isFunction)(onPress);
-  if (isInteractive) {
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-      style: pressableState => [baseItemStyle, typeof style === 'function' ? style(pressableState) : style, {
-        opacity: pressableState.pressed ? tokens.defaults.pressedOpacity : 1
-      }],
-      android_ripple: {
-        color: tokens.colors.active
-      },
-      onPress: onPress
-    }, rest), content);
-  }
+    paddingRight: _reactNative().Platform.OS === 'web' ? undefined : g ? g : undefined,
+    marginTop: _reactNative().Platform.OS === 'web' ? undefined : g && ri > 0 ? g : undefined
+  };
+  const ii = cl || (0, _utils.isFunction)(onPress);
+  if (ii) return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    accessibilityRole: "button",
+    style: ps => [bis, typeof style === 'function' ? style(ps) : style, {
+      opacity: ps.pressed ? t.defaults.pressedOpacity : 1
+    }],
+    android_ripple: {
+      color: t.colors.active
+    },
+    onPress: onPress
+  }, rest), cnt);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    style: [baseItemStyle, typeof style === 'function' ? style({
+    style: [bis, typeof style === 'function' ? style({
       pressed: false
     }) : style]
-  }, rest), content);
+  }, rest), cnt);
 };
-exports.GridItem = GridItem;
+const GridItem = exports.GridItem = /*#__PURE__*/_react().default.memo(GridItemImpl);
 GridItem.displayName = 'GridItem';

package/dist/cjs/components/image/Image.js

@@ -26,6 +26,8 @@ function _reactNativeSvg() {
   return data;
 }
 var _utils = require("../../utils");
+var _validate = require("../../utils/validate");
+var _useLocale = require("../config-provider/useLocale");
 var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -55,11 +57,7 @@ const splitImageStyle = style => {
   for (const key of Object.keys(flattenedRecord)) {
     const value = flattenedRecord[key];
     if (value === undefined) continue;
-    if (isLayoutStyleKey(key)) {
-      container[key] = value;
-    } else {
-      image[key] = value;
-    }
+    if (isLayoutStyleKey(key)) container[key] = value;else image[key] = value;
   }
   return {
     container: Object.keys(container).length ? container : undefined,
@@ -75,23 +73,23 @@ const PRESERVE_ASPECT_RATIO_MAP = {
   center: 'xMidYMid meet'
 };
 const resolvePreserveAspectRatio = fit => PRESERVE_ASPECT_RATIO_MAP[fit] || 'xMidYMid slice';
+const WEB_IMAGE_STYLE = _reactNative().Platform.OS === 'web' ? {
+  height: 'revert-layer',
+  width: 'revert-layer'
+} : undefined;
 const resolveSourceUri = source => {
   if (!source) return undefined;
   if (typeof source === 'number') return undefined;
   if (Array.isArray(source)) {
     for (const item of source) {
-      if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') {
-        return item.uri;
-      }
+      if (item && typeof item === 'object' && 'uri' in item && typeof item.uri === 'string') return item.uri;
     }
     return undefined;
   }
-  if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'string') {
-    return source.uri;
-  }
+  if (typeof source === 'object' && 'uri' in source && typeof source.uri === 'string') return source.uri;
   return undefined;
 };
-const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+const ImageImpl = (props, ref) => {
   const {
     src,
     source,
@@ -99,15 +97,15 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     height,
     radius,
     round,
-    fit: fitProp,
-    showLoading: showLoadingProp,
-    showError: showErrorProp,
-    loadingText: loadingTextProp,
+    fit: fitP,
+    showLoading: showLoadP,
+    showError: showErrP,
+    loadingText: loadTxtP,
     loadingIcon,
     errorIcon,
-    iconSize: iconSizeProp,
+    iconSize: iconSzP,
     loadingSize,
-    errorText: errorTextProp,
+    errorText: errTxtP,
     fallback,
     onPress,
     alt,
@@ -121,15 +119,16 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     onError,
     ...rest
   } = props;
+  const locale = (0, _useLocale.useLocale)();
   const tokens = (0, _tokens.useImageTokens)(tokensOverride);
-  const fit = fitProp ?? tokens.defaults.fit;
-  const showLoading = showLoadingProp ?? tokens.defaults.showLoading;
-  const showError = showErrorProp ?? tokens.defaults.showError;
-  const loadingText = loadingTextProp !== undefined ? loadingTextProp : tokens.defaults.loadingText;
-  const errorText = errorTextProp !== undefined ? errorTextProp : tokens.defaults.errorText;
+  const fit = fitP ?? tokens.defaults.fit;
+  const showLoading = showLoadP ?? tokens.defaults.showLoading;
+  const showError = showErrP ?? tokens.defaults.showError;
+  const loadingText = loadTxtP !== undefined ? loadTxtP : locale?.vanImage?.loading ?? tokens.defaults.loadingText;
+  const errorText = errTxtP !== undefined ? errTxtP : locale?.vanImage?.error ?? tokens.defaults.errorText;
   const {
     container: containerLayoutStyle,
-    image: imageStyleWithoutLayout
+    image: imageStyleWithLayout
   } = (0, _react().useMemo)(() => splitImageStyle(style), [style]);
   const actualSource = (0, _react().useMemo)(() => source ? source : src ? {
     uri: src
@@ -137,65 +136,66 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const sourceKey = (0, _react().useMemo)(() => {
     if (source) {
       if (typeof source === 'number') return `res:${source}`;
-      const uri = resolveSourceUri(source);
-      if (uri) return `uri:${uri}`;
+      const u = resolveSourceUri(source);
+      if (u) return `uri:${u}`;
       return 'source:unknown';
     }
+    ;
     if (src) return `src:${src}`;
     return 'none';
   }, [source, src]);
-  const resolvedAccessibilityLabel = alt ?? accessibilityLabel ?? ariaLabel;
-  const [status, setStatus] = (0, _react().useState)(() => actualSource ? 'loading' : 'idle');
+  const accLabel = alt ?? accessibilityLabel ?? ariaLabel;
+  const [state, setState] = (0, _react().useState)(() => actualSource ? 'loading' : 'idle');
   (0, _react().useEffect)(() => {
-    setStatus(actualSource ? 'loading' : 'idle');
+    setState(actualSource ? 'loading' : 'idle');
   }, [sourceKey]);
+  const onLoadRef = (0, _react().useRef)(onLoad);
+  onLoadRef.current = onLoad;
+  const onErrorRef = (0, _react().useRef)(onError);
+  onErrorRef.current = onError;
   const handleLoad = (0, _react().useCallback)(event => {
-    setStatus('loaded');
-    onLoad?.(event);
-  }, [onLoad]);
+    setState('loaded');
+    onLoadRef.current?.(event);
+  }, []);
   const handleError = (0, _react().useCallback)(event => {
-    setStatus('error');
-    onError?.(event);
-  }, [onError]);
+    setState('error');
+    onErrorRef.current?.(event);
+  }, []);
   const handleSvgLoad = (0, _react().useCallback)(() => {
     handleLoad({
       nativeEvent: {}
     });
   }, [handleLoad]);
-  const handleSvgError = (0, _react().useCallback)(error => {
+  const handleSvgError = (0, _react().useCallback)(err => {
     handleError({
       nativeEvent: {
-        error
+        error: err
       }
     });
   }, [handleError]);
   const uri = (0, _react().useMemo)(() => resolveSourceUri(actualSource), [actualSource]);
-  const normalizedUri = (0, _react().useMemo)(() => (0, _utils.isString)(uri) ? uri.toLowerCase() : undefined, [uri]);
-  const isSvg = (0, _react().useMemo)(() => !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?')), [normalizedUri]);
-  const resolvedLoadingSize = (0, _react().useMemo)(() => (0, _utils.isNumber)(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize, [loadingSize, tokens.defaults.loadingIndicatorBaseSize]);
-  const resolvedErrorIconSize = (0, _react().useMemo)(() => iconSizeProp ?? tokens.defaults.iconSize, [iconSizeProp, tokens.defaults.iconSize]);
-  const containerRole = onPress ? 'button' : undefined;
+  const normalizedUri = (0, _utils.isString)(uri) ? uri.toLowerCase() : undefined;
+  const isSvg = !!normalizedUri && (normalizedUri.endsWith('.svg') || normalizedUri.includes('.svg?') || normalizedUri.includes('/svg?'));
+  const rLoadSz = (0, _utils.isNumber)(loadingSize) ? loadingSize : tokens.defaults.loadingIndicatorBaseSize;
+  const rErrIconSz = iconSzP ?? tokens.defaults.iconSize;
+  const clickableRole = onPress ? 'button' : undefined;
   const pressableProps = onPress ? {
     onPress
   } : null;
   const renderLabel = (node, color, marginTop) => {
-    if (node == null || node === false) return null;
-    if ((0, _utils.isText)(node)) {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: [tokens.layout.label, {
-          color
-        }, marginTop ? {
-          marginTop
-        } : undefined]
-      }, node);
-    }
-    return marginTop ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    if (!(0, _validate.isRenderable)(node)) return null;
+    const textNode = (0, _utils.renderTextOrNode)(node, [tokens.layout.label, {
+      color: color
+    }, marginTop ? {
+      marginTop: marginTop
+    } : undefined].filter(Boolean));
+    return marginTop && !(0, _validate.isText)(node) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
       style: {
-        marginTop
+        marginTop: marginTop
       }
-    }, node) : node;
+    }, textNode) : textNode;
   };
-  const containerStyles = (0, _react().useMemo)(() => [tokens.layout.container, {
+  const computedContainerStyle = (0, _react().useMemo)(() => [tokens.layout.container, {
     width: width,
     height: height,
     backgroundColor: tokens.colors.background
@@ -204,34 +204,30 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   } : (0, _utils.isNumber)(radius) ? {
     borderRadius: radius
   } : undefined, containerStyle, containerLayoutStyle], [containerLayoutStyle, containerStyle, height, radius, round, tokens.colors.background, tokens.defaults.roundRadius, tokens.layout.container, width]);
-  const imageAccessibilityLabel = !onPress ? resolvedAccessibilityLabel : undefined;
-  const webImageStyle = _reactNative().Platform.OS === 'web' ? {
-    height: 'revert-layer',
-    width: 'revert-layer'
-  } : undefined;
+  const imgAccLabel = !onPress ? accLabel : undefined;
   const imageNode = actualSource ? isSvg && _reactNative().Platform.OS !== 'web' && uri ? /*#__PURE__*/_react().default.createElement(_reactNativeSvg().SvgUri, _extends({
     width: "100%",
     height: "100%",
     uri: uri,
     preserveAspectRatio: resolvePreserveAspectRatio(fit),
     accessible: !onPress,
-    accessibilityLabel: imageAccessibilityLabel
+    accessibilityLabel: imgAccLabel
   }, rest, {
-    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout],
+    style: [tokens.layout.absoluteFill, imageStyleWithLayout],
     onLoad: handleSvgLoad,
     onError: handleSvgError
   })) : /*#__PURE__*/_react().default.createElement(_reactNative().Image, _extends({
     ref: ref,
     accessible: !onPress,
-    accessibilityLabel: imageAccessibilityLabel
+    accessibilityLabel: imgAccLabel
   }, rest, {
     source: actualSource,
-    style: [tokens.layout.absoluteFill, imageStyleWithoutLayout, webImageStyle],
+    style: [tokens.layout.absoluteFill, imageStyleWithLayout, WEB_IMAGE_STYLE],
     resizeMode: resolveFitMode(fit),
     onLoad: handleLoad,
     onError: handleError
   })) : null;
-  const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, status === 'loading' && showLoading ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, state === 'loading' && showLoading && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.overlay,
     pointerEvents: "none",
     testID: "rv-image-loading"
@@ -240,27 +236,28 @@ const Image = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     size: (0, _utils.isString)(loadingSize) ? loadingSize : 'small',
     style: {
       transform: [{
-        scale: resolvedLoadingSize / tokens.defaults.loadingIndicatorBaseSize
+        scale: rLoadSz / tokens.defaults.loadingIndicatorBaseSize
       }]
     }
-  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)) : null, imageNode, status === 'error' && showError ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }), renderLabel(loadingText, tokens.colors.text, tokens.defaults.loadingLabelMarginTop)), imageNode, state === 'error' && showError && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.overlay,
     pointerEvents: "none",
     testID: "rv-image-error"
-  }, errorIcon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, errorIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.iconContainer, {
-      width: resolvedErrorIconSize,
-      height: resolvedErrorIconSize
+      width: rErrIconSz,
+      height: rErrIconSz
     }]
-  }, errorIcon) : null, fallback !== undefined && fallback !== null && fallback !== false ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)) : null, children);
+  }, errorIcon), (0, _validate.isRenderable)(fallback) ? renderLabel(fallback, tokens.colors.error) : renderLabel(errorText, tokens.colors.error)), children);
   return pressableProps ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, pressableProps, {
-    accessibilityRole: containerRole,
-    accessibilityLabel: resolvedAccessibilityLabel,
-    style: containerStyles
+    accessibilityRole: clickableRole,
+    accessibilityLabel: accLabel,
+    style: computedContainerStyle
   }), content) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    accessibilityLabel: resolvedAccessibilityLabel,
-    style: containerStyles
+    accessibilityLabel: accLabel,
+    style: computedContainerStyle
   }, content);
-});
-Image.displayName = 'Image';
+};
+const ImageForwardRef = /*#__PURE__*/_react().default.forwardRef(ImageImpl);
+const Image = /*#__PURE__*/_react().default.memo(ImageForwardRef);
 var _default = exports.default = Image;

package/dist/cjs/components/image/tokens.js

@@ -10,15 +10,16 @@ const createTokens = foundations => {
     palette,
     spacing,
     fontSize,
-    radii
+    radii,
+    typography
   } = foundations;
   return {
     defaults: {
       fit: 'cover',
       showLoading: true,
       showError: true,
-      loadingText: '加载中…',
-      errorText: '加载失败',
+      loadingText: 'Loading...',
+      errorText: 'Failed to load',
       iconSize: 20,
       loadingIndicatorBaseSize: 20,
       loadingLabelMarginTop: spacing.xs,
@@ -40,6 +41,7 @@ const createTokens = foundations => {
         justifyContent: 'center'
       },
       label: {
+        fontFamily: typography.fontFamily,
         fontSize: fontSize.xs
       },
       iconContainer: {