{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "noyzi-avatar",
  "title": "Noyzi Avatar",
  "description": "Avatar that shows a seed-based gradient while the photo loads, or when there is none.",
  "dependencies": [
    "@noyzi/react"
  ],
  "files": [
    {
      "path": "src/registry/noyzi-avatar.tsx",
      "content": "\"use client\";\n\nimport { NoyziGradient } from \"@noyzi/react\";\nimport { type ComponentProps, type ReactNode, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NoyziAvatarProps\n\textends Omit<ComponentProps<\"span\">, \"children\"> {\n\tseed: string;\n\tsrc?: string | null;\n\talt?: string;\n\tfallback?: ReactNode;\n}\n\nexport function NoyziAvatar({\n\tseed,\n\tsrc,\n\talt = \"\",\n\tfallback,\n\tclassName,\n\t...props\n}: NoyziAvatarProps) {\n\tconst [loaded, setLoaded] = useState<string | null>(null);\n\tconst [failed, setFailed] = useState<string | null>(null);\n\tconst hasImage = Boolean(src) && failed !== src;\n\tconst showsImage = hasImage && loaded === src;\n\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"noyzi-avatar\"\n\t\t\trole={alt ? \"img\" : undefined}\n\t\t\taria-label={alt || undefined}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<NoyziGradient\n\t\t\t\tseed={seed}\n\t\t\t\trole=\"presentation\"\n\t\t\t\taria-hidden\n\t\t\t\tclassName=\"absolute inset-0 size-full shadow-none\"\n\t\t\t/>\n\t\t\t{fallback && !showsImage ? (\n\t\t\t\t<span className=\"relative m-auto font-medium text-white text-xs [text-shadow:0_1px_2px_rgb(0_0_0/0.35)]\">\n\t\t\t\t\t{fallback}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t{hasImage && src ? (\n\t\t\t\t<img\n\t\t\t\t\tkey={src}\n\t\t\t\t\tsrc={src}\n\t\t\t\t\talt=\"\"\n\t\t\t\t\tref={(image) => {\n\t\t\t\t\t\tif (image?.complete && image.naturalWidth > 0) setLoaded(src);\n\t\t\t\t\t}}\n\t\t\t\t\tonLoad={() => setLoaded(src)}\n\t\t\t\t\tonError={() => setFailed(src)}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute inset-0 size-full object-cover transition-opacity duration-300\",\n\t\t\t\t\t\tshowsImage ? \"opacity-100\" : \"opacity-0\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</span>\n\t);\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Use the user's id or email as the seed: <NoyziAvatar seed={user.email} src={user.image} alt={user.name} />",
  "type": "registry:component"
}