@unif/react-native-ui 0.1.0

package/src/avatar/style/index.tsx

@@ -0,0 +1,21 @@
+import type { ViewStyle, ImageStyle } from 'react-native';
+import { tokens } from '../../theme/tokens';
+
+export type AvatarSemanticStyles = {
+  root?: ViewStyle;
+  image?: ImageStyle;
+};
+
+export const DEFAULT_STYLES: AvatarSemanticStyles = {
+  root: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: tokens.colorBgElevated,
+    overflow: 'hidden',
+    ...tokens.shadowSm,
+  },
+  image: {
+    width: '100%' as any,
+    height: '100%' as any,
+  },
+};

package/src/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 变化时重算。

package/src/button/index.tsx

@@ -0,0 +1,86 @@
+/**
+ * 按钮组件
+ *
+ * type + size + semantic styles。
+ */
+
+import React, { useMemo } from 'react';
+import { Pressable, Text, View, ActivityIndicator } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { mergeStyles } from '../hooks';
+import type { ButtonSemanticStyles } from './style';
+import {
+  DEFAULT_STYLES,
+  SIZE_STYLES,
+  TYPE_STYLES,
+  DISABLED_STYLES,
+  BLOCK_STYLES,
+  PRESSED_STYLE,
+  loadingStyle,
+} from './style';
+
+export interface ButtonProps {
+  type?: 'primary' | 'outline' | 'ghost' | 'danger';
+  size?: 'default' | 'small';
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  block?: boolean;
+  loading?: boolean;
+  onPress: () => void;
+  style?: ViewStyle;
+  styles?: Partial<ButtonSemanticStyles>;
+  testID?: string;
+  children: React.ReactNode;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  type = 'primary',
+  size = 'default',
+  icon,
+  disabled,
+  block,
+  loading,
+  onPress,
+  style,
+  styles: semanticStyles,
+  testID,
+  children,
+}: ButtonProps) => {
+  const s = useMemo(
+    () =>
+      mergeStyles<ButtonSemanticStyles>(
+        DEFAULT_STYLES,
+        SIZE_STYLES[size],
+        TYPE_STYLES[type],
+        disabled ? DISABLED_STYLES : undefined,
+        block ? BLOCK_STYLES : undefined,
+        semanticStyles,
+      ),
+    [type, size, disabled, block, semanticStyles],
+  );
+
+  return (
+    <Pressable
+      style={({ pressed }) => [s.root, pressed && PRESSED_STYLE, style]}
+      onPress={onPress}
+      disabled={disabled || loading}
+      testID={testID}
+    >
+      {icon && <View style={s.icon}>{icon}</View>}
+      {loading && (
+        <ActivityIndicator
+          color={s.content?.color as string}
+          size="small"
+          style={loadingStyle}
+        />
+      )}
+      {typeof children === 'string' ? (
+        <Text style={s.content}>{children}</Text>
+      ) : (
+        <View style={s.content as ViewStyle}>{children}</View>
+      )}
+    </Pressable>
+  );
+};
+
+export default Button;

package/src/button/style/index.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { tokens } from '../../theme/tokens';
+
+export type ButtonSemanticStyles = {
+  root?: ViewStyle;
+  icon?: ViewStyle;
+  content?: TextStyle;
+};
+
+export const DEFAULT_STYLES: ButtonSemanticStyles = {
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: 6,
+  },
+  content: {
+    fontSize: 14,
+  },
+};
+
+export const SIZE_STYLES: Record<string, Partial<ButtonSemanticStyles>> = {
+  default: {
+    root: { paddingVertical: 10, borderRadius: 8 },
+    content: { fontSize: 14 },
+  },
+  small: {
+    root: { paddingVertical: 6, borderRadius: 6 },
+    content: { fontSize: 12 },
+  },
+};
+
+export const TYPE_STYLES: Record<string, Partial<ButtonSemanticStyles>> = {
+  primary: {
+    root: { backgroundColor: tokens.colorPrimary },
+    content: { color: '#FFF', fontWeight: '600' },
+  },
+  outline: {
+    root: { borderWidth: 1, borderColor: tokens.colorBorder },
+    content: { color: tokens.colorTextSecondary },
+  },
+  ghost: {
+    root: { borderWidth: 1, borderColor: tokens.colorPrimary },
+    content: { color: tokens.colorPrimary },
+  },
+  danger: {
+    root: { backgroundColor: tokens.colorError },
+    content: { color: '#FFF', fontWeight: '600' },
+  },
+};
+
+export const DISABLED_STYLES: Partial<ButtonSemanticStyles> = {
+  root: { opacity: 0.5 },
+};
+
+export const BLOCK_STYLES: Partial<ButtonSemanticStyles> = {
+  root: { flex: 1 },
+};
+
+export const PRESSED_STYLE: ViewStyle = { opacity: 0.7 };
+
+export const loadingStyle = StyleSheet.create({
+  s: { marginRight: 6 },
+}).s;

package/src/center/index.md

@@ -0,0 +1,28 @@
+# 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/src/center/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * 居中布局容器
+ *
+ * justifyContent + alignItems 均为 'center'。
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { baseStyle } from './style';
+
+export type CenterProps = ViewProps;
+
+const Center: React.FC<CenterProps> = ({ style, ...rest }) => (
+  <View style={[baseStyle, style]} {...rest} />
+);
+
+export default Center;

package/src/center/style/index.tsx

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export const baseStyle = StyleSheet.create({
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+}).center;

package/src/chip/index.md

@@ -0,0 +1,60 @@
+---
+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/src/chip/index.tsx

@@ -0,0 +1,80 @@
+/**
+ * Chip 基础组件
+ *
+ * 胶囊标签，支持选中态、禁用态和图标。
+ */
+
+import React, { useMemo } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { mergeStyles } from '../hooks';
+import type { ChipSemanticStyles } from './style';
+import { DEFAULT_STYLES, SELECTED_STYLES, DISABLED_STYLES, SMALL_STYLES } from './style';
+
+export interface ChipProps {
+  children: React.ReactNode;
+  onPress?: () => void;
+  selected?: boolean;
+  disabled?: boolean;
+  size?: 'default' | 'small';
+  icon?: React.ReactNode;
+  style?: ViewStyle;
+  styles?: Partial<ChipSemanticStyles>;
+  testID?: string;
+}
+
+const PRESSED_STYLE: ViewStyle = { opacity: 0.7 };
+
+const Chip: React.FC<ChipProps> = ({
+  children,
+  onPress,
+  selected,
+  disabled,
+  size = 'default',
+  icon,
+  style,
+  styles: semanticStyles,
+  testID,
+}) => {
+  const s = useMemo(
+    () =>
+      mergeStyles<ChipSemanticStyles>(
+        DEFAULT_STYLES,
+        size === 'small' ? SMALL_STYLES : undefined,
+        selected ? SELECTED_STYLES : undefined,
+        disabled ? DISABLED_STYLES : undefined,
+        semanticStyles,
+      ),
+    [size, selected, disabled, semanticStyles],
+  );
+
+  const content = (
+    <View style={[s.root, { flexDirection: 'row', alignItems: 'center' }, style]}>
+      {icon && <View style={{ marginRight: 4 }}>{icon}</View>}
+      {typeof children === 'string' ? (
+        <Text style={s.content} numberOfLines={1}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        style={({ pressed }) => pressed && PRESSED_STYLE}
+        testID={testID}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
+};
+
+export default Chip;

package/src/chip/style/index.tsx

@@ -0,0 +1,47 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+import { tokens } from '../../theme/tokens';
+
+export type ChipSemanticStyles = {
+  root?: ViewStyle;
+  content?: TextStyle;
+};
+
+export const DEFAULT_STYLES: ChipSemanticStyles = {
+  root: {
+    backgroundColor: '#F0F0F5',
+    borderRadius: tokens.radiusFull,
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+  },
+  content: {
+    fontSize: tokens.fontSizeSm,
+    color: tokens.colorText,
+  },
+};
+
+export const SELECTED_STYLES: Partial<ChipSemanticStyles> = {
+  root: {
+    borderWidth: 1,
+    borderColor: tokens.colorPrimary,
+    backgroundColor: '#FFF5EB',
+  },
+  content: {
+    color: tokens.colorPrimary,
+  },
+};
+
+export const DISABLED_STYLES: Partial<ChipSemanticStyles> = {
+  root: {
+    opacity: 0.5,
+  },
+};
+
+export const SMALL_STYLES: Partial<ChipSemanticStyles> = {
+  root: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+  },
+  content: {
+    fontSize: tokens.fontSizeXs,
+  },
+};

package/src/column/index.md

@@ -0,0 +1,34 @@
+# 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/column/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * 垂直布局容器
+ *
+ * 语义化的 View，显式 flexDirection: 'column'。
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import type { ViewProps, ViewStyle } from 'react-native';
+import { baseStyle } from './style';
+
+type AlignItems = ViewStyle['alignItems'];
+type JustifyContent = ViewStyle['justifyContent'];
+
+export interface ColumnProps extends ViewProps {
+  /** alignItems */
+  align?: AlignItems;
+  /** justifyContent */
+  justify?: JustifyContent;
+  /** 子元素间距 */
+  gap?: number;
+}
+
+const Column: React.FC<ColumnProps> = ({
+  align,
+  justify,
+  gap,
+  style,
+  ...rest
+}: ColumnProps) => (
+  <View
+    style={[
+      baseStyle,
+      align != null && { alignItems: align },
+      justify != null && { justifyContent: justify },
+      gap != null && { gap },
+      style,
+    ]}
+    {...rest}
+  />
+);
+
+export default Column;

package/src/column/style/index.tsx

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export const baseStyle = StyleSheet.create({
+  column: {
+    flexDirection: 'column',
+  },
+}).column;

package/src/divider/index.md

@@ -0,0 +1,44 @@
+# 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/divider/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * 分割线组件
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { hairlineStyle, standardStyle } from './style';
+
+interface DividerProps {
+  hairline?: boolean;
+  marginHorizontal?: number;
+  style?: ViewStyle;
+}
+
+const Divider: React.FC<DividerProps> = ({
+  hairline = true,
+  marginHorizontal,
+  style,
+}: DividerProps) => (
+  <View
+    style={[
+      hairline ? hairlineStyle : standardStyle,
+      marginHorizontal != null && { marginHorizontal },
+      style,
+    ]}
+  />
+);
+
+export default Divider;

package/src/divider/style/index.tsx

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+import { tokens } from '../../theme/tokens';
+
+export const hairlineStyle = StyleSheet.create({
+  line: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: tokens.colorBorder,
+  },
+}).line;
+
+export const standardStyle = StyleSheet.create({
+  line: { height: 1, backgroundColor: tokens.colorBorder },
+}).line;