💄 style: Add zIndexReverse to Avatar.Group

canisminor1990 · canisminor1990 · commit f7bc91952f94 · 2025-09-13T16:37:08.000+08:00
diff --git a/src/Avatar/AvatarGroup/index.tsx b/src/Avatar/AvatarGroup/index.tsx
@@ -24,6 +24,7 @@ const AvatarGroup = memo<AvatarGroupProps>(
     styles: customStyles,
     onClick,
     ref,
+    zIndexReverse,
     ...rest
   }) => {
     const { cx, styles, theme } = useStyles();
@@ -66,6 +67,7 @@ const AvatarGroup = memo<AvatarGroupProps>(
               onClick={() => onClick?.({ item: avatar, key })}
               style={{
                 marginLeft: index === 0 ? 0 : gapValue,
+                zIndex: zIndexReverse ? items.length - index : index,
                 ...customStyles?.avatar,
                 ...avatarStyle,
               }}
@@ -83,6 +85,7 @@ const AvatarGroup = memo<AvatarGroupProps>(
             sliceText={false}
             style={{
               marginLeft: gapValue,
+              zIndex: zIndexReverse ? 0 : avatars.length,
               ...customStyles?.count,
             }}
           />
diff --git a/src/Avatar/demos/Group.tsx b/src/Avatar/demos/Group.tsx
@@ -37,6 +37,7 @@ export default () => {
         options: ['borderless', 'filled', 'outlined'],
         value: 'filled',
       },
+      zIndexReverse: false,
     },
     { store },
   ) as AvatarGroupProps;
diff --git a/src/Avatar/type.ts b/src/Avatar/type.ts
@@ -55,4 +55,5 @@ export interface AvatarGroupProps
     avatar?: CSSProperties;
     count?: CSSProperties;
   };
+  zIndexReverse?: boolean;
 }
