@xsolla/xui-avatar 0.64.0 → 0.65.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/native/index.d.mts +36 -6
- package/native/index.d.ts +36 -6
- package/native/index.js +72 -197
- package/native/index.js.map +1 -1
- package/native/index.mjs +70 -195
- package/native/index.mjs.map +1 -1
- package/package.json +6 -4
- package/web/index.d.mts +36 -6
- package/web/index.d.ts +36 -6
- package/web/index.js +72 -197
- package/web/index.js.map +1 -1
- package/web/index.mjs +70 -195
- package/web/index.mjs.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.65.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,9 +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-
|
|
13
|
+
"@xsolla/xui-badge": "0.65.0",
|
|
14
|
+
"@xsolla/xui-core": "0.65.0",
|
|
15
|
+
"@xsolla/xui-icons-base": "0.65.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.65.0",
|
|
17
|
+
"@xsolla/xui-tooltip": "0.65.0"
|
|
16
18
|
},
|
|
17
19
|
"peerDependencies": {
|
|
18
20
|
"react": ">=16.8.0",
|
package/web/index.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useDesignSystem } from '@xsolla/xui-core';
|
|
2
3
|
|
|
3
4
|
interface AvatarProps {
|
|
4
5
|
/** Image source URL */
|
|
@@ -32,18 +33,47 @@ interface AvatarProps {
|
|
|
32
33
|
}
|
|
33
34
|
declare const Avatar: React.FC<AvatarProps>;
|
|
34
35
|
|
|
36
|
+
/** Theme type from the design system */
|
|
37
|
+
type Theme = ReturnType<typeof useDesignSystem>["theme"];
|
|
38
|
+
/** Item in the avatar group list */
|
|
39
|
+
interface AvatarGroupItem {
|
|
40
|
+
/** Image source URL */
|
|
41
|
+
src?: string;
|
|
42
|
+
/** Initials to display when no image is provided */
|
|
43
|
+
initials?: string;
|
|
44
|
+
/** Click handler for the avatar */
|
|
45
|
+
onClick?: () => void;
|
|
46
|
+
/** Tooltip text to display on hover */
|
|
47
|
+
tooltip?: string;
|
|
48
|
+
}
|
|
49
|
+
/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */
|
|
50
|
+
type AvatarBackgroundMode = "mixed" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral" | ((theme: Theme) => string);
|
|
35
51
|
interface AvatarGroupProps {
|
|
36
|
-
/**
|
|
37
|
-
|
|
52
|
+
/**
|
|
53
|
+
* List of avatars to display in the group.
|
|
54
|
+
* `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.
|
|
55
|
+
*/
|
|
56
|
+
list: AvatarGroupItem[];
|
|
38
57
|
/** Size of the avatars in the group */
|
|
39
|
-
size?: "
|
|
40
|
-
/**
|
|
41
|
-
|
|
58
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
59
|
+
/**
|
|
60
|
+
* The maximum number of avatars to display before collapsing the rest into a "+N" counter.
|
|
61
|
+
* If the number of avatars exceeds this value, the extra avatars will be hidden.
|
|
62
|
+
*/
|
|
63
|
+
maxVisible?: number;
|
|
42
64
|
/** Whether to show a stroke/border around each avatar */
|
|
43
65
|
stroke?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Controls the background color mode for avatars in the group.
|
|
68
|
+
* - 'mixed' (default): Avatars cycle through different colors
|
|
69
|
+
* - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars
|
|
70
|
+
* - Theme function: A function that receives theme and returns any color from the design system.
|
|
71
|
+
* Example: (theme) => theme.colors.core.link.link
|
|
72
|
+
*/
|
|
73
|
+
avatarBackgroundMode?: AvatarBackgroundMode;
|
|
44
74
|
/** Accessible label for the avatar group. Defaults to "Group of X users". */
|
|
45
75
|
"aria-label"?: string;
|
|
46
76
|
}
|
|
47
77
|
declare const AvatarGroup: React.FC<AvatarGroupProps>;
|
|
48
78
|
|
|
49
|
-
export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps };
|
|
79
|
+
export { Avatar, type AvatarBackgroundMode, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps };
|
package/web/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useDesignSystem } from '@xsolla/xui-core';
|
|
2
3
|
|
|
3
4
|
interface AvatarProps {
|
|
4
5
|
/** Image source URL */
|
|
@@ -32,18 +33,47 @@ interface AvatarProps {
|
|
|
32
33
|
}
|
|
33
34
|
declare const Avatar: React.FC<AvatarProps>;
|
|
34
35
|
|
|
36
|
+
/** Theme type from the design system */
|
|
37
|
+
type Theme = ReturnType<typeof useDesignSystem>["theme"];
|
|
38
|
+
/** Item in the avatar group list */
|
|
39
|
+
interface AvatarGroupItem {
|
|
40
|
+
/** Image source URL */
|
|
41
|
+
src?: string;
|
|
42
|
+
/** Initials to display when no image is provided */
|
|
43
|
+
initials?: string;
|
|
44
|
+
/** Click handler for the avatar */
|
|
45
|
+
onClick?: () => void;
|
|
46
|
+
/** Tooltip text to display on hover */
|
|
47
|
+
tooltip?: string;
|
|
48
|
+
}
|
|
49
|
+
/** Avatar background mode - preset colors, 'mixed' for cycling, or a theme function */
|
|
50
|
+
type AvatarBackgroundMode = "mixed" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral" | ((theme: Theme) => string);
|
|
35
51
|
interface AvatarGroupProps {
|
|
36
|
-
/**
|
|
37
|
-
|
|
52
|
+
/**
|
|
53
|
+
* List of avatars to display in the group.
|
|
54
|
+
* `tooltip` property is text to be displayed in the tooltip when hovering over the avatar.
|
|
55
|
+
*/
|
|
56
|
+
list: AvatarGroupItem[];
|
|
38
57
|
/** Size of the avatars in the group */
|
|
39
|
-
size?: "
|
|
40
|
-
/**
|
|
41
|
-
|
|
58
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
59
|
+
/**
|
|
60
|
+
* The maximum number of avatars to display before collapsing the rest into a "+N" counter.
|
|
61
|
+
* If the number of avatars exceeds this value, the extra avatars will be hidden.
|
|
62
|
+
*/
|
|
63
|
+
maxVisible?: number;
|
|
42
64
|
/** Whether to show a stroke/border around each avatar */
|
|
43
65
|
stroke?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Controls the background color mode for avatars in the group.
|
|
68
|
+
* - 'mixed' (default): Avatars cycle through different colors
|
|
69
|
+
* - 'brand', 'brandExtra', 'success', 'warning', 'alert', 'neutral': Single color for all avatars
|
|
70
|
+
* - Theme function: A function that receives theme and returns any color from the design system.
|
|
71
|
+
* Example: (theme) => theme.colors.core.link.link
|
|
72
|
+
*/
|
|
73
|
+
avatarBackgroundMode?: AvatarBackgroundMode;
|
|
44
74
|
/** Accessible label for the avatar group. Defaults to "Group of X users". */
|
|
45
75
|
"aria-label"?: string;
|
|
46
76
|
}
|
|
47
77
|
declare const AvatarGroup: React.FC<AvatarGroupProps>;
|
|
48
78
|
|
|
49
|
-
export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps };
|
|
79
|
+
export { Avatar, type AvatarBackgroundMode, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps };
|
package/web/index.js
CHANGED
|
@@ -489,170 +489,8 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
|
|
|
489
489
|
// src/Avatar.tsx
|
|
490
490
|
var import_xui_core = require("@xsolla/xui-core");
|
|
491
491
|
var import_xui_badge = require("@xsolla/xui-badge");
|
|
492
|
-
|
|
493
|
-
// ../icons-base/dist/web/index.mjs
|
|
494
|
-
var import_styled_components8 = __toESM(require("styled-components"), 1);
|
|
492
|
+
var import_xui_icons_base = require("@xsolla/xui-icons-base");
|
|
495
493
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
496
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
497
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
498
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
499
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
500
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
501
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
502
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
503
|
-
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
504
|
-
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
505
|
-
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
506
|
-
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
507
|
-
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
508
|
-
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
509
|
-
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
510
|
-
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
511
|
-
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
512
|
-
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
513
|
-
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
514
|
-
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
515
|
-
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
516
|
-
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
517
|
-
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
518
|
-
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
519
|
-
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
520
|
-
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
521
|
-
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
522
|
-
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
523
|
-
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
524
|
-
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
525
|
-
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
526
|
-
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
527
|
-
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
528
|
-
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
529
|
-
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
530
|
-
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
531
|
-
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
532
|
-
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
533
|
-
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
534
|
-
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
535
|
-
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
536
|
-
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
537
|
-
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
538
|
-
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
539
|
-
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
540
|
-
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
541
|
-
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
542
|
-
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
543
|
-
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
544
|
-
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
545
|
-
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
546
|
-
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
547
|
-
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
548
|
-
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
549
|
-
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
550
|
-
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
551
|
-
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
552
|
-
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
553
|
-
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
554
|
-
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
555
|
-
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
556
|
-
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
557
|
-
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
558
|
-
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
559
|
-
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
560
|
-
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
561
|
-
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
562
|
-
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
563
|
-
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
564
|
-
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
565
|
-
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
566
|
-
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
567
|
-
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
568
|
-
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
569
|
-
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
570
|
-
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
571
|
-
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
572
|
-
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
573
|
-
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
574
|
-
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
575
|
-
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
576
|
-
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
577
|
-
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
578
|
-
var import_jsx_runtime91 = require("react/jsx-runtime");
|
|
579
|
-
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
580
|
-
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
581
|
-
var import_jsx_runtime94 = require("react/jsx-runtime");
|
|
582
|
-
var import_jsx_runtime95 = require("react/jsx-runtime");
|
|
583
|
-
var import_jsx_runtime96 = require("react/jsx-runtime");
|
|
584
|
-
var import_jsx_runtime97 = require("react/jsx-runtime");
|
|
585
|
-
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
586
|
-
var import_jsx_runtime99 = require("react/jsx-runtime");
|
|
587
|
-
var import_jsx_runtime100 = require("react/jsx-runtime");
|
|
588
|
-
var import_jsx_runtime101 = require("react/jsx-runtime");
|
|
589
|
-
var import_jsx_runtime102 = require("react/jsx-runtime");
|
|
590
|
-
var import_jsx_runtime103 = require("react/jsx-runtime");
|
|
591
|
-
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
592
|
-
var import_jsx_runtime105 = require("react/jsx-runtime");
|
|
593
|
-
var import_jsx_runtime106 = require("react/jsx-runtime");
|
|
594
|
-
var import_jsx_runtime107 = require("react/jsx-runtime");
|
|
595
|
-
var import_jsx_runtime108 = require("react/jsx-runtime");
|
|
596
|
-
var import_jsx_runtime109 = require("react/jsx-runtime");
|
|
597
|
-
var import_jsx_runtime110 = require("react/jsx-runtime");
|
|
598
|
-
var import_jsx_runtime111 = require("react/jsx-runtime");
|
|
599
|
-
var import_jsx_runtime112 = require("react/jsx-runtime");
|
|
600
|
-
var import_jsx_runtime113 = require("react/jsx-runtime");
|
|
601
|
-
var import_jsx_runtime114 = require("react/jsx-runtime");
|
|
602
|
-
var import_jsx_runtime115 = require("react/jsx-runtime");
|
|
603
|
-
var import_jsx_runtime116 = require("react/jsx-runtime");
|
|
604
|
-
var import_jsx_runtime117 = require("react/jsx-runtime");
|
|
605
|
-
var import_jsx_runtime118 = require("react/jsx-runtime");
|
|
606
|
-
var import_jsx_runtime119 = require("react/jsx-runtime");
|
|
607
|
-
var import_jsx_runtime120 = require("react/jsx-runtime");
|
|
608
|
-
var import_jsx_runtime121 = require("react/jsx-runtime");
|
|
609
|
-
var StyledIcon2 = import_styled_components8.default.div`
|
|
610
|
-
display: inline-flex;
|
|
611
|
-
align-items: center;
|
|
612
|
-
justify-content: center;
|
|
613
|
-
width: ${(props) => props.$size}px;
|
|
614
|
-
height: ${(props) => props.$size}px;
|
|
615
|
-
color: ${(props) => props.$color};
|
|
616
|
-
|
|
617
|
-
svg {
|
|
618
|
-
width: 100%;
|
|
619
|
-
height: 100%;
|
|
620
|
-
}
|
|
621
|
-
`;
|
|
622
|
-
var BaseIcon = ({
|
|
623
|
-
variant = "line",
|
|
624
|
-
size = 24,
|
|
625
|
-
color = "currentColor",
|
|
626
|
-
solidContent: solidContent114,
|
|
627
|
-
lineContent: lineContent114,
|
|
628
|
-
className,
|
|
629
|
-
style,
|
|
630
|
-
"data-testid": testId,
|
|
631
|
-
"aria-label": ariaLabel,
|
|
632
|
-
"aria-hidden": ariaHidden
|
|
633
|
-
}) => {
|
|
634
|
-
const svgContent = variant === "line" ? lineContent114 : solidContent114;
|
|
635
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
636
|
-
StyledIcon2,
|
|
637
|
-
{
|
|
638
|
-
$size: size,
|
|
639
|
-
$color: color,
|
|
640
|
-
className,
|
|
641
|
-
style,
|
|
642
|
-
"data-testid": testId,
|
|
643
|
-
role: ariaLabel ? "img" : void 0,
|
|
644
|
-
"aria-label": ariaLabel,
|
|
645
|
-
"aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
|
|
646
|
-
dangerouslySetInnerHTML: { __html: svgContent }
|
|
647
|
-
}
|
|
648
|
-
);
|
|
649
|
-
};
|
|
650
|
-
var solidContent111 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_user--solid"><g id="Union"><path d="M12 14.5923C16.6636 14.5923 20.6467 17.4955 22.2471 21.5923H1.75293C3.35333 17.4955 7.33643 14.5923 12 14.5923Z" style="fill: currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.40771C14.7614 2.40771 17 4.64629 17 7.40771C17 10.1691 14.7614 12.4077 12 12.4077C9.23869 12.4076 7 10.1691 7 7.40771C7 4.64637 9.23869 2.40785 12 2.40771Z" style="fill: currentColor"/></g></g></svg>`;
|
|
651
|
-
var lineContent111 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_user--line"><g id="Union"><path d="M12.0002 14.8154C16.0051 14.8154 19.5091 16.9562 21.4329 20.1553L19.718 21.1846C18.1441 18.567 15.277 16.8154 12.0002 16.8154C8.72329 16.8154 5.8554 18.5668 4.28149 21.1846L2.56665 20.1553C4.49036 16.956 7.99522 14.8154 12.0002 14.8154Z" style="fill: currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.81543C14.7617 2.81543 17.0002 5.05401 17.0002 7.81543C17.0002 10.5769 14.7617 12.8154 12.0002 12.8154C9.23882 12.8154 7.00024 10.5769 7.00024 7.81543C7.00024 5.05401 9.23882 2.81543 12.0002 2.81543ZM12.0002 4.81543C10.3434 4.81543 9.00024 6.15858 9.00024 7.81543C9.00024 9.47228 10.3434 10.8154 12.0002 10.8154C13.6571 10.8154 15.0002 9.47228 15.0002 7.81543C15.0002 6.15858 13.6571 4.81543 12.0002 4.81543Z" style="fill: currentColor"/></g></g></svg>`;
|
|
652
|
-
var User = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(BaseIcon, { ...props, solidContent: solidContent111, lineContent: lineContent111 });
|
|
653
|
-
|
|
654
|
-
// src/Avatar.tsx
|
|
655
|
-
var import_jsx_runtime122 = require("react/jsx-runtime");
|
|
656
494
|
var Avatar = ({
|
|
657
495
|
src,
|
|
658
496
|
icon,
|
|
@@ -688,7 +526,7 @@ var Avatar = ({
|
|
|
688
526
|
};
|
|
689
527
|
const badgeOffset = badgeCount ? square ? sizeStyles.badgeOffsetSquare : sizeStyles.badgeOffsetCircle : getDotOffset();
|
|
690
528
|
const displayBadgeCount = badgeCount;
|
|
691
|
-
return /* @__PURE__ */ (0,
|
|
529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
692
530
|
Box,
|
|
693
531
|
{
|
|
694
532
|
width: sizeStyles.size,
|
|
@@ -708,7 +546,7 @@ var Avatar = ({
|
|
|
708
546
|
tabIndex: 0
|
|
709
547
|
},
|
|
710
548
|
children: [
|
|
711
|
-
/* @__PURE__ */ (0,
|
|
549
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
712
550
|
Box,
|
|
713
551
|
{
|
|
714
552
|
width: sizeStyles.size,
|
|
@@ -726,7 +564,7 @@ var Avatar = ({
|
|
|
726
564
|
overflow: "hidden",
|
|
727
565
|
borderWidth: stroke ? 1 : 0,
|
|
728
566
|
borderColor: theme.colors.background.primary,
|
|
729
|
-
children: src ? /* @__PURE__ */ (0,
|
|
567
|
+
children: src ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
730
568
|
Box,
|
|
731
569
|
{
|
|
732
570
|
as: "img",
|
|
@@ -739,7 +577,7 @@ var Avatar = ({
|
|
|
739
577
|
height: sizeStyles.size,
|
|
740
578
|
borderRadius
|
|
741
579
|
}
|
|
742
|
-
) : icon ? /* @__PURE__ */ (0,
|
|
580
|
+
) : icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: theme.colors.content.primary, children: icon }) : text ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
743
581
|
Text,
|
|
744
582
|
{
|
|
745
583
|
fontSize: sizeStyles.fontSize,
|
|
@@ -747,8 +585,8 @@ var Avatar = ({
|
|
|
747
585
|
fontWeight: "600",
|
|
748
586
|
children: text
|
|
749
587
|
}
|
|
750
|
-
) : /* @__PURE__ */ (0,
|
|
751
|
-
User,
|
|
588
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
589
|
+
import_xui_icons_base.User,
|
|
752
590
|
{
|
|
753
591
|
size: sizeStyles.iconSize,
|
|
754
592
|
color: theme.colors.content.primary
|
|
@@ -756,13 +594,13 @@ var Avatar = ({
|
|
|
756
594
|
)
|
|
757
595
|
}
|
|
758
596
|
),
|
|
759
|
-
badge && /* @__PURE__ */ (0,
|
|
597
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
760
598
|
Box,
|
|
761
599
|
{
|
|
762
600
|
position: "absolute",
|
|
763
601
|
right: badgeOffset.right,
|
|
764
602
|
top: badgeOffset.top,
|
|
765
|
-
children: /* @__PURE__ */ (0,
|
|
603
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
766
604
|
import_xui_badge.Badge,
|
|
767
605
|
{
|
|
768
606
|
size: badgeSize,
|
|
@@ -780,24 +618,31 @@ var Avatar = ({
|
|
|
780
618
|
};
|
|
781
619
|
|
|
782
620
|
// src/AvatarGroup.tsx
|
|
783
|
-
var import_react4 = __toESM(require("react"));
|
|
784
621
|
var import_xui_core2 = require("@xsolla/xui-core");
|
|
785
|
-
var
|
|
622
|
+
var import_xui_tooltip = require("@xsolla/xui-tooltip");
|
|
623
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
624
|
+
var sizeMap = {
|
|
625
|
+
sm: "s",
|
|
626
|
+
md: "m",
|
|
627
|
+
lg: "l",
|
|
628
|
+
xl: "xl"
|
|
629
|
+
};
|
|
786
630
|
var AvatarGroup = ({
|
|
787
|
-
|
|
788
|
-
size = "
|
|
789
|
-
|
|
631
|
+
list,
|
|
632
|
+
size = "md",
|
|
633
|
+
maxVisible = 6,
|
|
790
634
|
stroke = true,
|
|
635
|
+
avatarBackgroundMode = "mixed",
|
|
791
636
|
"aria-label": ariaLabel
|
|
792
637
|
}) => {
|
|
793
638
|
const { theme } = (0, import_xui_core2.useDesignSystem)();
|
|
794
|
-
const
|
|
795
|
-
const totalCount =
|
|
796
|
-
const visibleCount = Math.min(totalCount, Math.max(0,
|
|
797
|
-
const
|
|
639
|
+
const internalSize = sizeMap[size];
|
|
640
|
+
const totalCount = list.length;
|
|
641
|
+
const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));
|
|
642
|
+
const visibleListItems = list.slice(0, visibleCount);
|
|
798
643
|
const remainingCount = totalCount - visibleCount;
|
|
799
644
|
const overlap = -4;
|
|
800
|
-
const
|
|
645
|
+
const mixedBackgrounds = [
|
|
801
646
|
theme.colors.background.alert.secondary,
|
|
802
647
|
theme.colors.background.warning.secondary,
|
|
803
648
|
theme.colors.background.brandExtra.secondary,
|
|
@@ -806,8 +651,31 @@ var AvatarGroup = ({
|
|
|
806
651
|
theme.colors.background.success.secondary,
|
|
807
652
|
theme.colors.background.success.primary
|
|
808
653
|
];
|
|
809
|
-
const
|
|
810
|
-
|
|
654
|
+
const presetColors = {
|
|
655
|
+
brand: theme.colors.background.brand.secondary,
|
|
656
|
+
brandExtra: theme.colors.background.brandExtra.secondary,
|
|
657
|
+
success: theme.colors.background.success.secondary,
|
|
658
|
+
warning: theme.colors.background.warning.secondary,
|
|
659
|
+
alert: theme.colors.background.alert.secondary,
|
|
660
|
+
neutral: theme.colors.background.neutral.secondary
|
|
661
|
+
};
|
|
662
|
+
const getBackgroundColor = (index) => {
|
|
663
|
+
if (typeof avatarBackgroundMode === "function") {
|
|
664
|
+
return avatarBackgroundMode(theme);
|
|
665
|
+
}
|
|
666
|
+
if (avatarBackgroundMode === "mixed") {
|
|
667
|
+
return mixedBackgrounds[index % mixedBackgrounds.length];
|
|
668
|
+
}
|
|
669
|
+
return presetColors[avatarBackgroundMode] || theme.colors.background.secondary;
|
|
670
|
+
};
|
|
671
|
+
const defaultAriaLabel = totalCount === 1 ? "1 user" : totalCount === visibleCount ? `${totalCount} users` : `${visibleCount} of ${totalCount} users`;
|
|
672
|
+
const renderAvatarWithTooltip = (avatar, tooltip, key) => {
|
|
673
|
+
if (tooltip) {
|
|
674
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_tooltip.Tooltip, { content: tooltip, placement: "top", children: avatar }, key);
|
|
675
|
+
}
|
|
676
|
+
return avatar;
|
|
677
|
+
};
|
|
678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
811
679
|
Box,
|
|
812
680
|
{
|
|
813
681
|
flexDirection: "row",
|
|
@@ -815,30 +683,37 @@ var AvatarGroup = ({
|
|
|
815
683
|
role: "group",
|
|
816
684
|
"aria-label": ariaLabel || defaultAriaLabel,
|
|
817
685
|
children: [
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
const
|
|
821
|
-
const
|
|
822
|
-
const
|
|
823
|
-
return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
686
|
+
visibleListItems.map((item, index) => {
|
|
687
|
+
const shouldApplyBackground = !item.src;
|
|
688
|
+
const backgroundColor = shouldApplyBackground ? getBackgroundColor(index) : void 0;
|
|
689
|
+
const shouldEnableHover = !!item.src && !!item.onClick;
|
|
690
|
+
const avatar = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
824
691
|
Box,
|
|
825
692
|
{
|
|
826
693
|
marginLeft: index === 0 ? 0 : overlap,
|
|
827
694
|
zIndex: totalCount - index,
|
|
828
|
-
children:
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
695
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
696
|
+
Avatar,
|
|
697
|
+
{
|
|
698
|
+
src: item.src,
|
|
699
|
+
text: item.initials,
|
|
700
|
+
size: internalSize,
|
|
701
|
+
stroke,
|
|
702
|
+
backgroundColor,
|
|
703
|
+
disableHover: !shouldEnableHover,
|
|
704
|
+
onClick: item.onClick,
|
|
705
|
+
...item.tooltip ? { "aria-label": item.tooltip } : {}
|
|
706
|
+
}
|
|
707
|
+
)
|
|
834
708
|
},
|
|
835
709
|
index
|
|
836
710
|
);
|
|
711
|
+
return renderAvatarWithTooltip(avatar, item.tooltip, index);
|
|
837
712
|
}),
|
|
838
|
-
remainingCount > 0 && /* @__PURE__ */ (0,
|
|
713
|
+
remainingCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginLeft: overlap, zIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
839
714
|
Avatar,
|
|
840
715
|
{
|
|
841
|
-
size,
|
|
716
|
+
size: internalSize,
|
|
842
717
|
text: `+${remainingCount}`,
|
|
843
718
|
stroke,
|
|
844
719
|
backgroundColor: theme.colors.background.secondary,
|