@veracity/vui/dist/box/box.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { jsx } from "react/jsx-runtime";

//#region src/box/box.tsx
const BoxBase = styled.divBox`
  display: flex;
  min-width: 0;
  transition-duration: normal;
`;
/** Organizes content layout into columns or rows with easy centering. */
const Box = vui((props, ref) => {
	const { align, center, centerH, centerV, className, column, direction, elevation, hoverShadow: hoverBoxShadow, justify, radius: borderRadius, boxShadow, shadow, wrap, ...rest } = omitThemingProps(props);
	const styles = useStyleConfig("Box", props);
	const aliasedProps = filterUndefined({
		alignItems: align ?? (center || (column ? centerH : centerV) ? "center" : void 0),
		borderRadius,
		boxShadow: boxShadow ?? elevation ?? shadow,
		flexDirection: direction ?? (column ? "column" : void 0),
		flexWrap: wrap ? "wrap" : void 0,
		justifyContent: justify ?? (center || (column ? centerV : centerH) ? "center" : void 0)
	});
	return /* @__PURE__ */ jsx(BoxBase, {
		className: cs("vui-box", className),
		ref,
		...styles,
		...aliasedProps,
		...rest
	});
});
Box.displayName = "Box";

//#endregion
export { Box, Box as default, BoxBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=box.js.map