{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar",
  "type": "registry:ui",
  "title": "Avatar",
  "description": "Avatar with image fallback and status indicators.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/starkui/avatar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst sizes = {\n  sm: \"h-8 w-8 text-xs\",\n  md: \"h-10 w-10 text-sm\",\n  lg: \"h-12 w-12 text-base\",\n  xl: \"h-16 w-16 text-lg font-semibold\",\n} as const;\n\nconst statusColors = {\n  online: \"bg-emerald-500\",\n  offline: \"bg-muted-foreground/50\",\n  busy: \"bg-amber-500\",\n} as const;\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  fallback?: string;\n  size?: keyof typeof sizes;\n  status?: keyof typeof statusColors;\n}\n\nexport function Avatar({\n  src,\n  alt = \"\",\n  fallback,\n  size = \"md\",\n  status,\n  className,\n  ...props\n}: AvatarProps) {\n  const [imageError, setImageError] = React.useState(false);\n\n  return (\n    <div className=\"relative inline-block select-none\">\n      <div\n        className={cn(\n          \"relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/60 bg-muted/80 font-medium text-muted-foreground shadow-xs transition-transform hover:scale-105\",\n          sizes[size],\n          className\n        )}\n        {...props}\n      >\n        {src && !imageError ? (\n          <img\n            src={src}\n            alt={alt}\n            onError={() => setImageError(true)}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <span>{fallback ?? (alt.slice(0, 2).toUpperCase() || \"??\")}</span>\n        )}\n      </div>\n\n      {status && (\n        <span\n          className={cn(\n            \"absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full ring-2 ring-background\",\n            statusColors[status],\n            size === \"xl\" && \"h-3.5 w-3.5 ring-3\",\n            size === \"lg\" && \"h-3 w-3\"\n          )}\n        />\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/avatar.tsx"
    }
  ]
}