@blueprint-platform/components 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,41 @@
+import { computed, Directive, input } from '@angular/core';
+import { BrnToggleGroupItem } from '@spartan-ng/brain/toggle-group';
+import { toggleVariants, ToggleVariants } from '@blueprint-platform/ui/toggle';
+import { classes } from '@blueprint-platform/ui/utils';
+import { injectHlmToggleGroup } from './hlm-toggle-group.token';
+
+@Directive({
+  selector: 'button[hlmToggleGroupItem]',
+  hostDirectives: [
+    {
+      directive: BrnToggleGroupItem,
+      inputs: ['id', 'value', 'disabled', 'state', 'aria-label', 'type'],
+      outputs: ['stateChange'],
+    },
+  ],
+  host: {
+    'data-slot': 'toggle-group-item',
+    '[attr.data-variant]': '_variant()',
+    '[attr.data-size]': '_size()',
+    '[attr.data-spacing]': '_toggleGroup.spacing()',
+  },
+})
+export class HlmToggleGroupItem {
+  protected readonly _toggleGroup = injectHlmToggleGroup();
+
+  public readonly variant = input<ToggleVariants['variant']>('default');
+  public readonly size = input<ToggleVariants['size']>('default');
+
+  protected readonly _variant = computed(() => this._toggleGroup.variant() || this.variant());
+  protected readonly _size = computed(() => this._toggleGroup.size() || this.size());
+
+  constructor() {
+    classes(() => [
+      'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+      toggleVariants({
+        variant: this._variant(),
+        size: this._size(),
+      }),
+    ]);
+  }
+}

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

@@ -0,0 +1,12 @@
+import { type ExistingProvider, InjectionToken, type Type, inject } from '@angular/core';
+import type { HlmToggleGroup } from './hlm-toggle-group';
+
+export const HlmToggleGroupToken = new InjectionToken<HlmToggleGroup>('HlmToggleGroupToken');
+
+export function injectHlmToggleGroup(): HlmToggleGroup {
+  return inject(HlmToggleGroupToken);
+}
+
+export function provideHlmToggleGroup(toggleGroup: Type<HlmToggleGroup>): ExistingProvider {
+  return { provide: HlmToggleGroupToken, useExisting: toggleGroup };
+}

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

@@ -0,0 +1,39 @@
+import { NumberInput } from '@angular/cdk/coercion';
+import { Directive, input, numberAttribute } from '@angular/core';
+import { BrnToggleGroup } from '@spartan-ng/brain/toggle-group';
+import { ToggleVariants } from '@blueprint-platform/ui/toggle';
+import { classes } from '@blueprint-platform/ui/utils';
+import { provideHlmToggleGroup } from './hlm-toggle-group.token';
+
+@Directive({
+  selector: '[hlmToggleGroup],hlm-toggle-group',
+  providers: [provideHlmToggleGroup(HlmToggleGroup)],
+  hostDirectives: [
+    {
+      directive: BrnToggleGroup,
+      inputs: ['type', 'value', 'nullable', 'disabled'],
+      outputs: ['valueChange'],
+    },
+  ],
+  host: {
+    'data-slot': 'toggle-group',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-size]': 'size()',
+    '[attr.data-spacing]': 'spacing()',
+    '[attr.data-orientation]': 'orientation()',
+    '[style.--gap]': 'spacing()',
+  },
+})
+export class HlmToggleGroup {
+  public readonly variant = input<ToggleVariants['variant']>('default');
+  public readonly size = input<ToggleVariants['size']>('default');
+  public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
+  public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+
+  constructor() {
+    classes(
+      () =>
+        'rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
+    );
+  }
+}

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

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

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

@@ -0,0 +1,44 @@
+import { Directive } from '@angular/core';
+import {
+  BrnTooltip,
+  BrnTooltipPosition,
+  provideBrnTooltipDefaultOptions,
+} from '@spartan-ng/brain/tooltip';
+import { hlm } from '@blueprint-platform/ui/utils';
+import { cva } from 'class-variance-authority';
+
+export const DEFAULT_TOOLTIP_SVG_CLASS =
+  'bg-foreground fill-foreground z-50 block size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]';
+
+export const DEFAULT_TOOLTIP_CONTENT_CLASSES = hlm(
+  'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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 rounded-md px-3 py-1.5 text-xs bg-foreground text-background data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance',
+);
+
+export const tooltipPositionVariants = cva('absolute', {
+  variants: {
+    position: {
+      top: 'bottom-0 left-[calc(50%-5px)] translate-y-full',
+      bottom: '-top-2.5 left-[calc(50%-5px)] translate-y-0 rotate-180',
+      left: '-end-2.5 top-[calc(50%-5px)] translate-y-0 rotate-270 rtl:-rotate-270',
+      right: '-start-2.5 top-[calc(50%-5px)] translate-y-0 rotate-90 rtl:-rotate-90',
+    },
+  },
+});
+
+@Directive({
+  selector: '[hlmTooltip]',
+  providers: [
+    provideBrnTooltipDefaultOptions({
+      svgClasses: DEFAULT_TOOLTIP_SVG_CLASS,
+      tooltipContentClasses: DEFAULT_TOOLTIP_CONTENT_CLASSES,
+      arrowClasses: (position: BrnTooltipPosition) => hlm(tooltipPositionVariants({ position })),
+    }),
+  ],
+  hostDirectives: [
+    {
+      directive: BrnTooltip,
+      inputs: ['brnTooltip: hlmTooltip', 'position', 'hideDelay', 'showDelay', 'tooltipDisabled'],
+    },
+  ],
+})
+export class HlmTooltip {}

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

@@ -0,0 +1,40 @@
+import { HlmBlockquote } from './lib/hlm-blockquote';
+import { HlmCode } from './lib/hlm-code';
+import { HlmH1 } from './lib/hlm-h1';
+import { HlmH2 } from './lib/hlm-h2';
+import { HlmH3 } from './lib/hlm-h3';
+import { HlmH4 } from './lib/hlm-h4';
+import { HlmLarge } from './lib/hlm-large';
+import { HlmLead } from './lib/hlm-lead';
+import { HlmMuted } from './lib/hlm-muted';
+import { HlmP } from './lib/hlm-p';
+import { HlmSmall } from './lib/hlm-small';
+import { HlmUl } from './lib/hlm-ul';
+
+export * from './lib/hlm-blockquote';
+export * from './lib/hlm-code';
+export * from './lib/hlm-h1';
+export * from './lib/hlm-h2';
+export * from './lib/hlm-h3';
+export * from './lib/hlm-h4';
+export * from './lib/hlm-large';
+export * from './lib/hlm-lead';
+export * from './lib/hlm-muted';
+export * from './lib/hlm-p';
+export * from './lib/hlm-small';
+export * from './lib/hlm-ul';
+
+export const HlmTypographyImports = [
+  HlmBlockquote,
+  HlmCode,
+  HlmH1,
+  HlmH2,
+  HlmH3,
+  HlmH4,
+  HlmLarge,
+  HlmLead,
+  HlmMuted,
+  HlmP,
+  HlmSmall,
+  HlmUl,
+];

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmBlockquote = 'mt-6 border-border border-l-2 pl-6 italic';
+
+@Directive({
+  selector: '[hlmBlockquote]',
+})
+export class HlmBlockquote {
+  constructor() {
+    classes(() => hlmBlockquote);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmCode =
+  'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold';
+
+@Directive({
+  selector: '[hlmCode]',
+})
+export class HlmCode {
+  constructor() {
+    classes(() => hlmCode);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmH1 = 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl';
+
+@Directive({
+  selector: '[hlmH1]',
+})
+export class HlmH1 {
+  constructor() {
+    classes(() => hlmH1);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmH2 =
+  'scroll-m-20 border-border border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0';
+
+@Directive({
+  selector: '[hlmH2]',
+})
+export class HlmH2 {
+  constructor() {
+    classes(() => hlmH2);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmH3 = 'scroll-m-20 text-2xl font-semibold tracking-tight';
+
+@Directive({
+  selector: '[hlmH3]',
+})
+export class HlmH3 {
+  constructor() {
+    classes(() => hlmH3);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmH4 = 'scroll-m-20 text-xl font-semibold tracking-tight';
+
+@Directive({
+  selector: '[hlmH4]',
+})
+export class HlmH4 {
+  constructor() {
+    classes(() => hlmH4);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmLarge = 'text-lg font-semibold';
+
+@Directive({
+  selector: '[hlmLarge]',
+})
+export class HlmLarge {
+  constructor() {
+    classes(() => hlmLarge);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmLead = 'text-xl text-muted-foreground';
+
+@Directive({
+  selector: '[hlmLead]',
+})
+export class HlmLead {
+  constructor() {
+    classes(() => hlmLead);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmMuted = 'text-sm text-muted-foreground';
+
+@Directive({
+  selector: '[hlmMuted]',
+})
+export class HlmMuted {
+  constructor() {
+    classes(() => hlmMuted);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmP = 'leading-7 [&:not(:first-child)]:mt-6';
+
+@Directive({
+  selector: '[hlmP]',
+})
+export class HlmP {
+  constructor() {
+    classes(() => hlmP);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmSmall = 'text-sm font-medium leading-none';
+
+@Directive({
+  selector: '[hlmSmall]',
+})
+export class HlmSmall {
+  constructor() {
+    classes(() => hlmSmall);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+export const hlmUl = 'my-6 ml-6 list-disc [&>li]:mt-2';
+
+@Directive({
+  selector: '[hlmUl]',
+})
+export class HlmUl {
+  constructor() {
+    classes(() => hlmUl);
+  }
+}

package/dist/generators/ui/files/shared/ui/user-menu/user-menu.html

@@ -0,0 +1,64 @@
+<button
+  type="button"
+  class="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex w-full items-center gap-2 rounded-md text-start text-sm outline-none focus-visible:ring-2"
+  [hlmDropdownMenuTrigger]="menu"
+  align="end"
+  side="top"
+>
+  <hlm-avatar class="size-8 rounded-lg">
+    <span hlmAvatarFallback>{{ user.initials }}</span>
+  </hlm-avatar>
+  <span class="grid flex-1 leading-tight group-data-[collapsible=icon]:hidden">
+    <span class="truncate font-semibold">{{ user.name }}</span>
+    <span class="text-muted-foreground truncate text-xs">{{ user.email }}</span>
+  </span>
+  <ng-icon
+    name="lucideChevronsUpDown"
+    class="ms-auto size-4 group-data-[collapsible=icon]:hidden"
+  />
+</button>
+
+<ng-template #menu>
+  <hlm-dropdown-menu class="w-60">
+    <div hlmDropdownMenuLabel class="font-normal">
+      <div class="flex items-center gap-2 px-1 py-1.5">
+        <hlm-avatar class="size-8 rounded-lg">
+          <span hlmAvatarFallback>{{ user.initials }}</span>
+        </hlm-avatar>
+        <div class="grid flex-1 leading-tight">
+          <span class="truncate text-sm font-semibold">{{ user.name }}</span>
+          <span class="text-muted-foreground truncate text-xs">{{ user.email }}</span>
+        </div>
+      </div>
+    </div>
+
+    @if (config.showThemeSwitcher || config.showLanguageSwitcher) {
+      <hlm-dropdown-menu-separator />
+      @if (config.showThemeSwitcher) {
+        <div class="px-2 py-1.5" (click)="$event.stopPropagation()">
+          <app-theme-switcher />
+        </div>
+      }
+      @if (config.showLanguageSwitcher) {
+        <div class="px-2 py-1.5" (click)="$event.stopPropagation()">
+          <app-language-switcher />
+        </div>
+      }
+    }
+
+    <hlm-dropdown-menu-separator />
+    <button hlmDropdownMenuItem>
+      <ng-icon name="lucideUser" />
+      Profile
+    </button>
+    <button hlmDropdownMenuItem>
+      <ng-icon name="lucideSettings" />
+      Settings
+    </button>
+    <hlm-dropdown-menu-separator />
+    <button hlmDropdownMenuItem>
+      <ng-icon name="lucideLogOut" />
+      Log out
+    </button>
+  </hlm-dropdown-menu>
+</ng-template>

package/dist/generators/ui/files/shared/ui/user-menu/user-menu.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/generators/ui/files/shared/ui/user-menu/user-menu.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronsUpDown, lucideLogOut, lucideSettings, lucideUser } from '@ng-icons/lucide';
+import { HlmDropdownMenuImports } from '@blueprint-platform/ui/dropdown-menu';
+import { HlmAvatarImports } from '@blueprint-platform/ui/avatar';
+import { BLUEPRINT_CONFIG } from '../../../core/config/template-config';
+import { ThemeSwitcher } from '../theme-switcher/theme-switcher';
+import { LanguageSwitcher } from '../language-switcher/language-switcher';
+
+/**
+ * The one account dropdown, used in every layout (in the sidebar footer for
+ * `sidebar` / `floating` / `inset`, in the top bar for `topbar`). Identical
+ * component in all four placements — only the parent container differs.
+ *
+ * Placeholder items (Profile / Settings / Log out) plus the theme and language
+ * switchers, each rendered only when enabled in `BLUEPRINT_CONFIG`.
+ */
+@Component({
+  selector: 'app-user-menu',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIcon, HlmDropdownMenuImports, HlmAvatarImports, ThemeSwitcher, LanguageSwitcher],
+  providers: [provideIcons({ lucideChevronsUpDown, lucideUser, lucideSettings, lucideLogOut })],
+  host: { class: 'block' },
+  templateUrl: './user-menu.html',
+  styleUrl: './user-menu.scss',
+})
+export class UserMenu {
+  protected readonly config = inject(BLUEPRINT_CONFIG);
+  protected readonly user = { name: 'Dev User', email: 'dev@local', initials: 'DU' };
+}

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

@@ -0,0 +1,2 @@
+export * from './lib/hlm';
+export * from './lib/provide-spartan-hlm';