feat(useKbd): new composable (#73)

src/runtime/components/Kbd.vue

@@ -4,6 +4,7 @@ import type { PrimitiveProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/kbd'
+import type { KbdKey } from '#ui/composables/useKbd'
 
 const appConfig = _appConfig as AppConfig & { ui: { kbd: Partial<typeof theme> } }
 
@@ -12,7 +13,7 @@ const kbd = tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) })
 type KbdVariants = VariantProps<typeof kbd>
 
 export interface KbdProps extends Omit<PrimitiveProps, 'asChild'> {
-  value?: string
+  value: KbdKey | string
   color?: KbdVariants['color']
   size?: KbdVariants['size']
   class?: any
@@ -25,15 +26,18 @@ export interface KbdSlots {
 
 <script setup lang="ts">
 import { Primitive } from 'radix-vue'
+import { useKbd } from '#imports'
 
 const props = withDefaults(defineProps<KbdProps>(), { as: 'kbd' })
 defineSlots<KbdSlots>()
+
+const { getKbdKey } = useKbd()
 </script>
 
 <template>
   <Primitive :as="as" :class="kbd({ color, size, class: props.class })">
     <slot>
-      {{ value }}
+      {{ getKbdKey(value) }}
     </slot>
   </Primitive>
 </template>