avatar: стилизация, сторисы, обёртки

src/lib/components/avatar/avatar.component.ts

@@ -0,0 +1,51 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+import { AvatarGroup } from 'primeng/avatargroup';
+
+export type AvatarSize = 'normal' | 'large' | 'xlarge';
+export type AvatarShape = 'square' | 'circle';
+
+@Component({
+  selector: 'avatar',
+  standalone: true,
+  imports: [Avatar],
+  template: `
+    <p-avatar
+      [label]="label || undefined"
+      [icon]="icon || undefined"
+      [image]="image || undefined"
+      [size]="primeSize"
+      [shape]="shape"
+    ></p-avatar>
+  `,
+})
+export class AvatarComponent {
+  @Input() label = '';
+  @Input() icon = '';
+  @Input() image = '';
+  @Input() size: AvatarSize = 'normal';
+  @Input() shape: AvatarShape = 'square';
+
+  @HostBinding('class') get hostClass(): string {
+    const classes = ['ui-avatar'];
+    if (this.size === 'large') classes.push('ui-avatar-lg');
+    if (this.size === 'xlarge') classes.push('ui-avatar-xl');
+    return classes.join(' ');
+  }
+
+  get primeSize(): 'normal' | 'large' | 'xlarge' | undefined {
+    return this.size === 'normal' ? undefined : this.size;
+  }
+}
+
+@Component({
+  selector: 'avatar-group',
+  standalone: true,
+  imports: [AvatarGroup],
+  template: `
+    <p-avatar-group>
+      <ng-content></ng-content>
+    </p-avatar-group>
+  `,
+})
+export class AvatarGroupComponent { }

src/prime-preset/map-tokens.ts

@@ -3,13 +3,18 @@ import type { ComponentsDesignTokens } from '@primeuix/themes/types';
 import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
 
 import tokens from './tokens/tokens.json';
+import { avatarCss } from './tokens/components/avatar';
 import { buttonCss } from './tokens/components/button';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
   semantic: tokens.semantic as unknown as AuraBaseDesignTokens['semantic'],
   components: {
     ...(tokens.components as unknown as ComponentsDesignTokens),
+    avatar: {
+      ...(tokens.components.avatar as unknown as ComponentsDesignTokens['avatar']),
+      css: avatarCss,
+    },
     button: {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
       css: buttonCss,

src/prime-preset/tokens/components/avatar.ts

@@ -0,0 +1,33 @@
+export const avatarCss = ({ dt }: { dt: (token: string) => string }): string => `
+  :root {
+    --p-avatar-extend-border-color:         ${dt('avatar.extend.borderColor')};
+    --p-avatar-extend-circle-border-radius: ${dt('avatar.extend.circle.borderRadius')};
+    --p-avatar-group-border-color:          ${dt('content.background')};
+    --p-avatar-group-offset:                calc(-1 * ${dt('media.padding.300')});
+    --p-avatar-lg-group-offset:             calc(-1 * ${dt('media.padding.300')});
+    --p-avatar-xl-group-offset:             calc(-1 * ${dt('media.padding.600')});
+  }
+
+  /* ─── Группировка: отступы для кастомных классов хост-элемента <avatar> ─── */
+  .p-avatar-group .ui-avatar + .ui-avatar {
+    margin-inline-start: var(--p-avatar-group-offset);
+  }
+
+  .p-avatar-group .ui-avatar-lg + .ui-avatar-lg {
+    margin-inline-start: var(--p-avatar-lg-group-offset);
+  }
+
+  .p-avatar-group .ui-avatar-xl + .ui-avatar-xl {
+    margin-inline-start: var(--p-avatar-xl-group-offset);
+  }
+
+  /* ─── Круглая форма: clip изображения по максимальному border-radius ─── */
+  .p-avatar.p-avatar-circle {
+    border-radius: var(--p-avatar-extend-circle-border-radius);
+    overflow: hidden;
+  }
+
+  .p-overlaybadge.p-overlaybadge {
+    width: fit-content;
+  }
+`;

src/prime-preset/tokens/tokens.json

@@ -1509,7 +1509,7 @@
       },
       "group": {
         "borderColor": "{content.background}",
-        "offset": "{media.padding.300}"
+        "offset": "-{media.padding.300}"
       },
       "lg": {
         "width": "{media.size.400}",
@@ -1519,7 +1519,7 @@
           "size": "{media.icon.size.100}"
         },
         "group": {
-          "offset": "{media.padding.300}"
+          "offset": "-{media.padding.300}"
         }
       },
       "xl": {
@@ -1529,7 +1529,7 @@
           "size": "{media.icon.size.200}"
         },
         "group": {
-          "offset": "{media.padding.600}"
+          "offset": "-{media.padding.600}"
         },
         "fontSize": "{fonts.fontSize.500}"
       }