{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "avatar",
  "title": "avatar",
  "description": "avatar",
  "dependencies": [
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "src/components/ui/avatar.tsx",
      "content": "import { twMerge } from 'tailwind-merge'\n\nexport interface AvatarProps {\n  src?: string | null\n  initials?: string\n  alt?: string\n  className?: string\n  isSquare?: boolean\n  size?:\n    | 'xs'\n    | 'sm'\n    | 'md'\n    | 'lg'\n    | 'xl'\n    | '2xl'\n    | '3xl'\n    | '4xl'\n    | '5xl'\n    | '6xl'\n    | '7xl'\n    | '8xl'\n    | '9xl'\n}\n\nexport function Avatar({\n  src = null,\n  isSquare = false,\n  size = 'md',\n  initials,\n  alt = '',\n  className,\n  ...props\n}: AvatarProps & React.ComponentPropsWithoutRef<'span'>) {\n  return (\n    <span\n      data-slot=\"avatar\"\n      {...props}\n      className={twMerge(\n        'inline-grid size-(--avatar-size) shrink-0 align-middle outline-1 outline-fg/(--ring-opacity) -outline-offset-1 [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1 *:size-(--avatar-size)',\n        size === 'xs' && '[--avatar-size:--spacing(5)]',\n        size === 'sm' && '[--avatar-size:--spacing(6)]',\n        size === 'md' && '[--avatar-size:--spacing(8)]',\n        size === 'lg' && '[--avatar-size:--spacing(10)]',\n        size === 'xl' && '[--avatar-size:--spacing(12)]',\n        size === '2xl' && '[--avatar-size:--spacing(14)]',\n        size === '3xl' && '[--avatar-size:--spacing(16)]',\n        size === '4xl' && '[--avatar-size:--spacing(20)]',\n        size === '5xl' && '[--avatar-size:--spacing(24)]',\n        size === '6xl' && '[--avatar-size:--spacing(28)]',\n        size === '7xl' && '[--avatar-size:--spacing(32)]',\n        size === '8xl' && '[--avatar-size:--spacing(36)]',\n        size === '9xl' && '[--avatar-size:--spacing(42)]',\n        isSquare\n          ? 'rounded-(--avatar-radius) *:rounded-(--avatar-radius)'\n          : 'rounded-full *:rounded-full',\n        className\n      )}\n    >\n      {initials && (\n        <svg\n          className=\"size-full select-none fill-current p-[5%] font-md text-[48px] uppercase\"\n          viewBox=\"0 0 100 100\"\n          aria-hidden={alt ? undefined : 'true'}\n        >\n          {alt && <title>{alt}</title>}\n          <text\n            x=\"50%\"\n            y=\"50%\"\n            alignmentBaseline=\"middle\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n            dy=\".125em\"\n          >\n            {initials}\n          </text>\n        </svg>\n      )}\n      {src && <img className=\"size-full object-cover object-center\" src={src} alt={alt} />}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}