@drivy/cobalt/components/Buttons/ButtonsGroup.js

Opinionated design system for Drivy's projects.

import { jsx } from "react/jsx-runtime";
import classnames from "classnames";
import react, { Children } from "react";
import Button from "./Button/index.js";
import DefaultButton from "./DefaultButton/index.js";
import GhostButton from "./GhostButton/index.js";
import InversedButton from "./InversedButton/index.js";
const isButton = (component)=>/*#__PURE__*/ react.isValidElement(component) && (component.type === GhostButton || component.type === GhostButton.Link || component.type === InversedButton || component.type === InversedButton.Link || component.type === DefaultButton || component.type === DefaultButton.Link || component.type === Button);
const ButtonsGroup = ({ className, children, align })=>/*#__PURE__*/ jsx("div", {
        className: classnames(className, "cobalt-buttons-group", {
            "cobalt-buttons-group--right": "right" === align,
            "cobalt-buttons-group--center": "center" === align
        }),
        children: Children.toArray(children).map((child, index)=>{
            if (!isButton(child)) return child;
            const childKey = /*#__PURE__*/ react.isValidElement(child) && null != child.key ? child.key : `button-group-item-${index}`;
            return /*#__PURE__*/ react.cloneElement(child, {
                key: childKey,
                className: classnames("cobalt-buttons-group__item", {
                    "cobalt-buttons-group__item--fullWidth": "fullWidth" === align
                }),
                fullWidth: "fullWidth" === align
            });
        })
    });
const Buttons_ButtonsGroup = ButtonsGroup;
export default Buttons_ButtonsGroup;

//# sourceMappingURL=ButtonsGroup.js.map