{
  "name": "avatar",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "avatar.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport { forwardRef, useState, type HTMLAttributes } from \"react\";\r\n\r\ntype AvatarStatus = \"loading\" | \"loaded\" | \"error\";\r\n\r\nconst rootClass = css({\r\n  position: \"relative\",\r\n  display: \"inline-flex\",\r\n  alignItems: \"center\",\r\n  justifyContent: \"center\",\r\n  overflow: \"hidden\",\r\n  borderRadius: theme.radius.full,\r\n  backgroundColor: theme.color.muted,\r\n  color: theme.color.mutedForeground,\r\n  fontFamily: theme.fontFamily.sans,\r\n  fontWeight: theme.fontWeight.medium,\r\n  userSelect: \"none\",\r\n  flexShrink: 0,\r\n});\r\n\r\nconst imgClass = css({\r\n  width: \"100%\",\r\n  height: \"100%\",\r\n  objectFit: \"cover\",\r\n});\r\n\r\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\r\n  src?: string;\r\n  alt?: string;\r\n  fallback?: string;\r\n  size?: number;\r\n}\r\n\r\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\r\n  { src, alt = \"\", fallback, size = 40, className, style, ...props },\r\n  ref,\r\n) {\r\n  const [status, setStatus] = useState<AvatarStatus>(src ? \"loading\" : \"error\");\r\n\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={className ? `${rootClass} ${className}` : rootClass}\r\n      style={{ width: size, height: size, fontSize: size * 0.4, ...style }}\r\n      {...props}\r\n    >\r\n      {src && status !== \"error\" ? (\r\n        <img\r\n          src={src}\r\n          alt={alt}\r\n          className={imgClass}\r\n          onLoad={() => setStatus(\"loaded\")}\r\n          onError={() => setStatus(\"error\")}\r\n          style={{ display: status === \"loaded\" ? \"block\" : \"none\" }}\r\n        />\r\n      ) : null}\r\n      {status !== \"loaded\" ? (\r\n        <span aria-hidden={Boolean(alt)}>{fallback ?? alt.slice(0, 2).toUpperCase()}</span>\r\n      ) : null}\r\n    </span>\r\n  );\r\n});\r\n",
      "type": "registry:component"
    }
  ]
}