@pantheon-systems/design-toolkit-react/dist/Toggles/Switch.js

Pantheon's React Design Toolkit

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { Checkbox } from 'informed';
import PropTypes from 'prop-types';
import { useState } from 'react';
import { jsxs, jsx } from 'react/jsx-runtime';

var Switch = function Switch(_ref) {
  var disabled = _ref.disabled,
    falseLabel = _ref.falseLabel,
    field = _ref.field,
    humanName = _ref.humanName,
    initialValue = _ref.initialValue,
    trueLabel = _ref.trueLabel;
  var _useState = useState(initialValue),
    _useState2 = _slicedToArray(_useState, 2),
    isChecked = _useState2[0],
    setIsChecked = _useState2[1];
  return /*#__PURE__*/jsxs("fieldset", {
    disabled: disabled,
    children: [/*#__PURE__*/jsx("legend", {
      className: "sr-only",
      children: humanName
    }), /*#__PURE__*/jsx(Checkbox, {
      className: "switch-checkbox absolute opacity-0",
      field: field,
      id: field,
      initialValue: initialValue,
      onValueChange: setIsChecked
    }), /*#__PURE__*/jsx("label", {
      className: "switch text-gray-4 cursor-pointer font-normal pl-14 relative ".concat(isChecked ? 'is-checked' : ''),
      htmlFor: field,
      children: isChecked ? trueLabel : falseLabel
    })]
  });
};
Switch.defaultProps = {
  disabled: false,
  initialValue: false
};
Switch.propTypes = {
  disabled: PropTypes.bool,
  falseLabel: PropTypes.string.isRequired,
  field: PropTypes.string.isRequired,
  humanName: PropTypes.string.isRequired,
  initialValue: PropTypes.bool,
  trueLabel: PropTypes.string.isRequired
};
var Switch$1 = Switch;

export { Switch$1 as default };
//# sourceMappingURL=Switch.js.map