chore(Kbd): new component

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,