@blueprint-platform/components 0.0.0-stage → 0.2.1

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment-group.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAttachmentGroup],hlm-attachment-group',
+  host: { 'data-slot': 'attachment-group' },
+})
+export class HlmAttachmentGroup {
+  constructor() {
+    classes(
+      () =>
+        'scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment-media.ts

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const attachmentMediaVariants = cva(
+  "bg-muted text-foreground w-10 rounded-lg group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[orientation=vertical]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(6)] group-data-[size=xs]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+  {
+    variants: {
+      variant: {
+        icon: 'bg-muted',
+        image:
+          'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'icon',
+    },
+  },
+);
+
+export type AttachmentMediaVariants = VariantProps<typeof attachmentMediaVariants>;
+
+@Directive({
+  selector: '[hlmAttachmentMedia],hlm-attachment-media',
+  host: {
+    'data-slot': 'attachment-media',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class HlmAttachmentMedia {
+  public readonly variant = input<AttachmentMediaVariants['variant']>('icon');
+
+  constructor() {
+    classes(() => attachmentMediaVariants({ variant: this.variant() }));
+  }
+}

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment-title.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAttachmentTitle],hlm-attachment-title',
+  host: { 'data-slot': 'attachment-title' },
+})
+export class HlmAttachmentTitle {
+  constructor() {
+    classes(
+      () =>
+        'truncate text-sm font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment-trigger.ts

@@ -0,0 +1,23 @@
+import { computed, Directive, ElementRef, inject, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]',
+  host: {
+    'data-slot': 'attachment-trigger',
+    '[attr.type]': '_hostType()',
+  },
+})
+export class HlmAttachmentTrigger {
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+  public readonly type = input<'button' | 'submit' | 'reset' | null>('button');
+
+  protected readonly _hostType = computed(() =>
+    this._elementRef.nativeElement.localName === 'button' ? this.type() : null,
+  );
+
+  constructor() {
+    classes(() => 'absolute inset-0 z-10 outline-none');
+  }
+}

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment.ts

@@ -0,0 +1,47 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const attachmentVariants = cva(
+  'bg-card text-card-foreground rounded-xl border group/attachment focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap transition-colors focus-within:ring-1 data-[state=idle]:border-dashed',
+  {
+    variants: {
+      size: {
+        default:
+          'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
+        sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
+        xs: 'rounded-lg gap-1.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
+      },
+      orientation: {
+        horizontal: 'min-w-40 items-center',
+        vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      orientation: 'horizontal',
+    },
+  },
+);
+
+export type AttachmentVariants = VariantProps<typeof attachmentVariants>;
+export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';
+
+@Directive({
+  selector: '[hlmAttachment],hlm-attachment',
+  host: {
+    'data-slot': 'attachment',
+    '[attr.data-state]': 'state()',
+    '[attr.data-size]': 'size()',
+    '[attr.data-orientation]': 'orientation()',
+  },
+})
+export class HlmAttachment {
+  public readonly state = input<AttachmentState>('done');
+  public readonly size = input<AttachmentVariants['size']>('default');
+  public readonly orientation = input<AttachmentVariants['orientation']>('horizontal');
+
+  constructor() {
+    classes(() => attachmentVariants({ size: this.size(), orientation: this.orientation() }));
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/index.ts

@@ -0,0 +1,40 @@
+import { HlmAutocomplete } from './lib/hlm-autocomplete';
+import { HlmAutocompleteContent } from './lib/hlm-autocomplete-content';
+import { HlmAutocompleteEmpty } from './lib/hlm-autocomplete-empty';
+import { HlmAutocompleteGroup } from './lib/hlm-autocomplete-group';
+import { HlmAutocompleteInput } from './lib/hlm-autocomplete-input';
+import { HlmAutocompleteItem } from './lib/hlm-autocomplete-item';
+import { HlmAutocompleteLabel } from './lib/hlm-autocomplete-label';
+import { HlmAutocompleteList } from './lib/hlm-autocomplete-list';
+import { HlmAutocompletePortal } from './lib/hlm-autocomplete-portal';
+import { HlmAutocompleteSearch } from './lib/hlm-autocomplete-search';
+import { HlmAutocompleteSeparator } from './lib/hlm-autocomplete-separator';
+import { HlmAutocompleteStatus } from './lib/hlm-autocomplete-status';
+
+export * from './lib/hlm-autocomplete';
+export * from './lib/hlm-autocomplete-content';
+export * from './lib/hlm-autocomplete-empty';
+export * from './lib/hlm-autocomplete-group';
+export * from './lib/hlm-autocomplete-input';
+export * from './lib/hlm-autocomplete-item';
+export * from './lib/hlm-autocomplete-label';
+export * from './lib/hlm-autocomplete-list';
+export * from './lib/hlm-autocomplete-portal';
+export * from './lib/hlm-autocomplete-search';
+export * from './lib/hlm-autocomplete-separator';
+export * from './lib/hlm-autocomplete-status';
+
+export const HlmAutocompleteImports = [
+  HlmAutocomplete,
+  HlmAutocompleteContent,
+  HlmAutocompleteEmpty,
+  HlmAutocompleteGroup,
+  HlmAutocompleteInput,
+  HlmAutocompleteItem,
+  HlmAutocompleteLabel,
+  HlmAutocompleteList,
+  HlmAutocompletePortal,
+  HlmAutocompleteSearch,
+  HlmAutocompleteSeparator,
+  HlmAutocompleteStatus,
+] as const;

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-content.ts

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteContent } from '@spartan-ng/brain/autocomplete';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocompleteContent],hlm-autocomplete-content',
+  hostDirectives: [BrnAutocompleteContent],
+})
+export class HlmAutocompleteContent {
+  constructor() {
+    classes(
+      () =>
+        'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 group/autocomplete-content flex w-(--brn-autocomplete-width) flex-col p-0',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-empty.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteEmpty } from '@spartan-ng/brain/autocomplete';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocompleteEmpty],hlm-autocomplete-empty',
+  hostDirectives: [BrnAutocompleteEmpty],
+  host: { 'data-slot': 'autocomplete-empty' },
+})
+export class HlmAutocompleteEmpty {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground hidden w-full items-center justify-center py-2 text-center text-sm group-data-empty/autocomplete-content:flex',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-group.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteGroup } from '@spartan-ng/brain/autocomplete';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocompleteGroup]',
+  hostDirectives: [BrnAutocompleteGroup],
+  host: { 'data-slot': 'autocomplete-group' },
+})
+export class HlmAutocompleteGroup {
+  constructor() {
+    classes(() => 'data-hidden:hidden');
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-input.ts

@@ -0,0 +1,77 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideSearch, lucideX } from '@ng-icons/lucide';
+import {
+  BrnAutocompleteAnchor,
+  BrnAutocompleteClear,
+  BrnAutocompleteInput,
+} from '@spartan-ng/brain/autocomplete';
+import { HlmInputGroup, HlmInputGroupImports } from '@blueprint-platform/ui/input-group';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-autocomplete-input',
+  imports: [HlmInputGroupImports, NgIcon, BrnAutocompleteClear, BrnAutocompleteInput],
+  providers: [provideIcons({ lucideSearch, lucideX })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnAutocompleteAnchor, HlmInputGroup],
+  template: `
+    <input
+      brnAutocompleteInput
+      #autocompleteInput="brnAutocompleteInput"
+      hlmInputGroupInput
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [aria-invalid]="ariaInvalidOverride()"
+      [forceInvalid]="forceInvalid()"
+    />
+
+    @if (showSearch()) {
+      <hlm-input-group-addon>
+        <ng-icon name="lucideSearch" [class.opacity-50]="autocompleteInput.disabled()" />
+      </hlm-input-group-addon>
+    }
+
+    @if (showClear()) {
+      <hlm-input-group-addon align="inline-end">
+        <button
+          *brnAutocompleteClear
+          hlmInputGroupButton
+          data-slot="autocomplete-clear"
+          [disabled]="autocompleteInput.disabled()"
+          size="icon-xs"
+          variant="ghost"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      </hlm-input-group-addon>
+    }
+    <ng-content />
+  `,
+})
+export class HlmAutocompleteInput {
+  private static _id = 0;
+
+  public readonly inputId = input<string>(`hlm-autocomplete-input-${HlmAutocompleteInput._id++}`);
+
+  public readonly placeholder = input<string>('');
+
+  public readonly showSearch = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+  public readonly showClear = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  /** Forces the invalid state visually, regardless of form control state. */
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  /** Manual override for aria-invalid. When not set, auto-detects from the parent autocomplete error state. */
+  public readonly ariaInvalidOverride = input<boolean | undefined, BooleanInput>(undefined, {
+    transform: (v: BooleanInput) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
+    alias: 'aria-invalid',
+  });
+
+  constructor() {
+    classes(() => 'w-auto');
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-item.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { BrnAutocompleteItem } from '@spartan-ng/brain/autocomplete';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-autocomplete-item',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideCheck })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnAutocompleteItem, inputs: ['id', 'disabled', 'value'] }],
+  host: { 'data-slot': 'autocomplete-item' },
+  template: `
+    <ng-content />
+    @if (_active()) {
+      <ng-icon
+        name="lucideCheck"
+        class="absolute end-2 flex items-center justify-center text-[length:--spacing(4)]"
+        aria-hidden="true"
+      />
+    }
+  `,
+})
+export class HlmAutocompleteItem {
+  private readonly _brnAutocompleteItem = inject(BrnAutocompleteItem);
+
+  protected readonly _active = this._brnAutocompleteItem.active;
+
+  constructor() {
+    classes(
+      () =>
+        'data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-label.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteLabel } from '@spartan-ng/brain/autocomplete';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocompleteLabel]',
+  hostDirectives: [{ directive: BrnAutocompleteLabel, inputs: ['id'] }],
+  host: { 'data-slot': 'autocomplete-label' },
+})
+export class HlmAutocompleteLabel {
+  constructor() {
+    classes(() => 'text-muted-foreground px-2 py-1.5 text-xs');
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-list.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteList } from '@spartan-ng/brain/autocomplete';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocompleteList]',
+  hostDirectives: [{ directive: BrnAutocompleteList, inputs: ['id'] }],
+  host: { 'data-slot': 'autocomplete-list' },
+})
+export class HlmAutocompleteList {
+  constructor() {
+    classes(
+      () =>
+        'no-scrollbar max-h-[calc(--spacing(72)---spacing(9))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-portal.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnPopoverContent } from '@spartan-ng/brain/popover';
+
+@Directive({
+  selector: '[hlmAutocompletePortal]',
+  hostDirectives: [{ directive: BrnPopoverContent, inputs: ['context', 'class'] }],
+})
+export class HlmAutocompletePortal {}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-search.ts

@@ -0,0 +1,37 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteSearch } from '@spartan-ng/brain/autocomplete';
+import {
+  BrnPopover,
+  provideBrnPopoverConfig,
+  provideBrnPopoverDefaultOptions,
+} from '@spartan-ng/brain/popover';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocompleteSearch],hlm-autocomplete-search',
+  providers: [
+    provideBrnPopoverConfig({
+      align: 'start',
+      sideOffset: 6,
+    }),
+    provideBrnPopoverDefaultOptions({ role: null }),
+  ],
+  hostDirectives: [
+    {
+      directive: BrnAutocompleteSearch,
+      inputs: ['autoHighlight', 'disabled', 'value', 'search', 'itemToString'],
+      outputs: ['valueChange', 'searchChange'],
+    },
+    {
+      directive: BrnPopover,
+      inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+      outputs: ['stateChanged', 'closed'],
+    },
+  ],
+  host: { 'data-slot': 'autocomplete' },
+})
+export class HlmAutocompleteSearch {
+  constructor() {
+    classes(() => 'block');
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-separator.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteSeparator } from '@spartan-ng/brain/autocomplete';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocompleteSeparator]',
+  hostDirectives: [{ directive: BrnAutocompleteSeparator, inputs: ['orientation'] }],
+  host: { 'data-slot': 'autocomplete-separator' },
+})
+export class HlmAutocompleteSeparator {
+  constructor() {
+    classes(() => 'bg-border -mx-1 my-1 h-px');
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete-status.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnAutocompleteStatus } from '@spartan-ng/brain/autocomplete';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocompleteStatus],hlm-autocomplete-status',
+  hostDirectives: [BrnAutocompleteStatus],
+  host: { 'data-slot': 'autocomplete-status' },
+})
+export class HlmAutocompleteStatus {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground gap-2 px-2.5 py-2 text-sm flex w-full items-center justify-center text-center',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/autocomplete/src/lib/hlm-autocomplete.ts

@@ -0,0 +1,44 @@
+import { Directive } from '@angular/core';
+import { BrnAutocomplete } from '@spartan-ng/brain/autocomplete';
+import {
+  BrnPopover,
+  provideBrnPopoverConfig,
+  provideBrnPopoverDefaultOptions,
+} from '@spartan-ng/brain/popover';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAutocomplete],hlm-autocomplete',
+  providers: [
+    provideBrnPopoverConfig({
+      align: 'start',
+      sideOffset: 6,
+    }),
+    provideBrnPopoverDefaultOptions({ role: null }),
+  ],
+  hostDirectives: [
+    {
+      directive: BrnAutocomplete,
+      inputs: [
+        'autoHighlight',
+        'disabled',
+        'value',
+        'search',
+        'itemToString',
+        'isItemEqualToValue',
+      ],
+      outputs: ['valueChange', 'searchChange'],
+    },
+    {
+      directive: BrnPopover,
+      inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+      outputs: ['stateChanged', 'closed'],
+    },
+  ],
+  host: { 'data-slot': 'autocomplete' },
+})
+export class HlmAutocomplete {
+  constructor() {
+    classes(() => 'block');
+  }
+}

package/dist/generators/ui/files/shared/ui/avatar/src/index.ts

@@ -0,0 +1,22 @@
+import { HlmAvatar } from './lib/hlm-avatar';
+import { HlmAvatarBadge } from './lib/hlm-avatar-badge';
+import { HlmAvatarFallback } from './lib/hlm-avatar-fallback';
+import { HlmAvatarGroup } from './lib/hlm-avatar-group';
+import { HlmAvatarGroupCount } from './lib/hlm-avatar-group-count';
+import { HlmAvatarImage } from './lib/hlm-avatar-image';
+
+export * from './lib/hlm-avatar';
+export * from './lib/hlm-avatar-badge';
+export * from './lib/hlm-avatar-fallback';
+export * from './lib/hlm-avatar-group';
+export * from './lib/hlm-avatar-group-count';
+export * from './lib/hlm-avatar-image';
+
+export const HlmAvatarImports = [
+  HlmAvatar,
+  HlmAvatarBadge,
+  HlmAvatarFallback,
+  HlmAvatarGroup,
+  HlmAvatarGroupCount,
+  HlmAvatarImage,
+] as const;

package/dist/generators/ui/files/shared/ui/avatar/src/lib/hlm-avatar-badge.ts

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAvatarBadge],hlm-avatar-badge',
+  host: {
+    'data-slot': 'avatar-badge',
+  },
+})
+export class HlmAvatarBadge {
+  constructor() {
+    classes(() => [
+      'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+      'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>ng-icon]:hidden',
+      'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>ng-icon]:text-[length:--spacing(2)]',
+      'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>ng-icon]:text-[length:--spacing(2)]',
+    ]);
+  }
+}

package/dist/generators/ui/files/shared/ui/avatar/src/lib/hlm-avatar-fallback.ts

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+import { BrnAvatarFallback } from '@spartan-ng/brain/avatar';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAvatarFallback]',
+  exportAs: 'hlmAvatarFallback',
+  hostDirectives: [BrnAvatarFallback],
+  host: {
+    'data-slot': 'avatar-fallback',
+  },
+})
+export class HlmAvatarFallback {
+  constructor() {
+    classes(
+      () =>
+        'bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/avatar/src/lib/hlm-avatar-group-count.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAvatarGroupCount],hlm-avatar-group-count',
+  host: {
+    'data-slot': 'avatar-group-count',
+  },
+})
+export class HlmAvatarGroupCount {
+  constructor() {
+    classes(
+      () =>
+        'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>ng-icon]:text-base group-has-data-[size=lg]/avatar-group:[&>ng-icon]:text-xl group-has-data-[size=sm]/avatar-group:[&>ng-icon]:text-xs',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/avatar/src/lib/hlm-avatar-group.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAvatarGroup],hlm-avatar-group',
+  host: {
+    'data-slot': 'avatar-group',
+  },
+})
+export class HlmAvatarGroup {
+  constructor() {
+    classes(
+      () =>
+        '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/avatar/src/lib/hlm-avatar-image.ts

@@ -0,0 +1,19 @@
+import { Directive, inject } from '@angular/core';
+import { BrnAvatarImage } from '@spartan-ng/brain/avatar';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'img[hlmAvatarImage]',
+  exportAs: 'hlmAvatarImage',
+  hostDirectives: [BrnAvatarImage],
+  host: {
+    'data-slot': 'avatar-image',
+  },
+})
+export class HlmAvatarImage {
+  public readonly canShow = inject(BrnAvatarImage).canShow;
+
+  constructor() {
+    classes(() => 'rounded-full aspect-square size-full object-cover');
+  }
+}