@cerberus-design/react/dist/components/split-button/button.js

The Cerberus Design React component library.

import { jsxs, jsx } from 'react/jsx-runtime';
import { useCerberusContext } from '../../context/cerberus.js';
import { splitProps } from '../../utils/index.js';
import { ButtonParts } from '../button/parts.js';
import { ButtonGroup } from '../button/primitives.js';
import { Menu, MenuTrigger, MenuContent } from '../menu/menu.js';
import { IconButton } from '../icon-button/button.js';

function SplitButton(props) {
  const [elProps, { usage = "filled", actionText }, actionProps] = splitProps(
    props,
    ["children"],
    ["usage", "actionText"]
  );
  const { icons } = useCerberusContext();
  const { selectArrow: SelectArrow } = icons;
  const iconShape = actionProps.shape === "rounded" ? "circle" : "square";
  return /* @__PURE__ */ jsxs(ButtonGroup, { layout: "attached", shape: actionProps.shape, children: [
    /* @__PURE__ */ jsxs(ButtonParts.Root, { usage, ...actionProps, children: [
      /* @__PURE__ */ jsx(ButtonParts.Icon, {}),
      actionText
    ] }),
    /* @__PURE__ */ jsxs(Menu, { children: [
      /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(
        IconButton,
        {
          ariaLabel: "More options",
          palette: actionProps.palette,
          disabled: actionProps.pending,
          shape: iconShape,
          usage,
          children: /* @__PURE__ */ jsx(SelectArrow, {})
        }
      ) }),
      /* @__PURE__ */ jsx(MenuContent, { children: elProps.children })
    ] })
  ] });
}

export { SplitButton };