Card

1import { type VariantProps, cva } from "class-variance-authority";
2import type * as React from "react";
3 
4import { cn } from "@/lib/utils";
5 
6const cardVariants = cva(
7  "flex flex-col gap-6 border transition-shadow focus-visible:outline-none",
8  {
9    variants: {
10      elevation: {
11        none: "shadow-none",
12        xs: "shadow-xs hover:shadow-sm focus-visible:shadow-sm",
13        sm: "shadow-sm hover:shadow-base focus-visible:shadow-base",
14        base: "shadow-base hover:shadow-md focus-visible:shadow-md",
15        md: "shadow-md hover:shadow-lg focus-visible:shadow-lg",
16        lg: "shadow-lg hover:shadow-xl focus-visible:shadow-xl",
17      },
18      style: {
19        flat: "bg-body-bg border-transparent",
20        outline: "bg-body-bg border-border-color",
21        filled: "bg-subtle-bg border-transparent",
22      },
23      padding: {
24        sm: "px-3 py-3 rounded-base",
25        md: "px-5 py-5 rounded-md",
26        lg: "px-7 py-7 rounded-lg",
27      },
28    },
29    defaultVariants: {
30      elevation: "none",
31      style: "flat",
32      padding: "lg",
33    },
34    compoundVariants: [
35      {
36        style: "outline",
37        class: "shadow-none hover:shadow-base focus-visible:shadow-base",
38      },
39    ],
40  },
41);
42 
43function Card({
44  className,
45  elevation,
46  style,
47  padding,
48  ...props
49}: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
50  return (
51    <div
52      data-slot="card"
53      className={cn(cardVariants({ elevation, style, padding }), className)}
54      {...props}
55    />
56  );
57}
58 
59function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
60  return (
61    <div
62      data-slot="card-header"
63      className={cn(
64        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
65        className,
66      )}
67      {...props}
68    />
69  );
70}
71 
72function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
73  return (
74    <div
75      data-slot="card-title"
76      className={cn("leading-none font-semibold", className)}
77      {...props}
78    />
79  );
80}
81 
82function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
83  return (
84    <div
85      data-slot="card-description"
86      className={cn("text-subtle-text text-sm", className)}
87      {...props}
88    />
89  );
90}
91 
92function CardAction({ className, ...props }: React.ComponentProps<"div">) {
93  return (
94    <div
95      data-slot="card-action"
96      className={cn(
97// … truncated