@spartan-ng/cli 0.0.1-alpha.519 → 0.0.1-alpha.520

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

@@ -13,9 +13,9 @@ import {
 	Renderer2,
 	signal,
 } from '@angular/core';
-import { BrnRadio, BrnRadioChange } from '@spartan-ng/brain/radio-group';
+import { BrnRadio, type BrnRadioChange } from '@spartan-ng/brain/radio-group';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-radio',

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

@@ -1,4 +1,4 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import { Directive, booleanAttribute, computed, input } from '@angular/core';
 import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
 import { hlm } from '<%- importAlias %>/utils';

package/src/generators/ui/libs/ui-select-helm/files/lib/hlm-select-scroll-down.ts.template

@@ -3,7 +3,7 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronDown } from '@ng-icons/lucide';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-select-scroll-down',

package/src/generators/ui/libs/ui-select-helm/files/lib/hlm-select-scroll-up.ts.template

@@ -3,7 +3,7 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChevronUp } from '@ng-icons/lucide';
 import { HlmIcon } from '<%- importAlias %>/icon';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-select-scroll-up',

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

@@ -12,7 +12,7 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() =>
+	protected readonly _computedClass = computed(() =>
 		hlm(
 			'bg-border inline-flex shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
 			this.userClass(),

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

@@ -14,5 +14,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSheetFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('mt-auto flex flex-col gap-2 p-4', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('mt-auto flex flex-col gap-2 p-4', this.userClass()));
 }

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

@@ -14,5 +14,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSheetHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('flex flex-col gap-1.5 p-4', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('flex flex-col gap-1.5 p-4', this.userClass()));
 }

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

@@ -0,0 +1,75 @@
+import { HlmSidebar } from './lib/hlm-sidebar';
+import { HlmSidebarContent } from './lib/hlm-sidebar-content';
+import { HlmSidebarFooter } from './lib/hlm-sidebar-footer';
+import { HlmSidebarGroup } from './lib/hlm-sidebar-group';
+import { HlmSidebarGroupAction } from './lib/hlm-sidebar-group-action';
+import { HlmSidebarGroupContent } from './lib/hlm-sidebar-group-content';
+import { HlmSidebarGroupLabel } from './lib/hlm-sidebar-group-label';
+import { HlmSidebarHeader } from './lib/hlm-sidebar-header';
+import { HlmSidebarInput } from './lib/hlm-sidebar-input';
+import { HlmSidebarInset } from './lib/hlm-sidebar-inset';
+import { HlmSidebarMenu } from './lib/hlm-sidebar-menu';
+import { HlmSidebarMenuAction } from './lib/hlm-sidebar-menu-action';
+import { HlmSidebarMenuBadge } from './lib/hlm-sidebar-menu-badge';
+import { HlmSidebarMenuButton } from './lib/hlm-sidebar-menu-button';
+import { HlmSidebarMenuItem } from './lib/hlm-sidebar-menu-item';
+import { HlmSidebarMenuSkeleton } from './lib/hlm-sidebar-menu-skeleton';
+import { HlmSidebarMenuSub } from './lib/hlm-sidebar-menu-sub';
+import { HlmSidebarMenuSubButton } from './lib/hlm-sidebar-menu-sub-button';
+import { HlmSidebarMenuSubItem } from './lib/hlm-sidebar-menu-sub-item';
+import { HlmSidebarRail } from './lib/hlm-sidebar-rail';
+import { HlmSidebarSeparator } from './lib/hlm-sidebar-separator';
+import { HlmSidebarTrigger } from './lib/hlm-sidebar-trigger';
+import { HlmSidebarWrapper } from './lib/hlm-sidebar-wrapper';
+
+export * from './lib/hlm-sidebar';
+export * from './lib/hlm-sidebar-content';
+export * from './lib/hlm-sidebar-footer';
+export * from './lib/hlm-sidebar-group';
+export * from './lib/hlm-sidebar-group-action';
+export * from './lib/hlm-sidebar-group-content';
+export * from './lib/hlm-sidebar-group-label';
+export * from './lib/hlm-sidebar-header';
+export * from './lib/hlm-sidebar-input';
+export * from './lib/hlm-sidebar-inset';
+export * from './lib/hlm-sidebar-menu';
+export * from './lib/hlm-sidebar-menu-action';
+export * from './lib/hlm-sidebar-menu-badge';
+export * from './lib/hlm-sidebar-menu-button';
+export * from './lib/hlm-sidebar-menu-item';
+export * from './lib/hlm-sidebar-menu-skeleton';
+export * from './lib/hlm-sidebar-menu-sub';
+export * from './lib/hlm-sidebar-menu-sub-button';
+export * from './lib/hlm-sidebar-menu-sub-item';
+export * from './lib/hlm-sidebar-rail';
+export * from './lib/hlm-sidebar-separator';
+export * from './lib/hlm-sidebar-trigger';
+export * from './lib/hlm-sidebar-wrapper';
+export * from './lib/hlm-sidebar.service';
+export * from './lib/hlm-sidebar.token';
+
+export const HlmSidebarImports = [
+	HlmSidebar,
+	HlmSidebarContent,
+	HlmSidebarFooter,
+	HlmSidebarGroup,
+	HlmSidebarGroupAction,
+	HlmSidebarGroupContent,
+	HlmSidebarGroupLabel,
+	HlmSidebarHeader,
+	HlmSidebarInput,
+	HlmSidebarInset,
+	HlmSidebarMenu,
+	HlmSidebarMenuSkeleton,
+	HlmSidebarMenuAction,
+	HlmSidebarMenuBadge,
+	HlmSidebarMenuButton,
+	HlmSidebarMenuItem,
+	HlmSidebarMenuSub,
+	HlmSidebarMenuSubButton,
+	HlmSidebarRail,
+	HlmSidebarSeparator,
+	HlmSidebarTrigger,
+	HlmSidebarWrapper,
+	HlmSidebarMenuSubItem,
+] as const;

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

@@ -0,0 +1,22 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmSidebarContent]',
+
+	host: {
+		'data-sidebar': 'content',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarContent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmSidebarFooter]',
+
+	host: {
+		'data-sidebar': 'footer',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarFooter {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('flex flex-col gap-2 p-2', this.userClass()));
+}

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

@@ -0,0 +1,25 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'button[hlmSidebarGroupAction]',
+
+	host: {
+		'data-sidebar': 'group-action',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarGroupAction {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform hover:cursor-pointer focus-visible:ring-2 disabled:hover:cursor-default [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
+			// Increases the hit area of the button on mobile.
+			'after:absolute after:-inset-2 after:md:hidden',
+			'group-data-[collapsible=icon]:hidden',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmSidebarGroupContent]',
+
+	host: {
+		'data-sidebar': 'group-content',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarGroupContent {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('w-full text-sm', this.userClass()));
+}

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

@@ -0,0 +1,23 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmSidebarGroupLabel], button[hlmSidebarGroupLabel]',
+
+	host: {
+		'data-sidebar': 'group-label',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarGroupLabel {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
+			'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,19 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmSidebarGroup]',
+
+	host: {
+		'data-sidebar': 'group',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarGroup {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('relative flex w-full min-w-0 flex-col p-2', this.userClass()),
+	);
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmSidebarHeader]',
+
+	host: {
+		'data-sidebar': 'header',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarHeader {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('flex flex-col gap-2 p-2', this.userClass()));
+}

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

@@ -0,0 +1,21 @@
+import { computed, Directive } from '@angular/core';
+import { HlmInput, inputVariants } from '<%- importAlias %>/input';
+import { hlm } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: 'input[hlmSidebarInput]',
+
+	host: {
+		'data-sidebar': 'input',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarInput extends HlmInput {
+	protected override readonly _computedClass = computed(() =>
+		hlm(
+			inputVariants({ error: this._state().error }),
+			'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,29 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import { HlmSidebarService } from './hlm-sidebar.service';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'main[hlmSidebarInset]', // Restrict to main elements only
+
+	host: {
+		'data-slot': 'sidebar-inset',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarInset {
+	private readonly _sidebarService = inject(HlmSidebarService);
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'bg-background relative flex w-full flex-1 flex-col',
+			this._sidebarService.variant() === 'inset' &&
+				'min-h-[calc(100svh-theme(spacing.4)))] md:m-2 md:rounded-xl md:shadow-sm',
+			this._sidebarService.open() ? 'md:ml-0' : 'md:ml-2',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,31 @@
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'button[hlmSidebarMenuAction]',
+
+	host: {
+		'data-sidebar': 'menu-action',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarMenuAction {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	public readonly showOnHover = input<boolean, boolean>(false, { transform: booleanAttribute });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform hover:cursor-pointer focus-visible:ring-2 disabled:hover:cursor-default [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0',
+			// Increases the hit area of the button on mobile.
+			'after:absolute after:-inset-2 after:md:hidden',
+			'peer-data-[size=sm]/menu-button:top-1',
+			'peer-data-[size=default]/menu-button:top-1.5',
+			'peer-data-[size=lg]/menu-button:top-2.5',
+			'group-data-[collapsible=icon]:hidden',
+			this.showOnHover() &&
+				'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,27 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmSidebarMenuBadge]',
+
+	host: {
+		'data-sidebar': 'menu-badge',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarMenuBadge {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
+			'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+			'peer-data-[size=sm]/menu-button:top-1',
+			'peer-data-[size=default]/menu-button:top-1.5',
+			'peer-data-[size=lg]/menu-button:top-2.5',
+			'group-data-[collapsible=icon]:hidden',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,72 @@
+import { booleanAttribute, computed, Directive, inject, input } from '@angular/core';
+import { BrnTooltipTrigger, provideBrnTooltipDefaultOptions } from '@spartan-ng/brain/tooltip';
+import { DEFAULT_TOOLTIP_CONTENT_CLASSES } from '<%- importAlias %>/tooltip';
+import { hlm } from '<%- importAlias %>/utils';
+import { cva } from 'class-variance-authority';
+
+import { HlmSidebarService } from './hlm-sidebar.service';
+
+import type { ClassValue } from 'clsx';
+
+const sidebarMenuButtonVariants = cva(
+	'peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center justify-start gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-[width,height,padding] hover:cursor-pointer focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 disabled:hover:cursor-default group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0 [&>span:last-child]:truncate group-data-[collapsible=icon]:[&>span]:hidden',
+	{
+		variants: {
+			variant: {
+				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+				outline:
+					'bg-background shadow-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-sidebar-accent',
+			},
+			size: {
+				default: 'h-8 text-sm',
+				sm: 'h-7 text-xs',
+				lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+@Directive({
+	selector: 'button[hlmSidebarMenuButton], a[hlmSidebarMenuButton]',
+
+	providers: [
+		provideBrnTooltipDefaultOptions({
+			showDelay: 150,
+			hideDelay: 0,
+			exitAnimationDuration: 150,
+			tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+			position: 'left',
+		}),
+	],
+	hostDirectives: [
+		{
+			directive: BrnTooltipTrigger,
+			inputs: ['brnTooltipTrigger: tooltip', 'aria-describedby'],
+		},
+	],
+	host: {
+		'data-sidebar': 'menu-button',
+		'[attr.data-size]': 'size()',
+		'[attr.data-active]': 'isActive()',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarMenuButton {
+	private readonly _sidebarService = inject(HlmSidebarService);
+
+	public readonly variant = input<'default' | 'outline'>('default');
+	public readonly size = input<'default' | 'sm' | 'lg'>('default');
+	public readonly isActive = input<boolean, boolean>(false, { transform: booleanAttribute });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _isTooltipHidden = computed(
+		() => this._sidebarService.state() !== 'collapsed' || this._sidebarService.isMobile(),
+	);
+	protected readonly _computedClass = computed(() =>
+		hlm(sidebarMenuButtonVariants({ variant: this.variant(), size: this.size() }), this.userClass()),
+	);
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'li[hlmSidebarMenuItem]',
+
+	host: {
+		'data-sidebar': 'menu-item',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarMenuItem {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('group/menu-item relative', this.userClass()));
+}

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

@@ -0,0 +1,33 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import { HlmSkeletonImports } from '<%- importAlias %>/skeleton';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'div[hlmSidebarMenuSkeleton]',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		@if (showIcon()) {
+			<hlm-skeleton data-sidebar="menu-skeleton-icon" class="size-4 rounded-md" />
+		} @else {
+			<hlm-skeleton data-sidebar="menu-skeleton-text" class="h-4 max-w-[var(--skeleton-width)] flex-1" />
+		}
+	`,
+	host: {
+		'data-sidebar': 'menu-skeleton',
+		'[class]': '_computedClass()',
+		'[style.--skeleton-width]': '_width',
+	},
+
+	imports: [HlmSkeletonImports],
+})
+export class HlmSidebarMenuSkeleton {
+	public readonly showIcon = input<boolean, boolean>(false, { transform: booleanAttribute });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('flex h-8 items-center gap-2 rounded-md px-2', this.userClass()),
+	);
+	protected readonly _width = `${Math.floor(Math.random() * 40) + 50}%`;
+}

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

@@ -0,0 +1,30 @@
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'a[hlmSidebarMenuSubButton], button[hlmSidebarMenuSubButton]',
+
+	host: {
+		'data-sidebar': 'menu-sub-button',
+		'[attr.data-active]': 'isActive()',
+		'[attr.data-size]': 'size()',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarMenuSubButton {
+	public readonly size = input<'sm' | 'md'>('md');
+	public readonly isActive = input<boolean, boolean>(false, { transform: booleanAttribute });
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>_ng-icon]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none hover:cursor-pointer focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 disabled:hover:cursor-default aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0 [&>span:last-child]:truncate',
+			'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+			this.size() === 'sm' && 'text-xs',
+			this.size() === 'md' && 'text-sm',
+			'group-data-[collapsible=icon]:hidden',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'li[hlmSidebarMenuSubItem]',
+
+	host: {
+		'data-sidebar': 'menu-sub-item',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarMenuSubItem {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('group/menu-sub-item relative', this.userClass()));
+}

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

@@ -0,0 +1,23 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'ul[hlmSidebarMenuSub]',
+
+	host: {
+		'data-sidebar': 'menu-sub',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarMenuSub {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+			'group-data-[collapsible=icon]:hidden',
+			this.userClass(),
+		),
+	);
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'ul[hlmSidebarMenu]',
+
+	host: {
+		'data-sidebar': 'menu',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarMenu {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm('flex w-full min-w-0 flex-col gap-1', this.userClass()));
+}