@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
27 lines (26 loc) • 1.18 kB
JavaScript
/* eslint-disable @typescript-eslint/no-explicit-any */ import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import classNames from "classnames";
/**
* Responsive CSS Grid layout container, renders its children as columns (a single full-width col by default)
*/ const Grid = /*#__PURE__*/ forwardRef(({ children, className, style, gap, cols = 1, small, medium, large, xl, xxl, ...props }, ref)=>{
const styles = {
...style,
["--bfl-gap"]: typeof gap === "number" ? gap + "px" : typeof gap === "string" ? gap : undefined,
["--bf-grid-cols"]: cols,
["--bf-grid-s-cols"]: small ?? cols,
["--bf-grid-m-cols"]: medium ?? small ?? cols,
["--bf-grid-l-cols"]: large ?? medium ?? small ?? cols,
["--bf-grid-xl-cols"]: xl ?? large ?? medium ?? small ?? cols,
["--bf-grid-xxl-cols"]: xxl ?? xl ?? large ?? medium ?? small ?? cols
};
return /*#__PURE__*/ _jsx("div", {
...props,
ref: ref,
className: classNames("bfl-grid bf-grid", className),
style: styles,
children: children
});
});
Grid.displayName = "Grid";
export default Grid;