@xsolla/xui-avatar 0.119.0 → 0.120.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/package.json +6 -6
- package/native/index.js.flow +0 -177
- package/web/index.js.flow +0 -177
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.120.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.120.0",
|
|
14
|
+
"@xsolla/xui-core": "0.120.0",
|
|
15
|
+
"@xsolla/xui-icons-base": "0.120.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.120.0",
|
|
17
|
+
"@xsolla/xui-tooltip": "0.120.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|
package/native/index.js.flow
DELETED
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Flowtype definitions for index
|
|
3
|
-
* Generated by Flowgen from a Typescript Definition
|
|
4
|
-
* Flowgen v1.21.0
|
|
5
|
-
* @flow
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import React from "react";
|
|
9
|
-
import { useDesignSystem } from "@xsolla/xui-core";
|
|
10
|
-
declare interface AvatarProps {
|
|
11
|
-
/**
|
|
12
|
-
* Image source URL
|
|
13
|
-
*/
|
|
14
|
-
src?: string;
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Icon component to display when no image is provided
|
|
18
|
-
*/
|
|
19
|
-
icon?: React.ReactNode;
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Text/Initials to display when no image or icon is provided
|
|
23
|
-
*/
|
|
24
|
-
text?: string;
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Size of the avatar
|
|
28
|
-
*/
|
|
29
|
-
size?: "xl" | "lg" | "md" | "sm" | "xs";
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* If true, the avatar will be square with small border radius. If false, it will be a circle.
|
|
33
|
-
*/
|
|
34
|
-
square?: boolean;
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Whether to show an alert badge
|
|
38
|
-
*/
|
|
39
|
-
badge?: boolean;
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Number or text to display in the badge notification
|
|
43
|
-
*/
|
|
44
|
-
badgeCount?: React.ReactNode;
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* If true, the avatar will have a border to separate it from other avatars in a group
|
|
48
|
-
*/
|
|
49
|
-
stroke?: boolean;
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Background color for the avatar. Defaults to theme background secondary.
|
|
53
|
-
*/
|
|
54
|
-
backgroundColor?: string;
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Disable hover effect. Used internally by AvatarGroup.
|
|
58
|
-
*/
|
|
59
|
-
disableHover?: boolean;
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Accessible label for the avatar. Recommended for screen readers.
|
|
63
|
-
*/
|
|
64
|
-
"aria-label"?: string;
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Alternative text for the avatar image
|
|
68
|
-
*/
|
|
69
|
-
alt?: string;
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* Click handler for the avatar
|
|
73
|
-
*/
|
|
74
|
-
onClick?: () => void;
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Color tone for the badge
|
|
78
|
-
*/
|
|
79
|
-
badgeTone?:
|
|
80
|
-
| "primary"
|
|
81
|
-
| "secondary"
|
|
82
|
-
| "brand"
|
|
83
|
-
| "brandExtra"
|
|
84
|
-
| "success"
|
|
85
|
-
| "warning"
|
|
86
|
-
| "alert"
|
|
87
|
-
| "neutral";
|
|
88
|
-
}
|
|
89
|
-
declare var Avatar: React.FC<AvatarProps>;
|
|
90
|
-
/**
|
|
91
|
-
* Theme type from the design system
|
|
92
|
-
*/
|
|
93
|
-
declare type Theme = $PropertyType<
|
|
94
|
-
$Call<<R>((...args: any[]) => R) => R, typeof useDesignSystem>,
|
|
95
|
-
"theme"
|
|
96
|
-
>;
|
|
97
|
-
/**
|
|
98
|
-
* Item in the avatar group list
|
|
99
|
-
*/
|
|
100
|
-
declare interface AvatarGroupItem {
|
|
101
|
-
/**
|
|
102
|
-
* Image source URL
|
|
103
|
-
*/
|
|
104
|
-
src?: string;
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* Initials to display when no image is provided
|
|
108
|
-
*/
|
|
109
|
-
initials?: string;
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* Click handler for the avatar
|
|
113
|
-
*/
|
|
114
|
-
onClick?: () => void;
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* Tooltip text to display on hover
|
|
118
|
-
*/
|
|
119
|
-
tooltip?: string;
|
|
120
|
-
}
|
|
121
|
-
/**
|
|
122
|
-
* Avatar background mode - preset colors, 'mixed' for cycling, or a theme function
|
|
123
|
-
*/
|
|
124
|
-
declare type AvatarBackgroundMode =
|
|
125
|
-
| "mixed"
|
|
126
|
-
| "brand"
|
|
127
|
-
| "brandExtra"
|
|
128
|
-
| "success"
|
|
129
|
-
| "warning"
|
|
130
|
-
| "alert"
|
|
131
|
-
| "neutral"
|
|
132
|
-
| ((theme: Theme) => string);
|
|
133
|
-
declare interface AvatarGroupProps {
|
|
134
|
-
/**
|
|
135
|
-
* List of avatars to display in the group.
|
|
136
|
-
* `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.
|
|
137
|
-
*/
|
|
138
|
-
list: AvatarGroupItem[];
|
|
139
|
-
|
|
140
|
-
/**
|
|
141
|
-
* Size of the avatars in the group
|
|
142
|
-
*/
|
|
143
|
-
size?: "sm" | "md" | "lg" | "xl";
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
* The maximum number of avatars to display before collapsing the rest into a "+N" counter.
|
|
147
|
-
* If the number of avatars exceeds this value, the extra avatars will be hidden.
|
|
148
|
-
*/
|
|
149
|
-
maxVisible?: number;
|
|
150
|
-
|
|
151
|
-
/**
|
|
152
|
-
* Whether to show a stroke/border around each avatar
|
|
153
|
-
*/
|
|
154
|
-
stroke?: boolean;
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Controls the background color mode for avatars in the group.
|
|
158
|
-
* - 'mixed' (default): Avatars cycle through different colors
|
|
159
|
-
* - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars
|
|
160
|
-
* - Theme function: A function that receives theme and returns any color from the design system.
|
|
161
|
-
* Example: (theme) => theme.colors.core.link.link
|
|
162
|
-
*/
|
|
163
|
-
avatarBackgroundMode?: AvatarBackgroundMode;
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* Accessible label for the avatar group. Defaults to "Group of X users".
|
|
167
|
-
*/
|
|
168
|
-
"aria-label"?: string;
|
|
169
|
-
}
|
|
170
|
-
declare var AvatarGroup: React.FC<AvatarGroupProps>;
|
|
171
|
-
export type {
|
|
172
|
-
AvatarBackgroundMode,
|
|
173
|
-
AvatarGroupItem,
|
|
174
|
-
AvatarGroupProps,
|
|
175
|
-
AvatarProps,
|
|
176
|
-
};
|
|
177
|
-
declare export { Avatar, AvatarGroup };
|
package/web/index.js.flow
DELETED
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Flowtype definitions for index
|
|
3
|
-
* Generated by Flowgen from a Typescript Definition
|
|
4
|
-
* Flowgen v1.21.0
|
|
5
|
-
* @flow
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import React from "react";
|
|
9
|
-
import { useDesignSystem } from "@xsolla/xui-core";
|
|
10
|
-
declare interface AvatarProps {
|
|
11
|
-
/**
|
|
12
|
-
* Image source URL
|
|
13
|
-
*/
|
|
14
|
-
src?: string;
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Icon component to display when no image is provided
|
|
18
|
-
*/
|
|
19
|
-
icon?: React.ReactNode;
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Text/Initials to display when no image or icon is provided
|
|
23
|
-
*/
|
|
24
|
-
text?: string;
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Size of the avatar
|
|
28
|
-
*/
|
|
29
|
-
size?: "xl" | "lg" | "md" | "sm" | "xs";
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* If true, the avatar will be square with small border radius. If false, it will be a circle.
|
|
33
|
-
*/
|
|
34
|
-
square?: boolean;
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Whether to show an alert badge
|
|
38
|
-
*/
|
|
39
|
-
badge?: boolean;
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Number or text to display in the badge notification
|
|
43
|
-
*/
|
|
44
|
-
badgeCount?: React.ReactNode;
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* If true, the avatar will have a border to separate it from other avatars in a group
|
|
48
|
-
*/
|
|
49
|
-
stroke?: boolean;
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Background color for the avatar. Defaults to theme background secondary.
|
|
53
|
-
*/
|
|
54
|
-
backgroundColor?: string;
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Disable hover effect. Used internally by AvatarGroup.
|
|
58
|
-
*/
|
|
59
|
-
disableHover?: boolean;
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Accessible label for the avatar. Recommended for screen readers.
|
|
63
|
-
*/
|
|
64
|
-
"aria-label"?: string;
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Alternative text for the avatar image
|
|
68
|
-
*/
|
|
69
|
-
alt?: string;
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* Click handler for the avatar
|
|
73
|
-
*/
|
|
74
|
-
onClick?: () => void;
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* Color tone for the badge
|
|
78
|
-
*/
|
|
79
|
-
badgeTone?:
|
|
80
|
-
| "primary"
|
|
81
|
-
| "secondary"
|
|
82
|
-
| "brand"
|
|
83
|
-
| "brandExtra"
|
|
84
|
-
| "success"
|
|
85
|
-
| "warning"
|
|
86
|
-
| "alert"
|
|
87
|
-
| "neutral";
|
|
88
|
-
}
|
|
89
|
-
declare var Avatar: React.FC<AvatarProps>;
|
|
90
|
-
/**
|
|
91
|
-
* Theme type from the design system
|
|
92
|
-
*/
|
|
93
|
-
declare type Theme = $PropertyType<
|
|
94
|
-
$Call<<R>((...args: any[]) => R) => R, typeof useDesignSystem>,
|
|
95
|
-
"theme"
|
|
96
|
-
>;
|
|
97
|
-
/**
|
|
98
|
-
* Item in the avatar group list
|
|
99
|
-
*/
|
|
100
|
-
declare interface AvatarGroupItem {
|
|
101
|
-
/**
|
|
102
|
-
* Image source URL
|
|
103
|
-
*/
|
|
104
|
-
src?: string;
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* Initials to display when no image is provided
|
|
108
|
-
*/
|
|
109
|
-
initials?: string;
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* Click handler for the avatar
|
|
113
|
-
*/
|
|
114
|
-
onClick?: () => void;
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* Tooltip text to display on hover
|
|
118
|
-
*/
|
|
119
|
-
tooltip?: string;
|
|
120
|
-
}
|
|
121
|
-
/**
|
|
122
|
-
* Avatar background mode - preset colors, 'mixed' for cycling, or a theme function
|
|
123
|
-
*/
|
|
124
|
-
declare type AvatarBackgroundMode =
|
|
125
|
-
| "mixed"
|
|
126
|
-
| "brand"
|
|
127
|
-
| "brandExtra"
|
|
128
|
-
| "success"
|
|
129
|
-
| "warning"
|
|
130
|
-
| "alert"
|
|
131
|
-
| "neutral"
|
|
132
|
-
| ((theme: Theme) => string);
|
|
133
|
-
declare interface AvatarGroupProps {
|
|
134
|
-
/**
|
|
135
|
-
* List of avatars to display in the group.
|
|
136
|
-
* `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.
|
|
137
|
-
*/
|
|
138
|
-
list: AvatarGroupItem[];
|
|
139
|
-
|
|
140
|
-
/**
|
|
141
|
-
* Size of the avatars in the group
|
|
142
|
-
*/
|
|
143
|
-
size?: "sm" | "md" | "lg" | "xl";
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
* The maximum number of avatars to display before collapsing the rest into a "+N" counter.
|
|
147
|
-
* If the number of avatars exceeds this value, the extra avatars will be hidden.
|
|
148
|
-
*/
|
|
149
|
-
maxVisible?: number;
|
|
150
|
-
|
|
151
|
-
/**
|
|
152
|
-
* Whether to show a stroke/border around each avatar
|
|
153
|
-
*/
|
|
154
|
-
stroke?: boolean;
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Controls the background color mode for avatars in the group.
|
|
158
|
-
* - 'mixed' (default): Avatars cycle through different colors
|
|
159
|
-
* - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars
|
|
160
|
-
* - Theme function: A function that receives theme and returns any color from the design system.
|
|
161
|
-
* Example: (theme) => theme.colors.core.link.link
|
|
162
|
-
*/
|
|
163
|
-
avatarBackgroundMode?: AvatarBackgroundMode;
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* Accessible label for the avatar group. Defaults to "Group of X users".
|
|
167
|
-
*/
|
|
168
|
-
"aria-label"?: string;
|
|
169
|
-
}
|
|
170
|
-
declare var AvatarGroup: React.FC<AvatarGroupProps>;
|
|
171
|
-
export type {
|
|
172
|
-
AvatarBackgroundMode,
|
|
173
|
-
AvatarGroupItem,
|
|
174
|
-
AvatarGroupProps,
|
|
175
|
-
AvatarProps,
|
|
176
|
-
};
|
|
177
|
-
declare export { Avatar, AvatarGroup };
|