react-native-system-ui 0.0.5 → 0.0.7

package/dist/cjs/components/toast/Toast.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Toast = void 0;
+exports.default = exports.ToastContent = exports.Toast = void 0;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -21,7 +21,6 @@ function _reactNative() {
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
 var _safeAreaView = require("../safe-area-view");
 var _hooks = require("../../hooks");
-var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
 var _loading = _interopRequireDefault(require("../loading"));
 function _reactNativeSystemIcon() {
   const data = require("react-native-system-icon");
@@ -30,20 +29,19 @@ function _reactNativeSystemIcon() {
   };
   return data;
 }
-var _overlay = require("../overlay");
 var _validate = require("../../utils/validate");
+var _platform = require("../../platform");
 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 Toast = props => {
+const ToastContent = props => {
   const {
     visible,
     message,
     icon,
     type = 'info',
     iconSize,
-    loadingType = 'circular',
     duration = 2000,
     position = 'middle',
     forbidClick = false,
@@ -70,15 +68,13 @@ const Toast = props => {
     height: windowHeight
   } = (0, _reactNative().useWindowDimensions)();
   const durationMs = (0, _validate.isFiniteNumber)(duration) ? Math.max(0, duration) : 0;
-  const {
-    mounted,
-    animated
-  } = (0, _usePresenceAnimation.usePresenceAnimation)(visible, {
-    duration: tokens.animationDuration
-  });
+  const [mounted, setMounted] = (0, _react().useState)(visible);
+  const animated = (0, _react().useRef)(new (_reactNative().Animated.Value)(visible ? 1 : 0)).current;
+  const animationRef = (0, _react().useRef)(null);
+  const animationIdRef = (0, _react().useRef)(0);
   const {
     zIndex: stackZIndex
-  } = (0, _overlay.useOverlayStack)({
+  } = (0, _hooks.useOverlayStack)({
     visible: mounted,
     type: 'toast'
   });
@@ -87,7 +83,7 @@ const Toast = props => {
   const positionOffset = windowHeight > 0 ? Math.round(windowHeight * tokens.positionOffsetRatio) : tokens.positionOffsetMin;
   const needsSafeAreaTop = safeAreaInsetTopProp !== undefined ? safeAreaInsetTopProp : position === 'top';
   const needsSafeAreaBottom = safeAreaInsetBottomProp !== undefined ? safeAreaInsetBottomProp : position === 'bottom';
-  const positionStyle = position === 'top' ? {
+  const positionStyle = (0, _react().useMemo)(() => position === 'top' ? {
     justifyContent: 'flex-start',
     paddingTop: positionOffset
   } : position === 'bottom' ? {
@@ -95,7 +91,41 @@ const Toast = props => {
     paddingBottom: positionOffset
   } : {
     justifyContent: 'center'
-  };
+  }, [position, positionOffset]);
+  (0, _react().useEffect)(() => {
+    animationIdRef.current += 1;
+    const animationId = animationIdRef.current;
+    animationRef.current?.stop();
+    const durationValue = tokens.animationDuration;
+    if (visible) {
+      setMounted(true);
+      animationRef.current = _reactNative().Animated.timing(animated, {
+        toValue: 1,
+        duration: durationValue,
+        easing: _reactNative().Easing.out(_reactNative().Easing.cubic),
+        useNativeDriver: _platform.nativeDriverEnabled,
+        isInteraction: false
+      });
+      animationRef.current.start();
+    } else {
+      animationRef.current = _reactNative().Animated.timing(animated, {
+        toValue: 0,
+        duration: durationValue,
+        easing: _reactNative().Easing.out(_reactNative().Easing.cubic),
+        useNativeDriver: _platform.nativeDriverEnabled,
+        isInteraction: false
+      });
+      animationRef.current.start(({
+        finished
+      }) => {
+        if (!finished || animationId !== animationIdRef.current) return;
+        setMounted(false);
+      });
+    }
+  }, [animated, tokens.animationDuration, visible]);
+  (0, _react().useEffect)(() => () => {
+    animationRef.current?.stop();
+  }, []);
   (0, _react().useEffect)(() => {
     let timer = null;
     if (visible) {
@@ -109,6 +139,13 @@ const Toast = props => {
       if (timer) clearTimeout(timer);
     };
   }, [durationMs, onClose, visible]);
+  (0, _react().useEffect)(() => {
+    if (!visible) return;
+    if (!(0, _validate.isText)(message)) return;
+    const text = String(message);
+    if (!text) return;
+    _reactNative().AccessibilityInfo.announceForAccessibility?.(text);
+  }, [message, visible]);
   (0, _react().useEffect)(() => {
     let openedTimer = null;
     if (visible) {
@@ -133,9 +170,9 @@ const Toast = props => {
       onClosed?.();
     }
   }, [mounted, onClosed]);
-  const handleClose = () => {
+  const handleClose = (0, _react().useCallback)(() => {
     onClose?.();
-  };
+  }, [onClose]);
   const toastPress = (0, _hooks.useAriaPress)({
     disabled: !closeOnClick,
     onPress: handleClose,
@@ -145,7 +182,7 @@ const Toast = props => {
       accessibilityLiveRegion: 'assertive'
     }
   });
-  const renderIcon = () => {
+  const iconNode = (0, _react().useMemo)(() => {
     if (icon) return icon;
     const resolvedIconSize = iconSize ?? tokens.iconSize;
     switch (type) {
@@ -163,17 +200,15 @@ const Toast = props => {
         });
       case 'loading':
         return loadingIndicator ?? /*#__PURE__*/_react().default.createElement(_loading.default, {
-          type: loadingType,
           color: colors.text,
           size: resolvedIconSize
         });
       default:
         return null;
     }
-  };
-  const iconNode = renderIcon();
+  }, [colors.text, icon, iconSize, loadingIndicator, tokens.iconSize, type]);
   const isTextToast = type === 'info' && !iconNode;
-  const boxStyle = isTextToast ? {
+  const boxStyle = (0, _react().useMemo)(() => isTextToast ? {
     minWidth: tokens.textMinWidth,
     minHeight: 0,
     paddingVertical: tokens.textPaddingVertical,
@@ -182,17 +217,17 @@ const Toast = props => {
     minWidth: tokens.defaultWidth,
     minHeight: tokens.defaultMinHeight,
     padding: tokens.defaultPadding
-  };
-  const toastStyle = {
+  }, [isTextToast, tokens.defaultMinHeight, tokens.defaultPadding, tokens.defaultWidth, tokens.textMinWidth, tokens.textPaddingHorizontal, tokens.textPaddingVertical]);
+  const toastStyle = (0, _react().useMemo)(() => ({
     borderRadius: tokens.radius,
     opacity: closeOnClick && toastPress.states.pressed ? tokens.pressedOpacity : animated,
     backgroundColor: tokens.colors.variants[type],
     maxWidth: tokens.maxWidth,
     ...boxStyle
-  };
+  }), [animated, boxStyle, closeOnClick, toastPress.states.pressed, tokens.colors.variants, tokens.maxWidth, tokens.pressedOpacity, tokens.radius, type]);
   if (!mounted) return null;
   const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
-  return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.backdrop, {
       backgroundColor: tokens.colors.transparent
     }, positionStyle, stackZIndex ? {
@@ -234,13 +269,22 @@ const Toast = props => {
   }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
     edge: "bottom",
     pointerEvents: "none"
-  })));
+  }));
 };
+exports.ToastContent = ToastContent;
+const Toast = props => /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(ToastContent, props));
 exports.Toast = Toast;
 const styles = _reactNative().StyleSheet.create({
   backdrop: {
     flex: 1,
-    alignItems: 'center'
+    alignItems: 'center',
+    ...(_reactNative().Platform.OS === 'web' ? {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    } : {})
   },
   overlay: {
     ..._reactNative().StyleSheet.absoluteFillObject
@@ -253,5 +297,6 @@ const styles = _reactNative().StyleSheet.create({
     textAlign: 'center'
   }
 });
+ToastContent.displayName = 'ToastContent';
 Toast.displayName = 'Toast';
 var _default = exports.default = Toast;

package/dist/cjs/components/toast/imperative.js

@@ -13,7 +13,7 @@ function _react() {
 }
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
 var _utils = require("../../utils");
-var _Toast = _interopRequireDefault(require("./Toast"));
+var _Toast = require("./Toast");
 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); }
@@ -90,7 +90,7 @@ const ToastPortal = ({
     options.onClosed?.();
     removeToast(id);
   }, [id, options]);
-  return /*#__PURE__*/_react().default.createElement(_Toast.default, _extends({}, options, {
+  return /*#__PURE__*/_react().default.createElement(_Toast.ToastContent, _extends({}, options, {
     visible: visible,
     onClose: handleClose,
     onClosed: handleClosed

package/dist/cjs/hooks/gesture/useGestureScroll.js

@@ -19,8 +19,7 @@ function _reactNative() {
   return data;
 }
 const DEFAULT_THROTTLE = 16;
-const VELOCITY_NORMALIZER = 1000; // convert delta/ms to px per second
-
+const VELOCITY_NORMALIZER = 1000;
 const useGestureScroll = (options = {}) => {
   const {
     axis = 'y',

package/dist/cjs/hooks/index.js

@@ -19,18 +19,6 @@ Object.defineProperty(exports, "useCountDown", {
     return _useCountDown.default;
   }
 });
-var _usePresenceAnimation = require("./usePresenceAnimation");
-Object.keys(_usePresenceAnimation).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _usePresenceAnimation[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _usePresenceAnimation[key];
-    }
-  });
-});
 var _useSafeAreaPadding = require("./useSafeAreaPadding");
 Object.keys(_useSafeAreaPadding).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -67,6 +55,18 @@ Object.keys(_gesture).forEach(function (key) {
     }
   });
 });
+var _overlay = require("./overlay");
+Object.keys(_overlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _overlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _overlay[key];
+    }
+  });
+});
 var _useControllableValue = _interopRequireDefault(require("./useControllableValue"));
 var _useCountDown = _interopRequireDefault(require("./useCountDown"));
 var _useHairline = require("./useHairline");

package/dist/cjs/hooks/overlay/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _OverlayStackStore = require("./OverlayStackStore");
+Object.keys(_OverlayStackStore).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OverlayStackStore[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _OverlayStackStore[key];
+    }
+  });
+});
+var _useOverlayStack = require("./useOverlayStack");
+Object.keys(_useOverlayStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useOverlayStack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useOverlayStack[key];
+    }
+  });
+});

package/dist/cjs/hooks/useHairline.js

@@ -21,10 +21,6 @@ function _reactNative() {
 var _hairline = require("../utils/hairline");
 var _validate = require("../utils/validate");
 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); }
-/**
- * A hook to generate a hairline (separator) view that respects the container's padding.
- * Useful for list items, cells, etc.
- */
 const useHairline = ({
   show = true,
   containerStyle,

package/dist/cjs/platform/scrollLock.js

@@ -15,7 +15,7 @@ const setBodyScrollLocked = nextLocked => {
     return;
   }
   if (!nextLocked && locked) {
-    document.body.style.overflow = previousOverflow;
+    document.body.style.overflow = previousOverflow || 'auto';
     locked = false;
   }
 };

package/dist/cjs/utils/compare.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shallowEqualObject = exports.shallowEqualArray = void 0;
+const shallowEqualArray = (a = [], b = []) => {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+exports.shallowEqualArray = shallowEqualArray;
+const shallowEqualObject = (prev, next) => {
+  if (prev === next) return true;
+  if (!prev || !next) return false;
+  const prevKeys = Object.keys(prev);
+  const nextKeys = Object.keys(next);
+  if (prevKeys.length !== nextKeys.length) return false;
+  for (const key of prevKeys) {
+    if (prev[key] !== next[key]) return false;
+  }
+  return true;
+};
+exports.shallowEqualObject = shallowEqualObject;

package/dist/cjs/utils/index.js

@@ -25,6 +25,17 @@ Object.keys(_color).forEach(function (key) {
     }
   });
 });
+var _compare = require("./compare");
+Object.keys(_compare).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _compare[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _compare[key];
+    }
+  });
+});
 var _createPlatformShadow = require("./createPlatformShadow");
 Object.keys(_createPlatformShadow).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/es/components/action-sheet/ActionSheet.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { Close } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
@@ -231,28 +231,18 @@ const ActionSheet = props => {
       void requestClose('action');
     }
   }, [onSelect, requestClose, shouldCloseOnClickAction]);
-  return /*#__PURE__*/React.createElement(Popup, _extends({
-    visible: visible,
-    placement: "bottom",
-    round: round,
-    safeAreaInsetTop: hasTitle && closeable,
-    safeAreaInsetBottom: safeAreaInsetBottom,
-    overlay: overlay,
-    lockScroll: lockScroll,
-    beforeClose: handlePopupBeforeClose,
-    onClose: handlePopupClose,
-    style: [tokens.layout.popup, popupStyle]
-  }, popupProps), /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.panel, {
-      backgroundColor: tokens.colors.background
-    }]
-  }, hasTitle ? /*#__PURE__*/React.createElement(ActionSheetHeader, {
+  const popupStyleMemo = useMemo(() => [tokens.layout.popup, popupStyle], [popupStyle, tokens.layout.popup]);
+  const panelStyle = useMemo(() => [tokens.layout.panel, {
+    backgroundColor: tokens.colors.background
+  }], [tokens.colors.background, tokens.layout.panel]);
+  const headerNode = useMemo(() => hasTitle ? /*#__PURE__*/React.createElement(ActionSheetHeader, {
     title: title,
     closeable: closeable,
     closeIcon: closeIcon,
     tokens: tokens,
     onClose: handleCloseIcon
-  }) : null, hasDescription ? /*#__PURE__*/React.createElement(View, {
+  }) : null, [closeIcon, closeable, handleCloseIcon, hasTitle, title, tokens]);
+  const descriptionNode = useMemo(() => hasDescription ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.descriptionContainer, createHairlineBorderBottom(tokens.colors.border)]
   }, isText(description) ? /*#__PURE__*/React.createElement(Text, {
     style: [tokens.layout.description, {
@@ -261,19 +251,35 @@ const ActionSheet = props => {
     }]
   }, description) : /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.descriptionNode
-  }, description)) : null, /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.actions
-  }, actions.map((action, index) => /*#__PURE__*/React.createElement(ActionSheetItem, {
+  }, description)) : null, [description, hasDescription, tokens.colors.border, tokens.colors.description, tokens.layout.description, tokens.layout.descriptionContainer, tokens.layout.descriptionNode, tokens.typography.description]);
+  const actionNodes = useMemo(() => actions.map((action, index) => /*#__PURE__*/React.createElement(ActionSheetItem, {
     key: action.key ?? index,
     action: action,
     index: index,
     tokens: tokens,
     onActionPress: handleActionPress
-  }))), children, hasCancelText ? /*#__PURE__*/React.createElement(ActionSheetCancel, {
+  })), [actions, handleActionPress, tokens]);
+  const cancelNode = useMemo(() => hasCancelText ? /*#__PURE__*/React.createElement(ActionSheetCancel, {
     cancelText: cancelText,
     tokens: tokens,
     onPress: handleCancel
-  }) : null));
+  }) : null, [cancelText, handleCancel, hasCancelText, tokens]);
+  return /*#__PURE__*/React.createElement(Popup, _extends({
+    visible: visible,
+    placement: "bottom",
+    round: round,
+    safeAreaInsetTop: hasTitle && closeable,
+    safeAreaInsetBottom: safeAreaInsetBottom,
+    overlay: overlay,
+    lockScroll: lockScroll,
+    beforeClose: handlePopupBeforeClose,
+    onClose: handlePopupClose,
+    style: popupStyleMemo
+  }, popupProps), /*#__PURE__*/React.createElement(View, {
+    style: panelStyle
+  }, headerNode, descriptionNode, /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.actions
+  }, actionNodes), children, cancelNode));
 };
 ActionSheet.displayName = 'ActionSheet';
 export default ActionSheet;

package/dist/es/components/area/Area.js

@@ -1,7 +1,73 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Picker from '../picker';
-import { buildAreaColumns } from './utils';
+const compareCode = (a, b) => a < b ? -1 : a > b ? 1 : 0;
+const sortEntries = records => {
+  if (!records) return [];
+  return Object.entries(records).sort(([a], [b]) => compareCode(a, b));
+};
+const getProvinceCode = code => code.slice(0, 2);
+const getCityCode = code => code.slice(0, 4);
+const buildAreaColumns = (areaList, columnsNum = 3) => {
+  const provinces = sortEntries(areaList.province_list);
+  if (columnsNum === 1) {
+    return provinces.map(([code, name]) => ({
+      label: name,
+      value: code
+    }));
+  }
+  const citiesByProvince = new Map();
+  sortEntries(areaList.city_list).forEach(([code, name]) => {
+    const provinceKey = getProvinceCode(code);
+    const option = {
+      label: name,
+      value: code
+    };
+    const existing = citiesByProvince.get(provinceKey);
+    if (existing) {
+      existing.push(option);
+    } else {
+      citiesByProvince.set(provinceKey, [option]);
+    }
+  });
+  if (columnsNum === 3) {
+    const countiesByCity = new Map();
+    sortEntries(areaList.county_list).forEach(([code, name]) => {
+      const cityKey = getCityCode(code);
+      const option = {
+        label: name,
+        value: code
+      };
+      const existing = countiesByCity.get(cityKey);
+      if (existing) {
+        existing.push(option);
+      } else {
+        countiesByCity.set(cityKey, [option]);
+      }
+    });
+    citiesByProvince.forEach(cityOptions => {
+      cityOptions.forEach(cityOption => {
+        const cityKey = getCityCode(cityOption.value);
+        const counties = countiesByCity.get(cityKey);
+        if (counties && counties.length) {
+          cityOption.children = counties;
+        }
+      });
+    });
+  }
+  return provinces.map(([code, name]) => {
+    const provinceOption = {
+      label: name,
+      value: code
+    };
+    const provinceKey = getProvinceCode(code);
+    const cities = citiesByProvince.get(provinceKey);
+    if (cities && cities.length) {
+      provinceOption.children = cities;
+    }
+    return provinceOption;
+  });
+};
 const normalizeCascadeValue = (root, raw, depth) => {
   if (!raw) return raw;
   const input = Array.isArray(raw) ? raw.map(String) : [String(raw)];
@@ -28,19 +94,19 @@ const Area = props => {
     interactionMode = 'sync',
     ...pickerProps
   } = props;
-  const resolvedColumnsNum = columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3;
+  const resolvedColumnsNum = useMemo(() => columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3, [columnsNum]);
   const {
     province_list,
     city_list,
     county_list
   } = areaList;
-  const columns = buildAreaColumns({
+  const columns = useMemo(() => buildAreaColumns({
     province_list,
     city_list,
     county_list
-  }, resolvedColumnsNum);
-  const normalizedValue = value === undefined ? undefined : normalizeCascadeValue(columns, value, resolvedColumnsNum);
-  const normalizedDefaultValue = defaultValue === undefined ? undefined : normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum);
+  }, resolvedColumnsNum), [city_list, county_list, province_list, resolvedColumnsNum]);
+  const normalizedValue = useMemo(() => value === undefined ? undefined : normalizeCascadeValue(columns, value, resolvedColumnsNum), [columns, resolvedColumnsNum, value]);
+  const normalizedDefaultValue = useMemo(() => defaultValue === undefined ? undefined : normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum), [columns, defaultValue, resolvedColumnsNum]);
   const handleChange = useCallback((values, options) => {
     onChange?.(values.map(String), options);
   }, [onChange]);

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

@@ -0,0 +1,5 @@
+import { createComponentTokensHook } from '../../design-system';
+const createAreaTokens = _foundations => {
+  return {};
+};
+export const useAreaTokens = createComponentTokensHook('area', createAreaTokens);

package/dist/es/components/avatar/Avatar.js

@@ -1,9 +1,42 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 import Image from '../image';
 import { isNumber } from '../../utils';
 import { useAvatarTokens } from './tokens';
+export const AvatarFallbackText = /*#__PURE__*/React.forwardRef(({
+  children,
+  color,
+  style
+}, ref) => {
+  const tokens = useAvatarTokens();
+  const resolvedStyle = StyleSheet.flatten([tokens.layout.text, {
+    color: color ?? tokens.colors.text,
+    fontWeight: tokens.typography.fontWeight
+  }, style]);
+  return /*#__PURE__*/React.createElement(Text, {
+    ref: ref,
+    style: resolvedStyle,
+    numberOfLines: 1
+  }, children);
+});
+AvatarFallbackText.displayName = 'Avatar.FallbackText';
+export const AvatarImage = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const tokens = useAvatarTokens();
+  return /*#__PURE__*/React.createElement(Image, _extends({
+    ref: ref
+  }, props, {
+    containerStyle: [{
+      backgroundColor: tokens.colors.transparent
+    }, props.containerStyle],
+    style: [tokens.layout.image, props.style],
+    fit: props.fit ?? 'cover',
+    loadingText: props.loadingText ?? null,
+    loadingSize: props.loadingSize ?? tokens.sizing.loadingSize,
+    showError: props.showError ?? true
+  }));
+});
+AvatarImage.displayName = 'Avatar.Image';
 export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     src,
@@ -20,6 +53,7 @@ export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
     style,
     textStyle,
     contentStyle,
+    children,
     tokensOverride,
     ...pressableProps
   } = props;
@@ -39,15 +73,13 @@ export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
       width: Math.min(avatarWidth, tokens.sizing.iconMaxSize),
       height: Math.min(avatarHeight, tokens.sizing.iconMaxSize)
     }, contentStyle]
-  }, icon) : fallbackText && /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.text, {
-      color: color ?? tokens.colors.text,
-      fontSize: Math.min(avatarWidth, avatarHeight) * tokens.typography.fallbackTextScale,
-      fontWeight: tokens.typography.fontWeight
-    }, textStyle],
-    numberOfLines: 1
+  }, icon) : fallbackText && /*#__PURE__*/React.createElement(AvatarFallbackText, {
+    color: color,
+    style: [{
+      fontSize: Math.min(avatarWidth, avatarHeight) * tokens.typography.fallbackTextScale
+    }, textStyle]
   }, fallbackText);
-  const content = src || source ? /*#__PURE__*/React.createElement(Image, {
+  const content = children ?? (src || source ? /*#__PURE__*/React.createElement(AvatarImage, {
     src: src,
     source: source,
     containerStyle: transparentContainerStyle,
@@ -57,7 +89,7 @@ export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
     loadingSize: tokens.sizing.loadingSize,
     showError: true,
     fallback: fallbackContent
-  }) : fallbackContent;
+  }) : fallbackContent);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: ref,
     style: [tokens.layout.container, {