pouncejs/dist/esm/components/Switch/Switch.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import { useId } from '@reach/auto-id';
import React from 'react';
import { theme } from '../../theme';
import Box from '../Box';
import Flex from '../Flex';
var switchFocusStyles = {
  outline: "1px solid " + theme.colors['blue-200']
};
/**
 *  A Switch is a typical Checkbox with a different UI. It's mainly used for settings pages, when
 *  enabling or disabling feature
 */

var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
  var checked = _ref.checked,
      label = _ref.label,
      _ref$checkedText = _ref.checkedText,
      checkedText = _ref$checkedText === void 0 ? 'ON' : _ref$checkedText,
      _ref$uncheckedText = _ref.uncheckedText,
      uncheckedText = _ref$uncheckedText === void 0 ? 'OFF' : _ref$uncheckedText,
      disabled = _ref.disabled,
      invalid = _ref.invalid,
      readOnly = _ref.readOnly,
      hidden = _ref.hidden,
      id = _ref.id,
      rest = _objectWithoutPropertiesLoose(_ref, ["checked", "label", "checkedText", "uncheckedText", "disabled", "invalid", "readOnly", "hidden", "id"]);

  var inputId = useId(id);

  if (!label && !(rest['aria-label'] || rest['aria-labelledby'])) {
    console.error('The `label` prop was omitted without providing an `aria-label` or `aria-labelledby` attribute');
  }

  return /*#__PURE__*/React.createElement(Box, {
    as: "span",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    cursor: "pointer",
    fontSize: "medium",
    "aria-disabled": disabled,
    hidden: hidden,
    "aria-hidden": hidden
  }, label && /*#__PURE__*/React.createElement(Box, {
    as: "label",
    userSelect: "none",
    mr: 2,
    htmlFor: inputId
  }, label), /*#__PURE__*/React.createElement(Flex, {
    position: "relative",
    align: "center",
    borderRadius: "pill",
    width: 54,
    height: 27,
    p: 1,
    transition: "background-color 0.15s linear",
    backgroundColor: invalid ? 'red-300' : checked ? 'blue-400' : 'gray-600',
    _focusWithin: switchFocusStyles
  }, /*#__PURE__*/React.createElement(Box, {
    width: 21,
    height: 21,
    borderRadius: "circle",
    bg: "white",
    transform: checked ? 'translate3D(120%, 0, 0)' : 'translate3D(0, 0, 0)',
    transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
  }), /*#__PURE__*/React.createElement(Box, {
    fontWeight: "bold",
    fontSize: "x-small",
    userSelect: "none",
    mx: "7px",
    position: "absolute",
    left: checked ? 0 : undefined,
    right: !checked ? 0 : undefined
  }, checked ? checkedText : uncheckedText), /*#__PURE__*/React.createElement(Box, _extends({
    ref: ref,
    as: "input",
    cursor: "pointer",
    position: "absolute",
    height: "100%",
    width: "100%",
    top: 0,
    left: 0,
    margin: "auto",
    opacity: 0,
    type: "checkbox",
    readOnly: readOnly,
    "aria-readonly": readOnly,
    "aria-checked": checked,
    "aria-invalid": invalid,
    checked: checked,
    disabled: disabled,
    id: inputId
  }, rest))));
});
export default /*#__PURE__*/React.memo(Switch);