braid-design-system
Version:
Themeable design system for the SEEK Group
47 lines (46 loc) • 1.18 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { alignToFlexAlign, alignYToFlexAlign } from "../../utils/align.mjs";
import { Box } from "../Box/Box.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { fitContent, maxWidth } from "./Spread.css.mjs";
const Spread = ({
component,
children,
space,
direction = "horizontal",
align,
alignY = "top",
data,
...restProps
}) => {
const isVertical = direction === "vertical";
const isHorizontal = !isVertical;
let alignItems;
if (align && isVertical) {
alignItems = alignToFlexAlign(align);
} else if (isHorizontal) {
alignItems = alignYToFlexAlign(alignY);
}
return /* @__PURE__ */ jsx(
Box,
{
component,
display: "flex",
flexDirection: isVertical ? "column" : "row",
width: "full",
height: isVertical ? "full" : void 0,
justifyContent: "spaceBetween",
alignItems,
gap: space,
className: [
isHorizontal ? fitContent : void 0,
isVertical ? maxWidth : void 0
],
...buildDataAttributes({ data, validateRestProps: restProps }),
children
}
);
};
export {
Spread
};