@skbkontur/react-ui 0.0.0-77c9412271 → 0.0.0-7feb61cdde

package/cjs/components/Radio/Radio.d.ts

@@ -1,44 +1,64 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+import { RadioGroupContextType } from '../RadioGroup/RadioGroupContext';
 export interface RadioProps<T> extends CommonProps, Override<React.InputHTMLAttributes<HTMLInputElement>, {
-    /** Состояние ошибки */
+    /**
+     *  Состояние валидации при ошибке.
+     */
     error?: boolean;
-    /** Состояние Предупреждения */
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
-    /** Состояние фокуса */
+    /**
+     * Состояние фокуса.
+     */
     focused?: boolean;
-    /** Состояние нажатия */
-    pressed?: boolean;
-    /** Состояние hover */
-    hovered?: boolean;
-    /** Состояние active */
-    active?: boolean;
-    /** Вызывается при изменении `value` */
+    /**
+     * Функция, вызываемая при изменении `value`.
+     */
     onValueChange?: (value: T) => void;
+    /**
+     * HTML-событие `onmouseenter`
+     */
     onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
+    /**
+     * HTML-событие `mouseleave`
+     */
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
+    /**
+     * HTML-событие `onmouseover`
+     */
     onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Значение */
+    /**
+     * HTML-атрибут `value`.
+     */
     value: T;
 }> {
 }
-export declare class Radio<T> extends React.Component<RadioProps<T>> {
+export interface RadioState {
+    focusedByKeyboard: boolean;
+}
+export declare const RadioDataTids: {
+    readonly root: "Radio__root";
+};
+declare type DefaultProps = Required<Pick<RadioProps<any>, 'focused'>>;
+/**
+ * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
+ */
+export declare class Radio<T> extends React.Component<RadioProps<T>, RadioState> {
     static __KONTUR_REACT_UI__: string;
-    static contextTypes: {
-        activeItem: PropTypes.Requireable<any>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        name: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<boolean>;
-        warning: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        focused: boolean;
+    state: {
+        focusedByKeyboard: boolean;
     };
-    private theme;
+    static defaultProps: DefaultProps;
+    private getProps;
+    static contextType: React.Context<RadioGroupContextType<any>>;
+    context: RadioGroupContextType<T>;
     private inputEl;
+    private setRootNode;
+    private theme;
     render(): JSX.Element;
     /**
      * @public
@@ -48,11 +68,14 @@ export declare class Radio<T> extends React.Component<RadioProps<T>> {
      * @public
      */
     blur(): void;
-    renderMain: (props: Pick<Pick<RadioProps<T>, "type" | "placeholder" | "dir" | "form" | "slot" | "title" | "pattern" | "onValueChange" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "focused" | "active" | "error" | "warning" | "pressed" | "hovered">, "type" | "placeholder" | "dir" | "form" | "slot" | "title" | "pattern" | "onValueChange" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "focused" | "active" | "error" | "warning" | "pressed" | "hovered">) => JSX.Element;
+    renderMain: (props: CommonWrapperRestProps<RadioProps<T>>) => JSX.Element;
     private _isInRadioGroup;
-    private renderLabel;
+    private renderCaption;
     private handleChange;
     private handleMouseOver;
     private handleMouseEnter;
     private handleMouseLeave;
+    private handleFocus;
+    private handleBlur;
 }
+export {};

package/cjs/components/Radio/Radio.js

@@ -1,13 +1,36 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Radio = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.RadioDataTids = exports.Radio = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
 
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _keyListener = require("../../lib/events/keyListener");
+var _rootNode = require("../../lib/rootNode");
+var _fixFirefoxModifiedClickOnLabel = require("../../lib/events/fixFirefoxModifiedClickOnLabel");
+var _client = require("../../lib/client");
+var _RadioGroupContext = require("../RadioGroup/RadioGroupContext");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _Radio = require("./Radio.styles");var _excluded = ["disabled", "warning", "error", "focused", "onMouseOver", "onMouseEnter", "onMouseLeave", "onValueChange"];var _class, _class2, _temp;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-var _Radio = require("./Radio.styles");var
 
 
 
@@ -36,23 +59,33 @@ var _Radio = require("./Radio.styles");var
 
 
 
-Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Radio, _React$Component);function Radio() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
+var RadioDataTids = {
+  root: 'Radio__root' };exports.RadioDataTids = RadioDataTids;
 
 
 
 
+/**
+ * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.
+ */var
 
+Radio = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Radio, _React$Component);function Radio() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
+    state = {
+      focusedByKeyboard: false };_this.
 
 
 
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(Radio.defaultProps);_this.
+
+
+    context = _this.context;_this.
 
-    theme = void 0;_this.
     inputEl = /*#__PURE__*/_react.default.createRef();_this.
 
 
@@ -80,12 +113,15 @@ Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(R
 
 
 
-    renderMain = function (props) {var _cn;var
 
-      active =
 
 
 
+
+
+
+    renderMain = function (props) {var _cx, _cx2;
+      var _props$disabled =
 
 
 
@@ -94,15 +130,20 @@ Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(R
 
 
 
-      props.active,_props$disabled = props.disabled,disabled = _props$disabled === void 0 ? _this.context.disabled : _props$disabled,_props$warning = props.warning,warning = _props$warning === void 0 ? _this.context.warning : _props$warning,_props$error = props.error,error = _props$error === void 0 ? _this.context.error : _props$error,focused = props.focused,pressed = props.pressed,hovered = props.hovered,onMouseOver = props.onMouseOver,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,onValueChange = props.onValueChange,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "disabled", "warning", "error", "focused", "pressed", "hovered", "onMouseOver", "onMouseEnter", "onMouseLeave", "onValueChange"]);
 
-      var radioClassNames = (0, _classnames.default)((_cn = {}, _cn[
-      _Radio.jsStyles.radio(_this.theme)] = true, _cn[
-      _Radio.jsStyles.checked(_this.theme)] = _this.props.checked, _cn[
-      _Radio.jsStyles.focus(_this.theme)] = _this.props.focused, _cn[
-      _Radio.jsStyles.error(_this.theme)] = error, _cn[
-      _Radio.jsStyles.warning(_this.theme)] = warning, _cn[
-      _Radio.jsStyles.disabled(_this.theme)] = disabled, _cn));
+      props.disabled,disabled = _props$disabled === void 0 ? _this.context.disabled : _props$disabled,_props$warning = props.warning,warning = _props$warning === void 0 ? _this.context.warning : _props$warning,_props$error = props.error,error = _props$error === void 0 ? _this.context.error : _props$error,focused = props.focused,onMouseOver = props.onMouseOver,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,onValueChange = props.onValueChange,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+      var radioProps = {
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Radio.styles.circle(_this.theme)] = true, _cx[
+        _Radio.styles.checked(_this.theme)] = _this.props.checked, _cx[
+        _Radio.styles.focus(_this.theme)] = _this.getProps().focused || _this.state.focusedByKeyboard, _cx[
+        _Radio.styles.error(_this.theme)] = error, _cx[
+        _Radio.styles.warning(_this.theme)] = warning, _cx[
+        _Radio.styles.disabled(_this.theme)] = disabled, _cx[
+        _Radio.styles.checkedDisabled(_this.theme)] = _this.props.checked && disabled, _cx[
+        _Radio.globalClasses.circle] = true, _cx)) };
+
 
 
       var value;
@@ -113,36 +154,49 @@ Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(R
       var inputProps = (0, _extends2.default)({},
       rest, {
         type: 'radio',
-        className: _Radio.jsStyles.input(),
+        className: _Radio.styles.input(),
         disabled: disabled,
         tabIndex: _this.props.tabIndex,
         value: value,
         ref: _this.inputEl,
-        onChange: _this.handleChange });
+        onChange: _this.handleChange,
+        onFocus: _this.handleFocus,
+        onBlur: _this.handleBlur });
 
 
       var labelProps = {
-        className: _Radio.jsStyles.root(_this.theme),
+        className: (0, _Emotion.cx)(_Radio.styles.root(_this.theme), (_cx2 = {}, _cx2[
+        _Radio.styles.rootChecked(_this.theme)] = _this.props.checked, _cx2[
+        _Radio.styles.rootIE11()] = _client.isIE11 || _client.isEdge, _cx2)),
+
         onMouseOver: _this.handleMouseOver,
         onMouseEnter: _this.handleMouseEnter,
-        onMouseLeave: _this.handleMouseLeave };
+        onMouseLeave: _this.handleMouseLeave,
+        onClick: (0, _fixFirefoxModifiedClickOnLabel.fixFirefoxModifiedClickOnLabel)(_this.inputEl) };
 
 
-      if (_this._isInRadioGroup()) {
+      if (_this._isInRadioGroup()) {var _cx3, _cx4;
         var checked = _this.props.value === _this.context.activeItem;
         inputProps.checked = checked;
         inputProps.name = _this.context.name;
         inputProps.suppressHydrationWarning = true;
-        radioClassNames = (0, _classnames.default)(radioClassNames, checked && _Radio.jsStyles.checked(_this.theme));
+        labelProps.className = (0, _Emotion.cx)(_Radio.styles.root(_this.theme), (_cx3 = {}, _cx3[
+        _Radio.styles.rootChecked(_this.theme)] = checked, _cx3[
+        _Radio.styles.rootIE11()] = _client.isIE11 || _client.isEdge, _cx3));
+
+        radioProps.className = (0, _Emotion.cx)(radioProps.className, (_cx4 = {}, _cx4[
+        _Radio.styles.checked(_this.theme)] = checked, _cx4[
+        _Radio.styles.checkedDisabled(_this.theme)] = checked && disabled, _cx4));
+
       }
 
       return /*#__PURE__*/(
-        _react.default.createElement("label", labelProps, /*#__PURE__*/
+        _react.default.createElement("label", (0, _extends2.default)({ "data-tid": RadioDataTids.root }, labelProps), /*#__PURE__*/
         _react.default.createElement("input", inputProps), /*#__PURE__*/
-        _react.default.createElement("span", { className: radioClassNames }, /*#__PURE__*/
-        _react.default.createElement("span", { className: _Radio.jsStyles.placeholder() })),
+        _react.default.createElement("span", radioProps, /*#__PURE__*/
+        _react.default.createElement("span", { className: _Radio.styles.placeholder() })),
 
-        _this.props.children && _this.renderLabel()));
+        _this.props.children && _this.renderCaption()));
 
 
     };_this.
@@ -158,6 +212,7 @@ Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(R
 
 
 
+
     handleChange = function (e) {
       _this.props.onValueChange == null ? void 0 : _this.props.onValueChange(_this.props.value);
 
@@ -178,8 +233,29 @@ Radio = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(R
 
     handleMouseLeave = function (e) {
       _this.props.onMouseLeave == null ? void 0 : _this.props.onMouseLeave(e);
-    };return _this;}var _proto = Radio.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, _this2.renderMain);});} /**
-   * @public
-   */;_proto.focus = function focus() {var _this$inputEl$current;(_this$inputEl$current = this.inputEl.current) == null ? void 0 : _this$inputEl$current.focus();} /**
-   * @public
-   */;_proto.blur = function blur() {var _this$inputEl$current2;(_this$inputEl$current2 = this.inputEl.current) == null ? void 0 : _this$inputEl$current2.blur();};_proto.renderLabel = function renderLabel() {var _cn2;var labelClassNames = (0, _classnames.default)((_cn2 = {}, _cn2[_Radio.jsStyles.label(this.theme)] = true, _cn2[_Radio.jsStyles.labelDisabled()] = !!(this.props.disabled || this.context.disabled), _cn2));return /*#__PURE__*/_react.default.createElement("div", { className: labelClassNames }, this.props.children);};return Radio;}(_react.default.Component);exports.Radio = Radio;Radio.__KONTUR_REACT_UI__ = 'Radio';Radio.contextTypes = { activeItem: _propTypes.default.any, onSelect: _propTypes.default.func, name: _propTypes.default.string, disabled: _propTypes.default.bool, error: _propTypes.default.bool, warning: _propTypes.default.bool };Radio.defaultProps = { focused: false };
+    };_this.
+
+    handleFocus = function (e) {
+      if (!_this.context.disabled) {
+        // focus event fires before keyDown eventlistener
+        // so we should check tabPressed in async way
+        requestAnimationFrame(function () {
+          if (_keyListener.keyListener.isArrowPressed || _keyListener.keyListener.isTabPressed) {
+            _this.setState({ focusedByKeyboard: true });
+          }
+        });
+
+        if (_this.props.onFocus) {
+          _this.props.onFocus(e);
+        }
+      }
+    };_this.
+
+    handleBlur = function (e) {
+      _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
+      _this.setState({ focusedByKeyboard: false });
+    };return _this;}var _proto = Radio.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});} /**
+   * @public
+   */;_proto.focus = function focus() {var _this$inputEl$current;_keyListener.keyListener.isTabPressed = true;(_this$inputEl$current = this.inputEl.current) == null ? void 0 : _this$inputEl$current.focus();} /**
+   * @public
+   */;_proto.blur = function blur() {var _this$inputEl$current2;(_this$inputEl$current2 = this.inputEl.current) == null ? void 0 : _this$inputEl$current2.blur();};_proto.renderCaption = function renderCaption() {var _cx5;var captionClassNames = (0, _Emotion.cx)((_cx5 = {}, _cx5[_Radio.styles.caption(this.theme)] = true, _cx5[_Radio.styles.captionDisabled(this.theme)] = !!(this.props.disabled || this.context.disabled), _cx5[_Radio.styles.captionIE11()] = _client.isIE11 || _client.isEdge, _cx5));return /*#__PURE__*/_react.default.createElement("div", { className: captionClassNames }, this.props.children);};return Radio;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Radio', _class2.defaultProps = { focused: false }, _class2.contextType = _RadioGroupContext.RadioGroupContext, _temp)) || _class;exports.Radio = Radio;

package/cjs/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Radio.tsx"],"names":["Radio","theme","inputEl","React","createRef","renderMain","props","active","disabled","context","warning","error","focused","pressed","hovered","onMouseOver","onMouseEnter","onMouseLeave","onValueChange","rest","radioClassNames","jsStyles","radio","checked","focus","value","inputProps","type","className","input","tabIndex","ref","onChange","handleChange","labelProps","root","handleMouseOver","handleMouseEnter","handleMouseLeave","_isInRadioGroup","activeItem","name","suppressHydrationWarning","placeholder","children","renderLabel","Boolean","e","onSelect","render","current","blur","labelClassNames","label","labelDisabled","Component","__KONTUR_REACT_UI__","contextTypes","PropTypes","any","func","string","bool","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { Override } from '../../typings/utility-types';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Radio.styles';\r\n\r\nexport interface RadioProps<T>\r\n  extends CommonProps,\r\n    Override<\r\n      React.InputHTMLAttributes<HTMLInputElement>,\r\n      {\r\n        /** Состояние ошибки */\r\n        error?: boolean;\r\n        /** Состояние Предупреждения */\r\n        warning?: boolean;\r\n        /** Состояние фокуса */\r\n        focused?: boolean;\r\n        /** Состояние нажатия */\r\n        pressed?: boolean;\r\n        /** Состояние hover */\r\n        hovered?: boolean;\r\n        /** Состояние active */\r\n        active?: boolean;\r\n        /** Вызывается при изменении `value` */\r\n        onValueChange?: (value: T) => void;\r\n        onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\r\n        onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\r\n        onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\r\n        /** Значение */\r\n        value: T;\r\n      }\r\n    > {}\r\n\r\nexport class Radio<T> extends React.Component<RadioProps<T>> {\r\n  public static __KONTUR_REACT_UI__ = 'Radio';\r\n\r\n  public static contextTypes = {\r\n    activeItem: PropTypes.any,\r\n    onSelect: PropTypes.func,\r\n    name: PropTypes.string,\r\n    disabled: PropTypes.bool,\r\n    error: PropTypes.bool,\r\n    warning: PropTypes.bool,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    focused: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private inputEl = React.createRef<HTMLInputElement>();\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus() {\r\n    this.inputEl.current?.focus();\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public blur() {\r\n    this.inputEl.current?.blur();\r\n  }\r\n\r\n  public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>) => {\r\n    const {\r\n      active,\r\n      disabled = this.context.disabled,\r\n      warning = this.context.warning,\r\n      error = this.context.error,\r\n      focused,\r\n      pressed,\r\n      hovered,\r\n      onMouseOver,\r\n      onMouseEnter,\r\n      onMouseLeave,\r\n      onValueChange,\r\n      ...rest\r\n    } = props;\r\n\r\n    let radioClassNames = cn({\r\n      [jsStyles.radio(this.theme)]: true,\r\n      [jsStyles.checked(this.theme)]: this.props.checked,\r\n      [jsStyles.focus(this.theme)]: this.props.focused,\r\n      [jsStyles.error(this.theme)]: error,\r\n      [jsStyles.warning(this.theme)]: warning,\r\n      [jsStyles.disabled(this.theme)]: disabled,\r\n    });\r\n\r\n    let value: string | number | undefined;\r\n    if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {\r\n      value = this.props.value;\r\n    }\r\n\r\n    const inputProps = {\r\n      ...rest,\r\n      type: 'radio',\r\n      className: jsStyles.input(),\r\n      disabled,\r\n      tabIndex: this.props.tabIndex,\r\n      value,\r\n      ref: this.inputEl,\r\n      onChange: this.handleChange,\r\n    };\r\n\r\n    const labelProps = {\r\n      className: jsStyles.root(this.theme),\r\n      onMouseOver: this.handleMouseOver,\r\n      onMouseEnter: this.handleMouseEnter,\r\n      onMouseLeave: this.handleMouseLeave,\r\n    };\r\n\r\n    if (this._isInRadioGroup()) {\r\n      const checked = this.props.value === this.context.activeItem;\r\n      inputProps.checked = checked;\r\n      inputProps.name = this.context.name;\r\n      inputProps.suppressHydrationWarning = true;\r\n      radioClassNames = cn(radioClassNames, checked && jsStyles.checked(this.theme));\r\n    }\r\n\r\n    return (\r\n      <label {...labelProps}>\r\n        <input {...inputProps} />\r\n        <span className={radioClassNames}>\r\n          <span className={jsStyles.placeholder()} />\r\n        </span>\r\n        {this.props.children && this.renderLabel()}\r\n      </label>\r\n    );\r\n  };\r\n\r\n  private _isInRadioGroup = () => Boolean(this.context.name);\r\n\r\n  private renderLabel() {\r\n    const labelClassNames = cn({\r\n      [jsStyles.label(this.theme)]: true,\r\n      [jsStyles.labelDisabled()]: !!(this.props.disabled || this.context.disabled),\r\n    });\r\n\r\n    return <div className={labelClassNames}>{this.props.children}</div>;\r\n  }\r\n\r\n  private handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {\r\n    this.props.onValueChange?.(this.props.value);\r\n\r\n    if (this._isInRadioGroup()) {\r\n      this.context.onSelect(this.props.value);\r\n    }\r\n\r\n    this.props.onChange?.(e);\r\n  };\r\n\r\n  private handleMouseOver: React.MouseEventHandler<HTMLLabelElement> = e => {\r\n    this.props.onMouseOver?.(e);\r\n  };\r\n\r\n  private handleMouseEnter: React.MouseEventHandler<HTMLLabelElement> = e => {\r\n    this.props.onMouseEnter?.(e);\r\n  };\r\n\r\n  private handleMouseLeave: React.MouseEventHandler<HTMLLabelElement> = e => {\r\n    this.props.onMouseLeave?.(e);\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Radio.tsx"],"names":["RadioDataTids","root","Radio","rootNode","state","focusedByKeyboard","getProps","defaultProps","context","inputEl","React","createRef","renderMain","props","disabled","warning","error","focused","onMouseOver","onMouseEnter","onMouseLeave","onValueChange","rest","radioProps","className","styles","circle","theme","checked","focus","checkedDisabled","globalClasses","value","inputProps","type","input","tabIndex","ref","onChange","handleChange","onFocus","handleFocus","onBlur","handleBlur","labelProps","rootChecked","rootIE11","isIE11","isEdge","handleMouseOver","handleMouseEnter","handleMouseLeave","onClick","_isInRadioGroup","activeItem","name","suppressHydrationWarning","placeholder","children","renderCaption","Boolean","e","onSelect","requestAnimationFrame","keyListener","isArrowPressed","isTabPressed","setState","render","setRootNode","current","blur","captionClassNames","caption","captionDisabled","captionIE11","Component","__KONTUR_REACT_UI__","contextType","RadioGroupContext"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\n\nimport { Override } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel';\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { RadioGroupContext, RadioGroupContextType } from '../RadioGroup/RadioGroupContext';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, globalClasses } from './Radio.styles';\n\nexport interface RadioProps<T>\n  extends CommonProps,\n    Override<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      {\n        /**\n         *  Состояние валидации при ошибке.\n         */\n        error?: boolean;\n        /**\n         * Состояние валидации при предупреждении.\n         */\n        warning?: boolean;\n        /**\n         * Состояние фокуса.\n         */\n        focused?: boolean;\n        /**\n         * Функция, вызываемая при изменении `value`.\n         */\n        onValueChange?: (value: T) => void;\n        /**\n         * HTML-событие `onmouseenter`\n         */\n        onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * HTML-событие `mouseleave`\n         */\n        onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * HTML-событие `onmouseover`\n         */\n        onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * HTML-атрибут `value`.\n         */\n        value: T;\n      }\n    > {}\n\nexport interface RadioState {\n  focusedByKeyboard: boolean;\n}\n\nexport const RadioDataTids = {\n  root: 'Radio__root',\n} as const;\n\ntype DefaultProps = Required<Pick<RadioProps<any>, 'focused'>>;\n\n/**\n * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.\n */\n@rootNode\nexport class Radio<T> extends React.Component<RadioProps<T>, RadioState> {\n  public static __KONTUR_REACT_UI__ = 'Radio';\n\n  public state = {\n    focusedByKeyboard: false,\n  };\n\n  public static defaultProps: DefaultProps = {\n    focused: false,\n  };\n\n  private getProps = createPropsGetter(Radio.defaultProps);\n\n  public static contextType = RadioGroupContext;\n  public context: RadioGroupContextType<T> = this.context;\n\n  private inputEl = React.createRef<HTMLInputElement>();\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus() {\n    keyListener.isTabPressed = true;\n    this.inputEl.current?.focus();\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    this.inputEl.current?.blur();\n  }\n\n  public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>) => {\n    const {\n      disabled = this.context.disabled,\n      warning = this.context.warning,\n      error = this.context.error,\n      focused,\n      onMouseOver,\n      onMouseEnter,\n      onMouseLeave,\n      onValueChange,\n      ...rest\n    } = props;\n\n    const radioProps = {\n      className: cx({\n        [styles.circle(this.theme)]: true,\n        [styles.checked(this.theme)]: this.props.checked,\n        [styles.focus(this.theme)]: this.getProps().focused || this.state.focusedByKeyboard,\n        [styles.error(this.theme)]: error,\n        [styles.warning(this.theme)]: warning,\n        [styles.disabled(this.theme)]: disabled,\n        [styles.checkedDisabled(this.theme)]: this.props.checked && disabled,\n        [globalClasses.circle]: true,\n      }),\n    };\n\n    let value: string | number | undefined;\n    if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {\n      value = this.props.value;\n    }\n\n    const inputProps = {\n      ...rest,\n      type: 'radio',\n      className: styles.input(),\n      disabled,\n      tabIndex: this.props.tabIndex,\n      value,\n      ref: this.inputEl,\n      onChange: this.handleChange,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n    };\n\n    const labelProps = {\n      className: cx(styles.root(this.theme), {\n        [styles.rootChecked(this.theme)]: this.props.checked,\n        [styles.rootIE11()]: isIE11 || isEdge,\n      }),\n      onMouseOver: this.handleMouseOver,\n      onMouseEnter: this.handleMouseEnter,\n      onMouseLeave: this.handleMouseLeave,\n      onClick: fixFirefoxModifiedClickOnLabel(this.inputEl),\n    };\n\n    if (this._isInRadioGroup()) {\n      const checked = this.props.value === this.context.activeItem;\n      inputProps.checked = checked;\n      inputProps.name = this.context.name;\n      inputProps.suppressHydrationWarning = true;\n      labelProps.className = cx(styles.root(this.theme), {\n        [styles.rootChecked(this.theme)]: checked,\n        [styles.rootIE11()]: isIE11 || isEdge,\n      });\n      radioProps.className = cx(radioProps.className, {\n        [styles.checked(this.theme)]: checked,\n        [styles.checkedDisabled(this.theme)]: checked && disabled,\n      });\n    }\n\n    return (\n      <label data-tid={RadioDataTids.root} {...labelProps}>\n        <input {...inputProps} />\n        <span {...radioProps}>\n          <span className={styles.placeholder()} />\n        </span>\n        {this.props.children && this.renderCaption()}\n      </label>\n    );\n  };\n\n  private _isInRadioGroup = () => Boolean(this.context.name);\n\n  private renderCaption() {\n    const captionClassNames = cx({\n      [styles.caption(this.theme)]: true,\n      [styles.captionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n      [styles.captionIE11()]: isIE11 || isEdge,\n    });\n\n    return <div className={captionClassNames}>{this.props.children}</div>;\n  }\n\n  private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    this.props.onValueChange?.(this.props.value);\n\n    if (this._isInRadioGroup()) {\n      this.context.onSelect(this.props.value);\n    }\n\n    this.props.onChange?.(e);\n  };\n\n  private handleMouseOver: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n    this.props.onMouseOver?.(e);\n  };\n\n  private handleMouseEnter: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n    this.props.onMouseEnter?.(e);\n  };\n\n  private handleMouseLeave: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n    this.props.onMouseLeave?.(e);\n  };\n\n  private handleFocus = (e: React.FocusEvent<any>) => {\n    if (!this.context.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isArrowPressed || keyListener.isTabPressed) {\n          this.setState({ focusedByKeyboard: true });\n        }\n      });\n\n      if (this.props.onFocus) {\n        this.props.onFocus(e);\n      }\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    this.props.onBlur?.(e);\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}

package/cjs/components/Radio/Radio.md

@@ -1,14 +1,38 @@
-```jsx harmony
-import { Gapped, Radio } from '@skbkontur/react-ui';
-
-<Gapped gap={20}>
-  <Radio value="value" />
-  <Radio value="value" disabled />
-  <Radio value="value" disabled checked />
-  <Radio value="value" checked />
-  <Radio value="value" focused />
-  <Radio value="value" focused checked />
-  <Radio value="value" error />
-  <Radio value="value" warning />
-</Gapped>;
-```
+Различные виды радио-кнопок.
+
+```jsx harmony
+import { Gapped, Radio, RadioGroup } from '@skbkontur/react-ui';
+
+const [chosen, setChosen] = React.useState(null);
+
+<RadioGroup onValueChange={(value) => setChosen(value)}>
+  <Gapped gap={3} vertical>
+    <Radio value={1}>
+      Обычная радио-кнопка
+    </Radio>
+    <Radio value={2} disabled>
+      Отключенная радио-кнопка
+    </Radio>
+    <Radio value={3} checked={!chosen}>
+      Радио-кнопка отмеченная по умолчанию
+    </Radio>
+    <Radio value={4} focused>
+      Радио-кнопка в состоянии <b>focused</b> (меняется только обводка)
+    </Radio>
+    <Radio value={5} error>
+      Радио-кнопка в состоянии <b>error</b>
+    </Radio>
+    <Radio value={6} warning>
+      Радио-кнопка в состоянии <b>warning</b>
+    </Radio>
+  </Gapped>
+</RadioGroup>
+```
+
+Радио-кнопки могут иметь сразу несколько состояний.
+
+```jsx harmony
+<Radio disabled checked warning>
+  Отключенная, отмеченная радио-кнопка в состоянии <b>warning</b>
+</Radio>
+```

package/cjs/components/Radio/Radio.styles.d.ts

@@ -1,14 +1,21 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    after(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    radio(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    focus(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    warning(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    error(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    checked(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    circle: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    rootIE11(): string;
+    rootChecked(t: Theme): string;
+    circle(t: Theme): string;
+    focus(t: Theme): string;
+    warning(t: Theme): string;
+    error(t: Theme): string;
+    checked(t: Theme): string;
+    checkedDisabled(t: Theme): string;
     input(): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    label(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    labelDisabled(): string;
+    disabled(t: Theme): string;
+    caption(t: Theme): string;
+    captionIE11(): string;
+    captionDisabled(t: Theme): string;
     placeholder(): string;
 };