@blueprint-platform/components 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { BrnAvatar } from '@spartan-ng/brain/avatar';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-avatar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'avatar',
+    '[attr.data-size]': 'size()',
+  },
+  template: `
+    @if (status() === 'loaded') {
+      <ng-content select="[hlmAvatarImage],[brnAvatarImage]" />
+    } @else {
+      <ng-content select="[hlmAvatarFallback],[brnAvatarFallback]" />
+    }
+    <ng-content />
+  `,
+})
+export class HlmAvatar extends BrnAvatar {
+  public readonly size = input<'default' | 'sm' | 'lg'>('default');
+
+  constructor() {
+    super();
+    classes(
+      () =>
+        'size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 group/avatar after:border-border relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten',
+    );
+  }
+}

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

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

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

@@ -0,0 +1,40 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+const badgeVariants = cva(
+  'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>ng-icon]:text-[length:--spacing(3)] group/badge focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:ring-[3px] [&>ng-icon]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+@Directive({
+  selector: '[hlmBadge],hlm-badge',
+  host: {
+    'data-slot': 'badge',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class HlmBadge {
+  public readonly variant = input<BadgeVariants['variant']>('default');
+
+  constructor() {
+    classes(() => badgeVariants({ variant: this.variant() }));
+  }
+}

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

@@ -0,0 +1,25 @@
+import { HlmBreadcrumb } from './lib/hlm-breadcrumb';
+import { HlmBreadcrumbEllipsis } from './lib/hlm-breadcrumb-ellipsis';
+import { HlmBreadcrumbItem } from './lib/hlm-breadcrumb-item';
+import { HlmBreadcrumbLink } from './lib/hlm-breadcrumb-link';
+import { HlmBreadcrumbList } from './lib/hlm-breadcrumb-list';
+import { HlmBreadcrumbPage } from './lib/hlm-breadcrumb-page';
+import { HlmBreadcrumbSeparator } from './lib/hlm-breadcrumb-separator';
+
+export * from './lib/hlm-breadcrumb';
+export * from './lib/hlm-breadcrumb-ellipsis';
+export * from './lib/hlm-breadcrumb-item';
+export * from './lib/hlm-breadcrumb-link';
+export * from './lib/hlm-breadcrumb-list';
+export * from './lib/hlm-breadcrumb-page';
+export * from './lib/hlm-breadcrumb-separator';
+
+export const HlmBreadcrumbImports = [
+  HlmBreadcrumb,
+  HlmBreadcrumbEllipsis,
+  HlmBreadcrumbSeparator,
+  HlmBreadcrumbItem,
+  HlmBreadcrumbLink,
+  HlmBreadcrumbPage,
+  HlmBreadcrumbList,
+] as const;

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

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideEllipsis } from '@ng-icons/lucide';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-breadcrumb-ellipsis',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideEllipsis })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'breadcrumb-ellipsis',
+    role: 'presentation',
+  },
+  template: `
+    <ng-icon name="lucideEllipsis" />
+    <span class="sr-only">{{ srOnlyText() }}</span>
+  `,
+})
+export class HlmBreadcrumbEllipsis {
+  /** Screen reader only text for the ellipsis */
+  public readonly srOnlyText = input<string>('More');
+
+  constructor() {
+    classes(() => 'size-5 [&>ng-icon]:text-[length:--spacing(4)] flex items-center justify-center');
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmBreadcrumbItem]',
+  host: {
+    'data-slot': 'breadcrumb-item',
+  },
+})
+export class HlmBreadcrumbItem {
+  constructor() {
+    classes(() => 'gap-1 inline-flex items-center');
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmBreadcrumbLink]',
+  hostDirectives: [
+    {
+      directive: RouterLink,
+      inputs: [
+        'target',
+        'queryParams',
+        'fragment',
+        'queryParamsHandling',
+        'state',
+        'info',
+        'relativeTo',
+        'preserveFragment',
+        'skipLocationChange',
+        'replaceUrl',
+        'routerLink: link',
+      ],
+    },
+  ],
+  host: {
+    'data-slot': 'breadcrumb-link',
+  },
+})
+export class HlmBreadcrumbLink {
+  /** The link to navigate to the page. */
+  public readonly link = input<RouterLink['routerLink']>();
+
+  constructor() {
+    classes(() => 'hover:text-foreground transition-colors');
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmBreadcrumbList]',
+  host: {
+    'data-slot': 'breadcrumb-list',
+  },
+})
+export class HlmBreadcrumbList {
+  constructor() {
+    classes(
+      () => 'text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word',
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmBreadcrumbPage]',
+  host: {
+    'data-slot': 'breadcrumb-page',
+    role: 'link',
+    'aria-disabled': 'true',
+    'aria-current': 'page',
+  },
+})
+export class HlmBreadcrumbPage {
+  constructor() {
+    classes(() => 'text-foreground font-normal');
+  }
+}

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

@@ -0,0 +1,27 @@
+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({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[hlmBreadcrumbSeparator]',
+  imports: [NgIcon],
+  providers: [provideIcons({ lucideChevronRight })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'data-slot': 'breadcrumb-separator',
+    role: 'presentation',
+    'aria-hidden': 'true',
+  },
+  template: `
+    <ng-content>
+      <ng-icon name="lucideChevronRight" />
+    </ng-content>
+  `,
+})
+export class HlmBreadcrumbSeparator {
+  constructor() {
+    classes(() => '[&>ng-icon]:text-[length:--spacing(3.5)] [&>ng-icon]:flex');
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive, input } from '@angular/core';
+
+@Directive({
+  selector: '[hlmBreadcrumb]',
+  host: {
+    'data-slot': 'breadcrumb',
+    role: 'navigation',
+    '[attr.aria-label]': 'ariaLabel()',
+  },
+})
+export class HlmBreadcrumb {
+  public readonly ariaLabel = input<string>('breadcrumb', { alias: 'aria-label' });
+}

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

@@ -0,0 +1,16 @@
+import { HlmBubble } from './lib/hlm-bubble';
+import { HlmBubbleContent } from './lib/hlm-bubble-content';
+import { HlmBubbleGroup } from './lib/hlm-bubble-group';
+import { HlmBubbleReactions } from './lib/hlm-bubble-reactions';
+
+export * from './lib/hlm-bubble';
+export * from './lib/hlm-bubble-content';
+export * from './lib/hlm-bubble-group';
+export * from './lib/hlm-bubble-reactions';
+
+export const HlmBubbleImports = [
+  HlmBubble,
+  HlmBubbleContent,
+  HlmBubbleGroup,
+  HlmBubbleReactions,
+] as const;

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

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmBubbleContent],hlm-bubble-content',
+  host: { 'data-slot': 'bubble-content' },
+})
+export class HlmBubbleContent {
+  constructor() {
+    classes(
+      () =>
+        'rounded-xl px-3 py-2 text-sm leading-relaxed [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-ring/50 w-fit max-w-full min-w-0 overflow-hidden border border-transparent wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-start [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:ring-3',
+    );
+  }
+}

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

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmBubbleGroup],hlm-bubble-group',
+  host: { 'data-slot': 'bubble-group' },
+})
+export class HlmBubbleGroup {
+  constructor() {
+    classes(() => 'gap-2 flex min-w-0 flex-col');
+  }
+}

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

@@ -0,0 +1,43 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const bubbleReactionsVariants = cva(
+  'bg-muted ring-card gap-1 rounded-full px-1.5 py-0.5 text-xs ring-3 absolute z-10 flex w-fit shrink-0 items-center justify-center has-[button]:p-0',
+  {
+    variants: {
+      side: {
+        top: 'top-0 -translate-y-3/4',
+        bottom: 'bottom-0 translate-y-3/4',
+      },
+      align: {
+        start: 'start-3',
+        end: 'end-3',
+      },
+    },
+    defaultVariants: {
+      side: 'bottom',
+      align: 'end',
+    },
+  },
+);
+
+export type BubbleReactionsVariants = VariantProps<typeof bubbleReactionsVariants>;
+
+@Directive({
+  selector: '[hlmBubbleReactions],hlm-bubble-reactions',
+  host: {
+    'data-slot': 'bubble-reactions',
+    '[attr.data-align]': 'align()',
+    '[attr.data-side]': 'side()',
+    '[attr.align]': 'null',
+  },
+})
+export class HlmBubbleReactions {
+  public readonly side = input<BubbleReactionsVariants['side']>('bottom');
+  public readonly align = input<BubbleReactionsVariants['align']>('end');
+
+  constructor() {
+    classes(() => bubbleReactionsVariants({ side: this.side(), align: this.align() }));
+  }
+}

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

@@ -0,0 +1,53 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const bubbleVariants = cva(
+  'max-w-[80%] gap-1 group/bubble relative flex w-fit min-w-0 flex-col group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',
+  {
+    variants: {
+      variant: {
+        default:
+          '*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80',
+        secondary:
+          '*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-secondary/80',
+        muted:
+          '*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]',
+        tinted:
+          '*:data-[slot=bubble-content]:text-foreground *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]',
+        outline:
+          '*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30 *:data-[slot=bubble-content]:border',
+        ghost:
+          '[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0',
+        destructive:
+          '*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type BubbleVariants = VariantProps<typeof bubbleVariants>;
+export type BubbleAlign = 'start' | 'end';
+
+@Directive({
+  selector: '[hlmBubble],hlm-bubble',
+  host: {
+    'data-slot': 'bubble',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-align]': 'align()',
+    // Prevent the legacy HTML `align` attribute (from `align="end"` bindings) from
+    // forcing text-align on the bubble content.
+    '[attr.align]': 'null',
+  },
+})
+export class HlmBubble {
+  public readonly variant = input<BubbleVariants['variant']>('default');
+  public readonly align = input<BubbleAlign>('start');
+
+  constructor() {
+    classes(() => bubbleVariants({ variant: this.variant() }));
+  }
+}

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

@@ -0,0 +1,6 @@
+import { HlmButton } from './lib/hlm-button';
+
+export * from './lib/hlm-button';
+export * from './lib/hlm-button.token';
+
+export const HlmButtonImports = [HlmButton] as const;

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

@@ -0,0 +1,22 @@
+import { InjectionToken, type ValueProvider, inject } from '@angular/core';
+import type { ButtonVariants } from './hlm-button';
+
+export interface BrnButtonConfig {
+  variant: ButtonVariants['variant'];
+  size: ButtonVariants['size'];
+}
+
+const defaultConfig: BrnButtonConfig = {
+  variant: 'default',
+  size: 'default',
+};
+
+const BrnButtonConfigToken = new InjectionToken<BrnButtonConfig>('BrnButtonConfig');
+
+export function provideBrnButtonConfig(config: Partial<BrnButtonConfig>): ValueProvider {
+  return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectBrnButtonConfig(): BrnButtonConfig {
+  return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig;
+}

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

@@ -0,0 +1,72 @@
+import { Directive, input, signal } from '@angular/core';
+import { BrnButton } from '@spartan-ng/brain/button';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
+import { injectBrnButtonConfig } from './hlm-button.token';
+
+export const buttonVariants = cva(
+  "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 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-3 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)]",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)]",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+@Directive({
+  selector: 'button[hlmBtn], a[hlmBtn]',
+  exportAs: 'hlmBtn',
+  hostDirectives: [{ directive: BrnButton, inputs: ['disabled'] }],
+  host: { 'data-slot': 'button' },
+})
+export class HlmButton {
+  private readonly _config = injectBrnButtonConfig();
+
+  private readonly _additionalClasses = signal<ClassValue>('');
+
+  public readonly variant = input<ButtonVariants['variant']>(this._config.variant);
+
+  public readonly size = input<ButtonVariants['size']>(this._config.size);
+
+  constructor() {
+    classes(() => [
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      this._additionalClasses(),
+    ]);
+  }
+
+  setClass(classes: string): void {
+    this._additionalClasses.set(classes);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { HlmButtonGroup } from './lib/hlm-button-group';
+import { HlmButtonGroupSeparator } from './lib/hlm-button-group-separator';
+import { HlmButtonGroupText } from './lib/hlm-button-group-text';
+
+export * from './lib/hlm-button-group';
+export * from './lib/hlm-button-group-separator';
+export * from './lib/hlm-button-group-text';
+
+export const HlmButtonGroupImports = [
+  HlmButtonGroup,
+  HlmButtonGroupText,
+  HlmButtonGroupSeparator,
+] as const;

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

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnSeparator, provideBrnSeparatorConfig } from '@spartan-ng/brain/separator';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmButtonGroupSeparator],hlm-button-group-separator',
+  providers: [provideBrnSeparatorConfig({ orientation: 'vertical' })],
+  hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+  host: {
+    'data-slot': 'button-group-separator',
+  },
+})
+export class HlmButtonGroupSeparator {
+  constructor() {
+    classes(() => [
+      'bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
+      // separator classes
+      'shrink-0 data-horizontal:h-px data-vertical:w-px data-vertical:self-stretch',
+    ]);
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmButtonGroupText],hlm-button-group-text',
+  host: {
+    'data-slot': 'button-group-text',
+  },
+})
+export class HlmButtonGroupText {
+  constructor() {
+    classes(
+      () =>
+        "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] flex items-center [&_ng-icon]:pointer-events-none",
+    );
+  }
+}

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

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva } from 'class-variance-authority';
+
+const buttonGroupVariants = cva(
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none',
+        vertical:
+          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+@Directive({
+  selector: '[hlmButtonGroup],hlm-button-group',
+  host: {
+    'data-slot': 'button-group',
+    role: 'group',
+    '[attr.data-orientation]': 'orientation()',
+  },
+})
+export class HlmButtonGroup {
+  constructor() {
+    classes(() => buttonGroupVariants({ orientation: this.orientation() }));
+  }
+
+  public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+}

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

@@ -0,0 +1,16 @@
+import { HlmCalendar } from './lib/hlm-calendar';
+import { HlmCalendarMulti } from './lib/hlm-calendar-multi';
+import { HlmCalendarRange } from './lib/hlm-calendar-range';
+import { HlmMonthYearCalendar } from './lib/hlm-month-year-calendar';
+
+export * from './lib/hlm-calendar';
+export * from './lib/hlm-calendar-multi';
+export * from './lib/hlm-calendar-range';
+export * from './lib/hlm-month-year-calendar';
+
+export const HlmCalendarImports = [
+  HlmCalendar,
+  HlmCalendarMulti,
+  HlmCalendarRange,
+  HlmMonthYearCalendar,
+] as const;