xlibs-components/dist/components/magicui/magic-card.js

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

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cva } from "class-variance-authority";
import { cn } from '../../lib/utils.js';
const magicCardVariants = cva("rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-300 relative overflow-hidden group", {
    variants: {
        variant: {
            default: "hover:shadow-lg hover:shadow-xl transform hover:-translate-y-1",
            glass: "backdrop-blur-sm border-border/50 bg-card/50 hover:bg-card/80 hover:shadow-lg hover:shadow-xl transform hover:-translate-y-1",
            gradient: "bg-gradient-to-br from-card via-card/80 to-card/60 hover:shadow-lg hover:shadow-xl transform hover:-translate-y-1 hover:scale-[1.02]",
            neon: "border-primary/30 shadow-lg hover:shadow-xl transform hover:-translate-y-1 shadow-[0_0_20px_rgba(var(--primary),0.1)] hover:shadow-[0_0_30px_rgba(var(--primary),0.2)]",
            magic: "bg-gradient-to-br from-primary/5 via-chart-2/5 to-chart-3/5 border-primary/20 hover:shadow-lg hover:shadow-xl transform hover:-translate-y-1 hover:scale-[1.02]",
            floating: "hover:shadow-2xl transform hover:-translate-y-2 hover:scale-[1.02] animate-float",
        },
        size: {
            default: "p-6",
            sm: "p-4",
            lg: "p-8",
            compact: "p-3",
        },
    },
    defaultVariants: {
        variant: "default",
        size: "default",
    },
});
const MagicCard = React.forwardRef(({ className, variant, size, hover = true, glow = false, borderGradient = false, children, ...props }, ref) => {
    return (_jsxs("div", { className: cn(magicCardVariants({ variant, size, className }), !hover && "hover:transform-none hover:shadow-sm", glow && "shadow-[0_0_30px_rgba(var(--primary),0.1)]", borderGradient && "border-gradient-to-r from-primary via-chart-2 to-chart-3"), ref: ref, ...props, children: [borderGradient && (_jsx("div", { className: "absolute inset-0 rounded-lg bg-gradient-to-r from-primary via-chart-2 to-chart-3 opacity-20 group-hover:opacity-30 transition-opacity duration-300" })), _jsx("div", { className: "relative z-10", children: children }), variant === "magic" && (_jsx("div", { className: "absolute inset-0 rounded-lg bg-gradient-to-br from-primary/10 via-chart-2/10 to-chart-3/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" }))] }));
});
MagicCard.displayName = "MagicCard";
const MagicCardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
MagicCardHeader.displayName = "MagicCardHeader";
const MagicCardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("text-h5 font-semibold leading-none tracking-tight", className), ...props })));
MagicCardTitle.displayName = "MagicCardTitle";
const MagicCardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-small text-muted-foreground", className), ...props })));
MagicCardDescription.displayName = "MagicCardDescription";
const MagicCardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
MagicCardContent.displayName = "MagicCardContent";
const MagicCardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
MagicCardFooter.displayName = "MagicCardFooter";
export { MagicCard, MagicCardHeader, MagicCardFooter, MagicCardTitle, MagicCardDescription, MagicCardContent, magicCardVariants };
// Static metadata exports
export const magicCardMetadata = {
    displayName: "MagicCard",
    aspectRatio: "16/9",
    preferredWidth: 320,
    preferredHeight: 180,
    minWidth: 200,
    minHeight: 120,
    layoutHints: ["responsive", "animated", "interactive", "content-container"]
};
export const magicCardHeaderMetadata = {
    displayName: "MagicCardHeader",
    preferredWidth: "100%",
    preferredHeight: "auto",
    layoutHints: ["header", "content-start", "animated"]
};
export const magicCardContentMetadata = {
    displayName: "MagicCardContent",
    preferredWidth: "100%",
    preferredHeight: "auto",
    layoutHints: ["content", "flexible", "animated"]
};