@blueprint-platform/components 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,74 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import type { ComponentType } from '@angular/cdk/portal';
+import { NgComponentOutlet } from '@angular/common';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';
+import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
+import { HlmButton } from '@blueprint-platform/ui/button';
+
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmDialogClose } from './hlm-dialog-close';
+
+type HlmDialogContentContext = {
+  $component?: ComponentType<unknown>;
+  $dynamicComponentClass?: string;
+  $showCloseButton?: boolean;
+};
+
+@Component({
+  selector: 'hlm-dialog-content',
+  imports: [NgComponentOutlet, HlmButton, HlmDialogClose, NgIcon],
+  providers: [provideIcons({ lucideX })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'dialog-content',
+    '[attr.data-state]': 'state()',
+  },
+  template: `
+    @if (component) {
+      <ng-container [ngComponentOutlet]="component" />
+    } @else {
+      <ng-content />
+    }
+
+    @if (showCloseButton()) {
+      <button hlmBtn variant="ghost" size="icon-sm" class="absolute end-2 top-2" hlmDialogClose>
+        <span class="sr-only">close</span>
+        <ng-icon name="lucideX" />
+      </button>
+    }
+  `,
+})
+export class HlmDialogContent {
+  private readonly _dialogRef = inject(BrnDialogRef);
+  private readonly _dialogContext = injectBrnDialogContext<HlmDialogContentContext | null>({
+    optional: true,
+  });
+
+  public readonly showCloseButton = input<boolean, BooleanInput>(
+    this._dialogContext?.$showCloseButton ?? true,
+    {
+      transform: booleanAttribute,
+    },
+  );
+
+  public readonly state = computed(() => this._dialogRef?.state() ?? 'closed');
+
+  public readonly component = this._dialogContext?.$component;
+  private readonly _dynamicComponentClass = this._dialogContext?.$dynamicComponentClass;
+
+  constructor() {
+    classes(() => [
+      'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm relative mx-auto w-full outline-none sm:mx-0',
+      this._dynamicComponentClass,
+    ]);
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnDialogDescription } from '@spartan-ng/brain/dialog';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDialogDescription]',
+  hostDirectives: [BrnDialogDescription],
+  host: { 'data-slot': 'dialog-description' },
+})
+export class HlmDialogDescription {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDialogFooter],hlm-dialog-footer',
+  host: { 'data-slot': 'dialog-footer' },
+})
+export class HlmDialogFooter {
+  constructor() {
+    classes(
+      () =>
+        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+    );
+  }
+}

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

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

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

@@ -0,0 +1,27 @@
+import { computed, Directive, effect, input, untracked } from '@angular/core';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { BrnDialogOverlay } from '@spartan-ng/brain/dialog';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+export const hlmDialogOverlayClass = hlm(
+  'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+);
+
+@Directive({
+  selector: '[hlmDialogOverlay],hlm-dialog-overlay',
+  hostDirectives: [BrnDialogOverlay],
+})
+export class HlmDialogOverlay {
+  private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() => hlm(hlmDialogOverlayClass, this.userClass()));
+
+  constructor() {
+    effect(() => {
+      const newClass = this._computedClass();
+      untracked(() => this._classSettable?.setClassToCustomElement(newClass));
+    });
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnDialogContent } from '@spartan-ng/brain/dialog';
+
+@Directive({
+  selector: '[hlmDialogPortal]',
+  hostDirectives: [{ directive: BrnDialogContent, inputs: ['context', 'class'] }],
+})
+export class HlmDialogPortal {}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnDialogTitle } from '@spartan-ng/brain/dialog';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDialogTitle]',
+  hostDirectives: [BrnDialogTitle],
+  host: { 'data-slot': 'dialog-title' },
+})
+export class HlmDialogTitle {
+  constructor() {
+    classes(() => 'text-base leading-none font-medium');
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnDialogTrigger } from '@spartan-ng/brain/dialog';
+
+@Directive({
+  selector: 'button[hlmDialogTrigger],button[hlmDialogTriggerFor]',
+  hostDirectives: [
+    {
+      directive: BrnDialogTrigger,
+      inputs: ['id', 'brnDialogTriggerFor: hlmDialogTriggerFor', 'type'],
+    },
+  ],
+  host: { 'data-slot': 'dialog-trigger' },
+})
+export class HlmDialogTrigger {}

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

@@ -0,0 +1,46 @@
+import type { ComponentType } from '@angular/cdk/portal';
+import { inject, Injectable, type TemplateRef } from '@angular/core';
+import {
+  type BrnDialogOptions,
+  type BrnDialogRef,
+  BrnDialogService,
+  cssClassesToArray,
+} from '@spartan-ng/brain/dialog';
+import { HlmDialogContent } from './hlm-dialog-content';
+import { hlmDialogOverlayClass } from './hlm-dialog-overlay';
+
+export type HlmDialogOptions<DialogContext = unknown> = BrnDialogOptions & {
+  contentClass?: string;
+  showCloseButton?: boolean;
+  context?: DialogContext;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HlmDialogService {
+  private readonly _brnDialogService = inject(BrnDialogService);
+
+  public open<TResult = unknown, TContext = unknown>(
+    component: ComponentType<unknown> | TemplateRef<unknown>,
+    options?: Partial<HlmDialogOptions<TContext>>,
+  ): BrnDialogRef<TResult> {
+    const mergedOptions = {
+      ...(options ?? {}),
+      backdropClass: cssClassesToArray(`${hlmDialogOverlayClass} ${options?.backdropClass ?? ''}`),
+      context: {
+        ...(options?.context && typeof options.context === 'object' ? options.context : {}),
+        $component: component,
+        $dynamicComponentClass: options?.contentClass,
+        $showCloseButton: options?.showCloseButton,
+      },
+    };
+
+    return this._brnDialogService.open<unknown, TResult>(
+      HlmDialogContent,
+      undefined,
+      mergedOptions.context,
+      mergedOptions,
+    );
+  }
+}

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

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { HlmDialogOverlay } from './hlm-dialog-overlay';
+
+@Component({
+  selector: 'hlm-dialog',
+  exportAs: 'hlmDialog',
+  imports: [HlmDialogOverlay],
+  providers: [
+    {
+      provide: BrnDialog,
+      useExisting: forwardRef(() => HlmDialog),
+    },
+    provideBrnDialogDefaultOptions({
+      // add custom options here
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <hlm-dialog-overlay />
+    <ng-content />
+  `,
+})
+export class HlmDialog extends BrnDialog {}

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

@@ -0,0 +1,34 @@
+import { HlmDrawer } from './lib/hlm-drawer';
+import { HlmDrawerClose } from './lib/hlm-drawer-close';
+import { HlmDrawerContent } from './lib/hlm-drawer-content';
+import { HlmDrawerDescription } from './lib/hlm-drawer-description';
+import { HlmDrawerFooter } from './lib/hlm-drawer-footer';
+import { HlmDrawerHeader } from './lib/hlm-drawer-header';
+import { HlmDrawerOverlay } from './lib/hlm-drawer-overlay';
+import { HlmDrawerPortal } from './lib/hlm-drawer-portal';
+import { HlmDrawerTitle } from './lib/hlm-drawer-title';
+import { HlmDrawerTrigger } from './lib/hlm-drawer-trigger';
+
+export * from './lib/hlm-drawer';
+export * from './lib/hlm-drawer-close';
+export * from './lib/hlm-drawer-content';
+export * from './lib/hlm-drawer-description';
+export * from './lib/hlm-drawer-footer';
+export * from './lib/hlm-drawer-header';
+export * from './lib/hlm-drawer-overlay';
+export * from './lib/hlm-drawer-portal';
+export * from './lib/hlm-drawer-title';
+export * from './lib/hlm-drawer-trigger';
+
+export const HlmDrawerImports = [
+  HlmDrawer,
+  HlmDrawerClose,
+  HlmDrawerContent,
+  HlmDrawerDescription,
+  HlmDrawerFooter,
+  HlmDrawerHeader,
+  HlmDrawerOverlay,
+  HlmDrawerPortal,
+  HlmDrawerTitle,
+  HlmDrawerTrigger,
+] as const;

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnDrawerClose } from '@spartan-ng/brain/drawer';
+
+@Directive({
+  selector: 'button[hlmDrawerClose]',
+  hostDirectives: [BrnDrawerClose],
+  host: { 'data-slot': 'drawer-close' },
+})
+export class HlmDrawerClose {}

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

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { BrnDrawerHandle } from '@spartan-ng/brain/drawer';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-drawer-content',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnDrawerHandle, inputs: ['closeThreshold'] }],
+  host: {
+    'data-slot': 'drawer-content',
+    '[attr.data-vaul-drawer-direction]': '_sideProvider.side()',
+    '[attr.data-state]': 'state()',
+  },
+  template: `
+    <div
+      class="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+    ></div>
+    <ng-content />
+  `,
+})
+export class HlmDrawerContent {
+  private readonly _stateProvider = injectExposesStateProvider({ host: true });
+  protected readonly _sideProvider = injectExposedSideProvider({ host: true });
+  public readonly state = this._stateProvider.state ?? signal('closed');
+
+  constructor() {
+    classes(() => [
+      'bg-background fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
+      'group/drawer-content',
+      'data-open:animate-in data-closed:animate-out',
+      'data-[vaul-drawer-direction=bottom]:data-closed:slide-out-to-bottom data-[vaul-drawer-direction=bottom]:data-open:slide-in-from-bottom',
+      'data-[vaul-drawer-direction=top]:data-closed:slide-out-to-top data-[vaul-drawer-direction=top]:data-open:slide-in-from-top',
+      'data-[vaul-drawer-direction=left]:data-closed:slide-out-to-left data-[vaul-drawer-direction=left]:data-open:slide-in-from-left',
+      'data-[vaul-drawer-direction=right]:data-closed:slide-out-to-right data-[vaul-drawer-direction=right]:data-open:slide-in-from-right',
+    ]);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnDrawerDescription } from '@spartan-ng/brain/drawer';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDrawerDescription]',
+  hostDirectives: [BrnDrawerDescription],
+  host: { 'data-slot': 'drawer-description' },
+})
+export class HlmDrawerDescription {
+  constructor() {
+    classes(() => 'text-muted-foreground text-sm');
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDrawerFooter],hlm-drawer-footer',
+  host: { 'data-slot': 'drawer-footer' },
+})
+export class HlmDrawerFooter {
+  constructor() {
+    classes(() => 'gap-2 p-4 mt-auto flex flex-col');
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDrawerHeader],hlm-drawer-header',
+  host: { 'data-slot': 'drawer-header' },
+})
+export class HlmDrawerHeader {
+  constructor() {
+    classes(
+      () =>
+        'gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-start flex flex-col',
+    );
+  }
+}

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

@@ -0,0 +1,27 @@
+import { Directive, computed, effect, input, untracked } from '@angular/core';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { BrnDrawerOverlay } from '@spartan-ng/brain/drawer';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: '[hlmDrawerOverlay],hlm-drawer-overlay',
+  hostDirectives: [BrnDrawerOverlay],
+})
+export class HlmDrawerOverlay {
+  private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0',
+      this.userClass(),
+    ),
+  );
+
+  constructor() {
+    effect(() => {
+      const classValue = this._computedClass();
+      untracked(() => this._classSettable?.setClassToCustomElement(classValue));
+    });
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnDrawerContent } from '@spartan-ng/brain/drawer';
+
+@Directive({
+  selector: '[hlmDrawerPortal]',
+  hostDirectives: [{ directive: BrnDrawerContent, inputs: ['context', 'class'] }],
+})
+export class HlmDrawerPortal {}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnDrawerTitle } from '@spartan-ng/brain/drawer';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDrawerTitle]',
+  hostDirectives: [BrnDrawerTitle],
+  host: { 'data-slot': 'drawer-title' },
+})
+export class HlmDrawerTitle {
+  constructor() {
+    classes(() => 'text-foreground text-base font-medium');
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnDrawerTrigger } from '@spartan-ng/brain/drawer';
+
+@Directive({
+  selector: 'button[hlmDrawerTrigger]',
+  hostDirectives: [{ directive: BrnDrawerTrigger, inputs: ['id', 'direction', 'type'] }],
+  host: { 'data-slot': 'drawer-trigger' },
+})
+export class HlmDrawerTrigger {}

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

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { BrnDrawer } from '@spartan-ng/brain/drawer';
+import { HlmDrawerOverlay } from './hlm-drawer-overlay';
+
+@Component({
+  selector: 'hlm-drawer',
+  exportAs: 'hlmDrawer',
+  imports: [HlmDrawerOverlay],
+  providers: [
+    {
+      provide: BrnDialog,
+      useExisting: forwardRef(() => HlmDrawer),
+    },
+    {
+      provide: BrnDrawer,
+      useExisting: forwardRef(() => HlmDrawer),
+    },
+    provideBrnDialogDefaultOptions({
+      // add custom options here
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <hlm-drawer-overlay />
+    <ng-content />
+  `,
+})
+export class HlmDrawer extends BrnDrawer {}

package/dist/generators/ui/files/shared/ui/dropdown-menu/src/index.ts

@@ -0,0 +1,49 @@
+import { HlmDropdownMenu } from './lib/hlm-dropdown-menu';
+import { HlmDropdownMenuCheckbox } from './lib/hlm-dropdown-menu-checkbox';
+import { HlmDropdownMenuCheckboxIndicator } from './lib/hlm-dropdown-menu-checkbox-indicator';
+import { HlmDropdownMenuGroup } from './lib/hlm-dropdown-menu-group';
+import { HlmDropdownMenuItem } from './lib/hlm-dropdown-menu-item';
+import { HlmDropdownMenuItemSubIndicator } from './lib/hlm-dropdown-menu-item-sub-indicator';
+import { HlmDropdownMenuLabel } from './lib/hlm-dropdown-menu-label';
+import { HlmDropdownMenuRadio } from './lib/hlm-dropdown-menu-radio';
+import { HlmDropdownMenuRadioIndicator } from './lib/hlm-dropdown-menu-radio-indicator';
+import { HlmDropdownMenuSeparator } from './lib/hlm-dropdown-menu-separator';
+import { HlmDropdownMenuShortcut } from './lib/hlm-dropdown-menu-shortcut';
+import { HlmDropdownMenuSub } from './lib/hlm-dropdown-menu-sub';
+import { HlmDropdownMenuSubTrigger } from './lib/hlm-dropdown-menu-sub-trigger';
+
+import { HlmDropdownMenuTrigger } from './lib/hlm-dropdown-menu-trigger';
+
+export * from './lib/hlm-dropdown-menu';
+export * from './lib/hlm-dropdown-menu-checkbox';
+export * from './lib/hlm-dropdown-menu-checkbox-indicator';
+export * from './lib/hlm-dropdown-menu-focus-on-hover';
+export * from './lib/hlm-dropdown-menu-group';
+export * from './lib/hlm-dropdown-menu-item';
+export * from './lib/hlm-dropdown-menu-item-sub-indicator';
+export * from './lib/hlm-dropdown-menu-label';
+export * from './lib/hlm-dropdown-menu-radio';
+export * from './lib/hlm-dropdown-menu-radio-indicator';
+export * from './lib/hlm-dropdown-menu-separator';
+export * from './lib/hlm-dropdown-menu-shortcut';
+export * from './lib/hlm-dropdown-menu-sub';
+export * from './lib/hlm-dropdown-menu-sub-trigger';
+export * from './lib/hlm-dropdown-menu-token';
+export * from './lib/hlm-dropdown-menu-trigger';
+
+export const HlmDropdownMenuImports = [
+  HlmDropdownMenu,
+  HlmDropdownMenuCheckbox,
+  HlmDropdownMenuCheckboxIndicator,
+  HlmDropdownMenuGroup,
+  HlmDropdownMenuItem,
+  HlmDropdownMenuItemSubIndicator,
+  HlmDropdownMenuLabel,
+  HlmDropdownMenuRadio,
+  HlmDropdownMenuRadioIndicator,
+  HlmDropdownMenuSeparator,
+  HlmDropdownMenuShortcut,
+  HlmDropdownMenuSub,
+  HlmDropdownMenuSubTrigger,
+  HlmDropdownMenuTrigger,
+] as const;

package/dist/generators/ui/files/shared/ui/dropdown-menu/src/lib/hlm-dropdown-menu-checkbox-indicator.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-dropdown-menu-checkbox-indicator',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideCheck })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'data-slot': 'dropdown-menu-checkbox-item-indicator' },
+  template: ` <ng-icon name="lucideCheck" /> `,
+})
+export class HlmDropdownMenuCheckboxIndicator {
+  constructor() {
+    classes(
+      () =>
+        'absolute end-2 flex items-center justify-center [&_ng-icon]:text-[length:--spacing(4)] pointer-events-none opacity-0 group-data-checked/dropdown-menu-checkbox:opacity-100',
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemSelectable } from '@angular/cdk/menu';
+import { Directive, booleanAttribute, inject, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
+
+/** @internal. Use HlmDropdownMenuCheckbox instead. */
+@Directive({
+  selector: '[hlmDropdownMenuCheckboxCdk]',
+  providers: [
+    { provide: CdkMenuItemCheckbox, useExisting: HlmDropdownMenuCheckboxCdk },
+    { provide: CdkMenuItemSelectable, useExisting: HlmDropdownMenuCheckboxCdk },
+    { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+  ],
+})
+export class HlmDropdownMenuCheckboxCdk extends CdkMenuItemCheckbox {
+  public readonly keepOpen = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
+  public override trigger(options?: { keepOpen: boolean }) {
+    super.trigger({ ...options, keepOpen: this.keepOpen() });
+  }
+}
+
+@Directive({
+  selector: '[hlmDropdownMenuCheckbox],[hlmDropdownMenuCheckboxItem]',
+  hostDirectives: [
+    {
+      directive: HlmDropdownMenuCheckboxCdk,
+      inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked', 'keepOpen'],
+      outputs: ['cdkMenuItemTriggered: triggered'],
+    },
+    HlmDropdownMenuFocusOnHover,
+  ],
+  host: {
+    'data-slot': 'dropdown-menu-checkbox-item',
+    '[attr.data-disabled]': '_cdkMenuItem.disabled ? "" : null',
+    '[attr.data-checked]': '_cdkMenuItem.checked ? "" : null',
+    '[attr.data-inset]': 'inset() ? "" : null',
+  },
+})
+export class HlmDropdownMenuCheckbox {
+  protected readonly _cdkMenuItem = inject(HlmDropdownMenuCheckboxCdk);
+
+  public readonly inset = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(
+      () =>
+        "hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground hover:**:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/dropdown-menu-checkbox relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/dropdown-menu/src/lib/hlm-dropdown-menu-focus-on-hover.ts

@@ -0,0 +1,35 @@
+import { InputModalityDetector } from '@angular/cdk/a11y';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { Directive, inject } from '@angular/core';
+
+/**
+ * @internal
+ * Moves DOM focus to the hovered menu item. CDK menus only move focus with the keyboard, so on a pointer
+ * the highlight would otherwise stay on the last keyboard-focused item (leaving two rows highlighted) and,
+ * when a submenu closes, focus would fall to <body>, the menu stack would report no focus, and the whole
+ * dropdown would collapse. Following the pointer with focus (Radix/shadcn behaviour) keeps a single
+ * highlight and keeps focus inside the menu stack. setActiveMenuItem also syncs the key manager so keyboard
+ * navigation continues from the hovered item.
+ *
+ * Applied as a host directive on every dropdown item type (item, checkbox, radio, sub-trigger).
+ */
+@Directive({
+  selector: '[hlmDropdownMenuFocusOnHover]',
+  host: {
+    '(mouseenter)': '_focusOnHover()',
+  },
+})
+export class HlmDropdownMenuFocusOnHover {
+  private readonly _cdkMenuItem = inject(CdkMenuItem, { self: true });
+  private readonly _parentMenu = inject(CdkMenu, { optional: true });
+  private readonly _inputModality = inject(InputModalityDetector);
+
+  protected _focusOnHover(): void {
+    // Only skip synthetic hovers from touch taps; every real hover (mouse, or keyboard-then-hover,
+    // which leaves the modality as 'keyboard') should move focus to keep a single highlight.
+    if (this._inputModality.mostRecentModality === 'touch' || this._cdkMenuItem.disabled) {
+      return;
+    }
+    this._parentMenu?.setActiveMenuItem(this._cdkMenuItem);
+  }
+}