@blueprint-platform/components 0.0.0-stage → 0.2.1

package/dist/generators/ui/files/shared/ui/menubar/src/lib/hlm-menubar-trigger.ts

@@ -0,0 +1,69 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import {
+  booleanAttribute,
+  computed,
+  Directive,
+  effect,
+  forwardRef,
+  inject,
+  input,
+} from '@angular/core';
+import {
+  createMenuPosition,
+  MENU_SIDE,
+  type MenuAlign,
+  type MenuSide,
+} from '@spartan-ng/brain/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { injectHlmMenubarConfig } from './hlm-menubar-token';
+
+@Directive({
+  selector: 'button[hlmMenubarTrigger]',
+  providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => 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() {
+    // CDK sets transform-origin on the menu content (a shared hlm-dropdown-menu) from the resolved
+    // position; the content reads it to animate from the anchored corner and to derive its data-side.
+    // Cast tolerates @angular/cdk < 21.2 (we still support >=21.0), where the property is absent and
+    // the assignment is a harmless no-op.
+    (this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector =
+      '[data-slot="dropdown-menu"]';
+
+    effect(() => {
+      this._cdkTrigger.menuPosition = this._menuPosition();
+    });
+
+    classes(
+      () =>
+        'hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+    );
+  }
+}

package/dist/generators/ui/files/shared/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 '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmMenubar],hlm-menubar',
+  hostDirectives: [CdkMenuBar],
+  host: {
+    'data-slot': 'menubar',
+  },
+})
+export class HlmMenubar {
+  constructor() {
+    classes(() => 'bg-background h-8 gap-0.5 rounded-lg border p-[3px] flex items-center');
+  }
+}

package/dist/generators/ui/files/shared/ui/message/src/index.ts

@@ -0,0 +1,22 @@
+import { HlmMessage } from './lib/hlm-message';
+import { HlmMessageAvatar } from './lib/hlm-message-avatar';
+import { HlmMessageContent } from './lib/hlm-message-content';
+import { HlmMessageFooter } from './lib/hlm-message-footer';
+import { HlmMessageGroup } from './lib/hlm-message-group';
+import { HlmMessageHeader } from './lib/hlm-message-header';
+
+export * from './lib/hlm-message';
+export * from './lib/hlm-message-avatar';
+export * from './lib/hlm-message-content';
+export * from './lib/hlm-message-footer';
+export * from './lib/hlm-message-group';
+export * from './lib/hlm-message-header';
+
+export const HlmMessageImports = [
+  HlmMessage,
+  HlmMessageAvatar,
+  HlmMessageContent,
+  HlmMessageFooter,
+  HlmMessageGroup,
+  HlmMessageHeader,
+] as const;

package/dist/generators/ui/files/shared/ui/message/src/lib/hlm-message-avatar.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmMessageAvatar],hlm-message-avatar',
+  host: { 'data-slot': 'message-avatar' },
+})
+export class HlmMessageAvatar {
+  constructor() {
+    classes(
+      () =>
+        'bg-muted min-w-8 rounded-full flex w-fit shrink-0 items-center justify-center self-end overflow-hidden group-has-data-[slot=message-footer]/message:-translate-y-8',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/message/src/lib/hlm-message-content.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmMessageContent],hlm-message-content',
+  host: { 'data-slot': 'message-content' },
+})
+export class HlmMessageContent {
+  constructor() {
+    classes(
+      () =>
+        'gap-2.5 flex w-full min-w-0 flex-col wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/message/src/lib/hlm-message-footer.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmMessageFooter],hlm-message-footer',
+  host: { 'data-slot': 'message-footer' },
+})
+export class HlmMessageFooter {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground px-3 text-xs font-medium flex max-w-full min-w-0 items-center group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/message/src/lib/hlm-message-group.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmMessageGroup],hlm-message-group',
+  host: { 'data-slot': 'message-group' },
+})
+export class HlmMessageGroup {
+  constructor() {
+    classes(() => 'gap-2 flex min-w-0 flex-col');
+  }
+}

package/dist/generators/ui/files/shared/ui/message/src/lib/hlm-message-header.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmMessageHeader],hlm-message-header',
+  host: { 'data-slot': 'message-header' },
+})
+export class HlmMessageHeader {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground px-3 text-xs font-medium flex max-w-full min-w-0 items-center group-has-data-[variant=ghost]/message:px-0',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/message/src/lib/hlm-message.ts

@@ -0,0 +1,24 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export type MessageAlign = 'start' | 'end';
+
+@Directive({
+  selector: '[hlmMessage],hlm-message',
+  host: {
+    'data-slot': 'message',
+    '[attr.data-align]': 'align()',
+    // Prevent the legacy HTML `align` attribute from forcing text-align.
+    '[attr.align]': 'null',
+  },
+})
+export class HlmMessage {
+  public readonly align = input<MessageAlign>('start');
+
+  constructor() {
+    classes(
+      () =>
+        'gap-2 text-sm group/message relative flex w-full min-w-0 data-[align=end]:flex-row-reverse',
+    );
+  }
+}

package/dist/generators/ui/files/shared/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/generators/ui/files/shared/ui/native-select/src/lib/hlm-native-select-opt-group.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'optgroup[hlmNativeSelectOptGroup]',
+  host: { 'data-slot': 'native-select-optgroup' },
+})
+export class HlmNativeSelectOptGroup {
+  constructor() {
+    classes(() => 'bg-[Canvas] text-[CanvasText]');
+  }
+}

package/dist/generators/ui/files/shared/ui/native-select/src/lib/hlm-native-select-option.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'option[hlmNativeSelectOption]',
+  host: { 'data-slot': 'native-select-option' },
+})
+export class HlmNativeSelectOption {
+  constructor() {
+    classes(() => 'bg-[Canvas] text-[CanvasText]');
+  }
+}

package/dist/generators/ui/files/shared/ui/native-select/src/lib/hlm-native-select.ts

@@ -0,0 +1,161 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  inject,
+  input,
+  linkedSignal,
+  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 '@blueprint-platform/ui/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
+      data-slot="native-select"
+      [id]="selectId()"
+      [class]="_computedSelectClass()"
+      [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"
+      [value]="value()"
+      [disabled]="_disabled()"
+      (change)="_valueChanged($event)"
+      (blur)="_blur()"
+    >
+      <ng-content />
+    </select>
+
+    <ng-icon
+      name="lucideChevronDown"
+      [class]="_computedSelectIconClass()"
+      aria-hidden="true"
+      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 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 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors select-none focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+      this.selectClass(),
+    ),
+  );
+
+  public readonly selectIconClass = input<ClassValue>('');
+
+  protected readonly _computedSelectIconClass = computed(() =>
+    hlm(
+      'text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[length:--spacing(4)] pointer-events-none absolute 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);
+
+  /** Whether to force the input into an invalid state. */
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  /** 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 valueInput = input<string | undefined | null>('', { alias: 'value' });
+  public readonly value = linkedSignal(this.valueInput);
+
+  public readonly valueChange = output<string | undefined | null>();
+
+  protected _onChange?: ChangeFn<string | undefined | 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 = computed(
+    () => this.forceInvalid() || 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 | undefined | null): void {
+    this.value.set(value);
+  }
+
+  public registerOnChange(fn: ChangeFn<string | undefined | null>): void {
+    this._onChange = fn;
+  }
+
+  public registerOnTouched(fn: TouchFn): void {
+    this._onTouched = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this._disabled.set(isDisabled);
+  }
+}

package/dist/generators/ui/files/shared/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/generators/ui/files/shared/ui/navigation-menu/src/lib/hlm-navigation-menu-content.ts

@@ -0,0 +1,24 @@
+import { type NumberInput } from '@angular/cdk/coercion';
+import { Directive, input, numberAttribute } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmNavigationMenuContent],hlm-navigation-menu-content',
+  host: {
+    'data-slot': 'navigation-menu-content',
+    '[style.--nav-offset]': 'navOffset()',
+  },
+})
+export class HlmNavigationMenuContent {
+  public readonly navOffset = input<number, NumberInput>(1.5, { transform: numberAttribute });
+
+  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',
+      'data-[orientation=horizontal]:mt-[--spacing(var(--nav-offset))] data-[orientation=vertical]:mx-[--spacing(var(--nav-offset))]',
+      'bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0 block',
+    ]);
+  }
+}

package/dist/generators/ui/files/shared/ui/navigation-menu/src/lib/hlm-navigation-menu-item.ts

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnNavigationMenuItem } from '@spartan-ng/brain/navigation-menu';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'li[hlmNavigationMenuItem]',
+  hostDirectives: [{ directive: BrnNavigationMenuItem, inputs: ['id'] }],
+  host: {
+    'data-slot': 'navigation-menu-item',
+  },
+})
+export class HlmNavigationMenuItem {
+  constructor() {
+    classes(() => 'relative has-[:focus]:z-10 data-active:z-10');
+  }
+}

package/dist/generators/ui/files/shared/ui/navigation-menu/src/lib/hlm-navigation-menu-link.ts

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { BrnNavigationMenuLink } from '@spartan-ng/brain/navigation-menu';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'a[hlmNavigationMenuLink]',
+  hostDirectives: [{ directive: BrnNavigationMenuLink, inputs: ['active'] }],
+  host: {
+    'data-slot': 'navigation-menu-link',
+  },
+})
+export class HlmNavigationMenuLink {
+  constructor() {
+    classes(
+      () =>
+        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]",
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/navigation-menu/src/lib/hlm-navigation-menu-list.ts

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

package/dist/generators/ui/files/shared/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/generators/ui/files/shared/ui/navigation-menu/src/lib/hlm-navigation-menu-trigger.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { BrnNavigationMenuTrigger } from '@spartan-ng/brain/navigation-menu';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'button[hlmNavigationMenuTrigger]',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideChevronDown })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnNavigationMenuTrigger, inputs: ['align'] }],
+  host: { 'data-slot': 'navigation-menu-trigger' },
+  template: `
+    <ng-content />
+    <ng-icon
+      name="lucideChevronDown"
+      class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180"
+    />
+  `,
+})
+export class HlmNavigationMenuTrigger {
+  constructor() {
+    classes(
+      () =>
+        'bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/navigation-menu/src/lib/hlm-navigation-menu.ts

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

package/dist/generators/ui/files/shared/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;