Card

1import { cva, type VariantProps } from 'class-variance-authority';
2import React from 'react';
3import { cn } from '../lib/cn';
4
5const cardVariants = cva(
6  'rounded-lg transition-colors duration-150 h-full flex flex-col justify-between',
7  {
8    variants: {
9      variant: {
10        default: 'bg-card text-card-foreground border border-border',
11        outline: 'text-card-foreground border border-border',
12        ghost: 'bg-transparent text-card-foreground border-0',
13      },
14    },
15    defaultVariants: {
16      variant: 'default',
17    },
18  },
19);
20
21const cardHeaderVariants = cva('flex flex-col space-y-1.5', {
22  variants: {
23    compact: {
24      true: 'px-4 pt-4',
25      false: 'px-6 pt-6',
26    },
27  },
28  defaultVariants: {
29    compact: false,
30  },
31});
32
33const cardTitleVariants = cva('text-base font-medium leading-none tracking-tight');
34const cardDescriptionVariants = cva('text-sm text-muted-foreground leading-relaxed');
35
36const cardContentVariants = cva('flex-1', {
37  variants: {
38    compact: {
39      true: 'p-4 pt-0',
40      false: 'p-6 pt-0',
41    },
42  },
43  defaultVariants: {
44    compact: false,
45  },
46});
47
48const cardFooterVariants = cva('flex items-center', {
49  variants: {
50    align: {
51      start: 'justify-start',
52      center: 'justify-center',
53      end: 'justify-end',
54      between: 'justify-between',
55    },
56    compact: {
57      true: 'p-4 pt-0',
58      false: 'p-6 pt-0',
59    },
60  },
61  defaultVariants: {
62    align: 'start',
63    compact: false,
64  },
65});
66
67interface CardProps
68  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
69  as?: React.ElementType;
70}
71
72interface CardHeaderProps
73  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardHeaderVariants> {}
74
75interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
76  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
77}
78
79type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
80
81interface CardContentProps
82  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardContentVariants> {}
83
84interface CardFooterProps
85  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardFooterVariants> {}
86
87const CardRoot = ({
88  className,
89  variant = 'default',
90  as: Component = 'div',
91  children,
92  ref,
93  ...props
94}: CardProps & { ref?: React.Ref<HTMLDivElement> }) => {
95  return (
96    <Component ref={ref} className={cn(cardVariants({ variant }), className)} {...props}>
97      {children}
98    </Component>
99  );
100};
101
102CardRoot.displayName = 'Card';
103
104const CardHeader = ({
105  className,
106  compact,
107  children,
108  ref,
109  ...props
110}: CardHeaderProps & { ref?: React.Ref<HTMLDivElement> }) => {
111  return (
112    <div ref={ref} className={cn(cardHeaderVariants({ compact }), className)} {...props}>
113      {children}
114    </div>
115  );
116};
117
118CardHeader.displayName = 'CardHeader';
119
120const CardTitle = ({
121  className,
122  as: Component = 'h3',
123  children,
124  ref,
125  ...props
126}: CardTitleProps & { ref?: React.Ref<HTMLHeadingElement> }) => {
127  return (
128    <Component ref={ref} className={cn(cardTitleVariants(), className)} {...props}>
129      {children}
130    </Component>
131  );
132};
133
134CardTitle.displayName = 'CardTitle';
135
136const CardDescription = ({
137  className,
138  children,
139  ref,
140  ...props
141}: CardDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) => {
142  return (
143    <p ref={ref} className={cn(cardDescriptionVariants(), className)} {...props}>
144      {children}
145    </p>
146  );
147};
148
149CardDescription.displayName = 'CardDescription';
150
151const CardContent = ({
152  className,
153  compact,
154  children,
155  ref,
156  ...props
157}: CardContentProps & { ref?: React.Ref<HTMLDivElement> }) => {
158  return (
159    <div ref={ref} className={cn(cardContentVariants({ compact }), className)} {...props}>
160      {children}
161    </div>
162  );
163};
164
165CardContent.displayName = 'CardContent';
166
167const CardFooter = ({
168  className,
169  align,
170  compact,
171  children,
172  ref,
173  ...props
174}: CardFooterProps & { ref?: React.Ref<HTMLDivElement> }) => {
175  return (
176    <div ref={ref} className={cn(cardFooterVariants({ align, compact }), className)} {...props}>
177      {children}
178    </div>
179  );
180};
181
182CardFooter.displayName = 'CardFooter';
183
184const Card = Object.assign(CardRoot, {
185  Header: CardHeader,
186  Title: CardTitle,
187  Description: CardDescription,
188  Content: CardContent,
189  Footer: CardFooter,
190});
191
192export {
193  Card,
194  cardContentVariants,
195  cardDescriptionVariants,
196  cardFooterVariants,
197  cardHeaderVariants,
198  cardTitleVariants,
199  cardVariants,
200};
201
202export type {
203  CardContentProps,
204  CardDescriptionProps,
205  CardFooterProps,
206  CardHeaderProps,
207  CardProps,
208  CardTitleProps,
209};