{
  "name": "kbd",
  "type": "registry:component",
  "files": [
    {
      "name": "kbd.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport { kbdVariants } from './kbd.variants';\n\n@Component({\n  selector: 'z-kbd, [z-kbd]',\n  template: `\n    <kbd data-slot=\"kbd\" [class]=\"classes()\"><ng-content /></kbd>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zKbd',\n})\nexport class ZardKbdComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(kbdVariants(), this.class()));\n}\n"
    },
    {
      "name": "kbd-group.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport { type ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport { kbdGroupVariants } from './kbd.variants';\n\n@Component({\n  selector: 'z-kbd-group, [z-kbd-group]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    'data-slot': 'kbd-group',\n  },\n  exportAs: 'zKbdGroup',\n})\nexport class ZardKbdGroupComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(kbdGroupVariants(), this.class()));\n}\n"
    },
    {
      "name": "kbd.variants.ts",
      "content": "import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n  `pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3`,\n);\n\nexport const kbdGroupVariants = cva(`inline-flex items-center gap-1`);\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './kbd.component';\nexport * from './kbd-group.component';\nexport * from './kbd.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "button.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCornerDownLeft } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button';\nimport { ZardKbdComponent } from '@/shared/components/kbd/kbd.component';\n\n@Component({\n  selector: 'z-demo-kbd-button',\n  imports: [NgIcon, ZardKbdComponent, ZardButtonComponent],\n  template: `\n    <div class=\"flex flex-col items-center justify-center gap-4\">\n      <button type=\"submit\" z-button zType=\"outline\">\n        Accept\n        <z-kbd>\n          <ng-icon name=\"lucideCornerDownLeft\" strokeWidth=\"3\" />\n        </z-kbd>\n      </button>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideCornerDownLeft })],\n})\nexport class ZardDemoKbdButtonComponent {}\n"
    },
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardKbdGroupComponent } from '@/shared/components/kbd/kbd-group.component';\nimport { ZardKbdComponent } from '@/shared/components/kbd/kbd.component';\n\n@Component({\n  selector: 'z-demo-kbd-default',\n  imports: [ZardKbdComponent, ZardKbdGroupComponent],\n  template: `\n    <div class=\"flex flex-col items-center justify-center gap-4\">\n      <z-kbd-group>\n        <z-kbd>⌘</z-kbd>\n        <z-kbd>⇧</z-kbd>\n        <z-kbd>⌥</z-kbd>\n        <z-kbd>⌃</z-kbd>\n      </z-kbd-group>\n      <z-kbd-group>\n        <z-kbd>Ctrl</z-kbd>\n        <span>+</span>\n        <z-kbd>B</z-kbd>\n      </z-kbd-group>\n    </div>\n  `,\n})\nexport class ZardDemoKbdDefaultComponent {}\n"
    },
    {
      "name": "group.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardKbdGroupComponent } from '../kbd-group.component';\nimport { ZardKbdComponent } from '../kbd.component';\n\n@Component({\n  selector: 'z-demo-kbd-group',\n  imports: [ZardKbdGroupComponent, ZardKbdComponent],\n  template: `\n    <z-kbd-group class=\"text-muted-foreground text-sm\">\n      Use\n      <z-kbd>Ctrl + B</z-kbd>\n      <z-kbd>Ctrl + K</z-kbd>\n      to open command palette\n    </z-kbd-group>\n  `,\n})\nexport class ZardDemoKbdGroupComponent {}\n"
    },
    {
      "name": "tooltip.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group';\nimport { ZardKbdGroupComponent } from '@/shared/components/kbd/kbd-group.component';\nimport { ZardKbdComponent } from '@/shared/components/kbd/kbd.component';\nimport { ZardTooltipDirective } from '@/shared/components/tooltip';\n\n@Component({\n  selector: 'z-demo-kbd-tooltip',\n  imports: [\n    ZardButtonComponent,\n    ZardButtonGroupComponent,\n    ZardTooltipDirective,\n    ZardKbdGroupComponent,\n    ZardKbdComponent,\n  ],\n  template: `\n    <z-button-group>\n      <button type=\"button\" z-button zType=\"outline\" [zTooltip]=\"saveTip\">Save</button>\n      <button type=\"button\" z-button zType=\"outline\" [zTooltip]=\"printTip\">Print</button>\n    </z-button-group>\n\n    <ng-template #saveTip>\n      Save changes\n      <z-kbd>S</z-kbd>\n    </ng-template>\n\n    <ng-template #printTip>\n      Print document\n      <z-kbd-group>\n        <z-kbd>Ctrl</z-kbd>\n        <z-kbd>P</z-kbd>\n      </z-kbd-group>\n    </ng-template>\n  `,\n})\nexport class ZardDemoKbdTooltipComponent {}\n"
    }
  ]
}