@ayseaistudio/ui-components 2.2.3 → 2.3.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.
Files changed (23) hide show
  1. package/dist/Avatar/style.css +2 -0
  2. package/dist/MultipleAvatar/MultipleAvatar.d.ts +34 -0
  3. package/dist/MultipleAvatar/MultipleAvatar.js +39 -0
  4. package/dist/MultipleAvatar/index.d.ts +1 -0
  5. package/dist/MultipleAvatar/index.js +1 -0
  6. package/dist/MultipleAvatar/style.css +50 -0
  7. package/dist/Profile/Profile.d.ts +24 -0
  8. package/dist/Profile/Profile.js +15 -0
  9. package/dist/Profile/index.d.ts +1 -0
  10. package/dist/Profile/index.js +1 -0
  11. package/dist/Profile/style.css +269 -0
  12. package/dist/ProfileButton/ProfileButton.d.ts +14 -7
  13. package/dist/ProfileButton/ProfileButton.js +8 -11
  14. package/dist/ProfileButton/style.css +85 -22
  15. package/dist/ProfileSelector/ProfileSelector.d.ts +73 -0
  16. package/dist/ProfileSelector/ProfileSelector.js +74 -0
  17. package/dist/ProfileSelector/index.d.ts +1 -0
  18. package/dist/ProfileSelector/index.js +1 -0
  19. package/dist/ProfileSelector/style.css +327 -0
  20. package/dist/TertiaryButton/style.css +0 -1
  21. package/dist/index.d.ts +1 -0
  22. package/dist/index.js +1 -0
  23. package/package.json +1 -1
package/dist/Avatar/style.css CHANGED
@@ -19,6 +19,7 @@
19
19
  text-align: center;
20
20
  white-space: nowrap;
21
21
  width: fit-content;
22
+ cursor: default;
22
23
  }
23
24
 
24
25
  .avatar.large {
@@ -94,6 +95,7 @@
94
95
 
95
96
  .avatar.red.default {
96
97
  background-color: #ffc5c5;
98
+ border: 1px solid rgba(237, 21, 21, 0.3);
97
99
  }
98
100
 
99
101
  .avatar.active.green {
package/dist/MultipleAvatar/MultipleAvatar.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import PropTypes from "prop-types";
2
+ import "./style.css";
3
+ interface AvatarData {
4
+ letter: string;
5
+ color?: "grey" | "blue" | "green" | "red" | "mauve" | "lime" | "zest" | "orange" | "galliano";
6
+ status?: "active" | "default";
7
+ version?: "default" | "half";
8
+ }
9
+ interface Props {
10
+ avatars?: AvatarData[];
11
+ avatarSize?: "large" | "medium" | "small" | "x-small";
12
+ maxVisible?: number;
13
+ withPlusValue?: boolean;
14
+ plusValue?: string | number;
15
+ size: "large" | "medium" | "small";
16
+ className?: string;
17
+ }
18
+ export declare const MultipleAvatar: {
19
+ ({ avatars, maxVisible, withPlusValue, plusValue, size, className, }: Props): React.JSX.Element;
20
+ propTypes: {
21
+ avatars: PropTypes.Requireable<(PropTypes.InferProps<{
22
+ letter: PropTypes.Validator<string>;
23
+ color: PropTypes.Requireable<string>;
24
+ status: PropTypes.Requireable<string>;
25
+ version: PropTypes.Requireable<string>;
26
+ }> | null | undefined)[]>;
27
+ maxVisible: PropTypes.Requireable<number>;
28
+ withPlusValue: PropTypes.Requireable<boolean>;
29
+ plusValue: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
30
+ size: PropTypes.Validator<string>;
31
+ className: PropTypes.Requireable<string>;
32
+ };
33
+ };
34
+ export {};
package/dist/MultipleAvatar/MultipleAvatar.js ADDED
@@ -0,0 +1,39 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import PropTypes from "prop-types";
3
+ import "./style.css";
4
+ import { Avatar } from "../Avatar";
5
+ import { Label } from "../Label";
6
+ export const MultipleAvatar = ({ avatars, maxVisible = 5, withPlusValue = true, plusValue, size, className = "", }) => {
7
+ const getAvatarSize = (index) => {
8
+ if (size === "small")
9
+ return "x-small";
10
+ if (size === "large")
11
+ return index === 0 ? "medium" : "small";
12
+ return index === 0 ? "small" : "small";
13
+ };
14
+ const defaultAvatars = [
15
+ { letter: "AB", color: "grey", status: "active", version: "default" },
16
+ { letter: "CD", color: "grey", status: "active", version: "default" },
17
+ { letter: "EF", color: "grey", status: "active", version: "default" },
18
+ { letter: "GH", color: "grey", status: "active", version: "default" },
19
+ { letter: "IJ", color: "grey", status: "active", version: "default" },
20
+ ];
21
+ const safeAvatars = avatars || defaultAvatars;
22
+ const visibleAvatars = safeAvatars.slice(0, maxVisible);
23
+ const remainingCount = safeAvatars.length - maxVisible;
24
+ const showPlusValue = withPlusValue && remainingCount > 0;
25
+ return (_jsxs("div", { className: `multiple-avatar size-2-${size} ${className}`, children: [_jsx("div", { className: "avatars", children: visibleAvatars.map((avatar, index) => (_jsx(Avatar, { className: index === 0 ? "avatar-instance" : "instance-node", color: avatar.color || "grey", letter: avatar.letter, size: getAvatarSize(index), status: avatar.status || "active", version: avatar.version || "default" }, index))) }), showPlusValue && (_jsx(Label, { bold: "on", className: `${size === "small" ? "class-4" : "class-5"}`, color: "black", divClassName: `${size === "small" && "class-3"}`, size: size === "large" ? "medium" : "small", spacing: "on", stroke: "off", text: plusValue ? `+${plusValue}` : `+${remainingCount}`, version: "secondary" }))] }));
26
+ };
27
+ MultipleAvatar.propTypes = {
28
+ avatars: PropTypes.arrayOf(PropTypes.shape({
29
+ letter: PropTypes.string.isRequired,
30
+ color: PropTypes.oneOf(["grey", "blue", "green", "red", "mauve", "lime", "zest", "orange", "galliano"]),
31
+ status: PropTypes.oneOf(["active", "default"]),
32
+ version: PropTypes.oneOf(["default", "half"]),
33
+ })),
34
+ maxVisible: PropTypes.number,
35
+ withPlusValue: PropTypes.bool,
36
+ plusValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
37
+ size: PropTypes.oneOf(["large", "medium", "small"]).isRequired,
38
+ className: PropTypes.string,
39
+ };
package/dist/MultipleAvatar/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { MultipleAvatar } from "./MultipleAvatar";
package/dist/MultipleAvatar/index.js ADDED
@@ -0,0 +1 @@
1
+ export { MultipleAvatar } from "./MultipleAvatar";
package/dist/MultipleAvatar/style.css ADDED
@@ -0,0 +1,50 @@
1
+ .multiple-avatar {
2
+ align-items: center;
3
+ position: relative;
4
+ }
5
+
6
+ .multiple-avatar .avatars {
7
+ align-items: center;
8
+ display: inline-flex;
9
+ flex: 0 0 auto;
10
+ position: relative;
11
+ }
12
+
13
+ .multiple-avatar .instance-node {
14
+ margin-left: -6px !important;
15
+ }
16
+
17
+ .multiple-avatar .class-3 {
18
+ margin-bottom: -1.00px !important;
19
+ margin-top: -3.00px !important;
20
+ }
21
+
22
+ .multiple-avatar .class-4 {
23
+ align-self: stretch !important;
24
+ flex: 0 0 auto !important;
25
+ left: unset !important;
26
+ margin-left: -2px !important;
27
+ top: unset !important;
28
+ }
29
+
30
+ .multiple-avatar .class-5 {
31
+ flex: 0 0 auto !important;
32
+ left: unset !important;
33
+ margin-left: -2px !important;
34
+ top: unset !important;
35
+ }
36
+
37
+ .multiple-avatar.size-2-large {
38
+ display: flex;
39
+ width: 173px;
40
+ }
41
+
42
+ .multiple-avatar.size-2-medium {
43
+ display: inline-flex;
44
+ }
45
+
46
+ .multiple-avatar.size-2-small {
47
+ display: inline-flex;
48
+ height: 24px;
49
+ }
50
+
package/dist/Profile/Profile.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import PropTypes from "prop-types";
2
+ import "./style.css";
3
+ interface Props {
4
+ text?: string;
5
+ subtext?: string;
6
+ size?: "large" | "x-small" | "medium" | "small";
7
+ className?: any;
8
+ avatarSize: string;
9
+ avatarColor?: "grey" | "mauve" | "lime" | "zest" | "blue" | "green" | "galliano" | "orange" | "red";
10
+ avatarSizeMediumColorClassName?: any;
11
+ avatarLetter?: string;
12
+ }
13
+ export declare const Profile: {
14
+ ({ text, subtext, size, className, avatarSize, avatarColor, avatarSizeMediumColorClassName, avatarLetter, }: Props): React.JSX.Element;
15
+ propTypes: {
16
+ text: PropTypes.Requireable<string>;
17
+ subtext: PropTypes.Requireable<string>;
18
+ size: PropTypes.Requireable<string>;
19
+ avatarSize: PropTypes.Requireable<string>;
20
+ avatarColor: PropTypes.Requireable<string>;
21
+ avatarLetter: PropTypes.Requireable<string>;
22
+ };
23
+ };
24
+ export {};
package/dist/Profile/Profile.js ADDED
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import PropTypes from "prop-types";
3
+ import "./style.css";
4
+ import { Avatar } from "../Avatar";
5
+ export const Profile = ({ text, subtext, size, className, avatarSize = "medium", avatarColor = "grey", avatarSizeMediumColorClassName, avatarLetter = "AB", }) => {
6
+ return (_jsxs("div", { className: `profile size-0-${size} ${className}`, children: [_jsx(Avatar, { className: avatarSizeMediumColorClassName, color: avatarColor, letter: avatarLetter, size: avatarSize, status: "default", version: "default" }), text && (_jsxs("div", { className: "texts", children: [_jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] }))] }));
7
+ };
8
+ Profile.propTypes = {
9
+ text: PropTypes.string,
10
+ subtext: PropTypes.string,
11
+ size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
12
+ avatarSize: PropTypes.string,
13
+ avatarColor: PropTypes.string,
14
+ avatarLetter: PropTypes.string,
15
+ };
package/dist/Profile/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Profile } from "./Profile";
package/dist/Profile/index.js ADDED
@@ -0,0 +1 @@
1
+ export { Profile } from "./Profile";
package/dist/Profile/style.css ADDED
@@ -0,0 +1,269 @@
1
+ .profile {
2
+ align-items: center;
3
+ border-radius: 12px;
4
+ padding: 4px;
5
+ position: relative;
6
+ }
7
+
8
+ .profile .div-wrapper {
9
+ align-items: center;
10
+ background-color: #d1d1d1;
11
+ box-shadow: inset 0px 0px 10px #ffffff40;
12
+ display: flex;
13
+ flex-direction: column;
14
+ justify-content: center;
15
+ position: relative;
16
+ }
17
+
18
+ .profile .text-wrapper {
19
+ align-items: center;
20
+ color: #242424b2;
21
+ display: flex;
22
+ justify-content: center;
23
+ position: relative;
24
+ text-align: center;
25
+ white-space: nowrap;
26
+ width: fit-content;
27
+ cursor: default;
28
+ }
29
+
30
+ .profile .texts {
31
+ align-items: flex-start;
32
+ align-self: stretch;
33
+ flex-direction: column;
34
+ justify-content: center;
35
+ position: relative;
36
+ cursor: default;
37
+ }
38
+
39
+ .profile .text {
40
+ -webkit-box-orient: vertical;
41
+ color: #5d5d5d;
42
+ display: -webkit-box;
43
+ margin-top: -1.00px;
44
+ overflow: hidden;
45
+ position: relative;
46
+ text-overflow: ellipsis;
47
+ display: flex;
48
+ cursor: default;
49
+ }
50
+
51
+ .profile .subtext {
52
+ align-self: stretch;
53
+ color: #888888;
54
+ flex: 1;
55
+ position: relative;
56
+ white-space: nowrap;
57
+ }
58
+
59
+ .profile.size-0-x-small {
60
+ display: inline-flex;
61
+ gap: 4px;
62
+ }
63
+
64
+ .profile.size-0-large {
65
+ display: flex;
66
+ gap: 8px;
67
+ width: 185px;
68
+ }
69
+
70
+ .profile.size-0-medium {
71
+ display: inline-flex;
72
+ gap: 8px;
73
+ }
74
+
75
+ .profile.size-0-small {
76
+ display: inline-flex;
77
+ gap: 6px;
78
+ }
79
+
80
+ .profile.size-0-x-small .div-wrapper {
81
+ border-radius: 6px;
82
+ height: 24px;
83
+ width: 24px;
84
+ }
85
+
86
+ .profile.size-0-large .div-wrapper {
87
+ border-radius: 12px;
88
+ height: 56px;
89
+ width: 56px;
90
+ }
91
+
92
+ .profile.size-0-medium .div-wrapper {
93
+ border-radius: 12px;
94
+ height: 56px;
95
+ width: 56px;
96
+ }
97
+
98
+ .profile.size-0-small .div-wrapper {
99
+ border-radius: 8px;
100
+ height: 28px;
101
+ width: 28px;
102
+ }
103
+
104
+ .profile.size-0-x-small .text-wrapper {
105
+ font-family: var(--b3-bold-font-family);
106
+ font-size: var(--b3-bold-font-size);
107
+ font-style: var(--b3-bold-font-style);
108
+ font-weight: var(--b3-bold-font-weight);
109
+ letter-spacing: var(--b3-bold-letter-spacing);
110
+ line-height: var(--b3-bold-line-height);
111
+ cursor: default;
112
+ }
113
+
114
+ .profile.size-0-large .text-wrapper {
115
+ font-family: var(--h4-black-font-family);
116
+ font-size: var(--h4-black-font-size);
117
+ font-style: var(--h4-black-font-style);
118
+ font-weight: var(--h4-black-font-weight);
119
+ letter-spacing: var(--h4-black-letter-spacing);
120
+ line-height: var(--h4-black-line-height);
121
+ cursor: default;
122
+ }
123
+
124
+ .profile.size-0-medium .text-wrapper {
125
+ font-family: var(--h4-black-font-family);
126
+ font-size: var(--h4-black-font-size);
127
+ font-style: var(--h4-black-font-style);
128
+ font-weight: var(--h4-black-font-weight);
129
+ letter-spacing: var(--h4-black-letter-spacing);
130
+ line-height: var(--h4-black-line-height);
131
+ cursor: default;
132
+ }
133
+
134
+ .profile.size-0-small .text-wrapper {
135
+ font-family: var(--b2-black-font-family);
136
+ font-size: var(--b2-black-font-size);
137
+ font-style: var(--b2-black-font-style);
138
+ font-weight: var(--b2-black-font-weight);
139
+ letter-spacing: var(--b2-black-letter-spacing);
140
+ line-height: var(--b2-black-line-height);
141
+ cursor: default;
142
+ }
143
+
144
+ .profile.size-0-x-small .texts {
145
+ display: inline-flex;
146
+ flex: 0 0 auto;
147
+ }
148
+
149
+ .profile.size-0-large .texts {
150
+ display: flex;
151
+ flex: 1;
152
+ flex-grow: 1;
153
+ gap: 6px;
154
+ }
155
+
156
+ .profile.size-0-medium .texts {
157
+ display: inline-flex;
158
+ flex: 0 0 auto;
159
+ }
160
+
161
+ .profile.size-0-small .texts {
162
+ display: inline-flex;
163
+ flex: 0 0 auto;
164
+ }
165
+
166
+ .profile.size-0-x-small .text {
167
+ -webkit-line-clamp: 0;
168
+ align-items: center;
169
+ flex: 1;
170
+ font-family: var(--b2-bold-font-family);
171
+ font-size: var(--b2-bold-font-size);
172
+ font-style: var(--b2-bold-font-style);
173
+ font-weight: var(--b2-bold-font-weight);
174
+ justify-content: center;
175
+ letter-spacing: var(--b2-bold-letter-spacing);
176
+ line-height: var(--b2-bold-line-height);
177
+ white-space: nowrap;
178
+ cursor: default;
179
+ }
180
+
181
+ .profile.size-0-large .text {
182
+ -webkit-line-clamp: 0;
183
+ align-items: center;
184
+ flex: 1;
185
+ font-family: var(--h4-bold-font-family);
186
+ font-size: var(--h4-bold-font-size);
187
+ font-style: var(--h4-bold-font-style);
188
+ font-weight: var(--h4-bold-font-weight);
189
+ justify-content: center;
190
+ letter-spacing: var(--h4-bold-letter-spacing);
191
+ line-height: var(--h4-bold-line-height);
192
+ white-space: nowrap;
193
+ cursor: default;
194
+ }
195
+
196
+ .profile.size-0-medium .text {
197
+ -webkit-line-clamp: 1;
198
+ font-family: var(--b1-bold-font-family);
199
+ font-size: var(--b1-bold-font-size);
200
+ font-style: var(--b1-bold-font-style);
201
+ font-weight: var(--b1-bold-font-weight);
202
+ letter-spacing: var(--b1-bold-letter-spacing);
203
+ line-height: var(--b1-bold-line-height);
204
+ cursor: default;
205
+ }
206
+
207
+ .profile.size-0-small .text {
208
+ -webkit-line-clamp: 0;
209
+ align-items: center;
210
+ flex: 1;
211
+ font-family: var(--b2-bold-font-family);
212
+ font-size: var(--b2-bold-font-size);
213
+ font-style: var(--b2-bold-font-style);
214
+ font-weight: var(--b2-bold-font-weight);
215
+ justify-content: center;
216
+ letter-spacing: var(--b2-bold-letter-spacing);
217
+ line-height: var(--b2-bold-line-height);
218
+ white-space: nowrap;
219
+ cursor: default;
220
+ }
221
+
222
+ .profile.size-0-x-small .subtext {
223
+ align-items: center;
224
+ display: flex;
225
+ font-family: var(--b3-medium-font-family);
226
+ font-size: var(--b3-medium-font-size);
227
+ font-style: var(--b3-medium-font-style);
228
+ font-weight: var(--b3-medium-font-weight);
229
+ justify-content: center;
230
+ letter-spacing: var(--b3-medium-letter-spacing);
231
+ line-height: var(--b3-medium-line-height);
232
+ cursor: default;
233
+ }
234
+
235
+ .profile.size-0-large .subtext {
236
+ align-items: center;
237
+ display: flex;
238
+ font-family: var(--h6-medium-font-family);
239
+ font-size: var(--h6-medium-font-size);
240
+ font-style: var(--h6-medium-font-style);
241
+ font-weight: var(--h6-medium-font-weight);
242
+ justify-content: center;
243
+ letter-spacing: var(--h6-medium-letter-spacing);
244
+ line-height: var(--h6-medium-line-height);
245
+ cursor: default;
246
+ }
247
+
248
+ .profile.size-0-medium .subtext {
249
+ font-family: var(--b2-medium-font-family);
250
+ font-size: var(--b2-medium-font-size);
251
+ font-style: var(--b2-medium-font-style);
252
+ font-weight: var(--b2-medium-font-weight);
253
+ letter-spacing: var(--b2-medium-letter-spacing);
254
+ line-height: var(--b2-medium-line-height);
255
+ cursor: default;
256
+ }
257
+
258
+ .profile.size-0-small .subtext {
259
+ align-items: center;
260
+ display: flex;
261
+ font-family: var(--b3-medium-font-family);
262
+ font-size: var(--b3-medium-font-size);
263
+ font-style: var(--b3-medium-font-style);
264
+ font-weight: var(--b3-medium-font-weight);
265
+ justify-content: center;
266
+ letter-spacing: var(--b3-medium-letter-spacing);
267
+ line-height: var(--b3-medium-line-height);
268
+ cursor: default;
269
+ }
package/dist/ProfileButton/ProfileButton.d.ts CHANGED
@@ -1,27 +1,34 @@
1
1
  import PropTypes from "prop-types";
2
2
  import "./style.css";
3
3
  interface Props {
4
- text?: string;
4
+ text: string;
5
5
  subtext?: string;
6
6
  activity?: boolean;
7
- size?: "large" | "x-small" | "medium" | "small";
7
+ size: "large" | "x-small" | "medium" | "small";
8
8
  status?: "pressing" | "default";
9
9
  className?: any;
10
- avatarLetter?: string;
10
+ avatarSize?: string;
11
11
  avatarColor?: string;
12
+ avatarStatus?: string;
13
+ avatarSizeLargeColorClassName?: any;
14
+ avatarLetter?: string;
15
+ activitySize?: string;
12
16
  activityColor?: string;
13
17
  }
14
18
  export declare const ProfileButton: {
15
- ({ text, subtext, activity, size, status, avatarLetter, avatarColor, className, activityColor, }: Props): React.JSX.Element;
19
+ ({ text, subtext, activity, size, status, className, avatarSize, avatarColor, avatarStatus, avatarSizeLargeColorClassName, avatarLetter, activitySize, activityColor, }: Props): React.JSX.Element;
16
20
  propTypes: {
17
21
  text: PropTypes.Requireable<string>;
18
- withText: PropTypes.Requireable<boolean>;
19
22
  subtext: PropTypes.Requireable<string>;
20
- withSubtext: PropTypes.Requireable<boolean>;
21
- withAllText: PropTypes.Requireable<boolean>;
22
23
  activity: PropTypes.Requireable<boolean>;
23
24
  size: PropTypes.Requireable<string>;
24
25
  status: PropTypes.Requireable<string>;
26
+ avatarSize: PropTypes.Requireable<string>;
27
+ avatarColor: PropTypes.Requireable<string>;
28
+ avatarStatus: PropTypes.Requireable<string>;
29
+ avatarLetter: PropTypes.Requireable<string>;
30
+ activitySize: PropTypes.Requireable<string>;
31
+ activityColor: PropTypes.Requireable<string>;
25
32
  };
26
33
  };
27
34
  export {};
package/dist/ProfileButton/ProfileButton.js CHANGED
@@ -3,22 +3,19 @@ import PropTypes from "prop-types";
3
3
  import "./style.css";
4
4
  import { Avatar } from "../Avatar";
5
5
  import { Activity } from "../Activity";
6
- export const ProfileButton = ({ text, subtext, activity = false, size, status, avatarLetter = "AB", avatarColor = "grey", className, activityColor = "black", }) => {
7
- return (_jsxs("div", { className: `profile-button size-0-${size} ${status} ${className}`, children: [_jsx(Avatar, { className: "avatar-instance", color: avatarColor, letter: avatarLetter, size: size === "medium"
8
- ? "medium"
9
- : size === "small"
10
- ? "small"
11
- : size === "x-small"
12
- ? "x-small"
13
- : "large", status: "default", version: "default" }), _jsxs("div", { className: "frame", children: [text && _jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] }), activity && (_jsx(Activity, { className: `${size === "medium" ? "class" : (size === "small") ? "class-2" : size === "x-small" ? "class-3" : "class-4"}`, color: activityColor === "black" || activityColor === "green" || activityColor === "galliano" || activityColor === "red" ? activityColor : undefined, size: "x-small" }))] }));
6
+ export const ProfileButton = ({ text, subtext, activity = false, size, status, className, avatarSize, avatarColor, avatarStatus, avatarSizeLargeColorClassName, avatarLetter, activitySize, activityColor, }) => {
7
+ return (_jsxs("div", { className: `profile-button size-0-${size} status-0-${status} ${className}`, children: [_jsx(Avatar, { className: avatarSizeLargeColorClassName, color: avatarColor, letter: avatarLetter, size: avatarSize, status: avatarStatus, version: "default" }), text && subtext && (_jsxs("div", { className: "frame", children: [text && _jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] })), activity && (_jsx(Activity, { className: `class`, color: activityColor, size: activitySize }))] }));
14
8
  };
15
9
  ProfileButton.propTypes = {
16
10
  text: PropTypes.string,
17
- withText: PropTypes.bool,
18
11
  subtext: PropTypes.string,
19
- withSubtext: PropTypes.bool,
20
- withAllText: PropTypes.bool,
21
12
  activity: PropTypes.bool,
22
13
  size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
23
14
  status: PropTypes.oneOf(["pressing", "default"]),
15
+ avatarSize: PropTypes.string,
16
+ avatarColor: PropTypes.string,
17
+ avatarStatus: PropTypes.string,
18
+ avatarLetter: PropTypes.string,
19
+ activitySize: PropTypes.string,
20
+ activityColor: PropTypes.string,
24
21
  };
package/dist/ProfileButton/style.css CHANGED
@@ -3,6 +3,28 @@
3
3
  display: inline-flex;
4
4
  padding: 4px;
5
5
  position: relative;
6
+ cursor: pointer;
7
+ }
8
+
9
+ .profile-button .div-wrapper {
10
+ align-items: center;
11
+ background-color: #d1d1d1;
12
+ box-shadow: inset 0px 0px 10px #ffffff40;
13
+ display: flex;
14
+ flex-direction: column;
15
+ justify-content: center;
16
+ position: relative;
17
+ }
18
+
19
+ .profile-button .text-wrapper {
20
+ align-items: center;
21
+ color: #242424b2;
22
+ display: flex;
23
+ justify-content: center;
24
+ position: relative;
25
+ text-align: center;
26
+ white-space: nowrap;
27
+ width: fit-content;
6
28
  }
7
29
 
8
30
  .profile-button .frame {
@@ -30,33 +52,12 @@
30
52
  }
31
53
 
32
54
  .profile-button .class {
33
- left: 29px !important;
34
- position: absolute !important;
35
- top: 2px !important;
36
- }
37
-
38
- .profile-button .class-2 {
39
- left: 24px !important;
40
55
  position: absolute !important;
41
- top: 2px !important;
42
- }
43
-
44
- .profile-button .class-3 {
45
- left: 20px !important;
46
- position: absolute !important;
47
- top: 2px !important;
48
- }
49
-
50
- .profile-button .class-4 {
51
- left: 48px !important;
52
- position: absolute !important;
53
- top: 2px !important;
54
56
  }
55
57
 
56
58
  .profile-button.size-0-large {
57
59
  border-radius: 16px;
58
60
  gap: 8px;
59
- top: 12px;
60
61
  }
61
62
 
62
63
  .profile-button.size-0-small {
@@ -64,6 +65,7 @@
64
65
  gap: 6px;
65
66
  }
66
67
 
68
+
67
69
  .profile-button.size-0-medium {
68
70
  border-radius: 12px;
69
71
  gap: 6px;
@@ -74,9 +76,70 @@
74
76
  gap: 6px;
75
77
  }
76
78
 
77
- .profile-button.pressing {
79
+ .profile-button.status-0-pressing {
78
80
  background-color: #2424240d;
79
81
  }
82
+
83
+ .profile-button.size-0-x-small .div-wrapper {
84
+ border-radius: 6px;
85
+ height: 24px;
86
+ width: 24px;
87
+ }
88
+
89
+ .profile-button.size-0-large .div-wrapper {
90
+ border-radius: 8px;
91
+ height: 36px;
92
+ width: 36px;
93
+ }
94
+
95
+ .profile-button.size-0-medium .div-wrapper {
96
+ border-radius: 8px;
97
+ height: 36px;
98
+ width: 36px;
99
+ }
100
+
101
+ .profile-button.size-0-small .div-wrapper {
102
+ border-radius: 8px;
103
+ height: 28px;
104
+ width: 28px;
105
+ }
106
+
107
+ .profile-button.size-0-x-small .text-wrapper {
108
+ font-family: var(--b3-bold-font-family);
109
+ font-size: var(--b3-bold-font-size);
110
+ font-style: var(--b3-bold-font-style);
111
+ font-weight: var(--b3-bold-font-weight);
112
+ letter-spacing: var(--b3-bold-letter-spacing);
113
+ line-height: var(--b3-bold-line-height);
114
+ }
115
+
116
+ .profile-button.size-0-large .text-wrapper {
117
+ font-family: var(--b1-black-font-family);
118
+ font-size: var(--b1-black-font-size);
119
+ font-style: var(--b1-black-font-style);
120
+ font-weight: var(--b1-black-font-weight);
121
+ letter-spacing: var(--b1-black-letter-spacing);
122
+ line-height: var(--b1-black-line-height);
123
+ }
124
+
125
+ .profile-button.size-0-medium .text-wrapper {
126
+ font-family: var(--b1-black-font-family);
127
+ font-size: var(--b1-black-font-size);
128
+ font-style: var(--b1-black-font-style);
129
+ font-weight: var(--b1-black-font-weight);
130
+ letter-spacing: var(--b1-black-letter-spacing);
131
+ line-height: var(--b1-black-line-height);
132
+ }
133
+
134
+ .profile-button.size-0-small .text-wrapper {
135
+ font-family: var(--b2-black-font-family);
136
+ font-size: var(--b2-black-font-size);
137
+ font-style: var(--b2-black-font-style);
138
+ font-weight: var(--b2-black-font-weight);
139
+ letter-spacing: var(--b2-black-letter-spacing);
140
+ line-height: var(--b2-black-line-height);
141
+ }
142
+
80
143
  .profile-button.size-0-x-small .frame {
81
144
  height: 24px;
82
145
  }
package/dist/ProfileSelector/ProfileSelector.d.ts ADDED
@@ -0,0 +1,73 @@
1
+ import PropTypes from "prop-types";
2
+ import "./style.css";
3
+ interface AvatarData {
4
+ letter: string;
5
+ color?: "grey" | "blue" | "green" | "red" | "mauve" | "lime" | "zest" | "orange" | "galliano";
6
+ status?: "active" | "default";
7
+ version?: "default" | "half";
8
+ }
9
+ interface Props {
10
+ icon: boolean;
11
+ status?: "pressing" | "hover" | "default";
12
+ size: "large" | "medium";
13
+ version: "multiple" | "single";
14
+ className?: any;
15
+ text: string;
16
+ subtext: string;
17
+ avatarLetter: string;
18
+ avatars?: AvatarData[];
19
+ multipleAvatarSize?: "large" | "medium" | "small";
20
+ multipleAvatarClassName?: any;
21
+ multipleAvatarWithPlus?: boolean;
22
+ multipleAvatarPlusValue?: string | number;
23
+ multipleAvatarAvatarColor?: string;
24
+ multipleAvatarAvatarColor1?: string;
25
+ multipleAvatarAvatarColor2?: string;
26
+ multipleAvatarAvatarColor3?: string;
27
+ multipleAvatarAvatarColor4?: string;
28
+ multipleAvatarAvatarLetter?: string;
29
+ multipleAvatarAvatarLetter1?: string;
30
+ multipleAvatarAvatarLetter2?: string;
31
+ multipleAvatarAvatarLetter3?: string;
32
+ multipleAvatarAvatarLetter4?: string;
33
+ multipleAvatarSizeLargeClassName?: any;
34
+ multipleAvatarLabelText?: string;
35
+ multipleAvatarWithFifth?: boolean;
36
+ }
37
+ export declare const ProfileSelector: {
38
+ ({ icon, size, version, className, text, subtext, avatarLetter, avatars, multipleAvatarSize, multipleAvatarClassName, multipleAvatarWithPlus, multipleAvatarPlusValue, multipleAvatarAvatarColor, multipleAvatarAvatarColor1, multipleAvatarAvatarColor2, multipleAvatarAvatarColor3, multipleAvatarAvatarColor4, multipleAvatarAvatarLetter, multipleAvatarAvatarLetter1, multipleAvatarAvatarLetter2, multipleAvatarAvatarLetter3, multipleAvatarAvatarLetter4, multipleAvatarSizeLargeClassName, multipleAvatarLabelText, multipleAvatarWithFifth, }: Props): React.JSX.Element;
39
+ propTypes: {
40
+ icon: PropTypes.Requireable<boolean>;
41
+ status: PropTypes.Requireable<string>;
42
+ className: PropTypes.Requireable<any>;
43
+ size: PropTypes.Requireable<string>;
44
+ version: PropTypes.Requireable<string>;
45
+ text: PropTypes.Requireable<string>;
46
+ subtext: PropTypes.Requireable<string>;
47
+ avatarLetter: PropTypes.Requireable<string>;
48
+ avatars: PropTypes.Requireable<(PropTypes.InferProps<{
49
+ letter: PropTypes.Validator<string>;
50
+ color: PropTypes.Requireable<string>;
51
+ status: PropTypes.Requireable<string>;
52
+ version: PropTypes.Requireable<string>;
53
+ }> | null | undefined)[]>;
54
+ multipleAvatarSize: PropTypes.Requireable<string>;
55
+ multipleAvatarClassName: PropTypes.Requireable<any>;
56
+ multipleAvatarWithPlus: PropTypes.Requireable<boolean>;
57
+ multipleAvatarPlusValue: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
58
+ multipleAvatarAvatarColor: PropTypes.Requireable<string>;
59
+ multipleAvatarAvatarColor1: PropTypes.Requireable<string>;
60
+ multipleAvatarAvatarColor2: PropTypes.Requireable<string>;
61
+ multipleAvatarAvatarColor3: PropTypes.Requireable<string>;
62
+ multipleAvatarAvatarColor4: PropTypes.Requireable<string>;
63
+ multipleAvatarAvatarLetter: PropTypes.Requireable<string>;
64
+ multipleAvatarAvatarLetter1: PropTypes.Requireable<string>;
65
+ multipleAvatarAvatarLetter2: PropTypes.Requireable<string>;
66
+ multipleAvatarAvatarLetter3: PropTypes.Requireable<string>;
67
+ multipleAvatarAvatarLetter4: PropTypes.Requireable<string>;
68
+ multipleAvatarSizeLargeClassName: PropTypes.Requireable<any>;
69
+ multipleAvatarLabelText: PropTypes.Requireable<string>;
70
+ multipleAvatarWithFifth: PropTypes.Requireable<boolean>;
71
+ };
72
+ };
73
+ export {};
package/dist/ProfileSelector/ProfileSelector.js ADDED
@@ -0,0 +1,74 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import PropTypes from "prop-types";
3
+ import { useReducer } from "react";
4
+ import "./style.css";
5
+ import { IconSelector } from "@tabler/icons-react";
6
+ import { MultipleAvatar } from "../MultipleAvatar";
7
+ import { Profile } from "../Profile/Profile";
8
+ export const ProfileSelector = ({ icon = true, size, version, className, text, subtext, avatarLetter, avatars, multipleAvatarSize = "large", multipleAvatarClassName, multipleAvatarWithPlus, multipleAvatarPlusValue, multipleAvatarAvatarColor, multipleAvatarAvatarColor1, multipleAvatarAvatarColor2, multipleAvatarAvatarColor3, multipleAvatarAvatarColor4, multipleAvatarAvatarLetter, multipleAvatarAvatarLetter1, multipleAvatarAvatarLetter2, multipleAvatarAvatarLetter3, multipleAvatarAvatarLetter4, multipleAvatarSizeLargeClassName, multipleAvatarLabelText, multipleAvatarWithFifth, }) => {
9
+ const [state, dispatch] = useReducer(reducer, {
10
+ status: "default",
11
+ size: size || "large",
12
+ version: version || "single",
13
+ });
14
+ return (_jsxs("div", { className: `profile-selector ${state.version} status-${state.status} size-3-${state.size} ${className}`, onMouseLeave: () => {
15
+ dispatch("mouse_leave");
16
+ }, onMouseEnter: () => {
17
+ dispatch("mouse_enter");
18
+ }, children: [state.version === "single" && (_jsx(Profile, { className: "profile-instance", size: size, subtext: subtext || "Subtext", text: text || "Text", avatarLetter: avatarLetter || "AB", avatarSize: state.size })), state.version === "multiple" && (_jsx(MultipleAvatar, { avatars: avatars ||
19
+ [
20
+ ...(multipleAvatarAvatarLetter1 && multipleAvatarAvatarColor1 ? [{ letter: multipleAvatarAvatarLetter1, color: multipleAvatarAvatarColor1 }] : []),
21
+ ...(multipleAvatarAvatarLetter2 && multipleAvatarAvatarColor2 ? [{ letter: multipleAvatarAvatarLetter2, color: multipleAvatarAvatarColor2 }] : []),
22
+ ...(multipleAvatarAvatarLetter3 && multipleAvatarAvatarColor3 ? [{ letter: multipleAvatarAvatarLetter3, color: multipleAvatarAvatarColor3 }] : []),
23
+ ...(multipleAvatarAvatarLetter && multipleAvatarAvatarColor ? [{ letter: multipleAvatarAvatarLetter, color: multipleAvatarAvatarColor }] : []),
24
+ ...(multipleAvatarAvatarLetter4 && multipleAvatarAvatarColor4 ? [{ letter: multipleAvatarAvatarLetter4, color: multipleAvatarAvatarColor4 }] : []),
25
+ ], size: multipleAvatarSize, className: multipleAvatarClassName || multipleAvatarSizeLargeClassName, withPlusValue: multipleAvatarWithPlus ?? multipleAvatarWithFifth, plusValue: multipleAvatarPlusValue || multipleAvatarLabelText })), icon && (_jsx(IconSelector, { className: `${state.size === "medium" ? "class-3" : "class-4"}` }))] }));
26
+ };
27
+ function reducer(state, action) {
28
+ switch (action) {
29
+ case "mouse_enter":
30
+ return {
31
+ ...state,
32
+ status: "hover",
33
+ };
34
+ case "mouse_leave":
35
+ return {
36
+ ...state,
37
+ status: "default",
38
+ };
39
+ }
40
+ return state;
41
+ }
42
+ ProfileSelector.propTypes = {
43
+ icon: PropTypes.bool,
44
+ status: PropTypes.oneOf(["pressing", "hover", "default"]),
45
+ className: PropTypes.any,
46
+ size: PropTypes.oneOf(["large", "medium"]),
47
+ version: PropTypes.oneOf(["multiple", "single"]),
48
+ text: PropTypes.string,
49
+ subtext: PropTypes.string,
50
+ avatarLetter: PropTypes.string,
51
+ avatars: PropTypes.arrayOf(PropTypes.shape({
52
+ letter: PropTypes.string.isRequired,
53
+ color: PropTypes.oneOf(["grey", "blue", "green", "red", "mauve", "lime", "zest", "orange", "galliano"]),
54
+ status: PropTypes.oneOf(["active", "default"]),
55
+ version: PropTypes.oneOf(["default", "half"]),
56
+ })),
57
+ multipleAvatarSize: PropTypes.oneOf(["large", "medium", "small"]),
58
+ multipleAvatarClassName: PropTypes.any,
59
+ multipleAvatarWithPlus: PropTypes.bool,
60
+ multipleAvatarPlusValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
61
+ multipleAvatarAvatarColor: PropTypes.string,
62
+ multipleAvatarAvatarColor1: PropTypes.string,
63
+ multipleAvatarAvatarColor2: PropTypes.string,
64
+ multipleAvatarAvatarColor3: PropTypes.string,
65
+ multipleAvatarAvatarColor4: PropTypes.string,
66
+ multipleAvatarAvatarLetter: PropTypes.string,
67
+ multipleAvatarAvatarLetter1: PropTypes.string,
68
+ multipleAvatarAvatarLetter2: PropTypes.string,
69
+ multipleAvatarAvatarLetter3: PropTypes.string,
70
+ multipleAvatarAvatarLetter4: PropTypes.string,
71
+ multipleAvatarSizeLargeClassName: PropTypes.any,
72
+ multipleAvatarLabelText: PropTypes.string,
73
+ multipleAvatarWithFifth: PropTypes.bool,
74
+ };
package/dist/ProfileSelector/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { ProfileSelector } from "./ProfileSelector";
package/dist/ProfileSelector/index.js ADDED
@@ -0,0 +1 @@
1
+ export { ProfileSelector } from "./ProfileSelector";
package/dist/ProfileSelector/style.css ADDED
@@ -0,0 +1,327 @@
1
+ .profile-selector {
2
+ align-items: center;
3
+ border-radius: 12px;
4
+ padding: 4px;
5
+ position: relative;
6
+ }
7
+
8
+ .profile-selector *{
9
+ cursor: pointer;
10
+ }
11
+
12
+ .profile-selector .div-wrapper {
13
+ align-items: center;
14
+ background-color: #d1d1d1;
15
+ box-shadow: inset 0px 0px 10px #ffffff40;
16
+ display: flex;
17
+ flex-direction: column;
18
+ justify-content: center;
19
+ position: relative;
20
+ }
21
+
22
+ .profile-selector .text-wrapper {
23
+ align-items: center;
24
+ color: #242424b2;
25
+ display: flex;
26
+ justify-content: center;
27
+ position: relative;
28
+ text-align: center;
29
+ white-space: nowrap;
30
+ width: fit-content;
31
+ }
32
+
33
+ .profile-selector .texts {
34
+ align-items: flex-start;
35
+ align-self: stretch;
36
+ flex-direction: column;
37
+ justify-content: center;
38
+ position: relative;
39
+ }
40
+
41
+ .profile-selector .text {
42
+ -webkit-box-orient: vertical;
43
+ color: #5d5d5d;
44
+ display: -webkit-box;
45
+ margin-top: -1.00px;
46
+ overflow: hidden;
47
+ position: relative;
48
+ text-overflow: ellipsis;
49
+ }
50
+
51
+ .profile-selector .subtext {
52
+ align-self: stretch;
53
+ color: #888888;
54
+ flex: 1;
55
+ position: relative;
56
+ white-space: nowrap;
57
+ }
58
+
59
+ .profile-selector.x-small {
60
+ display: inline-flex;
61
+ gap: 4px;
62
+ }
63
+
64
+ .profile-selector.large {
65
+ display: flex;
66
+ gap: 8px;
67
+ width: 185px;
68
+ }
69
+
70
+ .profile-selector.medium {
71
+ display: inline-flex;
72
+ gap: 8px;
73
+ }
74
+
75
+ .profile-selector.small {
76
+ display: inline-flex;
77
+ gap: 6px;
78
+ }
79
+
80
+ .profile-selector.x-small .div-wrapper {
81
+ border-radius: 6px;
82
+ height: 24px;
83
+ width: 24px;
84
+ }
85
+
86
+ .profile-selector.large .div-wrapper {
87
+ border-radius: 8px;
88
+ height: 36px;
89
+ width: 36px;
90
+ }
91
+
92
+ .profile-selector.medium .div-wrapper {
93
+ border-radius: 8px;
94
+ height: 36px;
95
+ width: 36px;
96
+ }
97
+
98
+ .profile-selector.small .div-wrapper {
99
+ border-radius: 8px;
100
+ height: 28px;
101
+ width: 28px;
102
+ }
103
+
104
+ .profile-selector.x-small .text-wrapper {
105
+ font-family: var(--b3-bold-font-family);
106
+ font-size: var(--b3-bold-font-size);
107
+ font-style: var(--b3-bold-font-style);
108
+ font-weight: var(--b3-bold-font-weight);
109
+ letter-spacing: var(--b3-bold-letter-spacing);
110
+ line-height: var(--b3-bold-line-height);
111
+ }
112
+
113
+ .profile-selector.large .text-wrapper {
114
+ font-family: var(--b1-black-font-family);
115
+ font-size: var(--b1-black-font-size);
116
+ font-style: var(--b1-black-font-style);
117
+ font-weight: var(--b1-black-font-weight);
118
+ letter-spacing: var(--b1-black-letter-spacing);
119
+ line-height: var(--b1-black-line-height);
120
+ }
121
+
122
+ .profile-selector.medium .text-wrapper {
123
+ font-family: var(--b1-black-font-family);
124
+ font-size: var(--b1-black-font-size);
125
+ font-style: var(--b1-black-font-style);
126
+ font-weight: var(--b1-black-font-weight);
127
+ letter-spacing: var(--b1-black-letter-spacing);
128
+ line-height: var(--b1-black-line-height);
129
+ }
130
+
131
+ .profile-selector.small .text-wrapper {
132
+ font-family: var(--b2-black-font-family);
133
+ font-size: var(--b2-black-font-size);
134
+ font-style: var(--b2-black-font-style);
135
+ font-weight: var(--b2-black-font-weight);
136
+ letter-spacing: var(--b2-black-letter-spacing);
137
+ line-height: var(--b2-black-line-height);
138
+ }
139
+
140
+ .profile-selector.x-small .texts {
141
+ display: inline-flex;
142
+ flex: 0 0 auto;
143
+ }
144
+
145
+ .profile-selector.large .texts {
146
+ display: flex;
147
+ flex: 1;
148
+ flex-grow: 1;
149
+ gap: 6px;
150
+ }
151
+
152
+ .profile-selector.medium .texts {
153
+ display: inline-flex;
154
+ flex: 0 0 auto;
155
+ }
156
+
157
+ .profile-selector.small .texts {
158
+ display: inline-flex;
159
+ flex: 0 0 auto;
160
+ }
161
+
162
+ .profile-selector.x-small .text {
163
+ -webkit-line-clamp: 0;
164
+ align-items: center;
165
+ flex: 1;
166
+ font-family: var(--b2-bold-font-family);
167
+ font-size: var(--b2-bold-font-size);
168
+ font-style: var(--b2-bold-font-style);
169
+ font-weight: var(--b2-bold-font-weight);
170
+ justify-content: center;
171
+ letter-spacing: var(--b2-bold-letter-spacing);
172
+ line-height: var(--b2-bold-line-height);
173
+ white-space: nowrap;
174
+ cursor: default;
175
+ }
176
+
177
+ .profile-selector.large .text {
178
+ -webkit-line-clamp: 0;
179
+ align-items: center;
180
+ flex: 1;
181
+ font-family: var(--h4-bold-font-family);
182
+ font-size: var(--h4-bold-font-size);
183
+ font-style: var(--h4-bold-font-style);
184
+ font-weight: var(--h4-bold-font-weight);
185
+ justify-content: center;
186
+ letter-spacing: var(--h4-bold-letter-spacing);
187
+ line-height: var(--h4-bold-line-height);
188
+ white-space: nowrap;
189
+ cursor: default;
190
+ -webkit-line-clamp: 0;
191
+ align-items: center;
192
+ flex: 1;
193
+ font-family: var(--b2-bold-font-family);
194
+ font-size: var(--b2-bold-font-size);
195
+ font-style: var(--b2-bold-font-style);
196
+ font-weight: var(--b2-bold-font-weight);
197
+ justify-content: center;
198
+ letter-spacing: var(--b2-bold-letter-spacing);
199
+ line-height: var(--b2-bold-line-height);
200
+ white-space: nowrap;
201
+ }
202
+
203
+ .profile-selector.medium .text {
204
+ -webkit-line-clamp: 1;
205
+ font-family: var(--b1-bold-font-family);
206
+ font-size: var(--b1-bold-font-size);
207
+ font-style: var(--b1-bold-font-style);
208
+ font-weight: var(--b1-bold-font-weight);
209
+ letter-spacing: var(--b1-bold-letter-spacing);
210
+ line-height: var(--b1-bold-line-height);
211
+ cursor: default;
212
+ }
213
+
214
+ .profile-selector.small .text {
215
+ -webkit-line-clamp: 0;
216
+ align-items: center;
217
+ flex: 1;
218
+ font-family: var(--b2-bold-font-family);
219
+ font-size: var(--b2-bold-font-size);
220
+ font-style: var(--b2-bold-font-style);
221
+ font-weight: var(--b2-bold-font-weight);
222
+ justify-content: center;
223
+ letter-spacing: var(--b2-bold-letter-spacing);
224
+ line-height: var(--b2-bold-line-height);
225
+ white-space: nowrap;
226
+ cursor: default;
227
+ }
228
+
229
+ .profile-selector.x-small .subtext {
230
+ align-items: center;
231
+ display: flex;
232
+ font-family: var(--b3-medium-font-family);
233
+ font-size: var(--b3-medium-font-size);
234
+ font-style: var(--b3-medium-font-style);
235
+ font-weight: var(--b3-medium-font-weight);
236
+ justify-content: center;
237
+ letter-spacing: var(--b3-medium-letter-spacing);
238
+ line-height: var(--b3-medium-line-height);
239
+ cursor: default;
240
+ }
241
+
242
+ .profile-selector.large .subtext {
243
+ align-items: center;
244
+ display: flex;
245
+ font-family: var(--h6-medium-font-family);
246
+ font-size: var(--h6-medium-font-size);
247
+ font-style: var(--h6-medium-font-style);
248
+ font-weight: var(--h6-medium-font-weight);
249
+ justify-content: center;
250
+ letter-spacing: var(--h6-medium-letter-spacing);
251
+ line-height: var(--h6-medium-line-height);
252
+ cursor: default;
253
+ }
254
+
255
+ .profile-selector.medium .subtext {
256
+ font-family: var(--b2-medium-font-family);
257
+ font-size: var(--b2-medium-font-size);
258
+ font-style: var(--b2-medium-font-style);
259
+ font-weight: var(--b2-medium-font-weight);
260
+ letter-spacing: var(--b2-medium-letter-spacing);
261
+ line-height: var(--b2-medium-line-height);
262
+ cursor: default;
263
+ }
264
+
265
+ .profile-selector.small .subtext {
266
+ align-items: center;
267
+ display: flex;
268
+ font-family: var(--b3-medium-font-family);
269
+ font-size: var(--b3-medium-font-size);
270
+ font-style: var(--b3-medium-font-style);
271
+ font-weight: var(--b3-medium-font-weight);
272
+ justify-content: center;
273
+ letter-spacing: var(--b3-medium-letter-spacing);
274
+ line-height: var(--b3-medium-line-height);
275
+ cursor: default;
276
+ }
277
+
278
+ /* ProfileSelector Styles */
279
+ .profile-selector-selector {
280
+ align-items: center;
281
+ background-color: transparent;
282
+ border-radius: 8px;
283
+ display: flex;
284
+ gap: 12px;
285
+ padding: 8px 12px;
286
+ position: relative;
287
+ transition: background-color 0.2s ease;
288
+ cursor: pointer;
289
+ }
290
+
291
+ .profile-selector-selector.status-default {
292
+ background-color: transparent;
293
+ }
294
+
295
+ .profile-selector-selector.status-hover {
296
+ background-color: #f5f5f5;
297
+ }
298
+
299
+ .profile-selector-selector.status-pressing {
300
+ background-color: #e8e8e8;
301
+ }
302
+
303
+ .profile-selector-selector.size-3-large {
304
+ padding: 12px 16px;
305
+ border-radius: 12px;
306
+ }
307
+
308
+ .profile-selector-selector.size-3-medium {
309
+ padding: 8px 12px;
310
+ border-radius: 8px;
311
+ }
312
+
313
+ .profile-selector-selector .profile-selector-instance {
314
+ flex: 1;
315
+ }
316
+
317
+
318
+ .profile-selector-selector .class-3,
319
+ .profile-selector-selector .class-4 {
320
+ color: #6d6d6d;
321
+ transition: color 0.2s ease;
322
+ }
323
+
324
+ .profile-selector-selector.status-hover .class-3,
325
+ .profile-selector-selector.status-hover .class-4 {
326
+ color: #3d3d3d;
327
+ }
package/dist/TertiaryButton/style.css CHANGED
@@ -34,7 +34,6 @@
34
34
  .tertiary-button .button {
35
35
  align-items: center;
36
36
  justify-content: center;
37
- margin-top: -1.00px;
38
37
  position: relative;
39
38
  text-align: center;
40
39
  white-space: nowrap;
package/dist/index.d.ts CHANGED
@@ -18,3 +18,4 @@ export { ProfileButton } from "./ProfileButton/ProfileButton";
18
18
  export { Checkbox } from "./Checkbox/Checkbox";
19
19
  export { Badge } from "./Badge/Badge";
20
20
  export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";
21
+ export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";
package/dist/index.js CHANGED
@@ -18,3 +18,4 @@ export { ProfileButton } from "./ProfileButton/ProfileButton";
18
18
  export { Checkbox } from "./Checkbox/Checkbox";
19
19
  export { Badge } from "./Badge/Badge";
20
20
  export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";
21
+ export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ayseaistudio/ui-components",
3
- "version": "2.2.3",
3
+ "version": "2.3.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",