@blend-ui/core/dist/esm/Checkbox.js

Blend core cmponents

import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef } from 'react';
import styled from 'styled-components';
import { BlendIcon } from '@blend-ui/icons';
import BoxChecked from '@iconify/icons-bx/bxs-check-square';
import BoxEmpty from '@iconify/icons-bx/bxs-square';
import { useId } from '@reach/auto-id';
import PropTypes from 'prop-types';
import { useTheme } from './theme/ThemeProvider.js';
import Label from './Label.js';
var _excluded = ["checked"],
    _excluded2 = ["disabled", "color", "id", "onChange", "checked", "children"];
var StyledLabel = styled(Label).withConfig({
  displayName: "Checkbox__StyledLabel",
  componentId: "sc-w0kchr-0"
})(["cursor:pointer;vertical-align:middle;"]);
var StyledInput = styled.input.withConfig({
  displayName: "Checkbox__StyledInput",
  componentId: "sc-w0kchr-1"
})(["appearance:none;opacity:0;position:absolute;z-index:0;"]);
var CheckBoxWrapper = styled.div.withConfig({
  displayName: "Checkbox__CheckBoxWrapper",
  componentId: "sc-w0kchr-2"
})(["display:inline-flex;align-items:center;position:relative;vertical-align:middle;cursor:pointer;background-color:inherit;color:black;svg{}svg[data-name=\"checked\"]{display:none;}> input:hover ~ svg[data-name=\"empty\"]{color:black;}> input{&:focus ~ svg{}}> input:checked{& ~ svg[data-name=\"checked\"]{display:inline-block;color:black;}& ~ svg[data-name=\"empty\"]{display:none;}&:focus ~ svg{}&:hover ~ svg[data-name=\"checked\"]{color:black;}}&:disabled{opacity:0.25;}"]);

var CheckIcon = function CheckIcon(_ref) {
  var checked = _ref.checked,
      props = _objectWithoutProperties(_ref, _excluded);

  return checked ? /*#__PURE__*/React.createElement(BlendIcon, _extends({
    iconify: BoxChecked,
    "data-name": "checked"
  }, props)) : /*#__PURE__*/React.createElement(BlendIcon, _extends({
    iconify: BoxEmpty,
    "data-name": "empty"
  }, props));
};

var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
  var disabled = props.disabled,
      color = props.color,
      id = props.id,
      onChange = props.onChange,
      checked = props.checked,
      children = props.children,
      rest = _objectWithoutProperties(props, _excluded2); // Add 4px to Icon's height and width to account for size reduction caused by adding padding to SVG element
  //const borderAdjustedSize = (20 + 4).toString() + "px";


  var borderAdjustedSize = "1.5rem";
  var theme = useTheme();

  var _id = useId(id);

  var inputID = "blend-checkbox-".concat(_id);
  var wrapperID = "blend-checkbox-wrapper-".concat(_id); //variation:

  return /*#__PURE__*/React.createElement(CheckBoxWrapper, {
    disabled: disabled,
    id: wrapperID,
    onClick: onChange,
    ref: ref
  }, /*#__PURE__*/React.createElement(StyledInput, _extends({
    type: "checkbox"
  }, rest, {
    role: "checkbox",
    id: inputID,
    checked: checked,
    onChange: onChange
  })), /*#__PURE__*/React.createElement(CheckIcon, {
    checked: checked,
    size: borderAdjustedSize,
    color: color,
    theme: theme
  }), /*#__PURE__*/React.createElement(StyledLabel, {
    variation: "inline"
  }, children));
});
Checkbox.displayName = "Checkbox";
Checkbox.defaultProps = {
  color: "componentPrimary"
};
Checkbox.propTypes = {
  onChange: PropTypes.func.isRequired,
  color: PropTypes.string
};
Checkbox.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Checkbox",
  "props": {
    "color": {
      "defaultValue": {
        "value": "\"componentPrimary\"",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "onChange": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
export { Checkbox as default };