@blueprint-platform/components 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucidePanelLeft } from '@ng-icons/lucide';
+import { HlmButton, provideBrnButtonConfig } from '@blueprint-platform/ui/button';
+import { HlmSidebarService } from './hlm-sidebar.service';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'button[hlmSidebarTrigger]',
+  imports: [NgIcon],
+  providers: [
+    provideIcons({ lucidePanelLeft }),
+    provideBrnButtonConfig({ variant: 'ghost', size: 'icon-sm' }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+  host: {
+    'data-slot': 'sidebar-trigger',
+    'data-sidebar': 'trigger',
+    '(click)': '_onClick()',
+  },
+  template: `
+    <ng-icon name="lucidePanelLeft" />
+    <span class="sr-only">{{ srOnlyText() }}</span>
+  `,
+})
+export class HlmSidebarTrigger {
+  private readonly _sidebarService = inject(HlmSidebarService);
+
+  public readonly srOnlyText = input<string>('Toggle Sidebar');
+
+  protected _onClick(): void {
+    this._sidebarService.toggleSidebar();
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+@Directive({
+  selector: '[hlmSidebarWrapper],hlm-sidebar-wrapper',
+  host: {
+    'data-slot': 'sidebar-wrapper',
+    '[style.--sidebar-width]': 'sidebarWidth()',
+    '[style.--sidebar-width-icon]': 'sidebarWidthIcon()',
+  },
+})
+export class HlmSidebarWrapper {
+  private readonly _config = injectHlmSidebarConfig();
+
+  public readonly sidebarWidth = input<string>(this._config.sidebarWidth);
+  public readonly sidebarWidthIcon = input<string>(this._config.sidebarWidthIcon);
+
+  constructor() {
+    classes(
+      () => 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+    );
+  }
+}

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

@@ -0,0 +1,136 @@
+import { isPlatformServer } from '@angular/common';
+import {
+  afterNextRender,
+  computed,
+  DestroyRef,
+  DOCUMENT,
+  inject,
+  Injectable,
+  PLATFORM_ID,
+  REQUEST,
+  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 _platformId = inject(PLATFORM_ID);
+  private readonly _request = inject(REQUEST, { optional: true });
+  private readonly _config = injectHlmSidebarConfig();
+  private readonly _document = inject(DOCUMENT);
+  private readonly _window = this._document.defaultView;
+  private readonly _open = signal<boolean>(this._config.defaultOpen);
+  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);
+    this.restoreStateFromCookie();
+
+    afterNextRender(() => {
+      if (!this._window || typeof this._window.matchMedia !== 'function') return;
+
+      // 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());
+    }
+  }
+
+  private restoreStateFromCookie(): void {
+    const cookieString = isPlatformServer(this._platformId)
+      ? this._request?.headers.get('cookie')
+      : this._document.cookie;
+
+    if (!cookieString) return;
+
+    const prefix = `${this._config.sidebarCookieName}=`;
+    const cookieValue = cookieString
+      .split(';')
+      .map((c) => c.trim())
+      .find((c) => c.startsWith(prefix))
+      ?.slice(prefix.length);
+
+    if (cookieValue !== undefined) {
+      this._open.set(cookieValue === 'true');
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmSidebarConfig {
+  defaultOpen: boolean;
+  sidebarWidth: string;
+  sidebarWidthMobile: string;
+  sidebarWidthIcon: string;
+  sidebarCookieName: string;
+  sidebarCookieMaxAge: number;
+  sidebarKeyboardShortcut: string;
+  mobileBreakpoint: string;
+  closeMobileSidebarOnMenuButtonClick: boolean;
+}
+
+const defaultConfig: HlmSidebarConfig = {
+  defaultOpen: true,
+  sidebarWidth: '16rem',
+  sidebarWidthMobile: '18rem',
+  sidebarWidthIcon: '3rem',
+  sidebarCookieName: 'sidebar_state',
+  sidebarCookieMaxAge: 60 * 60 * 24 * 7, // 7 days in seconds
+  sidebarKeyboardShortcut: 'b',
+  mobileBreakpoint: '768px',
+  closeMobileSidebarOnMenuButtonClick: false,
+};
+
+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/dist/generators/ui/files/shared/ui/sidebar/src/lib/hlm-sidebar.ts

@@ -0,0 +1,139 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input } from '@angular/core';
+import { HlmSheetImports } from '@blueprint-platform/ui/sheet';
+import { classes, hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+import { HlmSidebarService, type SidebarVariant } from './hlm-sidebar.service';
+import { injectHlmSidebarConfig } from './hlm-sidebar.token';
+
+@Component({
+  selector: 'hlm-sidebar',
+  imports: [NgTemplateOutlet, HlmSheetImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.data-slot]': '_dataSlot()',
+    '[attr.data-state]': '_dataState()',
+    '[attr.data-collapsible]': '_dataCollapsible()',
+    '[attr.data-variant]': '_dataVariant()',
+    '[attr.data-side]': '_dataSide()',
+  },
+  template: `
+    <ng-template #contentContainer>
+      <ng-content />
+    </ng-template>
+
+    @if (collapsible() === 'none') {
+      <ng-container *ngTemplateOutlet="contentContainer"></ng-container>
+    } @else if (_sidebarService.isMobile()) {
+      <hlm-sheet
+        [side]="side()"
+        [state]="_sidebarService.openMobile() ? 'open' : 'closed'"
+        (stateChanged)="_sidebarService.setOpenMobile($event === 'open')"
+      >
+        <hlm-sheet-content
+          *hlmSheetPortal="let ctx"
+          data-slot="sidebar"
+          data-sidebar="sidebar"
+          data-mobile="true"
+          class="bg-sidebar text-sidebar-foreground h-svh w-(--sidebar-width) p-0 [&>button]:hidden"
+          [style.--sidebar-width]="sidebarWidthMobile()"
+        >
+          <div class="flex h-full w-full flex-col">
+            <ng-container *ngTemplateOutlet="contentContainer" />
+          </div>
+        </hlm-sheet-content>
+      </hlm-sheet>
+    } @else {
+      <!-- Sidebar gap on desktop -->
+      <div data-slot="sidebar-gap" [class]="_sidebarGapComputedClass()"></div>
+      <div
+        data-slot="sidebar-container"
+        [attr.data-side]="_dataSide()"
+        [class]="_sidebarContainerComputedClass()"
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+        >
+          <ng-container *ngTemplateOutlet="contentContainer" />
+        </div>
+      </div>
+    }
+  `,
+})
+export class HlmSidebar {
+  protected readonly _sidebarService = inject(HlmSidebarService);
+  private readonly _config = injectHlmSidebarConfig();
+  public readonly sidebarWidthMobile = input<string>(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');
+
+  protected readonly _sidebarGapComputedClass = computed(() =>
+    hlm(
+      'transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent',
+      '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)+(--spacing(4)))]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+    ),
+  );
+
+  public readonly sidebarContainerClass = input<ClassValue>('');
+  protected readonly _sidebarContainerComputedClass = computed(() =>
+    hlm(
+      'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
+      this.variant() === 'floating' || this.variant() === 'inset'
+        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+      this.sidebarContainerClass(),
+    ),
+  );
+
+  protected readonly _dataSlot = computed(() => {
+    return !this._sidebarService.isMobile() ? 'sidebar' : undefined;
+  });
+
+  private readonly _collapsibleAndNonMobile = computed(() => {
+    return this.collapsible() !== 'none' && !this._sidebarService.isMobile();
+  });
+
+  protected readonly _dataState = computed(() => {
+    return this._collapsibleAndNonMobile() ? this._sidebarService.state() : undefined;
+  });
+
+  protected readonly _dataCollapsible = computed(() => {
+    if (this._collapsibleAndNonMobile()) {
+      return this._sidebarService.state() === 'collapsed' ? this.collapsible() : '';
+    }
+    return undefined;
+  });
+
+  protected readonly _dataVariant = computed(() => {
+    return this._collapsibleAndNonMobile() ? this.variant() : undefined;
+  });
+
+  protected readonly _dataSide = computed(() => {
+    return this._collapsibleAndNonMobile() ? this.side() : undefined;
+  });
+
+  constructor() {
+    // Sync variant input with service
+    effect(() => {
+      this._sidebarService.setVariant(this.variant());
+    });
+
+    classes(() => {
+      if (this.collapsible() === 'none') {
+        return hlm('bg-sidebar text-sidebar-foreground flex h-svh w-(--sidebar-width) flex-col');
+      } else if (this._sidebarService.isMobile()) {
+        return '';
+      } else {
+        return hlm('group peer text-sidebar-foreground hidden md:block');
+      }
+    });
+  }
+}

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

@@ -0,0 +1,5 @@
+import { HlmSkeleton } from './lib/hlm-skeleton';
+
+export * from './lib/hlm-skeleton';
+
+export const HlmSkeletonImports = [HlmSkeleton] as const;

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmSkeleton],hlm-skeleton',
+  host: {
+    'data-slot': 'skeleton',
+  },
+})
+export class HlmSkeleton {
+  constructor() {
+    classes(() => 'bg-muted rounded-md block motion-safe:animate-pulse');
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from './lib/hlm-slider';
+import { HlmSlider } from './lib/hlm-slider';
+
+export const HlmSliderImports = [HlmSlider] as const;

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

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BrnSlider, BrnSliderImports, injectBrnSlider } from '@spartan-ng/brain/slider';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-slider, brn-slider [hlm]',
+  imports: [BrnSliderImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [
+    {
+      directive: BrnSlider,
+      inputs: [
+        'id',
+        'value',
+        'disabled',
+        'min',
+        'max',
+        'step',
+        'minStepsBetweenThumbs',
+        'inverted',
+        'orientation',
+        'showTicks',
+        'maxTicks',
+        'tickLabelInterval',
+        'formatTick',
+        'draggableRange',
+        'draggableRangeOnly',
+        'aria-label',
+        'aria-labelledby',
+      ],
+      outputs: ['valueChange'],
+    },
+  ],
+  template: `
+    <div
+      class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col"
+    >
+      <div
+        brnSliderTrack
+        class="bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden"
+      >
+        <div
+          class="bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
+          brnSliderRange
+        ></div>
+      </div>
+
+      @for (i of _slider.thumbIndexes(); track i) {
+        <span
+          class="border-ring ring-ring/50 size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 absolute block shrink-0 select-none after:absolute after:-inset-2"
+          brnSliderThumb
+        ></span>
+      }
+    </div>
+
+    @if (_slider.showTicks()) {
+      <div
+        class="px-1.5 group-data-vertical:px-0 group-data-vertical:py-1.5 text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:group-data-inverted:flex-col"
+      >
+        <div
+          *brnSliderTick="let tick; let formattedTick = formattedTick"
+          class="group flex w-0 flex-col items-center justify-center gap-2 group-data-vertical:h-0 group-data-vertical:w-auto group-data-vertical:flex-row"
+        >
+          <div
+            class="bg-muted-foreground/70 h-1 w-px group-data-vertical:h-px group-data-vertical:w-1 group-data-horizontal:group-data-[skip]:h-0.5 group-data-vertical:group-data-[skip]:w-0.5"
+          ></div>
+          <div class="text-center group-data-[skip]:opacity-0">{{ formattedTick }}</div>
+        </div>
+      </div>
+    }
+  `,
+})
+export class HlmSlider {
+  protected readonly _slider = injectBrnSlider();
+
+  constructor() {
+    classes(() => [
+      'group flex w-full touch-none flex-col select-none data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-row data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    ]);
+  }
+}

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

@@ -0,0 +1,5 @@
+import { HlmToaster } from './lib/hlm-toaster';
+
+export * from './lib/hlm-toaster';
+
+export const HlmToasterImports = [HlmToaster] as const;

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

@@ -0,0 +1,119 @@
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  booleanAttribute,
+  computed,
+  input,
+  numberAttribute,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  lucideCircleCheck,
+  lucideInfo,
+  lucideLoader2,
+  lucideOctagonX,
+  lucideTriangleAlert,
+} from '@ng-icons/lucide';
+import { BrnSonnerImports, type ToasterProps } from '@spartan-ng/brain/sonner';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+  selector: 'hlm-toaster',
+  imports: [BrnSonnerImports, NgIcon],
+  providers: [
+    provideIcons({
+      lucideCircleCheck,
+      lucideInfo,
+      lucideTriangleAlert,
+      lucideOctagonX,
+      lucideLoader2,
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <brn-sonner-toaster
+      [class]="_computedClass()"
+      [invert]="invert()"
+      [theme]="theme()"
+      [position]="position()"
+      [hotKey]="hotKey()"
+      [richColors]="richColors()"
+      [expand]="expand()"
+      [duration]="duration()"
+      [visibleToasts]="visibleToasts()"
+      [closeButton]="closeButton()"
+      [toastOptions]="_computedToastOptions()"
+      [offset]="offset()"
+      [style]="userStyle()"
+    >
+      <ng-template #loadingIcon>
+        <ng-icon
+          name="lucideLoader2"
+          class="overflow-visible! text-base [&>svg]:motion-safe:animate-spin"
+        />
+      </ng-template>
+      <ng-template #successIcon>
+        <ng-icon name="lucideCircleCheck" class="overflow-visible! text-base" />
+      </ng-template>
+      <ng-template #errorIcon>
+        <ng-icon name="lucideOctagonX" class="overflow-visible! text-base" />
+      </ng-template>
+      <ng-template #infoIcon>
+        <ng-icon name="lucideInfo" class="overflow-visible! text-base" />
+      </ng-template>
+      <ng-template #warningIcon>
+        <ng-icon name="lucideTriangleAlert" class="overflow-visible! text-base" />
+      </ng-template>
+    </brn-sonner-toaster>
+  `,
+})
+export class HlmToaster {
+  public readonly invert = input<ToasterProps['invert'], BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  public readonly theme = input<ToasterProps['theme']>('light');
+  public readonly position = input<ToasterProps['position']>('bottom-right');
+  public readonly hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT']);
+  public readonly richColors = input<ToasterProps['richColors'], BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  public readonly expand = input<ToasterProps['expand'], BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  public readonly duration = input<ToasterProps['duration'], NumberInput>(4000, {
+    transform: numberAttribute,
+  });
+  public readonly visibleToasts = input<ToasterProps['visibleToasts'], NumberInput>(3, {
+    transform: numberAttribute,
+  });
+  public readonly closeButton = input<ToasterProps['closeButton'], BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  public readonly toastOptions = input<ToasterProps['toastOptions']>({});
+
+  protected readonly _computedToastOptions = computed(() => {
+    const options = this.toastOptions();
+    return {
+      ...options,
+      classes: {
+        ...options?.classes,
+        toast: hlm('rounded-2xl!', options?.classes?.toast),
+      },
+    };
+  });
+  public readonly offset = input<ToasterProps['offset']>(null);
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  public readonly userStyle = input<Record<string, string>>(
+    {
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+    },
+    { alias: 'style' },
+  );
+
+  protected readonly _computedClass = computed(() => hlm('toaster group', this.userClass()));
+}

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

@@ -0,0 +1,5 @@
+import { HlmSpinner } from './lib/hlm-spinner';
+
+export * from './lib/hlm-spinner';
+
+export const HlmSpinnerImports = [HlmSpinner] as const;

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

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideLoader2 } from '@ng-icons/lucide';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-spinner',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideLoader2 })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'spinner',
+    role: 'status',
+    '[attr.aria-label]': 'ariaLabel()',
+  },
+  template: ` <ng-icon [name]="icon()" /> `,
+})
+export class HlmSpinner {
+  /**
+   * The name of the icon to be used as the spinner.
+   * Use provideIcons({ ... }) to register custom icons.
+   */
+  public readonly icon = input<string>('lucideLoader2');
+
+  /** Aria label for the spinner for accessibility. */
+  public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+
+  constructor() {
+    classes(() => 'inline-flex text-[length:--spacing(4)] motion-safe:animate-spin');
+  }
+}

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

@@ -0,0 +1,7 @@
+import { HlmSwitch } from './lib/hlm-switch';
+import { HlmSwitchThumb } from './lib/hlm-switch-thumb';
+
+export * from './lib/hlm-switch';
+export * from './lib/hlm-switch-thumb';
+
+export const HlmSwitchImports = [HlmSwitch, HlmSwitchThumb] as const;

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'brn-switch-thumb[hlm],[hlmSwitchThumb]',
+  host: { 'data-slot': 'switch-thumb' },
+})
+export class HlmSwitchThumb {
+  constructor() {
+    classes(
+      () =>
+        'bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)] pointer-events-none block ring-0 transition-transform',
+    );
+  }
+}