shelving/ui/style/Flex.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { getClass, getModuleClass } from "../util/css.js";
import FLEX_CSS from "./Flex.module.css";
import { getGapClass } from "./Gap.js";
/** Get the flex class for a component. Composes Gap variants so `<Flex gap-large>` etc. just work. */
export function getFlexClass(variants) {
    return getClass(getModuleClass(FLEX_CSS, "flex", variants), getGapClass(variants));
}
/**
 * Dumb flex box — wraps children in a `<div>` with the flex class applied. Carries no external
 * spacing of its own; if you need block-level margins around it, wrap in a `<Block>` or set them
 * on the parent. Other components can mix in flex layout directly via `getFlexClass(props)`.
 */
export function Flex({ children, ...variants }) {
    return _jsx("div", { className: getFlexClass(variants), children: children });
}