{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "title": "Avatar",
  "description": "The iChat buddy icon: photo, initials over a gel color, or the classic generic silhouette.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/aqua/ui/avatar.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst AVATAR_COLORS = [\n  \"#2f7de0\",\n  \"#58b52f\",\n  \"#e0742f\",\n  \"#e02f6b\",\n  \"#8a56c9\",\n  \"#1fa8a0\",\n  \"#7d8694\",\n]\n\nfunction seededColor(seed: string) {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AVATAR_COLORS[hash % AVATAR_COLORS.length]\n}\n\nfunction gelBackground(color: string) {\n  return `linear-gradient(180deg, color-mix(in oklab, ${color} 38%, white) 0%, color-mix(in oklab, ${color} 90%, white) 50%, color-mix(in oklab, ${color} 85%, black) 51%, color-mix(in oklab, ${color} 62%, white) 100%)`\n}\n\nconst avatarVariants = cva(\n  \"relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden border border-[#7d828c] bg-[linear-gradient(180deg,var(--aqua-gel-hi,#a8d0f7)_0%,var(--aqua-gel-mid,#4a90ec)_50%,var(--aqua-gel-deep,#2a6fd0)_51%,var(--aqua-gel-light,#6aabf3)_100%)] font-bold uppercase text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.5),0_1px_2px_rgba(20,30,50,0.25)] [text-shadow:0_-1px_1px_rgba(10,30,70,0.4)] before:pointer-events-none before:absolute before:inset-x-[2px] before:top-[1px] before:z-10 before:h-[45%] before:rounded-t-[inherit] before:bg-[linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0.08))]\",\n  {\n    variants: {\n      size: {\n        sm: \"size-7 text-[10px]\",\n        default: \"size-10 text-[13px]\",\n        lg: \"size-16 text-lg\",\n      },\n      shape: {\n        square: \"\",\n        circle: \"rounded-full\",\n      },\n    },\n    compoundVariants: [\n      { size: \"sm\", shape: \"square\", class: \"rounded-[5px]\" },\n      { size: \"default\", shape: \"square\", class: \"rounded-[7px]\" },\n      { size: \"lg\", shape: \"square\", class: \"rounded-[10px]\" },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      shape: \"square\",\n    },\n  }\n)\n\nfunction AvatarSilhouette() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n      className=\"absolute -bottom-[8%] left-1/2 h-[88%] w-auto -translate-x-1/2 text-white/90 drop-shadow-[0_1px_1px_rgba(10,30,70,0.35)]\"\n      fill=\"currentColor\"\n    >\n      <circle cx=\"12\" cy=\"8\" r=\"4.6\" />\n      <path d=\"M12 14.2c-4.8 0-8.4 2.8-8.4 7v2.8h16.8v-2.8c0-4.2-3.6-7-8.4-7Z\" />\n    </svg>\n  )\n}\n\nexport type AvatarProps = React.ComponentProps<\"span\"> &\n  VariantProps<typeof avatarVariants> & {\n    src?: string\n    alt?: string\n    initials?: string\n    color?: string\n    randomColor?: boolean\n  }\n\nfunction Avatar({\n  className,\n  size,\n  shape,\n  src,\n  alt,\n  initials,\n  color,\n  randomColor,\n  ...props\n}: AvatarProps) {\n  const resolvedColor =\n    color ?? (randomColor ? seededColor(initials ?? alt ?? \"aqua\") : undefined)\n\n  return (\n    <span\n      data-slot=\"avatar\"\n      role={src ? undefined : \"img\"}\n      aria-label={src ? undefined : alt ?? initials ?? \"avatar\"}\n      className={cn(avatarVariants({ size, shape }), className)}\n      style={resolvedColor ? { background: gelBackground(resolvedColor) } : undefined}\n      {...props}\n    >\n      {src ? (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          src={src}\n          alt={alt ?? \"\"}\n          className=\"absolute inset-0 z-0 size-full object-cover\"\n        />\n      ) : initials ? (\n        <span className=\"relative\">{initials.slice(0, 2)}</span>\n      ) : (\n        <AvatarSilhouette />\n      )}\n    </span>\n  )\n}\n\nexport { Avatar, avatarVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}