chore(components): use Primitive where possible

src/runtime/components/Card.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { tv } 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/card'
@@ -8,8 +9,7 @@ const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme>
 
 const card = tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })
 
-export interface CardProps {
-  as?: string
+export interface CardProps extends Omit<PrimitiveProps, 'asChild'> {
   class?: any
   ui?: Partial<typeof card.slots>
 }
@@ -17,6 +17,7 @@ export interface CardProps {
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Primitive } from 'radix-vue'
 
 const props = withDefaults(defineProps<CardProps>(), { as: 'div' })
 
@@ -24,7 +25,7 @@ const ui = computed(() => tv({ extend: card, slots: props.ui })())
 </script>
 
 <template>
-  <component :is="as" :class="ui.root({ class: props.class })">
+  <Primitive :as="as" :class="ui.root({ class: props.class })">
     <div v-if="$slots.header" :class="ui.header()">
       <slot name="header" />
     </div>
@@ -36,5 +37,5 @@ const ui = computed(() => tv({ extend: card, slots: props.ui })())
     <div v-if="$slots.footer" :class="ui.footer()">
       <slot name="footer" />
     </div>
-  </component>
+  </Primitive>
 </template>