@blueprint-platform/components 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,14 @@
+import { CdkMenuGroup } from '@angular/cdk/menu';
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDropdownMenuGroup],hlm-dropdown-menu-group',
+  hostDirectives: [CdkMenuGroup],
+  host: { 'data-slot': 'dropdown-menu-group' },
+})
+export class HlmDropdownMenuGroup {
+  constructor() {
+    classes(() => 'block');
+  }
+}

package/dist/generators/ui/files/shared/ui/dropdown-menu/src/lib/hlm-dropdown-menu-item-sub-indicator.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronRight } from '@ng-icons/lucide';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-dropdown-menu-item-sub-indicator',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideChevronRight })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-icon name="lucideChevronRight" class="text-[length:--spacing(4)] rtl:rotate-180" />
+  `,
+})
+export class HlmDropdownMenuItemSubIndicator {
+  constructor() {
+    classes(() => 'ms-auto flex items-center justify-center');
+  }
+}

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

@@ -0,0 +1,42 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem } from '@angular/cdk/menu';
+import { booleanAttribute, Directive, HOST_TAG_NAME, inject, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
+
+@Directive({
+  selector: '[hlmDropdownMenuItem],hlm-dropdown-menu-item',
+  hostDirectives: [
+    {
+      directive: CdkMenuItem,
+      inputs: ['cdkMenuItemDisabled: disabled'],
+      outputs: ['cdkMenuItemTriggered: triggered'],
+    },
+    HlmDropdownMenuFocusOnHover,
+  ],
+  host: {
+    'data-slot': 'dropdown-menu-item',
+    '[attr.disabled]': '_isButton && disabled() ? "" : null',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-inset]': 'inset() ? "" : null',
+  },
+})
+export class HlmDropdownMenuItem {
+  protected readonly _isButton = inject(HOST_TAG_NAME) === 'button';
+
+  public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+  public readonly variant = input<'default' | 'destructive'>('default');
+
+  public readonly inset = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(
+      () =>
+        "hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-destructive/10 data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:hover:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive not-data-[variant=destructive]:hover:**:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/dropdown-menu-item 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/dropdown-menu/src/lib/hlm-dropdown-menu-label.ts

@@ -0,0 +1,20 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDropdownMenuLabel],hlm-dropdown-menu-label',
+  host: {
+    'data-slot': 'dropdown-menu-label',
+    '[attr.data-inset]': 'inset() ? "" : null',
+  },
+})
+export class HlmDropdownMenuLabel {
+  public readonly inset = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(() => 'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7 block');
+  }
+}

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

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-dropdown-menu-radio-indicator',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideCheck })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 'data-slot': 'dropdown-menu-radio-item-indicator' },
+  template: ` <ng-icon name="lucideCheck" /> `,
+})
+export class HlmDropdownMenuRadioIndicator {
+  constructor() {
+    classes(
+      () =>
+        'absolute end-2 flex items-center justify-center [&_ng-icon]:text-[length:--spacing(4)] pointer-events-none opacity-0 group-data-checked/dropdown-menu-radio:opacity-100',
+    );
+  }
+}

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

@@ -0,0 +1,49 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem, CdkMenuItemRadio, CdkMenuItemSelectable } from '@angular/cdk/menu';
+import { Directive, booleanAttribute, inject, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
+
+/** @internal. Use HlmDropdownMenuRadio instead. */
+@Directive({
+  selector: '[hlmDropdownMenuRadioCdk]',
+  providers: [
+    { provide: CdkMenuItemRadio, useExisting: HlmDropdownMenuRadioCdk },
+    { provide: CdkMenuItemSelectable, useExisting: HlmDropdownMenuRadioCdk },
+    { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+  ],
+})
+export class HlmDropdownMenuRadioCdk extends CdkMenuItemRadio {
+  public readonly keepOpen = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
+  public override trigger(options?: { keepOpen: boolean }) {
+    super.trigger({ ...options, keepOpen: this.keepOpen() });
+  }
+}
+
+@Directive({
+  selector: '[hlmDropdownMenuRadio]',
+  hostDirectives: [
+    {
+      directive: HlmDropdownMenuRadioCdk,
+      inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked', 'keepOpen'],
+      outputs: ['cdkMenuItemTriggered: triggered'],
+    },
+    HlmDropdownMenuFocusOnHover,
+  ],
+  host: {
+    'data-slot': 'dropdown-menu-radio-item',
+    '[attr.data-disabled]': '_cdkMenuItem.disabled ? "" : null',
+    '[attr.data-checked]': '_cdkMenuItem.checked ? "" : null',
+  },
+})
+export class HlmDropdownMenuRadio {
+  protected readonly _cdkMenuItem = inject(HlmDropdownMenuRadioCdk);
+
+  constructor() {
+    classes(
+      () =>
+        "hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground hover:**:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/dropdown-menu-radio 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/dropdown-menu/src/lib/hlm-dropdown-menu-separator.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator',
+  host: { 'data-slot': 'dropdown-menu-separator' },
+})
+export class HlmDropdownMenuSeparator {
+  constructor() {
+    classes(() => 'bg-border -mx-1 my-1 h-px block');
+  }
+}

package/dist/generators/ui/files/shared/ui/dropdown-menu/src/lib/hlm-dropdown-menu-shortcut.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDropdownMenuShortcut],hlm-dropdown-menu-shortcut',
+  host: { 'data-slot': 'dropdown-menu-shortcut' },
+})
+export class HlmDropdownMenuShortcut {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ms-auto text-xs tracking-widest',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/dropdown-menu/src/lib/hlm-dropdown-menu-sub-trigger.ts

@@ -0,0 +1,52 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { computed, Directive, effect, forwardRef, inject, input } from '@angular/core';
+import {
+  createMenuPosition,
+  MENU_SIDE,
+  type MenuAlign,
+  type MenuSide,
+} from '@spartan-ng/brain/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
+
+@Directive({
+  selector: '[hlmDropdownMenuSubTrigger]',
+  providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmDropdownMenuSubTrigger) }],
+  hostDirectives: [
+    {
+      directive: CdkMenuTrigger,
+      inputs: [
+        'cdkMenuTriggerFor: hlmDropdownMenuSubTrigger',
+        'cdkMenuTriggerData: hlmDropdownMenuTriggerData',
+      ],
+      outputs: [
+        'cdkMenuOpened: hlmDropdownMenuSubOpened',
+        'cdkMenuClosed: hlmDropdownMenuSubClosed',
+      ],
+    },
+  ],
+  host: { 'data-slot': 'dropdown-menu-sub-trigger' },
+})
+export class HlmDropdownMenuSubTrigger {
+  private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+  private readonly _config = injectHlmDropdownMenuConfig();
+
+  public readonly align = input<MenuAlign>(this._config.align);
+  public readonly side = input<MenuSide>(this._config.side);
+
+  private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
+
+  constructor() {
+    // CDK sets transform-origin on the submenu content from the resolved position; the content reads it
+    // to animate from the anchored corner and to derive its data-side. Cast tolerates @angular/cdk < 21.2
+    // (we still support >=21.0), where the property is absent and the assignment is a harmless no-op.
+    (this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector =
+      '[data-slot="dropdown-menu-sub"]';
+
+    effect(() => {
+      this._cdkTrigger.menuPosition = this._menuPosition();
+    });
+
+    classes(() => 'aria-expanded:bg-accent aria-expanded:text-accent-foreground');
+  }
+}

package/dist/generators/ui/files/shared/ui/dropdown-menu/src/lib/hlm-dropdown-menu-sub.ts

@@ -0,0 +1,53 @@
+import { CdkMenu } from '@angular/cdk/menu';
+import { Directive, ElementRef, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  deriveMenuSideFromTransformOrigin,
+  MENU_SIDE,
+  type MenuSide,
+} from '@spartan-ng/brain/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDropdownMenuSub],hlm-dropdown-menu-sub',
+  hostDirectives: [CdkMenu],
+  host: {
+    'data-slot': 'dropdown-menu-sub',
+    '[attr.data-state]': '_state()',
+    '[attr.data-side]': '_side()',
+  },
+})
+export class HlmDropdownMenuSub {
+  private readonly _host = inject(CdkMenu);
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+  // The sub-trigger provides its configured side; CDK parents this content's injector under it.
+  private readonly _menuSide = inject(MENU_SIDE, { optional: true });
+
+  protected readonly _state = signal('open');
+  protected readonly _side = signal<MenuSide>(this._menuSide?.side() ?? 'right');
+
+  constructor() {
+    this.setSideFromTransformOrigin();
+    // this is a best effort, but does not seem to work currently
+    // TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+    this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+
+    classes(
+      () =>
+        'motion-safe:data-open:animate-in motion-safe: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 bg-popover text-popover-foreground min-w-24 rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto',
+    );
+  }
+
+  private setSideFromTransformOrigin() {
+    const side = this._menuSide?.side() ?? 'right';
+    // CDK sets transform-origin on this element synchronously on attach; read it next tick and derive side
+    setTimeout(() => {
+      this._side.set(
+        deriveMenuSideFromTransformOrigin(
+          this._elementRef.nativeElement.style.transformOrigin,
+          side,
+        ),
+      );
+    });
+  }
+}

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

@@ -0,0 +1,26 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import { type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
+
+export interface HlmDropdownMenuConfig {
+  align: MenuAlign;
+  side: MenuSide;
+}
+
+const defaultConfig: HlmDropdownMenuConfig = {
+  align: 'start',
+  side: 'bottom',
+};
+
+const HlmDropdownMenuConfigToken = new InjectionToken<HlmDropdownMenuConfig>(
+  'HlmDropdownMenuConfig',
+);
+
+export function provideHlmDropdownMenuConfig(
+  config: Partial<HlmDropdownMenuConfig>,
+): ValueProvider {
+  return { provide: HlmDropdownMenuConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmDropdownMenuConfig(): HlmDropdownMenuConfig {
+  return inject(HlmDropdownMenuConfigToken, { optional: true }) ?? defaultConfig;
+}

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

@@ -0,0 +1,46 @@
+import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { computed, Directive, effect, forwardRef, inject, input } from '@angular/core';
+import {
+  createMenuPosition,
+  MENU_SIDE,
+  type MenuAlign,
+  type MenuSide,
+} from '@spartan-ng/brain/core';
+import { injectHlmDropdownMenuConfig } from './hlm-dropdown-menu-token';
+
+@Directive({
+  selector: '[hlmDropdownMenuTrigger]',
+  providers: [{ provide: MENU_SIDE, useExisting: forwardRef(() => HlmDropdownMenuTrigger) }],
+  hostDirectives: [
+    {
+      directive: CdkMenuTrigger,
+      inputs: [
+        'cdkMenuTriggerFor: hlmDropdownMenuTrigger',
+        'cdkMenuTriggerData: hlmDropdownMenuTriggerData',
+      ],
+      outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
+    },
+  ],
+  host: { 'data-slot': 'dropdown-menu-trigger' },
+})
+export class HlmDropdownMenuTrigger {
+  private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
+  private readonly _config = injectHlmDropdownMenuConfig();
+
+  public readonly align = input<MenuAlign>(this._config.align);
+  public readonly side = input<MenuSide>(this._config.side);
+
+  private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
+
+  constructor() {
+    // CDK sets transform-origin on the menu content from the resolved position; the content reads it to
+    // animate from the anchored corner and to derive its data-side. Cast tolerates @angular/cdk < 21.2
+    // (we still support >=21.0), where the property is absent and the assignment is a harmless no-op.
+    (this._cdkTrigger as { transformOriginSelector?: string }).transformOriginSelector =
+      '[data-slot="dropdown-menu"]';
+
+    effect(() => {
+      this._cdkTrigger.menuPosition = this._menuPosition();
+    });
+  }
+}

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

@@ -0,0 +1,57 @@
+import { type NumberInput } from '@angular/cdk/coercion';
+import { CdkMenu } from '@angular/cdk/menu';
+import { Directive, ElementRef, inject, input, numberAttribute, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  deriveMenuSideFromTransformOrigin,
+  MENU_SIDE,
+  type MenuSide,
+} from '@spartan-ng/brain/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmDropdownMenu],hlm-dropdown-menu',
+  hostDirectives: [CdkMenu],
+  host: {
+    'data-slot': 'dropdown-menu',
+    '[attr.data-state]': '_state()',
+    '[attr.data-side]': '_side()',
+    '[style.--side-offset]': 'sideOffset()',
+  },
+})
+export class HlmDropdownMenu {
+  private readonly _host = inject(CdkMenu);
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+  // The trigger provides its configured side; CDK parents this content's injector under the trigger's.
+  private readonly _menuSide = inject(MENU_SIDE, { optional: true });
+
+  protected readonly _state = signal('open');
+  protected readonly _side = signal<MenuSide>(this._menuSide?.side() ?? 'bottom');
+
+  public readonly sideOffset = input<number, NumberInput>(1, { transform: numberAttribute });
+
+  constructor() {
+    classes(
+      () =>
+        'motion-safe:data-open:animate-in motion-safe: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 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 my-[--spacing(var(--side-offset))] overflow-x-hidden overflow-y-auto outline-none',
+    );
+
+    this.setSideFromTransformOrigin();
+    // this is a best effort, but does not seem to work currently
+    // TODO: figure out a way for us to know the host is about to be closed. might not be possible with CDK
+    this._host.closed.pipe(takeUntilDestroyed()).subscribe(() => this._state.set('closed'));
+  }
+
+  private setSideFromTransformOrigin() {
+    const side = this._menuSide?.side() ?? 'bottom';
+    // CDK sets transform-origin on this element synchronously on attach; read it next tick and derive side
+    setTimeout(() => {
+      this._side.set(
+        deriveMenuSideFromTransformOrigin(
+          this._elementRef.nativeElement.style.transformOrigin,
+          side,
+        ),
+      );
+    });
+  }
+}

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

@@ -0,0 +1,22 @@
+import { HlmEmpty } from './lib/hlm-empty';
+import { HlmEmptyContent } from './lib/hlm-empty-content';
+import { HlmEmptyDescription } from './lib/hlm-empty-description';
+import { HlmEmptyHeader } from './lib/hlm-empty-header';
+import { HlmEmptyMedia } from './lib/hlm-empty-media';
+import { HlmEmptyTitle } from './lib/hlm-empty-title';
+
+export * from './lib/hlm-empty';
+export * from './lib/hlm-empty-content';
+export * from './lib/hlm-empty-description';
+export * from './lib/hlm-empty-header';
+export * from './lib/hlm-empty-media';
+export * from './lib/hlm-empty-title';
+
+export const HlmEmptyImports = [
+  HlmEmpty,
+  HlmEmptyContent,
+  HlmEmptyDescription,
+  HlmEmptyHeader,
+  HlmEmptyTitle,
+  HlmEmptyMedia,
+] as const;

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmEmptyContent],hlm-empty-content',
+  host: { 'data-slot': 'empty-content' },
+})
+export class HlmEmptyContent {
+  constructor() {
+    classes(
+      () => 'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmEmptyDescription]',
+  host: { 'data-slot': 'empty-description' },
+})
+export class HlmEmptyDescription {
+  constructor() {
+    classes(
+      () =>
+        'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmEmptyHeader],hlm-empty-header',
+  host: { 'data-slot': 'empty-header' },
+})
+export class HlmEmptyHeader {
+  constructor() {
+    classes(() => 'gap-2 flex max-w-sm flex-col items-center');
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const emptyMediaVariants = cva(
+  'mb-2 flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;
+
+@Directive({
+  selector: '[hlmEmptyMedia],hlm-empty-media',
+  host: {
+    'data-slot': 'empty-media',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class HlmEmptyMedia {
+  public readonly variant = input<EmptyMediaVariants['variant']>();
+
+  constructor() {
+    classes(() => emptyMediaVariants({ variant: this.variant() }));
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmEmptyTitle]',
+  host: { 'data-slot': 'empty-title' },
+})
+export class HlmEmptyTitle {
+  constructor() {
+    classes(() => 'text-sm font-medium tracking-tight');
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmEmpty],hlm-empty',
+  host: { 'data-slot': 'empty' },
+})
+export class HlmEmpty {
+  constructor() {
+    classes(
+      () =>
+        'gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
+    );
+  }
+}

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

@@ -0,0 +1,34 @@
+import { HlmField } from './lib/hlm-field';
+import { HlmFieldContent } from './lib/hlm-field-content';
+import { HlmFieldDescription } from './lib/hlm-field-description';
+import { HlmFieldError } from './lib/hlm-field-error';
+import { HlmFieldGroup } from './lib/hlm-field-group';
+import { HlmFieldLabel } from './lib/hlm-field-label';
+import { HlmFieldLegend } from './lib/hlm-field-legend';
+import { HlmFieldSeparator } from './lib/hlm-field-separator';
+import { HlmFieldSet } from './lib/hlm-field-set';
+import { HlmFieldTitle } from './lib/hlm-field-title';
+
+export * from './lib/hlm-field';
+export * from './lib/hlm-field-content';
+export * from './lib/hlm-field-description';
+export * from './lib/hlm-field-error';
+export * from './lib/hlm-field-group';
+export * from './lib/hlm-field-label';
+export * from './lib/hlm-field-legend';
+export * from './lib/hlm-field-separator';
+export * from './lib/hlm-field-set';
+export * from './lib/hlm-field-title';
+
+export const HlmFieldImports = [
+  HlmField,
+  HlmFieldContent,
+  HlmFieldDescription,
+  HlmFieldError,
+  HlmFieldGroup,
+  HlmFieldLabel,
+  HlmFieldLegend,
+  HlmFieldSeparator,
+  HlmFieldSet,
+  HlmFieldTitle,
+] as const;

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmFieldContent],hlm-field-content',
+  host: { 'data-slot': 'field-content' },
+})
+export class HlmFieldContent {
+  constructor() {
+    classes(() => 'gap-0.5 group/field-content flex flex-1 flex-col leading-snug');
+  }
+}