@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/web/index.mjs CHANGED
@@ -452,170 +452,8 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
452
452
  // src/Avatar.tsx
453
453
  import { useDesignSystem } from "@xsolla/xui-core";
454
454
  import { Badge } from "@xsolla/xui-badge";
455
-
456
- // ../icons-base/dist/web/index.mjs
457
- import styled8 from "styled-components";
458
- import { jsx as jsx8 } from "react/jsx-runtime";
459
- import { jsx as jsx22 } from "react/jsx-runtime";
460
- import { jsx as jsx32 } from "react/jsx-runtime";
461
- import { jsx as jsx42 } from "react/jsx-runtime";
462
- import { jsx as jsx52 } from "react/jsx-runtime";
463
- import { jsx as jsx62 } from "react/jsx-runtime";
464
- import { jsx as jsx72 } from "react/jsx-runtime";
465
- import { jsx as jsx82 } from "react/jsx-runtime";
466
- import { jsx as jsx9 } from "react/jsx-runtime";
467
- import { jsx as jsx10 } from "react/jsx-runtime";
468
- import { jsx as jsx11 } from "react/jsx-runtime";
469
- import { jsx as jsx12 } from "react/jsx-runtime";
470
- import { jsx as jsx13 } from "react/jsx-runtime";
471
- import { jsx as jsx14 } from "react/jsx-runtime";
472
- import { jsx as jsx15 } from "react/jsx-runtime";
473
- import { jsx as jsx16 } from "react/jsx-runtime";
474
- import { jsx as jsx17 } from "react/jsx-runtime";
475
- import { jsx as jsx18 } from "react/jsx-runtime";
476
- import { jsx as jsx19 } from "react/jsx-runtime";
477
- import { jsx as jsx20 } from "react/jsx-runtime";
478
- import { jsx as jsx21 } from "react/jsx-runtime";
479
- import { jsx as jsx222 } from "react/jsx-runtime";
480
- import { jsx as jsx23 } from "react/jsx-runtime";
481
- import { jsx as jsx24 } from "react/jsx-runtime";
482
- import { jsx as jsx25 } from "react/jsx-runtime";
483
- import { jsx as jsx26 } from "react/jsx-runtime";
484
- import { jsx as jsx27 } from "react/jsx-runtime";
485
- import { jsx as jsx28 } from "react/jsx-runtime";
486
- import { jsx as jsx29 } from "react/jsx-runtime";
487
- import { jsx as jsx30 } from "react/jsx-runtime";
488
- import { jsx as jsx31 } from "react/jsx-runtime";
489
- import { jsx as jsx322 } from "react/jsx-runtime";
490
- import { jsx as jsx33 } from "react/jsx-runtime";
491
- import { jsx as jsx34 } from "react/jsx-runtime";
492
- import { jsx as jsx35 } from "react/jsx-runtime";
493
- import { jsx as jsx36 } from "react/jsx-runtime";
494
- import { jsx as jsx37 } from "react/jsx-runtime";
495
- import { jsx as jsx38 } from "react/jsx-runtime";
496
- import { jsx as jsx39 } from "react/jsx-runtime";
497
- import { jsx as jsx40 } from "react/jsx-runtime";
498
- import { jsx as jsx41 } from "react/jsx-runtime";
499
- import { jsx as jsx422 } from "react/jsx-runtime";
500
- import { jsx as jsx43 } from "react/jsx-runtime";
501
- import { jsx as jsx44 } from "react/jsx-runtime";
502
- import { jsx as jsx45 } from "react/jsx-runtime";
503
- import { jsx as jsx46 } from "react/jsx-runtime";
504
- import { jsx as jsx47 } from "react/jsx-runtime";
505
- import { jsx as jsx48 } from "react/jsx-runtime";
506
- import { jsx as jsx49 } from "react/jsx-runtime";
507
- import { jsx as jsx50 } from "react/jsx-runtime";
508
- import { jsx as jsx51 } from "react/jsx-runtime";
509
- import { jsx as jsx522 } from "react/jsx-runtime";
510
- import { jsx as jsx53 } from "react/jsx-runtime";
511
- import { jsx as jsx54 } from "react/jsx-runtime";
512
- import { jsx as jsx55 } from "react/jsx-runtime";
513
- import { jsx as jsx56 } from "react/jsx-runtime";
514
- import { jsx as jsx57 } from "react/jsx-runtime";
515
- import { jsx as jsx58 } from "react/jsx-runtime";
516
- import { jsx as jsx59 } from "react/jsx-runtime";
517
- import { jsx as jsx60 } from "react/jsx-runtime";
518
- import { jsx as jsx61 } from "react/jsx-runtime";
519
- import { jsx as jsx622 } from "react/jsx-runtime";
520
- import { jsx as jsx63 } from "react/jsx-runtime";
521
- import { jsx as jsx64 } from "react/jsx-runtime";
522
- import { jsx as jsx65 } from "react/jsx-runtime";
523
- import { jsx as jsx66 } from "react/jsx-runtime";
524
- import { jsx as jsx67 } from "react/jsx-runtime";
525
- import { jsx as jsx68 } from "react/jsx-runtime";
526
- import { jsx as jsx69 } from "react/jsx-runtime";
527
- import { jsx as jsx70 } from "react/jsx-runtime";
528
- import { jsx as jsx71 } from "react/jsx-runtime";
529
- import { jsx as jsx722 } from "react/jsx-runtime";
530
- import { jsx as jsx73 } from "react/jsx-runtime";
531
- import { jsx as jsx74 } from "react/jsx-runtime";
532
- import { jsx as jsx75 } from "react/jsx-runtime";
533
- import { jsx as jsx76 } from "react/jsx-runtime";
534
- import { jsx as jsx77 } from "react/jsx-runtime";
535
- import { jsx as jsx78 } from "react/jsx-runtime";
536
- import { jsx as jsx79 } from "react/jsx-runtime";
537
- import { jsx as jsx80 } from "react/jsx-runtime";
538
- import { jsx as jsx81 } from "react/jsx-runtime";
539
- import { jsx as jsx822 } from "react/jsx-runtime";
540
- import { jsx as jsx83 } from "react/jsx-runtime";
541
- import { jsx as jsx84 } from "react/jsx-runtime";
542
- import { jsx as jsx85 } from "react/jsx-runtime";
543
- import { jsx as jsx86 } from "react/jsx-runtime";
544
- import { jsx as jsx87 } from "react/jsx-runtime";
545
- import { jsx as jsx88 } from "react/jsx-runtime";
546
- import { jsx as jsx89 } from "react/jsx-runtime";
547
- import { jsx as jsx90 } from "react/jsx-runtime";
548
- import { jsx as jsx91 } from "react/jsx-runtime";
549
- import { jsx as jsx92 } from "react/jsx-runtime";
550
- import { jsx as jsx93 } from "react/jsx-runtime";
551
- import { jsx as jsx94 } from "react/jsx-runtime";
552
- import { jsx as jsx95 } from "react/jsx-runtime";
553
- import { jsx as jsx96 } from "react/jsx-runtime";
554
- import { jsx as jsx97 } from "react/jsx-runtime";
555
- import { jsx as jsx98 } from "react/jsx-runtime";
556
- import { jsx as jsx99 } from "react/jsx-runtime";
557
- import { jsx as jsx100 } from "react/jsx-runtime";
558
- import { jsx as jsx101 } from "react/jsx-runtime";
559
- import { jsx as jsx102 } from "react/jsx-runtime";
560
- import { jsx as jsx103 } from "react/jsx-runtime";
561
- import { jsx as jsx104 } from "react/jsx-runtime";
562
- import { jsx as jsx105 } from "react/jsx-runtime";
563
- import { jsx as jsx106 } from "react/jsx-runtime";
564
- import { jsx as jsx107 } from "react/jsx-runtime";
565
- import { jsx as jsx108 } from "react/jsx-runtime";
566
- import { jsx as jsx109 } from "react/jsx-runtime";
567
- import { jsx as jsx110 } from "react/jsx-runtime";
568
- import { jsx as jsx111 } from "react/jsx-runtime";
569
- import { jsx as jsx112 } from "react/jsx-runtime";
570
- import { jsx as jsx113 } from "react/jsx-runtime";
571
- import { jsx as jsx114 } from "react/jsx-runtime";
572
- var StyledIcon2 = styled8.div`
573
- display: inline-flex;
574
- align-items: center;
575
- justify-content: center;
576
- width: ${(props) => props.$size}px;
577
- height: ${(props) => props.$size}px;
578
- color: ${(props) => props.$color};
579
-
580
- svg {
581
- width: 100%;
582
- height: 100%;
583
- }
584
- `;
585
- var BaseIcon = ({
586
- variant = "line",
587
- size = 24,
588
- color = "currentColor",
589
- solidContent: solidContent114,
590
- lineContent: lineContent114,
591
- className,
592
- style,
593
- "data-testid": testId,
594
- "aria-label": ariaLabel,
595
- "aria-hidden": ariaHidden
596
- }) => {
597
- const svgContent = variant === "line" ? lineContent114 : solidContent114;
598
- return /* @__PURE__ */ jsx8(
599
- StyledIcon2,
600
- {
601
- $size: size,
602
- $color: color,
603
- className,
604
- style,
605
- "data-testid": testId,
606
- role: ariaLabel ? "img" : void 0,
607
- "aria-label": ariaLabel,
608
- "aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
609
- dangerouslySetInnerHTML: { __html: svgContent }
610
- }
611
- );
612
- };
613
- 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>`;
614
- 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>`;
615
- var User = (props) => /* @__PURE__ */ jsx112(BaseIcon, { ...props, solidContent: solidContent111, lineContent: lineContent111 });
616
-
617
- // src/Avatar.tsx
618
- import { jsx as jsx115, jsxs } from "react/jsx-runtime";
455
+ import { User } from "@xsolla/xui-icons-base";
456
+ import { jsx as jsx8, jsxs } from "react/jsx-runtime";
619
457
  var Avatar = ({
620
458
  src,
621
459
  icon,
@@ -671,7 +509,7 @@ var Avatar = ({
671
509
  tabIndex: 0
672
510
  },
673
511
  children: [
674
- /* @__PURE__ */ jsx115(
512
+ /* @__PURE__ */ jsx8(
675
513
  Box,
676
514
  {
677
515
  width: sizeStyles.size,
@@ -689,7 +527,7 @@ var Avatar = ({
689
527
  overflow: "hidden",
690
528
  borderWidth: stroke ? 1 : 0,
691
529
  borderColor: theme.colors.background.primary,
692
- children: src ? /* @__PURE__ */ jsx115(
530
+ children: src ? /* @__PURE__ */ jsx8(
693
531
  Box,
694
532
  {
695
533
  as: "img",
@@ -702,7 +540,7 @@ var Avatar = ({
702
540
  height: sizeStyles.size,
703
541
  borderRadius
704
542
  }
705
- ) : icon ? /* @__PURE__ */ jsx115(Icon, { size: sizeStyles.iconSize, color: theme.colors.content.primary, children: icon }) : text ? /* @__PURE__ */ jsx115(
543
+ ) : icon ? /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: theme.colors.content.primary, children: icon }) : text ? /* @__PURE__ */ jsx8(
706
544
  Text,
707
545
  {
708
546
  fontSize: sizeStyles.fontSize,
@@ -710,7 +548,7 @@ var Avatar = ({
710
548
  fontWeight: "600",
711
549
  children: text
712
550
  }
713
- ) : /* @__PURE__ */ jsx115(
551
+ ) : /* @__PURE__ */ jsx8(
714
552
  User,
715
553
  {
716
554
  size: sizeStyles.iconSize,
@@ -719,13 +557,13 @@ var Avatar = ({
719
557
  )
720
558
  }
721
559
  ),
722
- badge && /* @__PURE__ */ jsx115(
560
+ badge && /* @__PURE__ */ jsx8(
723
561
  Box,
724
562
  {
725
563
  position: "absolute",
726
564
  right: badgeOffset.right,
727
565
  top: badgeOffset.top,
728
- children: /* @__PURE__ */ jsx115(
566
+ children: /* @__PURE__ */ jsx8(
729
567
  Badge,
730
568
  {
731
569
  size: badgeSize,
@@ -743,24 +581,31 @@ var Avatar = ({
743
581
  };
744
582
 
745
583
  // src/AvatarGroup.tsx
746
- import React4 from "react";
747
584
  import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
748
- import { jsx as jsx116, jsxs as jsxs2 } from "react/jsx-runtime";
585
+ import { Tooltip } from "@xsolla/xui-tooltip";
586
+ import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
587
+ var sizeMap = {
588
+ sm: "s",
589
+ md: "m",
590
+ lg: "l",
591
+ xl: "xl"
592
+ };
749
593
  var AvatarGroup = ({
750
- children,
751
- size = "m",
752
- max = 5,
594
+ list,
595
+ size = "md",
596
+ maxVisible = 6,
753
597
  stroke = true,
598
+ avatarBackgroundMode = "mixed",
754
599
  "aria-label": ariaLabel
755
600
  }) => {
756
601
  const { theme } = useDesignSystem2();
757
- const childrenArray = React4.Children.toArray(children).filter(Boolean);
758
- const totalCount = childrenArray.length;
759
- const visibleCount = Math.min(totalCount, Math.max(0, max));
760
- const visibleAvatars = childrenArray.slice(0, visibleCount);
602
+ const internalSize = sizeMap[size];
603
+ const totalCount = list.length;
604
+ const visibleCount = Math.min(totalCount, Math.max(0, maxVisible));
605
+ const visibleListItems = list.slice(0, visibleCount);
761
606
  const remainingCount = totalCount - visibleCount;
762
607
  const overlap = -4;
763
- const avatarBackgrounds = [
608
+ const mixedBackgrounds = [
764
609
  theme.colors.background.alert.secondary,
765
610
  theme.colors.background.warning.secondary,
766
611
  theme.colors.background.brandExtra.secondary,
@@ -769,7 +614,30 @@ var AvatarGroup = ({
769
614
  theme.colors.background.success.secondary,
770
615
  theme.colors.background.success.primary
771
616
  ];
772
- const defaultAriaLabel = totalCount === 1 ? "1 user" : totalCount === visibleAvatars.length ? `${totalCount} users` : `${visibleAvatars.length} of ${totalCount} users`;
617
+ const presetColors = {
618
+ brand: theme.colors.background.brand.secondary,
619
+ brandExtra: theme.colors.background.brandExtra.secondary,
620
+ success: theme.colors.background.success.secondary,
621
+ warning: theme.colors.background.warning.secondary,
622
+ alert: theme.colors.background.alert.secondary,
623
+ neutral: theme.colors.background.neutral.secondary
624
+ };
625
+ const getBackgroundColor = (index) => {
626
+ if (typeof avatarBackgroundMode === "function") {
627
+ return avatarBackgroundMode(theme);
628
+ }
629
+ if (avatarBackgroundMode === "mixed") {
630
+ return mixedBackgrounds[index % mixedBackgrounds.length];
631
+ }
632
+ return presetColors[avatarBackgroundMode] || theme.colors.background.secondary;
633
+ };
634
+ const defaultAriaLabel = totalCount === 1 ? "1 user" : totalCount === visibleCount ? `${totalCount} users` : `${visibleCount} of ${totalCount} users`;
635
+ const renderAvatarWithTooltip = (avatar, tooltip, key) => {
636
+ if (tooltip) {
637
+ return /* @__PURE__ */ jsx9(Tooltip, { content: tooltip, placement: "top", children: avatar }, key);
638
+ }
639
+ return avatar;
640
+ };
773
641
  return /* @__PURE__ */ jsxs2(
774
642
  Box,
775
643
  {
@@ -778,30 +646,37 @@ var AvatarGroup = ({
778
646
  role: "group",
779
647
  "aria-label": ariaLabel || defaultAriaLabel,
780
648
  children: [
781
- visibleAvatars.map((child, index) => {
782
- if (!React4.isValidElement(child)) return null;
783
- const childProps = child.props;
784
- const shouldApplyBackground = !childProps.src && !childProps.backgroundColor;
785
- const backgroundColor = shouldApplyBackground ? avatarBackgrounds[index % avatarBackgrounds.length] : childProps.backgroundColor;
786
- return /* @__PURE__ */ jsx116(
649
+ visibleListItems.map((item, index) => {
650
+ const shouldApplyBackground = !item.src;
651
+ const backgroundColor = shouldApplyBackground ? getBackgroundColor(index) : void 0;
652
+ const shouldEnableHover = !!item.src && !!item.onClick;
653
+ const avatar = /* @__PURE__ */ jsx9(
787
654
  Box,
788
655
  {
789
656
  marginLeft: index === 0 ? 0 : overlap,
790
657
  zIndex: totalCount - index,
791
- children: React4.cloneElement(child, {
792
- size: childProps.size || size,
793
- stroke: childProps.stroke ?? stroke,
794
- backgroundColor,
795
- disableHover: true
796
- })
658
+ children: /* @__PURE__ */ jsx9(
659
+ Avatar,
660
+ {
661
+ src: item.src,
662
+ text: item.initials,
663
+ size: internalSize,
664
+ stroke,
665
+ backgroundColor,
666
+ disableHover: !shouldEnableHover,
667
+ onClick: item.onClick,
668
+ ...item.tooltip ? { "aria-label": item.tooltip } : {}
669
+ }
670
+ )
797
671
  },
798
672
  index
799
673
  );
674
+ return renderAvatarWithTooltip(avatar, item.tooltip, index);
800
675
  }),
801
- remainingCount > 0 && /* @__PURE__ */ jsx116(Box, { marginLeft: overlap, zIndex: 0, children: /* @__PURE__ */ jsx116(
676
+ remainingCount > 0 && /* @__PURE__ */ jsx9(Box, { marginLeft: overlap, zIndex: 0, children: /* @__PURE__ */ jsx9(
802
677
  Avatar,
803
678
  {
804
- size,
679
+ size: internalSize,
805
680
  text: `+${remainingCount}`,
806
681
  stroke,
807
682
  backgroundColor: theme.colors.background.secondary,