@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
20 lines (19 loc) • 993 B
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 './grid.module.css';
import { GridItem } from './item/grid-item';
export const Grid = forwardRef(({ className, children, columns, rows, rowGap, columnGap, style, filling = 'fill', colMinWidth = '10rem', rowMinHeight = '1fr', ...otherProps }, forwardedRef) => {
const computedStyle = {
'--row-gap': rowGap ? tkns.space[rowGap] : 0,
'--column-gap': columnGap ? tkns.space[columnGap] : 0,
'--columns': columns,
'--column-min-w': colMinWidth,
'--rows': rows,
'--row-min-h': rowMinHeight,
};
return (_jsx("ul", { className: clsx(styles.Grid, className), style: { ...computedStyle, ...style }, "data-grid-filling-type": filling, ref: forwardedRef, ...otherProps, children: children }));
});
Grid.displayName = 'Grid';
Grid.Item = GridItem;