flowbite-react/dist/esm/components/Button/ButtonGroup.mjs

Official React components built for Flowbite and Tailwind CSS

import { jsx } from 'react/jsx-runtime';
import { useMemo, Children, isValidElement, cloneElement } from 'react';
import { twMerge } from 'tailwind-merge';
import { mergeDeep } from '../../helpers/merge-deep.mjs';
import { getTheme } from '../../theme-store/index.mjs';

const processChildren = (children, outline, pill) => {
  return Children.map(children, (child, index) => {
    if (isValidElement(child)) {
      if (child.props.children) {
        return cloneElement(child, {
          ...child.props,
          children: processChildren(child.props.children, outline, pill),
          positionInGroup: determinePosition(index, Children.count(children))
        });
      } else {
        return cloneElement(child, {
          outline,
          pill,
          positionInGroup: determinePosition(index, Children.count(children))
        });
      }
    }
    return child;
  });
};
const determinePosition = (index, totalChildren) => {
  return index === 0 ? "start" : index === totalChildren - 1 ? "end" : "middle";
};
const ButtonGroup = ({
  children,
  className,
  outline,
  pill,
  theme: customTheme = {},
  ...props
}) => {
  const items = useMemo(() => processChildren(children, outline, pill), [children, outline, pill]);
  const theme = mergeDeep(getTheme().buttonGroup, customTheme);
  return /* @__PURE__ */ jsx("div", { className: twMerge(theme.base, className), role: "group", ...props, children: items });
};
ButtonGroup.displayName = "Button.Group";

export { ButtonGroup };
//# sourceMappingURL=ButtonGroup.mjs.map