@xsolla/xui-avatar 0.65.0-pr73.1768528688 → 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/native/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/native/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/native/index.js
CHANGED
|
@@ -517,170 +517,8 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
|
|
|
517
517
|
// src/Avatar.tsx
|
|
518
518
|
var import_xui_core = require("@xsolla/xui-core");
|
|
519
519
|
var import_xui_badge = require("@xsolla/xui-badge");
|
|
520
|
-
|
|
521
|
-
// ../icons-base/dist/web/index.mjs
|
|
522
|
-
var import_styled_components = __toESM(require("styled-components"), 1);
|
|
520
|
+
var import_xui_icons_base = require("@xsolla/xui-icons-base");
|
|
523
521
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
524
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
525
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
526
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
527
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
528
|
-
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
529
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
530
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
531
|
-
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
532
|
-
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
533
|
-
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
534
|
-
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
535
|
-
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
536
|
-
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
537
|
-
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
538
|
-
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
539
|
-
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
540
|
-
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
541
|
-
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
542
|
-
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
543
|
-
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
544
|
-
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
545
|
-
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
546
|
-
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
547
|
-
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
548
|
-
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
549
|
-
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
550
|
-
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
551
|
-
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
552
|
-
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
553
|
-
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
554
|
-
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
555
|
-
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
556
|
-
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
557
|
-
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
558
|
-
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
559
|
-
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
560
|
-
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
561
|
-
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
562
|
-
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
563
|
-
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
564
|
-
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
565
|
-
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
566
|
-
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
567
|
-
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
568
|
-
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
569
|
-
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
570
|
-
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
571
|
-
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
572
|
-
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
573
|
-
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
574
|
-
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
575
|
-
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
576
|
-
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
577
|
-
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
578
|
-
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
579
|
-
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
580
|
-
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
581
|
-
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
582
|
-
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
583
|
-
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
584
|
-
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
585
|
-
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
586
|
-
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
587
|
-
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
588
|
-
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
589
|
-
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
590
|
-
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
591
|
-
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
592
|
-
var import_jsx_runtime77 = require("react/jsx-runtime");
|
|
593
|
-
var import_jsx_runtime78 = require("react/jsx-runtime");
|
|
594
|
-
var import_jsx_runtime79 = require("react/jsx-runtime");
|
|
595
|
-
var import_jsx_runtime80 = require("react/jsx-runtime");
|
|
596
|
-
var import_jsx_runtime81 = require("react/jsx-runtime");
|
|
597
|
-
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
598
|
-
var import_jsx_runtime83 = require("react/jsx-runtime");
|
|
599
|
-
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
600
|
-
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
601
|
-
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
602
|
-
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
603
|
-
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
604
|
-
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
605
|
-
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
606
|
-
var import_jsx_runtime91 = require("react/jsx-runtime");
|
|
607
|
-
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
608
|
-
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
609
|
-
var import_jsx_runtime94 = require("react/jsx-runtime");
|
|
610
|
-
var import_jsx_runtime95 = require("react/jsx-runtime");
|
|
611
|
-
var import_jsx_runtime96 = require("react/jsx-runtime");
|
|
612
|
-
var import_jsx_runtime97 = require("react/jsx-runtime");
|
|
613
|
-
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
614
|
-
var import_jsx_runtime99 = require("react/jsx-runtime");
|
|
615
|
-
var import_jsx_runtime100 = require("react/jsx-runtime");
|
|
616
|
-
var import_jsx_runtime101 = require("react/jsx-runtime");
|
|
617
|
-
var import_jsx_runtime102 = require("react/jsx-runtime");
|
|
618
|
-
var import_jsx_runtime103 = require("react/jsx-runtime");
|
|
619
|
-
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
620
|
-
var import_jsx_runtime105 = require("react/jsx-runtime");
|
|
621
|
-
var import_jsx_runtime106 = require("react/jsx-runtime");
|
|
622
|
-
var import_jsx_runtime107 = require("react/jsx-runtime");
|
|
623
|
-
var import_jsx_runtime108 = require("react/jsx-runtime");
|
|
624
|
-
var import_jsx_runtime109 = require("react/jsx-runtime");
|
|
625
|
-
var import_jsx_runtime110 = require("react/jsx-runtime");
|
|
626
|
-
var import_jsx_runtime111 = require("react/jsx-runtime");
|
|
627
|
-
var import_jsx_runtime112 = require("react/jsx-runtime");
|
|
628
|
-
var import_jsx_runtime113 = require("react/jsx-runtime");
|
|
629
|
-
var import_jsx_runtime114 = require("react/jsx-runtime");
|
|
630
|
-
var import_jsx_runtime115 = require("react/jsx-runtime");
|
|
631
|
-
var import_jsx_runtime116 = require("react/jsx-runtime");
|
|
632
|
-
var import_jsx_runtime117 = require("react/jsx-runtime");
|
|
633
|
-
var import_jsx_runtime118 = require("react/jsx-runtime");
|
|
634
|
-
var import_jsx_runtime119 = require("react/jsx-runtime");
|
|
635
|
-
var import_jsx_runtime120 = require("react/jsx-runtime");
|
|
636
|
-
var import_jsx_runtime121 = require("react/jsx-runtime");
|
|
637
|
-
var StyledIcon = import_styled_components.default.div`
|
|
638
|
-
display: inline-flex;
|
|
639
|
-
align-items: center;
|
|
640
|
-
justify-content: center;
|
|
641
|
-
width: ${(props) => props.$size}px;
|
|
642
|
-
height: ${(props) => props.$size}px;
|
|
643
|
-
color: ${(props) => props.$color};
|
|
644
|
-
|
|
645
|
-
svg {
|
|
646
|
-
width: 100%;
|
|
647
|
-
height: 100%;
|
|
648
|
-
}
|
|
649
|
-
`;
|
|
650
|
-
var BaseIcon = ({
|
|
651
|
-
variant = "line",
|
|
652
|
-
size = 24,
|
|
653
|
-
color = "currentColor",
|
|
654
|
-
solidContent: solidContent114,
|
|
655
|
-
lineContent: lineContent114,
|
|
656
|
-
className,
|
|
657
|
-
style,
|
|
658
|
-
"data-testid": testId,
|
|
659
|
-
"aria-label": ariaLabel,
|
|
660
|
-
"aria-hidden": ariaHidden
|
|
661
|
-
}) => {
|
|
662
|
-
const svgContent = variant === "line" ? lineContent114 : solidContent114;
|
|
663
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
664
|
-
StyledIcon,
|
|
665
|
-
{
|
|
666
|
-
$size: size,
|
|
667
|
-
$color: color,
|
|
668
|
-
className,
|
|
669
|
-
style,
|
|
670
|
-
"data-testid": testId,
|
|
671
|
-
role: ariaLabel ? "img" : void 0,
|
|
672
|
-
"aria-label": ariaLabel,
|
|
673
|
-
"aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
|
|
674
|
-
dangerouslySetInnerHTML: { __html: svgContent }
|
|
675
|
-
}
|
|
676
|
-
);
|
|
677
|
-
};
|
|
678
|
-
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>`;
|
|
679
|
-
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>`;
|
|
680
|
-
var User = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(BaseIcon, { ...props, solidContent: solidContent111, lineContent: lineContent111 });
|
|
681
|
-
|
|
682
|
-
// src/Avatar.tsx
|
|
683
|
-
var import_jsx_runtime122 = require("react/jsx-runtime");
|
|
684
522
|
var Avatar = ({
|
|
685
523
|
src,
|
|
686
524
|
icon,
|
|
@@ -716,7 +554,7 @@ var Avatar = ({
|
|
|
716
554
|
};
|
|
717
555
|
const badgeOffset = badgeCount ? square ? sizeStyles.badgeOffsetSquare : sizeStyles.badgeOffsetCircle : getDotOffset();
|
|
718
556
|
const displayBadgeCount = badgeCount;
|
|
719
|
-
return /* @__PURE__ */ (0,
|
|
557
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
720
558
|
Box,
|
|
721
559
|
{
|
|
722
560
|
width: sizeStyles.size,
|
|
@@ -736,7 +574,7 @@ var Avatar = ({
|
|
|
736
574
|
tabIndex: 0
|
|
737
575
|
},
|
|
738
576
|
children: [
|
|
739
|
-
/* @__PURE__ */ (0,
|
|
577
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
740
578
|
Box,
|
|
741
579
|
{
|
|
742
580
|
width: sizeStyles.size,
|
|
@@ -754,7 +592,7 @@ var Avatar = ({
|
|
|
754
592
|
overflow: "hidden",
|
|
755
593
|
borderWidth: stroke ? 1 : 0,
|
|
756
594
|
borderColor: theme.colors.background.primary,
|
|
757
|
-
children: src ? /* @__PURE__ */ (0,
|
|
595
|
+
children: src ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
758
596
|
Box,
|
|
759
597
|
{
|
|
760
598
|
as: "img",
|
|
@@ -767,7 +605,7 @@ var Avatar = ({
|
|
|
767
605
|
height: sizeStyles.size,
|
|
768
606
|
borderRadius
|
|
769
607
|
}
|
|
770
|
-
) : icon ? /* @__PURE__ */ (0,
|
|
608
|
+
) : 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)(
|
|
771
609
|
Text,
|
|
772
610
|
{
|
|
773
611
|
fontSize: sizeStyles.fontSize,
|
|
@@ -775,8 +613,8 @@ var Avatar = ({
|
|
|
775
613
|
fontWeight: "600",
|
|
776
614
|
children: text
|
|
777
615
|
}
|
|
778
|
-
) : /* @__PURE__ */ (0,
|
|
779
|
-
User,
|
|
616
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
617
|
+
import_xui_icons_base.User,
|
|
780
618
|
{
|
|
781
619
|
size: sizeStyles.iconSize,
|
|
782
620
|
color: theme.colors.content.primary
|
|
@@ -784,13 +622,13 @@ var Avatar = ({
|
|
|
784
622
|
)
|
|
785
623
|
}
|
|
786
624
|
),
|
|
787
|
-
badge && /* @__PURE__ */ (0,
|
|
625
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
788
626
|
Box,
|
|
789
627
|
{
|
|
790
628
|
position: "absolute",
|
|
791
629
|
right: badgeOffset.right,
|
|
792
630
|
top: badgeOffset.top,
|
|
793
|
-
children: /* @__PURE__ */ (0,
|
|
631
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
794
632
|
import_xui_badge.Badge,
|
|
795
633
|
{
|
|
796
634
|
size: badgeSize,
|
|
@@ -808,24 +646,31 @@ var Avatar = ({
|
|
|
808
646
|
};
|
|
809
647
|
|
|
810
648
|
// src/AvatarGroup.tsx
|
|
811
|
-
var import_react4 = __toESM(require("react"));
|
|
812
649
|
var import_xui_core2 = require("@xsolla/xui-core");
|
|
813
|
-
var
|
|
650
|
+
var import_xui_tooltip = require("@xsolla/xui-tooltip");
|
|
651
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
652
|
+
var sizeMap = {
|
|
653
|
+
sm: "s",
|
|
654
|
+
md: "m",
|
|
655
|
+
lg: "l",
|
|
656
|
+
xl: "xl"
|
|
657
|
+
};
|
|
814
658
|
var AvatarGroup = ({
|
|
815
|
-
|
|
816
|
-
size = "
|
|
817
|
-
|
|
659
|
+
list,
|
|
660
|
+
size = "md",
|
|
661
|
+
maxVisible = 6,
|
|
818
662
|
stroke = true,
|
|
663
|
+
avatarBackgroundMode = "mixed",
|
|
819
664
|
"aria-label": ariaLabel
|
|
820
665
|
}) => {
|
|
821
666
|
const { theme } = (0, import_xui_core2.useDesignSystem)();
|
|
822
|
-
const
|
|
823
|
-
const totalCount =
|
|
824
|
-
const visibleCount = Math.min(totalCount, Math.max(0,
|
|
825
|
-
const
|
|
667
|
+
const internalSize = sizeMap[size];
|
|
668
|
+
const totalCount = list.length;
|
|
669
|
+
const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));
|
|
670
|
+
const visibleListItems = list.slice(0, visibleCount);
|
|
826
671
|
const remainingCount = totalCount - visibleCount;
|
|
827
672
|
const overlap = -4;
|
|
828
|
-
const
|
|
673
|
+
const mixedBackgrounds = [
|
|
829
674
|
theme.colors.background.alert.secondary,
|
|
830
675
|
theme.colors.background.warning.secondary,
|
|
831
676
|
theme.colors.background.brandExtra.secondary,
|
|
@@ -834,8 +679,31 @@ var AvatarGroup = ({
|
|
|
834
679
|
theme.colors.background.success.secondary,
|
|
835
680
|
theme.colors.background.success.primary
|
|
836
681
|
];
|
|
837
|
-
const
|
|
838
|
-
|
|
682
|
+
const presetColors = {
|
|
683
|
+
brand: theme.colors.background.brand.secondary,
|
|
684
|
+
brandExtra: theme.colors.background.brandExtra.secondary,
|
|
685
|
+
success: theme.colors.background.success.secondary,
|
|
686
|
+
warning: theme.colors.background.warning.secondary,
|
|
687
|
+
alert: theme.colors.background.alert.secondary,
|
|
688
|
+
neutral: theme.colors.background.neutral.secondary
|
|
689
|
+
};
|
|
690
|
+
const getBackgroundColor = (index) => {
|
|
691
|
+
if (typeof avatarBackgroundMode === "function") {
|
|
692
|
+
return avatarBackgroundMode(theme);
|
|
693
|
+
}
|
|
694
|
+
if (avatarBackgroundMode === "mixed") {
|
|
695
|
+
return mixedBackgrounds[index % mixedBackgrounds.length];
|
|
696
|
+
}
|
|
697
|
+
return presetColors[avatarBackgroundMode] || theme.colors.background.secondary;
|
|
698
|
+
};
|
|
699
|
+
const defaultAriaLabel = totalCount === 1 ? "1 user" : totalCount === visibleCount ? `${totalCount} users` : `${visibleCount} of ${totalCount} users`;
|
|
700
|
+
const renderAvatarWithTooltip = (avatar, tooltip, key) => {
|
|
701
|
+
if (tooltip) {
|
|
702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_tooltip.Tooltip, { content: tooltip, placement: "top", children: avatar }, key);
|
|
703
|
+
}
|
|
704
|
+
return avatar;
|
|
705
|
+
};
|
|
706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
839
707
|
Box,
|
|
840
708
|
{
|
|
841
709
|
flexDirection: "row",
|
|
@@ -843,30 +711,37 @@ var AvatarGroup = ({
|
|
|
843
711
|
role: "group",
|
|
844
712
|
"aria-label": ariaLabel || defaultAriaLabel,
|
|
845
713
|
children: [
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
const
|
|
849
|
-
const
|
|
850
|
-
const
|
|
851
|
-
return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
714
|
+
visibleListItems.map((item, index) => {
|
|
715
|
+
const shouldApplyBackground = !item.src;
|
|
716
|
+
const backgroundColor = shouldApplyBackground ? getBackgroundColor(index) : void 0;
|
|
717
|
+
const shouldEnableHover = !!item.src && !!item.onClick;
|
|
718
|
+
const avatar = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
852
719
|
Box,
|
|
853
720
|
{
|
|
854
721
|
marginLeft: index === 0 ? 0 : overlap,
|
|
855
722
|
zIndex: totalCount - index,
|
|
856
|
-
children:
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
723
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
724
|
+
Avatar,
|
|
725
|
+
{
|
|
726
|
+
src: item.src,
|
|
727
|
+
text: item.initials,
|
|
728
|
+
size: internalSize,
|
|
729
|
+
stroke,
|
|
730
|
+
backgroundColor,
|
|
731
|
+
disableHover: !shouldEnableHover,
|
|
732
|
+
onClick: item.onClick,
|
|
733
|
+
...item.tooltip ? { "aria-label": item.tooltip } : {}
|
|
734
|
+
}
|
|
735
|
+
)
|
|
862
736
|
},
|
|
863
737
|
index
|
|
864
738
|
);
|
|
739
|
+
return renderAvatarWithTooltip(avatar, item.tooltip, index);
|
|
865
740
|
}),
|
|
866
|
-
remainingCount > 0 && /* @__PURE__ */ (0,
|
|
741
|
+
remainingCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginLeft: overlap, zIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
867
742
|
Avatar,
|
|
868
743
|
{
|
|
869
|
-
size,
|
|
744
|
+
size: internalSize,
|
|
870
745
|
text: `+${remainingCount}`,
|
|
871
746
|
stroke,
|
|
872
747
|
backgroundColor: theme.colors.background.secondary,
|