chore(Kbd): new component

src/runtime/app.config.ts

@@ -179,7 +179,7 @@ const dropdown = {
       base: 'flex-shrink-0',
       size: '3xs'
     },
-    shortcuts: 'hidden md:inline-flex flex-shrink-0 text-xs font-semibold text-gray-500 dark:text-gray-400 ml-auto'
+    shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ml-auto'
   },
   transition: {
     enterActiveClass: 'transition duration-100 ease-out',
@@ -195,6 +195,23 @@ const dropdown = {
   }
 }
 
+const kbd = {
+  base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
+  spacing: 'px-1',
+  size: {
+    xs: 'h-4 min-w-[16px] text-[10px]',
+    sm: 'h-5 min-w-[20px] text-[11px]',
+    md: 'h-6 min-w-[24px] text-[12px]'
+  },
+  rounded: 'rounded',
+  font: 'font-medium font-sans',
+  background: 'bg-gray-100 dark:bg-gray-800',
+  ring: 'ring-1 ring-gray-300 dark:ring-gray-700 ring-inset',
+  default: {
+    size: 'sm'
+  }
+}
+
 // Forms
 
 const input = {
@@ -494,7 +511,7 @@ const commandPalette = {
       selected: {
         icon: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
       },
-      shortcuts: 'hidden md:inline-flex flex-shrink-0 text-xs font-semibold text-gray-500 dark:text-gray-400'
+      shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5'
     },
     active: 'flex-shrink-0 text-gray-500 dark:text-gray-400',
     inactive: 'flex-shrink-0 text-gray-500 dark:text-gray-400'
@@ -582,7 +599,7 @@ const tooltip = {
   rounded: 'rounded',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   base: 'invisible lg:visible h-6 px-2 py-1 text-xs font-normal truncate',
-  shortcuts: 'hidden md:inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1',
+  shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
   transition: {
     enterActiveClass: 'transition ease-out duration-200',
     enterFromClass: 'opacity-0 translate-y-1',
@@ -688,6 +705,7 @@ export default {
     button,
     buttonGroup,
     dropdown,
+    kbd,
     input,
     inputGroup,
     textarea,

src/runtime/components/elements/Dropdown.vue

@@ -33,7 +33,7 @@
                   <span class="truncate">{{ item.label }}</span>
 
                   <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
-                    <kbd v-for="shortcut of item.shortcuts" :key="shortcut" class="font-sans">{{ shortcut }}</kbd>
+                    <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
                   </span>
                 </slot>
               </Component>
@@ -53,7 +53,8 @@ import { defineComponent, ref, computed, onMounted } from 'vue'
 import { defu } from 'defu'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
-import { classNames, omit } from '../../utils'
+import UKbd from '../elements/Kbd.vue'
+import { omit } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { Avatar as AvatarType } from '../../types/avatar'
 import type { PopperOptions } from '../../types'
@@ -73,7 +74,8 @@ export default defineComponent({
     MenuItems,
     MenuItem,
     UIcon,
-    UAvatar
+    UAvatar,
+    UKbd
   },
   props: {
     items: {

src/runtime/components/elements/Kbd.vue

@@ -0,0 +1,44 @@
+<template>
+  <kbd :class="[ui.base, ui.size[size], ui.spacing, ui.rounded, ui.font, ui.background, ui.ring]">
+    <slot />
+  </kbd>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
+
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  props: {
+    size: {
+      type: String,
+      default: () => appConfig.ui.kbd.default.size,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.kbd.size).includes(value)
+      }
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.kbd>>,
+      default: () => appConfig.ui.kbd
+    }
+  },
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.kbd>>(() => defu({}, props.ui, appConfig.ui.kbd))
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui
+    }
+  }
+})
+</script>

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -45,7 +45,7 @@
           </slot>
           <slot v-else :name="`${group.key}-inactive`" :group="group" :command="command">
             <span v-if="command.shortcuts?.length" :class="ui.group.command.shortcuts">
-              <kbd v-for="shortcut of command.shortcuts" :key="shortcut" class="font-sans">{{ shortcut }}</kbd>
+              <UKbd v-for="shortcut of command.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
             </span>
             <span v-else-if="!command.disabled && group.inactive" :class="ui.group.inactive">{{ group.inactive }}</span>
           </slot>
@@ -61,6 +61,7 @@ import type { PropType } from 'vue'
 import { ComboboxOption } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
+import UKbd from '../elements/Kbd.vue'
 import type { Group } from '../../types/command-palette'
 // TODO: Remove
 // @ts-expect-error
@@ -72,7 +73,8 @@ export default defineComponent({
   components: {
     ComboboxOption,
     UIcon,
-    UAvatar
+    UAvatar,
+    UKbd
   },
   props: {
     group: {

src/runtime/components/overlays/Tooltip.vue

@@ -12,10 +12,10 @@
           </slot>
 
           <span v-if="shortcuts?.length" :class="ui.shortcuts">
-            <span class="mr-1 text-gray-700 dark:text-gray-200">&middot;</span>
-            <kbd v-for="shortcut of shortcuts" :key="shortcut" class="flex items-center justify-center font-sans px-1 h-4 min-w-[16px] text-[10px] bg-gray-100 dark:bg-gray-800 rounded text-gray-900 dark:text-white">
+            <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
+            <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
               {{ shortcut }}
-            </kbd>
+            </Ukbd>
           </span>
         </div>
       </transition>
@@ -27,6 +27,7 @@
 import { computed, ref, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
+import UKbd from '../elements/Kbd.vue'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from '../../types'
 import { useAppConfig } from '#imports'
@@ -37,6 +38,9 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  components: {
+    UKbd
+  },
   props: {
     text: {
       type: String,