import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _defineProperty } from '../defineProperty-CEd-kZQW.js';
import { _ as _slicedToArray } from '../slicedToArray-BB-AwwkK.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default, { createContext, useState } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

var _excluded = ["children", "className", "spacing", "orientation", "size"];
var HORIZONTAL_SIZES = {
  sm: "text-xs h-8",
  md: "text-sm h-10",
  lg: "text-sm h-12"
};
var VERTICAL_SIZES = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-sm"
};
var ButtonGroupContext = /*#__PURE__*/createContext({});

function ButtonGroup(_ref) {
  var _cx;

  var children = _ref.children,
      className = _ref.className,
      _ref$spacing = _ref.spacing,
      spacing = _ref$spacing === void 0 ? 1 : _ref$spacing,
      _ref$orientation = _ref.orientation,
      orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? "md" : _ref$size,
      props = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      activeId = _useState2[0],
      setActiveId = _useState2[1];

  var classes = cx("inline-grid auto-cols-fr auto-rows-fr border border-solid border-gray-200 items-center rounded overflow-hidden", className, "gap-".concat(spacing, " p-").concat(spacing), (_cx = {
    "grid-flow-col": orientation === "horizontal",
    "grid-flow-row": orientation === "vertical"
  }, _defineProperty(_cx, HORIZONTAL_SIZES[size], orientation === "horizontal"), _defineProperty(_cx, VERTICAL_SIZES[size], orientation === "vertical"), _cx));
  var contextValue = {
    present: true,
    groupSize: "".concat(orientation, "-").concat(size),
    activeId: activeId,
    setActiveId: setActiveId,
    orientation: orientation
  };
  return /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
    className: classes,
    "data-testid": "btn-group",
    role: "group"
  }), /*#__PURE__*/React__default.createElement(ButtonGroupContext.Provider, {
    value: contextValue
  }, children));
}
ButtonGroup.propTypes = {
  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
  size: PropTypes.oneOf(Object.keys(HORIZONTAL_SIZES)),
  className: PropTypes.string,
  children: PropTypes.node
};

export { ButtonGroupContext, ButtonGroup as default };
