Card

1// Base UI base card — presentational, no headless primitive in any base.
2//
3// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
4// from upstream's `bases/base-ui/ui/card.tsx`, which was not available at port time.
5// Diff the class strings against the upstream source before treating this as ported.
6import { cn } from '@/lib/utils';
7import type { DivProps } from '@/lib/types';
8 
9export interface CardProps extends DivProps {
10	size?: 'default' | 'sm';
11}
12 
13export function Card({ className, size = 'default', ...props }: CardProps) @{
14	<div
15		data-slot="card"
16		data-size={size}
17		className={cn(
18			'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
19			className,
20		)}
21		{...props}
22	/>
23}
24 
25export function CardHeader({ className, ...props }: DivProps) @{
26	<div
27		data-slot="card-header"
28		className={cn(
29			'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
30			className,
31		)}
32		{...props}
33	/>
34}
35 
36export function CardTitle({ className, ...props }: DivProps) @{
37	<div
38		data-slot="card-title"
39		className={cn(
40			'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
41			className,
42		)}
43		{...props}
44	/>
45}
46 
47export function CardDescription({ className, ...props }: DivProps) @{
48	<div
49		data-slot="card-description"
50		className={cn('text-sm text-muted-foreground', className)}
51		{...props}
52	/>
53}
54 
55export function CardAction({ className, ...props }: DivProps) @{
56	<div
57		data-slot="card-action"
58		className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
59		{...props}
60	/>
61}
62 
63export function CardContent({ className, ...props }: DivProps) @{
64	<div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
65}
66 
67export function CardFooter({ className, ...props }: DivProps) @{
68	<div
69		data-slot="card-footer"
70		className={cn(
71			'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
72			className,
73		)}
74// … truncated