@moontra/moonui-pro 2.11.3 → 2.12.0

package/src/components/ui/avatar.tsx

@@ -83,16 +83,29 @@ const MoonUIAvatarFallbackPro = React.forwardRef<
 MoonUIAvatarFallbackPro.displayName = AvatarPrimitive.Fallback.displayName;
 
 // Avatar Group Component for displaying multiple avatars
-interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  limit?: number;
-  avatars: React.ReactNode[];
+interface MoonUIAvatarGroupProProps extends React.HTMLAttributes<HTMLDivElement> {
+  max?: number;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  children?: React.ReactNode;
   overlapOffset?: number;
 }
 
-const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ className, limit, avatars, overlapOffset = -8, ...props }, ref) => {
-    const visibleAvatars = limit ? avatars.slice(0, limit) : avatars;
-    const remainingCount = limit ? Math.max(0, avatars.length - limit) : 0;
+const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, MoonUIAvatarGroupProProps>(
+  ({ className, max = 3, size = "md", children, overlapOffset, ...props }, ref) => {
+    const childrenArray = React.Children.toArray(children);
+    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
+    const remainingCount = max ? Math.max(0, childrenArray.length - max) : 0;
+
+    // Calculate overlap offset based on size
+    const defaultOffsets = {
+      xs: -4,
+      sm: -6,
+      md: -8,
+      lg: -10,
+      xl: -12,
+      "2xl": -16,
+    };
+    const finalOffset = overlapOffset ?? defaultOffsets[size as keyof typeof defaultOffsets] ?? -8;
 
     return (
       <div
@@ -101,25 +114,27 @@ const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
         {...props}
       >
         <div className="flex">
-          {visibleAvatars.map((avatar, index) => (
+          {visibleChildren.map((child, index) => (
             <div 
               key={index} 
-              className="relative"
+              className="relative ring-2 ring-background rounded-full"
               style={{ 
-                marginLeft: index === 0 ? 0 : `${overlapOffset}px`,
-                zIndex: visibleAvatars.length - index 
+                marginLeft: index === 0 ? 0 : `${finalOffset}px`,
+                zIndex: visibleChildren.length - index 
               }}
             >
-              {avatar}
+              {React.isValidElement(child) && child.type === MoonUIAvatarPro
+                ? React.cloneElement(child as React.ReactElement<any>, { size })
+                : child}
             </div>
           ))}
           {remainingCount > 0 && (
             <div 
-              className="relative z-0"
-              style={{ marginLeft: `${overlapOffset}px` }}
+              className="relative z-0 ring-2 ring-background rounded-full"
+              style={{ marginLeft: `${finalOffset}px` }}
             >
-              <MoonUIAvatarPro variant="border">
-                <MoonUIAvatarFallbackPro>
+              <MoonUIAvatarPro size={size} className="bg-muted">
+                <MoonUIAvatarFallbackPro className="text-xs font-medium">
                   +{remainingCount}
                 </MoonUIAvatarFallbackPro>
               </MoonUIAvatarPro>
@@ -130,9 +145,9 @@ const MoonUIAvatarGroupPro = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
     );
   }
 );
-MoonUIAvatarGroupPro.displayName = "AvatarGroup";
+MoonUIAvatarGroupPro.displayName = "MoonUIAvatarGroupPro";
 
-export { MoonUIAvatarPro, MoonUIAvatarImagePro, MoonUIAvatarFallbackPro, MoonUIAvatarGroupPro as AvatarGroup  };
+export { MoonUIAvatarPro, MoonUIAvatarImagePro, MoonUIAvatarFallbackPro, MoonUIAvatarGroupPro };
 
 // Backward compatibility exports
-export { MoonUIAvatarPro as Avatar, MoonUIAvatarImagePro as AvatarImage, MoonUIAvatarFallbackPro as AvatarFallback };
+export { MoonUIAvatarPro as Avatar, MoonUIAvatarImagePro as AvatarImage, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarGroupPro as AvatarGroup };