react-native-system-ui 0.0.1 → 0.0.3

package/README.md

@@ -1,13 +1,12 @@
 # react-native-system-ui
 
-React Native 端的移动组件库，交互与 API 借鉴社区成熟方案，同时借鉴 **react-native-xiaoshu** 的原子化设计，目标是产出“极简、强韧、低心智”体验的系统化 UI 资产。
+面向 React Native 的设计系统级组件库。Tokens + ThemeProvider 主题体系，按需引入、体积可控；API 统一可组合，支持可访问性与多端一致。
 
-## 愿景 / Goals
+## 特性
 
-- ✅ 用统一的设计让成熟的移动端交互体验可以在原生端复用，同时尊重 React Native 的运行特性（无 less、依赖 StyleSheet）。
-- ✅ 提供轻量的设计系统（tokens + provider + hooks），组件不直接耦合具体样式，利于按需复用与主题定制。
-- ✅ 默认约束与 API 语义尽量贴近主流移动端组件库，保证迁移成本低。
-- ✅ 文档与示例聚焦“如何落地 + 如何扩展”，减少探索成本。
+- **设计系统**：Design Tokens + ThemeProvider，无 less、基于 StyleSheet，组件不耦合具体样式，利于主题定制与按需复用。
+- **体积可控**：支持 Tree Shaking 与按需引入，单组件体积可控；详见文档站「组件体积」。
+- **API 统一**：语义贴近主流移动端组件库，迁移成本低；文档与示例聚焦落地与扩展。
 
 ## 快速开始
 
@@ -18,19 +17,35 @@ pnpm add react-native-system-ui react-native-svg
 # 如需在业务中直接使用图标组件（可 Tree Shaking）
 pnpm add react-native-system-icon
 
-# 同时保证项目已安装 react 和 react-native（>=19 / >=0.79）
+# 同时保证项目已安装 react 和 react-native（>=18.2 / >=0.79）
 ```
 
+**优先使用 ConfigProvider** 包裹根节点，这样 Button、Toast、Popup、Dialog 等都能直接使用，无需再配弹层挂载点。
+
 ```tsx
-import { ThemeProvider, Button } from 'react-native-system-ui'
+import { ConfigProvider, Button, Toast } from 'react-native-system-ui'
 
-export const Demo = () => (
-  <ThemeProvider>
-    <Button text="提交" type="primary" shadow />
-  </ThemeProvider>
+export const App = () => (
+  <ConfigProvider>
+    <Button text="提交" onPress={() => Toast.show('你好')} type="primary" shadow />
+  </ConfigProvider>
 )
 ```
 
+ConfigProvider 内置 **ThemeProvider**（主题）与 **PortalHost**（弹层挂载点）。若只包 ThemeProvider 而没挂 PortalHost，Toast/Popup/Dialog 会无法显示。
+
+### 也可以单独使用 ThemeProvider
+
+仅做主题、且确定不用弹层时，可只用 ThemeProvider；之后若要接 Toast/Popup/Dialog，需再包一层 `<Portal.Host>` 或改用 ConfigProvider。
+
+| 能力 | ConfigProvider | ThemeProvider |
+| --- | --- | --- |
+| 主题（tokens） | ✅ 内置 | ✅ |
+| 弹层挂载点（PortalHost） | ✅ 内置 | ❌ 需再包 `<Portal.Host>` |
+| 语言包（locale） | ✅ | ❌ |
+
+详见 [ConfigProvider](./docs/components/config-provider.md) / [Portal](./docs/components/portal.md)。
+
 ### 自定义 Tokens
 
 ```tsx
@@ -81,7 +96,7 @@ export const AuroraBranding = () => (
 )
 ```
 
-`themePresets.light` 等价于默认主题，`themePresets.dark` 提供深色配色，`themePresets.aurora` 演示品牌化圆角/字体的组合，可直接交由 `ThemeProvider` 或 `ConfigProvider` 注入。
+`themePresets.light` 等价于默认主题，`themePresets.dark` 提供深色配色，`themePresets.aurora` 演示品牌化圆角/字体，通过 `ThemeProvider` 配置。
 
 ## 架构总览
 
@@ -92,36 +107,30 @@ export const AuroraBranding = () => (
 
 > 这一层次化结构让“设计语言”与“交互实现”各司其职，可快速扩展到 40+ 组件而不失控。
 
-## 目前进度
-
-- ✳️ **Design System v0.1**：仅提供配色/间距/排版等基础变量与 `ThemeProvider` 通道，组件 token 由各自目录维护。
-- ✳️ **Button 组件**：完整覆盖常见按钮的 `type/size/plain/block/round/square/shadow` 语义，支持 `color`、`loading`、`icon` 等能力。
-- ✳️ **Flex 组件**：提供 24 栅格的 RN 封装，支持 `gutter`/`direction`/`wrap`/`Flex.Item span` 等能力。
-- ✳️ **Space 组件**：覆盖 `gap`、`divider`、`direction`、`wrap`、`align`、`justify` 等交互，并提供一套完整文档及 demo。
-- ✳️ **Cell 组件**：实现 `Cell`/`Cell.Group` 组合、`icon/isLink/arrowDirection/size` 等语义，兼容必填星号与自定义内容。
-- ✳️ **Divider 组件**：支持水平/垂直、虚线、细边框与文本定位 (`left/center/right`)，并开放 `lineColor` 与文本样式扩展。
-- ✳️ **Tag 组件**：支持 `type/size/plain/round/mark/closeable` API，可自定义 `color/textColor` 及关闭图标。
-- ✳️ **Checkbox 组件**：支持受控/非受控、`Checkbox.Group`、`shape/checkedColor/direction/max` 等能力。
-- ✳️ **Radio 组件**：基于 `Radio.Group` 实现单选分组，支持 `direction`、`checkedColor`、`labelPosition` 等配置。
-- ✳️ **Badge 组件**：提供数字/红点、`max` 截断、`offset` 偏移、自定义 `content`/`color` 与独立展示模式。
-- ✳️ **Grid 组件**：支持 `columnNum/gutter/square/border/direction/reverse` 等语义，`Grid.Item` 兼容 `badge/dot` 与 children 自定义内容。
-- ✳️ **Typography 组件**：提供 `Text/Title/Link`，支持 `type/size/ellipsis/strong/underline` 以及展开/收起、多语义排版。
-- ✳️ **图标**：使用 `react-native-system-icon` 按需引入图标组件（支持 Tree Shaking），支持 RN/Web。
-- ✳️ **Loading 组件**：实现 `circular/spinner` 两种指示器、`color/size/text/vertical` 等配置，满足过渡加载场景。
-- ✳️ **Empty 组件**：提供 `image/description/children` 语义，占位符支持默认/错误/网络/搜索以及自定义插画。
-- ✳️ **Progress 组件**：复刻 `percentage/strokeWidth/color/pivot` 语义，支持文案与置灰配置。
-- ✳️ **NoticeBar 组件**：支持滚动/换行、`mode=closeable|link`、自定义左右图标及配色。
-- ✳️ **Toast 组件**：提供受控与 `Toast.show/success/fail/loading/clear` 静态调用，支持遮罩、禁止点击与多种状态图标。
-- ✳️ **Dialog 组件**：封装确认/取消弹窗、圆角按钮主题、遮罩与关闭按钮，并提供 `Dialog.show/alert/confirm/clear` 静态调用。
-- ✳️ **Slider 组件**：支持单/双滑块、滚动/垂直/反向、步长与自定义按钮，拖动事件支持开始/结束回调。
-- ✳️ **ConfigProvider**：统一封装主题与多语言，支持 `theme` tokens 覆盖与 `locale` 切换。
-- ✳️ **文档**：Quick Start、架构说明、Aria Hooks、Button 指南已经上线（`docs/`）。
-
-## 路线图（下一步）
-
-1. **基础交互组件**：Cell、Space、Typography —— 打通排版体系；图标使用 `react-native-system-icon`。
-2. **反馈组件**：Toast、Loading、Dialog —— 依赖 Portal 能力（计划内）。
-3. **表单组件**：Field、Switch、Checkbox —— 与 rc-form 生态对接。
-4. **暗色模式**：扩展 tokens palette，支持按需切换。
-
-欢迎 issue / PR，一起把高质量的移动端交互体验带到原生世界。
+## 已交付能力
+
+- **设计系统**：ConfigProvider、ThemeProvider、createTokens、themePresets（light/dark/aurora），组件自管 tokens。使用 Toast/Popup/Dialog 等弹层时推荐用 ConfigProvider 包裹根节点（内置 PortalHost）。
+- **基础与展示**：Button、Badge、Cell、Collapse、Divider、Empty、Flex、Grid、Space、Tag、Typography、Loading、NoticeBar、Popup、Portal、Progress、Slider、Toast、Dialog 等，均提供文档与 demo。
+- **表单与输入**：Form、Field、Input、Checkbox、Radio、Switch、Stepper、Rate、Picker、Calendar、Search 等。
+- **导航与反馈**：Tabs、NavBar、Tabbar、ActionSheet、Notify、Overlay 等。
+- **文档**：快速上手、架构设计、路线图及组件文档站（`docs/`）。
+
+详细组件列表与状态见 [指南 / 路线图](./docs/guide/roadmap.md)。
+
+## 组件体积
+
+基于 `dist/es` 各组件目录 gzip 后相加（字节），非实际打包单 chunk 体积。当前体积较大的组件（Top 5）：
+
+| 组件 | gzip 体积 |
+| --- | --- |
+| picker | ~10 KB |
+| swiper | ~10 KB |
+| tabs | ~9 KB |
+| dropdown-menu | ~6.5 KB |
+| form | ~6.3 KB |
+
+完整列表与口径说明见文档站首页「组件体积」区域。
+
+## 版本与反馈
+
+当前为 v0.0.1，欢迎 issue / PR。

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -26,12 +26,12 @@ function _reactNativeSystemIcon() {
   return data;
 }
 var _hooks = require("../../hooks");
-var _hairline = require("../../utils/hairline");
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _loading = _interopRequireDefault(require("../loading"));
 var _popup = _interopRequireDefault(require("../popup"));
 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 defaultCloseIcon = /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
   size: 18
@@ -54,7 +54,7 @@ const ActionSheetHeader = /*#__PURE__*/_react().default.memo(({
     style: tokens.layout.header
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.titleContainer
-  }, (0, _validate.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  }, (0, _utils.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [tokens.layout.title, {
       color: colors.title,
       fontSize: typography.title
@@ -75,7 +75,7 @@ const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
   action,
   index,
   tokens,
-  onPress
+  onActionPress
 }) => {
   const disabled = !!action.disabled;
   const loading = !!action.loading;
@@ -84,9 +84,10 @@ const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
     spacing,
     typography
   } = tokens;
+  const handlePress = (0, _react().useCallback)(() => onActionPress(action, index), [action, index, onActionPress]);
   const actionPress = (0, _hooks.useAriaPress)({
     disabled: disabled || loading,
-    onPress,
+    onPress: handlePress,
     extraProps: {
       accessibilityRole: 'button',
       accessibilityState: {
@@ -100,8 +101,8 @@ const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
   const name = action.name;
   const subname = action.subname;
   const hasIcon = !!action.icon;
-  const hasName = (0, _validate.isRenderable)(name);
-  const hasSubname = (0, _validate.isRenderable)(subname);
+  const hasName = (0, _utils.isRenderable)(name);
+  const hasSubname = (0, _utils.isRenderable)(subname);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     style: ({
       pressed
@@ -110,18 +111,18 @@ const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
       paddingHorizontal: spacing.horizontal,
       backgroundColor: pressed && !disabled && !loading ? colors.itemPressedBackground : colors.itemBackground
     }, action.style]
-  }, actionPress.interactionProps), hasIcon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, actionPress.interactionProps), hasIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.icon
-  }, action.icon) : null, loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
+  }, action.icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
     size: 20
   }) : hasName ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.itemTextWrapper
-  }, (0, _validate.isText)(name) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  }, (0, _utils.isText)(name) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [tokens.layout.itemText, {
       color: disabled ? colors.disabled : color,
       fontSize: typography.item
     }]
-  }, name) : name, hasSubname ? (0, _validate.isText)(subname) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  }, name) : name, hasSubname ? (0, _utils.isText)(subname) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [tokens.layout.subname, {
       color: colors.subitem
     }]
@@ -158,7 +159,7 @@ const ActionSheetCancel = /*#__PURE__*/_react().default.memo(({
       paddingHorizontal: spacing.horizontal,
       backgroundColor: colors.cancelBackground
     }]
-  }, cancelPress.interactionProps), (0, _validate.isText)(cancelText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  }, cancelPress.interactionProps), (0, _utils.isText)(cancelText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [tokens.layout.cancelText, {
       color: colors.cancel,
       fontSize: typography.item
@@ -197,35 +198,55 @@ const ActionSheet = props => {
   const overlay = overlayProp ?? tokens.defaults.overlay;
   const lockScroll = lockScrollProp ?? tokens.defaults.lockScroll;
   const shouldCloseOnClickAction = closeOnClickActionProp ?? closeOnSelect ?? tokens.defaults.closeOnClickAction;
-  const hasTitle = (0, _validate.isRenderable)(title);
-  const hasDescription = (0, _validate.isRenderable)(description);
-  const hasCancelText = (0, _validate.isRenderable)(cancelText);
-  const runBeforeClose = _react().default.useCallback(async action => {
+  const hasTitle = (0, _utils.isRenderable)(title);
+  const hasDescription = (0, _utils.isRenderable)(description);
+  const hasCancelText = (0, _utils.isRenderable)(cancelText);
+  const lastPopupCloseReasonRef = (0, _react().useRef)('close');
+  const closingRef = (0, _react().useRef)(false);
+  const runBeforeClose = (0, _react().useCallback)(async action => {
     if (!beforeClose) return true;
     try {
       return (await beforeClose(action)) !== false;
     } catch (error) {
-      console.error(error);
       return true;
     }
   }, [beforeClose]);
-  const requestClose = _react().default.useCallback(async action => {
-    const allowed = await runBeforeClose(action);
-    if (!allowed) return;
-    onClose?.();
-  }, [onClose, runBeforeClose]);
-  const handlePopupBeforeClose = _react().default.useCallback(reason => {
+  const emitClose = (0, _react().useCallback)(reason => {
+    if (onClose) {
+      if (reason === 'cancel') {
+        onCancel?.();
+      }
+      onClose();
+      return;
+    }
+    onCancel?.();
+  }, [onCancel, onClose]);
+  const requestClose = (0, _react().useCallback)(async action => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    try {
+      const allowed = await runBeforeClose(action);
+      if (!allowed) return;
+      emitClose(action);
+    } finally {
+      closingRef.current = false;
+    }
+  }, [emitClose, runBeforeClose]);
+  const handlePopupBeforeClose = (0, _react().useCallback)(reason => {
     const action = reason === 'close-icon' ? 'close-icon' : reason === 'overlay' ? 'overlay' : 'close';
+    lastPopupCloseReasonRef.current = action;
     return runBeforeClose(action);
   }, [runBeforeClose]);
-  const handleCancel = _react().default.useCallback(() => {
-    onCancel?.();
+  const handlePopupClose = (0, _react().useCallback)(() => {
+    emitClose(lastPopupCloseReasonRef.current);
+  }, [emitClose]);
+  const handleCancel = (0, _react().useCallback)(() => {
     void requestClose('cancel');
-  }, [onCancel, requestClose]);
-  const handleCloseIcon = _react().default.useCallback(() => {
+  }, [requestClose]);
+  const handleCloseIcon = (0, _react().useCallback)(() => {
     void requestClose('close-icon');
   }, [requestClose]);
-  const handleActionPress = _react().default.useCallback((action, index) => {
+  const handleActionPress = (0, _react().useCallback)((action, index) => {
     if (action.disabled || action.loading) {
       return;
     }
@@ -240,11 +261,12 @@ const ActionSheet = props => {
     visible: visible,
     placement: "bottom",
     round: round,
+    safeAreaInsetTop: hasTitle && closeable,
     safeAreaInsetBottom: safeAreaInsetBottom,
     overlay: overlay,
     lockScroll: lockScroll,
     beforeClose: handlePopupBeforeClose,
-    onClose: onClose,
+    onClose: handlePopupClose,
     style: [tokens.layout.popup, popupStyle]
   }, popupProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [tokens.layout.panel, {
@@ -257,8 +279,8 @@ const ActionSheet = props => {
     tokens: tokens,
     onClose: handleCloseIcon
   }) : null, hasDescription ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.descriptionContainer, (0, _hairline.createHairlineBorderBottom)(tokens.colors.border)]
-  }, (0, _validate.isText)(description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.descriptionContainer, (0, _utils.createHairlineBorderBottom)(tokens.colors.border)]
+  }, (0, _utils.isText)(description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [tokens.layout.description, {
       color: tokens.colors.description,
       fontSize: tokens.typography.description
@@ -272,7 +294,7 @@ const ActionSheet = props => {
     action: action,
     index: index,
     tokens: tokens,
-    onPress: () => handleActionPress(action, index)
+    onActionPress: handleActionPress
   }))), children, hasCancelText ? /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
     cancelText: cancelText,
     tokens: tokens,

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -14,7 +14,23 @@ function _react() {
 var _picker = _interopRequireDefault(require("../picker"));
 var _utils = require("./utils");
 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 normalizeCascadeValue = (root, raw, depth) => {
+  if (!raw) return raw;
+  const input = Array.isArray(raw) ? raw.map(String) : [String(raw)];
+  const result = [];
+  let options = root;
+  for (let i = 0; i < depth; i += 1) {
+    if (!options?.length) break;
+    const wanted = input[i];
+    const nextOption = options.find(o => String(o.value) === wanted) ?? options[0];
+    if (!nextOption) break;
+    result.push(String(nextOption.value));
+    options = nextOption.children;
+  }
+  return result;
+};
 const Area = props => {
   const {
     areaList,
@@ -23,21 +39,40 @@ const Area = props => {
     defaultValue,
     onChange,
     onConfirm,
+    interactionMode = 'sync',
     ...pickerProps
   } = props;
   const resolvedColumnsNum = columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3;
-  const columns = _react().default.useMemo(() => (0, _utils.buildAreaColumns)(areaList, resolvedColumnsNum), [areaList, resolvedColumnsNum]);
-  const handleChange = _react().default.useCallback((values, options) => {
+  const {
+    province_list,
+    city_list,
+    county_list
+  } = areaList;
+  const columns = (0, _react().useMemo)(() => (0, _utils.buildAreaColumns)({
+    province_list,
+    city_list,
+    county_list
+  }, resolvedColumnsNum), [province_list, city_list, county_list, resolvedColumnsNum]);
+  const normalizedValue = (0, _react().useMemo)(() => {
+    if (value === undefined) return undefined;
+    return normalizeCascadeValue(columns, value, resolvedColumnsNum);
+  }, [columns, resolvedColumnsNum, value]);
+  const normalizedDefaultValue = (0, _react().useMemo)(() => {
+    if (defaultValue === undefined) return undefined;
+    return normalizeCascadeValue(columns, defaultValue, resolvedColumnsNum);
+  }, [columns, defaultValue, resolvedColumnsNum]);
+  const handleChange = (0, _react().useCallback)((values, options) => {
     onChange?.(values.map(String), options);
   }, [onChange]);
-  const handleConfirm = _react().default.useCallback((values, options) => {
+  const handleConfirm = (0, _react().useCallback)((values, options) => {
     onConfirm?.(values.map(String), options);
   }, [onConfirm]);
   return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
     columns: columns,
-    value: value,
-    defaultValue: defaultValue,
-    onChange: handleChange,
+    interactionMode: interactionMode,
+    value: normalizedValue,
+    defaultValue: normalizedDefaultValue,
+    onChange: onChange ? handleChange : undefined,
     onConfirm: onConfirm ? handleConfirm : undefined
   }));
 };

package/dist/cjs/components/area/utils.js

@@ -4,14 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildAreaColumns = void 0;
+const compareCode = (a, b) => a < b ? -1 : a > b ? 1 : 0;
 const sortEntries = records => {
   if (!records) return [];
-  return Object.entries(records).sort(([a], [b]) => a.localeCompare(b));
+  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);
@@ -26,43 +33,40 @@ const buildAreaColumns = (areaList, columnsNum = 3) => {
       citiesByProvince.set(provinceKey, [option]);
     }
   });
-  const countyByCity = new Map();
-  sortEntries(areaList.county_list).forEach(([code, name]) => {
-    const cityKey = getCityCode(code);
-    const option = {
-      label: name,
-      value: code
-    };
-    const existing = countyByCity.get(cityKey);
-    if (existing) {
-      existing.push(option);
-    } else {
-      countyByCity.set(cityKey, [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
     };
-    if (columnsNum > 1) {
-      const provinceKey = getProvinceCode(code);
-      const cityOptions = citiesByProvince.get(provinceKey)?.map(city => ({
-        ...city
-      })) ?? [];
-      provinceOption.children = cityOptions;
-      if (columnsNum > 2) {
-        provinceOption.children = cityOptions.map(cityOption => {
-          const cityKey = getCityCode(cityOption.value);
-          const counties = countyByCity.get(cityKey)?.map(county => ({
-            ...county
-          })) ?? [];
-          return counties.length ? {
-            ...cityOption,
-            children: counties
-          } : cityOption;
-        });
-      }
+    const provinceKey = getProvinceCode(code);
+    const cities = citiesByProvince.get(provinceKey);
+    if (cities && cities.length) {
+      provinceOption.children = cities;
     }
     return provinceOption;
   });

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

@@ -19,7 +19,7 @@ function _reactNative() {
   return data;
 }
 var _image = _interopRequireDefault(require("../image"));
-var _validate = require("../../utils/validate");
+var _utils = require("../../utils");
 var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -48,7 +48,7 @@ const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props,
   const tokens = (0, _tokens.useAvatarTokens)(tokensOverride);
   const resolvedSize = size ?? tokens.defaults.size;
   const resolvedShape = shape ?? tokens.defaults.shape;
-  const baseSize = (0, _validate.isNumber)(resolvedSize) ? resolvedSize : tokens.sizing.sizes[resolvedSize];
+  const baseSize = (0, _utils.isNumber)(resolvedSize) ? resolvedSize : tokens.sizing.sizes[resolvedSize];
   const avatarWidth = width ?? baseSize;
   const avatarHeight = height ?? baseSize;
   const borderRadius = resolvedShape === 'circle' ? Math.min(avatarWidth, avatarHeight) / 2 : Math.max(tokens.radii.squareMin, Math.min(avatarWidth, avatarHeight) / tokens.radii.squareDivisor);
@@ -58,14 +58,14 @@ const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props,
       width: Math.min(avatarWidth, tokens.sizing.iconMaxSize),
       height: Math.min(avatarHeight, tokens.sizing.iconMaxSize)
     }, contentStyle]
-  }, icon) : fallbackText ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+  }, icon) : fallbackText && /*#__PURE__*/_react().default.createElement(_reactNative().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
-  }, fallbackText) : null;
+  }, fallbackText);
   const content = src || source ? /*#__PURE__*/_react().default.createElement(_image.default, {
     src: src,
     source: source,