{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-stack",
  "title": "Avatar Stack",
  "description": "Overlapping faces with a count for the rest, and the names underneath.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/avatar-stack/avatar-stack.tsx",
      "content": "\"use client\"\n\n/* eslint-disable @next/next/no-img-element -- This must work outside Next.js. */\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type Person = {\n  id?: string\n  name: string\n  src?: string\n}\n\nexport type AvatarStackProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> & {\n  people: readonly Person[]\n  /** How many faces to show before the rest become a count. */\n  max?: number\n  size?: number\n  /** Fans the stack out under the pointer. */\n  spread?: boolean\n  label?: string\n}\n\nfunction initials(name: string) {\n  return name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((part) => part[0] ?? \"\")\n    .join(\"\")\n    .toUpperCase()\n}\n\n/**\n * Overlapping faces with a count for the rest. The names are a real list\n * underneath, so the group is readable rather than being a row of pictures\n * with nothing behind them.\n */\nexport function AvatarStack({\n  people,\n  max = 4,\n  size = 32,\n  spread = true,\n  label = \"People\",\n  className,\n  ...rootProps\n}: AvatarStackProps) {\n  const shown = people.slice(0, max)\n  const rest = people.length - shown.length\n\n  return (\n    <div\n      data-slot=\"avatar-stack\"\n      className={cn(\"group flex items-center\", className)}\n      {...rootProps}\n    >\n      <ul aria-label={label} className=\"flex items-center\">\n        {shown.map((person, index) => (\n          <li\n            key={person.id ?? person.name}\n            className={cn(\n              \"ring-background relative rounded-full ring-2 transition-[margin] duration-200 ease-out motion-reduce:transition-none\",\n              index > 0 && \"-ml-2.5\",\n              spread && index > 0 && \"group-hover:ml-0.5\"\n            )}\n            style={{ zIndex: shown.length - index }}\n          >\n            {person.src ? (\n              <img\n                src={person.src}\n                alt={person.name}\n                width={size}\n                height={size}\n                className=\"block rounded-full object-cover\"\n                style={{ width: size, height: size }}\n              />\n            ) : (\n              <span\n                className=\"bg-muted text-foreground flex items-center justify-center rounded-full font-semibold\"\n                style={{ width: size, height: size, fontSize: size * 0.36 }}\n              >\n                <span aria-hidden=\"true\">{initials(person.name)}</span>\n                <span className=\"sr-only\">{person.name}</span>\n              </span>\n            )}\n          </li>\n        ))}\n      </ul>\n\n      {rest > 0 && (\n        <span\n          data-slot=\"avatar-stack-rest\"\n          className=\"bg-foreground text-background ring-background relative -ml-2.5 flex items-center justify-center rounded-full font-semibold ring-2 transition-[margin] duration-200 ease-out group-hover:ml-0.5 motion-reduce:transition-none\"\n          style={{ width: size, height: size, fontSize: size * 0.34 }}\n        >\n          <span aria-hidden=\"true\">+{rest}</span>\n          <span className=\"sr-only\">and {rest} more</span>\n        </span>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "people",
    "avatar",
    "layout"
  ],
  "type": "registry:ui"
}