card

1import * as React from "react"
2 
3import { cn } from "@/registry/bases/radix/lib/utils"
4 
5function Card({
6  className,
7  size = "default",
8  ...props
9}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
10  return (
11    <div
12      data-slot="card"
13      data-size={size}
14      className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
15      {...props}
16    />
17  )
18}
19 
20function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
21  return (
22    <div
23      data-slot="card-header"
24      className={cn(
25        "gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
26        className
27      )}
28      {...props}
29    />
30  )
31}
32 
33function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
34  return (
35    <div
36      data-slot="card-title"
37      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
38      {...props}
39    />
40  )
41}
42 
43function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
44  return (
45    <div
46      data-slot="card-description"
47      className={cn("text-muted-foreground text-sm", className)}
48      {...props}
49    />
50  )
51}
52 
53function CardAction({ className, ...props }: React.ComponentProps<"div">) {
54  return (
55    <div
56      data-slot="card-action"
57      className={cn(
58        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
59        className
60      )}
61      {...props}
62    />
63  )
64}
65 
66function CardContent({ className, ...props }: React.ComponentProps<"div">) {
67  return (
68    <div
69      data-slot="card-content"
70      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
71      {...props}
72    />
73  )
74}
75 
76function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
77  return (
78    <div
79      data-slot="card-footer"
80      className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
81      {...props}
82    />
83  )
84}
85 
86export {
87  Card,
88  CardHeader,
89// … truncated