@blueprint-platform/components 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,120 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  linkedSignal,
+  output,
+} from '@angular/core';
+import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { BrnSwitch, type BrnSwitchSize, BrnSwitchThumb } from '@spartan-ng/brain/switch';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+import { HlmSwitchThumb } from './hlm-switch-thumb';
+
+export const HLM_SWITCH_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => HlmSwitch),
+  multi: true,
+};
+
+@Component({
+  selector: 'hlm-switch',
+  imports: [BrnSwitchThumb, BrnSwitch, HlmSwitchThumb],
+  providers: [HLM_SWITCH_VALUE_ACCESSOR],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'switch',
+    class: 'contents',
+    '[attr.aria-label]': 'null',
+    '[attr.aria-labelledby]': 'null',
+    '[attr.aria-describedby]': 'null',
+  },
+  template: `
+    <brn-switch
+      [class]="_computedClass()"
+      [size]="size()"
+      [checked]="checked()"
+      (checkedChange)="handleChange($event)"
+      (touched)="_onTouched?.()"
+      [disabled]="_disabled()"
+      [id]="inputId()"
+      [aria-label]="ariaLabel()"
+      [aria-labelledby]="ariaLabelledby()"
+      [aria-describedby]="ariaDescribedby()"
+    >
+      <brn-switch-thumb hlm />
+    </brn-switch>
+  `,
+})
+export class HlmSwitch implements ControlValueAccessor {
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'data-checked:bg-primary data-unchecked:bg-input 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 dark:data-unchecked:bg-input/80 rounded-full border border-transparent focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] group/switch inline-flex shrink-0 items-center transition-all outline-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  /** The checked state of the switch. */
+  public readonly checkedInput = input<boolean, BooleanInput>(false, {
+    alias: 'checked',
+    transform: booleanAttribute,
+  });
+  public readonly checked = linkedSignal(this.checkedInput);
+
+  /** Emits when the checked state of the switch changes. */
+  public readonly checkedChange = output<boolean>();
+
+  /** The disabled state of the switch. */
+  public readonly disabled = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  /** The size of the switch. */
+  public readonly size = input<BrnSwitchSize>('default');
+
+  /** 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' });
+
+  protected readonly _disabled = linkedSignal(this.disabled);
+
+  protected _onChange?: ChangeFn<boolean>;
+  protected _onTouched?: TouchFn;
+
+  protected handleChange(value: boolean): void {
+    this.checked.set(value);
+    this._onChange?.(value);
+    this.checkedChange.emit(value);
+  }
+
+  /** CONTROL VALUE ACCESSOR */
+  writeValue(value: boolean): void {
+    this.checked.set(Boolean(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/table/src/index.ts

@@ -0,0 +1,25 @@
+import {
+  HlmCaption,
+  HlmTable,
+  HlmTableContainer,
+  HlmTBody,
+  HlmTd,
+  HlmTFoot,
+  HlmTh,
+  HlmTHead,
+  HlmTr,
+} from './lib/hlm-table';
+
+export * from './lib/hlm-table';
+
+export const HlmTableImports = [
+  HlmCaption,
+  HlmTableContainer,
+  HlmTable,
+  HlmTBody,
+  HlmTd,
+  HlmTFoot,
+  HlmTh,
+  HlmTHead,
+  HlmTr,
+] as const;

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

@@ -0,0 +1,129 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: 'div[hlmTableContainer]',
+  host: { 'data-slot': 'table-container' },
+})
+export class HlmTableContainer {
+  constructor() {
+    classes(() => 'relative w-full overflow-x-auto');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <table> element.
+ */
+@Directive({
+  selector: 'table[hlmTable]',
+  host: { 'data-slot': 'table' },
+})
+export class HlmTable {
+  constructor() {
+    classes(() => 'w-full caption-bottom text-sm');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <thead> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'thead[hlmTHead],thead[hlmTableHeader]',
+  host: { 'data-slot': 'table-header' },
+})
+export class HlmTHead {
+  constructor() {
+    classes(() => '[&_tr]:border-b');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tbody> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'tbody[hlmTBody],tbody[hlmTableBody]',
+  host: { 'data-slot': 'table-body' },
+})
+export class HlmTBody {
+  constructor() {
+    classes(() => '[&_tr:last-child]:border-0');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tfoot> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'tfoot[hlmTFoot],tfoot[hlmTableFooter]',
+  host: { 'data-slot': 'table-footer' },
+})
+export class HlmTFoot {
+  constructor() {
+    classes(() => 'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <tr> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'tr[hlmTr],tr[hlmTableRow]',
+  host: { 'data-slot': 'table-row' },
+})
+export class HlmTr {
+  constructor() {
+    classes(
+      () =>
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50',
+    );
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <th> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'th[hlmTh],th[hlmTableHead]',
+  host: { 'data-slot': 'table-head' },
+})
+export class HlmTh {
+  constructor() {
+    classes(
+      () =>
+        'text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0',
+    );
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <td> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'td[hlmTd],td[hlmTableCell]',
+  host: { 'data-slot': 'table-cell' },
+})
+export class HlmTd {
+  constructor() {
+    classes(() => 'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0');
+  }
+}
+
+/**
+ * Directive to apply Shadcn-like styling to a <caption> element
+ * within an HlmTable context.
+ */
+@Directive({
+  selector: 'caption[hlmCaption],caption[hlmTableCaption]',
+  host: { 'data-slot': 'table-caption' },
+})
+export class HlmCaption {
+  constructor() {
+    classes(() => 'text-muted-foreground mt-4 text-sm');
+  }
+}

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

@@ -0,0 +1,22 @@
+import { HlmTabs } from './lib/hlm-tabs';
+import { HlmTabsContent } from './lib/hlm-tabs-content';
+import { HlmTabsContentLazy } from './lib/hlm-tabs-content-lazy';
+import { HlmTabsList } from './lib/hlm-tabs-list';
+import { HlmTabsPaginatedList } from './lib/hlm-tabs-paginated-list';
+import { HlmTabsTrigger } from './lib/hlm-tabs-trigger';
+
+export * from './lib/hlm-tabs';
+export * from './lib/hlm-tabs-content';
+export * from './lib/hlm-tabs-content-lazy';
+export * from './lib/hlm-tabs-list';
+export * from './lib/hlm-tabs-paginated-list';
+export * from './lib/hlm-tabs-trigger';
+
+export const HlmTabsImports = [
+  HlmTabs,
+  HlmTabsList,
+  HlmTabsTrigger,
+  HlmTabsContent,
+  HlmTabsContentLazy,
+  HlmTabsPaginatedList,
+] as const;

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

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnTabsContentLazy } from '@spartan-ng/brain/tabs';
+
+@Directive({
+  selector: 'ng-template[hlmTabsContentLazy]',
+  hostDirectives: [BrnTabsContentLazy],
+})
+export class HlmTabsContentLazy {}

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

@@ -0,0 +1,18 @@
+import { Directive, input } from '@angular/core';
+import { BrnTabsContent } from '@spartan-ng/brain/tabs';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmTabsContent]',
+  hostDirectives: [{ directive: BrnTabsContent, inputs: ['brnTabsContent: hlmTabsContent'] }],
+  host: {
+    'data-slot': 'tabs-content',
+  },
+})
+export class HlmTabsContent {
+  public readonly contentFor = input.required<string>({ alias: 'hlmTabsContent' });
+
+  constructor() {
+    classes(() => 'flex-1 text-sm outline-none');
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import { BrnTabsList } from '@spartan-ng/brain/tabs';
+import { classes } from '@blueprint-platform/ui/utils';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+export const listVariants = cva(
+  'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+type ListVariants = VariantProps<typeof listVariants>;
+
+@Directive({
+  selector: '[hlmTabsList],hlm-tabs-list',
+  hostDirectives: [BrnTabsList],
+  host: {
+    'data-slot': 'tabs-list',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class HlmTabsList {
+  public readonly variant = input<ListVariants['variant']>('default');
+
+  constructor() {
+    classes(() => listVariants({ variant: this.variant() }));
+  }
+}

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

@@ -0,0 +1,118 @@
+import { CdkObserveContent } from '@angular/cdk/observers';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChildren,
+  type ElementRef,
+  input,
+  viewChild,
+} from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import {
+  type BrnPaginatedTabHeaderItem,
+  BrnTabsPaginatedList,
+  BrnTabsTrigger,
+} from '@spartan-ng/brain/tabs';
+import { buttonVariants } from '@blueprint-platform/ui/button';
+import { classes, hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+import type { Observable } from 'rxjs';
+import { listVariants } from './hlm-tabs-list';
+
+@Component({
+  selector: 'hlm-paginated-tabs-list',
+  imports: [CdkObserveContent, NgIcon],
+  providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'tabs-paginated-list',
+  },
+  template: `
+    <button
+      #previousPaginator
+      data-pagination="previous"
+      type="button"
+      aria-hidden="true"
+      tabindex="-1"
+      [class]="_paginationButtonClass()"
+      [disabled]="disableScrollBefore || null"
+      (click)="_handlePaginatorClick('before')"
+      (mousedown)="_handlePaginatorPress('before', $event)"
+      (touchend)="_stopInterval()"
+    >
+      <ng-icon name="lucideChevronLeft" />
+    </button>
+
+    <div
+      #tabListContainer
+      class="z-[1] flex grow overflow-hidden"
+      (keydown)="_handleKeydown($event)"
+    >
+      <div
+        class="relative grow transition-transform"
+        #tabList
+        role="tablist"
+        (cdkObserveContent)="_onContentChanges()"
+      >
+        <div #tabListInner [class]="_tabListClass()">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+
+    <button
+      #nextPaginator
+      data-pagination="next"
+      type="button"
+      aria-hidden="true"
+      tabindex="-1"
+      [class]="_paginationButtonClass()"
+      [disabled]="disableScrollAfter || null"
+      (click)="_handlePaginatorClick('after')"
+      (mousedown)="_handlePaginatorPress('after', $event)"
+      (touchend)="_stopInterval()"
+    >
+      <ng-icon name="lucideChevronRight" />
+    </button>
+  `,
+})
+export class HlmTabsPaginatedList extends BrnTabsPaginatedList {
+  constructor() {
+    super();
+    classes(() => 'relative flex flex-shrink-0 items-center gap-1 overflow-hidden');
+  }
+
+  public readonly items = contentChildren(BrnTabsTrigger, { descendants: false });
+  /** Explicitly annotating type to avoid non-portable inferred type */
+  public readonly itemsChanges: Observable<ReadonlyArray<BrnPaginatedTabHeaderItem>> = toObservable(
+    this.items,
+  );
+
+  public readonly tabListContainer =
+    viewChild.required<ElementRef<HTMLElement>>('tabListContainer');
+  public readonly tabList = viewChild.required<ElementRef<HTMLElement>>('tabList');
+  public readonly tabListInner = viewChild.required<ElementRef<HTMLElement>>('tabListInner');
+  public readonly nextPaginator = viewChild.required<ElementRef<HTMLElement>>('nextPaginator');
+  public readonly previousPaginator =
+    viewChild.required<ElementRef<HTMLElement>>('previousPaginator');
+
+  public readonly tabListClass = input<ClassValue>('', { alias: 'tabListClass' });
+  protected readonly _tabListClass = computed(() => hlm(listVariants(), this.tabListClass()));
+
+  public readonly paginationButtonClass = input<ClassValue>('');
+  protected readonly _paginationButtonClass = computed(() =>
+    hlm(
+      'relative z-[2] select-none disabled:cursor-default',
+      buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
+      this.paginationButtonClass(),
+      this.showPaginationControls() ? 'inline-flex' : 'hidden',
+    ),
+  );
+
+  protected _itemSelected(event: KeyboardEvent) {
+    event.preventDefault();
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Directive, input } from '@angular/core';
+import { BrnTabsTrigger } from '@spartan-ng/brain/tabs';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmTabsTrigger]',
+  hostDirectives: [
+    { directive: BrnTabsTrigger, inputs: ['brnTabsTrigger: hlmTabsTrigger', 'disabled'] },
+  ],
+  host: {
+    'data-slot': 'tabs-trigger',
+  },
+})
+export class HlmTabsTrigger {
+  public readonly triggerFor = input.required<string>({ alias: 'hlmTabsTrigger' });
+  constructor() {
+    classes(() => [
+      `gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0`,
+      'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+      'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+      'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+    ]);
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Directive, input } from '@angular/core';
+import { BrnTabs } from '@spartan-ng/brain/tabs';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmTabs],hlm-tabs',
+  hostDirectives: [
+    {
+      directive: BrnTabs,
+      inputs: ['orientation', 'activationMode', 'brnTabs: tab'],
+      outputs: ['tabActivated'],
+    },
+  ],
+  host: {
+    'data-slot': 'tabs',
+  },
+})
+export class HlmTabs {
+  public readonly tab = input.required<string>();
+
+  constructor() {
+    classes(() => 'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col');
+  }
+}

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

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

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

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnTextarea } from '@spartan-ng/brain/textarea';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmTextarea]',
+  hostDirectives: [
+    { directive: BrnTextarea, inputs: ['id', 'forceInvalid'] },
+    BrnFieldControlDescribedBy,
+  ],
+  host: { 'data-slot': 'textarea' },
+})
+export class HlmTextarea {
+  constructor() {
+    classes(
+      () =>
+        'border-input dark:bg-input/30 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 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/theme-switcher/theme-switcher.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { HlmSwitchImports } from '@blueprint-platform/ui/switch';
+import { ThemeService } from '../../../core/theme/theme.service';
+
+/**
+ * Light/dark toggle, wrapping spartan's `hlm-switch` primitive. Pure and
+ * reusable — it does not decide whether it should render (the call site gates
+ * visibility via `BLUEPRINT_CONFIG.showThemeSwitcher`). Reads/writes the shared
+ * `ThemeService`, which owns the `dark` class on `<html>` and its persistence.
+ */
+@Component({
+  selector: 'app-theme-switcher',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [HlmSwitchImports],
+  template: `
+    <div class="flex items-center gap-2 text-sm">
+      <span>Dark mode</span>
+      <hlm-switch
+        class="ms-auto"
+        [checked]="theme.dark()"
+        (checkedChange)="theme.setDark($event)"
+        aria-label="Toggle dark mode"
+      />
+    </div>
+  `,
+})
+export class ThemeSwitcher {
+  protected readonly theme = inject(ThemeService);
+}

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

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

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

@@ -0,0 +1,52 @@
+import { Directive, input } from '@angular/core';
+import { BrnToggle } from '@spartan-ng/brain/toggle';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const toggleVariants = cva(
+  "hover:text-foreground aria-pressed:bg-muted 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 data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-input hover:bg-muted border bg-transparent',
+      },
+      size: {
+        default: 'h-8 min-w-8 px-2.5',
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+        lg: 'h-9 min-w-9 px-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+@Directive({
+  selector: 'button[hlmToggle]',
+  hostDirectives: [
+    {
+      directive: BrnToggle,
+      inputs: ['id', 'value', 'disabled', 'state', 'aria-label', 'type'],
+      outputs: ['stateChange'],
+    },
+  ],
+  host: {
+    'data-slot': 'toggle',
+  },
+})
+export class HlmToggle {
+  public readonly variant = input<ToggleVariants['variant']>('default');
+  public readonly size = input<ToggleVariants['size']>('default');
+  constructor() {
+    classes(() =>
+      toggleVariants({
+        variant: this.variant(),
+        size: this.size(),
+      }),
+    );
+  }
+}

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

@@ -0,0 +1,8 @@
+import { HlmToggleGroup } from './lib/hlm-toggle-group';
+import { HlmToggleGroupItem } from './lib/hlm-toggle-group-item';
+
+export * from './lib/hlm-toggle-group';
+export * from './lib/hlm-toggle-group-item';
+export * from './lib/hlm-toggle-group.token';
+
+export const HlmToggleGroupImports = [HlmToggleGroup, HlmToggleGroupItem] as const;