@unif/react-native-ui 0.1.0

package/lib/typescript/src/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DlB,CAAC"}

package/lib/typescript/src/touchable/index.d.ts

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

package/lib/typescript/src/touchable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/touchable/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,cAAc,CAAC;AAGzD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqBvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/src/touchable/style/index.d.ts

@@ -0,0 +1,4 @@
+export declare const disabledStyle: {
+    opacity: number;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/touchable/style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/touchable/style/index.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;CAEtB,CAAC"}

package/lib/typescript/src/wave-animation/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * WaveAnimation 原子组件
+ *
+ * 柱状声波动画，可配置柱数、尺寸和颜色。
+ */
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+export interface WaveAnimationProps {
+    active: boolean;
+    color?: string;
+    barCount?: number;
+    barWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    style?: ViewStyle;
+    testID?: string;
+}
+declare const _default: React.NamedExoticComponent<WaveAnimationProps>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/wave-animation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/wave-animation/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;;AAyED,wBAAyC"}

package/lib/typescript/tests/component/component.coverage.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=component.coverage.test.d.ts.map

package/lib/typescript/tests/component/component.coverage.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.coverage.test.d.ts","sourceRoot":"","sources":["../../../../tests/component/component.coverage.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/tests/component/component.interaction.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=component.interaction.test.d.ts.map

package/lib/typescript/tests/component/component.interaction.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.interaction.test.d.ts","sourceRoot":"","sources":["../../../../tests/component/component.interaction.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/tests/component/component.snapshot.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=component.snapshot.test.d.ts.map

package/lib/typescript/tests/component/component.snapshot.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.snapshot.test.d.ts","sourceRoot":"","sources":["../../../../tests/component/component.snapshot.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/tests/e2e/app.e2e.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=app.e2e.test.d.ts.map

package/lib/typescript/tests/e2e/app.e2e.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.e2e.test.d.ts","sourceRoot":"","sources":["../../../../tests/e2e/app.e2e.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/tests/integration/ui.integration.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ui.integration.test.d.ts.map

package/lib/typescript/tests/integration/ui.integration.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.integration.test.d.ts","sourceRoot":"","sources":["../../../../tests/integration/ui.integration.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/tests/unit/mergeStyles.unit.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=mergeStyles.unit.test.d.ts.map

package/lib/typescript/tests/unit/mergeStyles.unit.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeStyles.unit.test.d.ts","sourceRoot":"","sources":["../../../../tests/unit/mergeStyles.unit.test.ts"],"names":[],"mappings":""}

package/lib/typescript/tests/unit/public-api.unit.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=public-api.unit.test.d.ts.map

package/lib/typescript/tests/unit/public-api.unit.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.unit.test.d.ts","sourceRoot":"","sources":["../../../../tests/unit/public-api.unit.test.ts"],"names":[],"mappings":""}

package/lib/typescript/tests/unit/theme-config.unit.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme-config.unit.test.d.ts.map

package/lib/typescript/tests/unit/theme-config.unit.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-config.unit.test.d.ts","sourceRoot":"","sources":["../../../../tests/unit/theme-config.unit.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,134 @@
+{
+  "name": "@unif/react-native-ui",
+  "version": "0.1.0",
+  "description": "UNIF React Native UI Components",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn --cwd example",
+    "clean": "del-cli lib",
+    "prepare": "",
+    "prepublishOnly": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "test:static": "yarn lint && yarn typecheck",
+    "test:unit": "jest tests/unit --runInBand",
+    "test:integration": "jest tests/integration --runInBand",
+    "test:component": "jest tests/component --runInBand",
+    "test:e2e": "jest tests/e2e --runInBand",
+    "detox:build:android": "yarn --cwd example detox:build:android",
+    "detox:test:android": "yarn --cwd example detox:test:android",
+    "detox:build:ios": "yarn --cwd example detox:build:ios",
+    "detox:test:ios": "yarn --cwd example detox:test:ios"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://tygitlab.pec.com.cn/qq382724935/react-native-ui.git"
+  },
+  "author": "qq382724935 <liulijun@pec.com.cn> (https://tygitlab.pec.com.cn/qq382724935)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://tygitlab.pec.com.cn/qq382724935/react-native-ui/issues"
+  },
+  "homepage": "https://tygitlab.pec.com.cn/qq382724935/react-native-ui#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "@types/react-test-renderer": "^19",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^2.8.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-test-renderer": "19.1.0",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.57.1"
+  }
+}

package/src/README.md

@@ -0,0 +1,99 @@
+# @unif/react-native-ui 基础组件
+
+借鉴 antd v6 语义化设计 + ant-design-mobile-rn 实践，提供基础 UI 组件。
+
+## 组件总览
+
+### 布局
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Row | 水平布局 | [row/index.md](./row/index.md) |
+| Column | 垂直布局 | [column/index.md](./column/index.md) |
+| Center | 居中布局 | [center/index.md](./center/index.md) |
+| Space | 间距占位 | [space/index.md](./space/index.md) |
+
+### 通用
+
+| 组件 | 说明 | 文档 |
+|------|------|------|
+| Text | 语义化文字 | [text/index.md](./text/index.md) |
+| Button | 语义化按钮 | [button/index.md](./button/index.md) |
+| Touchable | 统一触摸反馈 | [touchable/index.md](./touchable/index.md) |
+| Divider | 分割线 | [divider/index.md](./divider/index.md) |
+| ListItem | 列表行 | [list-item/index.md](./list-item/index.md) |
+| mergeStyles | 样式合并工具 | [hooks/index.md](./hooks/index.md) |
+
+## 引入方式
+
+```tsx
+import { Row, Column, Center, Space, Text, Button, Touchable, Divider, ListItem } from '@unif/react-native-ui';
+```
+
+## 目录结构
+
+```
+src/
+├── index.tsx                 # 统一导出
+├── README.md                 # 总览（本文件）
+├── theme/
+│   ├── config.ts             # 主题配置（configure API）
+│   └── tokens.ts             # Design Tokens
+├── hooks/
+│   ├── index.ts
+│   ├── index.md              # mergeStyles 文档
+│   └── useMergeStyles.ts
+├── row/
+│   ├── index.tsx             # Row 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── column/
+│   ├── index.tsx             # Column 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── center/
+│   ├── index.tsx             # Center 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── space/
+│   ├── index.tsx             # Space 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── text/
+│   ├── index.tsx             # Text 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── button/
+│   ├── index.tsx             # Button 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── touchable/
+│   ├── index.tsx             # Touchable 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+├── divider/
+│   ├── index.tsx             # Divider 组件
+│   ├── index.md
+│   └── style/
+│       └── index.tsx
+└── list-item/
+    ├── index.tsx             # ListItem 组件
+    ├── index.md
+    └── style/
+        └── index.tsx
+```
+
+## 设计原则
+
+1. **语义化** — `variant="caption"` 而非 `fontSize={13}`，意图清晰
+2. **Semantic Styles** — 消费方通过 `styles={{content: {...}}}` 精确覆盖内部 slot，不侵入组件结构
+3. **Token 驱动** — 所有颜色、间距来自 `tokens`，主题可控
+4. **样式数组组合** — `[baseStyle, variantStyle, stateStyle, userStyle]` 优先级叠加
+5. **性能安全** — 样式常量预定义在模块顶层，`mergeStyles` 配合 `useMemo` 使用

package/src/action-sheet/index.md

@@ -0,0 +1,69 @@
+---
+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/src/action-sheet/index.tsx

@@ -0,0 +1,85 @@
+/**
+ * ActionSheet 基础组件
+ *
+ * 轻量底部选项面板，Modal + 网格布局。
+ */
+
+import React, { useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Modal,
+} from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { mergeStyles } from '../hooks';
+import type { ActionSheetSemanticStyles, ActionSheetOption } from './style';
+import { DEFAULT_STYLES } from './style';
+
+export interface ActionSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  options: ActionSheetOption[];
+  onSelect: (key: string) => void;
+  columns?: number;
+  style?: ViewStyle;
+  styles?: Partial<ActionSheetSemanticStyles>;
+  testID?: string;
+}
+
+const ActionSheet: React.FC<ActionSheetProps> = ({
+  visible,
+  onClose,
+  options,
+  onSelect,
+  columns = 3,
+  style,
+  styles: semanticStyles,
+  testID,
+}) => {
+  const s = useMemo(
+    () => mergeStyles<ActionSheetSemanticStyles>(DEFAULT_STYLES, semanticStyles),
+    [semanticStyles],
+  );
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={s.overlay} />
+      </TouchableWithoutFeedback>
+
+      <View style={[s.panel, style]} testID={testID}>
+        <View style={s.grid}>
+          {options.map((item) => (
+            <TouchableOpacity
+              key={item.key}
+              style={[
+                s.option,
+                { width: `${Math.floor(100 / columns)}%` as any },
+              ]}
+              onPress={() => onSelect(item.key)}
+              activeOpacity={0.7}
+              testID={testID ? `${testID}-${item.key}` : undefined}
+            >
+              <View style={s.optionIcon}>{item.icon}</View>
+              <Text style={s.optionLabel}>{item.label}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ActionSheet;

package/src/action-sheet/style/index.tsx

@@ -0,0 +1,52 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+import { tokens } from '../../theme/tokens';
+
+export type ActionSheetSemanticStyles = {
+  overlay?: ViewStyle;
+  panel?: ViewStyle;
+  grid?: ViewStyle;
+  option?: ViewStyle;
+  optionIcon?: ViewStyle;
+  optionLabel?: TextStyle;
+};
+
+export interface ActionSheetOption {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export const DEFAULT_STYLES: ActionSheetSemanticStyles = {
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  panel: {
+    backgroundColor: tokens.colorBgElevated,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+    paddingTop: 20,
+    paddingBottom: 24,
+    paddingHorizontal: tokens.spaceMd,
+  },
+  grid: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  option: {
+    alignItems: 'center',
+  },
+  optionIcon: {
+    width: 56,
+    height: 56,
+    borderRadius: 12,
+    backgroundColor: tokens.colorBgPage,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: tokens.spaceSm,
+  },
+  optionLabel: {
+    fontSize: 12,
+    color: tokens.colorTextSecondary,
+  },
+};

package/src/avatar/index.md

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

@@ -0,0 +1,56 @@
+/**
+ * Avatar 原子组件
+ *
+ * 圆形图像/图标容器，支持图片、图标、占位三种模式。
+ */
+
+import React, { useMemo } from 'react';
+import { View, Image } from 'react-native';
+import type { ViewStyle, ImageSourcePropType } from 'react-native';
+import { mergeStyles } from '../hooks';
+import type { AvatarSemanticStyles } from './style';
+import { DEFAULT_STYLES } from './style';
+
+export interface AvatarProps {
+  size?: number;
+  source?: ImageSourcePropType;
+  icon?: React.ReactNode;
+  style?: ViewStyle;
+  styles?: Partial<AvatarSemanticStyles>;
+  testID?: string;
+}
+
+const Avatar: React.FC<AvatarProps> = ({
+  size = 40,
+  source,
+  icon,
+  style,
+  styles: semanticStyles,
+  testID,
+}) => {
+  const s = useMemo(
+    () => mergeStyles<AvatarSemanticStyles>(DEFAULT_STYLES, semanticStyles),
+    [semanticStyles],
+  );
+
+  const sizeStyle: ViewStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+  };
+
+  return (
+    <View style={[s.root, sizeStyle, style]} testID={testID}>
+      {source ? (
+        <Image
+          source={source}
+          style={[s.image, { width: size, height: size, borderRadius: size / 2 }]}
+        />
+      ) : icon ? (
+        icon
+      ) : null}
+    </View>
+  );
+};
+
+export default Avatar;