{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "User image with a text fallback, built on Base UI Avatar.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/avatar/avatar.tsx",
      "content": "'use client'\n\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'\nimport type * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nfunction Avatar({\n\tclassName,\n\tsize = 'default',\n\t...props\n}: AvatarPrimitive.Root.Props & {\n\tsize?: 'default' | 'sm' | 'lg'\n}) {\n\treturn (\n\t\t<AvatarPrimitive.Root\n\t\t\tdata-slot=\"avatar\"\n\t\t\tdata-size={size}\n\t\t\t// The outline only frames photos; the initials fallback draws its own border\n\t\t\tclassName={cn(\n\t\t\t\t'group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6 has-data-[slot=avatar-image]:after:pointer-events-none has-data-[slot=avatar-image]:after:absolute has-data-[slot=avatar-image]:after:inset-0 has-data-[slot=avatar-image]:after:rounded-full has-data-[slot=avatar-image]:after:border has-data-[slot=avatar-image]:after:border-border has-data-[slot=avatar-image]:after:mix-blend-darken dark:has-data-[slot=avatar-image]:after:mix-blend-lighten',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n\treturn (\n\t\t<AvatarPrimitive.Image\n\t\t\tdata-slot=\"avatar-image\"\n\t\t\tclassName={cn('aspect-square size-full rounded-full object-cover', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {\n\treturn (\n\t\t<AvatarPrimitive.Fallback\n\t\t\tdata-slot=\"avatar-fallback\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex size-full items-center justify-center rounded-full border border-primary bg-secondary text-sm text-primary group-data-[size=sm]/avatar:text-xs',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"avatar-badge\"\n\t\t\tclassName={cn(\n\t\t\t\t'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',\n\t\t\t\t'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n\t\t\t\t'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n\t\t\t\t'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"avatar-group\"\n\t\t\tclassName={cn(\n\t\t\t\t'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"avatar-group-count\"\n\t\t\tclassName={cn(\n\t\t\t\t'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge }\n",
      "type": "registry:ui",
      "target": "components/ui/avatar.tsx"
    }
  ],
  "type": "registry:ui"
}