@surfnet/curve-angular 0.2.0

package/src/lib/ui/data-table/src/lib/hlm-data-table.stories.ts

@@ -0,0 +1,479 @@
+import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorArrowsDownUp, phosphorDotsThreeVertical } from '@ng-icons/phosphor-icons/regular';
+import { HlmButton, HlmButtonImports } from '../../../button/src';
+import { HlmCheckbox } from '../../../checkbox/src';
+import { HlmDropdownMenuImports } from '../../../dropdown-menu/src';
+import { HlmInput } from '../../../input/src';
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { dataTableContract } from '@surfnet/curve-contracts';
+import {
+  flexRenderComponent,
+  type Column,
+  type ColumnDef,
+  type Row,
+  type Table,
+} from '@tanstack/angular-table';
+
+import { HlmDataTableContent } from './hlm-data-table-content';
+import { HlmDataTablePagination } from './hlm-data-table-pagination';
+import { HlmDataTableToolbar } from './hlm-data-table-toolbar';
+import { injectDataTable } from './inject-data-table';
+
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+type Payment = {
+  id: string;
+  amount: number;
+  status: 'pending' | 'processing' | 'success' | 'failed';
+  email: string;
+};
+
+const data: Payment[] = [
+  { id: 'm5gr84i9', amount: 630.44, status: 'success', email: 'michael.mitc@example.com' },
+  { id: '3u1reuv4', amount: 767.5, status: 'success', email: 'felicia.reid@example.com' },
+  { id: 'derv1ws0', amount: 396.84, status: 'processing', email: 'georgia.young@example.com' },
+  { id: '5kma53ae', amount: 475.22, status: 'success', email: 'alma.lawson@example.com' },
+  { id: 'bhqecj4p', amount: 275.43, status: 'failed', email: 'dolores.chambers@example.com' },
+];
+
+const currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+
+// ---------------------------------------------------------------------------
+// Interactive cell components (mounted by FlexRender via flexRenderComponent)
+// ---------------------------------------------------------------------------
+
+@Component({
+  selector: 'data-table-select-all',
+  imports: [HlmCheckbox],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <hlm-checkbox
+      aria-label="Select all"
+      [checked]="table().getIsAllPageRowsSelected()"
+      [indeterminate]="table().getIsSomePageRowsSelected()"
+      (checkedChange)="table().toggleAllPageRowsSelected($event)"
+    />
+  `,
+})
+class DataTableSelectAll {
+  public readonly table = input.required<Table<Payment>>();
+}
+
+@Component({
+  selector: 'data-table-select-row',
+  imports: [HlmCheckbox],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <hlm-checkbox
+      aria-label="Select row"
+      [checked]="row().getIsSelected()"
+      (checkedChange)="row().toggleSelected($event)"
+    />
+  `,
+})
+class DataTableSelectRow {
+  public readonly row = input.required<Row<Payment>>();
+}
+
+@Component({
+  selector: 'data-table-email-header',
+  imports: [HlmButton, NgIcon],
+  providers: [provideIcons({ phosphorArrowsDownUp })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      hlmBtn
+      variant="ghost"
+      size="sm"
+      (click)="column().toggleSorting(column().getIsSorted() === 'asc')"
+    >
+      Email
+      <ng-icon name="phosphorArrowsDownUp" data-icon="inline-end" />
+    </button>
+  `,
+})
+class DataTableEmailHeader {
+  public readonly column = input.required<Column<Payment>>();
+}
+
+@Component({
+  selector: 'data-table-row-actions',
+  imports: [HlmButtonImports, HlmDropdownMenuImports, NgIcon],
+  providers: [provideIcons({ phosphorDotsThreeVertical })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button
+      hlmBtn
+      variant="ghost"
+      size="icon-sm"
+      align="end"
+      aria-label="Open menu"
+      [hlmDropdownMenuTrigger]="menu"
+    >
+      <ng-icon name="phosphorDotsThreeVertical" />
+    </button>
+    <ng-template #menu>
+      <hlm-dropdown-menu class="w-48">
+        <hlm-dropdown-menu-group>
+          <hlm-dropdown-menu-label>Actions</hlm-dropdown-menu-label>
+          <button hlmDropdownMenuItem (triggered)="copyId()">Copy payment ID</button>
+        </hlm-dropdown-menu-group>
+        <hlm-dropdown-menu-separator />
+        <button hlmDropdownMenuItem>View customer</button>
+        <button hlmDropdownMenuItem>View payment details</button>
+      </hlm-dropdown-menu>
+    </ng-template>
+  `,
+})
+class DataTableRowActions {
+  public readonly payment = input.required<Payment>();
+
+  protected copyId(): void {
+    void navigator.clipboard?.writeText(this.payment().id);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Presentational cell components (the Angular equivalent of React's JSX cells)
+// ---------------------------------------------------------------------------
+
+@Component({
+  selector: 'data-table-status-cell',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<span class="capitalize">{{ status() }}</span>`,
+})
+class DataTableStatusCell {
+  public readonly status = input.required<string>();
+}
+
+@Component({
+  selector: 'data-table-email-cell',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<span class="lowercase">{{ email() }}</span>`,
+})
+class DataTableEmailCell {
+  public readonly email = input.required<string>();
+}
+
+@Component({
+  selector: 'data-table-amount-header',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="text-right">Amount</div>`,
+})
+class DataTableAmountHeader {}
+
+@Component({
+  selector: 'data-table-amount-cell',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="text-right font-medium">{{ formatted() }}</div>`,
+})
+class DataTableAmountCell {
+  public readonly amount = input.required<number>();
+  protected readonly formatted = computed(() => currency.format(this.amount()));
+}
+
+// ---------------------------------------------------------------------------
+// Shared columns
+// ---------------------------------------------------------------------------
+
+const columns: ColumnDef<Payment, unknown>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => flexRenderComponent(DataTableSelectAll, { inputs: { table } }),
+    cell: ({ row }) => flexRenderComponent(DataTableSelectRow, { inputs: { row } }),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) =>
+      flexRenderComponent(DataTableStatusCell, {
+        inputs: { status: row.getValue<string>('status') },
+      }),
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => flexRenderComponent(DataTableEmailHeader, { inputs: { column } }),
+    cell: ({ row }) =>
+      flexRenderComponent(DataTableEmailCell, { inputs: { email: row.getValue<string>('email') } }),
+  },
+  {
+    accessorKey: 'amount',
+    header: () => flexRenderComponent(DataTableAmountHeader),
+    cell: ({ row }) =>
+      flexRenderComponent(DataTableAmountCell, {
+        inputs: { amount: row.getValue<number>('amount') },
+      }),
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) =>
+      flexRenderComponent(DataTableRowActions, { inputs: { payment: row.original } }),
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Host components (one per story, mirroring the React render functions)
+// ---------------------------------------------------------------------------
+
+@Component({
+  selector: 'payment-data-table',
+  imports: [
+    HlmDataTableContent,
+    HlmDataTablePagination,
+    HlmDataTableToolbar,
+    HlmButton,
+    HlmInput,
+    HlmDropdownMenuImports,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'block w-full' },
+  template: `
+    <div hlmDataTableToolbar>
+      <input
+        hlmInput
+        class="max-w-sm"
+        placeholder="Filter emails…"
+        [value]="emailFilter()"
+        (input)="setEmailFilter($event)"
+      />
+      <button hlmBtn variant="outline" class="ml-auto" [hlmDropdownMenuTrigger]="columnsMenu">
+        Columns
+      </button>
+      <ng-template #columnsMenu>
+        <hlm-dropdown-menu class="w-40">
+          @for (column of hideableColumns(); track column.id) {
+            <button
+              hlmDropdownMenuCheckbox
+              class="capitalize"
+              [checked]="column.getIsVisible()"
+              (triggered)="column.toggleVisibility(!column.getIsVisible())"
+            >
+              {{ column.id }}
+              <hlm-dropdown-menu-checkbox-indicator />
+            </button>
+          }
+        </hlm-dropdown-menu>
+      </ng-template>
+    </div>
+    <hlm-data-table-content [table]="table" [columns]="columns" />
+    <hlm-data-table-pagination [table]="table" />
+  `,
+})
+class PaymentDataTable {
+  protected readonly _data = signal(data);
+  protected readonly columns = columns;
+  protected readonly table = injectDataTable(() => ({ data: this._data(), columns: this.columns }));
+
+  protected readonly emailFilter = signal('');
+
+  protected hideableColumns() {
+    return this.table.getAllColumns().filter((column) => column.getCanHide());
+  }
+
+  protected setEmailFilter(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.emailFilter.set(value);
+    this.table.getColumn('email')?.setFilterValue(value);
+  }
+}
+
+@Component({
+  selector: 'empty-data-table',
+  imports: [HlmDataTableContent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'block w-full' },
+  template: `
+    <hlm-data-table-content
+      [table]="table"
+      [columns]="columns"
+      noResultsLabel="No payments found."
+    />
+  `,
+})
+class EmptyDataTable {
+  protected readonly columns = columns;
+  protected readonly table = injectDataTable<Payment>(() => ({ data: [], columns: this.columns }));
+}
+
+@Component({
+  selector: 'custom-toolbar-data-table',
+  imports: [HlmDataTableContent, HlmDataTablePagination, HlmDataTableToolbar, HlmButton],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'block w-full' },
+  template: `
+    <div hlmDataTableToolbar class="justify-between">
+      <span class="font-medium">Recent payments</span>
+      <button hlmBtn size="sm">Export</button>
+    </div>
+    <hlm-data-table-content [table]="table" [columns]="columns" />
+    <hlm-data-table-pagination [table]="table" />
+  `,
+})
+class CustomToolbarDataTable {
+  protected readonly _data = signal(data);
+  protected readonly columns = columns;
+  protected readonly table = injectDataTable(() => ({ data: this._data(), columns: this.columns }));
+}
+
+// ---------------------------------------------------------------------------
+// Meta + stories
+// ---------------------------------------------------------------------------
+
+const meta: Meta = {
+  title: 'Components/DataTable',
+  parameters: {
+    docs: {
+      description: {
+        component: dataTableContract.docs.description,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Full table: filter input, column-visibility toggle, row selection, sortable Email column,
+ * right-aligned Amount, row actions, and Previous/Next pagination.
+ */
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'typescript',
+        code: `@Component({
+  selector: 'payment-data-table',
+  imports: [
+    HlmDataTableContent,
+    HlmDataTablePagination,
+    HlmDataTableToolbar,
+    HlmButton,
+    HlmInput,
+    HlmDropdownMenuImports,
+  ],
+  host: { class: 'block w-full' },
+  template: \`
+    <div hlmDataTableToolbar>
+      <input
+        hlmInput
+        class="max-w-sm"
+        placeholder="Filter emails…"
+        [value]="emailFilter()"
+        (input)="setEmailFilter($event)"
+      />
+      <button hlmBtn variant="outline" class="ml-auto" [hlmDropdownMenuTrigger]="columnsMenu">
+        Columns
+      </button>
+      <ng-template #columnsMenu>
+        <hlm-dropdown-menu class="w-40">
+          @for (column of hideableColumns(); track column.id) {
+            <button
+              hlmDropdownMenuCheckbox
+              class="capitalize"
+              [checked]="column.getIsVisible()"
+              (triggered)="column.toggleVisibility(!column.getIsVisible())"
+            >
+              {{ column.id }}
+              <hlm-dropdown-menu-checkbox-indicator />
+            </button>
+          }
+        </hlm-dropdown-menu>
+      </ng-template>
+    </div>
+    <hlm-data-table-content [table]="table" [columns]="columns" />
+    <hlm-data-table-pagination [table]="table" />
+  \`,
+})
+class PaymentDataTable {
+  protected readonly columns = columns;
+  protected readonly table = injectDataTable(() => ({ data, columns: this.columns }));
+  protected readonly emailFilter = signal('');
+
+  protected hideableColumns() {
+    return this.table.getAllColumns().filter((column) => column.getCanHide());
+  }
+
+  protected setEmailFilter(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.emailFilter.set(value);
+    this.table.getColumn('email')?.setFilterValue(value);
+  }
+}`,
+      },
+    },
+  },
+  render: () => ({
+    moduleMetadata: { imports: [PaymentDataTable] },
+    template: '<payment-data-table />',
+  }),
+};
+
+/** Empty state — no rows to display. */
+export const Empty: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'typescript',
+        code: `@Component({
+  selector: 'empty-data-table',
+  imports: [HlmDataTableContent],
+  host: { class: 'block w-full' },
+  template: \`
+    <hlm-data-table-content
+      [table]="table"
+      [columns]="columns"
+      noResultsLabel="No payments found."
+    />
+  \`,
+})
+class EmptyDataTable {
+  protected readonly columns = columns;
+  protected readonly table = injectDataTable<Payment>(() => ({ data: [], columns: this.columns }));
+}`,
+      },
+    },
+  },
+  render: () => ({
+    moduleMetadata: { imports: [EmptyDataTable] },
+    template: '<empty-data-table />',
+  }),
+};
+
+/** Custom toolbar layout: heading on the left, action button on the right. */
+export const CustomToolbar: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'typescript',
+        code: `@Component({
+  selector: 'custom-toolbar-data-table',
+  imports: [HlmDataTableContent, HlmDataTablePagination, HlmDataTableToolbar, HlmButton],
+  host: { class: 'block w-full' },
+  template: \`
+    <div hlmDataTableToolbar class="justify-between">
+      <span class="font-medium">Recent payments</span>
+      <button hlmBtn size="sm">Export</button>
+    </div>
+    <hlm-data-table-content [table]="table" [columns]="columns" />
+    <hlm-data-table-pagination [table]="table" />
+  \`,
+})
+class CustomToolbarDataTable {
+  protected readonly columns = columns;
+  protected readonly table = injectDataTable(() => ({ data, columns: this.columns }));
+}`,
+      },
+    },
+  },
+  render: () => ({
+    moduleMetadata: { imports: [CustomToolbarDataTable] },
+    template: '<custom-toolbar-data-table />',
+  }),
+};

package/src/lib/ui/data-table/src/lib/inject-data-table.ts

@@ -0,0 +1,86 @@
+import { signal, type WritableSignal } from '@angular/core';
+import {
+  createAngularTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type ColumnDef,
+  type ColumnFiltersState,
+  type PaginationState,
+  type Row,
+  type RowSelectionState,
+  type SortingState,
+  type Table,
+  type Updater,
+  type VisibilityState,
+} from '@tanstack/angular-table';
+
+interface InjectDataTableOptions<TData> {
+  data: TData[];
+  columns: ColumnDef<TData, unknown>[];
+  /** Derive a stable row id (e.g. from a record's id) so row selection survives data changes. */
+  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+  initialSorting?: SortingState;
+  initialColumnFilters?: ColumnFiltersState;
+  initialColumnVisibility?: VisibilityState;
+  initialPagination?: PaginationState;
+}
+
+/** Apply a TanStack `Updater` (value or `(old) => new`) to a writable signal. */
+function applyUpdater<T>(state: WritableSignal<T>): (updater: Updater<T>) => void {
+  return (updater) =>
+    state.set(typeof updater === 'function' ? (updater as (old: T) => T)(state()) : updater);
+}
+
+/**
+ * Angular analog of React's `useDataTable`. Wraps `createAngularTable` with the core,
+ * sorted, filtered and paginated row models and manages sorting, column-filter,
+ * column-visibility, row-selection and pagination state with signals.
+ *
+ * Must be called from an injection context (a component constructor or field initializer),
+ * since `createAngularTable` injects. Pass an options factory so reactive `data` re-renders
+ * the table:
+ *
+ * ```ts
+ * readonly table = injectDataTable(() => ({ data: this.data(), columns }));
+ * ```
+ */
+function injectDataTable<TData>(options: () => InjectDataTableOptions<TData>): Table<TData> {
+  const initial = options();
+
+  const sorting = signal<SortingState>(initial.initialSorting ?? []);
+  const columnFilters = signal<ColumnFiltersState>(initial.initialColumnFilters ?? []);
+  const columnVisibility = signal<VisibilityState>(initial.initialColumnVisibility ?? {});
+  const rowSelection = signal<RowSelectionState>({});
+  const pagination = signal<PaginationState>(
+    initial.initialPagination ?? { pageIndex: 0, pageSize: 10 },
+  );
+
+  return createAngularTable(() => {
+    const { data, columns, getRowId } = options();
+    return {
+      data,
+      columns,
+      getRowId,
+      state: {
+        sorting: sorting(),
+        columnFilters: columnFilters(),
+        columnVisibility: columnVisibility(),
+        rowSelection: rowSelection(),
+        pagination: pagination(),
+      },
+      onSortingChange: applyUpdater(sorting),
+      onColumnFiltersChange: applyUpdater(columnFilters),
+      onColumnVisibilityChange: applyUpdater(columnVisibility),
+      onRowSelectionChange: applyUpdater(rowSelection),
+      onPaginationChange: applyUpdater(pagination),
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+    };
+  });
+}
+
+export { injectDataTable, type InjectDataTableOptions };

package/src/lib/ui/dropdown-menu/src/index.ts

@@ -0,0 +1,45 @@
+import { HlmDropdownMenu } from './lib/hlm-dropdown-menu';
+import { HlmDropdownMenuCheckbox } from './lib/hlm-dropdown-menu-checkbox';
+import { HlmDropdownMenuCheckboxIndicator } from './lib/hlm-dropdown-menu-checkbox-indicator';
+import { HlmDropdownMenuGroup } from './lib/hlm-dropdown-menu-group';
+import { HlmDropdownMenuItem } from './lib/hlm-dropdown-menu-item';
+import { HlmDropdownMenuItemSubIndicator } from './lib/hlm-dropdown-menu-item-sub-indicator';
+import { HlmDropdownMenuLabel } from './lib/hlm-dropdown-menu-label';
+import { HlmDropdownMenuRadio } from './lib/hlm-dropdown-menu-radio';
+import { HlmDropdownMenuRadioIndicator } from './lib/hlm-dropdown-menu-radio-indicator';
+import { HlmDropdownMenuSeparator } from './lib/hlm-dropdown-menu-separator';
+import { HlmDropdownMenuShortcut } from './lib/hlm-dropdown-menu-shortcut';
+import { HlmDropdownMenuSub } from './lib/hlm-dropdown-menu-sub';
+
+import { HlmDropdownMenuTrigger } from './lib/hlm-dropdown-menu-trigger';
+
+export * from './lib/hlm-dropdown-menu';
+export * from './lib/hlm-dropdown-menu-checkbox';
+export * from './lib/hlm-dropdown-menu-checkbox-indicator';
+export * from './lib/hlm-dropdown-menu-group';
+export * from './lib/hlm-dropdown-menu-item';
+export * from './lib/hlm-dropdown-menu-item-sub-indicator';
+export * from './lib/hlm-dropdown-menu-label';
+export * from './lib/hlm-dropdown-menu-radio';
+export * from './lib/hlm-dropdown-menu-radio-indicator';
+export * from './lib/hlm-dropdown-menu-separator';
+export * from './lib/hlm-dropdown-menu-shortcut';
+export * from './lib/hlm-dropdown-menu-sub';
+export * from './lib/hlm-dropdown-menu-token';
+export * from './lib/hlm-dropdown-menu-trigger';
+
+export const HlmDropdownMenuImports = [
+  HlmDropdownMenu,
+  HlmDropdownMenuCheckbox,
+  HlmDropdownMenuCheckboxIndicator,
+  HlmDropdownMenuGroup,
+  HlmDropdownMenuItem,
+  HlmDropdownMenuItemSubIndicator,
+  HlmDropdownMenuLabel,
+  HlmDropdownMenuRadio,
+  HlmDropdownMenuRadioIndicator,
+  HlmDropdownMenuSeparator,
+  HlmDropdownMenuShortcut,
+  HlmDropdownMenuSub,
+  HlmDropdownMenuTrigger,
+] as const;

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-checkbox-indicator.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { phosphorCheck } from '@ng-icons/phosphor-icons/regular';
+import { classes } from '../../../utils/src';
+
+@Component({
+  selector: 'hlm-dropdown-menu-checkbox-indicator',
+  imports: [NgIcon],
+  providers: [provideIcons({ phosphorCheck })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: ` <ng-icon class="text-base" name="phosphorCheck" /> `,
+})
+export class HlmDropdownMenuCheckboxIndicator {
+  constructor() {
+    classes(
+      () =>
+        'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
+    );
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-checkbox.ts

@@ -0,0 +1,36 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItemCheckbox } from '@angular/cdk/menu';
+import { Directive, booleanAttribute, inject, input } from '@angular/core';
+import { classes } from '../../../utils/src';
+
+@Directive({
+  selector: '[hlmDropdownMenuCheckbox]',
+  hostDirectives: [
+    {
+      directive: CdkMenuItemCheckbox,
+      inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+      outputs: ['cdkMenuItemTriggered: triggered'],
+    },
+  ],
+  host: {
+    'data-slot': 'dropdown-menu-checkbox-item',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+    '[attr.data-checked]': 'checked() ? "" : null',
+  },
+})
+export class HlmDropdownMenuCheckbox {
+  private readonly _cdkMenuItem = inject(CdkMenuItemCheckbox);
+  public readonly checked = input<boolean, BooleanInput>(this._cdkMenuItem.checked, {
+    transform: booleanAttribute,
+  });
+  public readonly disabled = input<boolean, BooleanInput>(this._cdkMenuItem.disabled, {
+    transform: booleanAttribute,
+  });
+
+  constructor() {
+    classes(
+      () =>
+        'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:ps-2 has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:pe-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:[&>hlm-dropdown-menu-checkbox-indicator]:start-auto has-[>hlm-dropdown-menu-checkbox-indicator:last-child]:[&>hlm-dropdown-menu-checkbox-indicator]:end-2',
+    );
+  }
+}

package/src/lib/ui/dropdown-menu/src/lib/hlm-dropdown-menu-group.ts

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