@spartan-ng/cli 0.0.1-alpha.514 → 0.0.1-alpha.516

package/package.json

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

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

@@ -3,6 +3,8 @@ import { HlmButton } from './lib/hlm-button';
 export * from './lib/hlm-button';
 export * from './lib/hlm-button.token';
 
+export const HlmButtonImports = [HlmButton] as const;
+
 @NgModule({
 	imports: [HlmButton],
 	exports: [HlmButton],

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

@@ -1,4 +1,5 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { NgTemplateOutlet } from '@angular/common';
 import {
 	booleanAttribute,
 	ChangeDetectionStrategy,
@@ -16,17 +17,21 @@ import {
 	BrnCalendarCellButton,
 	BrnCalendarGrid,
 	BrnCalendarHeader,
+	BrnCalendarMonthSelect,
 	BrnCalendarMulti,
 	BrnCalendarNextButton,
 	BrnCalendarPreviousButton,
 	BrnCalendarWeek,
 	BrnCalendarWeekday,
+	BrnCalendarYearSelect,
 	injectBrnCalendarI18n,
 	Weekday,
 } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { buttonVariants } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmSelectImports } from '<%- importAlias %>/select';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
@@ -44,6 +49,11 @@ import type { ClassValue } from 'clsx';
 		BrnCalendarGrid,
 		NgIcon,
 		HlmIcon,
+		BrnCalendarMonthSelect,
+		NgTemplateOutlet,
+		BrnSelectImports,
+		HlmSelectImports,
+		BrnCalendarYearSelect,
 	],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	template: `
@@ -64,8 +74,49 @@ import type { ClassValue } from 'clsx';
 				<!-- Header -->
 				<div class="space-y-4">
 					<div class="relative flex items-center justify-center pt-1">
-						<div brnCalendarHeader class="text-sm font-medium">
-							{{ _heading() }}
+						<div class="flex w-full items-center justify-center gap-1.5">
+							<ng-template #month>
+								<brn-select brnCalendarMonthSelect>
+									<hlm-select-trigger size="sm" [class]="_selectClass">
+										<brn-select-value />
+									</hlm-select-trigger>
+									<hlm-select-content class="max-h-80">
+										@for (month of _i18n.config().months(); track month) {
+											<hlm-option [value]="month">{{ month }}</hlm-option>
+										}
+									</hlm-select-content>
+								</brn-select>
+							</ng-template>
+							<ng-template #year>
+								<brn-select brnCalendarYearSelect>
+									<hlm-select-trigger size="sm" [class]="_selectClass">
+										<brn-select-value />
+									</hlm-select-trigger>
+									<hlm-select-content class="max-h-80">
+										@for (year of _i18n.config().years(); track year) {
+											<hlm-option [value]="year">{{ year }}</hlm-option>
+										}
+									</hlm-select-content>
+								</brn-select>
+							</ng-template>
+							@let heading = _heading();
+							@switch (captionLayout()) {
+								@case ('dropdown') {
+									<ng-container [ngTemplateOutlet]="month" />
+									<ng-container [ngTemplateOutlet]="year" />
+								}
+								@case ('dropdown-months') {
+									<ng-container [ngTemplateOutlet]="month" />
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.year }}</div>
+								}
+								@case ('dropdown-years') {
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.month }}</div>
+									<ng-container [ngTemplateOutlet]="year" />
+								}
+								@case ('label') {
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.header }}</div>
+								}
+							}
 						</div>
 
 						<div class="flex items-center space-x-1">
@@ -137,6 +188,9 @@ export class HlmCalendarMulti<T> {
 	/** The maximum date that can be selected. */
 	public readonly max = input<T>();
 
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
+
 	/** The minimum selectable dates.  */
 	public readonly minSelection = input<number, NumberInput>(undefined, {
 		transform: numberAttribute,
@@ -170,14 +224,16 @@ export class HlmCalendarMulti<T> {
 	private readonly _calendar = viewChild.required(BrnCalendarMulti);
 
 	/** Get the heading for the current month and year */
-	protected readonly _heading = computed(() =>
-		this._i18n
-			.config()
-			.formatHeader(
-				this._dateAdapter.getMonth(this._calendar().focusedDate()),
-				this._dateAdapter.getYear(this._calendar().focusedDate()),
-			),
-	);
+	protected readonly _heading = computed(() => {
+		const config = this._i18n.config();
+		const date = this._calendar().focusedDate();
+
+		return {
+			header: config.formatHeader(this._dateAdapter.getMonth(date), this._dateAdapter.getYear(date)),
+			month: config.formatMonth(this._dateAdapter.getMonth(date)),
+			year: config.formatYear(this._dateAdapter.getYear(date)),
+		};
+	});
 
 	protected readonly _btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
@@ -187,4 +243,6 @@ export class HlmCalendarMulti<T> {
 		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 	);
+
+	protected readonly _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ml-1';
 }

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

@@ -1,4 +1,5 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { NgTemplateOutlet } from '@angular/common';
 import {
 	booleanAttribute,
 	ChangeDetectionStrategy,
@@ -16,17 +17,21 @@ import {
 	BrnCalendarCellButton,
 	BrnCalendarGrid,
 	BrnCalendarHeader,
+	BrnCalendarMonthSelect,
 	BrnCalendarNextButton,
 	BrnCalendarPreviousButton,
 	BrnCalendarRange,
 	BrnCalendarWeek,
 	BrnCalendarWeekday,
+	BrnCalendarYearSelect,
 	injectBrnCalendarI18n,
 	Weekday,
 } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { buttonVariants } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmSelectImports } from '<%- importAlias %>/select';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
@@ -44,6 +49,11 @@ import type { ClassValue } from 'clsx';
 		NgIcon,
 		HlmIcon,
 		BrnCalendarRange,
+		BrnCalendarMonthSelect,
+		HlmSelectImports,
+		BrnSelectImports,
+		BrnCalendarYearSelect,
+		NgTemplateOutlet,
 	],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	template: `
@@ -63,8 +73,49 @@ import type { ClassValue } from 'clsx';
 				<!-- Header -->
 				<div class="space-y-4">
 					<div class="relative flex items-center justify-center pt-1">
-						<div brnCalendarHeader class="text-sm font-medium">
-							{{ _heading() }}
+						<div class="flex w-full items-center justify-center gap-1.5">
+							<ng-template #month>
+								<brn-select brnCalendarMonthSelect>
+									<hlm-select-trigger size="sm" [class]="_selectClass">
+										<brn-select-value />
+									</hlm-select-trigger>
+									<hlm-select-content class="max-h-80">
+										@for (month of _i18n.config().months(); track month) {
+											<hlm-option [value]="month">{{ month }}</hlm-option>
+										}
+									</hlm-select-content>
+								</brn-select>
+							</ng-template>
+							<ng-template #year>
+								<brn-select brnCalendarYearSelect>
+									<hlm-select-trigger size="sm" [class]="_selectClass">
+										<brn-select-value />
+									</hlm-select-trigger>
+									<hlm-select-content class="max-h-80">
+										@for (year of _i18n.config().years(); track year) {
+											<hlm-option [value]="year">{{ year }}</hlm-option>
+										}
+									</hlm-select-content>
+								</brn-select>
+							</ng-template>
+							@let heading = _heading();
+							@switch (captionLayout()) {
+								@case ('dropdown') {
+									<ng-container [ngTemplateOutlet]="month" />
+									<ng-container [ngTemplateOutlet]="year" />
+								}
+								@case ('dropdown-months') {
+									<ng-container [ngTemplateOutlet]="month" />
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.year }}</div>
+								}
+								@case ('dropdown-years') {
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.month }}</div>
+									<ng-container [ngTemplateOutlet]="year" />
+								}
+								@case ('label') {
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.header }}</div>
+								}
+							}
 						</div>
 
 						<div class="flex items-center space-x-1">
@@ -136,6 +187,9 @@ export class HlmCalendarRange<T> {
 	/** The maximum date that can be selected. */
 	public readonly max = input<T>();
 
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
+
 	/** Determine if the date picker is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
@@ -162,14 +216,16 @@ export class HlmCalendarRange<T> {
 	private readonly _calendar = viewChild.required(BrnCalendarRange);
 
 	/** Get the heading for the current month and year */
-	protected readonly _heading = computed(() =>
-		this._i18n
-			.config()
-			.formatHeader(
-				this._dateAdapter.getMonth(this._calendar().focusedDate()),
-				this._dateAdapter.getYear(this._calendar().focusedDate()),
-			),
-	);
+	protected readonly _heading = computed(() => {
+		const config = this._i18n.config();
+		const date = this._calendar().focusedDate();
+
+		return {
+			header: config.formatHeader(this._dateAdapter.getMonth(date), this._dateAdapter.getYear(date)),
+			month: config.formatMonth(this._dateAdapter.getMonth(date)),
+			year: config.formatYear(this._dateAdapter.getYear(date)),
+		};
+	});
 
 	protected readonly _btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
@@ -182,4 +238,6 @@ export class HlmCalendarRange<T> {
 		'data-[range-end]:rounded-r-md',
 		'data-[range-between]:bg-accent data-[range-between]:text-accent-foreground data-[range-between]:rounded-none',
 	);
+
+	protected readonly _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ml-1';
 }

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

@@ -1,4 +1,5 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { NgTemplateOutlet } from '@angular/common';
 import {
 	booleanAttribute,
 	ChangeDetectionStrategy,
@@ -17,16 +18,20 @@ import {
 	BrnCalendarCellButton,
 	BrnCalendarGrid,
 	BrnCalendarHeader,
+	BrnCalendarMonthSelect,
 	BrnCalendarNextButton,
 	BrnCalendarPreviousButton,
 	BrnCalendarWeek,
 	BrnCalendarWeekday,
+	BrnCalendarYearSelect,
 	injectBrnCalendarI18n,
 	Weekday,
 } from '@spartan-ng/brain/calendar';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
+import { BrnSelectImports } from '@spartan-ng/brain/select';
 import { buttonVariants } from '<%- importAlias %>/button';
 import { HlmIcon } from '<%- importAlias %>/icon';
+import { HlmSelectImports } from '<%- importAlias %>/select';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
@@ -44,6 +49,14 @@ import type { ClassValue } from 'clsx';
 		BrnCalendarGrid,
 		NgIcon,
 		HlmIcon,
+		BrnSelectImports,
+		HlmSelectImports,
+		BrnCalendarPreviousButton,
+		BrnCalendarMonthSelect,
+		BrnCalendarMonthSelect,
+		BrnCalendarMonthSelect,
+		BrnCalendarYearSelect,
+		NgTemplateOutlet,
 	],
 	viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })],
 	template: `
@@ -62,8 +75,49 @@ import type { ClassValue } from 'clsx';
 				<!-- Header -->
 				<div class="space-y-4">
 					<div class="relative flex items-center justify-center pt-1">
-						<div brnCalendarHeader class="text-sm font-medium">
-							{{ _heading() }}
+						<div class="flex w-full items-center justify-center gap-1.5">
+							<ng-template #month>
+								<brn-select brnCalendarMonthSelect>
+									<hlm-select-trigger size="sm" [class]="_selectClass">
+										<brn-select-value />
+									</hlm-select-trigger>
+									<hlm-select-content class="max-h-80">
+										@for (month of _i18n.config().months(); track month) {
+											<hlm-option [value]="month">{{ month }}</hlm-option>
+										}
+									</hlm-select-content>
+								</brn-select>
+							</ng-template>
+							<ng-template #year>
+								<brn-select brnCalendarYearSelect>
+									<hlm-select-trigger size="sm" [class]="_selectClass">
+										<brn-select-value />
+									</hlm-select-trigger>
+									<hlm-select-content class="max-h-80">
+										@for (year of _i18n.config().years(); track year) {
+											<hlm-option [value]="year">{{ year }}</hlm-option>
+										}
+									</hlm-select-content>
+								</brn-select>
+							</ng-template>
+							@let heading = _heading();
+							@switch (captionLayout()) {
+								@case ('dropdown') {
+									<ng-container [ngTemplateOutlet]="month" />
+									<ng-container [ngTemplateOutlet]="year" />
+								}
+								@case ('dropdown-months') {
+									<ng-container [ngTemplateOutlet]="month" />
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.year }}</div>
+								}
+								@case ('dropdown-years') {
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.month }}</div>
+									<ng-container [ngTemplateOutlet]="year" />
+								}
+								@case ('label') {
+									<div brnCalendarHeader class="text-sm font-medium">{{ heading.header }}</div>
+								}
+							}
 						</div>
 
 						<div class="flex items-center space-x-1">
@@ -135,6 +189,9 @@ export class HlmCalendar<T> {
 	/** The maximum date that can be selected. */
 	public readonly max = input<T>();
 
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
+
 	/** Determine if the date picker is disabled. */
 	public readonly disabled = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
@@ -158,14 +215,16 @@ export class HlmCalendar<T> {
 	private readonly _calendar = viewChild.required(BrnCalendar);
 
 	/** Get the heading for the current month and year */
-	protected readonly _heading = computed(() =>
-		this._i18n
-			.config()
-			.formatHeader(
-				this._dateAdapter.getMonth(this._calendar().focusedDate()),
-				this._dateAdapter.getYear(this._calendar().focusedDate()),
-			),
-	);
+	protected readonly _heading = computed(() => {
+		const config = this._i18n.config();
+		const date = this._calendar().focusedDate();
+
+		return {
+			header: config.formatHeader(this._dateAdapter.getMonth(date), this._dateAdapter.getYear(date)),
+			month: config.formatMonth(this._dateAdapter.getMonth(date)),
+			year: config.formatYear(this._dateAdapter.getYear(date)),
+		};
+	});
 
 	protected readonly _btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
@@ -175,4 +234,6 @@ export class HlmCalendar<T> {
 		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary dark:hover:text-accent-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 	);
+
+	protected readonly _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ml-1';
 }

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker-multi.ts.template

@@ -60,6 +60,7 @@ let nextId = 0;
 				<hlm-calendar-multi
 					calendarClass="border-0 rounded-none"
 					[date]="_mutableDate()"
+					[captionLayout]="captionLayout()"
 					[min]="min()"
 					[max]="max()"
 					[minSelection]="minSelection()"
@@ -90,7 +91,10 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	);
 
 	/** The id of the button that opens the date picker. */
-	public readonly buttonId = input<string>(`hlm-date-picker-multi-${nextId++}`);
+	public readonly buttonId = input<string>(`hlm-date-picker-multi-${++nextId}`);
+
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();

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

@@ -58,6 +58,7 @@ let nextId = 0;
 			<div hlmPopoverContent class="w-auto p-0" *brnPopoverContent="let ctx">
 				<hlm-calendar
 					calendarClass="border-0 rounded-none"
+					[captionLayout]="captionLayout()"
 					[date]="_mutableDate()"
 					[min]="min()"
 					[max]="max()"
@@ -87,7 +88,10 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	);
 
 	/** The id of the button that opens the date picker. */
-	public readonly buttonId = input<string>(`hlm-date-picker-${nextId++}`);
+	public readonly buttonId = input<string>(`hlm-date-picker-${++nextId}`);
+
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-range-picker.ts.template

@@ -65,6 +65,7 @@ let nextId = 0;
 				<hlm-calendar-range
 					calendarClass="border-0 rounded-none"
 					[startDate]="_start()"
+					[captionLayout]="captionLayout()"
 					[endDate]="_end()"
 					[min]="min()"
 					[max]="max()"
@@ -95,7 +96,10 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 	);
 
 	/** The id of the button that opens the date picker. */
-	public readonly buttonId = input<string>(`hlm-date-picker-range-${nextId++}`);
+	public readonly buttonId = input<string>(`hlm-date-picker-range-${++nextId}`);
+
+	/** Show dropdowns to navigate between months or years. */
+	public readonly captionLayout = input<'dropdown' | 'label' | 'dropdown-months' | 'dropdown-years'>('label');
 
 	/** The minimum date that can be selected.*/
 	public readonly min = input<T>();

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

@@ -7,8 +7,10 @@ export * from './lib/hlm-error';
 export * from './lib/hlm-form-field';
 export * from './lib/hlm-hint';
 
+export const HlmFormFieldImports = [HlmFormField, HlmError, HlmHint] as const;
+
 @NgModule({
-	imports: [HlmFormField, HlmError, HlmHint],
-	exports: [HlmFormField, HlmError, HlmHint],
+	imports: [...HlmFormFieldImports],
+	exports: [...HlmFormFieldImports],
 })
 export class HlmFormFieldModule {}

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

@@ -4,8 +4,10 @@ import { HlmIcon } from './lib/hlm-icon';
 export * from './lib/hlm-icon';
 export * from './lib/hlm-icon.token';
 
+export const HlmIconImports = [HlmIcon] as const;
+
 @NgModule({
-	imports: [HlmIcon],
-	exports: [HlmIcon],
+	imports: [...HlmIconImports],
+	exports: [...HlmIconImports],
 })
 export class HlmIconModule {}

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

@@ -3,8 +3,10 @@ import { HlmInput } from './lib/hlm-input';
 
 export * from './lib/hlm-input';
 
+export const HlmInputImports = [HlmInput] as const;
+
 @NgModule({
-	imports: [HlmInput],
-	exports: [HlmInput],
+	imports: [...HlmInputImports],
+	exports: [...HlmInputImports],
 })
 export class HlmInputModule {}

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

@@ -3,8 +3,10 @@ import { HlmLabel } from './lib/hlm-label';
 
 export * from './lib/hlm-label';
 
+export const HlmLabelImports = [HlmLabel] as const;
+
 @NgModule({
-	imports: [HlmLabel],
-	exports: [HlmLabel],
+	imports: [...HlmLabelImports],
+	exports: [...HlmLabelImports],
 })
 export class HlmLabelModule {}

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

@@ -8,7 +8,7 @@ export * from './lib/hlm-radio';
 export * from './lib/hlm-radio-group';
 export * from './lib/hlm-radio-indicator';
 
-export const HlmRadioGroupImports = [HlmRadioGroup, HlmRadio, HlmRadioIndicator];
+export const HlmRadioGroupImports = [HlmRadioGroup, HlmRadio, HlmRadioIndicator] as const;
 
 @NgModule({
 	imports: [...HlmRadioGroupImports],

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

@@ -3,8 +3,10 @@ import { HlmScrollArea } from './lib/hlm-scroll-area';
 
 export * from './lib/hlm-scroll-area';
 
+export const HlmScrollAreaImports = [HlmScrollArea] as const;
+
 @NgModule({
-	imports: [HlmScrollArea],
-	exports: [HlmScrollArea],
+	imports: [...HlmScrollAreaImports],
+	exports: [...HlmScrollAreaImports],
 })
 export class HlmScrollAreaModule {}

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

@@ -5,8 +5,10 @@ import { HlmToggleGroupItem } from './lib/hlm-toggle-item';
 export * from './lib/hlm-toggle-group';
 export * from './lib/hlm-toggle-item';
 
+export const HlmToggleGroupImports = [HlmToggleGroup, HlmToggleGroupItem] as const;
+
 @NgModule({
-	imports: [HlmToggleGroupItem, HlmToggleGroup],
-	exports: [HlmToggleGroupItem, HlmToggleGroup],
+	imports: [...HlmToggleGroupImports],
+	exports: [...HlmToggleGroupImports],
 })
 export class HlmToggleGroupModule {}

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

@@ -2,8 +2,11 @@ import { NgModule } from '@angular/core';
 import { HlmToggle } from './lib/hlm-toggle';
 
 export * from './lib/hlm-toggle';
+
+export const HlmToggleImports = [HlmToggle] as const;
+
 @NgModule({
-	imports: [HlmToggle],
-	exports: [HlmToggle],
+	imports: [...HlmToggleImports],
+	exports: [...HlmToggleImports],
 })
 export class HlmToggleModule {}

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

@@ -1,3 +1,16 @@
+import { HlmBlockquote } from './lib/hlm-blockquote';
+import { HlmCode } from './lib/hlm-code';
+import { HlmH1 } from './lib/hlm-h1';
+import { HlmH2 } from './lib/hlm-h2';
+import { HlmH3 } from './lib/hlm-h3';
+import { HlmH4 } from './lib/hlm-h4';
+import { HlmLarge } from './lib/hlm-large';
+import { HlmLead } from './lib/hlm-lead';
+import { HlmMuted } from './lib/hlm-muted';
+import { HlmP } from './lib/hlm-p';
+import { HlmSmall } from './lib/hlm-small';
+import { HlmUl } from './lib/hlm-ul';
+
 export * from './lib/hlm-blockquote';
 export * from './lib/hlm-code';
 export * from './lib/hlm-h1';
@@ -10,3 +23,18 @@ export * from './lib/hlm-muted';
 export * from './lib/hlm-p';
 export * from './lib/hlm-small';
 export * from './lib/hlm-ul';
+
+export const HlmTypographyImports = [
+	HlmBlockquote,
+	HlmCode,
+	HlmH1,
+	HlmH2,
+	HlmH3,
+	HlmH4,
+	HlmLarge,
+	HlmLead,
+	HlmMuted,
+	HlmP,
+	HlmSmall,
+	HlmUl,
+];

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.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"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.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"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.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"@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.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"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.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -86,9 +86,10 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
+			"@angular/common": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -118,7 +119,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.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -126,7 +127,7 @@
 		"internalName": "ui-command-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -138,7 +139,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.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -150,7 +151,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.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"@angular/cdk": ">=19.0.0"
 		}
 	},
@@ -159,7 +160,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -167,7 +168,7 @@
 		"internalName": "ui-hover-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -186,7 +187,7 @@
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514"
+			"@spartan-ng/brain": "0.0.1-alpha.516"
 		}
 	},
 	"input-otp": {
@@ -197,14 +198,14 @@
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
 			"@angular/cdk": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514"
+			"@spartan-ng/brain": "0.0.1-alpha.516"
 		}
 	},
 	"label": {
 		"internalName": "ui-label-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -212,7 +213,7 @@
 		"internalName": "ui-menu-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -226,7 +227,7 @@
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
@@ -239,14 +240,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"clsx": "^2.1.1",
-			"@spartan-ng/brain": "0.0.1-alpha.514"
+			"@spartan-ng/brain": "0.0.1-alpha.516"
 		}
 	},
 	"progress": {
 		"internalName": "ui-progress-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -254,7 +255,7 @@
 		"internalName": "ui-radio-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1",
 			"@angular/common": ">=19.0.0"
 		}
@@ -271,7 +272,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -282,7 +283,7 @@
 		"internalName": "ui-separator-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -293,7 +294,7 @@
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"class-variance-authority": "^0.7.0"
 		}
 	},
@@ -308,7 +309,7 @@
 		"internalName": "ui-slider-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -334,7 +335,7 @@
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514"
+			"@spartan-ng/brain": "0.0.1-alpha.516"
 		}
 	},
 	"table": {
@@ -348,7 +349,7 @@
 		"internalName": "ui-tabs-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514",
+			"@spartan-ng/brain": "0.0.1-alpha.516",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=19.0.0",
@@ -377,7 +378,7 @@
 		"internalName": "ui-tooltip-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.514"
+			"@spartan-ng/brain": "0.0.1-alpha.516"
 		}
 	},
 	"typography": {