@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
86 lines • 2.55 kB
JavaScript
import { forwardRef } from "react";
import classNames from "classnames";
import { jsx as _jsx } from "react/jsx-runtime";
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;