@xsolla/xui-avatar 0.96.0 → 0.97.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -0
- package/package.json +6 -6
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# @xsolla/xui-avatar
|
|
2
|
+
|
|
3
|
+
Avatar and avatar group components supporting images, initials, icons, and notification badges.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-avatar
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Avatar, AvatarGroup } from '@xsolla/xui-avatar';
|
|
15
|
+
|
|
16
|
+
<Avatar src="https://example.com/user.jpg" size="md" />
|
|
17
|
+
|
|
18
|
+
<AvatarGroup
|
|
19
|
+
list={[
|
|
20
|
+
{ src: 'https://example.com/a.jpg', tooltip: 'Alice' },
|
|
21
|
+
{ initials: 'BJ', tooltip: 'Bob Jones' },
|
|
22
|
+
]}
|
|
23
|
+
maxVisible={5}
|
|
24
|
+
/>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Components
|
|
28
|
+
|
|
29
|
+
- **Avatar** — Single avatar displaying an image, initials, icon, or default user icon.
|
|
30
|
+
- **AvatarGroup** — Row of overlapping avatars with a "+N" overflow counter.
|
|
31
|
+
|
|
32
|
+
## Props
|
|
33
|
+
|
|
34
|
+
### Avatar
|
|
35
|
+
|
|
36
|
+
| Prop | Type | Default | Description |
|
|
37
|
+
|------|------|---------|-------------|
|
|
38
|
+
| `src` | `string` | — | Image source URL |
|
|
39
|
+
| `icon` | `ReactNode` | — | Icon shown when no image is provided |
|
|
40
|
+
| `text` | `string` | — | Initials shown when no image or icon is provided |
|
|
41
|
+
| `size` | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Avatar size |
|
|
42
|
+
| `square` | `boolean` | `false` | Square shape with small border radius instead of circle |
|
|
43
|
+
| `badge` | `boolean` | `false` | Show a notification badge |
|
|
44
|
+
| `badgeCount` | `ReactNode` | — | Count or label displayed in the badge |
|
|
45
|
+
| `badgeTone` | `"primary" \| "secondary" \| "brand" \| "success" \| "warning" \| "alert" \| "neutral"` | `"alert"` | Badge colour tone |
|
|
46
|
+
| `stroke` | `boolean` | `false` | Border to separate avatar from adjacent avatars |
|
|
47
|
+
| `onClick` | `() => void` | — | Click handler |
|
|
48
|
+
|
|
49
|
+
### AvatarGroup
|
|
50
|
+
|
|
51
|
+
| Prop | Type | Default | Description |
|
|
52
|
+
|------|------|---------|-------------|
|
|
53
|
+
| `list` | `AvatarGroupItem[]` | — | Avatars to display (`src`, `initials`, `tooltip`, `onClick`) |
|
|
54
|
+
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of all avatars in the group |
|
|
55
|
+
| `maxVisible` | `number` | `6` | Max avatars shown before collapsing into "+N" |
|
|
56
|
+
| `stroke` | `boolean` | `true` | Border around each avatar |
|
|
57
|
+
| `avatarBackgroundMode` | `"mixed" \| "brand" \| "success" \| "warning" \| "alert" \| "neutral" \| ((theme) => string)` | `"mixed"` | Background colour mode for text/icon avatars |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-badge": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-icons-base": "0.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
-
"@xsolla/xui-tooltip": "0.
|
|
13
|
+
"@xsolla/xui-badge": "0.97.0",
|
|
14
|
+
"@xsolla/xui-core": "0.97.0",
|
|
15
|
+
"@xsolla/xui-icons-base": "0.97.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.97.0",
|
|
17
|
+
"@xsolla/xui-tooltip": "0.97.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|