@spartan-ng/cli 0.0.1-alpha.323

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-title.directive.ts.template

@@ -0,0 +1,23 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmAlertDialogTitle],[brnAlertDialogTitle][hlm]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmAlertDialogTitleDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm('text-lg font-semibold', this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-alert-dialog-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-alert-dialog-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'alertdialog', internalName: 'ui-alert-dialog-helm', publicName: 'ui-alertdialog-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-alert-dialog-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-alert-dialog-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,sBAAsB,EACpC,UAAU,EAAE,qBAAqB,IAChC,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

package/src/generators/ui/libs/ui-alert-helm/files/index.ts.template

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import { HlmAlertDescriptionDirective } from './lib/hlm-alert-description.directive';
+import { HlmAlertIconDirective } from './lib/hlm-alert-icon.directive';
+import { HlmAlertTitleDirective } from './lib/hlm-alert-title.directive';
+import { HlmAlertDirective } from './lib/hlm-alert.directive';
+
+export * from './lib/hlm-alert-description.directive';
+export * from './lib/hlm-alert-icon.directive';
+export * from './lib/hlm-alert-title.directive';
+export * from './lib/hlm-alert.directive';
+
+export const HlmAlertImports = [
+	HlmAlertDirective,
+	HlmAlertTitleDirective,
+	HlmAlertDescriptionDirective,
+	HlmAlertIconDirective,
+] as const;
+
+@NgModule({
+	imports: [...HlmAlertImports],
+	exports: [...HlmAlertImports],
+})
+export class HlmAlertModule {}

package/src/generators/ui/libs/ui-alert-helm/files/lib/hlm-alert-description.directive.ts.template

@@ -0,0 +1,29 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { VariantProps, cva } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+const alertDescriptionVariants = cva('text-sm [&_p]:leading-relaxed', {
+	variants: {},
+});
+export type AlertDescriptionVariants = VariantProps<typeof alertDescriptionVariants>;
+
+@Directive({
+	selector: '[hlmAlertDesc],[hlmAlertDescription]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmAlertDescriptionDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(alertDescriptionVariants(), this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-alert-helm/files/lib/hlm-alert-icon.directive.ts.template

@@ -0,0 +1,15 @@
+import { Directive, inject } from '@angular/core';
+import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+
+@Directive({
+	selector: '[hlmAlertIcon]',
+	standalone: true,
+})
+export class HlmAlertIconDirective {
+	private _icon = inject(HlmIconComponent, { host: true, optional: true });
+
+	constructor() {
+		if (!this._icon) return;
+		this._icon.size = 'sm';
+	}
+}

package/src/generators/ui/libs/ui-alert-helm/files/lib/hlm-alert-title.directive.ts.template

@@ -0,0 +1,29 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { VariantProps, cva } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+const alertTitleVariants = cva('mb-1 font-medium leading-none tracking-tight', {
+	variants: {},
+});
+export type AlertTitleVariants = VariantProps<typeof alertTitleVariants>;
+
+@Directive({
+	selector: '[hlmAlertTitle]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmAlertTitleDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(alertTitleVariants(), this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-alert-helm/files/lib/hlm-alert.directive.ts.template

@@ -0,0 +1,48 @@
+import { Directive, Input, computed, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { VariantProps, cva } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+const alertVariants = cva(
+	'relative w-full rounded-lg border border-border p-4 [&>[hlmAlertIcon]]:absolute [&>[hlmAlertIcon]]:text-foreground [&>[hlmAlertIcon]]:left-4 [&>[hlmAlertIcon]]:top-4 [&>[hlmAlertIcon]+div]:translate-y-[-3px] [&>[hlmAlertIcon]~*]:pl-7',
+	{
+		variants: {
+			variant: {
+				default: 'bg-background text-foreground',
+				destructive:
+					'text-destructive border-destructive/50 dark:border-destructive [&>[hlmAlertIcon]]:text-destructive text-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+export type AlertVariants = VariantProps<typeof alertVariants>;
+
+@Directive({
+	selector: '[hlmAlert]',
+	standalone: true,
+	host: {
+		role: 'alert',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmAlertDirective {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	private readonly _variant = signal<AlertVariants['variant']>('default');
+	@Input()
+	set variant(variant: AlertVariants['variant']) {
+		this._variant.set(variant);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(alertVariants({ variant: this._variant() }), this._userCls());
+	}
+}

package/src/generators/ui/libs/ui-alert-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-alert-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'alert', internalName: 'ui-alert-helm', publicName: 'ui-alert-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-alert-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-alert-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,OAAO,EACtB,YAAY,EAAE,eAAe,EAC7B,UAAU,EAAE,eAAe,IAC1B,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

package/src/generators/ui/libs/ui-aspect-ratio-helm/files/index.ts.template

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { HlmAspectRatioDirective } from './lib/helm-aspect-ratio.directive';
+
+export * from './lib/helm-aspect-ratio.directive';
+
+@NgModule({
+	imports: [HlmAspectRatioDirective],
+	exports: [HlmAspectRatioDirective],
+})
+export class HlmAspectRatioModule {}

package/src/generators/ui/libs/ui-aspect-ratio-helm/files/lib/helm-aspect-ratio.directive.spec.ts.template

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HlmAspectRatioDirective } from './helm-aspect-ratio.directive';
+
+@Component({
+	selector: 'hlm-mock',
+	standalone: true,
+	imports: [HlmAspectRatioDirective],
+	template: `
+		<div [hlmAspectRatio]="ratio">
+			<img
+				src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
+			/>
+		</div>
+	`,
+})
+class MockComponent {
+	ratio: number | undefined = 16 / 9;
+}
+
+describe('HelmAspectRatioDirective', () => {
+	let component: MockComponent;
+	let fixture: ComponentFixture<MockComponent>;
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(MockComponent);
+		component = fixture.componentInstance;
+	});
+
+	it('should compile', () => {
+		expect(component).toBeTruthy();
+	});
+
+	it('should show the image', () => {
+		fixture.detectChanges();
+		const img = fixture.nativeElement.querySelector('img');
+		expect(img).toBeTruthy();
+	});
+
+	it('should have the correct aspect ratio', () => {
+		fixture.detectChanges();
+		const div = fixture.nativeElement.querySelector('div');
+		expect(div.style.paddingBottom).toEqual(100 / (component.ratio || 1) + '%');
+	});
+
+	it('should default to an aspect ratio of 1', () => {
+		component.ratio = undefined;
+		fixture.detectChanges();
+		const div = fixture.nativeElement.querySelector('div');
+		expect(div.style.paddingBottom).toEqual('100%');
+	});
+
+	it('should fallback to an aspect ratio of 1 if the ratio is 0', () => {
+		component.ratio = 0;
+		fixture.detectChanges();
+		const div = fixture.nativeElement.querySelector('div');
+		expect(div.style.paddingBottom).toEqual('100%');
+	});
+
+	it('should fallback to an aspect ratio of 1 if the ratio is negative', () => {
+		component.ratio = -1;
+		fixture.detectChanges();
+		const div = fixture.nativeElement.querySelector('div');
+		expect(div.style.paddingBottom).toEqual('100%');
+	});
+
+	it('should add the correct styles to the image', () => {
+		fixture.detectChanges();
+
+		const img = fixture.nativeElement.querySelector('img') as HTMLImageElement;
+		expect(img.classList.toString()).toBe('absolute w-full h-full object-cover');
+	});
+});

package/src/generators/ui/libs/ui-aspect-ratio-helm/files/lib/helm-aspect-ratio.directive.ts.template

@@ -0,0 +1,53 @@
+import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
+import { AfterViewInit, computed, Directive, ElementRef, inject, Input, signal } from '@angular/core';
+import { hlm } from '@spartan-ng/ui-core';
+import { ClassValue } from 'clsx';
+
+const parseDividedString = (value: NumberInput): NumberInput => {
+	if (typeof value !== 'string' || !value.includes('/')) return value;
+	return value
+		.split('/')
+		.map((v) => parseInt(v, 10))
+		.reduce((a, b) => a / b);
+};
+
+@Directive({
+	selector: '[hlmAspectRatio]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+		'[style.padding-bottom]': '_computedPaddingBottom()',
+	},
+})
+export class HlmAspectRatioDirective implements AfterViewInit {
+	private readonly _ratio = signal(1);
+	private readonly _el: HTMLElement = inject(ElementRef).nativeElement;
+
+	@Input()
+	set hlmAspectRatio(value: NumberInput) {
+		const coerced = coerceNumberProperty(parseDividedString(value));
+		this._ratio.set(coerced <= 0 ? 1 : coerced);
+	}
+	protected _computedPaddingBottom = computed(() => {
+		return `${100 / this._ratio()}%`;
+	});
+
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(`relative w-full`, this._userCls());
+	}
+
+	ngAfterViewInit() {
+		// support delayed addition of image to dom
+		const child = this._el.firstElementChild;
+		if (child) {
+			child.classList.add('absolute', 'w-full', 'h-full', 'object-cover');
+		}
+	}
+}

package/src/generators/ui/libs/ui-aspect-ratio-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/ui-aspect-ratio-helm/generator.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = void 0;
+const tslib_1 = require("tslib");
+const generator_1 = require("../../../base/generator");
+function generator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return yield (0, generator_1.default)(tree, Object.assign(Object.assign({}, options), { primitiveName: 'aspectratio', internalName: 'ui-aspect-ratio-helm', publicName: 'ui-aspectratio-helm' }));
+    });
+}
+exports.generator = generator;
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-aspect-ratio-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-aspect-ratio-helm/generator.ts"],"names":[],"mappings":";;;;AACA,uDAAuD;AAGvD,SAAsB,SAAS,CAAC,IAAU,EAAE,OAA+B;;QAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,kCAC9B,OAAO,KACV,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,sBAAsB,EACpC,UAAU,EAAE,qBAAqB,IAChC,CAAC;IACJ,CAAC;CAAA;AAPD,8BAOC"}

package/src/generators/ui/libs/ui-avatar-helm/files/index.ts.template

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+
+import { HlmAvatarFallbackDirective } from './lib/fallback';
+import { HlmAvatarComponent } from './lib/hlm-avatar.component';
+import { HlmAvatarImageDirective } from './lib/image';
+
+export * from './lib/fallback';
+export * from './lib/hlm-avatar.component';
+export * from './lib/image';
+
+export const HlmAvatarImports = [HlmAvatarFallbackDirective, HlmAvatarImageDirective, HlmAvatarComponent] as const;
+
+@NgModule({
+	imports: [...HlmAvatarImports],
+	exports: [...HlmAvatarImports],
+})
+export class HlmAvatarModule {}

package/src/generators/ui/libs/ui-avatar-helm/files/lib/fallback/hlm-avatar-fallback.directive.spec.ts.template

@@ -0,0 +1,70 @@
+import { Component, PLATFORM_ID } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
+import { hexColorFor, isBright } from '@spartan-ng/ui-avatar-brain';
+import { HlmAvatarFallbackDirective } from './hlm-avatar-fallback.directive';
+
+@Component({
+	selector: 'hlm-mock',
+	standalone: true,
+	imports: [HlmAvatarFallbackDirective],
+	template: `
+		<span hlmAvatarFallback [class]="userCls" [autoColor]="autoColor">fallback2</span>
+	`,
+})
+class HlmMockComponent {
+	userCls = '';
+	autoColor = false;
+}
+
+describe('HlmAvatarFallbackDirective', () => {
+	let component: HlmMockComponent;
+	let fixture: ComponentFixture<HlmMockComponent>;
+
+	beforeEach(() => {
+		fixture = TestBed.overrideProvider(PLATFORM_ID, { useValue: 'browser' }).createComponent(HlmMockComponent);
+		component = fixture.componentInstance;
+	});
+
+	it('should compile', () => {
+		expect(component).toBeTruthy();
+	});
+
+	it('should contain the default classes if no inputs are provided', () => {
+		fixture.detectChanges();
+		expect(fixture.nativeElement.querySelector('span').className).toBe(
+			'bg-muted flex h-full items-center justify-center rounded-full w-full',
+		);
+	});
+
+	it('should add any user defined classes', async () => {
+		component.userCls = 'test-class';
+
+		fixture.detectChanges();
+		expect(fixture.nativeElement.querySelector('span').className).toContain('test-class');
+	});
+	it('should merge bg-destructive correctly when set as user defined class, therefore removing bg-muted', async () => {
+		component.userCls = 'bg-destructive ';
+
+		fixture.detectChanges();
+		expect(fixture.nativeElement.querySelector('span').className).toContain('bg-destructive');
+	});
+
+	describe('autoColor', () => {
+		beforeEach(() => {
+			component.autoColor = true;
+			fixture.detectChanges();
+		});
+
+		it('should remove the bg-muted class from the component', fakeAsync(() => {
+			fixture.detectChanges();
+			expect(fixture.nativeElement.querySelector('span').className).not.toContain('bg-muted');
+		}));
+
+		it('should remove add a text color class and hex backgroundColor style depending on its content', () => {
+			const hex = hexColorFor('fallback2');
+			const textCls = isBright(hex) ? 'text-black' : 'text-white';
+			expect(fixture.nativeElement.querySelector('span').className).toContain(textCls);
+			expect(fixture.nativeElement.querySelector('span').style.backgroundColor).toBe('rgb(144, 53, 149)');
+		});
+	});
+});

package/src/generators/ui/libs/ui-avatar-helm/files/lib/fallback/hlm-avatar-fallback.directive.ts.template

@@ -0,0 +1,40 @@
+import { computed, Directive, inject } from '@angular/core';
+import { BrnAvatarFallbackDirective, hexColorFor, isBright } from '@spartan-ng/ui-avatar-brain';
+import { hlm } from '@spartan-ng/ui-core';
+
+@Directive({
+	selector: '[hlmAvatarFallback]',
+	standalone: true,
+	exportAs: 'avatarFallback',
+	hostDirectives: [
+		{
+			directive: BrnAvatarFallbackDirective,
+			inputs: ['class:class', 'autoColor:autoColor'],
+		},
+	],
+	host: {
+		'[class]': '_computedClass()',
+		'[style.backgroundColor]': "_hex() || ''",
+	},
+})
+export class HlmAvatarFallbackDirective {
+	private readonly _brn = inject(BrnAvatarFallbackDirective);
+	private readonly _hex = computed(() => {
+		if (!this._brn.useAutoColor() || !this._brn.getTextContent()) return;
+		return hexColorFor(this._brn.getTextContent());
+	});
+
+	private readonly _autoColorTextCls = computed(() => {
+		const hex = this._hex();
+		if (!hex) return;
+		return `${isBright(hex) ? 'text-black' : 'text-white'}`;
+	});
+
+	protected readonly _computedClass = computed(() => {
+		return hlm(
+			'flex h-full w-full items-center justify-center rounded-full',
+			this._autoColorTextCls() ?? 'bg-muted',
+			this._brn?.userCls(),
+		);
+	});
+}

package/src/generators/ui/libs/ui-avatar-helm/files/lib/fallback/index.ts.template

@@ -0,0 +1 @@
+export * from './hlm-avatar-fallback.directive';

package/src/generators/ui/libs/ui-avatar-helm/files/lib/hlm-avatar.component.spec.ts.template

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrnAvatarFallbackDirective, BrnAvatarImageDirective } from '@spartan-ng/ui-avatar-brain';
+import { HlmAvatarComponent } from './hlm-avatar.component';
+
+@Component({
+	selector: 'hlm-mock',
+	imports: [BrnAvatarImageDirective, BrnAvatarFallbackDirective, HlmAvatarComponent],
+	template: `
+		<hlm-avatar id="fallbackOnly">
+			<span brnAvatarFallback>fallback</span>
+		</hlm-avatar>
+	`,
+	standalone: true,
+})
+class MockComponent {}
+
+describe('HlmAvatarComponent', () => {
+	let component: HlmAvatarComponent;
+	let fixture: ComponentFixture<HlmAvatarComponent>;
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(HlmAvatarComponent);
+		component = fixture.componentInstance;
+	});
+
+	it('should compile', () => {
+		expect(component).toBeTruthy();
+	});
+
+	it('should add the default classes if no inputs are provided', () => {
+		fixture.detectChanges();
+		expect(fixture.nativeElement.className).toBe('flex h-10 overflow-hidden relative rounded-full shrink-0 w-10');
+	});
+
+	it('should add any user defined classes', () => {
+		component.class = 'test-class';
+		fixture.detectChanges();
+		expect(fixture.nativeElement.className).toContain('test-class');
+	});
+
+	it('should change the size when the variant is changed', () => {
+		component.variant = 'small';
+		fixture.detectChanges();
+		expect(fixture.nativeElement.className).toContain('h-6');
+		expect(fixture.nativeElement.className).toContain('w-6');
+		expect(fixture.nativeElement.className).toContain('text-xs');
+
+		component.variant = 'large';
+		fixture.detectChanges();
+		expect(fixture.nativeElement.className).toContain('h-14');
+		expect(fixture.nativeElement.className).toContain('w-14');
+		expect(fixture.nativeElement.className).toContain('text-lg');
+	});
+
+	it('should support brn directives', () => {
+		const mockFixture = TestBed.createComponent(MockComponent);
+		mockFixture.detectChanges();
+		expect(mockFixture.nativeElement.querySelector('span').textContent).toBe('fallback');
+	});
+});

package/src/generators/ui/libs/ui-avatar-helm/files/lib/hlm-avatar.component.ts.template

@@ -0,0 +1,58 @@
+import { NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, Input, signal, ViewEncapsulation } from '@angular/core';
+import { BrnAvatarComponent } from '@spartan-ng/ui-avatar-brain';
+import { hlm } from '@spartan-ng/ui-core';
+import { cva, VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
+	variants: {
+		variant: {
+			small: 'h-6 w-6 text-xs',
+			medium: 'h-10 w-10',
+			large: 'h-14 w-14 text-lg',
+		},
+	},
+	defaultVariants: {
+		variant: 'medium',
+	},
+});
+
+type AvatarVariants = VariantProps<typeof avatarVariants>;
+
+@Component({
+	selector: 'hlm-avatar',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	imports: [NgIf],
+	standalone: true,
+	template: `
+		<ng-container *ngIf="image?.canShow(); else fallback">
+			<ng-content select="[hlmAvatarImage],[brnAvatarImage]" />
+		</ng-container>
+		<ng-template #fallback>
+			<ng-content select="[hlmAvatarFallback],[brnAvatarFallback]" />
+		</ng-template>
+	`,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmAvatarComponent extends BrnAvatarComponent {
+	private readonly _userCls = signal<ClassValue>('');
+	@Input()
+	set class(userCls: ClassValue) {
+		this._userCls.set(userCls);
+	}
+
+	private readonly _variant = signal<AvatarVariants['variant']>('medium');
+	@Input()
+	set variant(variant: AvatarVariants['variant']) {
+		this._variant.set(variant);
+	}
+
+	protected _computedClass = computed(() => this._generateClass());
+	private _generateClass() {
+		return hlm(avatarVariants({ variant: this._variant() }), this._userCls());
+	}
+}