chore: ✨ set showRing to true in AvatarGroup (#42)

* chore: ✨ set showRing to true in AvatarGroup

* chore: ✨ added AvatarGroup examples

Author: Karthik-B-06

example/src/modules/primitives/AvatarGroupScreen.tsx

@@ -12,14 +12,58 @@ export default function AvatarGroupScreen() {
     <Box
       style={tailwind.style("flex-1 justify-center items-center bg-white-900")}
     >
-      <AvatarGroup>
-        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=1" }} />
-        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=2" }} />
-        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=3" }} />
-        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=4" }} />
-        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=5" }} />
+      <AvatarGroup size="md">
+        <Avatar />
+        <Avatar />
+        <Avatar />
+      </AvatarGroup>
+      <AvatarGroup size="xl">
+        <Avatar />
+        <Avatar />
+        <Avatar />
+        <Avatar />
+      </AvatarGroup>
+      <AvatarGroup size="2xl">
+        <Avatar name={"Navin Moorthy"} />
+        <Avatar name={"Karthik Balasubramanian"} />
+        <Avatar name={"Sandeep Prabhakaran"} />
+        <Avatar name={"Abhishek MG"} />
+        <Avatar name={"Udhaya Chandran"} />
+      </AvatarGroup>
+      <AvatarGroup size="2xl">
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=6" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=13" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=25" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=33" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=45" }} />
+      </AvatarGroup>
+      <AvatarGroup size="2xl" squared>
+        <Avatar name={"Navin Moorthy"} />
+        <Avatar name={"Karthik Balasubramanian"} />
+        <Avatar name={"Sandeep Prabhakaran"} />
+        <Avatar name={"Abhishek MG"} />
+        <Avatar name={"Udhaya Chandran"} />
+      </AvatarGroup>
+      <AvatarGroup max={2}>
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=6" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=13" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=25" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=33" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=45" }} />
+      </AvatarGroup>
+      <AvatarGroup max={3} squared>
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=6" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=13" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=25" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=33" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=45" }} />
+      </AvatarGroup>
+      <AvatarGroup squared>
         <Avatar src={{ uri: "https://i.pravatar.cc/300??img=6" }} />
-        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=7" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=13" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=25" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=33" }} />
+        <Avatar src={{ uri: "https://i.pravatar.cc/300??img=45" }} />
       </AvatarGroup>
     </Box>
   );

src/components/avatar-group/AvatarGroup.tsx

@@ -42,7 +42,7 @@ export const AvatarGroup: React.FC<Partial<AvatarGroupProps>> = props => {
   const {
     squared = false,
     size = "xl",
-    showRing = false,
+    showRing = true,
     ringColor = "white",
     children,
     max,