@unif/react-native-ui 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 dream-god1
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+# @unif/react-native-ui
+
+UNIF React Native 基础 UI 组件库 — 提供原子、基础、复合三层组件体系。
+
+## 安装
+
+```sh
+npm install @unif/react-native-ui
+# 或
+yarn add @unif/react-native-ui
+```
+
+## 使用
+
+```tsx
+import { Button, Input, Avatar, ListItem, tokens } from '@unif/react-native-ui';
+
+<Button title="提交" onPress={handleSubmit} />
+<Input placeholder="请输入..." onChangeText={setText} />
+<Avatar name="张三" size={40} />
+```
+
+## 组件列表
+
+### 布局
+
+| 组件 | 说明 |
+|------|------|
+| Row | 水平布局容器 |
+| Column | 垂直布局容器 |
+| Center | 居中布局容器 |
+| Space | 间距组件 |
+
+### 原子 (Atom)
+
+| 组件 | 说明 |
+|------|------|
+| Text | 文本组件 |
+| Touchable | 触摸反馈容器 |
+| Divider | 分割线 |
+| Avatar | 头像 |
+| WaveAnimation | 波形动画 |
+
+### 基础 (Base)
+
+| 组件 | 说明 |
+|------|------|
+| Button | 按钮 |
+| Input | 输入框（含 toolbar 插槽） |
+| Chip | 标签/筹码 |
+| Popover | 气泡弹出层 |
+| ActionSheet | 操作面板 |
+
+### 复合 (Composite)
+
+| 组件 | 说明 |
+|------|------|
+| ListItem | 列表项（thumb + title + extra 布局） |
+
+## 主题
+
+通过 `configure()` 自定义 token，通过 `tokens` 访问当前主题值：
+
+```tsx
+import { configure, tokens } from '@unif/react-native-ui';
+
+configure({ colorPrimary: '#1890FF' });
+```
+
+## 语义样式
+
+每个组件支持 `styles` prop 进行语义化样式覆盖：
+
+```tsx
+<Button
+  title="确定"
+  styles={{ root: { borderRadius: 20 }, title: { fontSize: 16 } }}
+/>
+```
+
+## 兼容性
+
+| @unif/react-native-ui | React Native | React | 状态 |
+|------------------------|-------------|-------|------|
+| 0.1.x | >= 0.71 | >= 18 | ✅ |
+| 0.1.x | 0.74.x | 18.x | ✅ 已验证（PECPortal） |
+| 0.1.x | 0.81.x | 19.x | ✅ 已验证（example app） |
+
+### API 兼容说明
+
+- `Pressable`: RN >= 0.63 ✅
+- `StyleSheet.compose`: RN >= 0.66 ✅
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+- [Testing strategy](TESTING.md)
+
+## License
+
+MIT

package/lib/module/README.md

@@ -0,0 +1,99 @@
+# @unif/react-native-ui 基础组件
+
+借鉴 antd v6 语义化设计 + ant-design-mobile-rn 实践，提供基础 UI 组件。
+
+## 组件总览
+
+### 布局
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Row | 水平布局 | [row/index.md](./row/index.md) |
+| Column | 垂直布局 | [column/index.md](./column/index.md) |
+| Center | 居中布局 | [center/index.md](./center/index.md) |
+| Space | 间距占位 | [space/index.md](./space/index.md) |
+
+### 通用
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Text | 语义化文字 | [text/index.md](./text/index.md) |
+| Button | 语义化按钮 | [button/index.md](./button/index.md) |
+| Touchable | 统一触摸反馈 | [touchable/index.md](./touchable/index.md) |
+| Divider | 分割线 | [divider/index.md](./divider/index.md) |
+| ListItem | 列表行 | [list-item/index.md](./list-item/index.md) |
+| mergeStyles | 样式合并工具 | [hooks/index.md](./hooks/index.md) |
+
+## 引入方式
+
+```tsx
+import { Row, Column, Center, Space, Text, Button, Touchable, Divider, ListItem } from '@unif/react-native-ui';
+```
+
+## 目录结构
+
+```
+src/
+├── index.tsx                 # 统一导出
+├── README.md                 # 总览（本文件）
+├── theme/
+│   ├── config.ts             # 主题配置（configure API）
+│   └── tokens.ts             # Design Tokens
+├── hooks/
+│   ├── index.ts
+│   ├── index.md              # mergeStyles 文档
+│   └── useMergeStyles.ts
+├── row/
+│   ├── index.tsx             # Row 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── column/
+│   ├── index.tsx             # Column 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── center/
+│   ├── index.tsx             # Center 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── space/
+│   ├── index.tsx             # Space 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── text/
+│   ├── index.tsx             # Text 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── button/
+│   ├── index.tsx             # Button 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── touchable/
+│   ├── index.tsx             # Touchable 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── divider/
+│   ├── index.tsx             # Divider 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+└── list-item/
+    ├── index.tsx             # ListItem 组件
+    ├── index.md
+    └── style/
+        └── index.tsx
+```
+
+## 设计原则
+
+1. **语义化** — `variant="caption"` 而非 `fontSize={13}`，意图清晰
+2. **Semantic Styles** — 消费方通过 `styles={{content: {...}}}` 精确覆盖内部 slot，不侵入组件结构
+3. **Token 驱动** — 所有颜色、间距来自 `tokens`，主题可控
+4. **样式数组组合** — `[baseStyle, variantStyle, stateStyle, userStyle]` 优先级叠加
+5. **性能安全** — 样式常量预定义在模块顶层，`mergeStyles` 配合 `useMemo` 使用

package/lib/module/action-sheet/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+/**
+ * ActionSheet 基础组件
+ *
+ * 轻量底部选项面板，Modal + 网格布局。
+ */
+
+import React, { useMemo } from 'react';
+import { View, Text, TouchableOpacity, TouchableWithoutFeedback, Modal } from 'react-native';
+import { mergeStyles } from "../hooks/index.js";
+import { DEFAULT_STYLES } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ActionSheet = ({
+  visible,
+  onClose,
+  options,
+  onSelect,
+  columns = 3,
+  style,
+  styles: semanticStyles,
+  testID
+}) => {
+  const s = useMemo(() => mergeStyles(DEFAULT_STYLES, semanticStyles), [semanticStyles]);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "slide",
+    onRequestClose: onClose,
+    children: [/*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+      onPress: onClose,
+      children: /*#__PURE__*/_jsx(View, {
+        style: s.overlay
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [s.panel, style],
+      testID: testID,
+      children: /*#__PURE__*/_jsx(View, {
+        style: s.grid,
+        children: options.map(item => /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [s.option, {
+            width: `${Math.floor(100 / columns)}%`
+          }],
+          onPress: () => onSelect(item.key),
+          activeOpacity: 0.7,
+          testID: testID ? `${testID}-${item.key}` : undefined,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: s.optionIcon,
+            children: item.icon
+          }), /*#__PURE__*/_jsx(Text, {
+            style: s.optionLabel,
+            children: item.label
+          })]
+        }, item.key))
+      })
+    })]
+  });
+};
+export default ActionSheet;
+//# sourceMappingURL=index.js.map

package/lib/module/action-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","Text","TouchableOpacity","TouchableWithoutFeedback","Modal","mergeStyles","DEFAULT_STYLES","jsx","_jsx","jsxs","_jsxs","ActionSheet","visible","onClose","options","onSelect","columns","style","styles","semanticStyles","testID","s","transparent","animationType","onRequestClose","children","onPress","overlay","panel","grid","map","item","option","width","Math","floor","key","activeOpacity","undefined","optionIcon","icon","optionLabel","label"],"sourceRoot":"../../../src","sources":["action-sheet/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,IAAI,EACJC,IAAI,EACJC,gBAAgB,EAChBC,wBAAwB,EACxBC,KAAK,QACA,cAAc;AAErB,SAASC,WAAW,QAAQ,mBAAU;AAEtC,SAASC,cAAc,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAczC,MAAMC,WAAuC,GAAGA,CAAC;EAC/CC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,OAAO,GAAG,CAAC;EACXC,KAAK;EACLC,MAAM,EAAEC,cAAc;EACtBC;AACF,CAAC,KAAK;EACJ,MAAMC,CAAC,GAAGtB,OAAO,CACf,MAAMM,WAAW,CAA4BC,cAAc,EAAEa,cAAc,CAAC,EAC5E,CAACA,cAAc,CACjB,CAAC;EAED,IAAI,CAACP,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBACEF,KAAA,CAACN,KAAK;IACJQ,OAAO,EAAEA,OAAQ;IACjBU,WAAW;IACXC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAEX,OAAQ;IAAAY,QAAA,gBAExBjB,IAAA,CAACL,wBAAwB;MAACuB,OAAO,EAAEb,OAAQ;MAAAY,QAAA,eACzCjB,IAAA,CAACR,IAAI;QAACiB,KAAK,EAAEI,CAAC,CAACM;MAAQ,CAAE;IAAC,CACF,CAAC,eAE3BnB,IAAA,CAACR,IAAI;MAACiB,KAAK,EAAE,CAACI,CAAC,CAACO,KAAK,EAAEX,KAAK,CAAE;MAACG,MAAM,EAAEA,MAAO;MAAAK,QAAA,eAC5CjB,IAAA,CAACR,IAAI;QAACiB,KAAK,EAAEI,CAAC,CAACQ,IAAK;QAAAJ,QAAA,EACjBX,OAAO,CAACgB,GAAG,CAAEC,IAAI,iBAChBrB,KAAA,CAACR,gBAAgB;UAEfe,KAAK,EAAE,CACLI,CAAC,CAACW,MAAM,EACR;YAAEC,KAAK,EAAE,GAAGC,IAAI,CAACC,KAAK,CAAC,GAAG,GAAGnB,OAAO,CAAC;UAAW,CAAC,CACjD;UACFU,OAAO,EAAEA,CAAA,KAAMX,QAAQ,CAACgB,IAAI,CAACK,GAAG,CAAE;UAClCC,aAAa,EAAE,GAAI;UACnBjB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,IAAIW,IAAI,CAACK,GAAG,EAAE,GAAGE,SAAU;UAAAb,QAAA,gBAErDjB,IAAA,CAACR,IAAI;YAACiB,KAAK,EAAEI,CAAC,CAACkB,UAAW;YAAAd,QAAA,EAAEM,IAAI,CAACS;UAAI,CAAO,CAAC,eAC7ChC,IAAA,CAACP,IAAI;YAACgB,KAAK,EAAEI,CAAC,CAACoB,WAAY;YAAAhB,QAAA,EAAEM,IAAI,CAACW;UAAK,CAAO,CAAC;QAAA,GAV1CX,IAAI,CAACK,GAWM,CACnB;MAAC,CACE;IAAC,CACH,CAAC;EAAA,CACF,CAAC;AAEZ,CAAC;AAED,eAAezB,WAAW","ignoreList":[]}

package/lib/module/action-sheet/index.md

@@ -0,0 +1,69 @@
+---
+title: ActionSheet
+nav:
+  title: 组件
+  order: 1
+group:
+  title: 基础
+  order: 2
+---
+
+# ActionSheet 底部操作面板
+
+从底部弹出的选项网格面板。
+
+## 何时使用
+
+- 需要展示操作选项时（如拍照、选照片等）
+- 底部弹出式面板
+
+## 代码演示
+
+```tsx
+import { ActionSheet, Icon } from '@unif/react-native-ui';
+
+const options = [
+  { key: 'camera', label: '拍照', icon: <Icon name="camera-outline" size={28} /> },
+  { key: 'photo', label: '照片', icon: <Icon name="image-outline" size={28} /> },
+];
+
+<ActionSheet
+  visible={visible}
+  onClose={() => setVisible(false)}
+  options={options}
+  onSelect={(key) => console.log(key)}
+/>
+```
+
+## API
+
+| 属性     | 说明           | 类型                                | 默认值 |
+| -------- | -------------- | ----------------------------------- | ------ |
+| visible  | 是否可见       | `boolean`                           | -      |
+| onClose  | 关闭回调       | `() => void`                        | -      |
+| title    | 标题           | `string`                            | -      |
+| options  | 选项列表       | `ActionSheetOption[]`               | -      |
+| onSelect | 选择回调       | `(key: string) => void`             | -      |
+| columns  | 每行列数       | `number`                            | `3`    |
+| style    | 面板样式       | `ViewStyle`                         | -      |
+| styles   | 语义样式       | `ActionSheetSemanticStyles`         | -      |
+| testID   | 测试标识       | `string`                            | -      |
+
+## ActionSheetOption
+
+| 属性  | 说明   | 类型        |
+| ----- | ------ | ----------- |
+| key   | 唯一标识 | `string`  |
+| label | 显示文本 | `string`  |
+| icon  | 图标     | `ReactNode` |
+
+## Semantic Styles
+
+| Slot        | 说明           |
+| ----------- | -------------- |
+| overlay     | 遮罩层         |
+| panel       | 底部面板       |
+| grid        | 网格容器       |
+| option      | 单个选项       |
+| optionIcon  | 选项图标容器   |
+| optionLabel | 选项标签文本   |

package/lib/module/action-sheet/style/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import { tokens } from "../../theme/tokens.js";
+export const DEFAULT_STYLES = {
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.3)'
+  },
+  panel: {
+    backgroundColor: tokens.colorBgElevated,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+    paddingTop: 20,
+    paddingBottom: 24,
+    paddingHorizontal: tokens.spaceMd
+  },
+  grid: {
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  option: {
+    alignItems: 'center'
+  },
+  optionIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 12,
+    backgroundColor: tokens.colorBgPage,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: tokens.spaceSm
+  },
+  optionLabel: {
+    fontSize: 12,
+    color: tokens.colorTextSecondary
+  }
+};
+//# sourceMappingURL=index.js.map

package/lib/module/action-sheet/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","DEFAULT_STYLES","overlay","flex","backgroundColor","panel","colorBgElevated","borderTopLeftRadius","borderTopRightRadius","paddingTop","paddingBottom","paddingHorizontal","spaceMd","grid","flexDirection","justifyContent","option","alignItems","optionIcon","width","height","borderRadius","colorBgPage","marginBottom","spaceSm","optionLabel","fontSize","color","colorTextSecondary"],"sourceRoot":"../../../../src","sources":["action-sheet/style/index.tsx"],"mappings":";;AACA,SAASA,MAAM,QAAQ,uBAAoB;AAiB3C,OAAO,MAAMC,cAAyC,GAAG;EACvDC,OAAO,EAAE;IACPC,IAAI,EAAE,CAAC;IACPC,eAAe,EAAE;EACnB,CAAC;EACDC,KAAK,EAAE;IACLD,eAAe,EAAEJ,MAAM,CAACM,eAAe;IACvCC,mBAAmB,EAAE,EAAE;IACvBC,oBAAoB,EAAE,EAAE;IACxBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE,EAAE;IACjBC,iBAAiB,EAAEX,MAAM,CAACY;EAC5B,CAAC;EACDC,IAAI,EAAE;IACJC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,MAAM,EAAE;IACNC,UAAU,EAAE;EACd,CAAC;EACDC,UAAU,EAAE;IACVC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,EAAE;IAChBjB,eAAe,EAAEJ,MAAM,CAACsB,WAAW;IACnCP,cAAc,EAAE,QAAQ;IACxBE,UAAU,EAAE,QAAQ;IACpBM,YAAY,EAAEvB,MAAM,CAACwB;EACvB,CAAC;EACDC,WAAW,EAAE;IACXC,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAE3B,MAAM,CAAC4B;EAChB;AACF,CAAC","ignoreList":[]}

package/lib/module/avatar/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+/**
+ * Avatar 原子组件
+ *
+ * 圆形图像/图标容器，支持图片、图标、占位三种模式。
+ */
+
+import React, { useMemo } from 'react';
+import { View, Image } from 'react-native';
+import { mergeStyles } from "../hooks/index.js";
+import { DEFAULT_STYLES } from "./style/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Avatar = ({
+  size = 40,
+  source,
+  icon,
+  style,
+  styles: semanticStyles,
+  testID
+}) => {
+  const s = useMemo(() => mergeStyles(DEFAULT_STYLES, semanticStyles), [semanticStyles]);
+  const sizeStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [s.root, sizeStyle, style],
+    testID: testID,
+    children: source ? /*#__PURE__*/_jsx(Image, {
+      source: source,
+      style: [s.image, {
+        width: size,
+        height: size,
+        borderRadius: size / 2
+      }]
+    }) : icon ? icon : null
+  });
+};
+export default Avatar;
+//# sourceMappingURL=index.js.map

package/lib/module/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","Image","mergeStyles","DEFAULT_STYLES","jsx","_jsx","Avatar","size","source","icon","style","styles","semanticStyles","testID","s","sizeStyle","width","height","borderRadius","root","children","image"],"sourceRoot":"../../../src","sources":["avatar/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,EAAEC,KAAK,QAAQ,cAAc;AAE1C,SAASC,WAAW,QAAQ,mBAAU;AAEtC,SAASC,cAAc,QAAQ,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWzC,MAAMC,MAA6B,GAAGA,CAAC;EACrCC,IAAI,GAAG,EAAE;EACTC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC,MAAM,EAAEC,cAAc;EACtBC;AACF,CAAC,KAAK;EACJ,MAAMC,CAAC,GAAGf,OAAO,CACf,MAAMG,WAAW,CAAuBC,cAAc,EAAES,cAAc,CAAC,EACvE,CAACA,cAAc,CACjB,CAAC;EAED,MAAMG,SAAoB,GAAG;IAC3BC,KAAK,EAAET,IAAI;IACXU,MAAM,EAAEV,IAAI;IACZW,YAAY,EAAEX,IAAI,GAAG;EACvB,CAAC;EAED,oBACEF,IAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAACI,CAAC,CAACK,IAAI,EAAEJ,SAAS,EAAEL,KAAK,CAAE;IAACG,MAAM,EAAEA,MAAO;IAAAO,QAAA,EACrDZ,MAAM,gBACLH,IAAA,CAACJ,KAAK;MACJO,MAAM,EAAEA,MAAO;MACfE,KAAK,EAAE,CAACI,CAAC,CAACO,KAAK,EAAE;QAAEL,KAAK,EAAET,IAAI;QAAEU,MAAM,EAAEV,IAAI;QAAEW,YAAY,EAAEX,IAAI,GAAG;MAAE,CAAC;IAAE,CACzE,CAAC,GACAE,IAAI,GACNA,IAAI,GACF;EAAI,CACJ,CAAC;AAEX,CAAC;AAED,eAAeH,MAAM","ignoreList":[]}

package/lib/module/avatar/index.md

@@ -0,0 +1,51 @@
+---
+title: Avatar
+nav:
+  title: 组件
+  order: 1
+group:
+  title: 原子
+  order: 1
+---
+
+# Avatar 头像
+
+圆形图像/图标容器，支持图片、图标、占位三种模式。
+
+## 何时使用
+
+- 展示用户头像
+- 展示 AI 助手图标头像
+
+## 代码演示
+
+```tsx
+import { Avatar, Icon } from '@unif/react-native-ui';
+
+// 图片头像
+<Avatar size={40} source={{ uri: 'https://example.com/avatar.png' }} />
+
+// 图标头像
+<Avatar size={28} icon={<Icon name="sparkles" size={18} color="#EB6E00" />} />
+
+// 默认占位
+<Avatar size={40} />
+```
+
+## API
+
+| 属性    | 说明             | 类型                   | 默认值 |
+| ------- | ---------------- | ---------------------- | ------ |
+| size    | 头像尺寸         | `number`               | `40`   |
+| source  | 图片来源         | `ImageSourcePropType`  | -      |
+| icon    | 替代图片的图标   | `ReactNode`            | -      |
+| style   | 容器样式         | `ViewStyle`            | -      |
+| styles  | 语义样式         | `AvatarSemanticStyles` | -      |
+| testID  | 测试标识         | `string`               | -      |
+
+## Semantic Styles
+
+| Slot  | 说明       |
+| ----- | ---------- |
+| root  | 外层容器   |
+| image | 图片元素   |

package/lib/module/avatar/style/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { tokens } from "../../theme/tokens.js";
+export const DEFAULT_STYLES = {
+  root: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: tokens.colorBgElevated,
+    overflow: 'hidden',
+    ...tokens.shadowSm
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  }
+};
+//# sourceMappingURL=index.js.map

package/lib/module/avatar/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tokens","DEFAULT_STYLES","root","justifyContent","alignItems","backgroundColor","colorBgElevated","overflow","shadowSm","image","width","height"],"sourceRoot":"../../../../src","sources":["avatar/style/index.tsx"],"mappings":";;AACA,SAASA,MAAM,QAAQ,uBAAoB;AAO3C,OAAO,MAAMC,cAAoC,GAAG;EAClDC,IAAI,EAAE;IACJC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAEL,MAAM,CAACM,eAAe;IACvCC,QAAQ,EAAE,QAAQ;IAClB,GAAGP,MAAM,CAACQ;EACZ,CAAC;EACDC,KAAK,EAAE;IACLC,KAAK,EAAE,MAAa;IACpBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/lib/module/button/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+/**
+ * 按钮组件
+ *
+ * type + size + semantic styles。
+ */
+
+import React, { useMemo } from 'react';
+import { Pressable, Text, View, ActivityIndicator } from 'react-native';
+import { mergeStyles } from "../hooks/index.js";
+import { DEFAULT_STYLES, SIZE_STYLES, TYPE_STYLES, DISABLED_STYLES, BLOCK_STYLES, PRESSED_STYLE, loadingStyle } from "./style/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Button = ({
+  type = 'primary',
+  size = 'default',
+  icon,
+  disabled,
+  block,
+  loading,
+  onPress,
+  style,
+  styles: semanticStyles,
+  testID,
+  children
+}) => {
+  const s = useMemo(() => mergeStyles(DEFAULT_STYLES, SIZE_STYLES[size], TYPE_STYLES[type], disabled ? DISABLED_STYLES : undefined, block ? BLOCK_STYLES : undefined, semanticStyles), [type, size, disabled, block, semanticStyles]);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    style: ({
+      pressed
+    }) => [s.root, pressed && PRESSED_STYLE, style],
+    onPress: onPress,
+    disabled: disabled || loading,
+    testID: testID,
+    children: [icon && /*#__PURE__*/_jsx(View, {
+      style: s.icon,
+      children: icon
+    }), loading && /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: s.content?.color,
+      size: "small",
+      style: loadingStyle
+    }), typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      style: s.content,
+      children: children
+    }) : /*#__PURE__*/_jsx(View, {
+      style: s.content,
+      children: children
+    })]
+  });
+};
+export default Button;
+//# sourceMappingURL=index.js.map

package/lib/module/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Pressable","Text","View","ActivityIndicator","mergeStyles","DEFAULT_STYLES","SIZE_STYLES","TYPE_STYLES","DISABLED_STYLES","BLOCK_STYLES","PRESSED_STYLE","loadingStyle","jsx","_jsx","jsxs","_jsxs","Button","type","size","icon","disabled","block","loading","onPress","style","styles","semanticStyles","testID","children","s","undefined","pressed","root","color","content"],"sourceRoot":"../../../src","sources":["button/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,iBAAiB,QAAQ,cAAc;AAEvE,SAASC,WAAW,QAAQ,mBAAU;AAEtC,SACEC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,YAAY,EACZC,aAAa,EACbC,YAAY,QACP,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgBjB,MAAMC,MAA6B,GAAGA,CAAC;EACrCC,IAAI,GAAG,SAAS;EAChBC,IAAI,GAAG,SAAS;EAChBC,IAAI;EACJC,QAAQ;EACRC,KAAK;EACLC,OAAO;EACPC,OAAO;EACPC,KAAK;EACLC,MAAM,EAAEC,cAAc;EACtBC,MAAM;EACNC;AACW,CAAC,KAAK;EACjB,MAAMC,CAAC,GAAG9B,OAAO,CACf,MACEK,WAAW,CACTC,cAAc,EACdC,WAAW,CAACY,IAAI,CAAC,EACjBX,WAAW,CAACU,IAAI,CAAC,EACjBG,QAAQ,GAAGZ,eAAe,GAAGsB,SAAS,EACtCT,KAAK,GAAGZ,YAAY,GAAGqB,SAAS,EAChCJ,cACF,CAAC,EACH,CAACT,IAAI,EAAEC,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEK,cAAc,CAC9C,CAAC;EAED,oBACEX,KAAA,CAACf,SAAS;IACRwB,KAAK,EAAEA,CAAC;MAAEO;IAAQ,CAAC,KAAK,CAACF,CAAC,CAACG,IAAI,EAAED,OAAO,IAAIrB,aAAa,EAAEc,KAAK,CAAE;IAClED,OAAO,EAAEA,OAAQ;IACjBH,QAAQ,EAAEA,QAAQ,IAAIE,OAAQ;IAC9BK,MAAM,EAAEA,MAAO;IAAAC,QAAA,GAEdT,IAAI,iBAAIN,IAAA,CAACX,IAAI;MAACsB,KAAK,EAAEK,CAAC,CAACV,IAAK;MAAAS,QAAA,EAAET;IAAI,CAAO,CAAC,EAC1CG,OAAO,iBACNT,IAAA,CAACV,iBAAiB;MAChB8B,KAAK,EAAEJ,CAAC,CAACK,OAAO,EAAED,KAAgB;MAClCf,IAAI,EAAC,OAAO;MACZM,KAAK,EAAEb;IAAa,CACrB,CACF,EACA,OAAOiB,QAAQ,KAAK,QAAQ,gBAC3Bf,IAAA,CAACZ,IAAI;MAACuB,KAAK,EAAEK,CAAC,CAACK,OAAQ;MAAAN,QAAA,EAAEA;IAAQ,CAAO,CAAC,gBAEzCf,IAAA,CAACX,IAAI;MAACsB,KAAK,EAAEK,CAAC,CAACK,OAAqB;MAAAN,QAAA,EAAEA;IAAQ,CAAO,CACtD;EAAA,CACQ,CAAC;AAEhB,CAAC;AAED,eAAeZ,MAAM","ignoreList":[]}

package/lib/module/button/index.md

@@ -0,0 +1,90 @@
+# Button 语义化按钮
+
+支持 `type` / `size` 变体和 `styles` 语义插槽覆盖。使用 `Pressable` 实现按下态反馈。
+
+## 何时使用
+
+- 替代 `<TouchableOpacity>` + 手写按钮样式的组合
+- 需要统一按钮风格（主按钮、描边按钮、幽灵按钮）时
+
+## 代码演示
+
+```tsx
+// 主按钮
+<Button onPress={handleConfirm}>确认下单</Button>
+
+// 描边按钮
+<Button type="outline" onPress={handleModify}>修改</Button>
+
+// 幽灵按钮
+<Button type="ghost" onPress={handlePush}>推送经销商</Button>
+
+// 并排等宽
+<View style={{flexDirection: 'row', gap: 10}}>
+  <Button type="outline" block onPress={handleModify}>修改</Button>
+  <Button block onPress={handleConfirm}>确认</Button>
+</View>
+
+// 带图标
+<Button icon={<Icon name="add" size={16} color="#FFF" />} onPress={handleAdd}>
+  添加
+</Button>
+
+// 语义插槽覆盖
+<Button
+  type="outline"
+  onPress={handleAction}
+  styles={{root: {borderColor: 'red'}, content: {color: 'red'}}}>
+  危险操作
+</Button>
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| type | 按钮类型 | `'primary'` \| `'outline'` \| `'ghost'` \| `'danger'` | `'primary'` |
+| size | 按钮大小 | `'default'` \| `'small'` | `'default'` |
+| icon | 左侧图标 | `ReactNode` | - |
+| disabled | 禁用状态 | `boolean` | `false` |
+| block | 撑满父容器（flex: 1） | `boolean` | `false` |
+| loading | 加载状态 | `boolean` | `false` |
+| onPress | 点击回调 | `() => void` | **必填** |
+| style | 外层容器样式 | `ViewStyle` | - |
+| styles | 语义插槽样式 | `Partial<ButtonSemanticStyles>` | - |
+| testID | 测试标识 | `string` | - |
+| children | 按钮内容 | `ReactNode` | **必填** |
+
+## Semantic Styles
+
+通过 `styles` prop 精确覆盖组件内部各 slot 的样式，不侵入组件结构。
+
+| 插槽 | 类型 | 说明 |
+|------|------|------|
+| root | `ViewStyle` | 按钮容器（背景、边框、圆角等） |
+| icon | `ViewStyle` | 图标区域（间距等） |
+| content | `TextStyle` | 文字区域（字号、颜色、字重等） |
+
+## Type 规格
+
+| type | 背景 | 文字色 | 边框 |
+|------|------|--------|------|
+| primary | colorPrimary | #FFF | 无 |
+| outline | 透明 | colorTextSecondary | colorBorder |
+| ghost | 透明 | colorPrimary | colorPrimary |
+| danger | colorError | #FFF | 无 |
+
+## Size 规格
+
+| size | paddingVertical | borderRadius | fontSize |
+|------|----------------|--------------|----------|
+| default | 10 | 8 | 14 |
+| small | 6 | 6 | 12 |
+
+## 样式合并顺序
+
+```
+DEFAULT_STYLES → SIZE_STYLES → TYPE_STYLES → DISABLED_STYLES → BLOCK_STYLES → semanticStyles
+```
+
+内部使用 `mergeStyles` + `useMemo` 按 slot 维度合并，仅在 props 变化时重算。