@spartan-ng/cli 0.0.1-alpha.475 → 0.0.1-alpha.476

package/package.json

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

package/src/generators/base/lib/initialize-angular-library.js

@@ -40,6 +40,7 @@ async function initializeAngularLibrary(tree, options) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     '@nx/angular/generators')))).libraryGenerator(tree, {
+        ...((0, devkit_1.readNxJson)(tree).generators?.['@nx/angular:library'] || {}),
         name: options.publicName,
         skipFormat: true,
         simpleName: true,

package/src/generators/base/lib/initialize-angular-library.js.map

@@ -1 +1 @@
-{"version":3,"file":"initialize-angular-library.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/base/lib/initialize-angular-library.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,4DAkBC;AArBD,uCAA0D;AAGnD,KAAK,UAAU,wBAAwB,CAAC,IAAU,EAAE,OAA+B;IACzF,OAAO,MAAM,CACZ;IACC,6DAA6D;IAC7D,aAAa;IACb,wBAAwB,GACxB,CACD,CAAC,gBAAgB,CAAC,IAAI,EAAE;QACxB,IAAI,EAAE,OAAO,CAAC,UAAU;QACxB,UAAU,EAAE,IAAI;QAChB,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,oBAAoB,OAAO,CAAC,aAAa,EAAE;QACvD,MAAM,EAAE,KAAK;QACb,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,IAAA,0BAAiB,EAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC;QACnE,IAAI,EAAE,OAAO,CAAC,IAAI;KAClB,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"initialize-angular-library.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/base/lib/initialize-angular-library.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,4DAmBC;AAtBD,uCAAsE;AAG/D,KAAK,UAAU,wBAAwB,CAAC,IAAU,EAAE,OAA+B;IACzF,OAAO,MAAM,CACZ;IACC,6DAA6D;IAC7D,aAAa;IACb,wBAAwB,GACxB,CACD,CAAC,gBAAgB,CAAC,IAAI,EAAE;QACxB,GAAG,CAAC,IAAA,mBAAU,EAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;QAC/D,IAAI,EAAE,OAAO,CAAC,UAAU;QACxB,UAAU,EAAE,IAAI;QAChB,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,IAAI;QACf,UAAU,EAAE,oBAAoB,OAAO,CAAC,aAAa,EAAE;QACvD,MAAM,EAAE,KAAK;QACb,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,IAAA,0BAAiB,EAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC;QACnE,IAAI,EAAE,OAAO,CAAC,IAAI;KAClB,CAAC,CAAC;AACJ,CAAC"}

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { HlmNumberedPaginationQueryParamsComponent } from './lib/hlm-numbered-pagination-query-params.component';
 import { HlmNumberedPaginationComponent } from './lib/hlm-numbered-pagination.component';
 import { HlmPaginationContentDirective } from './lib/hlm-pagination-content.directive';
 import { HlmPaginationEllipsisComponent } from './lib/hlm-pagination-ellipsis.component';
@@ -9,6 +10,7 @@ import { HlmPaginationNextComponent } from './lib/hlm-pagination-next.component'
 import { HlmPaginationPreviousComponent } from './lib/hlm-pagination-previous.component';
 import { HlmPaginationDirective } from './lib/hlm-pagination.directive';
 
+export * from './lib/hlm-numbered-pagination-query-params.component';
 export * from './lib/hlm-numbered-pagination.component';
 export * from './lib/hlm-pagination-content.directive';
 export * from './lib/hlm-pagination-ellipsis.component';
@@ -27,6 +29,7 @@ export const HlmPaginationImports = [
 	HlmPaginationNextComponent,
 	HlmPaginationEllipsisComponent,
 	HlmNumberedPaginationComponent,
+	HlmNumberedPaginationQueryParamsComponent,
 ] as const;
 
 @NgModule({

package/src/generators/ui/libs/ui-pagination-helm/files/lib/hlm-numbered-pagination-query-params.component.ts.template

@@ -0,0 +1,179 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+	numberAttribute,
+	untracked,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrnSelectImports } from '@spartan-ng/brain/select';
+import { HlmSelectImports } from '@spartan-ng/helm/select';
+import { createPageArray, outOfBoundCorrection } from './hlm-numbered-pagination.component';
+import { HlmPaginationContentDirective } from './hlm-pagination-content.directive';
+import { HlmPaginationEllipsisComponent } from './hlm-pagination-ellipsis.component';
+import { HlmPaginationItemDirective } from './hlm-pagination-item.directive';
+import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
+import { HlmPaginationNextComponent } from './hlm-pagination-next.component';
+import { HlmPaginationPreviousComponent } from './hlm-pagination-previous.component';
+import { HlmPaginationDirective } from './hlm-pagination.directive';
+
+@Component({
+	selector: 'hlm-numbered-pagination-query-params',
+	template: `
+		<div class="flex items-center justify-between gap-2 px-4 py-2">
+			<div class="flex items-center gap-1 text-nowrap text-sm text-gray-600">
+				<b>{{ totalItems() }}</b>
+				total items |
+				<b>{{ pages().length }}</b>
+				pages
+			</div>
+
+			<nav hlmPagination>
+				<ul hlmPaginationContent>
+					@if (showEdges() && !isFirstPageActive()) {
+						<li hlmPaginationItem>
+							<hlm-pagination-previous
+								[link]="link()"
+								[queryParams]="{ page: currentPage() - 1 }"
+								queryParamsHandling="merge"
+							/>
+						</li>
+					}
+
+					@for (page of pages(); track page) {
+						<li hlmPaginationItem>
+							@if (page === '...') {
+								<hlm-pagination-ellipsis />
+							} @else {
+								<a
+									hlmPaginationLink
+									[link]="currentPage() !== page ? link() : undefined"
+									[queryParams]="{ page }"
+									queryParamsHandling="merge"
+									[isActive]="currentPage() === page"
+								>
+									{{ page }}
+								</a>
+							}
+						</li>
+					}
+
+					@if (showEdges() && !isLastPageActive()) {
+						<li hlmPaginationItem>
+							<hlm-pagination-next
+								[link]="link()"
+								[queryParams]="{ page: currentPage() + 1 }"
+								queryParamsHandling="merge"
+							/>
+						</li>
+					}
+				</ul>
+			</nav>
+
+			<!-- Show Page Size selector -->
+			<brn-select [(ngModel)]="itemsPerPage" class="ml-auto" placeholder="Page size">
+				<hlm-select-trigger class="w-fit">
+					<hlm-select-value />
+				</hlm-select-trigger>
+				<hlm-select-content>
+					@for (pageSize of pageSizesWithCurrent(); track pageSize) {
+						<hlm-option [value]="pageSize">{{ pageSize }} / page</hlm-option>
+					}
+				</hlm-select-content>
+			</brn-select>
+		</div>
+	`,
+	imports: [
+		FormsModule,
+		HlmPaginationDirective,
+		HlmPaginationContentDirective,
+		HlmPaginationItemDirective,
+		HlmPaginationPreviousComponent,
+		HlmPaginationNextComponent,
+		HlmPaginationLinkDirective,
+		HlmPaginationEllipsisComponent,
+		BrnSelectImports,
+		HlmSelectImports,
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HlmNumberedPaginationQueryParamsComponent {
+	/**
+	 * The current (active) page.
+	 */
+	public readonly currentPage = model.required<number>();
+
+	/**
+	 * The number of items per paginated page.
+	 */
+	public readonly itemsPerPage = model.required<number>();
+
+	/**
+	 * The total number of items in the collection. Only useful when
+	 * doing server-side paging, where the collection size is limited
+	 * to a single page returned by the server API.
+	 */
+	public readonly totalItems = input.required<number, NumberInput>({
+		transform: numberAttribute,
+	});
+
+	/**
+	 * The URL path to use for the pagination links.
+	 * Defaults to '.' (current path).
+	 */
+	public readonly link = input<string>('.');
+
+	/**
+	 * The number of page links to show.
+	 */
+	public readonly maxSize = input<number, NumberInput>(7, {
+		transform: numberAttribute,
+	});
+
+	/**
+	 * Show the first and last page buttons.
+	 */
+	public readonly showEdges = input<boolean, BooleanInput>(true, {
+		transform: booleanAttribute,
+	});
+
+	/**
+	 * The page sizes to show.
+	 * Defaults to [10, 20, 50, 100]
+	 */
+	public readonly pageSizes = input<number[]>([10, 20, 50, 100]);
+
+	protected readonly pageSizesWithCurrent = computed(() => {
+		const pageSizes = this.pageSizes();
+		return pageSizes.includes(this.itemsPerPage())
+			? pageSizes // if current page size is included, return the same array
+			: [...pageSizes, this.itemsPerPage()].sort((a, b) => a - b); // otherwise, add current page size and sort the array
+	});
+
+	protected readonly isFirstPageActive = computed(() => this.currentPage() === 1);
+	protected readonly isLastPageActive = computed(() => this.currentPage() === this.lastPageNumber());
+
+	protected readonly lastPageNumber = computed(() => {
+		if (this.totalItems() < 1) {
+			// when there are 0 or fewer (an error case) items, there are no "pages" as such,
+			// but it makes sense to consider a single, empty page as the last page.
+			return 1;
+		}
+		return Math.ceil(this.totalItems() / this.itemsPerPage());
+	});
+
+	protected readonly pages = computed(() => {
+		const correctedCurrentPage = outOfBoundCorrection(this.totalItems(), this.itemsPerPage(), this.currentPage());
+
+		if (correctedCurrentPage !== this.currentPage()) {
+			// update the current page
+			untracked(() => this.currentPage.set(correctedCurrentPage));
+		}
+
+		return createPageArray(correctedCurrentPage, this.itemsPerPage(), this.totalItems(), this.maxSize());
+	});
+}

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

@@ -181,7 +181,7 @@ type Page = number | '...';
  *
  * Copied from 'ngx-pagination' package
  */
-function outOfBoundCorrection(totalItems: number, itemsPerPage: number, currentPage: number): number {
+export function outOfBoundCorrection(totalItems: number, itemsPerPage: number, currentPage: number): number {
 	const totalPages = Math.ceil(totalItems / itemsPerPage);
 	if (totalPages < currentPage && 0 < totalPages) {
 		return totalPages;
@@ -199,7 +199,7 @@ function outOfBoundCorrection(totalItems: number, itemsPerPage: number, currentP
  *
  * Copied from 'ngx-pagination' package
  */
-function createPageArray(
+export function createPageArray(
 	currentPage: number,
 	itemsPerPage: number,
 	totalItems: number,

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

@@ -18,6 +18,5 @@ export type PaginationItemVariants = VariantProps<typeof paginationItemVariants>
 })
 export class HlmPaginationItemDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-
 	protected readonly _computedClass = computed(() => hlm(paginationItemVariants(), this.userClass()));
 }

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

@@ -39,8 +39,11 @@ export type PaginationLinkVariants = VariantProps<typeof paginationLinkVariants>
 })
 export class HlmPaginationLinkDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	/** Whether the link is active (i.e., the current page). */
 	public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+	/** The size of the button. */
 	public readonly size = input<ButtonVariants['size']>('icon');
+	/** The link to navigate to the page. */
 	public readonly link = input<RouterLink['routerLink']>();
 
 	protected readonly _computedClass = computed(() =>

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

@@ -23,7 +23,7 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 			[size]="size()"
 			[attr.aria-label]="ariaLabel()"
 		>
-			<span [class.sr-only]="iconOnly()">{{ text() }}</span>
+			<span [class]="_labelClass()">{{ text() }}</span>
 			<ng-icon hlm size="sm" name="lucideChevronRight" />
 		</a>
 	`,
@@ -31,17 +31,26 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 })
 export class HlmPaginationNextComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	/** The link to navigate to the next page. */
 	public readonly link = input<RouterLink['routerLink']>();
+	/** The query parameters to pass to the next page. */
 	public readonly queryParams = input<RouterLink['queryParams']>();
+	/** How to handle query parameters when navigating to the next page. */
 	public readonly queryParamsHandling = input<RouterLink['queryParamsHandling']>();
 
+	/** The aria-label for the next page link. */
 	public readonly ariaLabel = input<string>('Go to next page', { alias: 'aria-label' });
+	/** The text to display for the next page link. */
 	public readonly text = input<string>('Next');
+	/** Whether the button should only display the icon. */
 	public readonly iconOnly = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
 	});
+	protected readonly _labelClass = computed(() => (this.iconOnly() ? 'sr-only' : 'hidden sm:block'));
 
 	protected readonly size = computed<ButtonVariants['size']>(() => (this.iconOnly() ? 'icon' : 'default'));
 
-	protected readonly _computedClass = computed(() => hlm('gap-1', !this.iconOnly() ? 'pr-2.5' : '', this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm('gap-1', !this.iconOnly() ? 'sm:pr-2.5' : '', this.userClass()),
+	);
 }

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

@@ -24,24 +24,33 @@ import { HlmPaginationLinkDirective } from './hlm-pagination-link.directive';
 			[attr.aria-label]="ariaLabel()"
 		>
 			<ng-icon hlm size="sm" name="lucideChevronLeft" />
-			<span [class.sr-only]="iconOnly()">{{ text() }}</span>
+			<span [class]="_labelClass()">{{ text() }}</span>
 		</a>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HlmPaginationPreviousComponent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	/** The link to navigate to the previous page. */
 	public readonly link = input<RouterLink['routerLink']>();
+	/** The query parameters to pass to the previous page. */
 	public readonly queryParams = input<RouterLink['queryParams']>();
+	/** How to handle query parameters when navigating to the previous page. */
 	public readonly queryParamsHandling = input<RouterLink['queryParamsHandling']>();
 
+	/** The aria-label for the previous page link. */
 	public readonly ariaLabel = input<string>('Go to previous page', { alias: 'aria-label' });
+	/** The text to display for the previous page link. */
 	public readonly text = input<string>('Previous');
+	/** Whether the button should only display the icon. */
 	public readonly iconOnly = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,
 	});
+	protected readonly _labelClass = computed(() => (this.iconOnly() ? 'sr-only' : 'hidden sm:block'));
 
 	protected readonly size = computed<ButtonVariants['size']>(() => (this.iconOnly() ? 'icon' : 'default'));
 
-	protected readonly _computedClass = computed(() => hlm('gap-1', !this.iconOnly() ? 'pl-2.5' : '', this.userClass()));
+	protected readonly _computedClass = computed(() =>
+		hlm('gap-1', !this.iconOnly() ? 'sm:pl-2.5' : '', this.userClass()),
+	);
 }

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

@@ -20,6 +20,7 @@ export type PaginationVariants = VariantProps<typeof paginationVariants>;
 export class HlmPaginationDirective {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
+	/** The aria-label for the pagination component. */
 	public readonly ariaLabel = input<string>('pagination', { alias: 'aria-label' });
 
 	protected readonly _computedClass = computed(() => hlm(paginationVariants(), this.userClass()));

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

@@ -1,26 +1,28 @@
 import { NgModule } from '@angular/core';
 
-import { HlmCaptionComponent } from './lib/hlm-caption.component';
-import { HlmTableComponent } from './lib/hlm-table.component';
-import { HlmTableDirective } from './lib/hlm-table.directive';
-import { HlmTdComponent } from './lib/hlm-td.component';
-import { HlmThComponent } from './lib/hlm-th.component';
-import { HlmTrowComponent } from './lib/hlm-trow.component';
+import {
+	HlmCaptionDirective,
+	HlmTableDirective,
+	HlmTBodyDirective,
+	HlmTdDirective,
+	HlmTFootDirective,
+	HlmThDirective,
+	HlmTHeadDirective,
+	HlmTrDirective,
+} from './lib/hlm-table.directive';
 
-export { HlmCaptionComponent } from './lib/hlm-caption.component';
-export { HlmTableComponent } from './lib/hlm-table.component';
-export { HlmTableDirective } from './lib/hlm-table.directive';
-export { HlmTdComponent } from './lib/hlm-td.component';
-export { HlmThComponent } from './lib/hlm-th.component';
-export { HlmTrowComponent } from './lib/hlm-trow.component';
+export * from './lib/hlm-table.directive';
 
 export const HlmTableImports = [
-	HlmTableComponent,
 	HlmTableDirective,
-	HlmCaptionComponent,
-	HlmThComponent,
-	HlmTdComponent,
-	HlmTrowComponent,
+	HlmTHeadDirective,
+	HlmTBodyDirective,
+	HlmTFootDirective,
+	HlmTrDirective,
+	HlmThDirective,
+	HlmTdDirective,
+	HlmCaptionDirective,
+	HlmTableDirective,
 ] as const;
 
 @NgModule({

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

@@ -1,18 +1,220 @@
-import { Directive } from '@angular/core';
-import { injectTableClassesSettable } from '@spartan-ng/brain/core';
+// src/app/directives/hlm-table-directives.ts
+import { computed, Directive, inject, InjectionToken, input, ValueProvider } from '@angular/core';
+import { hlm } from '@spartan-ng/brain/core';
+import type { ClassValue } from 'clsx';
 
-@Directive({ selector: '[hlmTable],brn-table[hlm]' })
+// Configuration Interface and InjectionToken
+export const HlmTableConfigToken = new InjectionToken<HlmTableVariant>('HlmTableConfig');
+export interface HlmTableVariant {
+	table: string;
+	thead: string;
+	tbody: string;
+	tfoot: string;
+	tr: string;
+	th: string;
+	td: string;
+	caption: string;
+}
+
+export const HlmTableVariantDefault: HlmTableVariant = {
+	table: 'w-full caption-bottom text-sm',
+	thead: '[&_tr]:border-b',
+	tbody: '[&_tr:last-child]:border-0',
+	tfoot: 'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+	tr: 'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+	th: 'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+	td: 'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+	caption: 'text-muted-foreground mt-4 text-sm',
+};
+
+export function provideHlmTableConfig(config: Partial<HlmTableVariant>): ValueProvider {
+	return {
+		provide: HlmTableConfigToken,
+		useValue: { ...HlmTableVariantDefault, ...config },
+	};
+}
+
+export function injectHlmTableConfig(): HlmTableVariant {
+	return inject(HlmTableConfigToken, { optional: true }) ?? HlmTableVariantDefault;
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <table> element.
+ * It resolves and provides base classes for its child table elements.
+ * If a table has the `hlmTable` attribute, it will be styled with the provided variant.
+ * The other table elements will check if a parent table has the `hlmTable` attribute and will be styled accordingly.
+ */
+@Directive({
+	selector: 'table[hlmTable]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
 export class HlmTableDirective {
-	private readonly _tableClassesSettable = injectTableClassesSettable({ host: true, optional: true });
-
-	constructor() {
-		this._tableClassesSettable?.setTableClasses({
-			table: 'flex flex-col text-sm [&_cdk-row:last-child]:border-0',
-			headerRow:
-				'flex min-w-[100%] w-fit border-b border-border [&.cdk-table-sticky]:bg-background ' +
-				'[&.cdk-table-sticky>*]:z-[101] [&.cdk-table-sticky]:before:z-0 [&.cdk-table-sticky]:before:block [&.cdk-table-sticky]:hover:before:bg-muted/50 [&.cdk-table-sticky]:before:absolute [&.cdk-table-sticky]:before:inset-0',
-			bodyRow:
-				'flex min-w-[100%] w-fit border-b border-border transition-[background-color] hover:bg-muted/50 [&:has([role=checkbox][aria-checked=true])]:bg-muted',
-		});
-	}
+	/** Input to configure the variant of the table, this input has the highest priority. */
+	public readonly userVariant = input<Partial<HlmTableVariant> | string>({}, { alias: 'hlmTable' });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	/** Global or default configuration provided by injectHlmTableConfig() */
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+
+	// Protected variant that resolves user input to a full HlmTableVariant
+	protected readonly _variant = computed<HlmTableVariant>(() => {
+		const globalOrDefaultConfig = this._globalOrDefaultConfig;
+		const localInputConfig = this.userVariant();
+
+		// Priority 1: Local input object
+		if (typeof localInputConfig === 'object' && localInputConfig !== null && Object.keys(localInputConfig).length > 0) {
+			// Merge local input with the baseline provided by injectHlmTableConfig()
+			// This ensures that properties not in localInputConfig still fall back to global/default values.
+			return { ...globalOrDefaultConfig, ...localInputConfig };
+		}
+		// If localInputConfig is not a non-empty object (e.g., it's undefined, an empty object, or a string),
+		// then the globalOrDefaultConfig (which is already the result of injected OR default) is used.
+		return globalOrDefaultConfig;
+	});
+
+	// Computed class for the host <table> element
+	protected readonly _computedClass = computed(() => hlm(this._variant().table, this.userClass()));
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <thead> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'thead[hlmTHead]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTHeadDirective {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.thead.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tbody> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'tbody[hlmTBody]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTBodyDirective {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tbody.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tfoot> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'tfoot[hlmTFoot]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTFootDirective {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tfoot.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tr> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'tr[hlmTr]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTrDirective {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.tr.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <th> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'th[hlmTh]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmThDirective {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.th.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <td> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'td[hlmTd]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmTdDirective {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.td.trim() : '', this.userClass()),
+	);
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <caption> element
+ * within an HlmTableDirective context.
+ */
+@Directive({
+	selector: 'caption[hlmCaption]',
+	standalone: true,
+	host: {
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmCaptionDirective {
+	private readonly _globalOrDefaultConfig = injectHlmTableConfig();
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(this._globalOrDefaultConfig ? this._globalOrDefaultConfig.caption.trim() : '', this.userClass()),
+	);
 }

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.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0"
@@ -13,7 +13,7 @@
 		"internalName": "ui-alert-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -22,7 +22,7 @@
 		"internalName": "ui-alert-dialog-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -31,7 +31,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -39,7 +39,7 @@
 		"internalName": "ui-avatar-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -49,7 +49,7 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -60,7 +60,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.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@angular/router": ">=19.0.0"
 		}
@@ -69,7 +69,7 @@
 		"internalName": "ui-button-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -81,7 +81,7 @@
 			"@angular/cdk": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -89,7 +89,7 @@
 		"internalName": "ui-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -98,7 +98,7 @@
 		"internalName": "ui-carousel-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -112,7 +112,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.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -120,7 +120,7 @@
 		"internalName": "ui-command-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=19.0.0"
 		}
@@ -133,7 +133,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.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -141,7 +141,7 @@
 		"internalName": "ui-dialog-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@angular/common": ">=19.0.0",
 			"@ng-icons/core": ">=29.0.0",
@@ -154,14 +154,14 @@
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475"
+			"@spartan-ng/brain": "0.0.1-alpha.476"
 		}
 	},
 	"hover-card": {
 		"internalName": "ui-hover-card-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -177,7 +177,7 @@
 		"internalName": "ui-input-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@angular/forms": ">=19.0.0"
@@ -187,7 +187,7 @@
 		"internalName": "ui-input-otp-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -198,7 +198,7 @@
 		"internalName": "ui-label-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -207,7 +207,7 @@
 		"internalName": "ui-menu-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -220,7 +220,7 @@
 			"@angular/core": ">=19.0.0",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/forms": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
@@ -232,7 +232,7 @@
 		"internalName": "ui-popover-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -240,7 +240,7 @@
 		"internalName": "ui-progress-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -248,7 +248,7 @@
 		"internalName": "ui-radio-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@angular/common": ">=19.0.0"
 		}
@@ -257,7 +257,7 @@
 		"internalName": "ui-scroll-area-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -265,7 +265,7 @@
 		"internalName": "ui-select-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -276,7 +276,7 @@
 		"internalName": "ui-separator-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -284,7 +284,7 @@
 		"internalName": "ui-sheet-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@ng-icons/core": ">=29.0.0",
 			"@ng-icons/lucide": ">=29.0.0",
@@ -295,7 +295,7 @@
 		"internalName": "ui-skeleton-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -303,7 +303,7 @@
 		"internalName": "ui-slider-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	},
@@ -311,7 +311,7 @@
 		"internalName": "ui-sonner-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"ngx-sonner": ">=3.0.0"
 		}
@@ -320,7 +320,7 @@
 		"internalName": "ui-spinner-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -329,7 +329,7 @@
 		"internalName": "ui-switch-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"@angular/cdk": ">=19.0.0",
 			"@angular/forms": ">=19.0.0"
@@ -339,16 +339,15 @@
 		"internalName": "ui-table-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
-			"clsx": "^2.1.1",
-			"@angular/common": ">=19.0.0"
+			"@spartan-ng/brain": "0.0.1-alpha.476",
+			"clsx": "^2.1.1"
 		}
 	},
 	"tabs": {
 		"internalName": "ui-tabs-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1",
 			"class-variance-authority": "^0.7.0",
 			"@angular/cdk": ">=19.0.0",
@@ -361,7 +360,7 @@
 		"internalName": "ui-toggle-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -370,7 +369,7 @@
 		"internalName": "ui-toggle-group-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"class-variance-authority": "^0.7.0",
 			"clsx": "^2.1.1"
 		}
@@ -379,14 +378,14 @@
 		"internalName": "ui-tooltip-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475"
+			"@spartan-ng/brain": "0.0.1-alpha.476"
 		}
 	},
 	"typography": {
 		"internalName": "ui-typography-helm",
 		"peerDependencies": {
 			"@angular/core": ">=19.0.0",
-			"@spartan-ng/brain": "0.0.1-alpha.475",
+			"@spartan-ng/brain": "0.0.1-alpha.476",
 			"clsx": "^2.1.1"
 		}
 	}

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

@@ -1,54 +0,0 @@
-import {
-	ChangeDetectionStrategy,
-	Component,
-	ViewEncapsulation,
-	booleanAttribute,
-	computed,
-	effect,
-	inject,
-	input,
-	untracked,
-} from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-import { HlmTableComponent } from './hlm-table.component';
-
-let captionIdSequence = 0;
-
-@Component({
-	selector: 'hlm-caption',
-	host: {
-		'[class]': '_computedClass()',
-		'[id]': 'id()',
-	},
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	encapsulation: ViewEncapsulation.None,
-})
-export class HlmCaptionComponent {
-	private readonly _table = inject(HlmTableComponent, { optional: true });
-
-	protected readonly id = input<string | null | undefined>(`${captionIdSequence++}`);
-
-	public readonly hidden = input(false, { transform: booleanAttribute });
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'text-center block mt-4 text-sm text-muted-foreground',
-			this.hidden() ? 'sr-only' : 'order-last',
-			this.userClass(),
-		),
-	);
-
-	constructor() {
-		effect(() => {
-			const id = this.id();
-			untracked(() => {
-				if (!this._table) return;
-				this._table.labeledBy.set(id);
-			});
-		});
-	}
-}

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

@@ -1,45 +0,0 @@
-import {
-	ChangeDetectionStrategy,
-	Component,
-	ViewEncapsulation,
-	computed,
-	effect,
-	input,
-	signal,
-	untracked,
-} from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-table',
-	host: {
-		'[class]': '_computedClass()',
-		role: 'table',
-		'[attr.aria-labelledby]': 'labeledBy()',
-	},
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	encapsulation: ViewEncapsulation.None,
-})
-export class HlmTableComponent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-col text-sm [&_hlm-trow:last-child]:border-0', this.userClass()),
-	);
-
-	// we aria-labelledby to be settable from outside but use the input by default.
-	public readonly _labeledByInput = input<string | null | undefined>(undefined, { alias: 'aria-labelledby' });
-	public readonly labeledBy = signal<string | null | undefined>(undefined);
-
-	constructor() {
-		effect(() => {
-			const labeledBy = this._labeledByInput();
-			untracked(() => {
-				this.labeledBy.set(labeledBy);
-			});
-		});
-	}
-}

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

@@ -1,44 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import {
-	ChangeDetectionStrategy,
-	Component,
-	ViewEncapsulation,
-	booleanAttribute,
-	computed,
-	inject,
-	input,
-} from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import { BrnColumnDefComponent } from '@spartan-ng/brain/table';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-td',
-	imports: [NgTemplateOutlet],
-	host: {
-		'[class]': '_computedClass()',
-	},
-	template: `
-		<ng-template #content>
-			<ng-content />
-		</ng-template>
-		@if (truncate()) {
-			<span class="flex-1 truncate">
-				<ng-container [ngTemplateOutlet]="content" />
-			</span>
-		} @else {
-			<ng-container [ngTemplateOutlet]="content" />
-		}
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	encapsulation: ViewEncapsulation.None,
-})
-export class HlmTdComponent {
-	private readonly _columnDef? = inject(BrnColumnDefComponent, { optional: true });
-	public readonly truncate = input(false, { transform: booleanAttribute });
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-none p-4 items-center [&:has([role=checkbox])]:pr-0', this._columnDef?.class(), this.userClass()),
-	);
-}

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

@@ -1,48 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import {
-	ChangeDetectionStrategy,
-	Component,
-	ViewEncapsulation,
-	booleanAttribute,
-	computed,
-	inject,
-	input,
-} from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import { BrnColumnDefComponent } from '@spartan-ng/brain/table';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-th',
-	imports: [NgTemplateOutlet],
-	host: {
-		'[class]': '_computedClass()',
-	},
-	template: `
-		<ng-template #content>
-			<ng-content />
-		</ng-template>
-		@if (truncate()) {
-			<span class="flex-1 truncate">
-				<ng-container [ngTemplateOutlet]="content" />
-			</span>
-		} @else {
-			<ng-container [ngTemplateOutlet]="content" />
-		}
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	encapsulation: ViewEncapsulation.None,
-})
-export class HlmThComponent {
-	private readonly _columnDef? = inject(BrnColumnDefComponent, { optional: true });
-	public readonly truncate = input(false, { transform: booleanAttribute });
-
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() =>
-		hlm(
-			'flex flex-none h-12 px-4 text-sm items-center font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
-			this._columnDef?.class(),
-			this.userClass(),
-		),
-	);
-}

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

@@ -1,25 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
-import { hlm } from '@spartan-ng/brain/core';
-import type { ClassValue } from 'clsx';
-
-@Component({
-	selector: 'hlm-trow',
-	host: {
-		'[class]': '_computedClass()',
-		role: 'row',
-	},
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	encapsulation: ViewEncapsulation.None,
-})
-export class HlmTrowComponent {
-	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
-		hlm(
-			'flex flex border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-			this.userClass(),
-		),
-	);
-}