@blueprint-platform/components 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,161 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  linkedSignal,
+  model,
+  output,
+  viewChild,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+export const HLM_CHECKBOX_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => HlmCheckbox),
+  multi: true,
+};
+
+@Component({
+  selector: 'hlm-checkbox',
+  imports: [BrnCheckbox, NgIcon],
+  providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
+  viewProviders: [provideIcons({ lucideCheck })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnFieldControlDescribedBy],
+  host: {
+    class: 'contents peer',
+    'data-slot': 'checkbox',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.data-disabled]': '_disabled() ? "" : null',
+  },
+  template: `
+    <brn-checkbox
+      [id]="inputId()"
+      [name]="name()"
+      [class]="_computedClass()"
+      [checked]="checked()"
+      [(indeterminate)]="indeterminate"
+      [disabled]="_disabled()"
+      [required]="required()"
+      [aria-label]="ariaLabel()"
+      [aria-labelledby]="ariaLabelledby()"
+      [aria-describedby]="ariaDescribedby()"
+      [forceInvalid]="forceInvalid()"
+      (checkedChange)="_handleChange($event)"
+      (touched)="_onTouched?.()"
+    >
+      @if (checked() || indeterminate()) {
+        <span
+          class="[&>ng-icon]:text-[length:--spacing(3.5)] flex items-center justify-center text-current transition-none"
+        >
+          <ng-icon name="lucideCheck" />
+        </span>
+      }
+    </brn-checkbox>
+  `,
+})
+export class HlmCheckbox implements ControlValueAccessor {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary data-[matches-spartan-invalid=true]:aria-checked:border-primary data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 peer shrink-0 cursor-default outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      this.userClass(),
+      this._errorStateClass(),
+    ),
+  );
+
+  /** Used to set the id on the underlying brn element. */
+  public readonly inputId = input<string | null>(null);
+
+  /** Used to set the aria-label attribute on the underlying brn element. */
+  public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+
+  /** Used to set the aria-labelledby attribute on the underlying brn element. */
+  public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });
+
+  /** Used to set the aria-describedby attribute on the underlying brn element. */
+  public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });
+
+  /** The checked state of the checkbox. */
+  public readonly checkedInput = input<boolean, BooleanInput>(false, {
+    alias: 'checked',
+    transform: booleanAttribute,
+  });
+  public readonly checked = linkedSignal(this.checkedInput);
+
+  /** Emits when checked state changes. */
+  public readonly checkedChange = output<boolean>();
+
+  /**
+   * The indeterminate state of the checkbox.
+   * For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked.
+   */
+  public readonly indeterminate = model<boolean>(false);
+
+  /** The name attribute of the checkbox. */
+  public readonly name = input<string | null>(null);
+
+  /** 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 });
+
+  /** Whether to force the checkbox into an invalid state. */
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  protected readonly _disabled = linkedSignal(this.disabled);
+
+  private readonly _brnCheckbox = viewChild.required(BrnCheckbox);
+
+  private readonly _spartanInvalid = computed(
+    () => this.forceInvalid() || this._brnCheckbox().spartanInvalid?.(),
+  );
+  protected readonly _errorStateClass = computed(() =>
+    this._spartanInvalid()
+      ? 'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40'
+      : '',
+  );
+
+  protected _onChange?: ChangeFn<boolean>;
+  protected _onTouched?: TouchFn;
+
+  protected _handleChange(value: boolean): void {
+    if (this._disabled()) return;
+    this.checked.set(value);
+    this.checkedChange.emit(value);
+    this._onChange?.(value);
+  }
+
+  /** CONTROL VALUE ACCESSOR */
+  writeValue(value: boolean): void {
+    this.checked.set(value);
+  }
+
+  registerOnChange(fn: ChangeFn<boolean>): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: TouchFn): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabled.set(isDisabled);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { HlmCollapsible } from './lib/hlm-collapsible';
+import { HlmCollapsibleContent } from './lib/hlm-collapsible-content';
+import { HlmCollapsibleTrigger } from './lib/hlm-collapsible-trigger';
+
+export * from './lib/hlm-collapsible';
+export * from './lib/hlm-collapsible-content';
+export * from './lib/hlm-collapsible-trigger';
+
+export const HlmCollapsibleImports = [
+  HlmCollapsible,
+  HlmCollapsibleContent,
+  HlmCollapsibleTrigger,
+] as const;

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnCollapsibleContent } from '@spartan-ng/brain/collapsible';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmCollapsibleContent],hlm-collapsible-content',
+  hostDirectives: [{ directive: BrnCollapsibleContent, inputs: ['id'] }],
+  host: { 'data-slot': 'collapsible-content' },
+})
+export class HlmCollapsibleContent {
+  constructor() {
+    classes(() => 'data-[state=closed]:hidden');
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnCollapsibleTrigger } from '@spartan-ng/brain/collapsible';
+
+@Directive({
+  selector: 'button[hlmCollapsibleTrigger]',
+  hostDirectives: [{ directive: BrnCollapsibleTrigger, inputs: ['type'] }],
+  host: { 'data-slot': 'collapsible-trigger' },
+})
+export class HlmCollapsibleTrigger {}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { BrnCollapsible } from '@spartan-ng/brain/collapsible';
+
+@Directive({
+  selector: '[hlmCollapsible],hlm-collapsible',
+  hostDirectives: [
+    {
+      directive: BrnCollapsible,
+      inputs: ['expanded', 'disabled'],
+      outputs: ['expandedChange'],
+    },
+  ],
+  host: { 'data-slot': 'collapsible' },
+})
+export class HlmCollapsible {}

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

@@ -0,0 +1,64 @@
+import { HlmCombobox } from './lib/hlm-combobox';
+import { HlmComboboxChip } from './lib/hlm-combobox-chip';
+import { HlmComboboxChipInput } from './lib/hlm-combobox-chip-input';
+import { HlmComboboxChips } from './lib/hlm-combobox-chips';
+import { HlmComboboxContent } from './lib/hlm-combobox-content';
+import { HlmComboboxEmpty } from './lib/hlm-combobox-empty';
+import { HlmComboboxGroup } from './lib/hlm-combobox-group';
+import { HlmComboboxInput } from './lib/hlm-combobox-input';
+import { HlmComboboxItem } from './lib/hlm-combobox-item';
+import { HlmComboboxLabel } from './lib/hlm-combobox-label';
+import { HlmComboboxList } from './lib/hlm-combobox-list';
+import { HlmComboboxMultiple } from './lib/hlm-combobox-multiple';
+import { HlmComboboxPlaceholder } from './lib/hlm-combobox-placeholder';
+import { HlmComboboxPortal } from './lib/hlm-combobox-portal';
+import { HlmComboboxSeparator } from './lib/hlm-combobox-separator';
+import { HlmComboboxStatus } from './lib/hlm-combobox-status';
+import { HlmComboboxTrigger } from './lib/hlm-combobox-trigger';
+import { HlmComboboxValue } from './lib/hlm-combobox-value';
+import { HlmComboboxValueTemplate } from './lib/hlm-combobox-value-template';
+import { HlmComboboxValues } from './lib/hlm-combobox-values';
+
+export * from './lib/hlm-combobox';
+export * from './lib/hlm-combobox-chip';
+export * from './lib/hlm-combobox-chip-input';
+export * from './lib/hlm-combobox-chips';
+export * from './lib/hlm-combobox-content';
+export * from './lib/hlm-combobox-empty';
+export * from './lib/hlm-combobox-group';
+export * from './lib/hlm-combobox-input';
+export * from './lib/hlm-combobox-item';
+export * from './lib/hlm-combobox-label';
+export * from './lib/hlm-combobox-list';
+export * from './lib/hlm-combobox-multiple';
+export * from './lib/hlm-combobox-placeholder';
+export * from './lib/hlm-combobox-portal';
+export * from './lib/hlm-combobox-separator';
+export * from './lib/hlm-combobox-status';
+export * from './lib/hlm-combobox-trigger';
+export * from './lib/hlm-combobox-value';
+export * from './lib/hlm-combobox-value-template';
+export * from './lib/hlm-combobox-values';
+
+export const HlmComboboxImports = [
+  HlmCombobox,
+  HlmComboboxChip,
+  HlmComboboxChipInput,
+  HlmComboboxChips,
+  HlmComboboxContent,
+  HlmComboboxEmpty,
+  HlmComboboxGroup,
+  HlmComboboxInput,
+  HlmComboboxItem,
+  HlmComboboxLabel,
+  HlmComboboxList,
+  HlmComboboxMultiple,
+  HlmComboboxPlaceholder,
+  HlmComboboxPortal,
+  HlmComboboxSeparator,
+  HlmComboboxStatus,
+  HlmComboboxTrigger,
+  HlmComboboxValue,
+  HlmComboboxValueTemplate,
+  HlmComboboxValues,
+] as const;

package/dist/generators/ui/files/shared/ui/combobox/src/lib/hlm-combobox-chip-input.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnComboboxChipInput } from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'input[hlmComboboxChipInput]',
+  hostDirectives: [{ directive: BrnComboboxChipInput, inputs: ['id', 'aria-invalid'] }],
+  host: { 'data-slot': 'combobox-chip-input' },
+})
+export class HlmComboboxChipInput {
+  constructor() {
+    classes(() => 'placeholder:text-muted-foreground min-w-16 flex-1 outline-none');
+  }
+}

package/dist/generators/ui/files/shared/ui/combobox/src/lib/hlm-combobox-chip-remove.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { BrnComboboxChipRemove } from '@spartan-ng/brain/combobox';
+import { buttonVariants } from '@blueprint-platform/ui/button';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'button[hlmComboboxChipRemove]',
+  hostDirectives: [BrnComboboxChipRemove],
+  host: { 'data-slot': 'combobox-chip-remove' },
+})
+export class HlmComboboxChipRemove {
+  constructor() {
+    classes(() => [
+      '-ms-1 opacity-50 hover:opacity-100',
+      buttonVariants({ variant: 'ghost', size: 'icon-xs' }),
+    ]);
+  }
+}

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

@@ -0,0 +1,35 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';
+import { BrnComboboxChip } from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmComboboxChipRemove } from './hlm-combobox-chip-remove';
+
+@Component({
+  selector: 'hlm-combobox-chip',
+  imports: [NgIcon, HlmComboboxChipRemove],
+  providers: [provideIcons({ lucideX })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnComboboxChip, inputs: ['value'] }],
+  host: { 'data-slot': 'combobox-chip' },
+  template: `
+    <ng-content />
+
+    @if (showRemove()) {
+      <button hlmComboboxChipRemove>
+        <ng-icon name="lucideX" />
+      </button>
+    }
+  `,
+})
+export class HlmComboboxChip {
+  public readonly showRemove = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
+  constructor() {
+    classes(
+      () =>
+        'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pe-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50',
+    );
+  }
+}

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

@@ -0,0 +1,35 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import {
+  BrnComboboxAnchor,
+  BrnComboboxPopoverTrigger,
+  injectBrnComboboxBase,
+} from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmComboboxChips],hlm-combobox-chips',
+  hostDirectives: [BrnComboboxAnchor, BrnComboboxPopoverTrigger],
+  host: {
+    'data-slot': 'combobox-chips',
+    '[attr.data-matches-spartan-invalid]': '_spartanInvalid() ? "true" : null',
+  },
+})
+export class HlmComboboxChips {
+  private readonly _combobox = injectBrnComboboxBase();
+
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  protected readonly _spartanInvalid = computed(
+    () => this.forceInvalid() || this._combobox.controlState?.()?.spartanInvalid,
+  );
+
+  constructor() {
+    classes(
+      () =>
+        'dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-data-[slot=combobox-chip]:px-1 data-[matches-spartan-invalid=true]:ring-3',
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { BrnComboboxContent } from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmComboboxContent],hlm-combobox-content',
+  hostDirectives: [BrnComboboxContent],
+})
+export class HlmComboboxContent {
+  constructor() {
+    classes(() => [
+      'bg-popover text-popover-foreground data-open:animate-in **:has-[[data-slot=input-group-control]:focus-visible]:border-input 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 **:data-[slot=input-group]:bg-input/30 **:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 **:has-[[data-slot=input-group-control]:focus-visible]:ring-0 **:data-[slot=input-group]:m-1 **:data-[slot=input-group]:mb-0 **:data-[slot=input-group]:h-8 **:data-[slot=input-group]:shadow-none group/combobox-content relative flex w-(--brn-combobox-width) flex-col p-0',
+    ]);
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnComboboxEmpty } from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmComboboxEmpty],hlm-combobox-empty',
+  hostDirectives: [BrnComboboxEmpty],
+  host: { 'data-slot': 'combobox-empty' },
+})
+export class HlmComboboxEmpty {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground hidden w-full items-center justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex',
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnComboboxGroup } from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmComboboxGroup]',
+  hostDirectives: [BrnComboboxGroup],
+  host: { 'data-slot': 'combobox-group' },
+})
+export class HlmComboboxGroup {
+  constructor() {
+    classes(() => 'data-hidden:hidden');
+  }
+}

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

@@ -0,0 +1,93 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown, lucideX } from '@ng-icons/lucide';
+import {
+  BrnComboboxAnchor,
+  BrnComboboxImports,
+  BrnComboboxPopoverTrigger,
+} from '@spartan-ng/brain/combobox';
+import { HlmInputGroup, HlmInputGroupImports } from '@blueprint-platform/ui/input-group';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-combobox-input',
+  imports: [HlmInputGroupImports, NgIcon, BrnComboboxImports, BrnComboboxPopoverTrigger],
+  providers: [provideIcons({ lucideChevronDown, lucideX })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnComboboxAnchor, HlmInputGroup],
+  template: `
+    <input
+      brnComboboxInput
+      #comboboxInput="brnComboboxInput"
+      brnComboboxPopoverTrigger
+      [closeOnTriggerClick]="false"
+      hlmInputGroupInput
+      [id]="inputId()"
+      [placeholder]="placeholder()"
+      [forceInvalid]="forceInvalid()"
+      [aria-invalid]="ariaInvalidOverride()"
+    />
+
+    <hlm-input-group-addon align="inline-end">
+      @if (showTrigger()) {
+        <button
+          brnComboboxPopoverTrigger
+          hlmInputGroupButton
+          data-slot="input-group-button"
+          [disabled]="comboboxInput.disabled()"
+          [attr.aria-label]="triggerAriaLabel()"
+          size="icon-xs"
+          variant="ghost"
+          class="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+        >
+          <ng-icon name="lucideChevronDown" />
+        </button>
+      }
+
+      @if (showClear()) {
+        <button
+          *brnComboboxClear
+          hlmInputGroupButton
+          data-slot="combobox-clear"
+          [disabled]="comboboxInput.disabled()"
+          [attr.aria-label]="clearAriaLabel()"
+          size="icon-xs"
+          variant="ghost"
+        >
+          <ng-icon name="lucideX" />
+        </button>
+      }
+    </hlm-input-group-addon>
+
+    <ng-content />
+  `,
+})
+export class HlmComboboxInput {
+  private static _id = 0;
+
+  public readonly inputId = input<string>(`hlm-combobox-input-${HlmComboboxInput._id++}`);
+  public readonly placeholder = input<string>('');
+
+  public readonly showTrigger = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+  public readonly showClear = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  /** Accessible name for the icon-only popover trigger button. */
+  public readonly triggerAriaLabel = input<string>('Toggle options');
+
+  /** Accessible name for the icon-only clear button. */
+  public readonly clearAriaLabel = input<string>('Clear selection');
+
+  /** Manual override for aria-invalid. When not set, auto-detects from the parent combobox error state. */
+  public readonly ariaInvalidOverride = input<boolean | undefined, BooleanInput>(undefined, {
+    transform: (v: BooleanInput) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
+    alias: 'aria-invalid',
+  });
+
+  constructor() {
+    classes(() => 'w-auto');
+  }
+}

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

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { BrnComboboxItem } from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-combobox-item',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideCheck })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnComboboxItem, inputs: ['id', 'disabled', 'value'] }],
+  host: { 'data-slot': 'combobox-item' },
+  template: `
+    <ng-content />
+    @if (_active()) {
+      <ng-icon
+        name="lucideCheck"
+        class="pointer-events-none absolute end-2 flex items-center justify-center text-[length:--spacing(4)]"
+        aria-hidden="true"
+      />
+    }
+  `,
+})
+export class HlmComboboxItem {
+  private readonly _brnComboboxItem = inject(BrnComboboxItem);
+
+  protected readonly _active = this._brnComboboxItem.active;
+
+  constructor() {
+    classes(
+      () =>
+        'data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnComboboxLabel } from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmComboboxLabel]',
+  hostDirectives: [{ directive: BrnComboboxLabel, inputs: ['id'] }],
+  host: { 'data-slot': 'combobox-label' },
+})
+export class HlmComboboxLabel {
+  constructor() {
+    classes(() => 'text-muted-foreground px-2 py-1.5 text-xs');
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnComboboxList } from '@spartan-ng/brain/combobox';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmComboboxList]',
+  hostDirectives: [{ directive: BrnComboboxList, inputs: ['id'] }],
+  host: { 'data-slot': 'combobox-list' },
+})
+export class HlmComboboxList {
+  constructor() {
+    classes(
+      () =>
+        'no-scrollbar max-h-[calc(--spacing(72)---spacing(9))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain',
+    );
+  }
+}

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

@@ -0,0 +1,46 @@
+import { Directive } from '@angular/core';
+import { BrnComboboxMultiple } from '@spartan-ng/brain/combobox';
+import {
+  BrnPopover,
+  provideBrnPopoverConfig,
+  provideBrnPopoverDefaultOptions,
+} from '@spartan-ng/brain/popover';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmComboboxMultiple],hlm-combobox-multiple',
+  providers: [
+    provideBrnPopoverConfig({
+      align: 'start',
+      sideOffset: 6,
+    }),
+    provideBrnPopoverDefaultOptions({ role: null }),
+  ],
+  hostDirectives: [
+    {
+      directive: BrnComboboxMultiple,
+      inputs: [
+        'autoHighlight',
+        'disabled',
+        'filter',
+        'search',
+        'value',
+        'itemToString',
+        'filterOptions',
+        'isItemEqualToValue',
+      ],
+      outputs: ['searchChange', 'valueChange'],
+    },
+    {
+      directive: BrnPopover,
+      inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+      outputs: ['stateChanged', 'closed'],
+    },
+  ],
+  host: { 'data-slot': 'combobox' },
+})
+export class HlmComboboxMultiple {
+  constructor() {
+    classes(() => 'block');
+  }
+}