feat(Card): new component

src/runtime/components/Card.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/card'
+
+const appConfig = _appConfig as AppConfig & { ui: { card: Partial<typeof theme> } }
+
+const card = tv({ extend: tv(theme), ...(appConfig.ui?.card || {}) })
+
+export interface CardProps {
+  as?: string
+  class?: any
+  ui?: Partial<typeof card.slots>
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<CardProps>(), { as: 'div' })
+
+const ui = computed(() => tv({ extend: card, slots: props.ui })())
+</script>
+
+<template>
+  <component :is="as" :class="ui.root({ class: props.class })">
+    <div v-if="$slots.header" :class="ui.header()">
+      <slot name="header" />
+    </div>
+
+    <div v-if="$slots.default" :class="ui.body()">
+      <slot />
+    </div>
+
+    <div v-if="$slots.footer" :class="ui.footer()">
+      <slot name="footer" />
+    </div>
+  </component>
+</template>