react-native-system-ui 0.0.1-beta0 → 0.0.2

package/README.md

@@ -1,37 +1,120 @@
-# react-native-mobile
+# react-native-system-ui
 
-#### 介绍
-react native mobile 移动端组件库
+面向 React Native 的设计系统级组件库。Tokens + ThemeProvider 主题体系，按需引入、体积可控；API 统一可组合，支持可访问性与多端一致。
 
-#### 软件架构
-软件架构说明
+## 特性
 
+- **设计系统**：Design Tokens + ThemeProvider，无 less、基于 StyleSheet，组件不耦合具体样式，利于主题定制与按需复用。
+- **体积可控**：支持 Tree Shaking 与按需引入，单组件体积可控；详见文档站「组件体积」。
+- **API 统一**：语义贴近主流移动端组件库，迁移成本低；文档与示例聚焦落地与扩展。
 
-#### 安装教程
+## 快速开始
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+```bash
+# 安装（推荐 pnpm/yarn）
+pnpm add react-native-system-ui react-native-svg
 
-#### 使用说明
+# 如需在业务中直接使用图标组件（可 Tree Shaking）
+pnpm add react-native-system-icon
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+# 同时保证项目已安装 react 和 react-native（>=18.2 / >=0.79）
+```
 
-#### 参与贡献
+```tsx
+import { ThemeProvider, Button } from 'react-native-system-ui'
 
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
+export const Demo = () => (
+  <ThemeProvider>
+    <Button text="提交" type="primary" shadow />
+  </ThemeProvider>
+)
+```
 
+### 自定义 Tokens
 
-#### 特技
+```tsx
+import { ThemeProvider, createTokens } from 'react-native-system-ui'
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+const foundations = createTokens({
+  palette: {
+    primary: {
+      500: '#111f8f',
+      600: '#0b1461',
+    },
+  },
+})
+
+export const App = ({ children }) => (
+  <ThemeProvider
+    value={{
+      foundations,
+      components: {
+        button: {
+          defaults: {
+            size: 'large',
+          },
+        },
+      },
+    }}
+  >
+    {children}
+  </ThemeProvider>
+)
+```
+
+### 主题预设
+
+```tsx
+import { ThemeProvider, themePresets } from 'react-native-system-ui'
+
+export const DarkPage = () => (
+  <ThemeProvider value={themePresets.dark}>
+    <Button text="夜间下单" type="primary" block />
+  </ThemeProvider>
+)
+
+export const AuroraBranding = () => (
+  <ThemeProvider value={themePresets.aurora}>
+    <Button text="Aurora" type="success" plain />
+  </ThemeProvider>
+)
+```
+
+`themePresets.light` 等价于默认主题，`themePresets.dark` 提供深色配色，`themePresets.aurora` 演示品牌化圆角/字体，通过 `ThemeProvider` 配置。
+
+## 架构总览
+
+| 层级 | 说明 |
+| --- | --- |
+| `src/design-system` | 仅承载基础设计变量（颜色、排版、间距、圆角等）与 `ThemeProvider`，只做公共部分。 |
+| `src/components/*` | 每个组件自带 `tokens.ts`/`useXXXTokens.ts` 等文件，负责自身的 token 推导与样式实现（Button 为首个示例）。 |
+
+> 这一层次化结构让“设计语言”与“交互实现”各司其职，可快速扩展到 40+ 组件而不失控。
+
+## 已交付能力
+
+- **设计系统**：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/action-sheet/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useActionSheetTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.useActionSheetTokens;
+  }
+});
+var _ActionSheet = _interopRequireDefault(require("./ActionSheet"));
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _ActionSheet.default;

package/dist/cjs/action-sheet/tokens.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useActionSheetTokens = exports.createActionSheetTokens = void 0;
+var _designSystem = require("../../design-system");
+const createActionSheetTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize
+  } = foundations;
+  return {
+    defaults: {
+      closeOnClickAction: false,
+      closeable: true,
+      round: true,
+      safeAreaInsetBottom: true,
+      overlay: true,
+      lockScroll: true
+    },
+    layout: {
+      popup: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingBottom: 0
+      },
+      panel: {
+        width: '100%',
+        maxHeight: '80%'
+      },
+      header: {
+        position: 'relative',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16
+      },
+      titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      title: {
+        fontWeight: '600',
+        textAlign: 'center'
+      },
+      titleNode: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      closeButton: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: 48,
+        height: 48,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      descriptionContainer: {
+        paddingTop: 12,
+        paddingBottom: 20,
+        paddingHorizontal: 16
+      },
+      description: {
+        textAlign: 'center',
+        lineHeight: 20
+      },
+      descriptionNode: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      actions: {
+        width: '100%'
+      },
+      item: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%'
+      },
+      itemWithIcon: {
+        flexDirection: 'row',
+        justifyContent: 'center'
+      },
+      itemTextWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      itemText: {
+        lineHeight: 24
+      },
+      subname: {
+        marginTop: 4,
+        fontSize: 12,
+        lineHeight: 18
+      },
+      subnameNode: {
+        marginTop: 4
+      },
+      icon: {
+        marginRight: 12
+      },
+      cancelGap: {
+        width: '100%',
+        marginBottom: 0
+      },
+      cancel: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      cancelText: {
+        lineHeight: 24
+      }
+    },
+    colors: {
+      background: '#ffffff',
+      title: palette.default[900],
+      description: palette.default[500],
+      item: palette.default[900],
+      subitem: palette.default[500],
+      cancel: palette.default[900],
+      disabled: palette.default[400],
+      border: palette.default[200],
+      itemBackground: '#ffffff',
+      itemPressedBackground: palette.default[100],
+      cancelBackground: '#ffffff',
+      cancelGapBackground: palette.default[100] ?? '#f1f2f5'
+    },
+    typography: {
+      title: fontSize.lg,
+      item: fontSize.md,
+      description: fontSize.sm
+    },
+    spacing: {
+      horizontal: spacing.md,
+      vertical: 14,
+      cancelGap: 8
+    }
+  };
+};
+exports.createActionSheetTokens = createActionSheetTokens;
+const useActionSheetTokens = exports.useActionSheetTokens = (0, _designSystem.createComponentTokensHook)('actionSheet', createActionSheetTokens);

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;