import React__default from 'react';
import Text from '../text/index.js';
import ToggleInput from '../toggle-input/index.js';
import Stack from '../stack/index.js';
import InlineValidation from '../inline-validation/index.js';
import { useField, useFormContext } from '../use-form/index.js';
import PropTypes from 'prop-types';
import '../extends-C4cduGrv.js';
import '../defineProperty-CEd-kZQW.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import 'classnames';
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 '../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 ToggleField(_ref) {
  var _context$config;

  var id = _ref.id,
      name = _ref.name,
      label = _ref.label,
      description = _ref.description,
      value = _ref.value,
      onChange = _ref.onChange;
  var field = useField({
    id: id,
    name: name,
    value: value,
    onChange: onChange
  });
  var context = useFormContext() || {};
  return /*#__PURE__*/React__default.createElement("div", {
    className: "flex gap-8"
  }, /*#__PURE__*/React__default.createElement(ToggleInput, {
    id: field.id,
    name: name,
    onBlur: field.onBlur,
    onChange: field.onChange,
    checked: field.value,
    "aria-describedby": "".concat(field.id, "-desc"),
    className: "flex-shrink-0"
  }), /*#__PURE__*/React__default.createElement(Stack, {
    spacing: 2
  }, /*#__PURE__*/React__default.createElement(Text, {
    as: "label",
    htmlFor: field.id,
    weight: "semibold",
    color: "gray-700"
  }, label), description && /*#__PURE__*/React__default.createElement(Text, {
    id: "".concat(field.id, "-desc"),
    size: "sm",
    color: "gray-600"
  }, description), ((_context$config = context.config) === null || _context$config === void 0 ? void 0 : _context$config.validation) && /*#__PURE__*/React__default.createElement(InlineValidation, {
    name: name
  })));
}

ToggleField.propTypes = {
  className: PropTypes.string,
  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  description: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func
};

export { ToggleField as default };
