@alfalab/core-components-radio-group 4.0.1 → 4.1.1

package/Component.desktop.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"radioList":"radio-group__radioList_1rqz2","label":"radio-group__label_1rqz2","sub":"radio-group__sub_1rqz2"};
+var styles = {"radioList":"radio-group__radioList_jar3i","label":"radio-group__label_jar3i","sub":"radio-group__sub_jar3i"};
 require('./desktop.css')
 
 var RadioGroupDesktop = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_baseRadioGroup_Component.BaseRadioGroup, tslib.__assign({}, props, { ref: ref, styles: styles })); });

package/Component.mobile.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"radioList":"radio-group__radioList_pxye2","label":"radio-group__label_pxye2","sub":"radio-group__sub_pxye2"};
+var styles = {"radioList":"radio-group__radioList_4mstm","label":"radio-group__label_4mstm","sub":"radio-group__sub_4mstm"};
 require('./mobile.css')
 
 var RadioGroupMobile = React.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseRadioGroup_Component.BaseRadioGroup, tslib.__assign({}, props, { ref: ref, styles: styles }))); });

package/components/base-radio-group/Component.d.ts

@@ -20,6 +20,10 @@ type BaseRadioGroupProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для списка радио элементов
+     */
+    radioListClassName?: string;
     /**
      * Отображение ошибки
      */

package/components/base-radio-group/Component.js

@@ -12,12 +12,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var commonStyles = {"component":"radio-group__component_1bayu","error":"radio-group__error_1bayu","tag":"radio-group__tag_1bayu","radioList":"radio-group__radioList_1bayu","vertical":"radio-group__vertical_1bayu","radio":"radio-group__radio_1bayu","horizontal":"radio-group__horizontal_1bayu","tagLabel":"radio-group__tagLabel_1bayu","label":"radio-group__label_1bayu","sub":"radio-group__sub_1bayu","errorMessage":"radio-group__errorMessage_1bayu","hint":"radio-group__hint_1bayu","hiddenInput":"radio-group__hiddenInput_1bayu"};
+var commonStyles = {"component":"radio-group__component_11qfb","error":"radio-group__error_11qfb","tag":"radio-group__tag_11qfb","radioList":"radio-group__radioList_11qfb","verticalRadioList":"radio-group__verticalRadioList_11qfb","horizontalRadioList":"radio-group__horizontalRadioList_11qfb","verticalRadio":"radio-group__verticalRadio_11qfb","horizontalRadio":"radio-group__horizontalRadio_11qfb","horizontalTagLabel":"radio-group__horizontalTagLabel_11qfb","label":"radio-group__label_11qfb","sub":"radio-group__sub_11qfb","errorMessage":"radio-group__errorMessage_11qfb","hint":"radio-group__hint_11qfb","hiddenInput":"radio-group__hiddenInput_11qfb","tagLabel":"radio-group__tagLabel_11qfb"};
 require('./index.css')
 
 var BaseRadioGroup = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, className = _a.className, _d = _a.direction, direction = _d === void 0 ? 'vertical' : _d, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _e = _a.type, type = _e === void 0 ? 'radio' : _e, dataTestId = _a.dataTestId, _f = _a.disabled, disabled = _f === void 0 ? false : _f, name = _a.name, value = _a.value, styles = _a.styles;
+    var children = _a.children, className = _a.className, radioListClassName = _a.radioListClassName, _d = _a.direction, direction = _d === void 0 ? 'vertical' : _d, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _e = _a.type, type = _e === void 0 ? 'radio' : _e, dataTestId = _a.dataTestId, _f = _a.disabled, disabled = _f === void 0 ? false : _f, name = _a.name, value = _a.value, styles = _a.styles;
     var _g = React.useState(''), stateValue = _g[0], setStateValue = _g[1];
     hooks.useDidUpdateEffect(function () {
         setStateValue(value);
@@ -33,22 +33,20 @@ var BaseRadioGroup = React.forwardRef(function (_a, ref) {
     };
     var renderRadio = function (child) {
         var _a = child.props, childClassName = _a.className, childValue = _a.value;
-        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, commonStyles.radio) }));
+        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, commonStyles["".concat(direction, "Radio")]) }));
     };
     var renderTag = function (child) {
         var childValue = child.props.value;
         var checked = isChecked(childValue);
         var clone = React.cloneElement(child, tslib.__assign(tslib.__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
-        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles.radio, commonStyles.tagLabel) },
+        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles["".concat(direction, "Radio")], commonStyles["".concat(direction, "TagLabel")]) },
             React__default.default.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: commonStyles.hiddenInput, value: child.props.value }),
             clone));
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.component, commonStyles[type], commonStyles[direction], (_b = {}, _b[commonStyles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
+    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles.component, commonStyles[type], (_b = {}, _b[commonStyles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
         label ? (React__default.default.createElement("span", { className: cn__default.default(commonStyles.label, styles.label) }, label)) : null,
-        children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles.radioList, (_c = {},
-                _c[styles.radioList] = type === 'radio',
-                _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
+        children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles.radioList, commonStyles["".concat(direction, "RadioList")], radioListClassName, (_c = {}, _c[styles.radioList] = type === 'radio', _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
             if (React.isValidElement(child)) {
                 return type === 'radio' ? renderRadio(child) : renderTag(child);
             }

package/components/base-radio-group/index.css

@@ -1,4 +1,4 @@
-/* hash: 19q33 */
+/* hash: 7lhr8 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
 
     /* mobile */
-} .radio-group__component_1bayu {
+} .radio-group__component_11qfb {
     display: flex;
     flex-direction: column;
-} .radio-group__error_1bayu {
+} .radio-group__error_11qfb {
     padding-left: var(--gap-s);
     border-left: 1px solid var(--radio-group-error-color)
-} .radio-group__error_1bayu.radio-group__tag_1bayu {
+} .radio-group__error_11qfb.radio-group__tag_11qfb {
         padding-left: var(--gap-xs);
-    } .radio-group__radioList_1bayu {
+    } .radio-group__radioList_11qfb {
     display: flex;
-} .radio-group__vertical_1bayu .radio-group__radioList_1bayu {
+} .radio-group__verticalRadioList_11qfb {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_1bayu .radio-group__radio_1bayu {
-    margin-bottom: var(--gap-m)
-} .radio-group__vertical_1bayu .radio-group__radio_1bayu:last-child {
-        margin-bottom: 0;
-    } .radio-group__horizontal_1bayu .radio-group__radioList_1bayu {
+} .radio-group__horizontalRadioList_11qfb {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__horizontal_1bayu .radio-group__radio_1bayu {
+} .radio-group__verticalRadio_11qfb {
+    margin-bottom: var(--gap-m)
+} .radio-group__verticalRadio_11qfb:last-child {
+        margin-bottom: 0;
+    } .radio-group__horizontalRadio_11qfb {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_1bayu .radio-group__tagLabel_1bayu {
+} .radio-group__horizontalTagLabel_11qfb {
     margin-right: var(--gap-xs);
-} .radio-group__horizontal_1bayu .radio-group__radio_1bayu:last-child,
-.radio-group__horizontal_1bayu .radio-group__tagLabel_1bayu:last-child {
+} .radio-group__horizontalRadio_11qfb:last-child,
+.radio-group__horizontalTagLabel_11qfb:last-child {
     margin-right: 0;
-} .radio-group__label_1bayu {
+} .radio-group__label_11qfb {
     margin-bottom: var(--gap-s);
-} .radio-group__sub_1bayu {
+} .radio-group__sub_11qfb {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_1bayu {
+} .radio-group__errorMessage_11qfb {
     color: var(--radio-group-error-color);
-} .radio-group__hint_1bayu {
+} .radio-group__hint_11qfb {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_1bayu {
+} .radio-group__hiddenInput_11qfb {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0
-} .radio-group__hiddenInput_1bayu:focus ~ button {
+} .radio-group__hiddenInput_11qfb:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_1bayu {
+    } .radio-group__tagLabel_11qfb {
     position: relative;
     max-width: 100%;
 }

package/cssm/components/base-radio-group/Component.d.ts

@@ -20,6 +20,10 @@ type BaseRadioGroupProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для списка радио элементов
+     */
+    radioListClassName?: string;
     /**
      * Отображение ошибки
      */

package/cssm/components/base-radio-group/Component.js

@@ -16,7 +16,7 @@ var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 
 var BaseRadioGroup = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, className = _a.className, _d = _a.direction, direction = _d === void 0 ? 'vertical' : _d, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _e = _a.type, type = _e === void 0 ? 'radio' : _e, dataTestId = _a.dataTestId, _f = _a.disabled, disabled = _f === void 0 ? false : _f, name = _a.name, value = _a.value, styles = _a.styles;
+    var children = _a.children, className = _a.className, radioListClassName = _a.radioListClassName, _d = _a.direction, direction = _d === void 0 ? 'vertical' : _d, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _e = _a.type, type = _e === void 0 ? 'radio' : _e, dataTestId = _a.dataTestId, _f = _a.disabled, disabled = _f === void 0 ? false : _f, name = _a.name, value = _a.value, styles = _a.styles;
     var _g = React.useState(''), stateValue = _g[0], setStateValue = _g[1];
     hooks.useDidUpdateEffect(function () {
         setStateValue(value);
@@ -32,22 +32,20 @@ var BaseRadioGroup = React.forwardRef(function (_a, ref) {
     };
     var renderRadio = function (child) {
         var _a = child.props, childClassName = _a.className, childValue = _a.value;
-        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, commonStyles__default.default.radio) }));
+        return React.cloneElement(child, tslib.__assign(tslib.__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn__default.default(childClassName, commonStyles__default.default["".concat(direction, "Radio")]) }));
     };
     var renderTag = function (child) {
         var childValue = child.props.value;
         var checked = isChecked(childValue);
         var clone = React.cloneElement(child, tslib.__assign(tslib.__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
-        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles__default.default.radio, commonStyles__default.default.tagLabel) },
+        return (React__default.default.createElement("label", { className: cn__default.default(commonStyles__default.default["".concat(direction, "Radio")], commonStyles__default.default["".concat(direction, "TagLabel")]) },
             React__default.default.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: commonStyles__default.default.hiddenInput, value: child.props.value }),
             clone));
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[type], commonStyles__default.default[direction], (_b = {}, _b[commonStyles__default.default.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
+    return (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[type], (_b = {}, _b[commonStyles__default.default.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
         label ? (React__default.default.createElement("span", { className: cn__default.default(commonStyles__default.default.label, styles.label) }, label)) : null,
-        children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.radioList, (_c = {},
-                _c[styles.radioList] = type === 'radio',
-                _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
+        children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.radioList, commonStyles__default.default["".concat(direction, "RadioList")], radioListClassName, (_c = {}, _c[styles.radioList] = type === 'radio', _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
             if (React.isValidElement(child)) {
                 return type === 'radio' ? renderRadio(child) : renderTag(child);
             }

package/cssm/components/base-radio-group/index.module.css

@@ -37,23 +37,23 @@
         padding-left: var(--gap-xs);
     } .radioList {
     display: flex;
-} .vertical .radioList {
+} .verticalRadioList {
     flex-direction: column;
     align-items: flex-start;
-} .vertical .radio {
-    margin-bottom: var(--gap-m)
-} .vertical .radio:last-child {
-        margin-bottom: 0;
-    } .horizontal .radioList {
+} .horizontalRadioList {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .horizontal .radio {
+} .verticalRadio {
+    margin-bottom: var(--gap-m)
+} .verticalRadio:last-child {
+        margin-bottom: 0;
+    } .horizontalRadio {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .horizontal .tagLabel {
+} .horizontalTagLabel {
     margin-right: var(--gap-xs);
-} .horizontal .radio:last-child,
-.horizontal .tagLabel:last-child {
+} .horizontalRadio:last-child,
+.horizontalTagLabel:last-child {
     margin-right: 0;
 } .label {
     margin-bottom: var(--gap-s);

package/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 15xog */
+/* hash: ezy2i */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,14 +21,14 @@
     --radio-group-list-padding-left: 0;
 
     /* mobile */
-} .radio-group__radioList_1rqz2 {
+} .radio-group__radioList_jar3i {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_1rqz2 {
+} .radio-group__label_jar3i {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--radio-group-label-color);
     padding-left: var(--radio-group-sub-padding-left);
-} .radio-group__sub_1rqz2 {
+} .radio-group__sub_jar3i {
     padding-left: var(--radio-group-sub-padding-left);
 }

package/esm/Component.desktop.js

@@ -4,7 +4,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-var styles = {"radioList":"radio-group__radioList_1rqz2","label":"radio-group__label_1rqz2","sub":"radio-group__sub_1rqz2"};
+var styles = {"radioList":"radio-group__radioList_jar3i","label":"radio-group__label_jar3i","sub":"radio-group__sub_jar3i"};
 require('./desktop.css')
 
 var RadioGroupDesktop = forwardRef(function (props, ref) { return React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles })); });

package/esm/Component.mobile.js

@@ -4,7 +4,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-var styles = {"radioList":"radio-group__radioList_pxye2","label":"radio-group__label_pxye2","sub":"radio-group__sub_pxye2"};
+var styles = {"radioList":"radio-group__radioList_4mstm","label":"radio-group__label_4mstm","sub":"radio-group__sub_4mstm"};
 require('./mobile.css')
 
 var RadioGroupMobile = forwardRef(function (props, ref) { return (React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles }))); });

package/esm/components/base-radio-group/Component.d.ts

@@ -20,6 +20,10 @@ type BaseRadioGroupProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для списка радио элементов
+     */
+    radioListClassName?: string;
     /**
      * Отображение ошибки
      */

package/esm/components/base-radio-group/Component.js

@@ -3,12 +3,12 @@ import React, { forwardRef, useState, Children, isValidElement, cloneElement } f
 import cn from 'classnames';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-var commonStyles = {"component":"radio-group__component_1bayu","error":"radio-group__error_1bayu","tag":"radio-group__tag_1bayu","radioList":"radio-group__radioList_1bayu","vertical":"radio-group__vertical_1bayu","radio":"radio-group__radio_1bayu","horizontal":"radio-group__horizontal_1bayu","tagLabel":"radio-group__tagLabel_1bayu","label":"radio-group__label_1bayu","sub":"radio-group__sub_1bayu","errorMessage":"radio-group__errorMessage_1bayu","hint":"radio-group__hint_1bayu","hiddenInput":"radio-group__hiddenInput_1bayu"};
+var commonStyles = {"component":"radio-group__component_11qfb","error":"radio-group__error_11qfb","tag":"radio-group__tag_11qfb","radioList":"radio-group__radioList_11qfb","verticalRadioList":"radio-group__verticalRadioList_11qfb","horizontalRadioList":"radio-group__horizontalRadioList_11qfb","verticalRadio":"radio-group__verticalRadio_11qfb","horizontalRadio":"radio-group__horizontalRadio_11qfb","horizontalTagLabel":"radio-group__horizontalTagLabel_11qfb","label":"radio-group__label_11qfb","sub":"radio-group__sub_11qfb","errorMessage":"radio-group__errorMessage_11qfb","hint":"radio-group__hint_11qfb","hiddenInput":"radio-group__hiddenInput_11qfb","tagLabel":"radio-group__tagLabel_11qfb"};
 require('./index.css')
 
 var BaseRadioGroup = forwardRef(function (_a, ref) {
     var _b, _c;
-    var children = _a.children, className = _a.className, _d = _a.direction, direction = _d === void 0 ? 'vertical' : _d, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _e = _a.type, type = _e === void 0 ? 'radio' : _e, dataTestId = _a.dataTestId, _f = _a.disabled, disabled = _f === void 0 ? false : _f, name = _a.name, value = _a.value, styles = _a.styles;
+    var children = _a.children, className = _a.className, radioListClassName = _a.radioListClassName, _d = _a.direction, direction = _d === void 0 ? 'vertical' : _d, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _e = _a.type, type = _e === void 0 ? 'radio' : _e, dataTestId = _a.dataTestId, _f = _a.disabled, disabled = _f === void 0 ? false : _f, name = _a.name, value = _a.value, styles = _a.styles;
     var _g = useState(''), stateValue = _g[0], setStateValue = _g[1];
     useDidUpdateEffect(function () {
         setStateValue(value);
@@ -24,22 +24,20 @@ var BaseRadioGroup = forwardRef(function (_a, ref) {
     };
     var renderRadio = function (child) {
         var _a = child.props, childClassName = _a.className, childValue = _a.value;
-        return cloneElement(child, __assign(__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn(childClassName, commonStyles.radio) }));
+        return cloneElement(child, __assign(__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn(childClassName, commonStyles["".concat(direction, "Radio")]) }));
     };
     var renderTag = function (child) {
         var childValue = child.props.value;
         var checked = isChecked(childValue);
         var clone = cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
-        return (React.createElement("label", { className: cn(commonStyles.radio, commonStyles.tagLabel) },
+        return (React.createElement("label", { className: cn(commonStyles["".concat(direction, "Radio")], commonStyles["".concat(direction, "TagLabel")]) },
             React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: commonStyles.hiddenInput, value: child.props.value }),
             clone));
     };
     var errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], commonStyles[direction], (_b = {}, _b[commonStyles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
+    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], (_b = {}, _b[commonStyles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
         label ? (React.createElement("span", { className: cn(commonStyles.label, styles.label) }, label)) : null,
-        children ? (React.createElement("div", { className: cn(commonStyles.radioList, (_c = {},
-                _c[styles.radioList] = type === 'radio',
-                _c)), onBlur: onBlur, onFocus: onFocus }, Children.map(children, function (child) {
+        children ? (React.createElement("div", { className: cn(commonStyles.radioList, commonStyles["".concat(direction, "RadioList")], radioListClassName, (_c = {}, _c[styles.radioList] = type === 'radio', _c)), onBlur: onBlur, onFocus: onFocus }, Children.map(children, function (child) {
             if (isValidElement(child)) {
                 return type === 'radio' ? renderRadio(child) : renderTag(child);
             }

package/esm/components/base-radio-group/index.css

@@ -1,4 +1,4 @@
-/* hash: 19q33 */
+/* hash: 7lhr8 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
 
     /* mobile */
-} .radio-group__component_1bayu {
+} .radio-group__component_11qfb {
     display: flex;
     flex-direction: column;
-} .radio-group__error_1bayu {
+} .radio-group__error_11qfb {
     padding-left: var(--gap-s);
     border-left: 1px solid var(--radio-group-error-color)
-} .radio-group__error_1bayu.radio-group__tag_1bayu {
+} .radio-group__error_11qfb.radio-group__tag_11qfb {
         padding-left: var(--gap-xs);
-    } .radio-group__radioList_1bayu {
+    } .radio-group__radioList_11qfb {
     display: flex;
-} .radio-group__vertical_1bayu .radio-group__radioList_1bayu {
+} .radio-group__verticalRadioList_11qfb {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_1bayu .radio-group__radio_1bayu {
-    margin-bottom: var(--gap-m)
-} .radio-group__vertical_1bayu .radio-group__radio_1bayu:last-child {
-        margin-bottom: 0;
-    } .radio-group__horizontal_1bayu .radio-group__radioList_1bayu {
+} .radio-group__horizontalRadioList_11qfb {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__horizontal_1bayu .radio-group__radio_1bayu {
+} .radio-group__verticalRadio_11qfb {
+    margin-bottom: var(--gap-m)
+} .radio-group__verticalRadio_11qfb:last-child {
+        margin-bottom: 0;
+    } .radio-group__horizontalRadio_11qfb {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_1bayu .radio-group__tagLabel_1bayu {
+} .radio-group__horizontalTagLabel_11qfb {
     margin-right: var(--gap-xs);
-} .radio-group__horizontal_1bayu .radio-group__radio_1bayu:last-child,
-.radio-group__horizontal_1bayu .radio-group__tagLabel_1bayu:last-child {
+} .radio-group__horizontalRadio_11qfb:last-child,
+.radio-group__horizontalTagLabel_11qfb:last-child {
     margin-right: 0;
-} .radio-group__label_1bayu {
+} .radio-group__label_11qfb {
     margin-bottom: var(--gap-s);
-} .radio-group__sub_1bayu {
+} .radio-group__sub_11qfb {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_1bayu {
+} .radio-group__errorMessage_11qfb {
     color: var(--radio-group-error-color);
-} .radio-group__hint_1bayu {
+} .radio-group__hint_11qfb {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_1bayu {
+} .radio-group__hiddenInput_11qfb {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0
-} .radio-group__hiddenInput_1bayu:focus ~ button {
+} .radio-group__hiddenInput_11qfb:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_1bayu {
+    } .radio-group__tagLabel_11qfb {
     position: relative;
     max-width: 100%;
 }

package/esm/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 15xog */
+/* hash: ezy2i */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,14 +21,14 @@
     --radio-group-list-padding-left: 0;
 
     /* mobile */
-} .radio-group__radioList_1rqz2 {
+} .radio-group__radioList_jar3i {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_1rqz2 {
+} .radio-group__label_jar3i {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--radio-group-label-color);
     padding-left: var(--radio-group-sub-padding-left);
-} .radio-group__sub_1rqz2 {
+} .radio-group__sub_jar3i {
     padding-left: var(--radio-group-sub-padding-left);
 }

package/esm/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 170nv */
+/* hash: 8spym */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -23,14 +23,14 @@
     --radio-group-mobile-sub-padding-left: var(--gap-2xs);
     --radio-group-mobile-list-padding-left: var(--gap-3xs);
     --radio-group-mobile-label-color: var(--color-light-text-secondary);
-} .radio-group__radioList_pxye2 {
+} .radio-group__radioList_4mstm {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_pxye2 {
+} .radio-group__label_4mstm {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--radio-group-mobile-label-color);
     padding-left: var(--radio-group-mobile-sub-padding-left);
-} .radio-group__sub_pxye2 {
+} .radio-group__sub_4mstm {
     padding-left: var(--radio-group-mobile-sub-padding-left);
 }

package/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 170nv */
+/* hash: 8spym */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -23,14 +23,14 @@
     --radio-group-mobile-sub-padding-left: var(--gap-2xs);
     --radio-group-mobile-list-padding-left: var(--gap-3xs);
     --radio-group-mobile-label-color: var(--color-light-text-secondary);
-} .radio-group__radioList_pxye2 {
+} .radio-group__radioList_4mstm {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_pxye2 {
+} .radio-group__label_4mstm {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--radio-group-mobile-label-color);
     padding-left: var(--radio-group-mobile-sub-padding-left);
-} .radio-group__sub_pxye2 {
+} .radio-group__sub_4mstm {
     padding-left: var(--radio-group-mobile-sub-padding-left);
 }

package/modern/Component.desktop.js

@@ -3,7 +3,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-const styles = {"radioList":"radio-group__radioList_1rqz2","label":"radio-group__label_1rqz2","sub":"radio-group__sub_1rqz2"};
+const styles = {"radioList":"radio-group__radioList_jar3i","label":"radio-group__label_jar3i","sub":"radio-group__sub_jar3i"};
 require('./desktop.css')
 
 const RadioGroupDesktop = forwardRef((props, ref) => React.createElement(BaseRadioGroup, { ...props, ref: ref, styles: styles }));

package/modern/Component.mobile.js

@@ -3,7 +3,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
 import 'classnames';
 import '@alfalab/hooks';
 
-const styles = {"radioList":"radio-group__radioList_pxye2","label":"radio-group__label_pxye2","sub":"radio-group__sub_pxye2"};
+const styles = {"radioList":"radio-group__radioList_4mstm","label":"radio-group__label_4mstm","sub":"radio-group__sub_4mstm"};
 require('./mobile.css')
 
 const RadioGroupMobile = forwardRef((props, ref) => (React.createElement(BaseRadioGroup, { ...props, ref: ref, styles: styles })));

package/modern/components/base-radio-group/Component.d.ts

@@ -20,6 +20,10 @@ type BaseRadioGroupProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для списка радио элементов
+     */
+    radioListClassName?: string;
     /**
      * Отображение ошибки
      */

package/modern/components/base-radio-group/Component.js

@@ -2,10 +2,10 @@ import React, { forwardRef, useState, Children, isValidElement, cloneElement } f
 import cn from 'classnames';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 
-const commonStyles = {"component":"radio-group__component_1bayu","error":"radio-group__error_1bayu","tag":"radio-group__tag_1bayu","radioList":"radio-group__radioList_1bayu","vertical":"radio-group__vertical_1bayu","radio":"radio-group__radio_1bayu","horizontal":"radio-group__horizontal_1bayu","tagLabel":"radio-group__tagLabel_1bayu","label":"radio-group__label_1bayu","sub":"radio-group__sub_1bayu","errorMessage":"radio-group__errorMessage_1bayu","hint":"radio-group__hint_1bayu","hiddenInput":"radio-group__hiddenInput_1bayu"};
+const commonStyles = {"component":"radio-group__component_11qfb","error":"radio-group__error_11qfb","tag":"radio-group__tag_11qfb","radioList":"radio-group__radioList_11qfb","verticalRadioList":"radio-group__verticalRadioList_11qfb","horizontalRadioList":"radio-group__horizontalRadioList_11qfb","verticalRadio":"radio-group__verticalRadio_11qfb","horizontalRadio":"radio-group__horizontalRadio_11qfb","horizontalTagLabel":"radio-group__horizontalTagLabel_11qfb","label":"radio-group__label_11qfb","sub":"radio-group__sub_11qfb","errorMessage":"radio-group__errorMessage_11qfb","hint":"radio-group__hint_11qfb","hiddenInput":"radio-group__hiddenInput_11qfb","tagLabel":"radio-group__tagLabel_11qfb"};
 require('./index.css')
 
-const BaseRadioGroup = forwardRef(({ children, className, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, }, ref) => {
+const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, }, ref) => {
     const [stateValue, setStateValue] = useState('');
     useDidUpdateEffect(() => {
         setStateValue(value);
@@ -25,7 +25,7 @@ const BaseRadioGroup = forwardRef(({ children, className, direction = 'vertical'
             ...child.props,
             checked: isChecked(childValue),
             name,
-            className: cn(childClassName, commonStyles.radio),
+            className: cn(childClassName, commonStyles[`${direction}Radio`]),
         });
     };
     const renderTag = (child) => {
@@ -39,16 +39,14 @@ const BaseRadioGroup = forwardRef(({ children, className, direction = 'vertical'
             name,
             tabIndex: -1,
         });
-        return (React.createElement("label", { className: cn(commonStyles.radio, commonStyles.tagLabel) },
+        return (React.createElement("label", { className: cn(commonStyles[`${direction}Radio`], commonStyles[`${direction}TagLabel`]) },
             React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: (event) => handleChange(event, childValue), disabled: disabled || child.props.disabled, name: name, checked: checked, className: commonStyles.hiddenInput, value: child.props.value }),
             clone));
     };
     const errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], commonStyles[direction], { [commonStyles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
+    return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], { [commonStyles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
         label ? (React.createElement("span", { className: cn(commonStyles.label, styles.label) }, label)) : null,
-        children ? (React.createElement("div", { className: cn(commonStyles.radioList, {
-                [styles.radioList]: type === 'radio',
-            }), onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
+        children ? (React.createElement("div", { className: cn(commonStyles.radioList, commonStyles[`${direction}RadioList`], radioListClassName, { [styles.radioList]: type === 'radio' }), onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
             if (isValidElement(child)) {
                 return type === 'radio' ? renderRadio(child) : renderTag(child);
             }

package/modern/components/base-radio-group/index.css

@@ -1,4 +1,4 @@
-/* hash: 19q33 */
+/* hash: 7lhr8 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
     --radio-group-hint-color: var(--color-light-text-secondary);
 
     /* mobile */
-} .radio-group__component_1bayu {
+} .radio-group__component_11qfb {
     display: flex;
     flex-direction: column;
-} .radio-group__error_1bayu {
+} .radio-group__error_11qfb {
     padding-left: var(--gap-s);
     border-left: 1px solid var(--radio-group-error-color)
-} .radio-group__error_1bayu.radio-group__tag_1bayu {
+} .radio-group__error_11qfb.radio-group__tag_11qfb {
         padding-left: var(--gap-xs);
-    } .radio-group__radioList_1bayu {
+    } .radio-group__radioList_11qfb {
     display: flex;
-} .radio-group__vertical_1bayu .radio-group__radioList_1bayu {
+} .radio-group__verticalRadioList_11qfb {
     flex-direction: column;
     align-items: flex-start;
-} .radio-group__vertical_1bayu .radio-group__radio_1bayu {
-    margin-bottom: var(--gap-m)
-} .radio-group__vertical_1bayu .radio-group__radio_1bayu:last-child {
-        margin-bottom: 0;
-    } .radio-group__horizontal_1bayu .radio-group__radioList_1bayu {
+} .radio-group__horizontalRadioList_11qfb {
     flex-wrap: wrap;
     margin-bottom: var(--gap-xs-neg);
-} .radio-group__horizontal_1bayu .radio-group__radio_1bayu {
+} .radio-group__verticalRadio_11qfb {
+    margin-bottom: var(--gap-m)
+} .radio-group__verticalRadio_11qfb:last-child {
+        margin-bottom: 0;
+    } .radio-group__horizontalRadio_11qfb {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
-} .radio-group__horizontal_1bayu .radio-group__tagLabel_1bayu {
+} .radio-group__horizontalTagLabel_11qfb {
     margin-right: var(--gap-xs);
-} .radio-group__horizontal_1bayu .radio-group__radio_1bayu:last-child,
-.radio-group__horizontal_1bayu .radio-group__tagLabel_1bayu:last-child {
+} .radio-group__horizontalRadio_11qfb:last-child,
+.radio-group__horizontalTagLabel_11qfb:last-child {
     margin-right: 0;
-} .radio-group__label_1bayu {
+} .radio-group__label_11qfb {
     margin-bottom: var(--gap-s);
-} .radio-group__sub_1bayu {
+} .radio-group__sub_11qfb {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     margin-top: var(--gap-s);
-} .radio-group__errorMessage_1bayu {
+} .radio-group__errorMessage_11qfb {
     color: var(--radio-group-error-color);
-} .radio-group__hint_1bayu {
+} .radio-group__hint_11qfb {
     color: var(--radio-group-hint-color);
-} .radio-group__hiddenInput_1bayu {
+} .radio-group__hiddenInput_11qfb {
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     opacity: 0
-} .radio-group__hiddenInput_1bayu:focus ~ button {
+} .radio-group__hiddenInput_11qfb:focus ~ button {
         outline: 2px solid var(--focus-color);
         outline-offset: 2px;
-    } .radio-group__tagLabel_1bayu {
+    } .radio-group__tagLabel_11qfb {
     position: relative;
     max-width: 100%;
 }

package/modern/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 15xog */
+/* hash: ezy2i */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,14 +21,14 @@
     --radio-group-list-padding-left: 0;
 
     /* mobile */
-} .radio-group__radioList_1rqz2 {
+} .radio-group__radioList_jar3i {
     padding-left: var(--radio-group-list-padding-left);
-} .radio-group__label_1rqz2 {
+} .radio-group__label_jar3i {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     color: var(--radio-group-label-color);
     padding-left: var(--radio-group-sub-padding-left);
-} .radio-group__sub_1rqz2 {
+} .radio-group__sub_jar3i {
     padding-left: var(--radio-group-sub-padding-left);
 }

package/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 170nv */
+/* hash: 8spym */
 :root {
 } /* deprecated */ :root {
     --color-light-text-secondary: rgba(60, 60, 67, 0.66); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -23,14 +23,14 @@
     --radio-group-mobile-sub-padding-left: var(--gap-2xs);
     --radio-group-mobile-list-padding-left: var(--gap-3xs);
     --radio-group-mobile-label-color: var(--color-light-text-secondary);
-} .radio-group__radioList_pxye2 {
+} .radio-group__radioList_4mstm {
     padding-left: var(--radio-group-mobile-list-padding-left);
-} .radio-group__label_pxye2 {
+} .radio-group__label_4mstm {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--radio-group-mobile-label-color);
     padding-left: var(--radio-group-mobile-sub-padding-left);
-} .radio-group__sub_pxye2 {
+} .radio-group__sub_4mstm {
     padding-left: var(--radio-group-mobile-sub-padding-left);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-radio-group",
-    "version": "4.0.1",
+    "version": "4.1.1",
     "description": "Radio group",
     "keywords": [],
     "license": "MIT",

package/src/components/base-radio-group/Component.tsx

@@ -40,6 +40,11 @@ export type BaseRadioGroupProps = {
      */
     className?: string;
 
+    /**
+     * Дополнительный класс для списка радио элементов
+     */
+    radioListClassName?: string;
+
     /**
      * Отображение ошибки
      */
@@ -107,6 +112,7 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
         {
             children,
             className,
+            radioListClassName,
             direction = 'vertical',
             label,
             error,
@@ -148,7 +154,7 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
                 ...child.props,
                 checked: isChecked(childValue),
                 name,
-                className: cn(childClassName, commonStyles.radio),
+                className: cn(childClassName, commonStyles[`${direction}Radio`]),
             });
         };
 
@@ -165,7 +171,12 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
             });
 
             return (
-                <label className={cn(commonStyles.radio, commonStyles.tagLabel)}>
+                <label
+                    className={cn(
+                        commonStyles[`${direction}Radio`],
+                        commonStyles[`${direction}TagLabel`],
+                    )}
+                >
                     <input
                         type='radio'
                         autoComplete='off'
@@ -188,7 +199,6 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
                 className={cn(
                     commonStyles.component,
                     commonStyles[type],
-                    commonStyles[direction],
                     { [commonStyles.error]: error },
                     className,
                 )}
@@ -201,9 +211,12 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
 
                 {children ? (
                     <div
-                        className={cn(commonStyles.radioList, {
-                            [styles.radioList]: type === 'radio',
-                        })}
+                        className={cn(
+                            commonStyles.radioList,
+                            commonStyles[`${direction}RadioList`],
+                            radioListClassName,
+                            { [styles.radioList]: type === 'radio' },
+                        )}
                         onBlur={onBlur}
                         onFocus={onFocus}
                     >

package/src/components/base-radio-group/index.module.css

@@ -18,12 +18,17 @@
     display: flex;
 }
 
-.vertical .radioList {
+.verticalRadioList {
     flex-direction: column;
     align-items: flex-start;
 }
 
-.vertical .radio {
+.horizontalRadioList {
+    flex-wrap: wrap;
+    margin-bottom: var(--gap-xs-neg);
+}
+
+.verticalRadio {
     margin-bottom: var(--gap-m);
 
     &:last-child {
@@ -31,22 +36,17 @@
     }
 }
 
-.horizontal .radioList {
-    flex-wrap: wrap;
-    margin-bottom: var(--gap-xs-neg);
-}
-
-.horizontal .radio {
+.horizontalRadio {
     margin-right: var(--gap-xl);
     margin-bottom: var(--gap-xs);
 }
 
-.horizontal .tagLabel {
+.horizontalTagLabel {
     margin-right: var(--gap-xs);
 }
 
-.horizontal .radio:last-child,
-.horizontal .tagLabel:last-child {
+.horizontalRadio:last-child,
+.horizontalTagLabel:last-child {
     margin-right: 0;
 }