Card

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3
4import { cn } from "@/lib/utils";
5import {
6  solidSurface,
7  type SurfaceLevel,
8} from "@/registry/default/lib/elevated";
9
10const cardVariants = cva("text-card-foreground flex flex-col", {
11  variants: {
12    variant: {
13      default: "gap-6 rounded-2xl py-6",
14      inset: "rounded-2xl p-1",
15    },
16  },
17  defaultVariants: {
18    variant: "default",
19  },
20});
21
22export interface CardProps
23  extends
24    React.HTMLAttributes<HTMLDivElement>,
25    VariantProps<typeof cardVariants> {
26  level?: SurfaceLevel;
27  shadowLevel?: SurfaceLevel;
28}
29
30function Card({
31  className,
32  variant = "default",
33  level = 3,
34  shadowLevel = 1,
35  ...props
36}: CardProps) {
37  return (
38    <div
39      data-slot="card"
40      data-variant={variant}
41      data-level={level}
42      className={cn(
43        cardVariants({ variant }),
44        solidSurface(level, shadowLevel),
45        // bg-muted overrides solidSurface's bg, making the outer a gray frame
46        // while keeping its shadow, rim, and --popup-surface.
47        variant === "inset" && "bg-muted",
48        className,
49      )}
50      {...props}
51    />
52  );
53}
54
55function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
56  return (
57    <div
58      data-slot="card-header"
59      className={cn(
60        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-[[data-slot=card-action]]:grid-cols-[1fr_auto] [.border-b]:pb-6",
61        "[[data-variant=default]>_&]:gap-1.5 [[data-variant=default]>_&]:px-6",
62        "[[data-variant=inset]>_&]:px-3 [[data-variant=inset]>_&]:py-2 [[data-variant=inset]>_&]:pt-1",
63        className,
64      )}
65      {...props}
66    />
67  );
68}
69
70function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
71  return (
72    <div
73      data-slot="card-title"
74      className={cn(
75        "font-semibold [[data-variant=default]_&]:leading-none",
76        className,
77      )}
78      {...props}
79    />
80  );
81}
82
83function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
84  return (
85    <div
86      data-slot="card-description"
87      className={cn("text-muted-foreground text-sm", className)}
88      {...props}
89    />
90  );
91}
92
93function CardAction({ className, ...props }: React.ComponentProps<"div">) {
94  return (
95    <div
96      data-slot="card-action"
97      className={cn(
98// … truncated