@spartan-ng/cli 0.0.1-alpha.530 → 0.0.1-alpha.531

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.530",
+  "version": "0.0.1-alpha.531",
   "type": "commonjs",
   "dependencies": {
     "@nx/angular": ">=20.0.0",

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

@@ -6,7 +6,7 @@ import type { ClassValue } from 'clsx';
 import { injectBrnButtonConfig } from './hlm-button.token';
 
 export const buttonVariants = cva(
-	'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 cursor-default items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hallo inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_ng-icon:not([class*='size-'])]:size-4 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
 	{
 		variants: {
 			variant: {

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

@@ -1,13 +1,22 @@
 import { HlmInputGroup } from './lib/hlm-input-group';
-import { HlmPrefix } from './lib/hlm-prefix';
-import { HlmPrefixAddon } from './lib/hlm-prefix-addon';
-import { HlmSuffix } from './lib/hlm-suffix';
-import { HlmSuffixAddon } from './lib/hlm-suffix-addon';
+import { HlmInputGroupAddon } from './lib/hlm-input-group-addon';
+import { HlmInputGroupButton } from './lib/hlm-input-group-button';
+import { HlmInputGroupInput } from './lib/hlm-input-group-input';
+import { HlmInputGroupText } from './lib/hlm-input-group-text';
+import { HlmInputGroupTextarea } from './lib/hlm-input-group-textarea';
 
 export * from './lib/hlm-input-group';
-export * from './lib/hlm-prefix';
-export * from './lib/hlm-prefix-addon';
-export * from './lib/hlm-suffix';
-export * from './lib/hlm-suffix-addon';
+export * from './lib/hlm-input-group-addon';
+export * from './lib/hlm-input-group-button';
+export * from './lib/hlm-input-group-input';
+export * from './lib/hlm-input-group-text';
+export * from './lib/hlm-input-group-textarea';
 
-export const HlmInputGroupImports = [HlmInputGroup, HlmSuffixAddon, HlmPrefixAddon, HlmPrefix, HlmSuffix] as const;
+export const HlmInputGroupImports = [
+	HlmInputGroup,
+	HlmInputGroupAddon,
+	HlmInputGroupButton,
+	HlmInputGroupInput,
+	HlmInputGroupText,
+	HlmInputGroupTextarea,
+] as const;

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-input-group-addon.ts.template

@@ -0,0 +1,42 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+
+const inputGroupAddonVariants = cva(
+	"text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			align: {
+				'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+				'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+				'block-start':
+					'[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5',
+				'block-end': '[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	},
+);
+
+type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+
+@Directive({
+	selector: 'hlm-input-group-addon,[hlmInputGroupAddon]',
+	host: {
+		role: 'group',
+		'data-slot': 'input-group-addon',
+		'[attr.data-align]': 'align()',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmInputGroupAddon {
+	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(inputGroupAddonVariants({ align: this.align() }), this.userClass()),
+	);
+}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-input-group-button.ts.template

@@ -0,0 +1,54 @@
+import { computed, Directive, effect, inject, input } from '@angular/core';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
+import { hlm } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+
+const inputGroupAddonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>ng-icon]:px-2 [&>ng-icon:not([class*='size-'])]:size-3.5",
+			sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>ng-icon]:px-2.5',
+			'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>ng-icon]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
+});
+
+type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+
+@Directive({
+	selector: 'button[hlmInputGroupButton]',
+	providers: [
+		provideBrnButtonConfig({
+			variant: 'ghost',
+		}),
+	],
+	hostDirectives: [
+		{
+			directive: HlmButton,
+			inputs: ['variant'],
+		},
+	],
+	host: {
+		'[attr.data-size]': 'size()',
+	},
+})
+export class HlmInputGroupButton {
+	private readonly _hlmButton = inject(HlmButton);
+	public readonly size = input<InputGroupAddonVariants['size']>('xs');
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(inputGroupAddonVariants({ size: this.size() }), this.userClass()),
+	);
+
+	constructor() {
+		effect(() => {
+			this._hlmButton.setClass(this._computedClass());
+		});
+	}
+}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-input-group-input.ts.template

@@ -0,0 +1,31 @@
+import { computed, Directive, effect, inject, input } from '@angular/core';
+import { HlmInput } from '<%- importAlias %>/input';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'input[hlmInputGroupInput]',
+	hostDirectives: [HlmInput],
+	host: {
+		'[class]': '_computedClass()',
+		'data-slot': 'input-group-control',
+	},
+})
+export class HlmInputGroupInput {
+	private readonly _hlmInput = inject(HlmInput);
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+			this.userClass(),
+		),
+	);
+
+	constructor() {
+		effect(() => {
+			this._hlmInput.setClass(this._computedClass());
+		});
+	}
+}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-input-group-text.ts.template

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'span[hlmInputGroupText]',
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmInputGroupText {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			`text-muted-foreground flex items-center gap-2 text-sm [&_ng-icon:not([class*='size-'])]:size-4 [&_ng-icon]:pointer-events-none`,
+			this.userClass(),
+		),
+	);
+}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-input-group-textarea.ts.template

@@ -0,0 +1,31 @@
+import { computed, Directive, effect, inject, input } from '@angular/core';
+import { HlmTextarea } from '<%- importAlias %>/textarea';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'textarea[hlmInputGroupTextarea]',
+	hostDirectives: [HlmTextarea],
+	host: {
+		'[class]': '_computedClass()',
+		'data-slot': 'input-group-control',
+	},
+})
+export class HlmInputGroupTextarea {
+	private readonly _hlmInput = inject(HlmTextarea);
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+			this.userClass(),
+		),
+	);
+
+	constructor() {
+		effect(() => {
+			this._hlmInput.setClass(this._computedClass());
+		});
+	}
+}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-input-group.ts.template

@@ -1,50 +1,33 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { provideHlmIconConfig } from '<%- importAlias %>/icon';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-input-group',
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	providers: [
-		provideHlmIconConfig({
-			size: 'sm',
-		}),
-	],
-	template: `
-		<ng-content select="hlm-prefix-addon, [hlmPrefixAddon]" />
-		<div [class]="_inputWrapperClasses()">
-			<ng-content select="hlm-prefix, [hlmPrefix]" />
-			<ng-content select="input[hlmInput], textarea[hlmInput]"></ng-content>
-			<ng-content select="hlm-suffix, [hlmSuffix]" />
-		</div>
-		<ng-content select="hlm-suffix-addon, [hlmSuffixAddon]" />
-	`,
+@Directive({
+	selector: '[hlmInputGroup],hlm-input-group',
 	host: {
-		'[class]': '_wrapperClasses()',
+		'data-slot': 'input-group',
+		role: 'group',
+		'[class]': '_computedClass()',
 	},
 })
 export class HlmInputGroup {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	public readonly inputWrapperClass = input<ClassValue>('');
 
-	protected readonly _wrapperClasses = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
-			'shadow-xs group flex w-full items-stretch rounded-md has-[*:disabled]:pointer-events-none has-[*:disabled]:opacity-50 ' +
-				// Reset inner input/textarea
-				'[&_[hlmInput]]:h-auto [&_[hlmInput]]:flex-1 [&_[hlmInput]]:border-0 [&_[hlmInput]]:bg-transparent [&_[hlmInput]]:px-0 [&_[hlmInput]]:py-0 [&_[hlmInput]]:shadow-none [&_[hlmInput]]:outline-none [&_[hlmInput]]:ring-0 [&_[hlmInput]]:ring-offset-0 [&_textarea[hlmInput]]:min-h-6' +
-				this.userClass(),
-		),
-	);
+			'group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]',
+			'h-9 min-w-0 has-[>textarea]:h-auto',
+			// Variants based on alignment.
+			'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+			'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+			'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+			'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+			// Focus state.
+			'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+			// Error state.
+			'has-[>.ng-invalid.ng-touched]:ring-destructive/20 has-[>.ng-invalid.ng-touched]:border-destructive dark:has-[>.ng-invalid.ng-touched]:ring-destructive/40',
 
-	protected readonly _inputWrapperClasses = computed(() =>
-		hlm(
-			'border-input bg-background placeholder:text-muted-foreground focus-within:border-ring focus-within:ring-ring/50 z-20 flex h-auto min-h-9 w-full flex-row gap-1 rounded-md border px-3 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-[3px]' +
-				// Invalid States
-				' has-[>.ng-invalid.ng-touched]:text-destructive/20 dark:[&.ng-invalid.ng-touched]:text-destructive/40 has-[>.ng-invalid.ng-touched]:border-destructive has-[>.ng-invalid.ng-touched]:focus-within:ring-destructive' +
-				// Group addon specific
-				' group-has-[hlm-prefix-addon,[hlmPrefixAddon]]:rounded-l-none group-has-[hlm-suffix-addon,[hlmSuffixAddon]]:rounded-r-none group-has-[hlm-prefix-addon,[hlmPrefixAddon]]:border-l-0 group-has-[hlm-suffix-addon,[hlmSuffixAddon]]:border-r-0',
-			this.inputWrapperClass(),
+			this.userClass(),
 		),
 	);
 }

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

@@ -8,6 +8,7 @@ import {
 	Injector,
 	input,
 	linkedSignal,
+	signal,
 	untracked,
 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
@@ -47,6 +48,7 @@ type InputVariants = VariantProps<typeof inputVariants>;
 })
 export class HlmInput implements BrnFormFieldControl, DoCheck {
 	private readonly _injector = inject(Injector);
+	private readonly _additionalClasses = signal<ClassValue>('');
 
 	private readonly _errorStateTracker: ErrorStateTracker;
 
@@ -56,7 +58,7 @@ export class HlmInput implements BrnFormFieldControl, DoCheck {
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm(inputVariants({ error: this._state().error }), this.userClass()),
+		hlm(inputVariants({ error: this._state().error }), this.userClass(), this._additionalClasses()),
 	);
 
 	public readonly error = input<InputVariants['error']>('auto');
@@ -94,4 +96,8 @@ export class HlmInput implements BrnFormFieldControl, DoCheck {
 	setError(error: InputVariants['error']) {
 		this._state.set({ error });
 	}
+
+	setClass(classes: string): void {
+		this._additionalClasses.set(classes);
+	}
 }

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

@@ -8,6 +8,7 @@ import {
 	Injector,
 	input,
 	linkedSignal,
+	signal,
 	untracked,
 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
@@ -48,6 +49,7 @@ type TextareaVariants = VariantProps<typeof textareaVariants>;
 })
 export class HlmTextarea implements BrnFormFieldControl, DoCheck {
 	private readonly _injector = inject(Injector);
+	private readonly _additionalClasses = signal<ClassValue>('');
 
 	private readonly _errorStateTracker: ErrorStateTracker;
 
@@ -57,7 +59,7 @@ export class HlmTextarea implements BrnFormFieldControl, DoCheck {
 
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm(textareaVariants({ error: this._state().error }), this.userClass()),
+		hlm(textareaVariants({ error: this._state().error }), this.userClass(), this._additionalClasses()),
 	);
 
 	public readonly error = input<TextareaVariants['error']>('auto');
@@ -92,7 +94,11 @@ export class HlmTextarea implements BrnFormFieldControl, DoCheck {
 		this._errorStateTracker.updateErrorState();
 	}
 
-	setError(error: TextareaVariants['error']) {
+	public setError(error: TextareaVariants['error']): void {
 		this._state.set({ error });
 	}
+
+	public setClass(classes: string): void {
+		this._additionalClasses.set(classes);
+	}
 }

package/src/generators/ui/supported-ui-libraries.json

@@ -3,7 +3,7 @@
 		"internalName": "ui-accordion-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0"
@@ -21,7 +21,7 @@
 		"internalName": "ui-alert-dialog-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -38,7 +38,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/common": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
@@ -50,7 +50,7 @@
 		"internalName": "ui-avatar-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -76,7 +76,7 @@
 		"internalName": "ui-button-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -85,7 +85,7 @@
 		"internalName": "ui-button-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0"
 		}
@@ -98,7 +98,7 @@
 			"@angular/core": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -128,7 +128,7 @@
 			"@angular/forms": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -136,7 +136,7 @@
 		"internalName": "ui-command-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -148,7 +148,7 @@
 			"@angular/forms": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -160,7 +160,7 @@
 			"@angular/common": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"@angular/cdk": ">=19.0.0"
 		}
 	},
@@ -177,7 +177,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -185,7 +185,7 @@
 		"internalName": "ui-hover-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -202,7 +202,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -211,8 +211,8 @@
 		"internalName": "ui-input-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.530"
+			"class-variance-authority": "^0.7.0",
+			"clsx": "^2.1.1"
 		}
 	},
 	"input-otp": {
@@ -223,7 +223,7 @@
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
 			"@angular/cdk": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530"
+			"@spartan-ng/brain": "0.0.1-alpha.531"
 		}
 	},
 	"kbd": {
@@ -237,7 +237,7 @@
 		"internalName": "ui-label-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -245,7 +245,7 @@
 		"internalName": "ui-menu-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -259,7 +259,7 @@
 			"@angular/cdk": ">=19.0.0",
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
@@ -272,14 +272,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.530"
+			"@spartan-ng/brain": "0.0.1-alpha.531"
 		}
 	},
 	"progress": {
 		"internalName": "ui-progress-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -287,7 +287,7 @@
 		"internalName": "ui-radio-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"@angular/common": ">=19.0.0"
 		}
@@ -304,7 +304,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=19.0.0",
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -315,7 +315,7 @@
 		"internalName": "ui-separator-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -326,7 +326,7 @@
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -335,7 +335,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -353,7 +353,7 @@
 		"internalName": "ui-slider-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -379,7 +379,7 @@
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530"
+			"@spartan-ng/brain": "0.0.1-alpha.531"
 		}
 	},
 	"table": {
@@ -393,7 +393,7 @@
 		"internalName": "ui-tabs-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=19.0.0",
@@ -407,7 +407,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -432,7 +432,7 @@
 		"internalName": "ui-tooltip-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.530"
+			"@spartan-ng/brain": "0.0.1-alpha.531"
 		}
 	},
 	"typography": {

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-prefix-addon.ts.template

@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { BrnAffixes } from '@spartan-ng/brain/input-group';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-prefix-addon,[hlmPrefixAddon]',
-	hostDirectives: [
-		{
-			directive: BrnAffixes,
-			inputs: ['tabindex'],
-		},
-	],
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmPrefixAddon {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'bg-muted border-input focus-visible:border-ring focus-visible:ring-ring/50 block' +
-				' text-muted-foreground inline-flex h-auto min-h-9' +
-				' items-center justify-center whitespace-nowrap border' +
-				' px-3 text-sm font-medium transition-colors' +
-				' focus-visible:outline-none focus-visible:ring-[3px]' +
-				' disabled:pointer-events-none disabled:opacity-50' +
-				' rounded-l-md border-r-0',
-			this.userClass(),
-		),
-	);
-}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-prefix.ts.template

@@ -1,27 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { BrnAffixes } from '@spartan-ng/brain/input-group';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-prefix,[hlmPrefix]',
-	hostDirectives: [
-		{
-			directive: BrnAffixes,
-			inputs: ['tabindex'],
-		},
-	],
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmPrefix {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground inset-y-0 z-10 flex items-center ' + this.userClass()),
-	);
-}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-suffix-addon.ts.template

@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { BrnAffixes } from '@spartan-ng/brain/input-group';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-suffix-addon,[hlmSuffixAddon]',
-	hostDirectives: [
-		{
-			directive: BrnAffixes,
-			inputs: ['tabindex'],
-		},
-	],
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmSuffixAddon {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'bg-muted border-input focus-visible:border-ring focus-visible:ring-ring/50 block' +
-				' text-muted-foreground inline-flex h-auto min-h-9' +
-				' items-center justify-center whitespace-nowrap border' +
-				' px-3 text-sm font-medium transition-colors' +
-				' focus-visible:outline-none focus-visible:ring-[3px]' +
-				' disabled:pointer-events-none disabled:opacity-50' +
-				' border-p-0 rounded-r-md',
-			this.userClass(),
-		),
-	);
-}

package/src/generators/ui/libs/ui-input-group-helm/files/lib/hlm-suffix.ts.template

@@ -1,27 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { BrnAffixes } from '@spartan-ng/brain/input-group';
-import { hlm } from '<%- importAlias %>/utils';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-suffix,[hlmSuffix]',
-	hostDirectives: [
-		{
-			directive: BrnAffixes,
-			inputs: ['tabindex'],
-		},
-	],
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		'[class]': '_computedClass()',
-	},
-})
-export class HlmSuffix {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground inset-y-0 z-10 flex items-center ' + this.userClass()),
-	);
-}