feat(Card): add variant prop

docs/content/3.components/card.md

@@ -16,6 +16,42 @@ props:
 ---
 ::
 
+### Variant
+
+Use the `variant` prop to change the variant of the Card.
+
+::component-code
+---
+prettier: true
+hide:
+  - class
+props:
+  variant: subtle
+  class: 'w-full'
+slots:
+  header: |
+
+    <Placeholder class="h-8" />
+
+  default: |
+
+    <Placeholder class="h-32" />
+
+  footer: |
+
+    <Placeholder class="h-8" />
+---
+
+#header
+:placeholder{class="h-8"}
+
+#default
+:placeholder{class="h-32"}
+
+#footer
+:placeholder{class="h-8"}
+::
+
 ## API
 
 ### Props

playground/app/pages/components/card.vue

@@ -1,6 +1,16 @@
+<script setup lang="ts">
+import theme from '#build/ui/card'
+
+const variants = Object.keys(theme.variants.variant)
+
+const variant = ref(theme.defaultVariants.variant)
+</script>
+
 <template>
   <div class="flex flex-col gap-4">
-    <UCard class="w-96">
+    <USelect v-model="variant" :items="variants" />
+
+    <UCard :variant="variant" class="w-96">
       <template #header>
         <Placeholder class="h-8" />
       </template>

src/runtime/components/Card.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/card'
@@ -9,12 +10,15 @@ const appConfigCard = _appConfig as AppConfig & { ui: { card: Partial<typeof the
 
 const card = tv({ extend: tv(theme), ...(appConfigCard.ui?.card || {}) })
 
+type CardVariants = VariantProps<typeof card>
+
 export interface CardProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
    */
   as?: any
+  variant?: CardVariants['variant']
   class?: any
   ui?: Partial<typeof card.slots>
 }
@@ -29,13 +33,13 @@ extendDevtoolsMeta({ example: 'CardExample' })
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 
 const props = defineProps<CardProps>()
 const slots = defineSlots<CardSlots>()
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = card()
+const ui = computed(() => card({ variant: props.variant }))
 </script>
 
 <template>

src/theme/card.ts

@@ -1,8 +1,27 @@
 export default {
   slots: {
-    root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]',
+    root: 'rounded-[calc(var(--ui-radius)*2)]',
     header: 'p-4 sm:px-6',
     body: 'p-4 sm:p-6',
     footer: 'p-4 sm:px-6'
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: 'bg-(--ui-bg-inverted) text-(--ui-bg)'
+      },
+      outline: {
+        root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)'
+      },
+      soft: {
+        root: 'bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)'
+      },
+      subtle: {
+        root: 'bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'outline'
   }
 }

test/components/Card.spec.ts

@@ -1,11 +1,15 @@
 import { describe, it, expect } from 'vitest'
 import Card, { type CardProps, type CardSlots } from '../../src/runtime/components/Card.vue'
 import ComponentRender from '../component-render'
+import theme from '#build/ui/card'
 
 describe('Card', () => {
+  const variants = Object.keys(theme.variants.variant) as any
+
   it.each([
     // Props
     ['with as', { props: { as: 'section' } }],
+    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
     ['with class', { props: { class: 'rounded-xl' } }],
     ['with ui', { props: { ui: { body: 'font-bold' } } }],
     // Slots

test/components/__snapshots__/Card-vue.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Card > renders with as correctly 1`] = `
-"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<section class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -17,31 +17,63 @@ exports[`Card > renders with class correctly 1`] = `
 `;
 
 exports[`Card > renders with default slot correctly 1`] = `
-"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <!--v-if-->
   <div class="p-4 sm:p-6">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Card > renders with footer slot correctly 1`] = `
-"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <!--v-if-->
   <!--v-if-->
   <div class="p-4 sm:px-6">Footer slot</div>
 </div>"
 `;
 
 exports[`Card > renders with header slot correctly 1`] = `
-"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <div class="p-4 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Card > renders with ui correctly 1`] = `
-"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with variant outline correctly 1`] = `
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with variant soft correctly 1`] = `
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with variant solid correctly 1`] = `
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-inverted) text-(--ui-bg)">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with variant subtle correctly 1`] = `
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->

test/components/__snapshots__/Card.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Card > renders with as correctly 1`] = `
-"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<section class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -17,31 +17,63 @@ exports[`Card > renders with class correctly 1`] = `
 `;
 
 exports[`Card > renders with default slot correctly 1`] = `
-"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <!--v-if-->
   <div class="p-4 sm:p-6">Default slot</div>
   <!--v-if-->
 </div>"
 `;
 
 exports[`Card > renders with footer slot correctly 1`] = `
-"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <!--v-if-->
   <!--v-if-->
   <div class="p-4 sm:px-6">Footer slot</div>
 </div>"
 `;
 
 exports[`Card > renders with header slot correctly 1`] = `
-"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <div class="p-4 sm:px-6">Header slot</div>
   <!--v-if-->
   <!--v-if-->
 </div>"
 `;
 
 exports[`Card > renders with ui correctly 1`] = `
-"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with variant outline correctly 1`] = `
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with variant soft correctly 1`] = `
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with variant solid correctly 1`] = `
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-inverted) text-(--ui-bg)">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Card > renders with variant subtle correctly 1`] = `
+"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->