chore(components): use Primitive where possible

src/runtime/components/Kbd.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
+import type { PrimitiveProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/kbd'
@@ -10,8 +11,7 @@ const kbd = tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) })
 
 type KbdVariants = VariantProps<typeof kbd>
 
-export interface KbdProps {
-  as?: string
+export interface KbdProps extends Omit<PrimitiveProps, 'asChild'> {
   value?: string
   size?: KbdVariants['size']
   class?: any
@@ -23,14 +23,16 @@ export interface KbdSlots {
 </script>
 
 <script setup lang="ts">
+import { Primitive } from 'radix-vue'
+
 const props = withDefaults(defineProps<KbdProps>(), { as: 'kbd' })
 defineSlots<KbdSlots>()
 </script>
 
 <template>
-  <component :is="as" :class="kbd({ size, class: props.class })">
+  <Primitive :as="as" :class="kbd({ size, class: props.class })">
     <slot>
       {{ value }}
     </slot>
-  </component>
+  </Primitive>
 </template>