import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { cv } from '../../lib/cv.js';
const card = cv('overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--card)] text-[var(--txt)]', {
    variants: {
        padding: {
            none: 'p-0',
            /** Stat / compact surfaces (`.dstat`). */
            sm: 'px-4 py-3.5',
            /** Simple padded panel (`.dcard-b`). */
            md: 'px-6 py-4',
            lg: 'px-6 py-6',
        },
        elevation: {
            flat: 'shadow-none',
            resting: 'shadow-[var(--shd)]',
            elevated: 'shadow-[var(--shd2)]',
        },
    },
    defaultVariants: { padding: 'none', elevation: 'resting' },
});
const INTERACTIVE_CLASS = 'motion-safe:transition-shadow motion-safe:duration-[var(--motion-fast)] hover:shadow-[var(--shd2)] focus-within:shadow-[var(--shd2)]';
export const Card = forwardRef(function Card({ padding, elevation, interactive, className, children, ...rest }, ref) {
    const extras = [interactive ? INTERACTIVE_CLASS : '', className].filter(Boolean).join(' ');
    return (_jsx("div", { ref: ref, className: card({ padding, elevation, class: extras }), ...rest, children: children }));
});
/** Header slot — `.dcard-h` in the design system handoff. */
export function CardHeader({ className = '', bordered = true, children, ...rest }) {
    return (_jsx("div", { className: [bordered ? 'border-b border-[var(--bdr)] px-6 pt-6 pb-4' : '', className]
            .filter(Boolean)
            .join(' '), ...rest, children: children }));
}
export function CardTitle({ className = '', children, ...rest }) {
    return (_jsx("h3", { className: `text-[length:var(--fs-card)] font-semibold text-[var(--txt)] ${className}`, ...rest, children: children }));
}
export function CardDescription({ className = '', children, ...rest }) {
    return (_jsx("p", { className: `mt-px text-[length:var(--fs-hint)] text-[var(--muted)] ${className}`, ...rest, children: children }));
}
/** Body slot — `.dcard-b` in the design system handoff. */
export function CardContent({ className = '', children, ...rest }) {
    return (_jsx("div", { className: `px-6 pt-4 pb-6 text-[length:var(--fs-body)] leading-[1.55] text-[var(--sub)] ${className}`, ...rest, children: children }));
}
export function CardFooter({ className = '', children, ...rest }) {
    return (_jsx("div", { className: `flex items-center justify-end gap-2 border-t border-[var(--bdr)] px-6 py-4 ${className}`, ...rest, children: children }));
}
export { card as cardVariants };
//# sourceMappingURL=Card.js.map