react-vite-themes/dist/components/atoms/Card/Card.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../../../utils';
export const Card = ({ children, variant = 'neutral', style = 'elevated', padding = 'md', header, footer, isHoverable = false, image, className, ...props }) => {
    const cardClasses = cn('card', `card--${variant}`, `card--${style}`, `card--padding-${padding}`, isHoverable && 'card--hoverable', image && 'card--with-image', className);
    // Check if children contain absolutely positioned content
    const hasAbsoluteContent = React.Children.toArray(children).some((child) => React.isValidElement(child) &&
        typeof child.props?.className === 'string' &&
        child.props.className.includes('position-absolute'));
    return (_jsxs("div", { className: cardClasses, ...props, children: [image && (_jsx("div", { className: cn("card__image", image.containFit && "card__image--contain-fit"), children: _jsx("img", { src: image.src, alt: image.alt || '', style: {
                        height: image.height,
                        objectFit: image.objectFit || 'cover'
                    } }) })), header && _jsx("div", { className: "card__header", children: header }), hasAbsoluteContent ? (
            // Render children directly in card container for absolute positioning
            children) : (
            // Render children in content div for normal cards
            _jsx("div", { className: "card__content", children: children })), footer && _jsx("div", { className: "card__footer", children: footer })] }));
};