@spartan-ng/cli 0.0.1-alpha.566 → 0.0.1-alpha.567

package/src/generators/ui/libs/dropdown-menu/files/index.ts.template

@@ -0,0 +1,45 @@
+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 { 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-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-token';
+export * from './lib/hlm-dropdown-menu-trigger';
+
+export const HlmDropdownMenuImports = [
+	HlmDropdownMenu,
+	HlmDropdownMenuCheckbox,
+	HlmDropdownMenuCheckboxIndicator,
+	HlmDropdownMenuGroup,
+	HlmDropdownMenuItem,
+	HlmDropdownMenuItemSubIndicator,
+	HlmDropdownMenuLabel,
+	HlmDropdownMenuRadio,
+	HlmDropdownMenuRadioIndicator,
+	HlmDropdownMenuSeparator,
+	HlmDropdownMenuShortcut,
+	HlmDropdownMenuSub,
+	HlmDropdownMenuTrigger,
+] as const;

package/src/generators/ui/libs/{menu/files/lib/hlm-menu-item-check.ts.template → dropdown-menu/files/lib/hlm-dropdown-menu-checkbox-indicator.ts.template}

@@ -1,28 +1,26 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCheck } from '@ng-icons/lucide';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
-	selector: 'hlm-menu-item-check',
-	imports: [NgIcon, HlmIcon],
+	selector: 'hlm-dropdown-menu-checkbox-indicator',
+	imports: [NgIcon],
 	providers: [provideIcons({ lucideCheck })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
 	template: `
-		<!-- Using 1rem for size to mimick h-4 w-4 -->
-		<ng-icon hlm size="1rem" name="lucideCheck" />
+		<ng-icon class="text-base" name="lucideCheck" />
 	`,
 })
-export class HlmMenuItemCheck {
+export class HlmDropdownMenuCheckboxIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'absolute left-2 flex h-3.5 w-3.5 items-center justify-center opacity-0 group-[.checked]:opacity-100',
+			'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
 			this.userClass(),
 		),
 	);

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

@@ -0,0 +1,36 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItemCheckbox } from '@angular/cdk/menu';
+import { Directive, booleanAttribute, computed, inject, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDropdownMenuCheckbox]',
+	hostDirectives: [
+		{
+			directive: CdkMenuItemCheckbox,
+			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+			outputs: ['cdkMenuItemTriggered: triggered'],
+		},
+	],
+	host: {
+		'data-slot': 'dropdown-menu-checkbox-item',
+		'[attr.data-disabled]': 'disabled() ? "" : null',
+		'[attr.data-checked]': 'checked() ? "" : null',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDropdownMenuCheckbox {
+	private readonly _cdkMenuItem = inject(CdkMenuItemCheckbox);
+
+	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 items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			this.userClass(),
+		),
+	);
+
+	public readonly checked = input<boolean, BooleanInput>(this._cdkMenuItem.checked, { transform: booleanAttribute });
+	public readonly disabled = input<boolean, BooleanInput>(this._cdkMenuItem.disabled, { transform: booleanAttribute });
+}

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

@@ -0,0 +1,17 @@
+import { CdkMenuGroup } from '@angular/cdk/menu';
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDropdownMenuGroup],hlm-dropdown-menu-group',
+	hostDirectives: [CdkMenuGroup],
+	host: {
+		'data-slot': 'dropdown-menu-group',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDropdownMenuGroup {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('block', this.userClass()));
+}

package/src/generators/ui/libs/{menu/files/lib/hlm-menu-item-sub-indicator.ts.template → dropdown-menu/files/lib/hlm-dropdown-menu-item-sub-indicator.ts.template}

@@ -1,23 +1,22 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronRight } from '@ng-icons/lucide';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
-	selector: 'hlm-menu-item-sub-indicator',
-	imports: [NgIcon, HlmIcon],
+	selector: 'hlm-dropdown-menu-item-sub-indicator',
+	imports: [NgIcon],
 	providers: [provideIcons({ lucideChevronRight })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
 	template: `
-		<ng-icon hlm size="sm" name="lucideChevronRight" class="text-popover-foreground" />
+		<ng-icon name="lucideChevronRight" class="text-base" />
 	`,
 })
-export class HlmMenuItemSubIndicator {
+export class HlmDropdownMenuItemSubIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('ml-auto size-4', this.userClass()));
 }

package/src/generators/ui/libs/{menu/files/lib/hlm-menu-item.ts.template → dropdown-menu/files/lib/hlm-dropdown-menu-item.ts.template}

@@ -1,36 +1,41 @@
-import type { BooleanInput } from '@angular/cdk/coercion';
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem } from '@angular/cdk/menu';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
-import { BrnMenuItem } from '@spartan-ng/brain/menu';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmMenuItem]',
+	selector: 'button[hlmDropdownMenuItem]',
 	hostDirectives: [
 		{
-			directive: BrnMenuItem,
-			inputs: ['disabled: disabled'],
-			outputs: ['triggered: triggered'],
+			directive: CdkMenuItem,
+			inputs: ['cdkMenuItemDisabled: disabled'],
+			outputs: ['cdkMenuItemTriggered: triggered'],
 		},
 	],
 	host: {
+		'data-slot': 'dropdown-menu-item',
 		'[class]': '_computedClass()',
+		'[disabled]': 'disabled() || null',
+		'[attr.data-disabled]': 'disabled() ? "" : null',
 		'[attr.data-variant]': 'variant()',
 		'[attr.data-inset]': 'inset() ? "" : null',
 	},
 })
-export class HlmMenuItem {
-	public readonly variant = input<'default' | 'destructive'>('default');
-
-	public readonly inset = input<boolean, BooleanInput>(false, {
-		transform: booleanAttribute,
-	});
-
+export class HlmDropdownMenuItem {
 	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:not([class*='text-'])]: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`,
+			"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:not([class*='text-'])]: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 [&_svg:not([class*='text-'])]:text-base",
 			this.userClass(),
 		),
 	);
+
+	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	public readonly variant = input<'default' | 'destructive'>('default');
+
+	public readonly inset = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
 }

package/src/generators/ui/libs/{menu/files/lib/hlm-menu-label.ts.template → dropdown-menu/files/lib/hlm-dropdown-menu-label.ts.template}

@@ -1,26 +1,23 @@
-import type { BooleanInput } from '@angular/cdk/coercion';
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-menu-label',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmDropdownMenuLabel],hlm-dropdown-menu-label',
 	host: {
+		'data-slot': 'dropdown-menu-label',
 		'[class]': '_computedClass()',
 		'[attr.data-inset]': 'inset() ? "" : null',
 	},
-	template: `
-		<ng-content />
-	`,
 })
-export class HlmMenuLabel {
-	public readonly inset = input<boolean, BooleanInput>(false, {
-		transform: booleanAttribute,
-	});
-
+export class HlmDropdownMenuLabel {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('block px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', this.userClass()),
 	);
+
+	public readonly inset = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
 }

package/src/generators/ui/libs/{menu/files/lib/hlm-menu-item-radio-indicator.ts.template → dropdown-menu/files/lib/hlm-dropdown-menu-radio-indicator.ts.template}

@@ -1,28 +1,26 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideCircle } from '@ng-icons/lucide';
-import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
 @Component({
-	selector: 'hlm-menu-item-radio',
-	imports: [NgIcon, HlmIcon],
+	selector: 'hlm-dropdown-menu-radio-indicator',
+	imports: [NgIcon],
 	providers: [provideIcons({ lucideCircle })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: {
 		'[class]': '_computedClass()',
 	},
 	template: `
-		<!-- Using 0.5rem for size to mimick h-2 w-2 -->
-		<ng-icon hlm size="0.5rem" class="*:*:fill-current" name="lucideCircle" />
+		<ng-icon name="lucideCircle" class="text-[0.5rem] *:[svg]:fill-current" />
 	`,
 })
-export class HlmMenuItemRadioIndicator {
+export class HlmDropdownMenuRadioIndicator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'absolute left-2 flex h-3.5 w-3.5 items-center justify-center opacity-0 group-[.checked]:opacity-100',
+			'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
 			this.userClass(),
 		),
 	);

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

@@ -0,0 +1,36 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItemRadio } from '@angular/cdk/menu';
+import { Directive, booleanAttribute, computed, inject, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDropdownMenuRadio]',
+	hostDirectives: [
+		{
+			directive: CdkMenuItemRadio,
+			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+			outputs: ['cdkMenuItemTriggered: triggered'],
+		},
+	],
+	host: {
+		'data-slot': 'dropdown-menu-radio-item',
+		'[attr.data-disabled]': 'disabled() ? "" : null',
+		'[attr.data-checked]': 'checked() ? "" : null',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDropdownMenuRadio {
+	private readonly _cdkMenuItem = inject(CdkMenuItemRadio);
+
+	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 items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			this.userClass(),
+		),
+	);
+
+	public readonly checked = input<boolean, BooleanInput>(this._cdkMenuItem.checked, { transform: booleanAttribute });
+	public readonly disabled = input<boolean, BooleanInput>(this._cdkMenuItem.disabled, { transform: booleanAttribute });
+}

package/src/generators/ui/libs/{menu/files/lib/hlm-menu-separator.ts.template → dropdown-menu/files/lib/hlm-dropdown-menu-separator.ts.template}

@@ -1,16 +1,15 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-menu-separator',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator',
 	host: {
+		'data-slot': 'dropdown-menu-separator',
 		'[class]': '_computedClass()',
 	},
-	template: '',
 })
-export class HlmMenuSeparator {
+export class HlmDropdownMenuSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => hlm('bg-border -mx-1 my-1 block h-px', this.userClass()));
 }

package/src/generators/ui/libs/{menu/files/lib/hlm-menu-shortcut.ts.template → dropdown-menu/files/lib/hlm-dropdown-menu-shortcut.ts.template}

@@ -1,18 +1,15 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 
-@Component({
-	selector: 'hlm-menu-shortcut',
-	changeDetection: ChangeDetectionStrategy.OnPush,
+@Directive({
+	selector: '[hlmDropdownMenuShortcut],hlm-dropdown-menu-shortcut',
 	host: {
+		'data-slot': 'dropdown-menu-shortcut',
 		'[class]': '_computedClass()',
 	},
-	template: `
-		<ng-content />
-	`,
 })
-export class HlmMenuShortcut {
+export class HlmDropdownMenuShortcut {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm('text-muted-foreground ml-auto text-xs tracking-widest', this.userClass()),

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

@@ -0,0 +1,63 @@
+import { CdkMenu } from '@angular/cdk/menu';
+import { computed, Directive, inject, input, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDropdownMenuSub],hlm-dropdown-menu-sub',
+	hostDirectives: [CdkMenu],
+	host: {
+		'data-slot': 'dropdown-menu-sub',
+		'[attr.data-state]': '_state()',
+		'[attr.data-side]': '_side()',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmDropdownMenuSub {
+	private readonly _host = inject(CdkMenu);
+
+	protected readonly _state = signal('open');
+	protected readonly _side = signal('top');
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'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-hidden rounded-md border p-1 shadow-lg',
+			this.userClass(),
+		),
+	);
+
+	constructor() {
+		this.setSideWithDarkMagic();
+		// this is a best effort, but does not seem to work currently
+		// TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+		this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+	}
+
+	private setSideWithDarkMagic() {
+		/**
+		 * This is an ugly workaround to at least figure out the correct side of where a submenu
+		 * will appear and set the attribute to the host accordingly
+		 *
+		 * First of all we take advantage of the menu stack not being aware of the root
+		 * object immediately after it is added. This code executes before the root element is added,
+		 * which means the stack is still empty and the peek method returns undefined.
+		 */
+		const isRoot = this._host.menuStack.peek() === undefined;
+		setTimeout(() => {
+			// our menu trigger directive leaves the last position used for use immediately after opening
+			// we can access it here and determine the correct side.
+			// eslint-disable-next-line
+			const ps = (this._host as any)._parentTrigger._spartanLastPosition;
+			if (!ps) {
+				// if we have no last position we default to the most likely option
+				// I hate that we have to do this and hope we can revisit soon and improve
+				this._side.set(isRoot ? 'top' : 'left');
+				return;
+			}
+			const side = isRoot ? ps.originY : ps.originX === 'end' ? 'right' : 'left';
+			this._side.set(side);
+		});
+	}
+}

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

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

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

@@ -0,0 +1,46 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { 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 { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
+
+@Directive({
+	selector: '[hlmDropdownMenuTrigger]',
+	hostDirectives: [
+		{
+			directive: CdkMenuTrigger,
+			inputs: ['cdkMenuTriggerFor: hlmDropdownMenuTrigger', 'cdkMenuTriggerData: hlmDropdownMenuTriggerData'],
+			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
+		},
+	],
+	host: {
+		'data-slot': 'dropdown-menu-trigger',
+	},
+})
+export class HlmDropdownMenuTrigger {
+	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+	private readonly _config = injectHlmDropdownMenuConfig();
+
+	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();
+		});
+	}
+}

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

@@ -0,0 +1,67 @@
+import { type NumberInput } from '@angular/cdk/coercion';
+import { CdkMenu } from '@angular/cdk/menu';
+import { computed, Directive, inject, input, numberAttribute, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: '[hlmDropdownMenu],hlm-dropdown-menu',
+	hostDirectives: [CdkMenu],
+	host: {
+		'data-slot': 'dropdown-menu',
+		'[attr.data-state]': '_state()',
+		'[attr.data-side]': '_side()',
+		'[class]': '_computedClass()',
+		'[style.--side-offset]': 'sideOffset()',
+	},
+})
+export class HlmDropdownMenu {
+	private readonly _host = inject(CdkMenu);
+
+	protected readonly _state = signal('open');
+	protected readonly _side = signal('top');
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'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 my-[--spacing(var(--side-offset))] min-w-[8rem] origin-top overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+			this.userClass(),
+		),
+	);
+
+	public readonly sideOffset = input<number, NumberInput>(1, { transform: numberAttribute });
+
+	constructor() {
+		this.setSideWithDarkMagic();
+		// this is a best effort, but does not seem to work currently
+		// TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+		this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+	}
+
+	private setSideWithDarkMagic() {
+		/**
+		 * This is an ugly workaround to at least figure out the correct side of where a submenu
+		 * will appear and set the attribute to the host accordingly
+		 *
+		 * First of all we take advantage of the menu stack not being aware of the root
+		 * object immediately after it is added. This code executes before the root element is added,
+		 * which means the stack is still empty and the peek method returns undefined.
+		 */
+		const isRoot = this._host.menuStack.peek() === undefined;
+		setTimeout(() => {
+			// our menu trigger directive leaves the last position used for use immediately after opening
+			// we can access it here and determine the correct side.
+			// eslint-disable-next-line
+			const ps = (this._host as any)._parentTrigger._spartanLastPosition;
+			if (!ps) {
+				// if we have no last position we default to the most likely option
+				// I hate that we have to do this and hope we can revisit soon and improve
+				this._side.set(isRoot ? 'top' : 'left');
+				return;
+			}
+			const side = isRoot ? ps.originY : ps.originX === 'end' ? 'right' : 'left';
+			this._side.set(side);
+		});
+	}
+}

package/src/generators/ui/libs/dropdown-menu/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/dropdown-menu/generator.js

@@ -0,0 +1,9 @@
+"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, name: 'dropdown-menu' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/dropdown-menu/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/dropdown-menu/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAC5E,CAAC"}

package/src/generators/ui/libs/menubar/files/index.ts.template

@@ -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/src/generators/ui/libs/menubar/files/lib/hlm-menubar-token.ts.template

@@ -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;
+}