@semcore/radio 4.2.6 → 5.0.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [5.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+- Remove value "xl" for "size".
+
 ## [4.2.6] - 2022-03-21
 
 ### Changed

package/lib/cjs/Radio.js

@@ -37,8 +37,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _flexBox = require("@semcore/flex-box");
 
-var _typography = require("@semcore/typography");
-
 var _assignProps5 = _interopRequireDefault(require("@semcore/utils/lib/assignProps"));
 
 var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
@@ -64,30 +62,24 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SRadio_1nezo_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_1nezo_gg_.__disabled_1nezo_gg_{opacity:0.3;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.___SText_1nezo_gg_{margin-left:8px}.___SValue_1nezo_gg_{position:relative;flex-shrink:0;margin:0;padding:0;outline:none;z-index:0}.___SValue_1nezo_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:50%}.___SValue_1nezo_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:0;height:0;border-radius:50%;background:#fff}.___SValue_1nezo_gg_._size_xl_1nezo_gg_{margin-top:2px;width:20px;height:20px}.___SValue_1nezo_gg_._size_l_1nezo_gg_{margin-top:1px;width:16px;height:16px}.___SValue_1nezo_gg_._size_m_1nezo_gg_{margin-top:2px;width:12px;height:12px}.___SValue_1nezo_gg_._state_normal_1nezo_gg_:before{border-color:#a6b0b3}.___SValue_1nezo_gg_._state_invalid_1nezo_gg_:before{border-color:#ff7f00}.___SControl_1nezo_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_:before{border-color:#2b94e1;background-color:#2b94e1}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_._size_xl_1nezo_gg_:after{width:8px;height:8px}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_._size_l_1nezo_gg_:after{width:6px;height:6px}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_._size_m_1nezo_gg_:after{width:4px;height:4px}.___SValue_1nezo_gg_._state_normal_1nezo_gg_.__keyboardFocused_1nezo_gg_:before{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3);border-color:#2b94e1}.___SValue_1nezo_gg_._state_invalid_1nezo_gg_.__keyboardFocused_1nezo_gg_:before{box-shadow:0 0 0 3px rgba(255,127,0,.3)}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_.__theme_1nezo_gg_:before{border-color:var(--theme_ahqhbl);background-color:var(--theme_ahqhbl)}.___SValue_1nezo_gg_._state_normal_1nezo_gg_.__theme_1nezo_gg_:before{border-color:var(--theme_ahqhbl)}"
+".___SRadio_1rk58_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_1rk58_gg_.__disabled_1rk58_gg_{opacity:0.3;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.___SText_1rk58_gg_{margin-left:8px}.___SText_1rk58_gg_._size_m_1rk58_gg_{font-size:14px;line-height:1.42}.___SText_1rk58_gg_._size_l_1rk58_gg_{font-size:16px;line-height:1.5}.___SValue_1rk58_gg_{position:relative;flex-shrink:0;padding:0;outline:none;z-index:0;margin-top:2px}.___SValue_1rk58_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:50%}.___SValue_1rk58_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:0;height:0;border-radius:50%;background:#fff}.___SValue_1rk58_gg_._size_m_1rk58_gg_{width:16px;height:16px}.___SValue_1rk58_gg_._size_l_1rk58_gg_{width:20px;height:20px}.___SValue_1rk58_gg_._state_normal_1rk58_gg_:before{border-color:#c4c7cf}.___SValue_1rk58_gg_._state_invalid_1rk58_gg_:before{border-color:#ff4953}.___SControl_1rk58_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_1rk58_gg_:checked~.___SValue_1rk58_gg_:before{border-color:#008ff8;background-color:#008ff8}.___SControl_1rk58_gg_:checked~.___SValue_1rk58_gg_._size_m_1rk58_gg_:after{width:6px;height:6px}.___SControl_1rk58_gg_:checked~.___SValue_1rk58_gg_._size_l_1rk58_gg_:after{width:8px;height:8px}.___SValue_1rk58_gg_._state_normal_1rk58_gg_.__keyboardFocused_1rk58_gg_:before{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);border-color:#008ff8}.___SValue_1rk58_gg_._state_invalid_1rk58_gg_.__keyboardFocused_1rk58_gg_:before{box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SControl_1rk58_gg_:checked~.___SValue_1rk58_gg_.__theme_1rk58_gg_:before{border-color:var(--theme_1uqy20u);background-color:var(--theme_1uqy20u)}.___SValue_1rk58_gg_._state_normal_1rk58_gg_.__theme_1rk58_gg_:before{border-color:var(--theme_1uqy20u)}"
 /*__inner_css_end__*/
-, "ahqhbl_gg_")
+, "1uqy20u_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SRadio": "___SRadio_1nezo_gg_",
-  "_disabled": "__disabled_1nezo_gg_",
-  "__SText": "___SText_1nezo_gg_",
-  "__SValue": "___SValue_1nezo_gg_",
-  "_size_xl": "_size_xl_1nezo_gg_",
-  "_size_l": "_size_l_1nezo_gg_",
-  "_size_m": "_size_m_1nezo_gg_",
-  "_state_normal": "_state_normal_1nezo_gg_",
-  "_state_invalid": "_state_invalid_1nezo_gg_",
-  "__SControl": "___SControl_1nezo_gg_",
-  "_keyboardFocused": "__keyboardFocused_1nezo_gg_",
-  "_theme": "__theme_1nezo_gg_",
-  "--theme": "--theme_ahqhbl"
+  "__SRadio": "___SRadio_1rk58_gg_",
+  "_disabled": "__disabled_1rk58_gg_",
+  "__SText": "___SText_1rk58_gg_",
+  "_size_m": "_size_m_1rk58_gg_",
+  "_size_l": "_size_l_1rk58_gg_",
+  "__SValue": "___SValue_1rk58_gg_",
+  "_state_normal": "_state_normal_1rk58_gg_",
+  "_state_invalid": "_state_invalid_1rk58_gg_",
+  "__SControl": "___SControl_1rk58_gg_",
+  "_keyboardFocused": "__keyboardFocused_1rk58_gg_",
+  "_theme": "__theme_1rk58_gg_",
+  "--theme": "--theme_1uqy20u"
 });
-var SIZE_TEXT_MAP = {
-  xl: 300,
-  l: 200,
-  m: 100
-};
 
 var RadioGroupRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(RadioGroupRoot, _Component);
@@ -201,13 +193,13 @@ var Radio = /*#__PURE__*/function (_Component2) {
           size = _assignProps4$size === void 0 ? 'm' : _assignProps4$size;
 
       return {
-        size: SIZE_TEXT_MAP[size]
+        size: size
       };
     }
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref3;
 
       var SRadio = _flexBox.Box;
@@ -256,7 +248,6 @@ var Value = /*#__PURE__*/function (_Component3) {
           forwardRef = _this$asProps3.forwardRef,
           styles = _this$asProps3.styles,
           includeInputProps = _this$asProps3.includeInputProps,
-          state = _this$asProps3.state,
           theme = _this$asProps3.theme;
 
       var _getInputProps = (0, _inputProps["default"])(this.asProps, includeInputProps),
@@ -264,18 +255,12 @@ var Value = /*#__PURE__*/function (_Component3) {
           controlProps = _getInputProps2[0],
           boxProps = _getInputProps2[1];
 
-      var color = '';
-
-      if (theme && state !== 'invalid') {
-        color = (0, _color["default"])(theme);
-      }
-
       return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SControl, _ref4.cn("SControl", _objectSpread({
         "tag": "input",
         "type": "radio"
       }, controlProps))), /*#__PURE__*/_react["default"].createElement(SValue, _ref4.cn("SValue", _objectSpread({
         "ref": forwardRef,
-        "use:theme": color
+        "use:theme": (0, _color["default"])(theme)
       }, boxProps))));
     }
   }]);
@@ -290,10 +275,10 @@ var Value = /*#__PURE__*/function (_Component3) {
 (0, _defineProperty2["default"])(Value, "hoistProps", ['disabled']);
 
 function Text(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref5;
 
-  var SText = _typography.Text;
+  var SText = _flexBox.Box;
   var styles = props.styles;
   return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SText, _ref5.cn("SText", _objectSpread({}, (0, _core.assignProps)({}, _ref2))));
 }

package/lib/cjs/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Radio.jsx"],"names":["SIZE_TEXT_MAP","xl","l","m","RadioGroupRoot","value","asProps","theme","size","name","onChange","Children","Component","state","defaultValue","RadioGroup","Radio","checked","e","context","props","other","undefined","bindHandlerChange","SRadio","Box","styles","style","CONTEXT_COMPONENT","Value","target","SValue","SControl","forwardRef","includeInputProps","controlProps","boxProps","color","inputProps","defaultChecked","Text","SText","TypographyText"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Text as TypographyText } from '@semcore/typography';\nimport assignProps from '@semcore/utils/lib/assignProps';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\n\nimport style from './style/radio.shadow.css';\n\nconst SIZE_TEXT_MAP = {\n  xl: 300,\n  l: 200,\n  m: 100,\n};\n\nclass RadioGroupRoot extends Component {\n  static displayName = 'RadioGroup';\n\n  static defaultProps = {\n    state: 'normal',\n    size: 'm',\n    defaultValue: null,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  setContext() {\n    const { theme, size, name, value, onChange } = this.asProps;\n    return {\n      onChange,\n      value,\n      theme,\n      size,\n      name,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nconst RadioGroup = createComponent(RadioGroupRoot);\n\nclass Radio extends Component {\n  static displayName = 'Radio';\n  static style = style;\n  static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n  bindHandlerChange = (value) => (checked, e) => {\n    this.context.onChange(value, e);\n  };\n\n  getValueProps(props) {\n    // The default values are here, since you cannot rewrite out of context\n    const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);\n    const { value } = this.context;\n    const other = {};\n    // if used with the context\n    if (value !== undefined) {\n      other['checked'] = value === props.value;\n      other['onChange'] = this.bindHandlerChange(props.value);\n    }\n    return {\n      ...other,\n      state,\n      size,\n      theme,\n      name,\n    };\n  }\n\n  getTextProps() {\n    // The default values are here, since you cannot rewrite out of context\n    const { size = 'm' } = assignProps(this.props, this.context);\n    return {\n      size: SIZE_TEXT_MAP[size],\n    };\n  }\n\n  render() {\n    const SRadio = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <SRadio render={Box} tag=\"label\">\n        <Children />\n      </SRadio>,\n    );\n  }\n}\n\nclass Value extends Component {\n  static defaultProps = {\n    includeInputProps: inputProps,\n    defaultChecked: false,\n  };\n  static enhance = [keyboardFocusEnhance()];\n  static hoistProps = ['disabled'];\n\n  uncontrolledProps() {\n    return {\n      checked: (e) => e.target.checked,\n    };\n  }\n\n  render() {\n    const SValue = Box;\n    const SControl = Box;\n    const { forwardRef, styles, includeInputProps, state, theme } = this.asProps;\n\n    const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);\n    let color = '';\n\n    if (theme && state !== 'invalid') {\n      color = resolveColor(theme);\n    }\n\n    return sstyled(styles)(\n      <>\n        <SControl tag=\"input\" type=\"radio\" {...controlProps} />\n        <SValue ref={forwardRef} use:theme={color} {...boxProps} />\n      </>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={TypographyText} />);\n}\n\nexport { inputProps, RadioGroup };\nexport default createComponent(Radio, {\n  Value,\n  Text,\n});\n"],"file":"Radio.js"}
+{"version":3,"sources":["../../src/Radio.jsx"],"names":["RadioGroupRoot","value","asProps","theme","size","name","onChange","Children","Component","state","defaultValue","RadioGroup","Radio","checked","e","context","props","other","undefined","bindHandlerChange","SRadio","Box","styles","style","CONTEXT_COMPONENT","Value","target","SValue","SControl","forwardRef","includeInputProps","controlProps","boxProps","inputProps","defaultChecked","Text","SText"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport assignProps from '@semcore/utils/lib/assignProps';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\n\nimport style from './style/radio.shadow.css';\n\nclass RadioGroupRoot extends Component {\n  static displayName = 'RadioGroup';\n\n  static defaultProps = {\n    state: 'normal',\n    size: 'm',\n    defaultValue: null,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  setContext() {\n    const { theme, size, name, value, onChange } = this.asProps;\n    return {\n      onChange,\n      value,\n      theme,\n      size,\n      name,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nconst RadioGroup = createComponent(RadioGroupRoot);\n\nclass Radio extends Component {\n  static displayName = 'Radio';\n  static style = style;\n  static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n  bindHandlerChange = (value) => (checked, e) => {\n    this.context.onChange(value, e);\n  };\n\n  getValueProps(props) {\n    // The default values are here, since you cannot rewrite out of context\n    const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);\n    const { value } = this.context;\n    const other = {};\n    // if used with the context\n    if (value !== undefined) {\n      other['checked'] = value === props.value;\n      other['onChange'] = this.bindHandlerChange(props.value);\n    }\n    return {\n      ...other,\n      state,\n      size,\n      theme,\n      name,\n    };\n  }\n\n  getTextProps() {\n    // The default values are here, since you cannot rewrite out of context\n    const { size = 'm' } = assignProps(this.props, this.context);\n    return {\n      size: size,\n    };\n  }\n\n  render() {\n    const SRadio = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <SRadio render={Box} tag=\"label\">\n        <Children />\n      </SRadio>,\n    );\n  }\n}\n\nclass Value extends Component {\n  static defaultProps = {\n    includeInputProps: inputProps,\n    defaultChecked: false,\n  };\n  static enhance = [keyboardFocusEnhance()];\n  static hoistProps = ['disabled'];\n\n  uncontrolledProps() {\n    return {\n      checked: (e) => e.target.checked,\n    };\n  }\n\n  render() {\n    const SValue = Box;\n    const SControl = Box;\n    const { forwardRef, styles, includeInputProps, theme } = this.asProps;\n\n    const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);\n\n    return sstyled(styles)(\n      <>\n        <SControl tag=\"input\" type=\"radio\" {...controlProps} />\n        <SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />\n      </>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} />);\n}\n\nexport { inputProps, RadioGroup };\nexport default createComponent(Radio, {\n  Value,\n  Text,\n});\n"],"file":"Radio.js"}

package/lib/cjs/index.d.ts

@@ -0,0 +1,76 @@
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { IBoxProps, IFlexProps } from '@semcore/flex-box';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { Text } from '@semcore/typography';
+
+export type RadioSize = 'm' | 'l';
+export type RadioState = 'normal' | 'invalid';
+export type RadioValue = string | number | boolean;
+
+export interface IRadioProps extends IFlexProps {
+  /**
+   * The value displaying the state of the component
+   * @default normal
+   */
+  state?: RadioState;
+  /**
+   * Radio button size
+   * @default m
+   **/
+  size?: RadioSize;
+  /** The theme of the radio button that you can send your color to */
+  theme?: string;
+}
+
+export interface IRadioGroupProps {
+  /** Radio group name */
+  name?: string;
+  /** Active default value */
+  defaultValue?: RadioValue;
+  /** Active value */
+  value?: RadioValue;
+  /** Called when the selected element is changed */
+  onChange?: (value: RadioValue, e?: React.SyntheticEvent<HTMLInputElement>) => void;
+  /** Radio button size */
+  size?: RadioSize;
+  /** The theme of the radio button that you can send your color to */
+  theme?: string;
+  /** Blocks access and changes to the form field */
+  disabled?: boolean;
+}
+
+export interface IRadioValueProps extends IBoxProps, IKeyboardFocusProps {
+  /** List of elements that can be put on a hidden input */
+  includeInputProps?: string[];
+  /**
+   * The value displaying the state of the component
+   * @default normal
+   */
+  state?: RadioState;
+  /** The theme of the radio button that you can send your color to */
+  theme?: string;
+  /** Radio button size */
+  size?: RadioSize;
+  /** The element value is required for RadioGroup */
+  value?: RadioValue;
+  /** Called when the value changes */
+  onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
+  /** Blocks access and changes to the form field */
+  disabled?: boolean;
+}
+
+export interface IRadioCtx {
+  getValueProps: PropGetterFn;
+  getTextProps: PropGetterFn;
+}
+
+declare const RadioGroup: <T>(props: CProps<IRadioGroupProps & T>) => ReturnEl;
+
+export { RadioGroup };
+
+declare const Radio: (<T>(props: CProps<IRadioProps & T, IRadioCtx>) => ReturnEl) & {
+  Value: <T>(props: IRadioValueProps & T) => ReturnEl;
+  Text: typeof Text;
+};
+
+export default Radio;

package/lib/cjs/style/radio.shadow.css

@@ -17,14 +17,25 @@ SText {
   margin-left: 8px;
 }
 
+SText[size='m'] {
+  font-size: var(--fs-200);
+  line-height: var(--lh-200);
+}
+
+SText[size='l'] {
+  font-size: var(--fs-300);
+  line-height: var(--lh-300);
+}
+
 SValue {
   position: relative;
   flex-shrink: 0;
-  margin: 0;
   padding: 0;
   outline: none;
   z-index: 0;
 
+  margin-top: 2px;
+
   &::before {
     content: '';
     position: absolute;
@@ -52,30 +63,22 @@ SValue {
   }
 }
 
-SValue[size='xl'] {
-  margin-top: 2px;
-  width: 20px;
-  height: 20px;
-}
-
-SValue[size='l'] {
-  margin-top: 1px;
+SValue[size='m'] {
   width: 16px;
   height: 16px;
 }
 
-SValue[size='m'] {
-  margin-top: 2px;
-  width: 12px;
-  height: 12px;
+SValue[size='l'] {
+  width: 20px;
+  height: 20px;
 }
 
 SValue[state='normal']::before {
-  border-color: var(--stone);
+  border-color: var(--gray-200);
 }
 
 SValue[state='invalid']::before {
-  border-color: var(--orange);
+  border-color: var(--red-400);
 }
 
 SControl {
@@ -84,38 +87,34 @@ SControl {
 }
 
 SControl:checked ~ SValue::before {
-  border-color: var(--light-blue);
-  background-color: var(--light-blue);
-}
-
-SControl:checked ~ SValue[size='xl']::after {
-  width: 8px;
-  height: 8px;
+  border-color: var(--blue-400);
+  background-color: var(--blue-400);
 }
 
-SControl:checked ~ SValue[size='l']::after {
+SControl:checked ~ SValue[size='m']::after {
   width: 6px;
   height: 6px;
 }
 
-SControl:checked ~ SValue[size='m']::after {
-  width: 4px;
-  height: 4px;
+SControl:checked ~ SValue[size='l']::after {
+  width: 8px;
+  height: 8px;
 }
 
 SValue[state='normal'][keyboardFocused]::before {
-  box-shadow: var(--keyborad-focus);
-  border-color: var(--light-blue);
+  box-shadow: var(--keyboard-focus);
+  border-color: var(--blue-400);
 }
 
 SValue[state='invalid'][keyboardFocused]::before {
-  box-shadow: 0 0 0 3px color-mod(var(--orange) a(30%));
+  box-shadow: var(--keyboard-focus-invalid);
 }
 
 SControl:checked ~ SValue[theme]::before {
   border-color: var(--theme);
   background-color: var(--theme);
 }
+
 SValue[state='normal'][theme]::before {
   border-color: var(--theme);
 }

package/lib/es6/Radio.js

@@ -21,7 +21,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
-import { Text as TypographyText } from '@semcore/typography';
 import assignProps from '@semcore/utils/lib/assignProps';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import resolveColor from '@semcore/utils/lib/color';
@@ -32,30 +31,24 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SRadio_1nezo_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_1nezo_gg_.__disabled_1nezo_gg_{opacity:0.3;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.___SText_1nezo_gg_{margin-left:8px}.___SValue_1nezo_gg_{position:relative;flex-shrink:0;margin:0;padding:0;outline:none;z-index:0}.___SValue_1nezo_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:50%}.___SValue_1nezo_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:0;height:0;border-radius:50%;background:#fff}.___SValue_1nezo_gg_._size_xl_1nezo_gg_{margin-top:2px;width:20px;height:20px}.___SValue_1nezo_gg_._size_l_1nezo_gg_{margin-top:1px;width:16px;height:16px}.___SValue_1nezo_gg_._size_m_1nezo_gg_{margin-top:2px;width:12px;height:12px}.___SValue_1nezo_gg_._state_normal_1nezo_gg_:before{border-color:#a6b0b3}.___SValue_1nezo_gg_._state_invalid_1nezo_gg_:before{border-color:#ff7f00}.___SControl_1nezo_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_:before{border-color:#2b94e1;background-color:#2b94e1}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_._size_xl_1nezo_gg_:after{width:8px;height:8px}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_._size_l_1nezo_gg_:after{width:6px;height:6px}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_._size_m_1nezo_gg_:after{width:4px;height:4px}.___SValue_1nezo_gg_._state_normal_1nezo_gg_.__keyboardFocused_1nezo_gg_:before{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3);border-color:#2b94e1}.___SValue_1nezo_gg_._state_invalid_1nezo_gg_.__keyboardFocused_1nezo_gg_:before{box-shadow:0 0 0 3px rgba(255,127,0,.3)}.___SControl_1nezo_gg_:checked~.___SValue_1nezo_gg_.__theme_1nezo_gg_:before{border-color:var(--theme_ahqhbl);background-color:var(--theme_ahqhbl)}.___SValue_1nezo_gg_._state_normal_1nezo_gg_.__theme_1nezo_gg_:before{border-color:var(--theme_ahqhbl)}"
+".___SRadio_1rk58_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_1rk58_gg_.__disabled_1rk58_gg_{opacity:0.3;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.___SText_1rk58_gg_{margin-left:8px}.___SText_1rk58_gg_._size_m_1rk58_gg_{font-size:14px;line-height:1.42}.___SText_1rk58_gg_._size_l_1rk58_gg_{font-size:16px;line-height:1.5}.___SValue_1rk58_gg_{position:relative;flex-shrink:0;padding:0;outline:none;z-index:0;margin-top:2px}.___SValue_1rk58_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:50%}.___SValue_1rk58_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:0;height:0;border-radius:50%;background:#fff}.___SValue_1rk58_gg_._size_m_1rk58_gg_{width:16px;height:16px}.___SValue_1rk58_gg_._size_l_1rk58_gg_{width:20px;height:20px}.___SValue_1rk58_gg_._state_normal_1rk58_gg_:before{border-color:#c4c7cf}.___SValue_1rk58_gg_._state_invalid_1rk58_gg_:before{border-color:#ff4953}.___SControl_1rk58_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_1rk58_gg_:checked~.___SValue_1rk58_gg_:before{border-color:#008ff8;background-color:#008ff8}.___SControl_1rk58_gg_:checked~.___SValue_1rk58_gg_._size_m_1rk58_gg_:after{width:6px;height:6px}.___SControl_1rk58_gg_:checked~.___SValue_1rk58_gg_._size_l_1rk58_gg_:after{width:8px;height:8px}.___SValue_1rk58_gg_._state_normal_1rk58_gg_.__keyboardFocused_1rk58_gg_:before{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);border-color:#008ff8}.___SValue_1rk58_gg_._state_invalid_1rk58_gg_.__keyboardFocused_1rk58_gg_:before{box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SControl_1rk58_gg_:checked~.___SValue_1rk58_gg_.__theme_1rk58_gg_:before{border-color:var(--theme_1uqy20u);background-color:var(--theme_1uqy20u)}.___SValue_1rk58_gg_._state_normal_1rk58_gg_.__theme_1rk58_gg_:before{border-color:var(--theme_1uqy20u)}"
 /*__inner_css_end__*/
-, "ahqhbl_gg_")
+, "1uqy20u_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SRadio": "___SRadio_1nezo_gg_",
-  "_disabled": "__disabled_1nezo_gg_",
-  "__SText": "___SText_1nezo_gg_",
-  "__SValue": "___SValue_1nezo_gg_",
-  "_size_xl": "_size_xl_1nezo_gg_",
-  "_size_l": "_size_l_1nezo_gg_",
-  "_size_m": "_size_m_1nezo_gg_",
-  "_state_normal": "_state_normal_1nezo_gg_",
-  "_state_invalid": "_state_invalid_1nezo_gg_",
-  "__SControl": "___SControl_1nezo_gg_",
-  "_keyboardFocused": "__keyboardFocused_1nezo_gg_",
-  "_theme": "__theme_1nezo_gg_",
-  "--theme": "--theme_ahqhbl"
+  "__SRadio": "___SRadio_1rk58_gg_",
+  "_disabled": "__disabled_1rk58_gg_",
+  "__SText": "___SText_1rk58_gg_",
+  "_size_m": "_size_m_1rk58_gg_",
+  "_size_l": "_size_l_1rk58_gg_",
+  "__SValue": "___SValue_1rk58_gg_",
+  "_state_normal": "_state_normal_1rk58_gg_",
+  "_state_invalid": "_state_invalid_1rk58_gg_",
+  "__SControl": "___SControl_1rk58_gg_",
+  "_keyboardFocused": "__keyboardFocused_1rk58_gg_",
+  "_theme": "__theme_1rk58_gg_",
+  "--theme": "--theme_1uqy20u"
 });
-var SIZE_TEXT_MAP = {
-  xl: 300,
-  l: 200,
-  m: 100
-};
 
 var RadioGroupRoot = /*#__PURE__*/function (_Component) {
   _inherits(RadioGroupRoot, _Component);
@@ -174,13 +167,13 @@ var Radio = /*#__PURE__*/function (_Component2) {
           size = _assignProps4$size === void 0 ? 'm' : _assignProps4$size;
 
       return {
-        size: SIZE_TEXT_MAP[size]
+        size: size
       };
     }
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref3;
 
       var SRadio = Box;
@@ -233,7 +226,6 @@ var Value = /*#__PURE__*/function (_Component3) {
           forwardRef = _this$asProps3.forwardRef,
           styles = _this$asProps3.styles,
           includeInputProps = _this$asProps3.includeInputProps,
-          state = _this$asProps3.state,
           theme = _this$asProps3.theme;
 
       var _getInputProps = getInputProps(this.asProps, includeInputProps),
@@ -241,18 +233,12 @@ var Value = /*#__PURE__*/function (_Component3) {
           controlProps = _getInputProps2[0],
           boxProps = _getInputProps2[1];
 
-      var color = '';
-
-      if (theme && state !== 'invalid') {
-        color = resolveColor(theme);
-      }
-
       return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SControl, _ref4.cn("SControl", _objectSpread({
         "tag": "input",
         "type": "radio"
       }, controlProps))), /*#__PURE__*/React.createElement(SValue, _ref4.cn("SValue", _objectSpread({
         "ref": forwardRef,
-        "use:theme": color
+        "use:theme": resolveColor(theme)
       }, boxProps))));
     }
   }]);
@@ -270,10 +256,10 @@ _defineProperty(Value, "enhance", [keyboardFocusEnhance()]);
 _defineProperty(Value, "hoistProps", ['disabled']);
 
 function Text(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref5;
 
-  var SText = TypographyText;
+  var SText = Box;
   var styles = props.styles;
   return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref5.cn("SText", _objectSpread({}, _assignProps2({}, _ref2))));
 }

package/lib/es6/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Radio.jsx"],"names":["React","createComponent","Component","CONTEXT_COMPONENT","sstyled","Root","Box","Text","TypographyText","assignProps","keyboardFocusEnhance","resolveColor","getInputProps","inputProps","SIZE_TEXT_MAP","xl","l","m","RadioGroupRoot","value","asProps","theme","size","name","onChange","Children","state","defaultValue","RadioGroup","Radio","checked","e","context","props","other","undefined","bindHandlerChange","SRadio","styles","style","Value","target","SValue","SControl","forwardRef","includeInputProps","controlProps","boxProps","color","defaultChecked","SText"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Text as TypographyText } from '@semcore/typography';\nimport assignProps from '@semcore/utils/lib/assignProps';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\n\nimport style from './style/radio.shadow.css';\n\nconst SIZE_TEXT_MAP = {\n  xl: 300,\n  l: 200,\n  m: 100,\n};\n\nclass RadioGroupRoot extends Component {\n  static displayName = 'RadioGroup';\n\n  static defaultProps = {\n    state: 'normal',\n    size: 'm',\n    defaultValue: null,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  setContext() {\n    const { theme, size, name, value, onChange } = this.asProps;\n    return {\n      onChange,\n      value,\n      theme,\n      size,\n      name,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nconst RadioGroup = createComponent(RadioGroupRoot);\n\nclass Radio extends Component {\n  static displayName = 'Radio';\n  static style = style;\n  static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n  bindHandlerChange = (value) => (checked, e) => {\n    this.context.onChange(value, e);\n  };\n\n  getValueProps(props) {\n    // The default values are here, since you cannot rewrite out of context\n    const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);\n    const { value } = this.context;\n    const other = {};\n    // if used with the context\n    if (value !== undefined) {\n      other['checked'] = value === props.value;\n      other['onChange'] = this.bindHandlerChange(props.value);\n    }\n    return {\n      ...other,\n      state,\n      size,\n      theme,\n      name,\n    };\n  }\n\n  getTextProps() {\n    // The default values are here, since you cannot rewrite out of context\n    const { size = 'm' } = assignProps(this.props, this.context);\n    return {\n      size: SIZE_TEXT_MAP[size],\n    };\n  }\n\n  render() {\n    const SRadio = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <SRadio render={Box} tag=\"label\">\n        <Children />\n      </SRadio>,\n    );\n  }\n}\n\nclass Value extends Component {\n  static defaultProps = {\n    includeInputProps: inputProps,\n    defaultChecked: false,\n  };\n  static enhance = [keyboardFocusEnhance()];\n  static hoistProps = ['disabled'];\n\n  uncontrolledProps() {\n    return {\n      checked: (e) => e.target.checked,\n    };\n  }\n\n  render() {\n    const SValue = Box;\n    const SControl = Box;\n    const { forwardRef, styles, includeInputProps, state, theme } = this.asProps;\n\n    const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);\n    let color = '';\n\n    if (theme && state !== 'invalid') {\n      color = resolveColor(theme);\n    }\n\n    return sstyled(styles)(\n      <>\n        <SControl tag=\"input\" type=\"radio\" {...controlProps} />\n        <SValue ref={forwardRef} use:theme={color} {...boxProps} />\n      </>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={TypographyText} />);\n}\n\nexport { inputProps, RadioGroup };\nexport default createComponent(Radio, {\n  Value,\n  Text,\n});\n"],"file":"Radio.js"}
+{"version":3,"sources":["../../src/Radio.jsx"],"names":["React","createComponent","Component","CONTEXT_COMPONENT","sstyled","Root","Box","assignProps","keyboardFocusEnhance","resolveColor","getInputProps","inputProps","RadioGroupRoot","value","asProps","theme","size","name","onChange","Children","state","defaultValue","RadioGroup","Radio","checked","e","context","props","other","undefined","bindHandlerChange","SRadio","styles","style","Value","target","SValue","SControl","forwardRef","includeInputProps","controlProps","boxProps","defaultChecked","Text","SText"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport assignProps from '@semcore/utils/lib/assignProps';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\n\nimport style from './style/radio.shadow.css';\n\nclass RadioGroupRoot extends Component {\n  static displayName = 'RadioGroup';\n\n  static defaultProps = {\n    state: 'normal',\n    size: 'm',\n    defaultValue: null,\n  };\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  setContext() {\n    const { theme, size, name, value, onChange } = this.asProps;\n    return {\n      onChange,\n      value,\n      theme,\n      size,\n      name,\n    };\n  }\n\n  render() {\n    const { Children } = this.asProps;\n    return <Children />;\n  }\n}\n\nconst RadioGroup = createComponent(RadioGroupRoot);\n\nclass Radio extends Component {\n  static displayName = 'Radio';\n  static style = style;\n  static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n  bindHandlerChange = (value) => (checked, e) => {\n    this.context.onChange(value, e);\n  };\n\n  getValueProps(props) {\n    // The default values are here, since you cannot rewrite out of context\n    const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);\n    const { value } = this.context;\n    const other = {};\n    // if used with the context\n    if (value !== undefined) {\n      other['checked'] = value === props.value;\n      other['onChange'] = this.bindHandlerChange(props.value);\n    }\n    return {\n      ...other,\n      state,\n      size,\n      theme,\n      name,\n    };\n  }\n\n  getTextProps() {\n    // The default values are here, since you cannot rewrite out of context\n    const { size = 'm' } = assignProps(this.props, this.context);\n    return {\n      size: size,\n    };\n  }\n\n  render() {\n    const SRadio = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <SRadio render={Box} tag=\"label\">\n        <Children />\n      </SRadio>,\n    );\n  }\n}\n\nclass Value extends Component {\n  static defaultProps = {\n    includeInputProps: inputProps,\n    defaultChecked: false,\n  };\n  static enhance = [keyboardFocusEnhance()];\n  static hoistProps = ['disabled'];\n\n  uncontrolledProps() {\n    return {\n      checked: (e) => e.target.checked,\n    };\n  }\n\n  render() {\n    const SValue = Box;\n    const SControl = Box;\n    const { forwardRef, styles, includeInputProps, theme } = this.asProps;\n\n    const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);\n\n    return sstyled(styles)(\n      <>\n        <SControl tag=\"input\" type=\"radio\" {...controlProps} />\n        <SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />\n      </>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} />);\n}\n\nexport { inputProps, RadioGroup };\nexport default createComponent(Radio, {\n  Value,\n  Text,\n});\n"],"file":"Radio.js"}

package/lib/es6/index.d.ts

@@ -0,0 +1,76 @@
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { IBoxProps, IFlexProps } from '@semcore/flex-box';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { Text } from '@semcore/typography';
+
+export type RadioSize = 'm' | 'l';
+export type RadioState = 'normal' | 'invalid';
+export type RadioValue = string | number | boolean;
+
+export interface IRadioProps extends IFlexProps {
+  /**
+   * The value displaying the state of the component
+   * @default normal
+   */
+  state?: RadioState;
+  /**
+   * Radio button size
+   * @default m
+   **/
+  size?: RadioSize;
+  /** The theme of the radio button that you can send your color to */
+  theme?: string;
+}
+
+export interface IRadioGroupProps {
+  /** Radio group name */
+  name?: string;
+  /** Active default value */
+  defaultValue?: RadioValue;
+  /** Active value */
+  value?: RadioValue;
+  /** Called when the selected element is changed */
+  onChange?: (value: RadioValue, e?: React.SyntheticEvent<HTMLInputElement>) => void;
+  /** Radio button size */
+  size?: RadioSize;
+  /** The theme of the radio button that you can send your color to */
+  theme?: string;
+  /** Blocks access and changes to the form field */
+  disabled?: boolean;
+}
+
+export interface IRadioValueProps extends IBoxProps, IKeyboardFocusProps {
+  /** List of elements that can be put on a hidden input */
+  includeInputProps?: string[];
+  /**
+   * The value displaying the state of the component
+   * @default normal
+   */
+  state?: RadioState;
+  /** The theme of the radio button that you can send your color to */
+  theme?: string;
+  /** Radio button size */
+  size?: RadioSize;
+  /** The element value is required for RadioGroup */
+  value?: RadioValue;
+  /** Called when the value changes */
+  onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
+  /** Blocks access and changes to the form field */
+  disabled?: boolean;
+}
+
+export interface IRadioCtx {
+  getValueProps: PropGetterFn;
+  getTextProps: PropGetterFn;
+}
+
+declare const RadioGroup: <T>(props: CProps<IRadioGroupProps & T>) => ReturnEl;
+
+export { RadioGroup };
+
+declare const Radio: (<T>(props: CProps<IRadioProps & T, IRadioCtx>) => ReturnEl) & {
+  Value: <T>(props: IRadioValueProps & T) => ReturnEl;
+  Text: typeof Text;
+};
+
+export default Radio;

package/lib/es6/style/radio.shadow.css

@@ -17,14 +17,25 @@ SText {
   margin-left: 8px;
 }
 
+SText[size='m'] {
+  font-size: var(--fs-200);
+  line-height: var(--lh-200);
+}
+
+SText[size='l'] {
+  font-size: var(--fs-300);
+  line-height: var(--lh-300);
+}
+
 SValue {
   position: relative;
   flex-shrink: 0;
-  margin: 0;
   padding: 0;
   outline: none;
   z-index: 0;
 
+  margin-top: 2px;
+
   &::before {
     content: '';
     position: absolute;
@@ -52,30 +63,22 @@ SValue {
   }
 }
 
-SValue[size='xl'] {
-  margin-top: 2px;
-  width: 20px;
-  height: 20px;
-}
-
-SValue[size='l'] {
-  margin-top: 1px;
+SValue[size='m'] {
   width: 16px;
   height: 16px;
 }
 
-SValue[size='m'] {
-  margin-top: 2px;
-  width: 12px;
-  height: 12px;
+SValue[size='l'] {
+  width: 20px;
+  height: 20px;
 }
 
 SValue[state='normal']::before {
-  border-color: var(--stone);
+  border-color: var(--gray-200);
 }
 
 SValue[state='invalid']::before {
-  border-color: var(--orange);
+  border-color: var(--red-400);
 }
 
 SControl {
@@ -84,38 +87,34 @@ SControl {
 }
 
 SControl:checked ~ SValue::before {
-  border-color: var(--light-blue);
-  background-color: var(--light-blue);
-}
-
-SControl:checked ~ SValue[size='xl']::after {
-  width: 8px;
-  height: 8px;
+  border-color: var(--blue-400);
+  background-color: var(--blue-400);
 }
 
-SControl:checked ~ SValue[size='l']::after {
+SControl:checked ~ SValue[size='m']::after {
   width: 6px;
   height: 6px;
 }
 
-SControl:checked ~ SValue[size='m']::after {
-  width: 4px;
-  height: 4px;
+SControl:checked ~ SValue[size='l']::after {
+  width: 8px;
+  height: 8px;
 }
 
 SValue[state='normal'][keyboardFocused]::before {
-  box-shadow: var(--keyborad-focus);
-  border-color: var(--light-blue);
+  box-shadow: var(--keyboard-focus);
+  border-color: var(--blue-400);
 }
 
 SValue[state='invalid'][keyboardFocused]::before {
-  box-shadow: 0 0 0 3px color-mod(var(--orange) a(30%));
+  box-shadow: var(--keyboard-focus-invalid);
 }
 
 SControl:checked ~ SValue[theme]::before {
   border-color: var(--theme);
   background-color: var(--theme);
 }
+
 SValue[state='normal'][theme]::before {
   border-color: var(--theme);
 }

package/lib/types/index.d.ts

@@ -3,7 +3,7 @@ import { IBoxProps, IFlexProps } from '@semcore/flex-box';
 import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import { Text } from '@semcore/typography';
 
-export type RadioSize = 'm' | 'l' | 'xl';
+export type RadioSize = 'm' | 'l';
 export type RadioState = 'normal' | 'invalid';
 export type RadioValue = string | number | boolean;
 
@@ -55,6 +55,8 @@ export interface IRadioValueProps extends IBoxProps, IKeyboardFocusProps {
   value?: RadioValue;
   /** Called when the value changes */
   onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
+  /** Blocks access and changes to the form field */
+  disabled?: boolean;
 }
 
 export interface IRadioCtx {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/radio",
   "description": "SEMRush Radio Component",
-  "version": "4.2.6",
+  "version": "5.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@semcore/utils": "^3.15",
-    "@semcore/typography": "^3",
-    "@semcore/flex-box": "^4"
+    "@semcore/flex-box": "^4",
+    "@semcore/typography": "^3"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
@@ -28,5 +28,8 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/radio"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
   }
 }

package/src/Radio.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
-import { Text as TypographyText } from '@semcore/typography';
 import assignProps from '@semcore/utils/lib/assignProps';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import resolveColor from '@semcore/utils/lib/color';
@@ -9,12 +8,6 @@ import getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';
 
 import style from './style/radio.shadow.css';
 
-const SIZE_TEXT_MAP = {
-  xl: 300,
-  l: 200,
-  m: 100,
-};
-
 class RadioGroupRoot extends Component {
   static displayName = 'RadioGroup';
 
@@ -81,7 +74,7 @@ class Radio extends Component {
     // The default values are here, since you cannot rewrite out of context
     const { size = 'm' } = assignProps(this.props, this.context);
     return {
-      size: SIZE_TEXT_MAP[size],
+      size: size,
     };
   }
 
@@ -114,19 +107,14 @@ class Value extends Component {
   render() {
     const SValue = Box;
     const SControl = Box;
-    const { forwardRef, styles, includeInputProps, state, theme } = this.asProps;
+    const { forwardRef, styles, includeInputProps, theme } = this.asProps;
 
     const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);
-    let color = '';
-
-    if (theme && state !== 'invalid') {
-      color = resolveColor(theme);
-    }
 
     return sstyled(styles)(
       <>
         <SControl tag="input" type="radio" {...controlProps} />
-        <SValue ref={forwardRef} use:theme={color} {...boxProps} />
+        <SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />
       </>,
     );
   }
@@ -135,7 +123,7 @@ class Value extends Component {
 function Text(props) {
   const SText = Root;
   const { styles } = props;
-  return sstyled(styles)(<SText render={TypographyText} />);
+  return sstyled(styles)(<SText render={Box} />);
 }
 
 export { inputProps, RadioGroup };

package/src/index.d.ts

@@ -3,7 +3,7 @@ import { IBoxProps, IFlexProps } from '@semcore/flex-box';
 import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import { Text } from '@semcore/typography';
 
-export type RadioSize = 'm' | 'l' | 'xl';
+export type RadioSize = 'm' | 'l';
 export type RadioState = 'normal' | 'invalid';
 export type RadioValue = string | number | boolean;
 
@@ -55,6 +55,8 @@ export interface IRadioValueProps extends IBoxProps, IKeyboardFocusProps {
   value?: RadioValue;
   /** Called when the value changes */
   onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
+  /** Blocks access and changes to the form field */
+  disabled?: boolean;
 }
 
 export interface IRadioCtx {

package/src/style/radio.shadow.css

@@ -17,14 +17,25 @@ SText {
   margin-left: 8px;
 }
 
+SText[size='m'] {
+  font-size: var(--fs-200);
+  line-height: var(--lh-200);
+}
+
+SText[size='l'] {
+  font-size: var(--fs-300);
+  line-height: var(--lh-300);
+}
+
 SValue {
   position: relative;
   flex-shrink: 0;
-  margin: 0;
   padding: 0;
   outline: none;
   z-index: 0;
 
+  margin-top: 2px;
+
   &::before {
     content: '';
     position: absolute;
@@ -52,30 +63,22 @@ SValue {
   }
 }
 
-SValue[size='xl'] {
-  margin-top: 2px;
-  width: 20px;
-  height: 20px;
-}
-
-SValue[size='l'] {
-  margin-top: 1px;
+SValue[size='m'] {
   width: 16px;
   height: 16px;
 }
 
-SValue[size='m'] {
-  margin-top: 2px;
-  width: 12px;
-  height: 12px;
+SValue[size='l'] {
+  width: 20px;
+  height: 20px;
 }
 
 SValue[state='normal']::before {
-  border-color: var(--stone);
+  border-color: var(--gray-200);
 }
 
 SValue[state='invalid']::before {
-  border-color: var(--orange);
+  border-color: var(--red-400);
 }
 
 SControl {
@@ -84,38 +87,34 @@ SControl {
 }
 
 SControl:checked ~ SValue::before {
-  border-color: var(--light-blue);
-  background-color: var(--light-blue);
-}
-
-SControl:checked ~ SValue[size='xl']::after {
-  width: 8px;
-  height: 8px;
+  border-color: var(--blue-400);
+  background-color: var(--blue-400);
 }
 
-SControl:checked ~ SValue[size='l']::after {
+SControl:checked ~ SValue[size='m']::after {
   width: 6px;
   height: 6px;
 }
 
-SControl:checked ~ SValue[size='m']::after {
-  width: 4px;
-  height: 4px;
+SControl:checked ~ SValue[size='l']::after {
+  width: 8px;
+  height: 8px;
 }
 
 SValue[state='normal'][keyboardFocused]::before {
-  box-shadow: var(--keyborad-focus);
-  border-color: var(--light-blue);
+  box-shadow: var(--keyboard-focus);
+  border-color: var(--blue-400);
 }
 
 SValue[state='invalid'][keyboardFocused]::before {
-  box-shadow: 0 0 0 3px color-mod(var(--orange) a(30%));
+  box-shadow: var(--keyboard-focus-invalid);
 }
 
 SControl:checked ~ SValue[theme]::before {
   border-color: var(--theme);
   background-color: var(--theme);
 }
+
 SValue[state='normal'][theme]::before {
   border-color: var(--theme);
 }