xlibs-components/dist/components/ui/card.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn } from '../../lib/utils.js';
const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })));
Card.displayName = "Card";
const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
CardHeader.displayName = "CardHeader";
const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
CardTitle.displayName = "CardTitle";
const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
CardDescription.displayName = "CardDescription";
const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
CardContent.displayName = "CardContent";
const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
CardFooter.displayName = "CardFooter";
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
// Static metadata exports
export const cardMetadata = {
    displayName: "Card",
    aspectRatio: "16/9",
    preferredWidth: 320,
    preferredHeight: 180,
    minWidth: 200,
    minHeight: 100,
    layoutHints: ["responsive", "flexible", "content-container"]
};
export const cardHeaderMetadata = {
    displayName: "CardHeader",
    preferredWidth: "100%",
    preferredHeight: "auto",
    layoutHints: ["header", "content-start"]
};
export const cardContentMetadata = {
    displayName: "CardContent",
    preferredWidth: "100%",
    preferredHeight: "auto",
    layoutHints: ["content", "flexible", "scrollable"]
};
export const cardFooterMetadata = {
    displayName: "CardFooter",
    preferredWidth: "100%",
    preferredHeight: "auto",
    layoutHints: ["footer", "content-end", "action-area"]
};