Form Card

1import { cva, type VariantProps } from "class-variance-authority";
2import {
3  Card,
4  CardContent,
5  CardDescription,
6  CardFooter,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import { Separator } from "@/components/ui/separator";
11import { cn } from "@/lib/utils";
12 
13// py-0
14const formCardVariants = cva(
15  "group relative w-full overflow-hidden py-0 shadow-none gap-4",
16  {
17    variants: {
18      variant: {
19        default: "",
20        destructive: "border-destructive",
21      },
22      defaultVariants: {
23        variant: "default",
24      },
25    },
26  },
27);
28 
29// NOTE: Add a formcardprovider to share the variant prop
30 
31export function FormCard({
32  children,
33  className,
34  variant,
35  ...props
36}: React.ComponentProps<"div"> & VariantProps<typeof formCardVariants>) {
37  return (
38    <Card className={cn(formCardVariants({ variant }), className)} {...props}>
39      {children}
40    </Card>
41  );
42}
43 
44export function FormCardHeader({
45  children,
46  className,
47  ...props
48}: React.ComponentProps<"div">) {
49  return (
50    <CardHeader
51      className={cn(
52        "px-4 pt-4 group-has-data-[slot=card-upgrade]:pointer-events-none group-has-data-[slot=card-upgrade]:opacity-50 [.border-b]:pb-4",
53        className,
54      )}
55      {...props}
56    >
57      {children}
58    </CardHeader>
59  );
60}
61 
62export function FormCardTitle({ children }: { children: React.ReactNode }) {
63  return <CardTitle>{children}</CardTitle>;
64}
65 
66export function FormCardDescription({
67  children,
68}: {
69  children: React.ReactNode;
70}) {
71  return <CardDescription>{children}</CardDescription>;
72}
73 
74export function FormCardContent({
75  children,
76  className,
77  ...props
78}: React.ComponentProps<"div">) {
79  return (
80    <CardContent
81      className={cn(
82        "px-4 group-has-data-[slot=card-upgrade]:pointer-events-none group-has-data-[slot=card-upgrade]:opacity-50",
83        className,
84      )}
85      {...props}
86    >
87      {children}
88    </CardContent>
89  );
90}
91 
92export function FormCardSeparator({
93  ...props
94}: React.ComponentProps<typeof Separator>) {
95  return <Separator {...props} />;
96}
97 
98const formCardFooterVariants = cva(
99  "border-t flex items-center gap-2 pb-4 px-4 [&>:last-child]:ml-auto [.border-t]:pt-4",
100  {
101    variants: {
102      variant: {
103        default: "",
104        destructive: "border-destructive bg-destructive/5",
105      },
106      defaultVariants: {
107        variant: "default",
108      },
109    },
110  },
111);
112 
113export function FormCardFooter({
114  children,
115  className,
116  variant,
117  ...props
118// … truncated