import React__default from 'react';
import Radio from '../radio/index.js';
import PropTypes from 'prop-types';
import { useField } from '../use-form/index.js';
import '../extends-C4cduGrv.js';
import '../defineProperty-CEd-kZQW.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import 'classnames';
import '../slicedToArray-BB-AwwkK.js';
import '../index-qSfOyGhk.js';
import '../typeof-CgC7Bq6K.js';
import '../auto-id.esm-Cly76abB.js';
import '../utils.esm-CKyxlHOy.js';
import '../warning-s9zGJbnw.js';
import '../_commonjsHelpers-_1FafXWI.js';
import '../use-progress/index.js';
import '../use-trailing-debounce/index.js';

function RadioField(_ref) {
  var id = _ref.id,
      name = _ref.name,
      label = _ref.label,
      value = _ref.value,
      onChange = _ref.onChange,
      checked = _ref.checked;
  // Value should not be passed into useField hook, because it would
  // override current form's value.
  var field = useField({
    id: id,
    name: name,
    onChange: onChange
  }); // Radiobutton is checked when cheched state is forced by props (controlled mode)
  // or current form value matches this radio's value

  var checkDefined = typeof checked !== "undefined";
  var isChecked = checkDefined && checked || !checkDefined && value === field.value;
  return /*#__PURE__*/React__default.createElement("div", {
    className: "flex items-center"
  }, /*#__PURE__*/React__default.createElement(Radio, {
    id: field.id,
    name: name,
    onBlur: field.onBlur,
    onChange: field.onChange,
    checked: isChecked,
    value: value
  }), /*#__PURE__*/React__default.createElement("label", {
    className: "ml-2 mb-0 font-sans text-gray-900",
    htmlFor: field.id
  }, label));
}

RadioField.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  checked: PropTypes.bool
};

export { RadioField as default };
