{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-glass",
  "type": "registry:ui",
  "title": "Avatar Glass",
  "description": "Glass-themed avatar with:",
  "dependencies": [
    "@radix-ui/react-avatar",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "use-hover",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/avatar-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * AvatarGlass Component\n *\n * Glass-themed avatar with:\n * - Theme-aware styling (glass/light/aurora)\n * - Glow effect on hover\n * - Optional glow-pulse animation\n * - Status indicator with glow\n * - Size variants\n * - Built on Radix UI primitives\n *\n * @example Compound API (recommended)\n * ```tsx\n * <AvatarGlass size=\"default\">\n *   <AvatarGlassImage src=\"/avatar.jpg\" alt=\"User\" />\n *   <AvatarGlassFallback>JD</AvatarGlassFallback>\n * </AvatarGlass>\n * ```\n *\n * @example With status indicator\n * ```tsx\n * <AvatarGlass size=\"lg\" status=\"online\">\n *   <AvatarGlassImage src=\"/avatar.jpg\" alt=\"User\" />\n *   <AvatarGlassFallback>JD</AvatarGlassFallback>\n * </AvatarGlass>\n * ```\n *\n * @example With glow animation\n * ```tsx\n * <AvatarGlass size=\"xl\" glowing>\n *   <AvatarGlassImage src=\"/avatar.jpg\" alt=\"User\" />\n *   <AvatarGlassFallback>JD</AvatarGlassFallback>\n * </AvatarGlass>\n * ```\n */\n\n'use client';\n\nimport * as React from 'react';\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { cn } from '@/lib/utils';\nimport { useHover } from '@/lib/hooks/use-hover';\nimport { avatarSizes, statusSizes } from '@/lib/variants/avatar-glass-variants';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\nexport type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';\n\n// ========================================\n// HELPERS\n// ========================================\n\nconst getStatusVars = (statusType: AvatarStatus): { bg: string; glow: string } => {\n  const statusVars: Record<AvatarStatus, { bg: string; glow: string }> = {\n    online: { bg: 'var(--status-online)', glow: 'var(--status-online-glow)' },\n    offline: { bg: 'var(--status-offline)', glow: 'none' },\n    busy: { bg: 'var(--status-busy)', glow: 'var(--status-busy-glow)' },\n    away: { bg: 'var(--status-away)', glow: 'var(--status-away-glow)' },\n  };\n  return statusVars[statusType];\n};\n\n// ========================================\n// CONTEXT\n// ========================================\n\ninterface AvatarGlassContextValue {\n  size: AvatarSize;\n  status?: AvatarStatus;\n  glowing?: boolean;\n}\n\nconst AvatarGlassContext = React.createContext<AvatarGlassContextValue>({\n  size: 'md',\n});\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\ninterface AvatarGlassRootProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {\n  size?: AvatarSize;\n  status?: AvatarStatus;\n  glowing?: boolean;\n}\n\nconst AvatarGlassRoot = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarGlassRootProps\n>(({ className, size = 'md', status, glowing = false, children, ...props }, ref) => {\n  const { isHovered, hoverProps } = useHover();\n\n  const avatarStyles: React.CSSProperties = {\n    background: 'var(--avatar-bg)',\n    border: '3px solid var(--avatar-border)',\n    boxShadow: isHovered ? 'var(--avatar-hover-glow)' : 'var(--avatar-shadow)',\n    color: 'var(--text-inverse)',\n  };\n\n  return (\n    <AvatarGlassContext.Provider value={{ size, status, glowing }}>\n      <div\n        data-slot=\"avatar\"\n        className={cn('relative inline-flex', className)}\n        onMouseEnter={hoverProps.onMouseEnter}\n        onMouseLeave={hoverProps.onMouseLeave}\n      >\n        <AvatarPrimitive.Root\n          ref={ref}\n          className={cn(\n            avatarSizes({ size }),\n            glowing && 'animate-[glow-pulse_2s_ease-in-out_infinite]'\n          )}\n          style={avatarStyles}\n          {...props}\n        >\n          {children}\n        </AvatarPrimitive.Root>\n\n        {/* Status indicator */}\n        {status && (\n          <span\n            data-slot=\"avatar-status\"\n            className={cn(statusSizes({ size }))}\n            style={{\n              background: getStatusVars(status).bg,\n              boxShadow: getStatusVars(status).glow,\n            }}\n            role=\"status\"\n            aria-label={`Status: ${status}`}\n          />\n        )}\n      </div>\n    </AvatarGlassContext.Provider>\n  );\n});\n\nAvatarGlassRoot.displayName = 'AvatarGlass';\n\n// ========================================\n// COMPOUND COMPONENT: IMAGE\n// ========================================\n\ntype AvatarGlassImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;\n\nconst AvatarGlassImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarGlassImageProps\n>(({ className, ...props }, ref) => {\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square h-full w-full object-cover', className)}\n      {...props}\n    />\n  );\n});\n\nAvatarGlassImage.displayName = 'AvatarGlassImage';\n\n// ========================================\n// COMPOUND COMPONENT: FALLBACK\n// ========================================\n\ntype AvatarGlassFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;\n\nconst AvatarGlassFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarGlassFallbackProps\n>(({ className, ...props }, ref) => {\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold uppercase',\n        className\n      )}\n      {...props}\n    />\n  );\n});\n\nAvatarGlassFallback.displayName = 'AvatarGlassFallback';\n\n// ========================================\n// HELPER FUNCTION (for simple use cases)\n// ========================================\n\nconst getInitials = (name: string): string => {\n  if (!name || name.trim().length === 0) return '?';\n  return name\n    .split(' ')\n    .map((part) => part[0])\n    .join('')\n    .toUpperCase()\n    .slice(0, 2);\n};\n\n// ========================================\n// SIMPLE WRAPPER (backward compatibility)\n// ========================================\n\ninterface AvatarGlassSimpleProps {\n  name: string;\n  size?: AvatarSize;\n  status?: AvatarStatus;\n  glowing?: boolean;\n  className?: string;\n}\n\nconst AvatarGlassSimple: React.FC<AvatarGlassSimpleProps> = ({\n  name,\n  size = 'md',\n  status,\n  glowing,\n  className,\n}) => {\n  return (\n    <AvatarGlassRoot size={size} status={status} glowing={glowing} className={className}>\n      <AvatarGlassFallback>{getInitials(name)}</AvatarGlassFallback>\n    </AvatarGlassRoot>\n  );\n};\n\n// ========================================\n// EXPORTS\n// ========================================\n\n// Compound API (shadcn/ui pattern)\nexport const AvatarGlass = AvatarGlassRoot;\nexport { AvatarGlassImage, AvatarGlassFallback };\n\n// Simple wrapper (backward compatibility)\nexport { AvatarGlassSimple };\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIASES\n// ========================================\n\n/**\n * Avatar - shadcn/ui compatible alias for AvatarGlass\n *\n * @example\n * ```tsx\n * import { Avatar, AvatarImage, AvatarFallback } from 'shadcn-glass-ui'\n *\n * <Avatar>\n *   <AvatarImage src=\"/avatar.jpg\" alt=\"User\" />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n * ```\n *\n * @since v2.6.0\n */\nexport const Avatar = AvatarGlass;\nexport const AvatarImage = AvatarGlassImage;\nexport const AvatarFallback = AvatarGlassFallback;\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}