{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "type": "registry:item",
  "title": "Avatar",
  "description": "An image element with a fallback for representing the user.",
  "files": [
    {
      "path": "registry/brook/ui/avatar/avatar.tsx",
      "content": "\"use client\";\n\nimport { Avatar } from \"@base-ui/react/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./avatar.module.css\";\n\nfunction AvatarRoot({ className, ...props }: Avatar.Root.Props) {\n  return <Avatar.Root className={cn(styles.root, className)} data-slot=\"avatar-root\" {...props} />;\n}\n\nfunction AvatarImage({ className, ...props }: Avatar.Image.Props) {\n  return <Avatar.Image className={cn(styles.image, className)} data-slot=\"avatar-image\" {...props} />;\n}\n\nfunction AvatarFallback({ className, ...props }: Avatar.Fallback.Props) {\n  return <Avatar.Fallback className={cn(styles.fallback, className)} data-slot=\"avatar-fallback\" {...props} />;\n}\n\nexport { AvatarRoot as Avatar, AvatarFallback, AvatarImage };\n",
      "type": "registry:file",
      "target": "~/components/ui/avatar/avatar.tsx"
    },
    {
      "path": "registry/brook/ui/avatar/avatar.module.css",
      "content": ".root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  overflow: hidden;\n  user-select: none;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 50%;\n  background-color: var(--muted);\n}\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n}\n\n.fallback {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--muted);\n  color: var(--muted-foreground);\n  font-size: 0.875rem;\n  font-weight: 500;\n  text-transform: uppercase;\n  border-radius: inherit;\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/avatar/avatar.module.css"
    }
  ]
}