{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-group",
  "type": "registry:component",
  "title": "Avatar Group",
  "description": "Overlapping avatar stack for participants, assignees, and collaborative contexts.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/avatar-group/avatar-group.tsx",
      "content": "import * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@vllnt/ui\";\n\nconst avatarGroupVariants = cva(\"flex items-center\", {\n  defaultVariants: {\n    size: \"md\",\n  },\n  variants: {\n    size: {\n      lg: \"-space-x-4\",\n      md: \"-space-x-3\",\n      sm: \"-space-x-2.5\",\n    },\n  },\n});\n\nconst avatarItemVariants = cva(\n  \"ring-2 ring-background border border-border bg-muted text-muted-foreground\",\n  {\n    defaultVariants: {\n      size: \"md\",\n    },\n    variants: {\n      size: {\n        lg: \"size-12 text-sm\",\n        md: \"size-10 text-xs\",\n        sm: \"size-8 text-[11px]\",\n      },\n    },\n  },\n);\n\nconst overflowBadgeVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-muted font-medium text-muted-foreground ring-2 ring-background\",\n  {\n    defaultVariants: {\n      size: \"md\",\n    },\n    variants: {\n      size: {\n        lg: \"h-12 min-w-12 px-3 text-sm\",\n        md: \"h-10 min-w-10 px-2.5 text-xs\",\n        sm: \"h-8 min-w-8 px-2 text-[11px]\",\n      },\n    },\n  },\n);\n\nexport type AvatarGroupItem = {\n  alt: string;\n  fallback: string;\n  src?: string;\n};\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof avatarGroupVariants> & {\n    items: AvatarGroupItem[];\n    max?: number;\n    overflowLabel?: (hiddenCount: number) => string;\n  };\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, items, max, overflowLabel, size, ...props }, reference) => {\n    const visibleItems = max === undefined ? items : items.slice(0, max);\n    const hiddenCount = max === undefined ? 0 : Math.max(items.length - max, 0);\n\n    return (\n      <div\n        className={cn(avatarGroupVariants({ size }), className)}\n        ref={reference}\n        {...props}\n      >\n        {visibleItems.map((item, index) => (\n          <Avatar\n            className={avatarItemVariants({ size })}\n            key={item.src ?? item.alt}\n            style={{ zIndex: visibleItems.length - index }}\n          >\n            {item.src ? <AvatarImage alt={item.alt} src={item.src} /> : null}\n            <AvatarFallback>{item.fallback}</AvatarFallback>\n          </Avatar>\n        ))}\n        {hiddenCount > 0 ? (\n          <span className={overflowBadgeVariants({ size })}>\n            {overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}`}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nAvatarGroup.displayName = \"AvatarGroup\";\n\nexport { AvatarGroup, avatarGroupVariants, avatarItemVariants };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}