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

Blend core cmponents

import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { BlendIcon } from '@blend-ui/icons';
import RadioChecked from '@iconify/icons-bx/bx-radio-circle-marked';
import RadioEmpty from '@iconify/icons-bx/bx-radio-circle';
import Label from './Label.js';
import { useTheme } from './theme/ThemeProvider.js';
import { useId } from '@reach/auto-id';
var _excluded = ["checked"],
    _excluded2 = ["checked", "disabled", "onChange", "children", "color", "id"];
/*
import {
  radioboxMarkedIcon as RadioChecked,
  radioboxBlankIcon as RadioEmpty,
  BlendIcon,
} from "@blend-ui/icons";
*/

var RadioWrap = styled.div.withConfig({
  displayName: "Radio__RadioWrap",
  componentId: "sc-mwkpiy-0"
})(["display:inline-block;color:black;cursor:pointer;vertical-align:middle;&:hover > svg{color:gray;}"]);
var RadioInput = styled.input.withConfig({
  displayName: "Radio__RadioInput",
  componentId: "sc-mwkpiy-1"
})(["appearance:none;opacity:0;position:absolute;z-index:0;& ~ svg{border:1px solid transparent;border-radius:50%;padding:2px;}&:focus{box-shadow:none;& ~ svg{border:1px solid black;background-color:white;}}&:checked ~ svg{color:black;}&:disabled ~ svg{color:black;}"]);
var LabelText = styled.span.withConfig({
  displayName: "Radio__LabelText",
  componentId: "sc-mwkpiy-2"
})(["cursor:pointer;vertical-align:middle;"]);

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

  return checked ? /*#__PURE__*/React.createElement(BlendIcon, _extends({
    iconify: RadioChecked
  }, props)) : /*#__PURE__*/React.createElement(BlendIcon, _extends({
    iconify: RadioEmpty
  }, props));
};

var Radio = /*#__PURE__*/forwardRef(function (props, ref) {
  var checked = props.checked,
      disabled = props.disabled,
      onChange = props.onChange,
      children = props.children,
      color = props.color,
      id = props.id,
      rest = _objectWithoutProperties(props, _excluded2); //const borderAdjustedSize = parseInt(size) + 4;
  //const borderAdjustedSize = "1.5rem";


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

  var _id = useId(id);

  var inputID = "blend-radio-".concat(_id);
  return /*#__PURE__*/React.createElement(Label, {
    onChange: onChange
  }, /*#__PURE__*/React.createElement(RadioWrap, {
    checked: checked,
    disabled: disabled
  }, /*#__PURE__*/React.createElement(RadioInput, _extends({
    type: "radio"
  }, rest, {
    ref: ref,
    id: inputID
  })), /*#__PURE__*/React.createElement(RadioIcon, {
    checked: checked,
    size: borderAdjustedSize,
    color: color,
    theme: theme
  })), /*#__PURE__*/React.createElement(LabelText, null, children));
});
/*
const Radio = forwardRef((props, ref) => {
  const { checked, disabled,...rest } = props;

  //const borderAdjustedSize = parseInt(size) + 4;
  //const borderAdjustedSize = "1.5rem";
  const borderAdjustedSize = "2.0rem";

  return (
    <RadioWrap checked={checked} disabled={disabled}>
      <RadioInput type="radio" {...rest} ref={ref} />
      <RadioIcon checked={checked} size={borderAdjustedSize} />
    </RadioWrap>
  );
});
*/

/*
Radio.defaultProps = {
  color: "primary",
  size: "24",
};
*/

/*
Radio.propTypes = {
  size: PropTypes.string,
};
*/

Radio.defaultProps = {
  color: "componentPrimary"
};
Radio.propTypes = {
  onChange: PropTypes.func.isRequired,
  color: PropTypes.string
};
Radio.displayName = "Radio";
Radio.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Radio",
  "props": {
    "color": {
      "defaultValue": {
        "value": "\"componentPrimary\"",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "onChange": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
export { Radio as default };