@unif/react-native-ui 0.2.0 → 0.2.11

package/lib/commonjs/list-item/index.md

@@ -1,101 +0,0 @@
-# ListItem 列表行
-
-4 个语义 slot（root / content / description / extra），支持 `styles` 精确覆盖。
-
-## 何时使用
-
-- 替代 `<TouchableOpacity>` + icon + text + arrow 的手写列表行
-- 统一列表行样式：设置菜单、选择列表、会话列表等
-
-## 代码演示
-
-```tsx
-// 基础 — 带箭头
-<ListItem title="关于" arrow onPress={handleAbout} />
-
-// 带右侧额外信息
-<ListItem title="关于" extra="v1.0.0" onPress={handleAbout} />
-
-// 带左侧图标
-<ListItem
-  thumb={<Icon name="information-circle-outline" size={22} color={tokens.colorTextSecondary} />}
-  title="关于"
-  extra="v1.0.0"
-  onPress={handleAbout}
-/>
-
-// 带描述文字（双行）
-<ListItem
-  thumb={<Icon name="chatbubble-outline" size={16} />}
-  title="今天的会话"
-  description="最后一条消息预览..."
-  onPress={handleSelect}
-  onLongPress={handleDelete}
-/>
-
-// 语义插槽覆盖 — 选中态
-<ListItem
-  title={model.name}
-  description={model.desc}
-  extra={isSelected ? <Icon name="checkmark-circle" size={22} color={tokens.colorPrimary} /> : undefined}
-  onPress={() => handleSelect(model.id)}
-  styles={isSelected ? {
-    root: {backgroundColor: '#FFF7F0'},
-    content: {color: tokens.colorPrimary},
-  } : undefined}
-/>
-
-// 语义插槽覆盖 — 危险操作
-<ListItem
-  thumb={<Icon name="log-out-outline" size={22} color={tokens.colorError} />}
-  title="退出登录"
-  onPress={handleLogout}
-  styles={{content: {color: tokens.colorError}}}
-/>
-```
-
-## API
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| thumb | 左侧缩略（图标、头像等） | `ReactNode` | - |
-| title | 主标题 | `string` \| `ReactNode` | **必填** |
-| description | 描述文字（单行截断） | `string` | - |
-| extra | 右侧额外内容 | `ReactNode` \| `string` | - |
-| arrow | 显示右箭头 | `boolean` | `false` |
-| onPress | 点击回调（有值时渲染为 Pressable） | `() => void` | - |
-| onLongPress | 长按回调 | `() => void` | - |
-| disabled | 禁用状态 | `boolean` | `false` |
-| style | 外层容器样式 | `ViewStyle` | - |
-| styles | 语义插槽样式 | `Partial<ListItemSemanticStyles>` | - |
-| testID | 测试标识 | `string` | - |
-
-## Semantic Styles
-
-通过 `styles` prop 精确覆盖组件内部各 slot 的样式。
-
-| 插槽 | 类型 | 说明 |
-|------|------|------|
-| root | `ViewStyle` | 整行容器（padding、背景等） |
-| content | `TextStyle` | 主标题文字（字号、颜色、flex 等） |
-| description | `TextStyle` | 描述文字（字号、颜色等） |
-| extra | `ViewStyle & TextStyle` | 右侧额外内容区域 |
-
-## 内部布局
-
-```
-┌─ root ──────────────────────────────────┐
-│ [thumb]  ┌─ line ─────────────────────┐ │
-│          │ ┌─ contentWrap ──────────┐ │ │
-│          │ │ [content]              │ │ │
-│          │ │ [description]          │ │ │
-│          │ └────────────────────────┘ │ │
-│          │ [extra]  [arrow]           │ │
-│          └────────────────────────────┘ │
-└─────────────────────────────────────────┘
-```
-
-## 交互行为
-
-- 有 `onPress` 时自动包裹 `Pressable`，无 `onPress` 时渲染为纯 `View`
-- `onLongPress` 仅在有 `onPress` 时生效

package/lib/commonjs/popover/index.md

@@ -1,57 +0,0 @@
----
-title: Popover
-nav:
-  title: 组件
-  order: 1
-group:
-  title: 基础
-  order: 2
----
-
-# Popover 弹出定位容器
-
-锚定在指定元素下方的弹出容器，用于下拉菜单等场景。
-
-## 何时使用
-
-- 下拉选择菜单
-- 模型选择器
-- 任何需要锚定定位的浮层
-
-## 代码演示
-
-```tsx
-import { Popover } from '@unif/react-native-ui';
-
-<Popover
-  visible={visible}
-  onClose={() => setVisible(false)}
-  anchorLayout={{ x: 100, y: 50, width: 120, height: 40 }}
-  width={180}
->
-  <View>
-    <Text>下拉内容</Text>
-  </View>
-</Popover>
-```
-
-## API
-
-| 属性         | 说明           | 类型                                          | 默认值     |
-| ------------ | -------------- | --------------------------------------------- | ---------- |
-| visible      | 是否可见       | `boolean`                                     | -          |
-| onClose      | 关闭回调       | `() => void`                                  | -          |
-| anchorLayout | 锚点布局       | `{ x, y, width, height }`                     | -          |
-| width        | 内容宽度       | `number`                                      | `180`      |
-| placement    | 弹出方向       | `'bottom'` \| `'top'`                         | `'bottom'` |
-| children     | 弹出内容       | `ReactNode`                                   | -          |
-| style        | 内容容器样式   | `ViewStyle`                                   | -          |
-| styles       | 语义样式       | `PopoverSemanticStyles`                       | -          |
-| testID       | 测试标识       | `string`                                      | -          |
-
-## Semantic Styles
-
-| Slot    | 说明         |
-| ------- | ------------ |
-| overlay | 遮罩层       |
-| content | 内容容器     |

package/lib/commonjs/row/index.md

@@ -1,46 +0,0 @@
-# Row 水平布局
-
-水平排列子元素，默认垂直居中。替代 `flexDirection: 'row' + alignItems: 'center'` 的手写样式。
-
-## 何时使用
-
-- 需要水平排列元素时
-- 替代 `<View style={{flexDirection: 'row', alignItems: 'center'}}>` 的场景
-
-## 代码演示
-
-```tsx
-// 基础用法 — 默认 alignItems: 'center'
-<Row>
-  <Icon name="star" />
-  <Text>标题</Text>
-</Row>
-
-// 两端对齐
-<Row justify="space-between">
-  <Text>左侧</Text>
-  <Text>右侧</Text>
-</Row>
-
-// 间距
-<Row gap={10}>
-  <Button block onPress={...}>修改</Button>
-  <Button block onPress={...}>确认</Button>
-</Row>
-
-// 换行
-<Row wrap gap={8}>
-  {tags.map(tag => <Tag key={tag}>{tag}</Tag>)}
-</Row>
-```
-
-## API
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| align | alignItems | `ViewStyle['alignItems']` | `'center'` |
-| justify | justifyContent | `ViewStyle['justifyContent']` | - |
-| gap | 子元素间距 | `number` | - |
-| wrap | 是否换行 | `boolean` | `false` |
-
-> 继承所有 RN `ViewProps`（`style`、`testID` 等）

package/lib/commonjs/space/index.md

@@ -1,31 +0,0 @@
-# Space 间距占位
-
-在两个元素之间插入固定间距。替代 `<View style={{height: 12}} />` 或 `marginTop` 手写。
-
-## 何时使用
-
-- 两个块级元素之间需要固定间距
-- 不想在元素上写 margin 时
-
-## 代码演示
-
-```tsx
-// 垂直间距（默认）
-<Text variant="title">标题</Text>
-<Space size={16} />
-<Text variant="body">正文内容</Text>
-
-// 水平间距
-<Row>
-  <Icon name="star" />
-  <Space size={8} direction="horizontal" />
-  <Text>收藏</Text>
-</Row>
-```
-
-## API
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| size | 间距大小（px） | `number` | `12` |
-| direction | 方向 | `'vertical'` \| `'horizontal'` | `'vertical'` |

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 | 文本样式   |