@shopgate/engage/components/Toggle/index.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { label, checkbox, thumb, container } from "./style";

/**
 * The Toggle component
 * @param {Object} props The component props
 * @returns {JSX.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Toggle = ({
  id,
  checked,
  className,
  onChange,
  disabled
}) => /*#__PURE__*/_jsx("div", {
  className: className,
  children: /*#__PURE__*/_jsxs("div", {
    className: container,
    children: [/*#__PURE__*/_jsx("input", {
      type: "checkbox",
      id: id,
      className: classNames(checkbox),
      checked: checked,
      "aria-checked": checked,
      onChange: onChange,
      disabled: disabled,
      "aria-labelledby": `${id}-label`
    }), /*#__PURE__*/_jsx("div", {
      className: label
    }), /*#__PURE__*/_jsx("div", {
      className: thumb
    })]
  })
});
Toggle.defaultProps = {
  checked: false,
  className: null,
  onChange: null,
  disabled: false
};
export default Toggle;