@unif/react-native-ui 0.2.2 → 0.2.11

package/lib/commonjs/text/index.md

@@ -1,63 +0,0 @@
-# Text 语义化文字
-
-通过 `variant` 驱动排版样式。继承 RN `Text`，支持嵌套。
-
-## 何时使用
-
-- 替代直接写 `fontSize` + `fontWeight` + `color` 的 `<Text>` 组合
-- 需要统一排版规范时
-
-## 代码演示
-
-```tsx
-// 基础用法
-<Text variant="title">标题文字</Text>
-<Text variant="caption" secondary>辅助说明</Text>
-
-// 颜色与字重
-<Text variant="caption" primary weight="bold">¥88.00</Text>
-
-// 嵌套 Text
-<Text variant="body" numberOfLines={1}>
-  <Text primary weight="semibold">新 </Text>
-  {productName}
-</Text>
-```
-
-## API
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| variant | 排版变体 | `'title'` \| `'heading'` \| `'body'` \| `'caption'` \| `'micro'` | `'body'` |
-| secondary | 次要色（colorTextSecondary） | `boolean` | `false` |
-| primary | 主题色（colorPrimary） | `boolean` | `false` |
-| color | 自定义颜色 | `string` | - |
-| weight | 字重 | `'medium'` \| `'semibold'` \| `'bold'` | - |
-
-> 继承所有 RN `TextProps`（`numberOfLines`、`ellipsizeMode`、`onPress`、`style` 等）
-
-## Variant 规格
-
-| variant | fontSize | lineHeight | fontWeight | 场景 |
-|---------|----------|------------|------------|------|
-| title | 20 | 26 | 600 | 页面标题、问候语 |
-| heading | 16 | 22 | 600 | 弹窗标题、区块标题 |
-| body | 15 | 22 | 正常 | 默认正文 |
-| caption | 13 | 18 | 正常 | 信息行、标签 |
-| micro | 12 | 18 | 正常 | 地址、规格、描述 |
-
-## Weight 映射
-
-| weight | fontWeight | 场景 |
-|--------|----------|------|
-| medium | 500 | 产品名、模型名 |
-| semibold | 600 | 标题、按钮文字、客户名 |
-| bold | 700 | 价格金额 |
-
-## 样式优先级
-
-```
-VARIANT_MAP → secondary/primary → color → weight → style
-```
-
-后传入的属性覆盖先传入的，`style` prop 拥有最高优先级。

package/lib/commonjs/touchable/index.md

@@ -1,42 +0,0 @@
-# Touchable 统一触摸反馈
-
-基于 `Pressable`，统一替代 `TouchableOpacity`。按下时降低透明度，支持自定义 `activeOpacity`。
-
-## 何时使用
-
-- 替代所有 `TouchableOpacity` 的场景
-- 需要可点击区域（非按钮语义）时
-
-## 代码演示
-
-```tsx
-// 基础用法
-<Touchable onPress={handlePress}>
-  <Row gap={10}>
-    <Icon name="settings" />
-    <Text>设置</Text>
-  </Row>
-</Touchable>
-
-// 自定义按下透明度
-<Touchable onPress={handlePress} activeOpacity={0.5}>
-  <Text>更明显的按下效果</Text>
-</Touchable>
-
-// 长按
-<Touchable onPress={handlePress} onLongPress={handleLongPress}>
-  <Text>支持长按</Text>
-</Touchable>
-```
-
-## API
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| onPress | 点击回调 | `() => void` | - |
-| onLongPress | 长按回调 | `() => void` | - |
-| disabled | 禁用状态 | `boolean` | `false` |
-| activeOpacity | 按下态透明度 | `number` | `0.7` |
-| testID | 测试标识 | `string` | - |
-
-> 继承所有 RN `ViewProps`

package/lib/commonjs/wave-animation/index.md

@@ -1,50 +0,0 @@
----
-title: WaveAnimation
-nav:
-  title: 组件
-  order: 1
-group:
-  title: 原子
-  order: 1
----
-
-# WaveAnimation 声波动画
-
-柱状声波动画，适用于语音录制等场景的视觉反馈。
-
-## 何时使用
-
-- 语音录制时展示声波效果
-- 需要节奏性动画反馈时
-
-## 代码演示
-
-```tsx
-import { WaveAnimation } from '@unif/react-native-ui';
-
-// 基本用法
-<WaveAnimation active={isRecording} />
-
-// 自定义参数
-<WaveAnimation
-  active={true}
-  color="#EB6E00"
-  barCount={5}
-  barWidth={4}
-  minHeight={4}
-  maxHeight={24}
-/>
-```
-
-## API
-
-| 属性      | 说明         | 类型       | 默认值      |
-| --------- | ------------ | ---------- | ----------- |
-| active    | 控制动画启停 | `boolean`  | -           |
-| color     | 柱体颜色     | `string`   | `'#FFFFFF'` |
-| barCount  | 柱数         | `number`   | `4`         |
-| barWidth  | 柱宽         | `number`   | `3`         |
-| minHeight | 最小高度     | `number`   | `6`         |
-| maxHeight | 最大高度     | `number`   | `20`        |
-| style     | 容器样式     | `ViewStyle`| -           |
-| testID    | 测试标识     | `string`   | -           |

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

@@ -1,69 +0,0 @@
----
-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/avatar/index.md

@@ -1,51 +0,0 @@
----
-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/button/index.md

@@ -1,90 +0,0 @@
-# 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 变化时重算。

package/lib/module/center/index.md

@@ -1,28 +0,0 @@
-# Center 居中布局
-
-内容水平 + 垂直居中。替代 `justifyContent: 'center' + alignItems: 'center'`。
-
-## 何时使用
-
-- 圆形图标按钮、头像容器
-- 空状态页面居中
-- 任何需要内容完全居中的场景
-
-## 代码演示
-
-```tsx
-// 圆形按钮
-<Center style={{width: 32, height: 32, borderRadius: 16, backgroundColor: '#EB6E00'}}>
-  <Icon name="add" size={18} color="#FFF" />
-</Center>
-
-// 空状态
-<Center style={{flex: 1}}>
-  <Icon name="inbox" size={48} />
-  <Text secondary>暂无数据</Text>
-</Center>
-```
-
-## API
-
-> 继承所有 RN `ViewProps`，无额外属性。

package/lib/module/chip/index.md

@@ -1,60 +0,0 @@
----
-title: Chip
-nav:
-  title: 组件
-  order: 1
-group:
-  title: 基础
-  order: 2
----
-
-# Chip 胶囊标签
-
-用于展示标签或可选项的胶囊形组件。
-
-## 何时使用
-
-- 展示快捷建议
-- 标签选择
-- 筛选项
-
-## 代码演示
-
-```tsx
-import { Chip, Icon } from '@unif/react-native-ui';
-
-// 基本用法
-<Chip onPress={() => {}}>标签文本</Chip>
-
-// 带图标
-<Chip icon={<Icon name="search-outline" size={14} />} onPress={() => {}}>
-  搜索
-</Chip>
-
-// 选中态
-<Chip selected onPress={() => {}}>已选中</Chip>
-
-// 小尺寸
-<Chip size="small">小标签</Chip>
-```
-
-## API
-
-| 属性     | 说明         | 类型                      | 默认值      |
-| -------- | ------------ | ------------------------- | ----------- |
-| children | 内容         | `ReactNode`               | -           |
-| onPress  | 点击回调     | `() => void`              | -           |
-| selected | 选中状态     | `boolean`                 | -           |
-| disabled | 禁用状态     | `boolean`                 | -           |
-| size     | 尺寸         | `'default'` \| `'small'`  | `'default'` |
-| icon     | 左侧图标     | `ReactNode`               | -           |
-| style    | 容器样式     | `ViewStyle`               | -           |
-| styles   | 语义样式     | `ChipSemanticStyles`      | -           |
-| testID   | 测试标识     | `string`                  | -           |
-
-## Semantic Styles
-
-| Slot    | 说明       |
-| ------- | ---------- |
-| root    | 外层容器   |
-| content | 文本样式   |

package/lib/module/column/index.md

@@ -1,34 +0,0 @@
-# Column 垂直布局
-
-垂直排列子元素。语义化替代裸 `<View>`，显式声明布局方向。
-
-## 何时使用
-
-- 需要显式声明垂直布局方向时
-- 需要 `gap`、`align`、`justify` 等布局属性时
-
-## 代码演示
-
-```tsx
-// 基础用法
-<Column gap={8}>
-  <Text variant="heading">标题</Text>
-  <Text variant="caption" secondary>描述文字</Text>
-</Column>
-
-// 居中对齐
-<Column align="center" justify="center" style={{flex: 1}}>
-  <Icon name="empty" />
-  <Text>暂无数据</Text>
-</Column>
-```
-
-## API
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| align | alignItems | `ViewStyle['alignItems']` | - |
-| justify | justifyContent | `ViewStyle['justifyContent']` | - |
-| gap | 子元素间距 | `number` | - |
-
-> 继承所有 RN `ViewProps`

package/lib/module/divider/index.md

@@ -1,44 +0,0 @@
-# Divider 分割线
-
-用于独立的视觉分隔元素。
-
-## 何时使用
-
-- 替代独立的 `<View style={{height: 1, backgroundColor: border}} />`
-- 列表项之间的分隔线（如 `FlatList` 的 `ItemSeparatorComponent`）
-
-## 何时不使用
-
-- **不替换**容器自带的 `borderBottomWidth`（内嵌 border 保留原样）
-- 容器 header / footer 的 `borderTopWidth` / `borderBottomWidth` 属于布局边界，改为独立 View 会影响 flex 布局
-
-| 场景 | 处理 | 原因 |
-|------|------|------|
-| `<View style={styles.separator} />` | ✅ 用 `<Divider />` | 独立分割元素 |
-| `styles.itemRow { borderBottomWidth }` | ❌ 保留原样 | 内嵌于容器 |
-| `styles.header { borderBottomWidth }` | ❌ 保留原样 | 布局边界 |
-
-## 代码演示
-
-```tsx
-// 默认 hairline
-<Divider />
-
-// 1px 带水平边距（列表分隔）
-<Divider hairline={false} marginHorizontal={12} />
-
-// 作为 FlatList 分隔
-const Separator = () => <Divider hairline={false} marginHorizontal={12} />;
-<FlatList ItemSeparatorComponent={Separator} ... />
-
-// 自定义样式
-<Divider style={{backgroundColor: 'red', marginVertical: 8}} />
-```
-
-## API
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| hairline | 使用 `StyleSheet.hairlineWidth` | `boolean` | `true` |
-| marginHorizontal | 水平边距 | `number` | - |
-| style | 自定义样式 | `ViewStyle` | - |

package/lib/module/hooks/index.md

@@ -1,71 +0,0 @@
-# Hooks
-
-基础组件库的工具 hooks。
-
-## mergeStyles
-
-按 slot 维度合并多来源样式的纯函数。借鉴 antd v6 `useMergeSemantic`（`components/_util/hooks/useMergeSemantic.ts:69-80`）。
-
-### 何时使用
-
-- 组件内部合并默认样式 + 变体样式 + 用户传入的 `styles` 语义插槽
-- 构建支持 Semantic Styles 的自定义组件时
-
-### 代码演示
-
-```tsx
-import {mergeStyles} from '../hooks';
-
-type MySemanticStyles = {
-  root?: ViewStyle;
-  content?: TextStyle;
-};
-
-const DEFAULT: MySemanticStyles = {
-  root: {padding: 16},
-  content: {fontSize: 14, color: tokens.colorText},
-};
-
-const MyComponent = ({styles: userStyles}: {styles?: Partial<MySemanticStyles>}) => {
-  // ✅ 配合 useMemo，仅 userStyles 变化时重算
-  const s = useMemo(
-    () => mergeStyles(DEFAULT, userStyles),
-    [userStyles],
-  );
-
-  return (
-    <View style={s.root}>
-      <Text style={s.content}>...</Text>
-    </View>
-  );
-};
-```
-
-### API
-
-```ts
-function mergeStyles<T extends Record<string, StyleValue | undefined>>(
-  ...sources: (Partial<T> | undefined)[]
-): T
-```
-
-| 参数 | 说明 | 类型 |
-|------|------|------|
-| sources | 多个样式源，按顺序合并 | `(Partial<T> \| undefined)[]` |
-
-### 合并规则
-
-- 按 slot key 维度合并（`root`、`content` 等分别合并）
-- 同一 slot 内使用对象展开（`{...prev, ...next}`），后传入的覆盖先传入的
-- `undefined` 源自动跳过
-- 纯函数，不包含 `useMemo`，调用方自行控制缓存
-
-### 与 antd v6 对比
-
-| 特性 | antd v6 `mergeStyles` | RN 版 `mergeStyles` |
-|------|----------------------|---------------------|
-| classNames 合并 | ✅ | ❌（RN 无 CSS 类名） |
-| schema 嵌套 | ✅ | ❌（当前不需要） |
-| 函数形式 style | ✅ | ❌（不需要动态计算） |
-| slot 展开合并 | ✅ | ✅（核心逻辑一致） |
-| 纯函数 | ✅ | ✅ |

package/lib/module/input/index.md

@@ -1,73 +0,0 @@
----
-title: Input
-nav:
-  title: 组件
-  order: 1
-group:
-  title: 基础
-  order: 2
----
-
-# Input 输入框
-
-TextInput 容器，支持多行输入、底部工具栏和自动聚焦。
-
-## 何时使用
-
-- 需要文本输入时
-- 需要带工具栏的输入框时
-- 聊天输入场景
-
-## 代码演示
-
-```tsx
-import { Input, Icon } from '@unif/react-native-ui';
-
-// 基本用法
-<Input
-  value={text}
-  onChangeText={setText}
-  placeholder="请输入..."
-/>
-
-// 多行 + 工具栏
-<Input
-  multiline
-  maxHeight={100}
-  autoFocus
-  toolbar={
-    <View style={{ flexDirection: 'row' }}>
-      <Icon name="mic-outline" size={24} />
-    </View>
-  }
-/>
-```
-
-## API
-
-| 属性            | 说明             | 类型                   | 默认值  |
-| --------------- | ---------------- | ---------------------- | ------- |
-| value           | 输入值           | `string`               | -       |
-| onChangeText    | 文本变化回调     | `(text: string) => void` | -     |
-| placeholder     | 占位文本         | `string`               | -       |
-| multiline       | 多行模式         | `boolean`              | `false` |
-| maxLength       | 最大字符数       | `number`               | -       |
-| maxHeight       | 最大高度         | `number`               | -       |
-| autoFocus       | 自动聚焦         | `boolean`              | -       |
-| returnKeyType   | 回车键类型       | `ReturnKeyTypeOptions` | -       |
-| onSubmitEditing | 提交回调         | `() => void`           | -       |
-| onBlur          | 失焦回调         | `() => void`           | -       |
-| onFocus         | 聚焦回调         | `() => void`           | -       |
-| disabled        | 禁用状态         | `boolean`              | -       |
-| toolbar         | 底部工具栏       | `ReactNode`            | -       |
-| style           | 容器样式         | `ViewStyle`            | -       |
-| styles          | 语义样式         | `InputSemanticStyles`  | -       |
-| testID          | 测试标识         | `string`               | -       |
-
-## Semantic Styles
-
-| Slot    | 说明           |
-| ------- | -------------- |
-| root    | 外层容器       |
-| input   | TextInput 本身 |
-| toolbar | 工具栏容器     |