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

The Cerberus Design React component library.

'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const jsxRuntime = require('react/jsx-runtime');
const cerberus = require('../../context/cerberus.cjs');
const index = require('../../utils/index.cjs');
const parts = require('../button/parts.cjs');
const primitives = require('../button/primitives.cjs');
const menu = require('../menu/menu.cjs');
const button = require('../icon-button/button.cjs');

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

exports.SplitButton = SplitButton;