@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
31 lines • 1.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlokButtonGroup = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const Foundations_1 = require("../../Foundations");
const useIsDarkTheme_1 = require("../../useIsDarkTheme");
const classes = {
normal: (0, css_1.css)({ display: "inline-flex", gap: "0.25rem" }),
rounded: (0, css_1.css)({
border: `1px solid ${Foundations_1.semanticTokens.borderColor.default}`,
borderRadius: Foundations_1.borderRadiusFull,
padding: "0.1875rem",
}),
square: (0, css_1.css)({
border: `1px solid ${Foundations_1.semanticTokens.borderColor.default}`,
borderRadius: Foundations_1.borderRadiusMd,
padding: "0.1875rem",
}),
stacked: (0, css_1.css)({ flexDirection: "column" }),
fullWidth: (0, css_1.css)({ display: "flex", button: (0, css_1.css)({ justifyContent: "start" }) }),
darkVariant: (0, css_1.css)({
borderColor: Foundations_1.semanticTokens.borderColor.dark,
}),
};
const BlokButtonGroup = ({ children, variant = "normal", orientation = "horizontal", fullWidth = false, className, }) => {
const isDarkTheme = (0, useIsDarkTheme_1.useIsDarkTheme)();
return ((0, jsx_runtime_1.jsx)("div", { role: "group", className: (0, css_1.cx)(classes.normal, variant === "rounded" && classes.rounded, variant === "square" && classes.square, orientation === "vertical" && classes.stacked, fullWidth && classes.fullWidth, isDarkTheme && classes.darkVariant, className), children: children }));
};
exports.BlokButtonGroup = BlokButtonGroup;
//# sourceMappingURL=BlokButtonGroup.js.map