{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "Avatar on radix-ui with 5 sizes (xs-xl) and 2 shapes (circle, rounded), plus AvatarGroup for overlapping stacks with an optional max that collapses the rest into a +N tile. Exports Avatar, AvatarImage, AvatarFallback, AvatarGroup.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "radix-ui@^1.6.1"
  ],
  "registryDependencies": [
    "@ai2/tokens",
    "@ai2/primitives"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/avatar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@/registry/ai2/ui/primitives\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst avatarVariants = cva(\n  \"relative flex shrink-0 overflow-hidden bg-surface-3\",\n  {\n    variants: {\n      size: {\n        xs: \"size-6 text-[0.6rem]\",\n        sm: \"size-8 text-xs\",\n        md: \"size-10 text-sm\",\n        lg: \"size-12 text-base\",\n        xl: \"size-16 text-lg\",\n      },\n      shape: {\n        circle: \"rounded-full\",\n        rounded: \"rounded-lg\",\n      },\n    },\n    defaultVariants: { size: \"md\", shape: \"circle\" },\n  }\n)\n\ninterface AvatarProps\n  extends React.ComponentProps<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\nfunction Avatar({ className, size, shape, ...props }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(avatarVariants({ size, shape, className }))}\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 font-medium text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface AvatarGroupProps extends React.ComponentProps<\"div\"> {\n  /** Cap the number of avatars shown; the rest collapse into a +N tile. */\n  max?: number\n}\n\nfunction AvatarGroup({ className, max, children, ...props }: AvatarGroupProps) {\n  const items = React.Children.toArray(children)\n  const visible = max != null ? items.slice(0, max) : items\n  const overflow = max != null ? Math.max(items.length - max, 0) : 0\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"flex -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background\",\n        className\n      )}\n      {...props}\n    >\n      {visible}\n      {overflow > 0 && (\n        <span\n          data-slot=\"avatar-group-overflow\"\n          className=\"relative flex size-10 shrink-0 items-center justify-center rounded-full bg-surface-3 text-sm font-medium text-muted-foreground ring-2 ring-background\"\n        >\n          +{overflow}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  avatarVariants,\n  type AvatarProps,\n  type AvatarGroupProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "docs": "AvatarFallback renders while the image loads or if it fails. Fallback text is sized automatically per avatar size.",
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}