@aurorajs.dev/catalyst-cli 1.0.0

package/dist/templates/frontend/application/libs/ui/item/src/lib/hlm-item.ts

@@ -0,0 +1,45 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+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()',
+  },
+})
+export class HlmItem {
+  private readonly _config = injectHlmItemConfig();
+  public readonly variant = input<ItemVariants['variant']>(this._config.variant);
+  public readonly size = input<ItemVariants['size']>(this._config.size);
+
+  constructor() {
+    classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
+  }
+}

package/dist/templates/frontend/application/libs/ui/kbd/src/index.ts

@@ -0,0 +1,7 @@
+import { HlmKbd } from './lib/hlm-kbd';
+import { HlmKbdGroup } from './lib/hlm-kbd-group';
+
+export * from './lib/hlm-kbd';
+export * from './lib/hlm-kbd-group';
+
+export const HlmKbdImports = [HlmKbd, HlmKbdGroup] as const;

package/dist/templates/frontend/application/libs/ui/kbd/src/lib/hlm-kbd-group.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: 'kbd[hlmKbdGroup]',
+  host: {
+    'data-slot': 'kbd-group',
+  },
+})
+export class HlmKbdGroup {
+  constructor() {
+    classes(() => 'inline-flex items-center gap-1');
+  }
+}

package/dist/templates/frontend/application/libs/ui/kbd/src/lib/hlm-kbd.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: 'kbd[hlmKbd]',
+  host: {
+    'data-slot': 'kbd',
+  },
+})
+export class HlmKbd {
+  constructor() {
+    classes(() => [
+      '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*='text-'])]:text-xs",
+      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+    ]);
+  }
+}

package/dist/templates/frontend/application/libs/ui/label/src/index.ts

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

package/dist/templates/frontend/application/libs/ui/label/src/lib/hlm-label.ts

@@ -0,0 +1,24 @@
+import { Directive } from '@angular/core';
+import { BrnLabel } from '@spartan-ng/brain/label';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: '[hlmLabel]',
+  hostDirectives: [
+    {
+      directive: BrnLabel,
+      inputs: ['id', 'for'],
+    },
+  ],
+  host: {
+    'data-slot': 'label',
+  },
+})
+export class HlmLabel {
+  constructor() {
+    classes(
+      () =>
+        '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',
+    );
+  }
+}

package/dist/templates/frontend/application/libs/ui/menubar/src/index.ts

@@ -0,0 +1,8 @@
+import { HlmMenubar } from './lib/hlm-menubar';
+import { HlmMenubarTrigger } from './lib/hlm-menubar-trigger';
+
+export * from './lib/hlm-menubar';
+export * from './lib/hlm-menubar-token';
+export * from './lib/hlm-menubar-trigger';
+
+export const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger] as const;

package/dist/templates/frontend/application/libs/ui/menubar/src/lib/hlm-menubar-token.ts

@@ -0,0 +1,22 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import { type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+
+export interface HlmMenubarConfig {
+  align: MenuAlign;
+  side: MenuSide;
+}
+
+const defaultConfig: HlmMenubarConfig = {
+  align: 'start',
+  side: 'bottom',
+};
+
+const HlmMenubarConfigToken = new InjectionToken<HlmMenubarConfig>('HlmMenubarConfig');
+
+export function provideHlmMenubarConfig(config: Partial<HlmMenubarConfig>): ValueProvider {
+  return { provide: HlmMenubarConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmMenubarConfig(): HlmMenubarConfig {
+  return inject(HlmMenubarConfigToken, { optional: true }) ?? defaultConfig;
+}

package/dist/templates/frontend/application/libs/ui/menubar/src/lib/hlm-menubar-trigger.ts

@@ -0,0 +1,61 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+import { classes } from '@spartan-ng/helm/utils';
+import { injectHlmMenubarConfig } from './hlm-menubar-token';
+
+@Directive({
+  selector: 'button[hlmMenubarTrigger]',
+  hostDirectives: [
+    {
+      directive: CdkMenuItem,
+      inputs: ['cdkMenuItemDisabled: disabled'],
+    },
+    {
+      directive: CdkMenuTrigger,
+      inputs: ['cdkMenuTriggerFor: hlmMenubarTrigger', 'cdkMenuTriggerData: hlmMenubarTriggerData'],
+      outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
+    },
+  ],
+  host: {
+    'data-slot': 'menubar-trigger',
+    '[disabled]': 'disabled() ',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+})
+export class HlmMenubarTrigger {
+  private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+  private readonly _config = injectHlmMenubarConfig();
+
+  public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  public readonly align = input<MenuAlign>(this._config.align);
+  public readonly side = input<MenuSide>(this._config.side);
+
+  private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
+
+  constructor() {
+    // once the trigger opens we wait until the next tick and then grab the last position
+    // used to position the menu. we store this in our trigger which the brnMenu directive has
+    // access to through DI
+    this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
+      setTimeout(
+        () =>
+          // eslint-disable-next-line
+          ((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
+            (this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
+      ),
+    );
+
+    effect(() => {
+      this._cdkTrigger.menuPosition = this._menuPosition();
+    });
+
+    classes(
+      () =>
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    );
+  }
+}

package/dist/templates/frontend/application/libs/ui/menubar/src/lib/hlm-menubar.ts

@@ -0,0 +1,16 @@
+import { CdkMenuBar } from '@angular/cdk/menu';
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: '[hlmMenubar],hlm-menubar',
+  hostDirectives: [CdkMenuBar],
+  host: {
+    'data-slot': 'menubar',
+  },
+})
+export class HlmMenubar {
+  constructor() {
+    classes(() => 'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs');
+  }
+}

package/dist/templates/frontend/application/libs/ui/native-select/src/index.ts

@@ -0,0 +1,13 @@
+import { HlmNativeSelect } from './lib/hlm-native-select';
+import { HlmNativeSelectOptGroup } from './lib/hlm-native-select-opt-group';
+import { HlmNativeSelectOption } from './lib/hlm-native-select-option';
+
+export * from './lib/hlm-native-select';
+export * from './lib/hlm-native-select-opt-group';
+export * from './lib/hlm-native-select-option';
+
+export const HlmNativeSelectImports = [
+  HlmNativeSelect,
+  HlmNativeSelectOption,
+  HlmNativeSelectOptGroup,
+] as const;

package/dist/templates/frontend/application/libs/ui/native-select/src/lib/hlm-native-select-opt-group.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[hlmNativeSelectOptGroup]',
+  host: {
+    'data-slot': 'native-select-optgroup',
+  },
+})
+export class HlmNativeSelectOptGroup {}

package/dist/templates/frontend/application/libs/ui/native-select/src/lib/hlm-native-select-option.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[hlmNativeSelectOption]',
+  host: {
+    'data-slot': 'native-select-option',
+  },
+})
+export class HlmNativeSelectOption {}

package/dist/templates/frontend/application/libs/ui/native-select/src/lib/hlm-native-select.ts

@@ -0,0 +1,155 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  input,
+  linkedSignal,
+  model,
+  output,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { BrnFieldControl, provideBrnLabelable } from '@spartan-ng/brain/field';
+import { type ChangeFn, type TouchFn } from '@spartan-ng/brain/forms';
+import { classes, hlm } from '@spartan-ng/helm/utils';
+import type { ClassValue } from 'clsx';
+
+export const HLM_NATIVE_SELECT_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => HlmNativeSelect),
+  multi: true,
+};
+
+@Component({
+  selector: 'hlm-native-select',
+  imports: [NgIcon],
+  providers: [
+    HLM_NATIVE_SELECT_VALUE_ACCESSOR,
+    provideIcons({ lucideChevronDown }),
+    provideBrnLabelable(HlmNativeSelect),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnFieldControl],
+  host: {
+    'data-slot': 'native-select-wrapper',
+    '[attr.data-size]': 'size()',
+  },
+  template: `
+    <select
+      [attr.data-size]="size()"
+      [attr.aria-invalid]="_ariaInvalid() ? 'true' : null"
+      [attr.data-invalid]="_ariaInvalid() ? 'true' : null"
+      [attr.data-dirty]="_dirty?.() ? 'true' : null"
+      [attr.data-touched]="_touched?.() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="_spartanInvalid?.() ? 'true' : null"
+      [id]="selectId()"
+      [class]="_computedSelectClass()"
+      [value]="value()"
+      [disabled]="_disabled()"
+      data-slot="native-select"
+      (change)="_valueChanged($event)"
+      (blur)="_blur()"
+    >
+      <ng-content />
+    </select>
+
+    <ng-icon
+      name="lucideChevronDown"
+      aria-hidden="true"
+      [class]="_computedSelectIconClass()"
+      data-slot="native-select-icon"
+    />
+  `,
+})
+export class HlmNativeSelect implements ControlValueAccessor {
+  private readonly _fieldControl = inject(BrnFieldControl, { optional: true });
+
+  private static _id = 0;
+
+  public readonly selectId = input<string>(`hlm-native-select-${HlmNativeSelect._id++}`);
+
+  public readonly selectClass = input<ClassValue>('');
+
+  protected readonly _computedSelectClass = computed(() =>
+    hlm(
+      'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8',
+      'data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 data-[matches-spartan-invalid=true]:ring-3',
+      this.selectClass(),
+    ),
+  );
+
+  public readonly selectIconClass = input<ClassValue>('');
+
+  protected readonly _computedSelectIconClass = computed(() =>
+    hlm(
+      'text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-base select-none',
+      this.selectIconClass(),
+    ),
+  );
+
+  public readonly size = input<'sm' | 'default'>('default');
+
+  public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  protected readonly _disabled = linkedSignal(this.disabled);
+
+  /** Manual override for aria-invalid. When not set, auto-detects from the parent autocomplete error state. */
+  public readonly ariaInvalidOverride = input<boolean | undefined, BooleanInput>(undefined, {
+    transform: (v: BooleanInput) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
+    alias: 'aria-invalid',
+  });
+
+  protected readonly _ariaInvalid = computed(() => this.ariaInvalidOverride() ?? this._invalid?.());
+
+  public readonly value = model<string | null>('');
+
+  public readonly valueChange = output<string | null>();
+
+  protected _onChange?: ChangeFn<string | null>;
+  protected _onTouched?: TouchFn;
+
+  public readonly labelableId = this.selectId;
+
+  protected readonly _invalid = this._fieldControl?.invalid;
+  protected readonly _touched = this._fieldControl?.touched;
+  protected readonly _dirty = this._fieldControl?.dirty;
+  protected readonly _spartanInvalid = this._fieldControl?.spartanInvalid;
+
+  constructor() {
+    classes(() => 'group/native-select relative w-fit has-[select:disabled]:opacity-50');
+  }
+
+  protected _valueChanged(event: Event): void {
+    const value = (event.target as HTMLSelectElement).value;
+    this.value.set(value);
+    this.valueChange.emit(value);
+    this._onChange?.(value);
+    this._onTouched?.();
+  }
+
+  protected _blur(): void {
+    this._onTouched?.();
+  }
+
+  /** CONTROL VALUE ACCESSOR */
+  public writeValue(value: string | null): void {
+    this.value.set(value);
+  }
+
+  public registerOnChange(fn: ChangeFn<string | null>): void {
+    this._onChange = fn;
+  }
+
+  public registerOnTouched(fn: TouchFn): void {
+    this._onTouched = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this._disabled.set(isDisabled);
+  }
+}

package/dist/templates/frontend/application/libs/ui/navigation-menu/src/index.ts

@@ -0,0 +1,25 @@
+import { HlmNavigationMenu } from './lib/hlm-navigation-menu';
+import { HlmNavigationMenuContent } from './lib/hlm-navigation-menu-content';
+import { HlmNavigationMenuItem } from './lib/hlm-navigation-menu-item';
+import { HlmNavigationMenuLink } from './lib/hlm-navigation-menu-link';
+import { HlmNavigationMenuList } from './lib/hlm-navigation-menu-list';
+import { HlmNavigationMenuPortal } from './lib/hlm-navigation-menu-portal';
+import { HlmNavigationMenuTrigger } from './lib/hlm-navigation-menu-trigger';
+
+export * from './lib/hlm-navigation-menu';
+export * from './lib/hlm-navigation-menu-content';
+export * from './lib/hlm-navigation-menu-item';
+export * from './lib/hlm-navigation-menu-link';
+export * from './lib/hlm-navigation-menu-list';
+export * from './lib/hlm-navigation-menu-portal';
+export * from './lib/hlm-navigation-menu-trigger';
+
+export const HlmNavigationMenuImports = [
+  HlmNavigationMenu,
+  HlmNavigationMenuContent,
+  HlmNavigationMenuItem,
+  HlmNavigationMenuLink,
+  HlmNavigationMenuList,
+  HlmNavigationMenuPortal,
+  HlmNavigationMenuTrigger,
+] as const;

package/dist/templates/frontend/application/libs/ui/navigation-menu/src/lib/hlm-navigation-menu-content.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: '[hlmNavigationMenuContent],hlm-navigation-menu-content',
+  host: { 'data-slot': 'navigation-menu-content' },
+})
+export class HlmNavigationMenuContent {
+  constructor() {
+    classes(() => [
+      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out top-0 left-0 w-full p-2 pr-2.5 md:w-auto',
+      'data-[orientation=horizontal]:data-[motion=from-end]:slide-in-from-right-52 data-[orientation=horizontal]:data-[motion=from-start]:slide-in-from-left-52 data-[orientation=horizontal]:data-[motion=to-end]:slide-out-to-right-52 data-[orientation=horizontal]:data-[motion=to-start]:slide-out-to-left-52',
+      'data-[orientation=vertical]:data-[motion=from-end]:slide-in-from-bottom-52 data-[orientation=vertical]:data-[motion=from-start]:slide-in-from-top-52 data-[orientation=vertical]:data-[motion=to-end]:slide-out-to-bottom-52 data-[orientation=vertical]:data-[motion=to-start]:slide-out-to-top-52',
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 top-full overflow-hidden rounded-md border shadow duration-200 data-[orientation=horizontal]:mt-1.5 data-[orientation=vertical]:mx-1.5 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+    ]);
+  }
+}

package/dist/templates/frontend/application/libs/ui/navigation-menu/src/lib/hlm-navigation-menu-item.ts

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { BrnNavigationMenuItem } from '@spartan-ng/brain/navigation-menu';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: 'li[hlmNavigationMenuItem]',
+  hostDirectives: [{ directive: BrnNavigationMenuItem, inputs: ['id'] }],
+})
+export class HlmNavigationMenuItem {
+  constructor() {
+    classes(() => 'relative');
+  }
+}

package/dist/templates/frontend/application/libs/ui/navigation-menu/src/lib/hlm-navigation-menu-link.ts

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnNavigationMenuLink } from '@spartan-ng/brain/navigation-menu';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: 'a[hlmNavigationMenuLink]',
+  hostDirectives: [{ directive: BrnNavigationMenuLink, inputs: ['active'] }],
+})
+export class HlmNavigationMenuLink {
+  constructor() {
+    classes(() => [
+      'data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_ng-icon:not([class*="text-"])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_ng-icon:not([class*="text-"])]:text-base',
+      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+    ]);
+  }
+}

package/dist/templates/frontend/application/libs/ui/navigation-menu/src/lib/hlm-navigation-menu-list.ts

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+import { BrnNavigationMenuList } from '@spartan-ng/brain/navigation-menu';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: 'ul[hlmNavigationMenuList]',
+  hostDirectives: [
+    {
+      directive: BrnNavigationMenuList,
+    },
+  ],
+})
+export class HlmNavigationMenuList {
+  constructor() {
+    classes(() => [
+      'group flex flex-1 list-none items-center justify-center gap-0',
+      'data-[orientation=vertical]:flex-col',
+    ]);
+  }
+}

package/dist/templates/frontend/application/libs/ui/navigation-menu/src/lib/hlm-navigation-menu-portal.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnNavigationMenuContent } from '@spartan-ng/brain/navigation-menu';
+
+@Directive({
+  selector: '[hlmNavigationMenuPortal]',
+  hostDirectives: [BrnNavigationMenuContent],
+})
+export class HlmNavigationMenuPortal {}

package/dist/templates/frontend/application/libs/ui/navigation-menu/src/lib/hlm-navigation-menu-trigger.ts

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnNavigationMenuTrigger } from '@spartan-ng/brain/navigation-menu';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: 'button[hlmNavigationMenuTrigger]',
+  hostDirectives: [BrnNavigationMenuTrigger],
+})
+export class HlmNavigationMenuTrigger {
+  constructor() {
+    classes(
+      () =>
+        'bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50',
+    );
+  }
+}

package/dist/templates/frontend/application/libs/ui/navigation-menu/src/lib/hlm-navigation-menu.ts

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnNavigationMenu } from '@spartan-ng/brain/navigation-menu';
+import { classes } from '@spartan-ng/helm/utils';
+
+@Directive({
+  selector: 'nav[hlmNavigationMenu]',
+  hostDirectives: [
+    {
+      directive: BrnNavigationMenu,
+      inputs: ['value', 'delayDuration', 'skipDelayDuration', 'orientation', 'openOn'],
+      outputs: ['valueChange'],
+    },
+  ],
+})
+export class HlmNavigationMenu {
+  constructor() {
+    classes(
+      () => 'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+    );
+  }
+}

package/dist/templates/frontend/application/libs/ui/pagination/src/index.ts

@@ -0,0 +1,31 @@
+import { HlmNumberedPagination } from './lib/hlm-numbered-pagination';
+import { HlmNumberedPaginationQueryParams } from './lib/hlm-numbered-pagination-query-params';
+import { HlmPagination } from './lib/hlm-pagination';
+import { HlmPaginationContent } from './lib/hlm-pagination-content';
+import { HlmPaginationEllipsis } from './lib/hlm-pagination-ellipsis';
+import { HlmPaginationItem } from './lib/hlm-pagination-item';
+import { HlmPaginationLink } from './lib/hlm-pagination-link';
+import { HlmPaginationNext } from './lib/hlm-pagination-next';
+import { HlmPaginationPrevious } from './lib/hlm-pagination-previous';
+
+export * from './lib/hlm-numbered-pagination';
+export * from './lib/hlm-numbered-pagination-query-params';
+export * from './lib/hlm-pagination';
+export * from './lib/hlm-pagination-content';
+export * from './lib/hlm-pagination-ellipsis';
+export * from './lib/hlm-pagination-item';
+export * from './lib/hlm-pagination-link';
+export * from './lib/hlm-pagination-next';
+export * from './lib/hlm-pagination-previous';
+
+export const HlmPaginationImports = [
+  HlmPagination,
+  HlmPaginationContent,
+  HlmPaginationItem,
+  HlmPaginationLink,
+  HlmPaginationPrevious,
+  HlmPaginationNext,
+  HlmPaginationEllipsis,
+  HlmNumberedPagination,
+  HlmNumberedPaginationQueryParams,
+] as const;