{
  "name": "avatar",
  "type": "registry:component",
  "files": [
    {
      "name": "avatar.component.ts",
      "content": "import { NgOptimizedImage } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { SafeUrl } from '@angular/platform-browser';\n\nimport { NgIcon } from '@ng-icons/core';\nimport type { ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport {\n  avatarVariants,\n  avatarBadgeVariants,\n  fallbackVariants,\n  imageVariants,\n  type ZardAvatarSizeVariants,\n} from './avatar.variants';\n\n@Component({\n  selector: 'z-avatar, [z-avatar]',\n  imports: [NgOptimizedImage, NgIcon],\n  template: `\n    @if (zFallback() && (!zSrc() || !imageLoaded())) {\n      <span [class]=\"fallbackClasses()\">\n        {{ zFallback() }}\n      </span>\n    }\n\n    @if (zSrc() && !imageError()) {\n      <img\n        [width]=\"32\"\n        [height]=\"32\"\n        [alt]=\"zAlt()\"\n        [class]=\"imgClasses()\"\n        [ngSrc]=\"zSrc()\"\n        [priority]=\"zPriority()\"\n        (error)=\"onImageError()\"\n        (load)=\"onImageLoad()\"\n      />\n    }\n\n    @if (zShowBadge()) {\n      <div [class]=\"badgeClasses()\">\n        @if (zBadgeIcon()) {\n          <ng-icon [name]=\"zBadgeIcon()\" size=\"8\" />\n        }\n      </div>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'avatarClasses()',\n    '[attr.data-slot]': '\"avatar\"',\n    '[attr.data-size]': 'zSize()',\n  },\n  exportAs: 'zAvatar',\n})\nexport class ZardAvatarComponent {\n  readonly class = input<ClassValue>('');\n  readonly zAlt = input<string>('');\n  readonly zBadgeClass = input<ClassValue>('');\n  readonly zBadgeIcon = input<string>('');\n  readonly zFallback = input<string>('');\n  readonly zPriority = input(false, { transform: booleanAttribute });\n  readonly zSize = input<ZardAvatarSizeVariants>('default');\n  readonly zSrc = input<string | SafeUrl>('');\n  readonly zShowBadge = input(false, { transform: booleanAttribute });\n\n  protected readonly imageError = signal(false);\n  protected readonly imageLoaded = signal(false);\n\n  constructor() {\n    effect(() => {\n      // Reset image state when zSrc changes\n      this.zSrc();\n      this.imageError.set(false);\n      this.imageLoaded.set(false);\n    });\n  }\n\n  protected readonly avatarClasses = computed(() =>\n    mergeClasses(avatarVariants({ zSize: this.zSize() }), this.class()),\n  );\n\n  protected readonly fallbackClasses = computed(() => fallbackVariants());\n\n  protected readonly badgeClasses = computed(() => mergeClasses(avatarBadgeVariants, this.zBadgeClass()));\n\n  protected readonly imgClasses = computed(() => imageVariants({ zSize: this.zSize() }));\n\n  protected onImageLoad(): void {\n    this.imageLoaded.set(true);\n    this.imageError.set(false);\n  }\n\n  protected onImageError(): void {\n    this.imageError.set(true);\n    this.imageLoaded.set(false);\n  }\n}\n"
    },
    {
      "name": "avatar-group.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport { avatarGroupVariants, type ZardAvatarGroupOrientationVariants } from './avatar.variants';\n\n@Component({\n  selector: 'z-avatar-group',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zAvatarGroup',\n})\nexport class ZardAvatarGroupComponent {\n  readonly zOrientation = input<ZardAvatarGroupOrientationVariants>('horizontal');\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() =>\n    mergeClasses(avatarGroupVariants({ zOrientation: this.zOrientation() }), this.class()),\n  );\n}\n"
    },
    {
      "name": "avatar.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nimport { mergeClasses } from '@/shared/utils';\n\nexport const avatarVariants = cva(\n  mergeClasses(\n    'group/avatar relative flex shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border',\n    'after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',\n  ),\n  {\n    variants: {\n      zSize: {\n        sm: 'size-6',\n        default: 'size-8',\n        lg: 'size-10',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  },\n);\n\nexport const fallbackVariants = cva(\n  'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',\n);\n\nexport const imageVariants = cva('aspect-square size-full rounded-full object-cover', {\n  variants: {\n    zSize: {\n      sm: '',\n      default: '',\n      lg: '',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\nexport const avatarBadgeVariants = mergeClasses(\n  'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',\n  'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',\n  'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n  'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n);\n\nexport const avatarGroupVariants = cva(\n  'group/avatar-group flex *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',\n  {\n    variants: {\n      zOrientation: {\n        horizontal: 'flex-row -space-x-2',\n        vertical: 'flex-col -space-y-2',\n      },\n    },\n    defaultVariants: {\n      zOrientation: 'horizontal',\n    },\n  },\n);\n\nexport type ZardAvatarSizeVariants = NonNullable<VariantProps<typeof avatarVariants>['zSize']>;\nexport type ZardAvatarGroupOrientationVariants = NonNullable<VariantProps<typeof avatarGroupVariants>['zOrientation']>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './avatar.component';\nexport * from './avatar-group.component';\nexport * from './avatar.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "badge.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { provideIcons } from '@ng-icons/core';\nimport { lucidePlus } from '@ng-icons/lucide';\n\nimport { ZardAvatarComponent } from '@/shared/components/avatar/avatar.component';\n\n@Component({\n  selector: 'z-demo-avatar-badge',\n  imports: [ZardAvatarComponent],\n  template: `\n    <div class=\"flex gap-3\">\n      <z-avatar\n        [zShowBadge]=\"true\"\n        zSrc=\"/images/avatar/imgs/avatar_image.jpg\"\n        zAlt=\"Image\"\n        zBadgeClass=\"bg-green-600 dark:bg-green-800\"\n      />\n      <z-avatar\n        class=\"grayscale\"\n        [zShowBadge]=\"true\"\n        zSrc=\"/images/avatar/imgs/avatar_image.jpg\"\n        zAlt=\"Image\"\n        zBadgeIcon=\"lucidePlus\"\n      />\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucidePlus })],\n})\nexport class ZardDemoAvatarBadgeComponent {}\n"
    },
    {
      "name": "basic.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardAvatarComponent } from '@/shared/components/avatar/avatar.component';\n\n@Component({\n  selector: 'z-demo-avatar-basic',\n  imports: [ZardAvatarComponent],\n  template: `\n    <div class=\"mb-4 flex gap-3\">\n      <z-avatar zSrc=\"/images/avatar/imgs/avatar_image.jpg\" zFallback=\"ZA\" />\n      <z-avatar zSrc=\"error-image.png\" zFallback=\"ZA\" />\n    </div>\n  `,\n})\nexport class ZardDemoAvatarBasicComponent {}\n"
    },
    {
      "name": "group.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardAvatarGroupComponent } from '@/shared/components/avatar/avatar-group.component';\nimport { ZardAvatarComponent } from '@/shared/components/avatar/avatar.component';\n\n@Component({\n  selector: 'z-demo-avatar-group',\n  imports: [ZardAvatarComponent, ZardAvatarGroupComponent],\n  template: `\n    <div class=\"flex flex-col gap-4\">\n      <z-avatar-group class=\"grayscale\">\n        <z-avatar zSrc=\"/images/avatar/imgs/avatar_image.jpg\" zFallback=\"JD\" />\n        <z-avatar zSrc=\"https://github.com/srizzon.png\" zFallback=\"SA\" />\n        <z-avatar zSrc=\"https://github.com/Luizgomess.png\" zFallback=\"LU\" />\n      </z-avatar-group>\n\n      <z-avatar-group zOrientation=\"vertical\" class=\"grayscale\">\n        <z-avatar zSrc=\"/images/avatar/imgs/avatar_image.jpg\" zFallback=\"JD\" />\n        <z-avatar zSrc=\"https://github.com/srizzon.png\" zFallback=\"SA\" />\n        <z-avatar zSrc=\"https://github.com/Luizgomess.png\" zFallback=\"LU\" />\n      </z-avatar-group>\n    </div>\n  `,\n})\nexport class ZardDemoAvatarGroupComponent {}\n"
    }
  ]
}