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

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

@@ -0,0 +1,39 @@
+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: 'button[hlmSidebarRail]',
+
+	host: {
+		'data-sidebar': 'rail',
+		'data-slot': 'sidebar-rail',
+		'aria-label': 'Toggle Sidebar',
+		tabindex: '-1',
+		'[class]': '_computedClass()',
+		'(click)': 'onClick()',
+	},
+})
+export class HlmSidebarRail {
+	private readonly _sidebarService = inject(HlmSidebarService);
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+			'group-data-[side=left]:cursor-w-resize group-data-[side=right]:cursor-e-resize',
+			'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+			'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+			'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+			'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+			this.userClass(),
+		),
+	);
+
+	protected onClick(): void {
+		this._sidebarService.toggleSidebar();
+	}
+}

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

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { HlmSeparator } from '<%- importAlias %>/separator';
+import { hlm } from '<%- importAlias %>/utils';
+
+import type { ClassValue } from 'clsx';
+
+@Directive({
+	selector: 'div[hlmSidebarSeparator]',
+
+	hostDirectives: [{ directive: HlmSeparator }],
+	host: {
+		'data-sidebar': 'separator',
+		'[class]': '_computedClass()',
+	},
+})
+export class HlmSidebarSeparator {
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _computedClass = computed(() => hlm('bg-sidebar-border w-auto', this.userClass()));
+}

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

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucidePanelLeft } from '@ng-icons/lucide';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
+
+import { HlmSidebarService } from './hlm-sidebar.service';
+
+import { HlmIcon } from '<%- importAlias %>/icon';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlmSidebarTrigger]',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+
+	imports: [HlmIcon, NgIcon],
+	providers: [provideIcons({ lucidePanelLeft }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon' })],
+	template: `
+		<ng-icon hlm name="lucidePanelLeft" size="sm"></ng-icon>
+	`,
+	hostDirectives: [
+		{
+			directive: HlmButton,
+		},
+	],
+	host: {
+		'data-sidebar': 'trigger',
+		'data-slot': 'sidebar-trigger',
+		'(click)': '_onClick()',
+	},
+})
+export class HlmSidebarTrigger {
+	private readonly _hlmBtn = inject(HlmButton);
+	private readonly _sidebarService = inject(HlmSidebarService);
+
+	constructor() {
+		this._hlmBtn.setClass('h-7 w-7');
+	}
+
+	protected _onClick(): void {
+		this._sidebarService.toggleSidebar();
+	}
+}

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

@@ -0,0 +1,25 @@
+import { computed, Directive, input } from '@angular/core';
+import { hlm } from '<%- importAlias %>/utils';
+import type { ClassValue } from 'clsx';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+@Directive({
+	selector: 'div[hlmSidebarWrapper]',
+	host: {
+		'data-slot': 'sidebar-wrapper',
+		'[class]': '_computedClass()',
+		'[style.--sidebar-width]': 'sidebarWidth()',
+		'[style.--sidebar-width-icon]': 'sidebarWidthIcon()',
+	},
+})
+export class HlmSidebarWrapper {
+	private readonly _config = injectHlmSidebarConfig();
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', this.userClass()),
+	);
+
+	public readonly sidebarWidth = input(this._config.sidebarWidth);
+	public readonly sidebarWidthIcon = input(this._config.sidebarWidthIcon);
+}

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

@@ -0,0 +1,106 @@
+import { DOCUMENT } from '@angular/common';
+import { afterNextRender, computed, DestroyRef, inject, Injectable, type Signal, signal } from '@angular/core';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+
+@Injectable({ providedIn: 'root' })
+export class HlmSidebarService {
+	private readonly _config = injectHlmSidebarConfig();
+	private readonly _document = inject(DOCUMENT);
+	private readonly _window = this._document.defaultView;
+	private readonly _open = signal<boolean>(true);
+	private readonly _openMobile = signal<boolean>(false);
+	private readonly _isMobile = signal<boolean>(false);
+	private readonly _variant = signal<SidebarVariant>('sidebar');
+	private _mediaQuery: MediaQueryList | null = null;
+
+	public readonly open: Signal<boolean> = this._open.asReadonly();
+	public readonly openMobile: Signal<boolean> = this._openMobile.asReadonly();
+	public readonly isMobile: Signal<boolean> = this._isMobile.asReadonly();
+	public readonly variant: Signal<SidebarVariant> = this._variant.asReadonly();
+
+	public readonly state = computed<'expanded' | 'collapsed'>(() => (this._open() ? 'expanded' : 'collapsed'));
+
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			if (!this._window) return;
+			// Initialize from cookie
+			const cookie = this._document.cookie
+				.split('; ')
+				.find((row) => row.startsWith(`${this._config.sidebarCookieName}=`));
+
+			if (cookie) {
+				const value = cookie.split('=')[1];
+				this._open.set(value === 'true');
+			}
+
+			// Initialize MediaQueryList
+			this._mediaQuery = this._window.matchMedia(`(max-width: ${this._config.mobileBreakpoint})`);
+			this._isMobile.set(this._mediaQuery.matches);
+
+			// Add media query listener
+			const mediaQueryHandler = (e: MediaQueryListEvent) => {
+				this._isMobile.set(e.matches);
+				// If switching from mobile to desktop, close mobile sidebar
+				if (!e.matches) this._openMobile.set(false);
+			};
+			this._mediaQuery.addEventListener('change', mediaQueryHandler);
+
+			// Add keyboard shortcut listener
+			const keydownHandler = (event: KeyboardEvent) => {
+				if (event.key === this._config.sidebarKeyboardShortcut && (event.ctrlKey || event.metaKey)) {
+					event.preventDefault();
+					this.toggleSidebar();
+				}
+			};
+			this._window.addEventListener('keydown', keydownHandler);
+
+			// Add resize listener with debounce
+			let resizeTimeout: number;
+			const resizeHandler = () => {
+				if (!this._window) return;
+
+				if (resizeTimeout) this._window.clearTimeout(resizeTimeout);
+				resizeTimeout = this._window.setTimeout(() => {
+					if (this._mediaQuery) this._isMobile.set(this._mediaQuery.matches);
+				}, 100);
+			};
+			this._window.addEventListener('resize', resizeHandler);
+
+			// Cleanup listeners on destroy
+			destroyRef.onDestroy(() => {
+				if (!this._window) return;
+
+				if (this._mediaQuery) this._mediaQuery.removeEventListener('change', mediaQueryHandler);
+				this._window.removeEventListener('keydown', keydownHandler);
+				this._window.removeEventListener('resize', resizeHandler);
+				if (resizeTimeout) this._window.clearTimeout(resizeTimeout);
+			});
+		});
+	}
+
+	public setOpen(open: boolean): void {
+		this._open.set(open);
+		this._document.cookie = `${this._config.sidebarCookieName}=${open}; path=/; max-age=${this._config.sidebarCookieMaxAge}`;
+	}
+
+	public setOpenMobile(open: boolean): void {
+		if (this._isMobile()) {
+			this._openMobile.set(open);
+		}
+	}
+
+	public setVariant(variant: SidebarVariant): void {
+		this._variant.set(variant);
+	}
+
+	public toggleSidebar(): void {
+		if (this._isMobile()) {
+			this._openMobile.update((value) => !value);
+		} else {
+			this.setOpen(!this._open());
+		}
+	}
+}

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

@@ -0,0 +1,31 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmSidebarConfig {
+	sidebarWidth: string;
+	sidebarWidthMobile: string;
+	sidebarWidthIcon: string;
+	sidebarCookieName: string;
+	sidebarCookieMaxAge: number;
+	sidebarKeyboardShortcut: string;
+	mobileBreakpoint: string;
+}
+
+const defaultConfig: HlmSidebarConfig = {
+	sidebarWidth: '16rem',
+	sidebarWidthMobile: '18rem',
+	sidebarWidthIcon: '3rem',
+	sidebarCookieName: 'sidebar_state',
+	sidebarCookieMaxAge: 60 * 60 * 24 * 7, // 7 days in seconds
+	sidebarKeyboardShortcut: 'b',
+	mobileBreakpoint: '768px',
+};
+
+const HlmSidebarConfigToken = new InjectionToken<HlmSidebarConfig>('HlmSidebarConfig');
+
+export function provideHlmSidebarConfig(config: Partial<HlmSidebarConfig>): ValueProvider {
+	return { provide: HlmSidebarConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmSidebarConfig(): HlmSidebarConfig {
+	return inject(HlmSidebarConfigToken, { optional: true }) ?? defaultConfig;
+}

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

@@ -0,0 +1,115 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
+import { BrnSheetContent } from '@spartan-ng/brain/sheet';
+import { HlmSheet, HlmSheetContent } from '<%- importAlias %>/sheet';
+import { hlm } from '<%- importAlias %>/utils';
+
+import { HlmSidebarService, type SidebarVariant } from './hlm-sidebar.service';
+
+import { NgTemplateOutlet } from '@angular/common';
+import type { ClassValue } from 'clsx';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+@Component({
+	selector: 'hlm-sidebar',
+
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmSheet, HlmSheetContent, NgTemplateOutlet, BrnSheetContent],
+
+	template: `
+		<ng-template #contentContainer>
+			<ng-content></ng-content>
+		</ng-template>
+
+		@if (collapsible() === 'none') {
+			<div data-slot="sidebar" [class]="_nonCollapsibleComputedClass()">
+				<ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+			</div>
+		} @else if (_sidebarService.isMobile()) {
+			<hlm-sheet
+				[side]="side()"
+				[closeDelay]="0"
+				[state]="_sidebarService.openMobile() ? 'open' : 'closed'"
+				(stateChanged)="_sidebarService.setOpenMobile($event === 'open')"
+			>
+				<hlm-sheet-content
+					*brnSheetContent="let ctx"
+					data-slot="sidebar"
+					data-sidebar="sidebar"
+					data-mobile="true"
+					class="bg-sidebar text-sidebar-foreground h-screen w-[var(--sidebar-width)] p-0 [&>button]:hidden"
+					[style.--sidebar-width]="sidebarWidthMobile()"
+				>
+					<div class="flex h-full w-full flex-col">
+						<ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+					</div>
+				</hlm-sheet-content>
+			</hlm-sheet>
+		} @else {
+			<div
+				class="text-sidebar-foreground group peer hidden md:block"
+				[attr.data-state]="_sidebarService.state()"
+				[attr.data-collapsible]="_sidebarService.state() === 'collapsed' ? collapsible() : ''"
+				[attr.data-variant]="variant()"
+				[attr.data-side]="side()"
+				data-slot="sidebar"
+			>
+				<!-- Sidebar gap on desktop -->
+				<div data-slot="sidebar-gap" [class]="_sidebarGapComputedClass()"></div>
+				<div data-slot="sidebar-container" [class]="_sidebarContainerComputedClass()">
+					<div
+						data-sidebar="sidebar"
+						data-slot="sidebar-inner"
+						class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+					>
+						<ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+					</div>
+				</div>
+			</div>
+		}
+	`,
+})
+export class HlmSidebar {
+	protected readonly _sidebarService = inject(HlmSidebarService);
+	private readonly _config = injectHlmSidebarConfig();
+
+	public readonly sidebarWidthMobile = input(this._config.sidebarWidthMobile);
+
+	public readonly side = input<'left' | 'right'>('left');
+	public readonly variant = input<SidebarVariant>(this._sidebarService.variant());
+	public readonly collapsible = input<'offcanvas' | 'icon' | 'none'>('offcanvas');
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+	protected readonly _nonCollapsibleComputedClass = computed(() =>
+		hlm('bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col', this.userClass()),
+	);
+	protected readonly _sidebarGapComputedClass = computed(() =>
+		hlm(
+			'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',
+			'group-data-[collapsible=offcanvas]:w-0',
+			'group-data-[side=right]:rotate-180',
+			this.variant() === 'floating' || this.variant() === 'inset'
+				? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+				: 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]',
+		),
+	);
+
+	protected readonly _sidebarContainerComputedClass = computed(() =>
+		hlm(
+			'fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex',
+			this.side() === 'left'
+				? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+				: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+			this.variant() === 'floating' || this.variant() === 'inset'
+				? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+				: 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+			this.userClass(),
+		),
+	);
+
+	constructor() {
+		// Sync variant input with service
+		effect(() => {
+			this._sidebarService.setVariant(this.variant());
+		});
+	}
+}

package/src/generators/ui/libs/ui-sidebar-helm/generator.d.ts

@@ -0,0 +1,3 @@
+import { 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/ui-sidebar-helm/generator.js

@@ -0,0 +1,14 @@
+"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,
+        primitiveName: 'sidebar',
+        internalName: 'ui-sidebar-helm',
+        publicName: 'ui-sidebar-helm',
+    });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/ui-sidebar-helm/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/ui-sidebar-helm/generator.ts"],"names":[],"mappings":";;AAIA,8BAOC;;AAVD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE;QACnC,GAAG,OAAO;QACV,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,iBAAiB;QAC/B,UAAU,EAAE,iBAAiB;KAC7B,CAAC,CAAC;AACJ,CAAC"}

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

@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmSkeleton {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm('bg-muted block animate-pulse rounded-md', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('bg-muted block animate-pulse rounded-md', this.userClass()));
 }

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

@@ -1,4 +1,4 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import type { BooleanInput } from '@angular/cdk/coercion';
 import {
 	booleanAttribute,
 	ChangeDetectionStrategy,
@@ -10,8 +10,8 @@ import {
 	model,
 	output,
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
 import { BrnSwitch, BrnSwitchThumb } from '@spartan-ng/brain/switch';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';

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

@@ -1,5 +1,5 @@
 // src/app/directives/hlm-table-directives.ts
-import { computed, Directive, inject, InjectionToken, input, ValueProvider } from '@angular/core';
+import { computed, Directive, inject, InjectionToken, input, type ValueProvider } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { BrnTabs } from '@spartan-ng/brain/tabs';
 import { hlm } from '<%- importAlias %>/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-tabs',

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

@@ -1,4 +1,4 @@
-import { ExistingProvider, InjectionToken, Type, inject } from '@angular/core';
+import { type ExistingProvider, InjectionToken, type Type, inject } from '@angular/core';
 import type { HlmToggleGroup } from './hlm-toggle-group';
 
 const HlmToggleGroupToken = new InjectionToken<HlmToggleGroup>('HlmToggleGroupToken');

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

@@ -1,9 +1,9 @@
 import { Directive, computed, input } from '@angular/core';
 import { hlm } from '<%- importAlias %>/utils';
-import { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 import { provideHlmToggleGroup } from './hlm-toggle-group.token';
-import { toggleGroupItemVariants } from './hlm-toggle-item';
+import type { toggleGroupItemVariants } from './hlm-toggle-item';
 
 type ToggleGroupItemVariants = VariantProps<typeof toggleGroupItemVariants>;
 

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

@@ -1,7 +1,7 @@
 import { Directive } from '@angular/core';
 import { BrnTooltipTrigger, provideBrnTooltipDefaultOptions } from '@spartan-ng/brain/tooltip';
 
-const DEFAULT_TOOLTIP_CONTENT_CLASSES =
+export const DEFAULT_TOOLTIP_CONTENT_CLASSES =
 	'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance ' +
 	'data-[state=open]:animate-in ' +
 	'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 ' +

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

@@ -12,5 +12,5 @@ export const hlmBlockquote = 'mt-6 border-border border-l-2 pl-6 italic';
 })
 export class HlmBlockquote {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmBlockquote, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmBlockquote, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmCode = 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-m
 })
 export class HlmCode {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmCode, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmCode, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmH1 = 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text
 })
 export class HlmH1 {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmH1, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmH1, this.userClass()));
 }

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

@@ -13,5 +13,5 @@ export const hlmH2 =
 })
 export class HlmH2 {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmH2, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmH2, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmH3 = 'scroll-m-20 text-2xl font-semibold tracking-tight';
 })
 export class HlmH3 {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmH3, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmH3, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmLarge = 'text-lg font-semibold';
 })
 export class HlmLarge {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmLarge, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmLarge, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmLead = 'text-xl text-muted-foreground';
 })
 export class HlmLead {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmLead, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmLead, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmMuted = 'text-sm text-muted-foreground';
 })
 export class HlmMuted {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmMuted, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmMuted, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmP = 'leading-7 [&:not(:first-child)]:mt-6';
 })
 export class HlmP {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmP, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmP, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmSmall = 'text-sm font-medium leading-none';
 })
 export class HlmSmall {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmSmall, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmSmall, this.userClass()));
 }

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

@@ -12,5 +12,5 @@ export const hlmUl = 'my-6 ml-6 list-disc [&>li]:mt-2';
 })
 export class HlmUl {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected _computedClass = computed(() => hlm(hlmUl, this.userClass()));
+	protected readonly _computedClass = computed(() => hlm(hlmUl, this.userClass()));
 }

package/src/generators/ui/primitive-deps.js

@@ -24,6 +24,7 @@ exports.primitiveDependencies = {
     'hover-card': ['utils'],
     icon: ['utils'],
     input: ['utils', 'form-field'],
+    'input-group': ['utils'],
     'input-otp': ['utils', 'icon'],
     label: ['utils'],
     menu: ['utils', 'icon'],
@@ -36,6 +37,7 @@ exports.primitiveDependencies = {
     select: ['utils', 'icon', 'form-field'],
     separator: ['utils'],
     sheet: ['utils'],
+    sidebar: ['utils', 'button', 'icon', 'input', 'separator', 'sheet', 'tooltip'],
     skeleton: ['utils'],
     slider: ['utils'],
     sonner: ['utils', 'icon'],

package/src/generators/ui/primitive-deps.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":"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"}

package/src/generators/ui/primitives.d.ts

@@ -1 +1 @@
-export type Primitive = 'accordion' | 'alert' | 'alert-dialog' | 'aspect-ratio' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'button' | 'calendar' | 'card' | 'carousel' | 'checkbox' | 'collapsible' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'form-field' | 'hover-card' | 'icon' | 'input' | 'input-otp' | 'label' | 'menu' | 'menubar' | 'pagination' | 'popover' | 'progress' | 'radio-group' | 'scroll-area' | 'select' | 'separator' | 'sheet' | 'skeleton' | 'slider' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'toggle' | 'toggle-group' | 'tooltip' | 'utils';
+export type Primitive = 'accordion' | 'alert' | 'alert-dialog' | 'aspect-ratio' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'button' | 'calendar' | 'card' | 'carousel' | 'checkbox' | 'collapsible' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'form-field' | 'hover-card' | 'icon' | 'input' | 'input-group' | 'input-otp' | 'label' | 'menu' | 'menubar' | 'pagination' | 'popover' | 'progress' | 'radio-group' | 'scroll-area' | 'select' | 'separator' | 'sheet' | 'sidebar' | 'skeleton' | 'slider' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'toggle' | 'toggle-group' | 'tooltip' | 'utils';

package/src/generators/ui/schema.d.ts

@@ -1,4 +1,4 @@
-import { Primitive } from './primitives';
+import { type Primitive } from './primitives';
 
 export interface HlmUIGeneratorSchema {
 	name?: Primitive;