{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-avatar-glass",
  "type": "registry:component",
  "title": "Profile Avatar Glass",
  "description": "Profile-specific size classes (larger than standard AvatarGlass)",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn",
    "use-hover",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/specialized/profile-avatar-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// PROFILE AVATAR GLASS - SPECIALIZED COMPONENT\n// Large profile avatar wrapper with custom sizing\n// Level 4: Specialized (wrapper over AvatarGlass)\n// ========================================\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { type AvatarStatus } from '@/components/glass/ui/avatar-glass';\nimport { statusSizes } from '@/lib/variants/avatar-glass-variants';\nimport { cn } from '@/lib/utils';\nimport { useHover } from '@/lib/hooks/use-hover';\n\nexport type ProfileAvatarSize = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface ProfileAvatarGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** User initials to display */\n  readonly initials: string;\n  /** Size variant (profile-specific sizing - larger than AvatarGlass) */\n  readonly size?: ProfileAvatarSize;\n  /** Optional status indicator */\n  readonly status?: AvatarStatus;\n  /** Enable pulsing glow animation */\n  readonly glowing?: boolean;\n}\n\n/**\n * Profile-specific size classes (larger than standard AvatarGlass)\n */\nconst profileSizeClasses: Record<ProfileAvatarSize, string> = {\n  sm: 'w-9 h-9 md:w-10 md:h-10 text-xs md:text-sm',\n  md: 'w-12 h-12 md:w-14 md:h-14 text-base md:text-lg',\n  lg: 'w-14 h-14 md:w-16 md:h-16 text-lg md:text-xl',\n  xl: 'w-18 h-18 md:w-20 md:h-20 text-xl md:text-2xl',\n};\n\n/**\n * Get CSS variables for status indicator colors\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 * ProfileAvatarGlass - Large profile avatar with bold styling\n *\n * Built on top of the same CSS variables as AvatarGlass but with\n * profile-specific sizing and bold font weight.\n *\n * @example\n * ```tsx\n * <ProfileAvatarGlass initials=\"JD\" size=\"lg\" glowing />\n * <ProfileAvatarGlass initials=\"AS\" status=\"online\" />\n * ```\n */\nexport const ProfileAvatarGlass = forwardRef<HTMLDivElement, ProfileAvatarGlassProps>(\n  ({ initials, size = 'lg', status, glowing = true, className, ...props }, ref) => {\n    const { isHovered, hoverProps } = useHover();\n\n    const avatarStyles: 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      <div\n        ref={ref}\n        className={cn('relative inline-flex', className)}\n        onMouseEnter={hoverProps.onMouseEnter}\n        onMouseLeave={hoverProps.onMouseLeave}\n        {...props}\n      >\n        {/* Avatar circle */}\n        <div\n          className={cn(\n            'rounded-full flex items-center justify-center font-bold transition-all duration-300',\n            profileSizeClasses[size],\n            glowing && 'animate-[glow-pulse_2s_ease-in-out_infinite]'\n          )}\n          style={avatarStyles}\n          role=\"img\"\n          aria-label={`Profile avatar with initials ${initials}`}\n        >\n          {initials}\n        </div>\n\n        {/* Status indicator */}\n        {status && (\n          <span\n            className={cn(statusSizes({ size }), 'absolute -bottom-0.5 -right-0.5')}\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    );\n  }\n);\n\nProfileAvatarGlass.displayName = 'ProfileAvatarGlass';\n"
    }
  ],
  "categories": [
    "specialized"
  ]
}