@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
67 lines (66 loc) • 2.75 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import classNames from "classnames";
const Box = /*#__PURE__*/ forwardRef(({ shadow = false, border = false, borderTop = false, borderRight = false, borderBottom = false, borderLeft = false, radius = false, radiusTopRight = false, radiusTopLeft = false, radiusBottomRight = false, radiusBottomLeft = false, padding = false, paddingInline = false, paddingBlock = false, background = false, theme = "inherit", ...props }, ref)=>{
const style = props.style ?? {};
if (typeof padding === "number") {
style.padding = padding;
}
if (typeof paddingInline === "number") {
style.paddingInline = paddingInline;
}
if (typeof paddingBlock === "number") {
style.paddingBlock = paddingBlock;
}
if (radiusTopLeft) {
if (radiusTopLeft === true) {
style.borderTopLeftRadius = "var(--bf-radius)";
} else {
style.borderTopLeftRadius = `var(--bf-radius-${radiusTopLeft})`;
}
}
if (radiusTopRight) {
if (radiusTopRight === true) {
style.borderTopRightRadius = "var(--bf-radius)";
} else {
style.borderTopRightRadius = `var(--bf-radius-${radiusTopRight})`;
}
}
if (radiusBottomRight) {
if (radiusBottomRight === true) {
style.borderBottomRightRadius = "var(--bf-radius)";
} else {
style.borderBottomRightRadius = `var(--bf-radius-${radiusBottomRight})`;
}
}
if (radiusBottomLeft) {
if (radiusBottomLeft === true) {
style.borderBottomLeftRadius = "var(--bf-radius)";
} else {
style.borderBottomLeftRadius = `var(--bf-radius-${radiusBottomLeft})`;
}
}
return /*#__PURE__*/ _jsx("div", {
...props,
style: style,
className: classNames(props.className, {
"bfc-base-3-bg": background === true,
[`bfc-${background}-bg`]: typeof background === "string",
"bf-shadow": shadow === true,
"bf-border": border === true,
"bf-border-top": borderTop === true,
"bf-border-right": borderRight === true,
"bf-border-bottom": borderBottom === true,
"bf-border-left": borderLeft === true,
"bf-padding": padding === true,
"bf-padding-x": paddingInline === true,
"bf-padding-y": paddingBlock === true,
"bf-radius": radius === true,
[`bf-radius-${radius}`]: typeof radius === "string",
[`bf-theme-${theme}`]: typeof theme === "string" && theme !== "inherit"
}),
ref: ref
});
});
Box.displayName = "Box";
export default Box;