📦 refactor(kbd): add keyboard group demo and button variant showcase

apps/web/public/r/kbd.json

@@ -4,33 +4,37 @@
   "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  standalone: true,\n  template: `\n    <kbd><ng-content /></kbd>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n  },\n  exportAs: 'zKbd',\n})\nexport class ZardKbdComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(kbdVariants(), this.class()));\n}\n"
+      "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  standalone: true,\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\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"
+      "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  `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`,\n);\n\nexport const kbdGroupVariants = cva(`inline-flex items-center gap-1`);\n"
+      "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 { ZardButtonComponent } from '../../button/button.component';\nimport { ZardKbdComponent } from '../kbd.component';\n\n@Component({\n  selector: 'z-demo-kbd-default',\n  imports: [ZardKbdComponent, ZardButtonComponent],\n  standalone: true,\n  template: `\n    <div class=\"flex flex-col items-center justify-center gap-4\">\n      <div class=\"flex items-center gap-2\">\n        <z-kbd>Esc</z-kbd>\n        <z-kbd>⌘</z-kbd>\n        <z-kbd>Ctrl</z-kbd>\n      </div>\n\n      <button type=\"submit\" z-button zType=\"outline\">\n        Submit\n        <z-kbd class=\"ml-2\">Enter</z-kbd>\n      </button>\n    </div>\n  `,\n})\nexport class ZardDemoKbdDefaultComponent {}\n"
+      "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  standalone: true,\n  template: `\n    <z-kbd-group>\n      Use\n      <z-kbd>Ctrl + K</z-kbd>\n      or\n      <z-kbd>Ctrl + O</z-kbd>\n      to open menu\n    </z-kbd-group>\n  `,\n})\nexport class ZardDemoKbdGroupComponent {}\n"
+      "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 '../../button/button.component';\nimport { ZardTooltipDirective } from '../../tooltip/tooltip';\nimport { ZardKbdGroupComponent } from '../kbd-group.component';\nimport { ZardKbdComponent } from '../kbd.component';\n\n@Component({\n  selector: 'z-demo-kbd-tooltip',\n  imports: [ZardButtonComponent, ZardTooltipDirective, ZardKbdGroupComponent, ZardKbdComponent],\n  standalone: true,\n  template: `\n    <button type=\"button\" z-button [zTooltip]=\"shortcutTip\">Save</button>\n\n    <ng-template #shortcutTip>\n      Press\n      <z-kbd-group>\n        <z-kbd class=\"bg-blue-400 text-white\">Ctrl</z-kbd>\n        <span>+</span>\n        <z-kbd class=\"bg-blue-400 text-white\">S</z-kbd>\n      </z-kbd-group>\n      to save\n    </ng-template>\n  `,\n})\nexport class ZardDemoKbdTooltipComponent {}\n"
+      "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"
     }
   ]
 }

apps/web/src/generated/components/kbd/demo/button.ts

@@ -0,0 +1,10 @@
+import type { CodeBlockData } from '@highlight/types';
+
+export const KBD_DEMO_BUTTON: CodeBlockData = {
+  "html": "<pre class=\"shiki shiki-themes github-dark github-light\" style=\"--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">import</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\"> { Component } </span><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">from</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\"> '@angular/core'</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">import</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\"> { NgIcon, provideIcons } </span><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">from</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\"> '@ng-icons/core'</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">;</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">import</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\"> { lucideCornerDownLeft } </span><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">from</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\"> '@ng-icons/lucide'</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">import</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\"> { ZardButtonComponent } </span><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">from</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\"> '@/shared/components/button'</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">;</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">import</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\"> { ZardKbdComponent } </span><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">from</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\"> '@/shared/components/kbd/kbd.component'</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">@</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\">Component</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">({</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">  selector: </span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\">'z-demo-kbd-button'</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">,</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">  imports: [NgIcon, ZardKbdComponent, ZardButtonComponent],</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">  template: </span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\">`</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">    &#x3C;</span><span style=\"--shiki-dark:#85E89D;--shiki-light:#22863A\">div</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\"> class</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">=</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\">\"flex flex-col items-center justify-center gap-4\"</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">></span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">      &#x3C;</span><span style=\"--shiki-dark:#85E89D;--shiki-light:#22863A\">button</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\"> type</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">=</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\">\"submit\"</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\"> z-button</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\"> zType</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">=</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\">\"outline\"</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">></span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">        Accept</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">        &#x3C;</span><span style=\"--shiki-dark:#85E89D;--shiki-light:#22863A\">z-kbd</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">></span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">          &#x3C;</span><span style=\"--shiki-dark:#85E89D;--shiki-light:#22863A\">ng-icon</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\"> name</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">=</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\">\"lucideCornerDownLeft\"</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\"> strokeWidth</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">=</span><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\">\"3\"</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\"> /></span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">        &#x3C;/</span><span style=\"--shiki-dark:#85E89D;--shiki-light:#22863A\">z-kbd</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">></span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">      &#x3C;/</span><span style=\"--shiki-dark:#85E89D;--shiki-light:#22863A\">button</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">></span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">    &#x3C;/</span><span style=\"--shiki-dark:#85E89D;--shiki-light:#22863A\">div</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">></span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#9ECBFF;--shiki-light:#032F62\">  `</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">,</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">  viewProviders: [</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\">provideIcons</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">({ lucideCornerDownLeft })],</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\">})</span></span>\n<span class=\"line\"><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\">export</span><span style=\"--shiki-dark:#F97583;--shiki-light:#D73A49\"> class</span><span style=\"--shiki-dark:#B392F0;--shiki-light:#6F42C1\"> ZardDemoKbdButtonComponent</span><span style=\"--shiki-dark:#E1E4E8;--shiki-light:#24292E\"> {}</span></span>\n<span class=\"line\"></span></code></pre>",
+  "code": "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",
+  "language": "angular-ts",
+  "showLineNumbers": true,
+  "copyButton": true,
+  "expandable": false
+};