@unif/react-native-ui 0.1.0

package/src/popover/index.tsx

@@ -0,0 +1,80 @@
+/**
+ * Popover 基础组件
+ *
+ * 锚定定位下拉容器，仅做定位，内容由 children 传入。
+ */
+
+import React, { useMemo } from 'react';
+import {
+  View,
+  TouchableWithoutFeedback,
+  Modal,
+} from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { mergeStyles } from '../hooks';
+import type { PopoverSemanticStyles } from './style';
+import { DEFAULT_STYLES } from './style';
+
+export interface PopoverProps {
+  visible: boolean;
+  onClose: () => void;
+  anchorLayout: { x: number; y: number; width: number; height: number };
+  width?: number;
+  placement?: 'bottom' | 'top';
+  children: React.ReactNode;
+  style?: ViewStyle;
+  styles?: Partial<PopoverSemanticStyles>;
+  testID?: string;
+}
+
+const GAP = 4;
+
+const Popover: React.FC<PopoverProps> = ({
+  visible,
+  onClose,
+  anchorLayout,
+  width = 180,
+  placement = 'bottom',
+  children,
+  style,
+  styles: semanticStyles,
+  testID,
+}) => {
+  const s = useMemo(
+    () => mergeStyles<PopoverSemanticStyles>(DEFAULT_STYLES, semanticStyles),
+    [semanticStyles],
+  );
+
+  if (!visible) {
+    return null;
+  }
+
+  const positionStyle: ViewStyle =
+    placement === 'bottom'
+      ? { top: anchorLayout.y + anchorLayout.height + GAP, left: anchorLayout.x }
+      : { bottom: anchorLayout.y - GAP, left: anchorLayout.x };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={s.overlay}>
+          <TouchableWithoutFeedback>
+            <View
+              style={[s.content, positionStyle, { width }, style]}
+              testID={testID}
+            >
+              {children}
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+export default Popover;

package/src/popover/style/index.tsx

@@ -0,0 +1,23 @@
+import type { ViewStyle } from 'react-native';
+import { tokens } from '../../theme/tokens';
+
+export type PopoverSemanticStyles = {
+  overlay?: ViewStyle;
+  content?: ViewStyle;
+};
+
+export const DEFAULT_STYLES: PopoverSemanticStyles = {
+  overlay: {
+    flex: 1,
+  },
+  content: {
+    position: 'absolute',
+    backgroundColor: tokens.colorBgElevated,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+};

package/src/row/index.md

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

@@ -0,0 +1,47 @@
+/**
+ * 水平布局容器
+ *
+ * 默认 flexDirection: 'row' + alignItems: 'center'。
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import type { ViewProps, ViewStyle } from 'react-native';
+import { baseStyle, wrapStyle } from './style';
+
+type AlignItems = ViewStyle['alignItems'];
+type JustifyContent = ViewStyle['justifyContent'];
+
+export interface RowProps extends ViewProps {
+  /** alignItems，默认 'center' */
+  align?: AlignItems;
+  /** justifyContent */
+  justify?: JustifyContent;
+  /** 子元素间距 */
+  gap?: number;
+  /** 是否换行 */
+  wrap?: boolean;
+}
+
+const Row: React.FC<RowProps> = ({
+  align,
+  justify,
+  gap,
+  wrap,
+  style,
+  ...rest
+}: RowProps) => (
+  <View
+    style={[
+      baseStyle,
+      align != null && { alignItems: align },
+      justify != null && { justifyContent: justify },
+      gap != null && { gap },
+      wrap && wrapStyle,
+      style,
+    ]}
+    {...rest}
+  />
+);
+
+export default Row;

package/src/row/style/index.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export const baseStyle = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+}).row;
+
+export const wrapStyle = StyleSheet.create({
+  wrap: {
+    flexWrap: 'wrap',
+  },
+}).wrap;

package/src/space/index.md

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

@@ -0,0 +1,28 @@
+/**
+ * 间距占位组件
+ *
+ * 在两个元素之间插入固定间距。
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import { verticalStyle, horizontalStyle } from './style';
+
+export interface SpaceProps {
+  /** 间距大小，默认 12 */
+  size?: number;
+  /** 方向，默认 'vertical' */
+  direction?: 'horizontal' | 'vertical';
+}
+
+const Space: React.FC<SpaceProps> = ({ size = 12, direction = 'vertical' }) => (
+  <View
+    style={
+      direction === 'vertical'
+        ? verticalStyle(size)
+        : horizontalStyle(size)
+    }
+  />
+);
+
+export default Space;

package/src/space/style/index.tsx

@@ -0,0 +1,3 @@
+export const verticalStyle = (size: number) => ({ height: size });
+
+export const horizontalStyle = (size: number) => ({ width: size });

package/src/text/index.md

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

@@ -0,0 +1,45 @@
+/**
+ * 语义化文字组件
+ *
+ * variant 驱动样式，支持嵌套 Text。
+ */
+
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import type { TextProps as RNTextProps } from 'react-native';
+import type { FontWeight } from './style';
+import { VARIANT_MAP, WEIGHT_MAP, secondaryStyle, primaryStyle } from './style';
+
+export interface TextProps extends RNTextProps {
+  variant?: 'title' | 'heading' | 'body' | 'caption' | 'micro';
+  secondary?: boolean;
+  primary?: boolean;
+  color?: string;
+  weight?: FontWeight;
+}
+
+const Text: React.FC<TextProps> = ({
+  variant = 'body',
+  secondary,
+  primary,
+  color,
+  weight,
+  style,
+  ...rest
+}: TextProps) => {
+  return (
+    <RNText
+      style={[
+        VARIANT_MAP[variant],
+        secondary && secondaryStyle,
+        primary && primaryStyle,
+        color != null && { color },
+        weight != null && WEIGHT_MAP[weight],
+        style,
+      ]}
+      {...rest}
+    />
+  );
+};
+
+export default Text;

package/src/text/style/index.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import type { TextStyle } from 'react-native';
+import { tokens } from '../../theme/tokens';
+
+export type FontWeight = 'medium' | 'semibold' | 'bold';
+
+export const VARIANT_MAP = StyleSheet.create({
+  title: {
+    fontSize: 20,
+    lineHeight: 26,
+    fontWeight: '600',
+    color: tokens.colorText,
+  },
+  heading: {
+    fontSize: 16,
+    lineHeight: 22,
+    fontWeight: '600',
+    color: tokens.colorText,
+  },
+  body: { fontSize: 15, lineHeight: 22, color: tokens.colorText },
+  caption: { fontSize: 13, lineHeight: 18, color: tokens.colorText },
+  micro: { fontSize: 12, lineHeight: 18, color: tokens.colorText },
+});
+
+export const WEIGHT_MAP: Record<FontWeight, TextStyle> = {
+  medium: { fontWeight: '500' },
+  semibold: { fontWeight: '600' },
+  bold: { fontWeight: '700' },
+};
+
+export const secondaryStyle: TextStyle = { color: tokens.colorTextSecondary };
+export const primaryStyle: TextStyle = { color: tokens.colorPrimary };

package/src/theme/config.ts

@@ -0,0 +1,26 @@
+/**
+ * 主题配置
+ *
+ * 消费方通过 configure() 注入主题色，实现包与业务解耦。
+ */
+
+export interface ThemeConfig {
+  primaryColor?: string;
+}
+
+let _config: ThemeConfig = {};
+
+/**
+ * 配置主题
+ *
+ * @example
+ * import { configure } from '@unif/react-native-ui';
+ * configure({ primaryColor: getAppThemeColor() });
+ */
+export function configure(options: ThemeConfig): void {
+  _config = { ..._config, ...options };
+}
+
+export function getPrimaryColor(): string {
+  return _config.primaryColor || '#EB6E00';
+}

package/src/theme/tokens.ts

@@ -0,0 +1,66 @@
+/**
+ * Design Tokens
+ */
+
+import { getPrimaryColor } from './config';
+
+export const tokens = {
+  get colorPrimary() {
+    return getPrimaryColor();
+  },
+  colorSuccess: '#34C759',
+  colorWarning: '#FF9500',
+  colorError: '#FF3B30',
+
+  colorBgPage: '#F7F7F8',
+  colorBgElevated: '#FFFFFF',
+  colorBgUserMsg: '#F0F0F0',
+
+  colorText: '#1D1D1F',
+  colorTextSecondary: '#8E8E93',
+  colorTextPlaceholder: '#C7C7CC',
+  colorBorder: '#E5E5EA',
+  colorLink: '#007AFF',
+
+  colorBgHeader: '#FFFFFF',
+  colorHeaderText: '#1D1D1F',
+  colorHeaderIcon: '#8E8E93',
+
+  fontSizeXs: 11,
+  fontSizeSm: 13,
+  fontSize: 15,
+  fontSizeMd: 16,
+  fontSizeLg: 17,
+  fontSizeXl: 20,
+  lineHeight: 22,
+  lineHeightLg: 26,
+
+  spaceXs: 4,
+  spaceSm: 8,
+  space: 12,
+  spaceMd: 16,
+  spaceLg: 20,
+  spaceXl: 24,
+  spaceXxl: 32,
+
+  radiusSm: 6,
+  radius: 10,
+  radiusLg: 16,
+  radiusXl: 20,
+  radiusFull: 999,
+
+  shadowSm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.04,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  shadow: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+};

package/src/touchable/index.md

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

@@ -0,0 +1,45 @@
+/**
+ * 统一触摸反馈组件
+ *
+ * 基于 Pressable，替代 TouchableOpacity。
+ * 按下时透明度降低，支持 activeOpacity 自定义。
+ */
+
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { ViewProps, ViewStyle } from 'react-native';
+import { disabledStyle } from './style';
+
+export interface TouchableProps extends ViewProps {
+  onPress?: () => void;
+  onLongPress?: () => void;
+  disabled?: boolean;
+  /** 按下态透明度，默认 0.7 */
+  activeOpacity?: number;
+  testID?: string;
+}
+
+const Touchable: React.FC<TouchableProps> = ({
+  onPress,
+  onLongPress,
+  disabled,
+  activeOpacity = 0.7,
+  style,
+  testID,
+  ...rest
+}: TouchableProps) => (
+  <Pressable
+    onPress={onPress}
+    onLongPress={onLongPress}
+    disabled={disabled}
+    testID={testID}
+    style={({ pressed }) => [
+      style as ViewStyle,
+      pressed && { opacity: activeOpacity },
+      disabled && disabledStyle,
+    ]}
+    {...rest}
+  />
+);
+
+export default Touchable;

package/src/touchable/style/index.tsx

@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+export const disabledStyle = StyleSheet.create({
+  s: { opacity: 0.4 },
+}).s;

package/src/wave-animation/index.md

@@ -0,0 +1,50 @@
+---
+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`   | -           |