{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "type": "registry:ui",
  "title": "Avatar",
  "description": "Rounded-square (or circle) picture with an initials fallback; neutral or accent tone.",
  "dependencies": [
    "radix-ui",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/components/avatar.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps } from \"react\";\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A rounded square by default (6 px corner), the shape of the account row\n * and of the object mark next to a page title; `shape=\"circle\"` for people\n * in dense lists. `tone=\"accent\"` paints the initials white on Wibo indigo:\n * the mark of a tenant, a workspace or an agent.\n */\nconst avatarVariants = cva(\"group/avatar relative flex shrink-0 overflow-hidden\", {\n  variants: {\n    size: {\n      sm: \"size-6 text-[10px]\",\n      md: \"size-8 text-xs\",\n      lg: \"size-10 text-sm\",\n    },\n    shape: {\n      square: \"rounded-md\",\n      circle: \"rounded-full\",\n    },\n  },\n  defaultVariants: { size: \"md\", shape: \"square\" },\n});\n\ntype AvatarTone = \"neutral\" | \"accent\";\n\n/** User, tenant or object picture with an initials fallback. */\nfunction Avatar({\n  className,\n  size,\n  shape,\n  tone = \"neutral\",\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants> & { tone?: AvatarTone }) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-tone={tone}\n      className={cn(avatarVariants({ size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Always pass a meaningful `alt` (the person's name), or `alt=\"\"` when the name is shown next to it. */\nfunction AvatarImage({ className, ...props }: 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({ className, ...props }: 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 rounded-[inherit] bg-foreground/8 font-semibold text-foreground/80 uppercase\",\n        \"group-data-[tone=accent]/avatar:bg-accent group-data-[tone=accent]/avatar:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Up to two initials from a display name: \"Ada Lovelace\" becomes \"AL\". */\nfunction initials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  const first = parts[0]?.[0] ?? \"\";\n  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? \"\") : \"\";\n  return (first + last).toUpperCase();\n}\n\nexport { Avatar, AvatarFallback, AvatarImage, initials };\nexport type { AvatarTone };\n"
    }
  ]
}