Card

import { Button } from "@/registry/components/button/react/button";
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "@/registry/components/card/react/card";
import { Input } from "@/registry/components/input/react/input";
import { Label } from "@/registry/components/label/react/label";

export function CardDemo() {
    return (
        <Card className="w-full">
            <CardHeader>
                <CardTitle>Login to your account</CardTitle>
                <CardDescription>Enter your email below to login to your account</CardDescription>
            </CardHeader>
            <CardContent>
                <form>
                    <div className="flow">
                        <div className="">
                            <Label htmlFor="email">Email</Label>
                            <Input id="email" type="email" placeholder="m@example.com" required />
                        </div>
                        <div className="flow flow-space-2xs">
                            <div className="repel">
                                <Label htmlFor="password">Password</Label>
                                <a href="/" className="text-sm">
                                    Forgot your password?
                                </a>
                            </div>
                            <Input id="password" type="password" required />
                        </div>
                    </div>
                </form>
            </CardContent>
            <CardFooter className="">
                <Button data-variant="primary" type="submit" className="w-full">
                    Login
                </Button>
                <Button className="w-full">Login with Google</Button>
            </CardFooter>
        </Card>
    );
}

import type * as React from "react";

import cn from "clsx";

function Card({ className, ...props }: React.ComponentProps<"div">) {
    return <div className={cn("card", className)} {...props} />;
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
    return <div className={cn("card-header", className)} {...props} />;
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
    return <div className={cn("card-title", className)} {...props} />;
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
    return <div className={cn("card-description", className)} {...props} />;
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
    return <div className={cn("card-action", className)} {...props} />;
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
    return <div className={cn("card-content", className)} {...props} />;
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
    return <div className={cn("card-footer", className)} {...props} />;
}

export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

.card {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--card-bg);
    padding-block: var(--card-padding-block);
    padding-inline: var(--card-padding-inline);
    border-style: var(--card-border-style);
    border-width: var(--card-border-width);
    border-color: var(--card-border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow, none);
    font-size: var(--card-font-size);
    gap: var(--card-flow-space, 1rem);
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

/* .card-content {
    display: flex;
    flex-direction: column;
    gap: var(--card-flow-space);
} */

.card-title {
    font-family: var(--card-title-font);
    font-size: var(--card-title-size);
    color: var(--card-title-color);
    font-weight: var(--card-title-weight);
}

.card-description {
    font-size: var(--card-description-size);
    color: var(--card-description-color);
}

{
  "card": {
    "border": {
      "style": {
        "$value": "{panel.stroke.style}"
      },
      "width": {
        "$value": "{panel.stroke.width}"
      },
      "color": {
        "$value": "{panel.stroke.color}"
      }
    },
    "padding-inline": {
      "$value": "{space.md}"
    },
    "padding-block": {
      "$value": "{space.md}"
    },
    "radius": {
      "$value": "{radius.panel}"
    },
    "shadow": {
      "$value": "{shadow.card}"
    },
    "font-size": {
      "$value": "{text.sm}"
    },
    "title": {
      "font": {
        "$value": "{font.title}"
      },
      "size": {
        "$value": "{size.card.title}"
      },
      "color": {
        "$value": "{color.text.title}"
      },
      "weight": {
        "$value": "{weight.title}"
      }
    },
    "description": {
      "size": {
        "$value": "{size.card.description}"
      },
      "color": {
        "$value": "{color.text.secondary}"
      }
    }
  }
}