@spartan-ng/cli 0.0.1-alpha.533 → 0.0.1-alpha.535

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

@@ -22,6 +22,6 @@ export class HlmCommandList {
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this.userClass()),
+		hlm('max-h-[300px] overflow-x-hidden overflow-y-auto', this.userClass()),
 	);
 }

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

@@ -82,8 +82,8 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
-			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
+			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 			this.userClass(),

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

@@ -79,8 +79,8 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
-			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
+			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 			this.userClass(),

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

@@ -87,8 +87,8 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
-			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-between gap-2 rounded-md border px-3 py-2 text-left text-sm font-normal whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50',
+			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 			this.userClass(),

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

@@ -13,7 +13,7 @@ export class HlmDialogClose {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs absolute right-4 top-4 flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_ng-icon]:shrink-0',
+			'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 flex items-center justify-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_ng-icon]:shrink-0',
 			this.userClass(),
 		),
 	);

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

@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-lg font-semibold leading-none', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('text-lg leading-none font-semibold', this.userClass()));
 }

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

@@ -13,6 +13,6 @@ 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()),
+		hlm('text-balancet flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm', this.userClass()),
 	);
 }

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

@@ -14,7 +14,7 @@ export class HlmEmpty {
 
 	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',
+			'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
 			this.userClass(),
 		),
 	);

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

@@ -4,15 +4,15 @@ 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",
+	"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none 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',
+					'order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3',
+				'block-end': 'order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3',
 			},
 		},
 		defaultVariants: {

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

@@ -13,7 +13,7 @@ export class HlmInputGroupText {
 
 	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`,
+			`text-muted-foreground flex items-center gap-2 text-sm [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='size-'])]:size-4`,
 			this.userClass(),
 		),
 	);

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

@@ -15,7 +15,7 @@ export class HlmInputGroup {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'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]',
+			'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
 			'h-9 min-w-0 has-[>textarea]:h-auto',
 			// Variants based on alignment.
 			'has-[>[data-align=inline-start]]:[&>input]:pl-2',

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

@@ -19,7 +19,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const inputVariants = cva(
-	'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+	'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 	{
 		variants: {
 			error: {

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

@@ -26,7 +26,7 @@ export class HlmInputOtpSlot {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'dark:bg-input/30 border-input shadow-xs relative flex h-9 w-9 items-center justify-center border-y border-r text-sm outline-none transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+			'dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md',
 			'has-[brn-input-otp-slot[data-active="true"]]:border-ring has-[brn-input-otp-slot[data-active="true"]]:ring-ring/50 has-[brn-input-otp-slot[data-active="true"]]:z-10 has-[brn-input-otp-slot[data-active="true"]]:ring-[3px]',
 			this.userClass(),
 		),

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

@@ -12,6 +12,6 @@ export class HlmInputOtp {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('has-disabled:opacity-50 flex items-center gap-2', this.userClass()),
+		hlm('flex items-center gap-2 has-disabled:opacity-50', this.userClass()),
 	);
 }

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

@@ -0,0 +1,35 @@
+import { HlmItem } from './lib/hlm-item';
+import { HlmItemActions } from './lib/hlm-item-actions';
+import { HlmItemContent } from './lib/hlm-item-content';
+import { HlmItemDescription } from './lib/hlm-item-description';
+import { HlmItemFooter } from './lib/hlm-item-footer';
+import { HlmItemGroup } from './lib/hlm-item-group';
+import { HlmItemHeader } from './lib/hlm-item-header';
+import { HlmItemMedia } from './lib/hlm-item-media';
+import { HlmItemSeparator } from './lib/hlm-item-separator';
+import { HlmItemTitle } from './lib/hlm-item-title';
+
+export * from './lib/hlm-item';
+export * from './lib/hlm-item-actions';
+export * from './lib/hlm-item-content';
+export * from './lib/hlm-item-description';
+export * from './lib/hlm-item-footer';
+export * from './lib/hlm-item-group';
+export * from './lib/hlm-item-header';
+export * from './lib/hlm-item-media';
+export * from './lib/hlm-item-separator';
+export * from './lib/hlm-item-title';
+export * from './lib/hlm-item-token';
+
+export const HlmItemImports = [
+	HlmItem,
+	HlmItemActions,
+	HlmItemContent,
+	HlmItemDescription,
+	HlmItemFooter,
+	HlmItemGroup,
+	HlmItemHeader,
+	HlmItemMedia,
+	HlmItemSeparator,
+	HlmItemTitle,
+] as const;

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

@@ -0,0 +1,15 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmItemActions]',
+	host: {
+		'data-slot': 'item-actions',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmItemActions {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('flex items-center gap-2', this.userClass()));
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmItemContent]',
+	host: {
+		'data-slot': 'item-content',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmItemContent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', this.userClass()),
+	);
+}

package/src/generators/ui/libs/ui-item-helm/files/lib/hlm-item-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: 'p[hlmItemDescription]',
+	host: {
+		'data-slot': 'item-description',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmItemDescription {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+			'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmItemFooter]',
+	host: {
+		'data-slot': 'item-footer',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmItemFooter {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex basis-full items-center justify-between gap-2', this.userClass()),
+	);
+}

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

@@ -0,0 +1,12 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmItemGroup]',
+	host: { 'data-slot': 'item-group', '[class]': '_computedClass()' },
+})
+export class HlmItemGroup {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('group/item-group flex flex-col', this.userClass()));
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmItemHeader]',
+	host: {
+		'data-slot': 'item-header',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmItemHeader {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex basis-full items-center justify-between gap-2', this.userClass()),
+	);
+}

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

@@ -0,0 +1,41 @@
+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';
+import { injectHlmItemMediaConfig } from './hlm-item-token';
+
+const itemMediaVariants = cva(
+	'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_ng-icon]:pointer-events-none',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "bg-muted size-8 rounded-sm border [&_ng-icon:not([class*='size-'])]:size-4",
+				image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
+
+@Directive({
+	selector: 'div[hlmItemMedia]',
+	host: {
+		'data-slot': 'item-media',
+		'[attr.data-variant]': 'variant()',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmItemMedia {
+	private readonly _config = injectHlmItemMediaConfig();
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(itemMediaVariants({ variant: this.variant() }), this.userClass()),
+	);
+	public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);
+}

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

@@ -0,0 +1,15 @@
+import { computed, Directive, input } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { hlmSeparatorClass } from '<%- importAlias %>/separator';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmItemSeparator]',
+	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
+	host: { 'data-slot': 'item-separator', '[class]': '_computedClass()' },
+})
+export class HlmItemSeparator {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm(hlmSeparatorClass, 'my-0', this.userClass()));
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmItemTitle]',
+	host: {
+		'data-slot': 'item-title',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmItemTitle {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex w-fit items-center gap-2 text-sm leading-snug font-medium', this.userClass()),
+	);
+}

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

@@ -0,0 +1,41 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import type { ItemVariants } from './hlm-item';
+import type { ItemMediaVariants } from './hlm-item-media';
+
+export interface HlmItemConfig {
+	variant: ItemVariants['variant'];
+	size: ItemVariants['size'];
+}
+
+const defaultConfig: HlmItemConfig = {
+	variant: 'default',
+	size: 'default',
+};
+
+const HlmItemConfigToken = new InjectionToken<HlmItemConfig>('HlmItemConfig');
+
+export function provideHlmItemConfig(config: Partial<HlmItemConfig>): ValueProvider {
+	return { provide: HlmItemConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmItemConfig(): HlmItemConfig {
+	return inject(HlmItemConfigToken, { optional: true }) ?? defaultConfig;
+}
+
+export interface HlmItemMediaConfig {
+	variant: ItemMediaVariants['variant'];
+}
+
+const defaultMediaConfig: HlmItemMediaConfig = {
+	variant: 'default',
+};
+
+const HlmItemMediaConfigToken = new InjectionToken<HlmItemMediaConfig>('HlmItemMediaConfig');
+
+export function provideHlmItemMediaConfig(config: Partial<HlmItemMediaConfig>): ValueProvider {
+	return { provide: HlmItemMediaConfigToken, useValue: { ...defaultMediaConfig, ...config } };
+}
+
+export function injectHlmItemMediaConfig(): HlmItemMediaConfig {
+	return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
+}

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

@@ -0,0 +1,49 @@
+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';
+import { injectHlmItemConfig } from './hlm-item-token';
+
+const itemVariants = cva(
+	'group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border-border',
+				muted: 'bg-muted/50',
+			},
+			size: {
+				default: 'gap-4 p-4',
+				sm: 'gap-2.5 px-4 py-3',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+export type ItemVariants = VariantProps<typeof itemVariants>;
+
+@Directive({
+	selector: 'div[hlmItem], a[hlmItem]',
+	host: {
+		'data-slot': 'item',
+		'[attr.data-variant]': 'variant()',
+		'[attr.data-size]': 'size()',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmItem {
+	private readonly _config = injectHlmItemConfig();
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() =>
+		hlm(itemVariants({ variant: this.variant(), size: this.size() }), this.userClass()),
+	);
+	public readonly variant = input<ItemVariants['variant']>(this._config.variant);
+	public readonly size = input<ItemVariants['size']>(this._config.size);
+}

package/src/generators/ui/libs/ui-item-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-item-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: 'item',
+        internalName: 'ui-item-helm',
+        publicName: 'ui-item-helm',
+    });
+}
+//# sourceMappingURL=generator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-item-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,MAAM;QACrB,YAAY,EAAE,cAAc;QAC5B,UAAU,EAAE,cAAc;KAC1B,CAAC,CAAC;AACJ,CAAC"}

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

@@ -13,7 +13,7 @@ export class HlmKbd {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium',
+			'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
 			"[&_ng-icon:not([class*='size-'])]:size-3",
 			'[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
 			this.userClass(),

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

@@ -20,7 +20,7 @@ export class HlmLabel {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50',
+			'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[disabled]:cursor-not-allowed peer-data-[disabled]:opacity-50 has-[[disabled]]:cursor-not-allowed has-[[disabled]]:opacity-50',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-bar-item.ts.template

@@ -14,7 +14,7 @@ export class HlmMenuBarItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium outline-none',
+			'focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-none select-none',
 			this.userClass(),
 		),
 	);

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

@@ -15,6 +15,6 @@ import type { ClassValue } from 'clsx';
 export class HlmMenuBar {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1', this.userClass()),
+		hlm('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-checkbox.ts.template

@@ -20,7 +20,7 @@ export class HlmMenuItemCheckbox {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors disabled:pointer-events-none disabled:opacity-50',
+			'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none disabled:pointer-events-none disabled:opacity-50',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-menu-helm/files/lib/hlm-menu-item-radio.ts.template

@@ -20,7 +20,7 @@ export class HlmMenuItemRadio {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors disabled:pointer-events-none disabled:opacity-50',
+			'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none disabled:pointer-events-none disabled:opacity-50',
 			this.userClass(),
 		),
 	);

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

@@ -29,7 +29,7 @@ export class HlmMenuItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			`hover:bg-accent focus-visible:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:!text-destructive [&_ng-icon]:text-muted-foreground relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0`,
+			`hover:bg-accent focus-visible:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:!text-destructive [&_ng-icon]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0`,
 			this.userClass(),
 		),
 	);

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

@@ -5,7 +5,7 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 export const menuVariants = cva(
-	'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-top overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md',
+	'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-top overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
 	{
 		variants: {
 			variant: {

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

@@ -25,7 +25,7 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 	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">
+			<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
 				<b>{{ totalItems() }}</b>
 				total items |
 				<b>{{ _pages().length }}</b>

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

@@ -24,7 +24,7 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
 	selector: 'hlm-numbered-pagination',
 	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">
+			<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
 				<b>{{ totalItems() }}</b>
 				total items |
 				<b>{{ _pages().length }}</b>

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

@@ -12,7 +12,7 @@ export class HlmPopoverClose {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none',
+			'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none',
 			this.userClass(),
 		),
 	);