{
  "$schema": "https://ui.adrianub.dev/schema/registry-item.json",
  "author": "Adrián UB (https://ui.adrianub.dev)",
  "name": "avatar",
  "type": "registry:ui",
  "dependencies": [
    "@radix-ng/primitives"
  ],
  "files": [
    {
      "path": "ui/avatar.ts",
      "content": "import { computed, Directive, input } from '@angular/core'\nimport { RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective } from '@radix-ng/primitives/avatar'\n\nimport { cn } from '~/lib/utils'\n\n@Directive({\n  standalone: true,\n  selector: 'span[ubAvatar]',\n  hostDirectives: [RdxAvatarRootDirective],\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbAvatarDirective {\n  readonly class = input<string>()\n\n  readonly computedClass = computed(() => {\n    return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class())\n  })\n}\n\n@Directive({\n  standalone: true,\n  selector: 'img[ubAvatarImage]',\n  hostDirectives: [\n    {\n      directive: RdxAvatarImageDirective,\n      inputs: ['src'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbAvatarImageDirective {\n  readonly class = input<string>()\n\n  readonly computedClass = computed(() => {\n    return cn('aspect-square h-full w-full', this.class())\n  })\n}\n\n@Directive({\n  standalone: true,\n  selector: 'span[ubAvatarFallback]',\n  hostDirectives: [\n    {\n      directive: RdxAvatarFallbackDirective,\n      inputs: ['delayMs'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbAvatarFallbackDirective {\n  readonly class = input<string>()\n\n  readonly computedClass = computed(() => {\n    return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class())\n  })\n}\n",
      "type": "registry:ui"
    }
  ]
}