pouncejs/dist/cjs/components/Checkbox/Checkbox.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("../Box"));

var _useCheckboxStyles = _interopRequireDefault(require("./useCheckboxStyles"));

/**
 *  Your bread & butter checkbox element. Nothing new here
 *  */
var Checkbox = /*#__PURE__*/_react.default.forwardRef(function Checkbox(_ref, ref) {
  var checked = _ref.checked,
      label = _ref.label,
      disabled = _ref.disabled,
      readOnly = _ref.readOnly,
      invalid = _ref.invalid,
      indeterminate = _ref.indeterminate,
      hidden = _ref.hidden,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["checked", "label", "disabled", "readOnly", "invalid", "indeterminate", "hidden"]);
  var checkboxStyles = (0, _useCheckboxStyles.default)({
    invalid: invalid,
    checked: checked,
    indeterminate: indeterminate
  });

  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.default.createElement(_Box.default, {
    as: "label",
    display: "inline-flex",
    alignItems: "center",
    cursor: "pointer",
    fontSize: "medium",
    fontWeight: "medium",
    verticalAlign: "top",
    "aria-disabled": disabled,
    hidden: hidden,
    "aria-hidden": hidden
  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    position: "relative",
    borderRadius: "circle",
    p: 2
  }, checkboxStyles), /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    ref: ref,
    as: "input",
    cursor: "pointer",
    position: "absolute",
    opacity: 0,
    type: "checkbox",
    readOnly: readOnly,
    "aria-readonly": readOnly,
    "aria-invalid": invalid,
    "aria-checked": checked,
    checked: checked,
    disabled: disabled
  }, rest))), label && /*#__PURE__*/_react.default.createElement(_Box.default, {
    as: "span",
    userSelect: "none"
  }, label));
});

var _default = /*#__PURE__*/_react.default.memo(Checkbox);

exports.default = _default;