@oneloop/switch/lib/index.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Switch = void 0;
var _react = _interopRequireDefault(require("react"));
var _box = require("@oneloop/box");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var Switch = exports.Switch = function Switch(_ref) {
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
    as: "button",
    role: "switch",
    tx: "switches"
  }, props, {
    __css: {
      width: '42px',
      height: '22px',
      appearance: 'none',
      display: 'inline-block',
      verticalAlign: 'middle',
      padding: '2px 4px',
      borderRadius: 'circle',
      cursor: 'pointer',
      border: '1px solid #94A2AB',
      bg: '#94A2AB',
      position: 'relative',
      outline: 'none',
      transition: 'background-color .1s cubic-bezier(.4, 0, .2, 1)',
      '&::before': {
        content: "''",
        background: 'white',
        position: 'absolute',
        size: '16px',
        borderRadius: 'circle',
        top: '50%',
        left: 0,
        transform: 'translate(3px, -50%)',
        transition: 'transform .1s cubic-bezier(.4, 0, .2, 1)'
      },
      '&[aria-checked="true"]': {
        backgroundColor: '#6A88F2',
        '&::before': {
          transform: 'translate(21px, -50%)',
          bg: 'white'
        }
      },
      '&[disabled]': {
        bg: '#C2CCD3',
        border: '1px solid #C2CCD3',
        cursor: 'not-allowed',
        '&::before': {
          background: '#EAEEF1',
          boxShadow: 'none'
        }
      }
    }
  }));
};