kbd

kbd.component.ts

import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
 
import type { ClassValue } from 'clsx';
 
import { mergeClasses } from '@/shared/utils/merge-classes';
 
import { kbdVariants } from './kbd.variants';
 
@Component({
  selector: 'z-kbd, [z-kbd]',
  standalone: true,
  template: `
    <kbd><ng-content /></kbd>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    '[class]': 'classes()',
  },
  exportAs: 'zKbd',
})
export class ZardKbdComponent {
  readonly class = input<ClassValue>('');
 
  protected readonly classes = computed(() => mergeClasses(kbdVariants(), this.class()));
}
 

kbd.variants.ts

import { cva } from 'class-variance-authority';
 
export const kbdVariants = cva(
  `min-w-5 w-fit h-5 inline-flex items-center justify-center gap-1 text-xs font-medium font-mono bg-muted text-muted-foreground pointer-events-none rounded-sm px-1 select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10`,
);
 
export const kbdGroupVariants = cva(`inline-flex items-center gap-1`);
 

index.ts

export * from './kbd.component';
export * from './kbd-group.component';
export * from './kbd.variants';
 

kbd-group.component.ts

import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
 
import { type ClassValue } from 'clsx';
 
import { mergeClasses } from '@/shared/utils/merge-classes';
 
import { kbdGroupVariants } from './kbd.variants';
 
@Component({
  selector: 'z-kbd-group, [z-kbd-group]',
  standalone: true,
  template: `
    <ng-content />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    '[class]': 'classes()',
  },
  exportAs: 'zKbdGroup',
})
export class ZardKbdGroupComponent {
  readonly class = input<ClassValue>('');
 
  protected readonly classes = computed(() => mergeClasses(kbdGroupVariants(), this.class()));
}