{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"avatar","type":"registry:ui","title":"Avatar","description":"Avatar from react-fancy","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/avatar\/Avatar.tsx","content":"import { forwardRef, type CSSProperties } from \"react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport type { AvatarProps } from \".\/Avatar.types\";\r\n\r\nconst glowColors = {\r\n  on: \"#a855f7\", \/\/ violet \u2014 neutral\r\n  xp: \"#22c55e\", \/\/ green\r\n  achievement: \"#f59e0b\", \/\/ amber\r\n} as const;\r\n\r\ntype AvatarSize = NonNullable<AvatarProps[\"size\"]>;\r\ntype AvatarStatus = NonNullable<AvatarProps[\"status\"]>;\r\n\r\nconst containerSizeClasses: Record<AvatarSize, string> = {\r\n  xs: \"h-6 w-6\",\r\n  sm: \"h-8 w-8\",\r\n  md: \"h-10 w-10\",\r\n  lg: \"h-12 w-12\",\r\n  xl: \"h-16 w-16\",\r\n};\r\n\r\nconst fallbackTextSize: Record<AvatarSize, string> = {\r\n  xs: \"text-xs\",\r\n  sm: \"text-xs\",\r\n  md: \"text-sm\",\r\n  lg: \"text-base\",\r\n  xl: \"text-lg\",\r\n};\r\n\r\nconst statusSizeClasses: Record<AvatarSize, string> = {\r\n  xs: \"h-1.5 w-1.5\",\r\n  sm: \"h-2 w-2\",\r\n  md: \"h-2.5 w-2.5\",\r\n  lg: \"h-3 w-3\",\r\n  xl: \"h-4 w-4\",\r\n};\r\n\r\nconst statusColorClasses: Record<AvatarStatus, string> = {\r\n  online: \"bg-green-500\",\r\n  offline: \"bg-zinc-400\",\r\n  busy: \"bg-red-500\",\r\n  away: \"bg-amber-500\",\r\n};\r\n\r\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(\r\n  (\r\n    {\r\n      src,\r\n      alt = \"\",\r\n      fallback,\r\n      size = \"md\",\r\n      status,\r\n      glow,\r\n      className,\r\n    },\r\n    ref,\r\n  ) => {\r\n    const glowKey = glow === true ? \"on\" : glow || null;\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        data-react-fancy-avatar=\"\"\r\n        className={cn(\r\n          \"relative inline-flex items-center justify-center rounded-full\",\r\n          containerSizeClasses[size],\r\n          !src && \"bg-zinc-200 dark:bg-zinc-700\",\r\n          className,\r\n        )}\r\n      >\r\n        {glowKey && (\r\n          <span\r\n            aria-hidden\r\n            data-react-fancy-avatar-glow={glowKey}\r\n            className=\"fancy-avatar-glow\"\r\n            style={{ \"--fancy-glow\": glowColors[glowKey] } as CSSProperties}\r\n          \/>\r\n        )}\r\n        {src ? (\r\n          <img\r\n            src={src}\r\n            alt={alt}\r\n            className=\"h-full w-full rounded-full object-cover\"\r\n          \/>\r\n        ) : (\r\n          <span\r\n            className={cn(\r\n              \"font-medium text-zinc-600 dark:text-zinc-300 select-none\",\r\n              fallbackTextSize[size],\r\n            )}\r\n          >\r\n            {fallback}\r\n          <\/span>\r\n        )}\r\n        {status && (\r\n          <span\r\n            className={cn(\r\n              \"absolute bottom-0 right-0 rounded-full ring-2 ring-white dark:ring-zinc-900\",\r\n              statusSizeClasses[size],\r\n              statusColorClasses[status],\r\n            )}\r\n          \/>\r\n        )}\r\n      <\/div>\r\n    );\r\n  },\r\n);\r\n\r\nAvatar.displayName = \"Avatar\";\r\n","type":"registry:ui","target":"components\/fancy\/avatar\/Avatar.tsx"},{"path":"components\/fancy\/avatar\/Avatar.types.ts","content":"export interface AvatarProps {\r\n  \/** Image source URL *\/\r\n  src?: string;\r\n  \/** Alt text for the image *\/\r\n  alt?: string;\r\n  \/** Fallback initials when no image is provided *\/\r\n  fallback?: string;\r\n  \/** Avatar size *\/\r\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\r\n  \/** Online status indicator *\/\r\n  status?: \"online\" | \"offline\" | \"busy\" | \"away\";\r\n  \/**\r\n   * Pulsing halo ring around the avatar. `true` = neutral (violet) glow;\r\n   * `\"xp\"` tints green, `\"achievement\"` tints amber. Pulse respects\r\n   * `prefers-reduced-motion` (the steady ring stays, the pulse drops).\r\n   *\/\r\n  glow?: boolean | \"xp\" | \"achievement\";\r\n  \/** Additional CSS classes *\/\r\n  className?: string;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/avatar\/Avatar.types.ts"},{"path":"components\/fancy\/avatar\/index.ts","content":"export { Avatar } from \".\/Avatar\";\r\nexport type { AvatarProps } from \".\/Avatar.types\";\r\n","type":"registry:ui","target":"components\/fancy\/avatar\/index.ts"}]}