fix(card)!: refactor card component, remove CardHead

Author: lepture

.vitepress/config.ts

@@ -63,6 +63,7 @@ export default defineConfig({
               { text: 'Badge', link: '/components/badge' },
               { text: 'Button', link: '/components/button' },
               { text: 'Icon Button', link: '/components/icon-button' },
+              { text: 'Card', link: '/components/card' },
               { text: 'Separator', link: '/components/separator' },
             ],
           },

docs/content/components/card.md

@@ -0,0 +1,20 @@
+---
+title: Card
+description: Container that groups related content and actions.
+status: stable
+source: https://github.com/typlog/ui/tree/main/src/components/card
+reka: https://reka-ui.com/docs/components/card
+radix: https://www.radix-ui.com/themes/docs/components/card
+---
+
+<Example name="card/Overview.vue" />
+
+## API Reference
+
+<PropsTable name="Card" />
+
+## Examples
+
+### Size
+
+<Example name="card/Size.vue" />

docs/examples/card/Overview.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Card, Avatar } from '#components'
+</script>
+
+<template>
+  <div class="max-w-60">
+    <Card>
+      <div class="flex items-center gap-3">
+        <Avatar
+          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
+          alt="Alex"
+          size="3"
+          radius="full"
+        />
+        <div class="text-sm">
+          <div class="font-bold">Alex Wang</div>
+          <div class="text-gray-10">Engineering</div>
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>

docs/examples/card/Size.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Card, Avatar } from '#components'
+
+const picture = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 max-w-68">
+    <Card size="1">
+      <div class="flex items-center gap-3">
+        <Avatar
+          :src="picture"
+          alt="Alex"
+          size="3"
+          radius="full"
+        />
+        <div class="text-sm">
+          <div class="font-bold">Alex Wang</div>
+          <div class="text-gray-10">Engineering</div>
+        </div>
+      </div>
+    </Card>
+    <Card size="2">
+      <div class="flex items-center gap-3">
+        <Avatar
+          :src="picture"
+          alt="Alex"
+          size="3"
+          radius="full"
+        />
+        <div class="text-sm">
+          <div class="font-bold">Alex Wang</div>
+          <div class="text-gray-10">Engineering</div>
+        </div>
+      </div>
+    </Card>
+    <Card size="3">
+      <div class="flex items-center gap-3">
+        <Avatar
+          :src="picture"
+          alt="Alex"
+          size="3"
+          radius="full"
+        />
+        <div class="text-sm">
+          <div class="font-bold">Alex Wang</div>
+          <div class="text-gray-10">Engineering</div>
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>

src/components/card/Card.vue

@@ -46,10 +46,7 @@ const resetClass = buildPropsClass(props, ['size', 'variant'])
   border-color: var(--card-border-color, var(--gray-a5));
   border-width: var(--card-border-width, 1px);
   border-style: solid;
-  --inset-padding-top: var(--card-padding);
-  --inset-padding-right: var(--card-padding);
-  --inset-padding-bottom: var(--card-padding);
-  --inset-padding-left: var(--card-padding);
+  width: 100%;
 }
 .ui-Card:where(:any-link, button, label):where(:hover) {
   --card-border-color: var(--gray-a7);
@@ -85,4 +82,9 @@ const resetClass = buildPropsClass(props, ['size', 'variant'])
 .ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
   border-color: var(--gray-a5);
 }
+
+/** special enhancement for tailwindcss */
+.ui-Card:where(.p-0) {
+  --card0-padding: 0;
+}
 </style>

src/components/card/CardHead.vue

@@ -2,8 +2,3 @@ export {
   default as Card,
   type CardProps,
 } from './Card.vue'
-
-export {
-  default as CardHead,
-  type CardHeadProps,
-} from './CardHead.vue'