{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-circles",
  "title": "Avatar Circles",
  "description": "Stacked initials avatars with a +N badge — zero images.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/avatar-circles.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface AvatarCirclesProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Names rendered as initials */\n  people: string[];\n  /** \"+N\" badge count */\n  extra?: number;\n}\n\nconst tones = [\n  \"bg-blue-600\",\n  \"bg-slate-600\",\n  \"bg-sky-700\",\n  \"bg-indigo-600\",\n  \"bg-slate-700\",\n  \"bg-blue-800\",\n];\n\nexport function AvatarCircles({\n  people,\n  extra,\n  className,\n  ...props\n}: AvatarCirclesProps) {\n  return (\n    <div\n      data-slot=\"avatar-circles\"\n      className={cn(\"flex -space-x-3\", className)}\n      {...props}\n    >\n      {people.map((name, i) => {\n        const initials = name\n          .split(\" \")\n          .map((w) => w[0])\n          .slice(0, 2)\n          .join(\"\");\n        return (\n          <span\n            key={name}\n            title={name}\n            className={cn(\n              \"relative flex size-10 items-center justify-center rounded-full text-xs font-semibold text-white ring-2 ring-background\",\n              tones[i % tones.length]\n            )}\n          >\n            <span aria-hidden>{initials}</span>\n            <span className=\"sr-only\">{name}</span>\n          </span>\n        );\n      })}\n      {extra ? (\n        <span className=\"relative flex size-10 items-center justify-center rounded-full bg-muted text-xs font-semibold ring-2 ring-background\">\n          <span aria-hidden>\n            +{extra >= 1000 ? `${Math.floor(extra / 1000)}k` : extra}\n          </span>\n          <span className=\"sr-only\">\n            and {extra.toLocaleString(\"en-US\")} more\n          </span>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/avatar-circles.tsx"
    }
  ],
  "type": "registry:ui"
}