{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "avatar",
  "title": "avatar",
  "description": "avatar",
  "dependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "src/components/ui/avatar.tsx",
      "content": "import { cn } from \"cn\"\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={cn(\n        \"inline-grid size-(--avatar-size) shrink-0 align-middle outline-1 outline-foreground/(--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"
}