Card

1import { cva, type VariantProps } from "class-variance-authority";
2import type * as React from "react";
3import { type HoverEffect, hoverEffects } from "@/lib/hover-effects";
4import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
5import { cn } from "@/lib/utils";
6 
7/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
8const cardVariants = cva("flex flex-col gap-6 rounded-xl py-6", {
9  variants: {
10    variant: {
11      default: "bg-card text-card-foreground border shadow-sm",
12      glass: "text-foreground",
13    },
14  },
15  defaultVariants: {
16    variant: "glass",
17  },
18});
19 
20/* Role: borderless adaptive glass. */
21const ROLE = {};
22 
23function Card({
24  className,
25  variant = "glass",
26  effect,
27  animated,
28  ...props
29}: React.ComponentProps<"div"> &
30  VariantProps<typeof cardVariants> &
31  MaterialAxisProps & {
32    effect?: HoverEffect;
33    /** Scale + deepen shadow on hover (folded from the glass wrapper). */
34    animated?: boolean;
35  }) {
36  const [axes, rest] = splitAxisProps(props);
37  const m = materialSurface(variant === "default" ? null : ROLE, axes);
38 
39  return (
40    <div
41      data-slot="card"
42      data-material={m?.["data-material"]}
43      className={cn(
44        m?.className,
45        cardVariants({
46          variant,
47        }),
48        animated && "transition duration-300 hover:scale-[1.02] hover:shadow-[var(--glass-shadow-lg)]",
49        effect &&
50          hoverEffects({
51            hover: effect,
52          }),
53        className,
54      )}
55      {...rest}
56    />
57  );
58}
59 
60function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
61  return (
62    <div
63      data-slot="card-header"
64      className={cn(
65        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
66        className,
67      )}
68      {...props}
69    />
70  );
71}
72 
73function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
74  return <div data-slot="card-title" className={cn("leading-none font-semibold text-balance", className)} {...props} />;
75}
76 
77function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
78  return <div data-slot="card-description" className={cn("text-muted-foreground text-sm text-pretty", className)} {...props} />;
79}
80 
81function CardAction({ className, ...props }: React.ComponentProps<"div">) {
82// … truncated