{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "avatar",
  "type": "registry:ui",
  "title": "Avatar",
  "description": "A square identity chip with an initials fallback, and an overlapping group with a counted overflow.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "https://abackui.com/r/utils.json"
  ],
  "categories": [
    "Data Display"
  ],
  "docs": "https://abackui.com/docs/components/avatar",
  "meta": {
    "status": "beta",
    "usedIn": [
      "aback-launch"
    ]
  },
  "files": [
    {
      "path": "components/ui/avatar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype AvatarSize = \"xs\" | \"sm\" | \"default\" | \"lg\" | \"xl\";\n\nconst sizeClasses: Record<AvatarSize, string> = {\n  xs: \"size-6 text-[10px]\",\n  sm: \"size-8 text-xs\",\n  default: \"size-9 text-xs\",\n  lg: \"size-11 text-sm\",\n  xl: \"size-14 text-base\",\n};\n\nexport interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root> {\n  size?: AvatarSize;\n}\n\nfunction Avatar({ className, size = \"default\", ...props }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"relative inline-flex shrink-0 overflow-hidden border border-border bg-muted\",\n        sizeClasses[size],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square size-full object-cover\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center bg-muted font-medium uppercase tracking-wide text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface AvatarGroupProps extends React.ComponentProps<\"div\"> {\n  /** Avatars shown before the rest collapse into a \"+N\" count. */\n  max?: number;\n  /** Total people the group stands for, when more exist than were rendered. */\n  total?: number;\n  /** Size of the overflow count. Match it to the avatars in the group. */\n  size?: AvatarSize;\n}\n\n/**\n * Overlapping avatars for a team, reviewers, or recent participants. Extra\n * people collapse into a count with a text alternative. Name the group with\n * `aria-label` and keep each avatar's alt text, so the list is not only faces.\n */\nfunction AvatarGroup({\n  max,\n  total,\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const visible = max === undefined ? items : items.slice(0, Math.max(0, max));\n  const overflow = Math.max(0, (total ?? items.length) - visible.length);\n\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"flex items-center -space-x-2 [&>[data-slot=avatar]]:border-2 [&>[data-slot=avatar]]:border-background\",\n        className,\n      )}\n      {...props}\n    >\n      {visible}\n      {overflow > 0 ? (\n        <span\n          data-slot=\"avatar-group-overflow\"\n          className={cn(\n            \"relative inline-flex shrink-0 items-center justify-center border-2 border-background bg-secondary font-medium tabular-nums text-secondary-foreground\",\n            sizeClasses[size],\n          )}\n        >\n          <span aria-hidden=\"true\">+{overflow}</span>\n          <span className=\"sr-only\">and {overflow} more</span>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup };\n",
      "type": "registry:ui",
      "target": "components/ui/avatar.tsx"
    }
  ]
}