@unif/react-native-ui 0.2.2 → 0.2.11

package/src/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/src/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/src/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/src/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 | 工具栏容器     |

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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`   | -           |