import { _ as _defineProperty } from '../defineProperty-CEd-kZQW.js';
import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default, { useContext, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import VisuallyHidden from '@reach/visually-hidden';
import CKIcon from '../ck-icon/index.js';
import { _ as _slicedToArray } from '../slicedToArray-BB-AwwkK.js';
import { u as useId } from '../floating-ui.react-cWPyyUrN.js';
import cx from 'classnames';
import { ButtonGroupContext } from './button-group.js';
export { default as ButtonGroup } from './button-group.js';
import '../ck-icon/assets/icon-map/index.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../typeof-CgC7Bq6K.js';
import '../toConsumableArray-dKQYsfpV.js';
import '../index-qSfOyGhk.js';
import 'react-dom';

var _excluded$1 = ["is", "color", "size", "icon", "disabled", "className", "children", "onMouseDown", "onBlur", "onClick", "active"];
var SIZES = {
  sm: "text-sm py-1 px-3",
  md: "text-sm py-2 px-4 h-10",
  lg: "text-sm py-3 px-5",
  icon: "p-2 h-10"
};
var GROUP_SIZES = {
  "horizontal-sm": "h-full px-2",
  "horizontal-md": "h-full px-3",
  "horizontal-lg": "h-full px-4",
  "vertical-sm": "p-1 w-full",
  "vertical-md": "p-1 w-full",
  "vertical-lg": "p-2 w-full"
};
var TOKENS = {
  primary: "text-white hover:text-white focus:text-white bg-red-500 hover:bg-red-600",
  secondary: "text-gray-800 bg-white hover:bg-gray-50 border-gray-200",
  tertiary: "text-gray-800 bg-transparent hover:bg-gray-50",
  plain: ""
};
var DISABLED_CLASSES = "text-gray-600 bg-gray-200";
var COLOR_FALLBACK = {
  red: TOKENS["primary"],
  white: TOKENS["secondary"],
  plain: TOKENS["tertiary"],
  gray: TOKENS["secondary"],
  yellow: "text-white bg-yellow-500 hover:bg-yellow-600",
  blue: "text-white bg-blue-500 hover:bg-blue-600",
  green: "text-white bg-green-500 hover:bg-green-600",
  "light-blue": "text-gray-900 bg-blue-200 hover:bg-blue-300",
  "light-green": "text-gray-900 bg-green-200 hover:bg-green-300 focus:bg-green-300",
  "light-yellow": "text-gray-900 bg-yellow-200 hover:bg-yellow-300",
  "light-red": "text-gray-900 bg-red-200 hover:bg-red-300"
};
/**
 * @param {Object} props
 * @param {"primary"|"secondary"|"tertiary"|"plain"} props.is
 * @param {"sm"|"md"|"lg"} props.size
 * @param {string} props.icon
 * @param {boolean} props.disabled
 * @param className any custom classes to be applied to button
 */

var Button = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
  var _cx;

  var is = _ref.is,
      color = _ref.color,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? "md" : _ref$size,
      icon = _ref.icon,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      className = _ref.className,
      children = _ref.children,
      _ref$onMouseDown = _ref.onMouseDown,
      onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
      _ref$onBlur = _ref.onBlur,
      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
      onClick = _ref.onClick,
      active = _ref.active,
      props = _objectWithoutProperties(_ref, _excluded$1);

  var id = useId();
  var groupContext = useContext(ButtonGroupContext);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      clicked = _useState2[0],
      setClicked = _useState2[1];

  var DEFAULT = "leading-snug rounded border border-solid border-transparent no-underline font-sans font-semibold transition duration-200 hover:no-underline focus:no-underline focus:outline-none align-middle text-center";
  var isDisabled = disabled && (Object.keys(TOKENS).includes(is) || color || groupContext.present);
  var usesTokenStyles = Object.keys(TOKENS).includes(is) || isDisabled || color;
  var isCurrentActiveGroupMember = groupContext.activeId === id || null;
  var classes = cx(className, disabled ? "cursor-default" : "cursor-pointer", (_cx = {}, _defineProperty(_cx, DEFAULT, usesTokenStyles || groupContext.present), _defineProperty(_cx, SIZES[size], usesTokenStyles && !groupContext.present), _defineProperty(_cx, COLOR_FALLBACK[color], color && !isDisabled && !groupContext.present), _defineProperty(_cx, TOKENS[is], is && !isDisabled && !groupContext.present), _defineProperty(_cx, DISABLED_CLASSES, isDisabled), _defineProperty(_cx, "focus:outline-blue", !clicked), _defineProperty(_cx, "inline-block", props.href), _defineProperty(_cx, "inline-flex items-center justify-center", Boolean(icon) && usesTokenStyles), _defineProperty(_cx, GROUP_SIZES[groupContext.groupSize], groupContext.present && size !== "icon"), _defineProperty(_cx, "h-10 w-10", groupContext.present && size === "icon"), _defineProperty(_cx, "hover:bg-gray-50", groupContext.present && !isDisabled), _defineProperty(_cx, "bg-gray-100", isCurrentActiveGroupMember), _cx)); // Set active state in button group

  useEffect(function () {
    if (!groupContext.present) return;

    if (active) {
      groupContext.setActiveId(id);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [active]);

  var handleMouseDown = function handleMouseDown(event) {
    setClicked(true);
    onMouseDown(event);
  };

  var handleBlur = function handleBlur(event) {
    setClicked(false);
    onBlur(event);
  };

  var handleClick = function handleClick(event) {
    if (groupContext.setActiveId) {
      groupContext.setActiveId(id);
    }

    if (onClick) onClick(event);
  };

  var Component = props.href ? "a" : "button";
  return /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
    ref: ref,
    className: classes,
    disabled: disabled,
    onMouseDown: handleMouseDown,
    onBlur: handleBlur,
    onClick: handleClick,
    "aria-pressed": isCurrentActiveGroupMember
  }), icon && /*#__PURE__*/React__default.createElement(CKIcon, {
    name: icon,
    className: "mr-2 pointer-events-none"
  }), children);
});
Button.propTypes = {
  type: PropTypes.oneOf(["button", "submit", "reset"]),
  className: PropTypes.string,
  children: PropTypes.node,
  is: PropTypes.oneOf(["primary", // main color
  "secondary", // white
  "tertiary", // transparent with bg on hover
  "plain" // sets defaults without color for easy customization
  ]),

  /** Temporary fallback for "is" prop */
  color: PropTypes.oneOf(["red", "white", "plain"]),
  disabled: PropTypes.bool,
  size: PropTypes.oneOf(Object.keys(SIZES)),
  icon: PropTypes.elementType,
  href: PropTypes.string,

  /** Used to manage active state in button group */
  active: PropTypes.bool,
  onMouseDown: PropTypes.func,
  onBlur: PropTypes.func,
  onClick: PropTypes.func
};

var _excluded = ["icon", "label"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
/**
 * @param {Object} props
 * @param {"primary"|"secondary"|"tertiary"|"plain"} props.is
 * @param {"sm"|"md"|"lg"} props.size
 * @param {string} props.icon
 * @param props.label A11y label
 * @param className any custom classes to be applied to button
 */

var IconButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
  var icon = _ref.icon,
      label = _ref.label,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React__default.createElement(Button, _extends({}, props, {
    size: "icon",
    ref: ref
  }), /*#__PURE__*/React__default.createElement(VisuallyHidden, null, label), /*#__PURE__*/React__default.createElement(CKIcon, {
    name: icon,
    className: "pointer-events-none"
  }));
});
IconButton.propTypes = _objectSpread({
  icon: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired
}, Button === null || Button === void 0 ? void 0 : Button.propTypes);

export { IconButton, TOKENS, Button as default };
