@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.
Files changed (13) hide show
  1. package/native/index.d.mts +36 -6
  2. package/native/index.d.ts +36 -6
  3. package/native/index.js +72 -197
  4. package/native/index.js.map +1 -1
  5. package/native/index.mjs +70 -195
  6. package/native/index.mjs.map +1 -1
  7. package/package.json +6 -4
  8. package/web/index.d.mts +36 -6
  9. package/web/index.d.ts +36 -6
  10. package/web/index.js +72 -197
  11. package/web/index.js.map +1 -1
  12. package/web/index.mjs +70 -195
  13. 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
- /** Avatars to display in the group */
37
- children: React.ReactNode;
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?: "xl" | "l" | "m" | "s" | "xs";
40
- /** Maximum number of avatars to show before showing the "+N" indicator */
41
- max?: number;
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
- /** Avatars to display in the group */
37
- children: React.ReactNode;
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?: "xl" | "l" | "m" | "s" | "xs";
40
- /** Maximum number of avatars to show before showing the "+N" indicator */
41
- max?: number;
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, import_jsx_runtime122.jsxs)(
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, import_jsx_runtime122.jsx)(
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, import_jsx_runtime122.jsx)(
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, import_jsx_runtime122.jsx)(Icon, { size: sizeStyles.iconSize, color: theme.colors.content.primary, children: icon }) : text ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
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, import_jsx_runtime122.jsx)(
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, import_jsx_runtime122.jsx)(
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, import_jsx_runtime122.jsx)(
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 import_jsx_runtime123 = require("react/jsx-runtime");
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
- children,
816
- size = "m",
817
- max = 5,
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 childrenArray = import_react4.default.Children.toArray(children).filter(Boolean);
823
- const totalCount = childrenArray.length;
824
- const visibleCount = Math.min(totalCount, Math.max(0, max));
825
- const visibleAvatars = childrenArray.slice(0, visibleCount);
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 avatarBackgrounds = [
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 defaultAriaLabel = totalCount === 1 ? "1 user" : totalCount === visibleAvatars.length ? `${totalCount} users` : `${visibleAvatars.length} of ${totalCount} users`;
838
- return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
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
- visibleAvatars.map((child, index) => {
847
- if (!import_react4.default.isValidElement(child)) return null;
848
- const childProps = child.props;
849
- const shouldApplyBackground = !childProps.src && !childProps.backgroundColor;
850
- const backgroundColor = shouldApplyBackground ? avatarBackgrounds[index % avatarBackgrounds.length] : childProps.backgroundColor;
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: import_react4.default.cloneElement(child, {
857
- size: childProps.size || size,
858
- stroke: childProps.stroke ?? stroke,
859
- backgroundColor,
860
- disableHover: true
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, import_jsx_runtime123.jsx)(Box, { marginLeft: overlap, zIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
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,