@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
24 lines (23 loc) • 1.42 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import tkns from '@wonderflow/tokens/platforms/web/tokens.json';
import clsx from 'clsx';
import { forwardRef } from 'react';
import * as styles from './stack.module.css';
export const Stack = forwardRef(({ children, className, rowGap, columnGap, as: Wrapper = 'div', inline = false, direction = 'column', wrap = false, fill = true, vAlign = 'initial', hAlign = 'initial', hPadding, vPadding, style, maxWidth, ...otherProps }, forwardedRef) => {
const alignmentTemplate = (prop) => {
if (prop.includes('start') || prop.includes('end')) {
return `flex-${prop}`;
}
return prop;
};
const computedStyle = {
'--r-gap': rowGap ? tkns.space[rowGap] : 0,
'--c-gap': columnGap ? tkns.space[columnGap] : 0,
'--v-align': vAlign && alignmentTemplate(vAlign),
'--h-align': hAlign && alignmentTemplate(hAlign),
'--v-padding': vPadding ? tkns.space[vPadding] : 0,
'--h-padding': hPadding ? tkns.space[hPadding] : 0,
'--max-w': maxWidth,
};
return (_jsx(Wrapper, { ref: forwardedRef, style: { ...computedStyle, ...style }, "data-stack-inline": inline, "data-stack-wrap": wrap, "data-stack-direction": direction, "data-stack-fill": fill, "data-stack-has-padding": Boolean(hPadding ?? vPadding), className: clsx(styles.Stack, className), ...otherProps, children: children }));
});