@blueprint-platform/components 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,65 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import type { RouterLink } from '@angular/router';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft } from '@ng-icons/lucide';
+import type { ButtonVariants } from '@blueprint-platform/ui/button';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+import { HlmPaginationLink } from './hlm-pagination-link';
+
+@Component({
+  selector: 'hlm-pagination-previous',
+  imports: [HlmPaginationLink, NgIcon],
+  providers: [provideIcons({ lucideChevronLeft })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <a
+      hlmPaginationLink
+      [class]="_computedClass()"
+      [link]="link()"
+      [queryParams]="queryParams()"
+      [queryParamsHandling]="queryParamsHandling()"
+      [size]="_size()"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+      <span [class]="_labelClass()">{{ text() }}</span>
+    </a>
+  `,
+})
+export class HlmPaginationPrevious {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  /** The link to navigate to the previous page. */
+  public readonly link = input<RouterLink['routerLink']>();
+  /** The query parameters to pass to the previous page. */
+  public readonly queryParams = input<RouterLink['queryParams']>();
+  /** How to handle query parameters when navigating to the previous page. */
+  public readonly queryParamsHandling = input<RouterLink['queryParamsHandling']>();
+
+  /** The aria-label for the previous page link. */
+  public readonly ariaLabel = input<string>('Go to previous page', { alias: 'aria-label' });
+  /** The text to display for the previous page link. */
+  public readonly text = input<string>('Previous');
+  /** Whether the button should only display the icon. */
+  public readonly iconOnly = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+  protected readonly _labelClass = computed(() =>
+    hlm(this.iconOnly() ? 'sr-only' : 'hidden sm:block'),
+  );
+
+  protected readonly _size = computed<ButtonVariants['size']>(() =>
+    this.iconOnly() ? 'icon' : 'default',
+  );
+
+  protected readonly _computedClass = computed(() =>
+    hlm(!this.iconOnly() && 'ps-1.5!', this.userClass()),
+  );
+}

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

@@ -0,0 +1,19 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmPagination],hlm-pagination',
+  host: {
+    'data-slot': 'pagination',
+    role: 'navigation',
+    '[attr.aria-label]': 'ariaLabel()',
+  },
+})
+export class HlmPagination {
+  /** The aria-label for the pagination component. */
+  public readonly ariaLabel = input<string>('pagination', { alias: 'aria-label' });
+
+  constructor() {
+    classes(() => 'mx-auto flex w-full justify-center');
+  }
+}

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

@@ -0,0 +1,25 @@
+import { HlmPopover } from './lib/hlm-popover';
+import { HlmPopoverContent } from './lib/hlm-popover-content';
+import { HlmPopoverDescription } from './lib/hlm-popover-description';
+import { HlmPopoverHeader } from './lib/hlm-popover-header';
+import { HlmPopoverPortal } from './lib/hlm-popover-portal';
+import { HlmPopoverTitle } from './lib/hlm-popover-title';
+import { HlmPopoverTrigger } from './lib/hlm-popover-trigger';
+
+export * from './lib/hlm-popover';
+export * from './lib/hlm-popover-content';
+export * from './lib/hlm-popover-description';
+export * from './lib/hlm-popover-header';
+export * from './lib/hlm-popover-portal';
+export * from './lib/hlm-popover-title';
+export * from './lib/hlm-popover-trigger';
+
+export const HlmPopoverImports = [
+  HlmPopover,
+  HlmPopoverContent,
+  HlmPopoverDescription,
+  HlmPopoverHeader,
+  HlmPopoverPortal,
+  HlmPopoverTitle,
+  HlmPopoverTrigger,
+] as const;

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

@@ -0,0 +1,25 @@
+import { Directive, ElementRef, Renderer2, effect, inject, signal } from '@angular/core';
+import { injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmPopoverContent],hlm-popover-content',
+  host: { 'data-slot': 'popover-content' },
+})
+export class HlmPopoverContent {
+  private readonly _stateProvider = injectExposesStateProvider({ host: true });
+  public state = this._stateProvider.state ?? signal('closed');
+  private readonly _renderer = inject(Renderer2);
+  private readonly _element = inject(ElementRef);
+
+  constructor() {
+    effect(() => {
+      this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+    });
+
+    classes(
+      () =>
+        'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 relative flex w-72 flex-col outline-none',
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmPopoverDescription]',
+  host: { 'data-slot': 'popover-description' },
+})
+export class HlmPopoverDescription {
+  constructor() {
+    classes(() => 'text-muted-foreground');
+  }
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmPopoverTitle]',
+  host: { 'data-slot': 'popover-title' },
+})
+export class HlmPopoverTitle {
+  constructor() {
+    classes(() => 'font-medium');
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnPopoverTrigger } from '@spartan-ng/brain/popover';
+
+@Directive({
+  selector: 'button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]',
+  hostDirectives: [
+    {
+      directive: BrnPopoverTrigger,
+      inputs: ['id', 'brnPopoverTriggerFor: hlmPopoverTriggerFor', 'type'],
+    },
+  ],
+  host: { 'data-slot': 'popover-trigger' },
+})
+export class HlmPopoverTrigger {}

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

@@ -0,0 +1,23 @@
+import { Directive } from '@angular/core';
+import { BrnPopover } from '@spartan-ng/brain/popover';
+
+@Directive({
+  selector: '[hlmPopover],hlm-popover',
+  hostDirectives: [
+    {
+      directive: BrnPopover,
+      inputs: [
+        'align',
+        'attachTo',
+        'autoFocus',
+        'closeOnOutsidePointerEvents',
+        'offsetX',
+        'sideOffset',
+        'state',
+      ],
+      outputs: ['stateChanged', 'closed'],
+    },
+  ],
+  host: { 'data-slot': 'popover' },
+})
+export class HlmPopover {}

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

@@ -0,0 +1,7 @@
+import { HlmProgress } from './lib/hlm-progress';
+import { HlmProgressIndicator } from './lib/hlm-progress-indicator';
+
+export * from './lib/hlm-progress';
+export * from './lib/hlm-progress-indicator';
+
+export const HlmProgressImports = [HlmProgress, HlmProgressIndicator] as const;

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

@@ -0,0 +1,31 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { Directive, computed, inject } from '@angular/core';
+import { BrnProgressIndicator, injectBrnProgress } from '@spartan-ng/brain/progress';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmProgressIndicator],hlm-progress-indicator',
+  hostDirectives: [BrnProgressIndicator],
+  host: {
+    'data-slot': 'progress-indicator',
+    '[class.animate-indeterminate]': '_indeterminate()',
+    '[style.transform]': '_transform()',
+  },
+})
+export class HlmProgressIndicator {
+  private readonly _progress = injectBrnProgress();
+  private readonly _dir = inject(Directionality);
+  // Offset the indicator by the unfilled remainder. In RTL the bar fills from the inline-start
+  // (visually the right), so translate the opposite way to keep the fill on the correct side.
+  protected readonly _transform = computed(() => {
+    const offset = 100 - (this._progress.value() ?? 100);
+    return `translateX(${this._dir.valueSignal() === 'rtl' ? '' : '-'}${offset}%)`;
+  });
+  protected readonly _indeterminate = computed(
+    () => this._progress.value() === null || this._progress.value() === undefined,
+  );
+
+  constructor() {
+    classes(() => 'bg-primary h-full w-full flex-1 transition-all');
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnProgress } from '@spartan-ng/brain/progress';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'hlm-progress,[hlmProgress]',
+  hostDirectives: [{ directive: BrnProgress, inputs: ['value', 'max', 'getValueLabel'] }],
+  host: { 'data-slot': 'progress' },
+})
+export class HlmProgress {
+  constructor() {
+    classes(() => 'bg-muted h-1 rounded-full relative inline-flex w-full overflow-hidden');
+  }
+}

package/dist/generators/ui/files/shared/ui/radio-group/src/index.ts

@@ -0,0 +1,9 @@
+import { HlmRadio } from './lib/hlm-radio';
+import { HlmRadioGroup } from './lib/hlm-radio-group';
+import { HlmRadioIndicator } from './lib/hlm-radio-indicator';
+
+export * from './lib/hlm-radio';
+export * from './lib/hlm-radio-group';
+export * from './lib/hlm-radio-indicator';
+
+export const HlmRadioGroupImports = [HlmRadioGroup, HlmRadio, HlmRadioIndicator] as const;

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

@@ -0,0 +1,44 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnRadioGroup } from '@spartan-ng/brain/radio-group';
+import { classes } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: '[hlmRadioGroup],hlm-radio-group',
+  hostDirectives: [
+    {
+      directive: BrnRadioGroup,
+      inputs: ['name', 'value', 'disabled', 'required'],
+      outputs: ['valueChange'],
+    },
+    BrnFieldControlDescribedBy,
+  ],
+  host: {
+    'data-slot': 'radio-group',
+    '[attr.aria-invalid]': '_ariaInvalid() ? "true" : null',
+    '[attr.data-invalid]': '_ariaInvalid() ? "true" : null',
+    '[attr.data-dirty]': '_dirty() ? "true" : null',
+    '[attr.data-touched]': '_touched() ? "true" : null',
+  },
+})
+export class HlmRadioGroup {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  private readonly _brnRadioGroup = inject(BrnRadioGroup);
+  protected readonly _ariaInvalid = computed(() => this._brnRadioGroup.controlState?.()?.invalid);
+
+  protected readonly _touched = computed(() => this._brnRadioGroup.controlState?.()?.touched);
+  protected readonly _dirty = computed(() => this._brnRadioGroup.controlState?.()?.dirty);
+
+  protected readonly _errorState = computed(
+    () => this._brnRadioGroup.controlState?.()?.spartanInvalid,
+  );
+
+  constructor() {
+    classes(() => [
+      'grid gap-2',
+      this.userClass(),
+      this._errorState() ? 'data-[invalid=true]:text-destructive' : '',
+    ]);
+  }
+}

package/dist/generators/ui/files/shared/ui/radio-group/src/lib/hlm-radio-indicator.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-radio-indicator',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'radio-group-indicator',
+  },
+  template: `
+    <div class="group-data-[checked=true]:bg-primary size-2 rounded-full bg-transparent"></div>
+  `,
+})
+export class HlmRadioIndicator {
+  constructor() {
+    classes(
+      () =>
+        'border-input text-primary group-has-[:focus-visible]:border-ring group-has-[:focus-visible]:ring-ring/50 dark:bg-input/30 group-data=[disabled=true]:cursor-not-allowed group-data=[disabled=true]:opacity-50 relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-xs transition-[color,box-shadow] outline-none group-has-[:focus-visible]:ring-[3px]',
+    );
+  }
+}

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

@@ -0,0 +1,130 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { isPlatformBrowser } from '@angular/common';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DOCUMENT,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  output,
+  PLATFORM_ID,
+  Renderer2,
+} from '@angular/core';
+import { BrnRadio, BrnRadioGroup, type BrnRadioChange } from '@spartan-ng/brain/radio-group';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+  selector: 'hlm-radio',
+  imports: [BrnRadio],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.aria-describedby]': 'null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    'data-slot': 'radio-group-item',
+  },
+  template: `
+    <brn-radio
+      [id]="inputId()"
+      [class]="_computedClass()"
+      [value]="value()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [attr.aria-invalid]="_ariaInvalid() ? 'true' : null"
+      [attr.data-invalid]="_ariaInvalid() ? 'true' : null"
+      [attr.data-dirty]="_dirty() ? 'true' : null"
+      [attr.data-touched]="_touched() ? 'true' : null"
+      [attr.data-matches-spartan-invalid]="_groupSpartanInvalid() ? 'true' : null"
+      [aria-label]="ariaLabel()"
+      [aria-labelledby]="ariaLabelledby()"
+      [aria-describedby]="ariaDescribedby()"
+      (change)="change.emit($event)"
+    >
+      <ng-content select="[target],[indicator],hlm-radio-indicator" indicator />
+      <ng-content />
+    </brn-radio>
+  `,
+})
+export class HlmRadio<T = unknown> {
+  private readonly _document = inject(DOCUMENT);
+  private readonly _renderer = inject(Renderer2);
+  private readonly _elementRef = inject(ElementRef);
+  private readonly _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+  private readonly _radioGroup = inject(BrnRadioGroup, { optional: true });
+
+  protected readonly _ariaInvalid = computed(() => this._radioGroup?.controlState?.()?.invalid);
+
+  protected readonly _touched = computed(() => this._radioGroup?.controlState?.()?.touched);
+  protected readonly _dirty = computed(() => this._radioGroup?.controlState?.()?.dirty);
+  protected readonly _groupSpartanInvalid = computed(
+    () => this._radioGroup?.controlState?.()?.spartanInvalid,
+  );
+
+  protected readonly _errorStateClass = computed(() =>
+    this._groupSpartanInvalid() ? 'text-destructive' : '',
+  );
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'group relative flex items-center gap-x-3',
+      'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+      this.userClass(),
+      this._errorStateClass(),
+    ),
+  );
+
+  /** Used to set the id on the underlying brn element. */
+  public readonly inputId = input<string | undefined>(undefined);
+
+  /** Used to set the aria-label attribute on the underlying brn element. */
+  public readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });
+
+  /** Used to set the aria-labelledby attribute on the underlying brn element. */
+  public readonly ariaLabelledby = input<string | undefined>(undefined, {
+    alias: 'aria-labelledby',
+  });
+
+  /** Used to set the aria-describedby attribute on the underlying brn element. */
+  public readonly ariaDescribedby = input<string | undefined>(undefined, {
+    alias: 'aria-describedby',
+  });
+
+  /**
+   * The value this radio button represents.
+   */
+  public readonly value = input.required<T>();
+
+  /** Whether the checkbox is required. */
+  public readonly required = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  /** Whether the checkbox is disabled. */
+  public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  /**
+   * Event emitted when the checked state of this radio button changes.
+   */
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  public readonly change = output<BrnRadioChange<T>>();
+
+  constructor() {
+    effect(() => {
+      const isDisabled = this.disabled();
+
+      if (!this._elementRef.nativeElement || !this._isBrowser) return;
+
+      const labelElement =
+        this._elementRef.nativeElement.closest('label') ??
+        this._document.querySelector(`label[for="${this.inputId()}"]`);
+
+      if (!labelElement) return;
+      this._renderer.setAttribute(labelElement, 'data-disabled', isDisabled ? 'true' : 'false');
+    });
+  }
+}

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

@@ -0,0 +1,13 @@
+import { HlmResizableGroup } from './lib/hlm-resizable-group';
+import { HlmResizableHandle } from './lib/hlm-resizable-handle';
+import { HlmResizablePanel } from './lib/hlm-resizable-panel';
+
+export * from './lib/hlm-resizable-group';
+export * from './lib/hlm-resizable-handle';
+export * from './lib/hlm-resizable-panel';
+
+export const HlmResizableImports = [
+  HlmResizableGroup,
+  HlmResizablePanel,
+  HlmResizableHandle,
+] as const;

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

@@ -0,0 +1,22 @@
+import { Directive } from '@angular/core';
+import { BrnResizableGroup } from '@spartan-ng/brain/resizable';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmResizableGroup],hlm-resizable-group',
+  hostDirectives: [
+    {
+      directive: BrnResizableGroup,
+      inputs: ['direction', 'layout'],
+      outputs: ['dragEnd', 'dragStart', 'layoutChange'],
+    },
+  ],
+  host: {
+    'data-slot': 'resizable-group',
+  },
+})
+export class HlmResizableGroup {
+  constructor() {
+    classes(() => 'group flex h-full w-full data-[panel-group-direction=vertical]:flex-col');
+  }
+}

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

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { BrnResizableHandle } from '@spartan-ng/brain/resizable';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-resizable-handle',
+  exportAs: 'hlmResizableHandle',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnResizableHandle, inputs: ['withHandle', 'disabled'] }],
+  host: {
+    'data-slot': 'resizable-handle',
+  },
+  template: `
+    @if (_brnResizableHandle.withHandle()) {
+      <div class="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0"></div>
+    }
+  `,
+})
+export class HlmResizableHandle {
+  protected readonly _brnResizableHandle = inject(BrnResizableHandle);
+
+  constructor() {
+    classes(() => [
+      'bg-border ring-offset-background focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'data-[panel-group-direction=horizontal]:hover:cursor-ew-resize data-[panel-group-direction=vertical]:hover:cursor-ns-resize',
+    ]);
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Directive, inject } from '@angular/core';
+import { BrnResizablePanel } from '@spartan-ng/brain/resizable';
+
+@Directive({
+  selector: '[hlmResizablePanel],hlm-resizable-panel',
+  exportAs: 'hlmResizablePanel',
+  hostDirectives: [
+    {
+      directive: BrnResizablePanel,
+      inputs: ['defaultSize', 'id', 'collapsible', 'maxSize', 'minSize'],
+    },
+  ],
+  host: {
+    'data-slot': 'resizable-panel',
+  },
+})
+export class HlmResizablePanel {
+  private readonly _resizablePanel = inject(BrnResizablePanel);
+
+  public setSize(size: number) {
+    this._resizablePanel.setSize(size);
+  }
+}

package/dist/generators/ui/files/shared/ui/scroll-area/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmScrollArea } from './lib/hlm-scroll-area';
+
+export * from './lib/hlm-scroll-area';
+
+export const HlmScrollAreaImports = [HlmScrollArea] as const;

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

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { provideScrollbarOptions } from 'ngx-scrollbar';
+
+@Directive({
+  selector: 'ng-scrollbar[hlm],ng-scrollbar[hlmScrollbar]',
+  providers: [provideScrollbarOptions({ visibility: 'hover' })],
+  host: {
+    'data-slot': 'scroll-area',
+    '[style.--scrollbar-thumb-color]': '"var(--border)"',
+    '[style.--scrollbar-thumb-hover-color]': '"var(--border)"',
+    '[style.--scrollbar-track-color]': '"transparent"',
+    '[style.--scrollbar-track-thickness]': '"0.625rem"',
+    '[style.--scrollbar-track-offset]': '"1.5px"',
+  },
+})
+export class HlmScrollArea {
+  constructor() {
+    classes(() => 'rounded-md [--scrollbar-thumb-shape:9999px] block');
+  }
+}