@blueprint-platform/components 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,52 @@
+import { HlmSelect } from './lib/hlm-select';
+import { HlmSelectContent } from './lib/hlm-select-content';
+import { HlmSelectGroup } from './lib/hlm-select-group';
+import { HlmSelectItem } from './lib/hlm-select-item';
+import { HlmSelectLabel } from './lib/hlm-select-label';
+import { HlmSelectMultiple } from './lib/hlm-select-multiple';
+import { HlmSelectPlaceholder } from './lib/hlm-select-placeholder';
+import { HlmSelectPortal } from './lib/hlm-select-portal';
+import { HlmSelectScrollDown } from './lib/hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './lib/hlm-select-scroll-up';
+import { HlmSelectSeparator } from './lib/hlm-select-separator';
+import { HlmSelectTrigger } from './lib/hlm-select-trigger';
+import { HlmSelectValue } from './lib/hlm-select-value';
+import { HlmSelectValueTemplate } from './lib/hlm-select-value-template';
+import { HlmSelectValues } from './lib/hlm-select-values';
+import { HlmSelectValuesContent } from './lib/hlm-select-values-content';
+
+export * from './lib/hlm-select';
+export * from './lib/hlm-select-content';
+export * from './lib/hlm-select-group';
+export * from './lib/hlm-select-item';
+export * from './lib/hlm-select-label';
+export * from './lib/hlm-select-multiple';
+export * from './lib/hlm-select-placeholder';
+export * from './lib/hlm-select-portal';
+export * from './lib/hlm-select-scroll-down';
+export * from './lib/hlm-select-scroll-up';
+export * from './lib/hlm-select-separator';
+export * from './lib/hlm-select-trigger';
+export * from './lib/hlm-select-value';
+export * from './lib/hlm-select-value-template';
+export * from './lib/hlm-select-values';
+export * from './lib/hlm-select-values-content';
+
+export const HlmSelectImports = [
+  HlmSelect,
+  HlmSelectContent,
+  HlmSelectGroup,
+  HlmSelectItem,
+  HlmSelectLabel,
+  HlmSelectMultiple,
+  HlmSelectPlaceholder,
+  HlmSelectPortal,
+  HlmSelectScrollDown,
+  HlmSelectScrollUp,
+  HlmSelectSeparator,
+  HlmSelectTrigger,
+  HlmSelectValue,
+  HlmSelectValues,
+  HlmSelectValuesContent,
+  HlmSelectValueTemplate,
+] as const;

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

@@ -0,0 +1,44 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { BrnSelectContent } from '@spartan-ng/brain/select';
+import { classes, hlm } from '@blueprint-platform/ui/utils';
+import { HlmSelectScrollDown } from './hlm-select-scroll-down';
+import { HlmSelectScrollUp } from './hlm-select-scroll-up';
+
+@Component({
+  selector: 'hlm-select-content',
+  imports: [HlmSelectScrollUp, HlmSelectScrollDown],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnSelectContent],
+  template: `
+    @if (showScroll()) {
+      <hlm-select-scroll-up />
+    }
+
+    <div role="listbox" [class]="_computedListboxClasses()">
+      <ng-content />
+    </div>
+
+    @if (showScroll()) {
+      <hlm-select-scroll-down />
+    }
+  `,
+})
+export class HlmSelectContent {
+  protected readonly _computedListboxClasses = computed(() => hlm('flex flex-col'));
+
+  public readonly showScroll = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  constructor() {
+    classes(
+      () =>
+        'bg-popover no-scrollbar 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 max-h-72 min-w-36 flex-col rounded-lg shadow-md ring-1 duration-100 relative flex w-(--brn-select-width) overflow-x-hidden overflow-y-auto',
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSelectGroup } from '@spartan-ng/brain/select';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmSelectGroup],hlm-select-group',
+  hostDirectives: [{ directive: BrnSelectGroup }],
+  host: { 'data-slot': 'select-group' },
+})
+export class HlmSelectGroup {
+  constructor() {
+    classes(() => 'scroll-my-1 p-1');
+  }
+}

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnSelectPlaceholder } from '@spartan-ng/brain/select';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmSelectPlaceholder],hlm-select-placeholder',
+  hostDirectives: [BrnSelectPlaceholder],
+  host: { 'data-slot': 'select-placeholder' },
+})
+export class HlmSelectPlaceholder {
+  constructor() {
+    classes(
+      () =>
+        "gap-2 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] flex items-center data-hidden:hidden [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+    );
+  }
+}

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

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

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

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { BrnSelectScrollDown } from '@spartan-ng/brain/select';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-select-scroll-down',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideChevronDown })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnSelectScrollDown],
+  template: ` <ng-icon name="lucideChevronDown" /> `,
+})
+export class HlmSelectScrollDown {
+  constructor() {
+    classes(
+      () =>
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] sticky bottom-0 w-full data-hidden:hidden",
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronUp } from '@ng-icons/lucide';
+import { BrnSelectScrollUp } from '@spartan-ng/brain/select';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-select-scroll-up',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideChevronUp })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [BrnSelectScrollUp],
+  template: ` <ng-icon name="lucideChevronUp" /> `,
+})
+export class HlmSelectScrollUp {
+  constructor() {
+    classes(
+      () =>
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] sticky top-0 w-full data-hidden:hidden",
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSelectSeparator } from '@spartan-ng/brain/select';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmSelectSeparator],hlm-select-separator',
+  hostDirectives: [{ directive: BrnSelectSeparator, inputs: ['orientation'] }],
+  host: { 'data-slot': 'select-separator' },
+})
+export class HlmSelectSeparator {
+  constructor() {
+    classes(() => 'bg-border -mx-1 my-1 h-px pointer-events-none');
+  }
+}

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

@@ -0,0 +1,58 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnSelectTrigger } from '@spartan-ng/brain/select';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+  selector: 'hlm-select-trigger',
+  imports: [NgIcon, BrnSelectTrigger, BrnFieldControlDescribedBy],
+  providers: [provideIcons({ lucideChevronDown })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      brnSelectTrigger
+      brnFieldControlDescribedBy
+      [forceInvalid]="forceInvalid()"
+      [id]="buttonId()"
+      [class]="_computedClass()"
+      [attr.data-size]="size()"
+      data-slot="select-trigger"
+    >
+      <ng-content />
+      <ng-icon
+        name="lucideChevronDown"
+        class="text-muted-foreground text-[length:--spacing(4)] ms-auto"
+      />
+    </button>
+  `,
+})
+export class HlmSelectTrigger {
+  private static _id = 0;
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/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 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+      this.userClass(),
+    ),
+  );
+
+  public readonly buttonId = input<string>(`hlm-select-trigger-${HlmSelectTrigger._id++}`);
+
+  public readonly size = input<'default' | 'sm'>('default');
+
+  /** Whether to force the trigger into an invalid state. */
+  public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+}

package/dist/generators/ui/files/shared/ui/select/src/lib/hlm-select-value-template.ts

@@ -0,0 +1,5 @@
+import { Directive } from '@angular/core';
+import { BrnSelectValueTemplate } from '@spartan-ng/brain/select';
+
+@Directive({ selector: '[hlmSelectValueTemplate]', hostDirectives: [BrnSelectValueTemplate] })
+export class HlmSelectValueTemplate {}

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

@@ -0,0 +1,18 @@
+import { Directive, inject } from '@angular/core';
+import { BrnSelectValue } from '@spartan-ng/brain/select';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmSelectValue],hlm-select-value',
+  hostDirectives: [{ directive: BrnSelectValue, inputs: ['placeholder'] }],
+  host: { '[attr.data-slot]': '!_hidden() ? "select-value" : null' },
+})
+export class HlmSelectValue {
+  private readonly _brnSelectValue = inject(BrnSelectValue);
+
+  protected readonly _hidden = this._brnSelectValue.hidden;
+
+  constructor() {
+    classes(() => 'data-hidden:hidden');
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({ selector: '[hlmSelectValuesContent],hlm-select-values-content' })
+export class HlmSelectValuesContent {
+  constructor() {
+    classes(() => 'gap-2 flex');
+  }
+}

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

@@ -0,0 +1,5 @@
+import { Directive } from '@angular/core';
+import { BrnSelectValues } from '@spartan-ng/brain/select';
+
+@Directive({ selector: '[hlmSelectValues]', hostDirectives: [BrnSelectValues] })
+export class HlmSelectValues {}

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmSeparatorClass =
+  'inline-flex shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch';
+
+@Directive({
+  selector: '[hlmSeparator],hlm-separator',
+  hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+  host: {
+    'data-slot': 'separator',
+  },
+})
+export class HlmSeparator {
+  constructor() {
+    classes(() => hlmSeparatorClass);
+  }
+}

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

@@ -0,0 +1,34 @@
+import { HlmSheet } from './lib/hlm-sheet';
+import { HlmSheetClose } from './lib/hlm-sheet-close';
+import { HlmSheetContent } from './lib/hlm-sheet-content';
+import { HlmSheetDescription } from './lib/hlm-sheet-description';
+import { HlmSheetFooter } from './lib/hlm-sheet-footer';
+import { HlmSheetHeader } from './lib/hlm-sheet-header';
+import { HlmSheetOverlay } from './lib/hlm-sheet-overlay';
+import { HlmSheetPortal } from './lib/hlm-sheet-portal';
+import { HlmSheetTitle } from './lib/hlm-sheet-title';
+import { HlmSheetTrigger } from './lib/hlm-sheet-trigger';
+
+export * from './lib/hlm-sheet';
+export * from './lib/hlm-sheet-close';
+export * from './lib/hlm-sheet-content';
+export * from './lib/hlm-sheet-description';
+export * from './lib/hlm-sheet-footer';
+export * from './lib/hlm-sheet-header';
+export * from './lib/hlm-sheet-overlay';
+export * from './lib/hlm-sheet-portal';
+export * from './lib/hlm-sheet-title';
+export * from './lib/hlm-sheet-trigger';
+
+export const HlmSheetImports = [
+  HlmSheet,
+  HlmSheetClose,
+  HlmSheetContent,
+  HlmSheetDescription,
+  HlmSheetFooter,
+  HlmSheetHeader,
+  HlmSheetOverlay,
+  HlmSheetPortal,
+  HlmSheetTitle,
+  HlmSheetTrigger,
+] as const;

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

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { BrnSheetClose } from '@spartan-ng/brain/sheet';
+
+@Directive({
+  selector: 'button[hlmSheetClose]',
+  hostDirectives: [BrnSheetClose],
+  host: { 'data-slot': 'sheet-close' },
+})
+export class HlmSheetClose {}

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

@@ -0,0 +1,66 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  Renderer2,
+  signal,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';
+import { injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { HlmButton } from '@blueprint-platform/ui/button';
+
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmSheetClose } from './hlm-sheet-close';
+
+@Component({
+  selector: 'hlm-sheet-content',
+  imports: [HlmButton, HlmSheetClose, NgIcon],
+  providers: [provideIcons({ lucideX })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'sheet-content',
+    '[attr.data-side]': '_sideProvider.side()',
+    '[attr.data-state]': 'state()',
+  },
+  template: `
+    <ng-content />
+
+    @if (showCloseButton()) {
+      <button hlmBtn variant="ghost" size="icon-sm" class="absolute end-3 top-3" hlmSheetClose>
+        <span class="sr-only">Close</span>
+        <ng-icon name="lucideX" />
+      </button>
+    }
+  `,
+})
+export class HlmSheetContent {
+  private readonly _stateProvider = injectExposesStateProvider({ host: true });
+  protected readonly _sideProvider = injectExposedSideProvider({ host: true });
+  public readonly state = this._stateProvider.state ?? signal('closed');
+  private readonly _renderer = inject(Renderer2);
+  private readonly _element = inject(ElementRef);
+
+  public readonly showCloseButton = input<boolean, BooleanInput>(true, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(() => [
+      'bg-popover text-popover-foreground fixed flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+      'data-open:animate-in data-closed:animate-out',
+      'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
+      'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
+      'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
+      'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
+    ]);
+    effect(() => {
+      this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
+    });
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSheetDescription } from '@spartan-ng/brain/sheet';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmSheetDescription]',
+  hostDirectives: [BrnSheetDescription],
+  host: { 'data-slot': 'sheet-description' },
+})
+export class HlmSheetDescription {
+  constructor() {
+    classes(() => 'text-muted-foreground text-sm');
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmSheetFooter],hlm-sheet-footer',
+  host: { 'data-slot': 'sheet-footer' },
+})
+export class HlmSheetFooter {
+  constructor() {
+    classes(() => 'gap-2 p-4 mt-auto flex flex-col');
+  }
+}

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

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

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

@@ -0,0 +1,27 @@
+import { Directive, computed, effect, input, untracked } from '@angular/core';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { BrnSheetOverlay } from '@spartan-ng/brain/sheet';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: '[hlmSheetOverlay],hlm-sheet-overlay',
+  hostDirectives: [BrnSheetOverlay],
+})
+export class HlmSheetOverlay {
+  private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+      this.userClass(),
+    ),
+  );
+
+  constructor() {
+    effect(() => {
+      const classValue = this._computedClass();
+      untracked(() => this._classSettable?.setClassToCustomElement(classValue));
+    });
+  }
+}

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

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