@unif/react-native-ui 0.2.0 → 0.2.11

package/src/menu/index.tsx

@@ -60,11 +60,8 @@ const Menu: React.FC<MenuProps> = ({
       style={style}
       testID={testID}
     >
-      {actions.map((action, index) => (
+      {actions.map((action) => (
         <React.Fragment key={action.key}>
-          {index > 0 && (
-            <View style={[ds.divider, semanticStyles?.divider]} />
-          )}
           <Pressable
             style={[ds.item, semanticStyles?.item]}
             onPress={() => {

package/src/popover/index.tsx

@@ -5,11 +5,7 @@
  */
 
 import React, { useMemo } from 'react';
-import {
-  View,
-  TouchableWithoutFeedback,
-  Modal,
-} from 'react-native';
+import { View, TouchableWithoutFeedback, Modal } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { mergeStyles } from '../hooks';
 import { useTokens } from '../theme/context';
@@ -46,7 +42,7 @@ const Popover: React.FC<PopoverProps> = ({
 
   const s = useMemo(
     () => mergeStyles<PopoverSemanticStyles>(defaultStyles, semanticStyles),
-    [defaultStyles, semanticStyles],
+    [defaultStyles, semanticStyles]
   );
 
   if (!visible) {
@@ -55,7 +51,10 @@ const Popover: React.FC<PopoverProps> = ({
 
   const positionStyle: ViewStyle =
     placement === 'bottom'
-      ? { top: anchorLayout.y + anchorLayout.height + GAP, left: anchorLayout.x }
+      ? {
+          top: anchorLayout.y + anchorLayout.height + GAP,
+          left: anchorLayout.x,
+        }
       : { bottom: anchorLayout.y - GAP, left: anchorLayout.x };
 
   return (

package/src/popover/style/index.tsx

@@ -16,8 +16,8 @@ export const createDefaultStyles = (t: Tokens): PopoverSemanticStyles => ({
     borderRadius: 12,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.12,
-    shadowRadius: 12,
-    elevation: 8,
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 4,
   },
 });

package/src/space/index.tsx

@@ -18,9 +18,7 @@ export interface SpaceProps {
 const Space: React.FC<SpaceProps> = ({ size = 12, direction = 'vertical' }) => (
   <View
     style={
-      direction === 'vertical'
-        ? verticalStyle(size)
-        : horizontalStyle(size)
+      direction === 'vertical' ? verticalStyle(size) : horizontalStyle(size)
     }
   />
 );

package/src/text/index.tsx

@@ -9,7 +9,12 @@ import { Text as RNText } from 'react-native';
 import type { TextProps as RNTextProps } from 'react-native';
 import { useTokens } from '../theme/context';
 import type { FontWeight } from './style';
-import { createVariantMap, WEIGHT_MAP, createSecondaryStyle, createPrimaryStyle } from './style';
+import {
+  createVariantMap,
+  WEIGHT_MAP,
+  createSecondaryStyle,
+  createPrimaryStyle,
+} from './style';
 
 export interface TextProps extends RNTextProps {
   variant?: 'title' | 'heading' | 'body' | 'caption' | 'micro';

package/src/wave-animation/index.tsx

@@ -30,7 +30,7 @@ const WaveAnimation: React.FC<WaveAnimationProps> = ({
   testID,
 }) => {
   const animations = useRef(
-    Array.from({ length: barCount }, () => new Animated.Value(minHeight)),
+    Array.from({ length: barCount }, () => new Animated.Value(minHeight))
   ).current;
 
   useEffect(() => {
@@ -52,8 +52,8 @@ const WaveAnimation: React.FC<WaveAnimationProps> = ({
             duration: 300 + index * 100,
             useNativeDriver: false,
           }),
-        ]),
-      ),
+        ])
+      )
     );
 
     loops.forEach((loop) => loop.start());
@@ -64,7 +64,10 @@ const WaveAnimation: React.FC<WaveAnimationProps> = ({
   }, [active, animations, minHeight, maxHeight]);
 
   return (
-    <View style={[styles.container, { height: maxHeight }, style]} testID={testID}>
+    <View
+      style={[styles.container, { height: maxHeight }, style]}
+      testID={testID}
+    >
       {animations.map((anim, index) => (
         <Animated.View
           key={index}

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