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

package/package.json

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

package/src/generators/migrate-helm-imports/import-map.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
     '@spartan-ng/ui-date-picker-helm': string;
     '@spartan-ng/ui-datepicker-helm': string;
     '@spartan-ng/ui-dialog-helm': string;
+    '@spartan-ng/ui-empty-helm': string;
     '@spartan-ng/ui-form-field-helm': string;
     '@spartan-ng/ui-formfield-helm': string;
     '@spartan-ng/ui-hover-card-helm': string;

package/src/generators/migrate-helm-imports/import-map.js

@@ -20,6 +20,7 @@ exports.default = {
     '@spartan-ng/ui-date-picker-helm': '@spartan-ng/helm/date-picker',
     '@spartan-ng/ui-datepicker-helm': '@spartan-ng/helm/date-picker',
     '@spartan-ng/ui-dialog-helm': '@spartan-ng/helm/dialog',
+    '@spartan-ng/ui-empty-helm': '@spartan-ng/helm/empty',
     '@spartan-ng/ui-form-field-helm': '@spartan-ng/helm/form-field',
     '@spartan-ng/ui-formfield-helm': '@spartan-ng/helm/form-field',
     '@spartan-ng/ui-hover-card-helm': '@spartan-ng/helm/hover-card',

package/src/generators/migrate-helm-imports/import-map.js.map

@@ -1 +1 @@
-{"version":3,"file":"import-map.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-helm-imports/import-map.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACd,+BAA+B,EAAE,4BAA4B;IAC7D,2BAA2B,EAAE,wBAAwB;IACrD,kCAAkC,EAAE,+BAA+B;IACnE,iCAAiC,EAAE,+BAA+B;IAClE,kCAAkC,EAAE,+BAA+B;IACnE,iCAAiC,EAAE,+BAA+B;IAClE,4BAA4B,EAAE,yBAAyB;IACvD,2BAA2B,EAAE,wBAAwB;IACrD,gCAAgC,EAAE,6BAA6B;IAC/D,4BAA4B,EAAE,yBAAyB;IACvD,kCAAkC,EAAE,+BAA+B;IACnE,8BAA8B,EAAE,2BAA2B;IAC3D,0BAA0B,EAAE,uBAAuB;IACnD,8BAA8B,EAAE,2BAA2B;IAC3D,8BAA8B,EAAE,2BAA2B;IAC3D,6BAA6B,EAAE,0BAA0B;IACzD,iCAAiC,EAAE,8BAA8B;IACjE,gCAAgC,EAAE,8BAA8B;IAChE,4BAA4B,EAAE,yBAAyB;IACvD,gCAAgC,EAAE,6BAA6B;IAC/D,+BAA+B,EAAE,6BAA6B;IAC9D,gCAAgC,EAAE,6BAA6B;IAC/D,+BAA+B,EAAE,6BAA6B;IAC9D,0BAA0B,EAAE,uBAAuB;IACnD,2BAA2B,EAAE,wBAAwB;IACrD,+BAA+B,EAAE,4BAA4B;IAC7D,8BAA8B,EAAE,4BAA4B;IAC5D,2BAA2B,EAAE,wBAAwB;IACrD,0BAA0B,EAAE,uBAAuB;IACnD,gCAAgC,EAAE,6BAA6B;IAC/D,6BAA6B,EAAE,0BAA0B;IACzD,8BAA8B,EAAE,2BAA2B;IAC3D,iCAAiC,EAAE,8BAA8B;IACjE,gCAAgC,EAAE,8BAA8B;IAChE,iCAAiC,EAAE,8BAA8B;IACjE,gCAAgC,EAAE,8BAA8B;IAChE,4BAA4B,EAAE,yBAAyB;IACvD,+BAA+B,EAAE,4BAA4B;IAC7D,2BAA2B,EAAE,wBAAwB;IACrD,8BAA8B,EAAE,2BAA2B;IAC3D,4BAA4B,EAAE,yBAAyB;IACvD,4BAA4B,EAAE,yBAAyB;IACvD,6BAA6B,EAAE,0BAA0B;IACzD,4BAA4B,EAAE,yBAAyB;IACvD,2BAA2B,EAAE,wBAAwB;IACrD,0BAA0B,EAAE,uBAAuB;IACnD,4BAA4B,EAAE,yBAAyB;IACvD,kCAAkC,EAAE,+BAA+B;IACnE,iCAAiC,EAAE,+BAA+B;IAClE,6BAA6B,EAAE,0BAA0B;IACzD,gCAAgC,EAAE,6BAA6B;CAC/D,CAAC"}
+{"version":3,"file":"import-map.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-helm-imports/import-map.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACd,+BAA+B,EAAE,4BAA4B;IAC7D,2BAA2B,EAAE,wBAAwB;IACrD,kCAAkC,EAAE,+BAA+B;IACnE,iCAAiC,EAAE,+BAA+B;IAClE,kCAAkC,EAAE,+BAA+B;IACnE,iCAAiC,EAAE,+BAA+B;IAClE,4BAA4B,EAAE,yBAAyB;IACvD,2BAA2B,EAAE,wBAAwB;IACrD,gCAAgC,EAAE,6BAA6B;IAC/D,4BAA4B,EAAE,yBAAyB;IACvD,kCAAkC,EAAE,+BAA+B;IACnE,8BAA8B,EAAE,2BAA2B;IAC3D,0BAA0B,EAAE,uBAAuB;IACnD,8BAA8B,EAAE,2BAA2B;IAC3D,8BAA8B,EAAE,2BAA2B;IAC3D,6BAA6B,EAAE,0BAA0B;IACzD,iCAAiC,EAAE,8BAA8B;IACjE,gCAAgC,EAAE,8BAA8B;IAChE,4BAA4B,EAAE,yBAAyB;IACvD,2BAA2B,EAAE,wBAAwB;IACrD,gCAAgC,EAAE,6BAA6B;IAC/D,+BAA+B,EAAE,6BAA6B;IAC9D,gCAAgC,EAAE,6BAA6B;IAC/D,+BAA+B,EAAE,6BAA6B;IAC9D,0BAA0B,EAAE,uBAAuB;IACnD,2BAA2B,EAAE,wBAAwB;IACrD,+BAA+B,EAAE,4BAA4B;IAC7D,8BAA8B,EAAE,4BAA4B;IAC5D,2BAA2B,EAAE,wBAAwB;IACrD,0BAA0B,EAAE,uBAAuB;IACnD,gCAAgC,EAAE,6BAA6B;IAC/D,6BAA6B,EAAE,0BAA0B;IACzD,8BAA8B,EAAE,2BAA2B;IAC3D,iCAAiC,EAAE,8BAA8B;IACjE,gCAAgC,EAAE,8BAA8B;IAChE,iCAAiC,EAAE,8BAA8B;IACjE,gCAAgC,EAAE,8BAA8B;IAChE,4BAA4B,EAAE,yBAAyB;IACvD,+BAA+B,EAAE,4BAA4B;IAC7D,2BAA2B,EAAE,wBAAwB;IACrD,8BAA8B,EAAE,2BAA2B;IAC3D,4BAA4B,EAAE,yBAAyB;IACvD,4BAA4B,EAAE,yBAAyB;IACvD,6BAA6B,EAAE,0BAA0B;IACzD,4BAA4B,EAAE,yBAAyB;IACvD,2BAA2B,EAAE,wBAAwB;IACrD,0BAA0B,EAAE,uBAAuB;IACnD,4BAA4B,EAAE,yBAAyB;IACvD,kCAAkC,EAAE,+BAA+B;IACnE,iCAAiC,EAAE,+BAA+B;IAClE,6BAA6B,EAAE,0BAA0B;IACzD,gCAAgC,EAAE,6BAA6B;CAC/D,CAAC"}

package/src/generators/ui/libs/textarea/generator.d.ts

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

package/src/generators/ui/libs/textarea/generator.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'textarea',
+        internalName: 'ui-textarea-helm',
+        publicName: 'textarea',
+    });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/textarea/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/textarea/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,UAAU;QACzB,YAAY,EAAE,kBAAkB;QAChC,UAAU,EAAE,UAAU;KACtB,CAAC,CAAC;AACJ,CAAC"}

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-empty-helm/files/index.ts.template

@@ -0,0 +1,22 @@
+import { HlmEmpty } from './lib/hlm-empty';
+import { HlmEmptyContent } from './lib/hlm-empty-content';
+import { HlmEmptyDescription } from './lib/hlm-empty-description';
+import { HlmEmptyHeader } from './lib/hlm-empty-header';
+import { HlmEmptyMedia } from './lib/hlm-empty-media';
+import { HlmEmptyTitle } from './lib/hlm-empty-title';
+
+export * from './lib/hlm-empty';
+export * from './lib/hlm-empty-content';
+export * from './lib/hlm-empty-description';
+export * from './lib/hlm-empty-header';
+export * from './lib/hlm-empty-media';
+export * from './lib/hlm-empty-title';
+
+export const HlmEmptyImports = [
+	HlmEmpty,
+	HlmEmptyContent,
+	HlmEmptyDescription,
+	HlmEmptyHeader,
+	HlmEmptyTitle,
+	HlmEmptyMedia,
+] as const;

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

@@ -0,0 +1,18 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmEmptyContent]',
+	host: {
+		'data-slot': 'empty-content',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmEmptyContent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm('text-balancet flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-sm', this.userClass()),
+	);
+}

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

@@ -0,0 +1,21 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmEmptyDescription]',
+	host: {
+		'data-slot': 'empty-description',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmEmptyDescription {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,18 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmEmptyHeader]',
+	host: {
+		'data-slot': 'empty-header',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmEmptyHeader {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm('flex max-w-sm flex-col items-center gap-2 text-center', this.userClass()),
+	);
+}

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

@@ -0,0 +1,37 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+
+const emptyMediaVariants = cva(
+	'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_ng-icon:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;
+
+@Directive({
+	selector: '[hlmEmptyMedia]',
+	host: {
+		'data-slot': 'empty-media',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmEmptyMedia {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly variant = input<EmptyMediaVariants['variant']>();
+
+	protected readonly _computedClass = computed(() =>
+		hlm(emptyMediaVariants({ variant: this.variant() }), this.userClass()),
+	);
+}

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

@@ -0,0 +1,16 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmEmptyTitle]',
+	host: {
+		'data-slot': 'empty-title',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmEmptyTitle {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() => hlm('text-lg font-medium tracking-tight', this.userClass()));
+}

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

@@ -0,0 +1,21 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmEmpty]',
+	host: {
+		'data-slot': 'empty',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmEmpty {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+			this.userClass(),
+		),
+	);
+}

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'empty',
+        internalName: 'ui-empty-helm',
+        publicName: 'ui-empty-helm',
+    });
+}
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-empty-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,OAAO;QACtB,YAAY,EAAE,eAAe;QAC7B,UAAU,EAAE,eAAe;KAC3B,CAAC,CAAC;AACJ,CAAC"}

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';
@@ -22,8 +23,8 @@ export const inputVariants = cva(
 	{
 		variants: {
 			error: {
-				auto: '[&.ng-invalid.ng-touched]:text-destructive/20 dark:[&.ng-invalid.ng-touched]:text-destructive/40 [&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:focus-visible:ring-destructive',
-				true: 'text-destructive/20 dark:text-destructive/40 border-destructive focus-visible:ring-destructive',
+				auto: '[&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:ring-destructive/20 dark:[&.ng-invalid.ng-touched]:ring-destructive/40',
+				true: 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
 			},
 		},
 		defaultVariants: {
@@ -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/index.ts.template

@@ -0,0 +1,5 @@
+import { HlmTextarea } from './lib/hlm-textarea';
+
+export * from './lib/hlm-textarea';
+
+export const HlmTextareaImports = [HlmTextarea] as const;

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

@@ -0,0 +1,104 @@
+import {
+	computed,
+	Directive,
+	type DoCheck,
+	effect,
+	forwardRef,
+	inject,
+	Injector,
+	input,
+	linkedSignal,
+	signal,
+	untracked,
+} from '@angular/core';
+import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
+import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
+import { hlm } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+
+export const textareaVariants = cva(
+	'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] [field-sizing:content] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+	{
+		variants: {
+			error: {
+				auto: '[&.ng-invalid.ng-touched]:border-destructive [&.ng-invalid.ng-touched]:ring-destructive/20 dark:[&.ng-invalid.ng-touched]:ring-destructive/40',
+				true: 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+			},
+		},
+		defaultVariants: {
+			error: 'auto',
+		},
+	},
+);
+type TextareaVariants = VariantProps<typeof textareaVariants>;
+
+@Directive({
+	selector: '[hlmTextarea]',
+	host: {
+		'data-slot': 'textarea',
+		'[class]': '_computedClass()',
+	},
+	providers: [
+		{
+			provide: BrnFormFieldControl,
+			useExisting: forwardRef(() => HlmTextarea),
+		},
+	],
+})
+export class HlmTextarea implements BrnFormFieldControl, DoCheck {
+	private readonly _injector = inject(Injector);
+	private readonly _additionalClasses = signal<ClassValue>('');
+
+	private readonly _errorStateTracker: ErrorStateTracker;
+
+	private readonly _defaultErrorStateMatcher = inject(ErrorStateMatcher);
+	private readonly _parentForm = inject(NgForm, { optional: true });
+	private readonly _parentFormGroup = inject(FormGroupDirective, { optional: true });
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(textareaVariants({ error: this._state().error }), this.userClass(), this._additionalClasses()),
+	);
+
+	public readonly error = input<TextareaVariants['error']>('auto');
+
+	protected readonly _state = linkedSignal(() => ({ error: this.error() }));
+
+	public readonly ngControl: NgControl | null = this._injector.get(NgControl, null);
+
+	public readonly errorState = computed(() => this._errorStateTracker.errorState());
+
+	constructor() {
+		this._errorStateTracker = new ErrorStateTracker(
+			this._defaultErrorStateMatcher,
+			this.ngControl,
+			this._parentFormGroup,
+			this._parentForm,
+		);
+
+		effect(() => {
+			const error = this._errorStateTracker.errorState();
+			untracked(() => {
+				if (this.ngControl) {
+					const shouldShowError = error && this.ngControl.invalid && (this.ngControl.touched || this.ngControl.dirty);
+					this._errorStateTracker.errorState.set(shouldShowError ? true : false);
+					this.setError(shouldShowError ? true : 'auto');
+				}
+			});
+		});
+	}
+
+	ngDoCheck() {
+		this._errorStateTracker.updateErrorState();
+	}
+
+	public setError(error: TextareaVariants['error']): void {
+		this._state.set({ error });
+	}
+
+	public setClass(classes: string): void {
+		this._additionalClasses.set(classes);
+	}
+}

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, {
+        ...options,
+        primitiveName: 'textarea',
+        internalName: 'ui-textarea-helm',
+        publicName: 'ui-textarea-helm',
+    });
+}
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-textarea-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,UAAU;QACzB,YAAY,EAAE,kBAAkB;QAChC,UAAU,EAAE,kBAAkB;KAC9B,CAAC,CAAC;AACJ,CAAC"}

package/src/generators/ui/primitive-deps.js

@@ -21,6 +21,7 @@ exports.primitiveDependencies = {
     'context-menu': ['utils'],
     'date-picker': ['utils', 'calendar', 'icon', 'popover'],
     dialog: ['utils'],
+    empty: ['utils'],
     'form-field': ['utils'],
     'hover-card': ['utils'],
     icon: ['utils'],
@@ -47,6 +48,7 @@ exports.primitiveDependencies = {
     switch: ['utils'],
     table: ['utils'],
     tabs: ['utils'],
+    textarea: ['utils', 'form-field'],
     toggle: ['utils'],
     'toggle-group': ['utils'],
     tooltip: ['utils'],

package/src/generators/ui/primitive-deps.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":";;;AAEa,QAAA,qBAAqB,GAAmC;IACpE,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;IACnC,cAAc,EAAE,CAAC,OAAO,CAAC;IACzB,YAAY,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC;IACrD,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAC7B,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;IACrC,IAAI,EAAE,CAAC,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,CAAC,OAAO,CAAC;IACtB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;IACpC,cAAc,EAAE,CAAC,OAAO,CAAC;IACzB,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC;IACvD,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,OAAO,CAAC;IACvB,YAAY,EAAE,CAAC,OAAO,CAAC;IACvB,IAAI,EAAE,CAAC,OAAO,CAAC;IACf,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC;IAC9B,aAAa,EAAE,CAAC,OAAO,CAAC;IACxB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IAC9B,GAAG,EAAE,CAAC,OAAO,CAAC;IACd,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,CAAC,OAAO,CAAC;IAClB,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;IACvC,OAAO,EAAE,CAAC,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,OAAO,CAAC;IACxB,aAAa,EAAE,CAAC,OAAO,CAAC;IACxB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,CAAC;IACvC,SAAS,EAAE,CAAC,OAAO,CAAC;IACpB,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,CAAC;IAC9E,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnB,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,CAAC,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,KAAK,EAAE,CAAC,OAAO,CAAC;IAChB,IAAI,EAAE,CAAC,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC;IACjC,MAAM,EAAE,CAAC,OAAO,CAAC;IACjB,cAAc,EAAE,CAAC,OAAO,CAAC;IACzB,OAAO,EAAE,CAAC,OAAO,CAAC;IAClB,KAAK,EAAE,EAAE;CACT,CAAC;AAEK,MAAM,sBAAsB,GAAG,CAAC,UAAuB,EAAe,EAAE;IAC9E,MAAM,mBAAmB,GAAG,IAAI,GAAG,EAAa,CAAC;IAEjD,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACpC,MAAM,IAAI,GAAG,6BAAqB,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACpD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/B,2FAA2F;gBAC3F,mBAAmB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;QACF,CAAC;IACF,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;AACxC,CAAC,CAAC;AAdW,QAAA,sBAAsB,0BAcjC"}

package/src/generators/ui/primitives.d.ts

@@ -1 +1 @@
-export type Primitive = 'accordion' | 'alert' | 'alert-dialog' | 'aspect-ratio' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'button' | 'button-group' | 'calendar' | 'card' | 'carousel' | 'checkbox' | 'collapsible' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'form-field' | 'hover-card' | 'icon' | 'input' | 'input-group' | 'input-otp' | 'kbd' | 'label' | 'menu' | 'menubar' | 'pagination' | 'popover' | 'progress' | 'radio-group' | 'scroll-area' | 'select' | 'separator' | 'sheet' | 'sidebar' | 'skeleton' | 'slider' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'toggle' | 'toggle-group' | 'tooltip' | 'utils';
+export type Primitive = 'accordion' | 'alert' | 'alert-dialog' | 'aspect-ratio' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'button' | 'button-group' | 'calendar' | 'card' | 'carousel' | 'checkbox' | 'collapsible' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'empty' | 'form-field' | 'hover-card' | 'icon' | 'input' | 'input-group' | 'input-otp' | 'kbd' | 'label' | 'menu' | 'menubar' | 'pagination' | 'popover' | 'progress' | 'radio-group' | 'scroll-area' | 'select' | 'separator' | 'sheet' | 'sidebar' | 'skeleton' | 'slider' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'textarea' | 'toggle' | 'toggle-group' | 'tooltip' | 'utils';

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.529",
+			"@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.529",
+			"@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.529",
+			"@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.529",
+			"@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.529",
+			"@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.529",
+			"@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.529",
+			"@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.529",
+			"@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.529",
+			"@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.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -160,16 +160,24 @@
 			"@angular/common": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"@angular/cdk": ">=19.0.0"
 		}
 	},
+	"empty": {
+		"internalName": "ui-empty-helm",
+		"peerDependencies": {
+			"@angular/core": ">=19.0.0",
+			"clsx": "^2.1.1",
+			"class-variance-authority": "^0.7.0"
+		}
+	},
 	"form-field": {
 		"internalName": "ui-form-field-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -177,7 +185,7 @@
 		"internalName": "ui-hover-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -194,7 +202,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -203,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.529"
+			"class-variance-authority": "^0.7.0",
+			"clsx": "^2.1.1"
 		}
 	},
 	"input-otp": {
@@ -215,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.529"
+			"@spartan-ng/brain": "0.0.1-alpha.531"
 		}
 	},
 	"kbd": {
@@ -229,7 +237,7 @@
 		"internalName": "ui-label-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -237,7 +245,7 @@
 		"internalName": "ui-menu-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -251,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.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
@@ -264,14 +272,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.529"
+			"@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.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -279,7 +287,7 @@
 		"internalName": "ui-radio-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"@angular/common": ">=19.0.0"
 		}
@@ -296,7 +304,7 @@
 		"peerDependencies": {
 			"@angular/cdk": ">=19.0.0",
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -307,7 +315,7 @@
 		"internalName": "ui-separator-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -318,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.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -327,7 +335,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@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",
@@ -345,7 +353,7 @@
 		"internalName": "ui-slider-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -371,7 +379,7 @@
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529"
+			"@spartan-ng/brain": "0.0.1-alpha.531"
 		}
 	},
 	"table": {
@@ -385,7 +393,7 @@
 		"internalName": "ui-tabs-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=19.0.0",
@@ -394,6 +402,16 @@
 			"rxjs": "^7.8.0"
 		}
 	},
+	"textarea": {
+		"internalName": "ui-textarea-helm",
+		"peerDependencies": {
+			"@angular/core": ">=19.0.0",
+			"@angular/forms": ">=19.0.0",
+			"@spartan-ng/brain": "0.0.1-alpha.531",
+			"class-variance-authority": "^0.7.0",
+			"clsx": "^2.1.1"
+		}
+	},
 	"toggle": {
 		"internalName": "ui-toggle-helm",
 		"peerDependencies": {
@@ -414,7 +432,7 @@
 		"internalName": "ui-tooltip-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.529"
+			"@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()),
-	);
-}