react-native-system-ui 0.0.1 → 0.0.2

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,7 +17,7 @@ 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）
 ```
 
 ```tsx
@@ -81,7 +80,7 @@ export const AuroraBranding = () => (
 )
 ```
 
-`themePresets.light` 等价于默认主题，`themePresets.dark` 提供深色配色，`themePresets.aurora` 演示品牌化圆角/字体的组合，可直接交由 `ThemeProvider` 或 `ConfigProvider` 注入。
+`themePresets.light` 等价于默认主题，`themePresets.dark` 提供深色配色，`themePresets.aurora` 演示品牌化圆角/字体，通过 `ThemeProvider` 配置。
 
 ## 架构总览
 
@@ -92,36 +91,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，一起把高质量的移动端交互体验带到原生世界。
+## 已交付能力
+
+- **设计系统**：ThemeProvider、createTokens、themePresets（light/dark/aurora），组件自管 tokens。
+- **基础与展示**：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/action-sheet/ActionSheet.js

@@ -0,0 +1,305 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNativeSystemIcon() {
+  const data = require("react-native-system-icon");
+  _reactNativeSystemIcon = function () {
+    return data;
+  };
+  return data;
+}
+var _hooks = require("../../hooks");
+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
+});
+const ActionSheetHeader = /*#__PURE__*/_react().default.memo(({
+  title,
+  closeable,
+  closeIcon,
+  tokens,
+  onClose
+}) => {
+  const closePress = (0, _hooks.useAriaPress)({
+    onPress: onClose
+  });
+  const {
+    colors,
+    typography
+  } = tokens;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.header
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.titleContainer
+  }, (0, _utils.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.title, {
+      color: colors.title,
+      fontSize: typography.title
+    }]
+  }, title) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.titleNode
+  }, title)), closeable ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: tokens.layout.closeButton,
+    accessibilityRole: "button",
+    hitSlop: 8
+  }, closePress.interactionProps), /*#__PURE__*/_react().default.isValidElement(closeIcon) ? /*#__PURE__*/_react().default.cloneElement(closeIcon, {
+    fill: colors.description,
+    color: colors.description
+  }) : closeIcon) : null);
+});
+ActionSheetHeader.displayName = 'ActionSheetHeader';
+const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
+  action,
+  index,
+  tokens,
+  onActionPress
+}) => {
+  const disabled = !!action.disabled;
+  const loading = !!action.loading;
+  const {
+    colors,
+    spacing,
+    typography
+  } = tokens;
+  const handlePress = (0, _react().useCallback)(() => onActionPress(action, index), [action, index, onActionPress]);
+  const actionPress = (0, _hooks.useAriaPress)({
+    disabled: disabled || loading,
+    onPress: handlePress,
+    extraProps: {
+      accessibilityRole: 'button',
+      accessibilityState: {
+        disabled,
+        busy: loading
+      },
+      testID: `rv-action-sheet-item-${index}`
+    }
+  });
+  const color = action.color ?? colors.item;
+  const name = action.name;
+  const subname = action.subname;
+  const hasIcon = !!action.icon;
+  const hasName = (0, _utils.isRenderable)(name);
+  const hasSubname = (0, _utils.isRenderable)(subname);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: ({
+      pressed
+    }) => [tokens.layout.item, hasIcon && tokens.layout.itemWithIcon, {
+      paddingVertical: spacing.vertical,
+      paddingHorizontal: spacing.horizontal,
+      backgroundColor: pressed && !disabled && !loading ? colors.itemPressedBackground : colors.itemBackground
+    }, action.style]
+  }, actionPress.interactionProps), hasIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.icon
+  }, action.icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
+    size: 20
+  }) : hasName ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.itemTextWrapper
+  }, (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, _utils.isText)(subname) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.subname, {
+      color: colors.subitem
+    }]
+  }, subname) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.subnameNode
+  }, subname) : null) : null);
+});
+ActionSheetItem.displayName = 'ActionSheetItem';
+const ActionSheetCancel = /*#__PURE__*/_react().default.memo(({
+  cancelText,
+  tokens,
+  onPress
+}) => {
+  const {
+    colors,
+    spacing,
+    typography
+  } = tokens;
+  const cancelPress = (0, _hooks.useAriaPress)({
+    onPress,
+    extraProps: {
+      accessibilityRole: 'button',
+      testID: 'rv-action-sheet-cancel'
+    }
+  });
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.cancelGap, {
+      height: spacing.cancelGap,
+      backgroundColor: colors.cancelGapBackground
+    }]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: [tokens.layout.cancel, {
+      paddingVertical: spacing.vertical,
+      paddingHorizontal: spacing.horizontal,
+      backgroundColor: colors.cancelBackground
+    }]
+  }, cancelPress.interactionProps), (0, _utils.isText)(cancelText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [tokens.layout.cancelText, {
+      color: colors.cancel,
+      fontSize: typography.item
+    }]
+  }, cancelText) : cancelText));
+});
+ActionSheetCancel.displayName = 'ActionSheetCancel';
+const ActionSheet = props => {
+  const {
+    tokensOverride,
+    visible,
+    title,
+    description,
+    cancelText,
+    actions = [],
+    closeOnClickAction: closeOnClickActionProp,
+    closeOnSelect,
+    closeable: closeableProp,
+    closeIcon = defaultCloseIcon,
+    beforeClose,
+    onSelect,
+    onCancel,
+    onClose,
+    children,
+    round: roundProp,
+    safeAreaInsetBottom: safeAreaInsetBottomProp,
+    overlay: overlayProp,
+    lockScroll: lockScrollProp,
+    style: popupStyle,
+    ...popupProps
+  } = props;
+  const tokens = (0, _tokens.useActionSheetTokens)(tokensOverride);
+  const closeable = closeableProp ?? tokens.defaults.closeable;
+  const round = roundProp ?? tokens.defaults.round;
+  const safeAreaInsetBottom = safeAreaInsetBottomProp ?? tokens.defaults.safeAreaInsetBottom;
+  const overlay = overlayProp ?? tokens.defaults.overlay;
+  const lockScroll = lockScrollProp ?? tokens.defaults.lockScroll;
+  const shouldCloseOnClickAction = closeOnClickActionProp ?? closeOnSelect ?? tokens.defaults.closeOnClickAction;
+  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) {
+      return true;
+    }
+  }, [beforeClose]);
+  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 handlePopupClose = (0, _react().useCallback)(() => {
+    emitClose(lastPopupCloseReasonRef.current);
+  }, [emitClose]);
+  const handleCancel = (0, _react().useCallback)(() => {
+    void requestClose('cancel');
+  }, [requestClose]);
+  const handleCloseIcon = (0, _react().useCallback)(() => {
+    void requestClose('close-icon');
+  }, [requestClose]);
+  const handleActionPress = (0, _react().useCallback)((action, index) => {
+    if (action.disabled || action.loading) {
+      return;
+    }
+    action.onPress?.(action);
+    action.callback?.(action);
+    onSelect?.(action, index);
+    if (shouldCloseOnClickAction) {
+      void requestClose('action');
+    }
+  }, [onSelect, requestClose, shouldCloseOnClickAction]);
+  return /*#__PURE__*/_react().default.createElement(_popup.default, _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().default.createElement(_reactNative().View, {
+    style: [tokens.layout.panel, {
+      backgroundColor: tokens.colors.background
+    }]
+  }, hasTitle ? /*#__PURE__*/_react().default.createElement(ActionSheetHeader, {
+    title: title,
+    closeable: closeable,
+    closeIcon: closeIcon,
+    tokens: tokens,
+    onClose: handleCloseIcon
+  }) : null, hasDescription ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    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
+    }]
+  }, description) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.descriptionNode
+  }, description)) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.actions
+  }, actions.map((action, index) => /*#__PURE__*/_react().default.createElement(ActionSheetItem, {
+    key: action.key ?? index,
+    action: action,
+    index: index,
+    tokens: tokens,
+    onActionPress: handleActionPress
+  }))), children, hasCancelText ? /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
+    cancelText: cancelText,
+    tokens: tokens,
+    onPress: handleCancel
+  }) : null));
+};
+ActionSheet.displayName = 'ActionSheet';
+var _default = exports.default = ActionSheet;

package/dist/cjs/area/Area.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+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,
+    columnsNum = 3,
+    value,
+    defaultValue,
+    onChange,
+    onConfirm,
+    interactionMode = 'sync',
+    ...pickerProps
+  } = props;
+  const resolvedColumnsNum = columnsNum === 1 || columnsNum === 2 || columnsNum === 3 ? columnsNum : 3;
+  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 = (0, _react().useCallback)((values, options) => {
+    onConfirm?.(values.map(String), options);
+  }, [onConfirm]);
+  return /*#__PURE__*/_react().default.createElement(_picker.default, _extends({}, pickerProps, {
+    columns: columns,
+    interactionMode: interactionMode,
+    value: normalizedValue,
+    defaultValue: normalizedDefaultValue,
+    onChange: onChange ? handleChange : undefined,
+    onConfirm: onConfirm ? handleConfirm : undefined
+  }));
+};
+Area.displayName = 'Area';
+var _default = exports.default = Area;

package/dist/cjs/area/utils.js

@@ -0,0 +1,74 @@
+"use strict";
+
+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]) => 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;
+  });
+};
+exports.buildAreaColumns = buildAreaColumns;

package/dist/cjs/avatar/Avatar.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Avatar = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _image = _interopRequireDefault(require("../image"));
+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); }
+const transparentContainerStyle = {
+  backgroundColor: 'transparent'
+};
+const Avatar = exports.Avatar = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    src,
+    source,
+    icon,
+    text,
+    size,
+    width,
+    height,
+    shape,
+    fit,
+    color,
+    backgroundColor,
+    style,
+    textStyle,
+    contentStyle,
+    tokensOverride,
+    ...pressableProps
+  } = props;
+  const tokens = (0, _tokens.useAvatarTokens)(tokensOverride);
+  const resolvedSize = size ?? tokens.defaults.size;
+  const resolvedShape = shape ?? tokens.defaults.shape;
+  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);
+  const fallbackText = text ? text.trim().slice(0, 2).toUpperCase() : undefined;
+  const fallbackContent = icon ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.iconWrapper, {
+      width: Math.min(avatarWidth, tokens.sizing.iconMaxSize),
+      height: Math.min(avatarHeight, tokens.sizing.iconMaxSize)
+    }, contentStyle]
+  }, 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);
+  const content = src || source ? /*#__PURE__*/_react().default.createElement(_image.default, {
+    src: src,
+    source: source,
+    containerStyle: transparentContainerStyle,
+    style: tokens.layout.image,
+    fit: fit ?? 'cover',
+    loadingText: null,
+    loadingSize: tokens.sizing.loadingSize,
+    showError: true,
+    fallback: fallbackContent
+  }) : fallbackContent;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    ref: ref,
+    style: [tokens.layout.container, {
+      width: avatarWidth,
+      height: avatarHeight,
+      borderRadius,
+      backgroundColor: backgroundColor ?? tokens.colors.background
+    }, style]
+  }, pressableProps), content);
+});
+Avatar.displayName = 'Avatar';
+var _default = exports.default = Avatar;