@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
14 lines (13 loc) • 1.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import tkns from '@wonderflow/tokens/platforms/web/tokens.json';
import clsx from 'clsx';
import { forwardRef } from 'react';
import { Stack } from '../..';
import * as styles from './card.module.css';
export const Card = forwardRef(({ as: Wrapper = 'div', children, className, padding = 24, radius = 8, left, right, dimmed, bordered, columnGap = 24, rowGap = 24, vAlign = 'start', hAlign = 'space-between', vibrant = false, highlightOnHover = false, wrap, style, ...otherProps }, forwardedRef) => {
const dynamicStyle = {
'--padding': padding && tkns.space[padding],
'--radius': radius && tkns.radius[radius],
};
return (_jsx(Wrapper, { ref: forwardedRef, className: clsx(styles.Card, className), style: { ...dynamicStyle, ...style }, "data-card-dimmed": dimmed, "data-card-bordered": bordered, "data-card-vibrant": vibrant, "data-card-highlight-hover": highlightOnHover, ...otherProps, children: _jsxs(Stack, { "data-inner-element": "Row", direction: "row", className: styles.Row, fill: false, vAlign: vAlign, hAlign: hAlign, columnGap: columnGap, rowGap: rowGap, wrap: wrap, children: [left && _jsx("div", { className: styles.Left, "data-inner-element": "Left", children: left }), children && (_jsx("div", { className: styles.Content, "data-inner-element": "Content", children: children })), right && (_jsx("div", { className: styles.Right, "data-inner-element": "Right", children: right }))] }) }));
});