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

Opinionated design system for Drivy's projects.

import { jsx } from 'react/jsx-runtime';
import cx 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) => 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 }) => (jsx("div", { className: cx(className, "cobalt-buttons-group", {
        "cobalt-buttons-group--right": align === "right",
        "cobalt-buttons-group--center": align === "center",
    }), children: Children.toArray(children).map((child, index) => {
        if (!isButton(child)) {
            return child;
        }
        const childKey = React.isValidElement(child) && child.key != null
            ? child.key
            : `button-group-item-${index}`;
        return React.cloneElement(child, {
            key: childKey,
            className: cx("cobalt-buttons-group__item", {
                "cobalt-buttons-group__item--fullWidth": align === "fullWidth",
            }),
            fullWidth: align === "fullWidth",
        });
    }) }));

export { ButtonsGroup as default };
//# sourceMappingURL=ButtonsGroup.js.map