Card

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7import { selectionFocus } from "@/lib/recipes";
8 
9export interface CardProps extends useRender.ComponentProps<"div"> {
10  /** Visual treatment for the content surface. */
11  variant?: "surface" | "outlined" | "elevated";
12  /** Adds visual states for cards rendered as a link or button. */
13  actionable?: boolean;
14  /** Marks the card visually selected. Consumers own selection semantics. */
15  selected?: boolean;
16}
17 
18/** Composable content surface. */
19export function Card({
20  className,
21  variant = "outlined",
22  actionable,
23  selected,
24  render,
25  ...props
26}: CardProps): React.ReactElement {
27  const defaultProps = {
28    className: cn(
29      "relative rounded-[var(--radius-12)] text-ink",
30      variant === "surface" && "bg-layer-1",
31      variant === "outlined" && "border border-hairline-soft bg-layer-1",
32      variant === "elevated" &&
33        "bg-layer-1 shadow-card",
34      actionable && [
35        "hover:border-hairline-tertiary active:border-hairline-tertiary",
36        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
37        selectionFocus,
38      ],
39      selected && "bg-fill-2",
40      "transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)]",
41      className,
42    ),
43    "data-slot": "card",
44    "data-selected": selected || undefined,
45  };
46 
47  return useRender({
48    defaultTagName: "div",
49    props: mergeProps<"div">(defaultProps, props),
50    render,
51  });
52}
53 
54export type CardHeaderProps = useRender.ComponentProps<"div">;
55 
56export function CardHeader({
57  className,
58  render,
59  ...props
60}: CardHeaderProps): React.ReactElement {
61  const defaultProps = {
62    className: cn("flex items-start justify-between gap-4 p-4 pb-0", className),
63    "data-slot": "card-header",
64  };
65 
66  return useRender({
67    defaultTagName: "div",
68    props: mergeProps<"div">(defaultProps, props),
69    render,
70  });
71}
72 
73export type CardTitleProps = useRender.ComponentProps<"h3">;
74 
75export function CardTitle({
76  className,
77  render,
78  ...props
79}: CardTitleProps): React.ReactElement {
80  const defaultProps = {
81    className: cn("text-regular font-medium text-ink", className),
82    "data-slot": "card-title",
83  };
84 
85  return useRender({
86    defaultTagName: "h3",
87    props: mergeProps<"h3">(defaultProps, props),
88    render,
89  });
90}
91 
92// … truncated