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