{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-group",
  "title": "Avatar Group",
  "description": "The nx-ui Avatar Group block.",
  "registryDependencies": [
    "@nx-ui/avatar",
    "@nx-ui/tooltip"
  ],
  "files": [
    {
      "path": "components/blocks/avatar-group.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup as AvatarGroupPrimitive,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\n/**\n * AvatarGroup — an overlapping stack of avatars with a trailing `+N` count and\n * a name-on-hover tooltip, the Untitled UI \"who's on this\" pattern. Data-driven:\n * pass an `avatars` array and an optional `max`; anything past `max` folds into\n * the count chip.\n *\n * Composes the `avatar` primitive (which already ships the stacked\n * `AvatarGroup` / `AvatarGroupCount` layout) plus `tooltip`. Each avatar punches\n * out of its neighbour with a `ring-2 ring-background` (handled by the primitive).\n *\n * @example\n * <AvatarGroup\n *   size=\"lg\"\n *   max={4}\n *   avatars={[{ name: \"Ada Okonkwo\", src: \"/…\" }, …]}\n * />\n */\n\ntype AvatarSize = \"sm\" | \"default\" | \"lg\"\n\ninterface AvatarGroupItem {\n  name: string\n  src?: string\n  /** Two-letter fallback; derived from `name` when omitted. */\n  initials?: string\n}\n\nfunction initialsOf(name: string): string {\n  return name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((part) => part.charAt(0).toUpperCase())\n    .join(\"\")\n}\n\nfunction AvatarGroup({\n  avatars,\n  max,\n  size = \"default\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  avatars: AvatarGroupItem[]\n  /** Maximum avatars to show before collapsing the rest into a `+N` chip. */\n  max?: number\n  size?: AvatarSize\n}) {\n  const limit = max ?? avatars.length\n  const shown = avatars.slice(0, limit)\n  const overflow = avatars.length - shown.length\n\n  return (\n    <TooltipProvider delay={0}>\n      <AvatarGroupPrimitive className={className} {...props}>\n        {shown.map((avatar, i) => (\n          <Tooltip key={`${avatar.name}-${i}`}>\n            <TooltipTrigger\n              render={\n                <Avatar size={size}>\n                  {avatar.src ? (\n                    <AvatarImage src={avatar.src} alt={avatar.name} />\n                  ) : null}\n                  <AvatarFallback>\n                    {avatar.initials ?? initialsOf(avatar.name)}\n                  </AvatarFallback>\n                </Avatar>\n              }\n            />\n            <TooltipContent>{avatar.name}</TooltipContent>\n          </Tooltip>\n        ))}\n\n        {overflow > 0 ? <AvatarGroupCount>+{overflow}</AvatarGroupCount> : null}\n      </AvatarGroupPrimitive>\n    </TooltipProvider>\n  )\n}\n\nexport { AvatarGroup }\nexport type { AvatarGroupItem }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}