@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
32 lines (31 loc) • 1.76 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import classnames from "classnames";
const getDirectionClasses = (direction)=>{
const directionClasses = [];
if ("string" == typeof direction) directionClasses.push(`c-flex-${direction}`.replace("column", "col"));
else for (const [key, value] of Object.entries(direction))directionClasses.push(`${key}:c-flex-${value}`.replace("column", "col"));
return directionClasses;
};
const Flexible = ({ children, direction = "column", bottomPadding = false, isFullHeight = false })=>/*#__PURE__*/ jsx("div", {
className: classnames("cobalt-layout-flexible", getDirectionClasses(direction), {
"cobalt-layout--bottomPadding": bottomPadding,
"cobalt-layout--fullHeight": isFullHeight
}),
children: children
});
const FlexibleWithConstraint = ({ children, size, direction = "column", bottomPadding = false, isFullHeight = false })=>/*#__PURE__*/ jsx("div", {
className: classnames(`cobalt-layout-flexibleWithConstraint cobalt-layout-flexibleWithConstraint--${size}`, getDirectionClasses(direction), {
"cobalt-layout--bottomPadding": bottomPadding,
"cobalt-layout--fullHeight": isFullHeight
}),
children: children
});
const Fixed = ({ children, width, direction = "column", bottomPadding = false, isFullHeight = false })=>/*#__PURE__*/ jsx("div", {
className: classnames(`cobalt-layout-fixed cobalt-layout-fixed--${width}`, getDirectionClasses(direction), {
"cobalt-layout--bottomPadding": bottomPadding,
"cobalt-layout--fullHeight": isFullHeight
}),
children: children
});
export { Fixed, Flexible, FlexibleWithConstraint };
//# sourceMappingURL=index.js.map