mt-flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
19 lines (18 loc) • 1.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const tailwind_merge_1 = require("tailwind-merge");
const __1 = require("../../");
const merge_deep_1 = require("../../helpers/merge-deep");
const ButtonGroup = ({ children, className, outline, pill, theme: customTheme = {}, ...props }) => {
const items = (0, react_1.useMemo)(() => react_1.Children.map(children, (child, index) => (0, react_1.cloneElement)(child, {
outline,
pill,
positionInGroup: index === 0 ? 'start' : index === children.length - 1 ? 'end' : 'middle',
})), [children, outline, pill]);
const theme = (0, merge_deep_1.mergeDeep)((0, __1.useTheme)().theme.buttonGroup, customTheme);
return ((0, jsx_runtime_1.jsx)("div", { className: (0, tailwind_merge_1.twMerge)(theme.base, className), role: "group", ...props, children: items }));
};
ButtonGroup.displayName = 'Button.Group';
exports.default = ButtonGroup;