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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/Component.desktop.js +1 -1
  2. package/Component.mobile.js +1 -1
  3. package/components/base-radio-group/Component.js +5 -7
  4. package/components/base-radio-group/index.css +22 -22
  5. package/cssm/components/base-radio-group/Component.js +4 -6
  6. package/cssm/components/base-radio-group/index.module.css +10 -10
  7. package/desktop.css +4 -4
  8. package/esm/Component.desktop.js +1 -1
  9. package/esm/Component.mobile.js +1 -1
  10. package/esm/components/base-radio-group/Component.js +5 -7
  11. package/esm/components/base-radio-group/index.css +22 -22
  12. package/esm/desktop.css +4 -4
  13. package/esm/mobile.css +4 -4
  14. package/mobile.css +4 -4
  15. package/modern/Component.desktop.js +1 -1
  16. package/modern/Component.mobile.js +1 -1
  17. package/modern/components/base-radio-group/Component.js +5 -7
  18. package/modern/components/base-radio-group/index.css +22 -22
  19. package/modern/desktop.css +4 -4
  20. package/modern/mobile.css +4 -4
  21. package/package.json +1 -1
  22. package/src/components/base-radio-group/Component.tsx +13 -6
  23. package/src/components/base-radio-group/index.module.css +11 -11
package/Component.desktop.js CHANGED
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
12
12
 
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
 
15
- var styles = {"radioList":"radio-group__radioList_j0spj","label":"radio-group__label_j0spj","sub":"radio-group__sub_j0spj"};
15
+ var styles = {"radioList":"radio-group__radioList_jar3i","label":"radio-group__label_jar3i","sub":"radio-group__sub_jar3i"};
16
16
  require('./desktop.css')
17
17
 
18
18
  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 CHANGED
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
12
12
 
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
 
15
- var styles = {"radioList":"radio-group__radioList_ree10","label":"radio-group__label_ree10","sub":"radio-group__sub_ree10"};
15
+ var styles = {"radioList":"radio-group__radioList_4mstm","label":"radio-group__label_4mstm","sub":"radio-group__sub_4mstm"};
16
16
  require('./mobile.css')
17
17
 
18
18
  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.js CHANGED
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
13
13
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
14
14
 
15
- var commonStyles = {"component":"radio-group__component_1gwql","error":"radio-group__error_1gwql","tag":"radio-group__tag_1gwql","radioList":"radio-group__radioList_1gwql","vertical":"radio-group__vertical_1gwql","radio":"radio-group__radio_1gwql","horizontal":"radio-group__horizontal_1gwql","tagLabel":"radio-group__tagLabel_1gwql","label":"radio-group__label_1gwql","sub":"radio-group__sub_1gwql","errorMessage":"radio-group__errorMessage_1gwql","hint":"radio-group__hint_1gwql","hiddenInput":"radio-group__hiddenInput_1gwql"};
15
+ 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"};
16
16
  require('./index.css')
17
17
 
18
18
  var BaseRadioGroup = React.forwardRef(function (_a, ref) {
@@ -33,22 +33,20 @@ var BaseRadioGroup = React.forwardRef(function (_a, ref) {
33
33
  };
34
34
  var renderRadio = function (child) {
35
35
  var _a = child.props, childClassName = _a.className, childValue = _a.value;
36
- 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) }));
36
+ 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")]) }));
37
37
  };
38
38
  var renderTag = function (child) {
39
39
  var childValue = child.props.value;
40
40
  var checked = isChecked(childValue);
41
41
  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 }));
42
- return (React__default.default.createElement("label", { className: cn__default.default(commonStyles.radio, commonStyles.tagLabel) },
42
+ return (React__default.default.createElement("label", { className: cn__default.default(commonStyles["".concat(direction, "Radio")], commonStyles["".concat(direction, "TagLabel")]) },
43
43
  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 }),
44
44
  clone));
45
45
  };
46
46
  var errorMessage = typeof error === 'boolean' ? '' : error;
47
- 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 },
47
+ 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 },
48
48
  label ? (React__default.default.createElement("span", { className: cn__default.default(commonStyles.label, styles.label) }, label)) : null,
49
- children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles.radioList, radioListClassName, (_c = {},
50
- _c[styles.radioList] = type === 'radio',
51
- _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
49
+ 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) {
52
50
  if (React.isValidElement(child)) {
53
51
  return type === 'radio' ? renderRadio(child) : renderTag(child);
54
52
  }
package/components/base-radio-group/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: rhtyn */
1
+ /* hash: 7lhr8 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
28
28
  --radio-group-hint-color: var(--color-light-text-secondary);
29
29
 
30
30
  /* mobile */
31
- } .radio-group__component_1gwql {
31
+ } .radio-group__component_11qfb {
32
32
  display: flex;
33
33
  flex-direction: column;
34
- } .radio-group__error_1gwql {
34
+ } .radio-group__error_11qfb {
35
35
  padding-left: var(--gap-s);
36
36
  border-left: 1px solid var(--radio-group-error-color)
37
- } .radio-group__error_1gwql.radio-group__tag_1gwql {
37
+ } .radio-group__error_11qfb.radio-group__tag_11qfb {
38
38
  padding-left: var(--gap-xs);
39
- } .radio-group__radioList_1gwql {
39
+ } .radio-group__radioList_11qfb {
40
40
  display: flex;
41
- } .radio-group__vertical_1gwql .radio-group__radioList_1gwql {
41
+ } .radio-group__verticalRadioList_11qfb {
42
42
  flex-direction: column;
43
43
  align-items: flex-start;
44
- } .radio-group__vertical_1gwql .radio-group__radio_1gwql {
45
- margin-bottom: var(--gap-m)
46
- } .radio-group__vertical_1gwql .radio-group__radio_1gwql:last-child {
47
- margin-bottom: 0;
48
- } .radio-group__horizontal_1gwql .radio-group__radioList_1gwql {
44
+ } .radio-group__horizontalRadioList_11qfb {
49
45
  flex-wrap: wrap;
50
46
  margin-bottom: var(--gap-xs-neg);
51
- } .radio-group__horizontal_1gwql .radio-group__radio_1gwql {
47
+ } .radio-group__verticalRadio_11qfb {
48
+ margin-bottom: var(--gap-m)
49
+ } .radio-group__verticalRadio_11qfb:last-child {
50
+ margin-bottom: 0;
51
+ } .radio-group__horizontalRadio_11qfb {
52
52
  margin-right: var(--gap-xl);
53
53
  margin-bottom: var(--gap-xs);
54
- } .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql {
54
+ } .radio-group__horizontalTagLabel_11qfb {
55
55
  margin-right: var(--gap-xs);
56
- } .radio-group__horizontal_1gwql .radio-group__radio_1gwql:last-child,
57
- .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql:last-child {
56
+ } .radio-group__horizontalRadio_11qfb:last-child,
57
+ .radio-group__horizontalTagLabel_11qfb:last-child {
58
58
  margin-right: 0;
59
- } .radio-group__label_1gwql {
59
+ } .radio-group__label_11qfb {
60
60
  margin-bottom: var(--gap-s);
61
- } .radio-group__sub_1gwql {
61
+ } .radio-group__sub_11qfb {
62
62
  font-size: 14px;
63
63
  line-height: 18px;
64
64
  font-weight: 400;
65
65
  margin-top: var(--gap-s);
66
- } .radio-group__errorMessage_1gwql {
66
+ } .radio-group__errorMessage_11qfb {
67
67
  color: var(--radio-group-error-color);
68
- } .radio-group__hint_1gwql {
68
+ } .radio-group__hint_11qfb {
69
69
  color: var(--radio-group-hint-color);
70
- } .radio-group__hiddenInput_1gwql {
70
+ } .radio-group__hiddenInput_11qfb {
71
71
  position: absolute;
72
72
  z-index: -1;
73
73
  top: 0;
74
74
  left: 0;
75
75
  opacity: 0
76
- } .radio-group__hiddenInput_1gwql:focus ~ button {
76
+ } .radio-group__hiddenInput_11qfb:focus ~ button {
77
77
  outline: 2px solid var(--focus-color);
78
78
  outline-offset: 2px;
79
- } .radio-group__tagLabel_1gwql {
79
+ } .radio-group__tagLabel_11qfb {
80
80
  position: relative;
81
81
  max-width: 100%;
82
82
  }
package/cssm/components/base-radio-group/Component.js CHANGED
@@ -32,22 +32,20 @@ var BaseRadioGroup = React.forwardRef(function (_a, ref) {
32
32
  };
33
33
  var renderRadio = function (child) {
34
34
  var _a = child.props, childClassName = _a.className, childValue = _a.value;
35
- 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) }));
35
+ 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")]) }));
36
36
  };
37
37
  var renderTag = function (child) {
38
38
  var childValue = child.props.value;
39
39
  var checked = isChecked(childValue);
40
40
  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 }));
41
- return (React__default.default.createElement("label", { className: cn__default.default(commonStyles__default.default.radio, commonStyles__default.default.tagLabel) },
41
+ return (React__default.default.createElement("label", { className: cn__default.default(commonStyles__default.default["".concat(direction, "Radio")], commonStyles__default.default["".concat(direction, "TagLabel")]) },
42
42
  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 }),
43
43
  clone));
44
44
  };
45
45
  var errorMessage = typeof error === 'boolean' ? '' : error;
46
- 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 },
46
+ 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 },
47
47
  label ? (React__default.default.createElement("span", { className: cn__default.default(commonStyles__default.default.label, styles.label) }, label)) : null,
48
- children ? (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.radioList, radioListClassName, (_c = {},
49
- _c[styles.radioList] = type === 'radio',
50
- _c)), onBlur: onBlur, onFocus: onFocus }, React.Children.map(children, function (child) {
48
+ 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) {
51
49
  if (React.isValidElement(child)) {
52
50
  return type === 'radio' ? renderRadio(child) : renderTag(child);
53
51
  }
package/cssm/components/base-radio-group/index.module.css CHANGED
@@ -37,23 +37,23 @@
37
37
  padding-left: var(--gap-xs);
38
38
  } .radioList {
39
39
  display: flex;
40
- } .vertical .radioList {
40
+ } .verticalRadioList {
41
41
  flex-direction: column;
42
42
  align-items: flex-start;
43
- } .vertical .radio {
44
- margin-bottom: var(--gap-m)
45
- } .vertical .radio:last-child {
46
- margin-bottom: 0;
47
- } .horizontal .radioList {
43
+ } .horizontalRadioList {
48
44
  flex-wrap: wrap;
49
45
  margin-bottom: var(--gap-xs-neg);
50
- } .horizontal .radio {
46
+ } .verticalRadio {
47
+ margin-bottom: var(--gap-m)
48
+ } .verticalRadio:last-child {
49
+ margin-bottom: 0;
50
+ } .horizontalRadio {
51
51
  margin-right: var(--gap-xl);
52
52
  margin-bottom: var(--gap-xs);
53
- } .horizontal .tagLabel {
53
+ } .horizontalTagLabel {
54
54
  margin-right: var(--gap-xs);
55
- } .horizontal .radio:last-child,
56
- .horizontal .tagLabel:last-child {
55
+ } .horizontalRadio:last-child,
56
+ .horizontalTagLabel:last-child {
57
57
  margin-right: 0;
58
58
  } .label {
59
59
  margin-bottom: var(--gap-s);
package/desktop.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 12evq */
1
+ /* hash: ezy2i */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
21
21
  --radio-group-list-padding-left: 0;
22
22
 
23
23
  /* mobile */
24
- } .radio-group__radioList_j0spj {
24
+ } .radio-group__radioList_jar3i {
25
25
  padding-left: var(--radio-group-list-padding-left);
26
- } .radio-group__label_j0spj {
26
+ } .radio-group__label_jar3i {
27
27
  font-size: 16px;
28
28
  line-height: 24px;
29
29
  font-weight: 400;
30
30
  color: var(--radio-group-label-color);
31
31
  padding-left: var(--radio-group-sub-padding-left);
32
- } .radio-group__sub_j0spj {
32
+ } .radio-group__sub_jar3i {
33
33
  padding-left: var(--radio-group-sub-padding-left);
34
34
  }
package/esm/Component.desktop.js CHANGED
@@ -4,7 +4,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
4
4
  import 'classnames';
5
5
  import '@alfalab/hooks';
6
6
 
7
- var styles = {"radioList":"radio-group__radioList_j0spj","label":"radio-group__label_j0spj","sub":"radio-group__sub_j0spj"};
7
+ var styles = {"radioList":"radio-group__radioList_jar3i","label":"radio-group__label_jar3i","sub":"radio-group__sub_jar3i"};
8
8
  require('./desktop.css')
9
9
 
10
10
  var RadioGroupDesktop = forwardRef(function (props, ref) { return React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles })); });
package/esm/Component.mobile.js CHANGED
@@ -4,7 +4,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
4
4
  import 'classnames';
5
5
  import '@alfalab/hooks';
6
6
 
7
- var styles = {"radioList":"radio-group__radioList_ree10","label":"radio-group__label_ree10","sub":"radio-group__sub_ree10"};
7
+ var styles = {"radioList":"radio-group__radioList_4mstm","label":"radio-group__label_4mstm","sub":"radio-group__sub_4mstm"};
8
8
  require('./mobile.css')
9
9
 
10
10
  var RadioGroupMobile = forwardRef(function (props, ref) { return (React.createElement(BaseRadioGroup, __assign({}, props, { ref: ref, styles: styles }))); });
package/esm/components/base-radio-group/Component.js CHANGED
@@ -3,7 +3,7 @@ import React, { forwardRef, useState, Children, isValidElement, cloneElement } f
3
3
  import cn from 'classnames';
4
4
  import { useDidUpdateEffect } from '@alfalab/hooks';
5
5
 
6
- var commonStyles = {"component":"radio-group__component_1gwql","error":"radio-group__error_1gwql","tag":"radio-group__tag_1gwql","radioList":"radio-group__radioList_1gwql","vertical":"radio-group__vertical_1gwql","radio":"radio-group__radio_1gwql","horizontal":"radio-group__horizontal_1gwql","tagLabel":"radio-group__tagLabel_1gwql","label":"radio-group__label_1gwql","sub":"radio-group__sub_1gwql","errorMessage":"radio-group__errorMessage_1gwql","hint":"radio-group__hint_1gwql","hiddenInput":"radio-group__hiddenInput_1gwql"};
6
+ 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"};
7
7
  require('./index.css')
8
8
 
9
9
  var BaseRadioGroup = forwardRef(function (_a, ref) {
@@ -24,22 +24,20 @@ var BaseRadioGroup = forwardRef(function (_a, ref) {
24
24
  };
25
25
  var renderRadio = function (child) {
26
26
  var _a = child.props, childClassName = _a.className, childValue = _a.value;
27
- 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) }));
27
+ 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")]) }));
28
28
  };
29
29
  var renderTag = function (child) {
30
30
  var childValue = child.props.value;
31
31
  var checked = isChecked(childValue);
32
32
  var clone = cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
33
- return (React.createElement("label", { className: cn(commonStyles.radio, commonStyles.tagLabel) },
33
+ return (React.createElement("label", { className: cn(commonStyles["".concat(direction, "Radio")], commonStyles["".concat(direction, "TagLabel")]) },
34
34
  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 }),
35
35
  clone));
36
36
  };
37
37
  var errorMessage = typeof error === 'boolean' ? '' : error;
38
- 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 },
38
+ return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], (_b = {}, _b[commonStyles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
39
39
  label ? (React.createElement("span", { className: cn(commonStyles.label, styles.label) }, label)) : null,
40
- children ? (React.createElement("div", { className: cn(commonStyles.radioList, radioListClassName, (_c = {},
41
- _c[styles.radioList] = type === 'radio',
42
- _c)), onBlur: onBlur, onFocus: onFocus }, Children.map(children, function (child) {
40
+ 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) {
43
41
  if (isValidElement(child)) {
44
42
  return type === 'radio' ? renderRadio(child) : renderTag(child);
45
43
  }
package/esm/components/base-radio-group/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: rhtyn */
1
+ /* hash: 7lhr8 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
28
28
  --radio-group-hint-color: var(--color-light-text-secondary);
29
29
 
30
30
  /* mobile */
31
- } .radio-group__component_1gwql {
31
+ } .radio-group__component_11qfb {
32
32
  display: flex;
33
33
  flex-direction: column;
34
- } .radio-group__error_1gwql {
34
+ } .radio-group__error_11qfb {
35
35
  padding-left: var(--gap-s);
36
36
  border-left: 1px solid var(--radio-group-error-color)
37
- } .radio-group__error_1gwql.radio-group__tag_1gwql {
37
+ } .radio-group__error_11qfb.radio-group__tag_11qfb {
38
38
  padding-left: var(--gap-xs);
39
- } .radio-group__radioList_1gwql {
39
+ } .radio-group__radioList_11qfb {
40
40
  display: flex;
41
- } .radio-group__vertical_1gwql .radio-group__radioList_1gwql {
41
+ } .radio-group__verticalRadioList_11qfb {
42
42
  flex-direction: column;
43
43
  align-items: flex-start;
44
- } .radio-group__vertical_1gwql .radio-group__radio_1gwql {
45
- margin-bottom: var(--gap-m)
46
- } .radio-group__vertical_1gwql .radio-group__radio_1gwql:last-child {
47
- margin-bottom: 0;
48
- } .radio-group__horizontal_1gwql .radio-group__radioList_1gwql {
44
+ } .radio-group__horizontalRadioList_11qfb {
49
45
  flex-wrap: wrap;
50
46
  margin-bottom: var(--gap-xs-neg);
51
- } .radio-group__horizontal_1gwql .radio-group__radio_1gwql {
47
+ } .radio-group__verticalRadio_11qfb {
48
+ margin-bottom: var(--gap-m)
49
+ } .radio-group__verticalRadio_11qfb:last-child {
50
+ margin-bottom: 0;
51
+ } .radio-group__horizontalRadio_11qfb {
52
52
  margin-right: var(--gap-xl);
53
53
  margin-bottom: var(--gap-xs);
54
- } .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql {
54
+ } .radio-group__horizontalTagLabel_11qfb {
55
55
  margin-right: var(--gap-xs);
56
- } .radio-group__horizontal_1gwql .radio-group__radio_1gwql:last-child,
57
- .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql:last-child {
56
+ } .radio-group__horizontalRadio_11qfb:last-child,
57
+ .radio-group__horizontalTagLabel_11qfb:last-child {
58
58
  margin-right: 0;
59
- } .radio-group__label_1gwql {
59
+ } .radio-group__label_11qfb {
60
60
  margin-bottom: var(--gap-s);
61
- } .radio-group__sub_1gwql {
61
+ } .radio-group__sub_11qfb {
62
62
  font-size: 14px;
63
63
  line-height: 18px;
64
64
  font-weight: 400;
65
65
  margin-top: var(--gap-s);
66
- } .radio-group__errorMessage_1gwql {
66
+ } .radio-group__errorMessage_11qfb {
67
67
  color: var(--radio-group-error-color);
68
- } .radio-group__hint_1gwql {
68
+ } .radio-group__hint_11qfb {
69
69
  color: var(--radio-group-hint-color);
70
- } .radio-group__hiddenInput_1gwql {
70
+ } .radio-group__hiddenInput_11qfb {
71
71
  position: absolute;
72
72
  z-index: -1;
73
73
  top: 0;
74
74
  left: 0;
75
75
  opacity: 0
76
- } .radio-group__hiddenInput_1gwql:focus ~ button {
76
+ } .radio-group__hiddenInput_11qfb:focus ~ button {
77
77
  outline: 2px solid var(--focus-color);
78
78
  outline-offset: 2px;
79
- } .radio-group__tagLabel_1gwql {
79
+ } .radio-group__tagLabel_11qfb {
80
80
  position: relative;
81
81
  max-width: 100%;
82
82
  }
package/esm/desktop.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 12evq */
1
+ /* hash: ezy2i */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
21
21
  --radio-group-list-padding-left: 0;
22
22
 
23
23
  /* mobile */
24
- } .radio-group__radioList_j0spj {
24
+ } .radio-group__radioList_jar3i {
25
25
  padding-left: var(--radio-group-list-padding-left);
26
- } .radio-group__label_j0spj {
26
+ } .radio-group__label_jar3i {
27
27
  font-size: 16px;
28
28
  line-height: 24px;
29
29
  font-weight: 400;
30
30
  color: var(--radio-group-label-color);
31
31
  padding-left: var(--radio-group-sub-padding-left);
32
- } .radio-group__sub_j0spj {
32
+ } .radio-group__sub_jar3i {
33
33
  padding-left: var(--radio-group-sub-padding-left);
34
34
  }
package/esm/mobile.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1nxht */
1
+ /* hash: 8spym */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
23
23
  --radio-group-mobile-sub-padding-left: var(--gap-2xs);
24
24
  --radio-group-mobile-list-padding-left: var(--gap-3xs);
25
25
  --radio-group-mobile-label-color: var(--color-light-text-secondary);
26
- } .radio-group__radioList_ree10 {
26
+ } .radio-group__radioList_4mstm {
27
27
  padding-left: var(--radio-group-mobile-list-padding-left);
28
- } .radio-group__label_ree10 {
28
+ } .radio-group__label_4mstm {
29
29
  font-size: 14px;
30
30
  line-height: 18px;
31
31
  font-weight: 400;
32
32
  color: var(--radio-group-mobile-label-color);
33
33
  padding-left: var(--radio-group-mobile-sub-padding-left);
34
- } .radio-group__sub_ree10 {
34
+ } .radio-group__sub_4mstm {
35
35
  padding-left: var(--radio-group-mobile-sub-padding-left);
36
36
  }
package/mobile.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1nxht */
1
+ /* hash: 8spym */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
23
23
  --radio-group-mobile-sub-padding-left: var(--gap-2xs);
24
24
  --radio-group-mobile-list-padding-left: var(--gap-3xs);
25
25
  --radio-group-mobile-label-color: var(--color-light-text-secondary);
26
- } .radio-group__radioList_ree10 {
26
+ } .radio-group__radioList_4mstm {
27
27
  padding-left: var(--radio-group-mobile-list-padding-left);
28
- } .radio-group__label_ree10 {
28
+ } .radio-group__label_4mstm {
29
29
  font-size: 14px;
30
30
  line-height: 18px;
31
31
  font-weight: 400;
32
32
  color: var(--radio-group-mobile-label-color);
33
33
  padding-left: var(--radio-group-mobile-sub-padding-left);
34
- } .radio-group__sub_ree10 {
34
+ } .radio-group__sub_4mstm {
35
35
  padding-left: var(--radio-group-mobile-sub-padding-left);
36
36
  }
package/modern/Component.desktop.js CHANGED
@@ -3,7 +3,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
3
3
  import 'classnames';
4
4
  import '@alfalab/hooks';
5
5
 
6
- const styles = {"radioList":"radio-group__radioList_j0spj","label":"radio-group__label_j0spj","sub":"radio-group__sub_j0spj"};
6
+ const styles = {"radioList":"radio-group__radioList_jar3i","label":"radio-group__label_jar3i","sub":"radio-group__sub_jar3i"};
7
7
  require('./desktop.css')
8
8
 
9
9
  const RadioGroupDesktop = forwardRef((props, ref) => React.createElement(BaseRadioGroup, { ...props, ref: ref, styles: styles }));
package/modern/Component.mobile.js CHANGED
@@ -3,7 +3,7 @@ import { BaseRadioGroup } from './components/base-radio-group/Component.js';
3
3
  import 'classnames';
4
4
  import '@alfalab/hooks';
5
5
 
6
- const styles = {"radioList":"radio-group__radioList_ree10","label":"radio-group__label_ree10","sub":"radio-group__sub_ree10"};
6
+ const styles = {"radioList":"radio-group__radioList_4mstm","label":"radio-group__label_4mstm","sub":"radio-group__sub_4mstm"};
7
7
  require('./mobile.css')
8
8
 
9
9
  const RadioGroupMobile = forwardRef((props, ref) => (React.createElement(BaseRadioGroup, { ...props, ref: ref, styles: styles })));
package/modern/components/base-radio-group/Component.js CHANGED
@@ -2,7 +2,7 @@ import React, { forwardRef, useState, Children, isValidElement, cloneElement } f
2
2
  import cn from 'classnames';
3
3
  import { useDidUpdateEffect } from '@alfalab/hooks';
4
4
 
5
- const commonStyles = {"component":"radio-group__component_1gwql","error":"radio-group__error_1gwql","tag":"radio-group__tag_1gwql","radioList":"radio-group__radioList_1gwql","vertical":"radio-group__vertical_1gwql","radio":"radio-group__radio_1gwql","horizontal":"radio-group__horizontal_1gwql","tagLabel":"radio-group__tagLabel_1gwql","label":"radio-group__label_1gwql","sub":"radio-group__sub_1gwql","errorMessage":"radio-group__errorMessage_1gwql","hint":"radio-group__hint_1gwql","hiddenInput":"radio-group__hiddenInput_1gwql"};
5
+ 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"};
6
6
  require('./index.css')
7
7
 
8
8
  const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, direction = 'vertical', label, error, hint, onChange, onBlur, onFocus, type = 'radio', dataTestId, disabled = false, name, value, styles, }, ref) => {
@@ -25,7 +25,7 @@ const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, di
25
25
  ...child.props,
26
26
  checked: isChecked(childValue),
27
27
  name,
28
- className: cn(childClassName, commonStyles.radio),
28
+ className: cn(childClassName, commonStyles[`${direction}Radio`]),
29
29
  });
30
30
  };
31
31
  const renderTag = (child) => {
@@ -39,16 +39,14 @@ const BaseRadioGroup = forwardRef(({ children, className, radioListClassName, di
39
39
  name,
40
40
  tabIndex: -1,
41
41
  });
42
- return (React.createElement("label", { className: cn(commonStyles.radio, commonStyles.tagLabel) },
42
+ return (React.createElement("label", { className: cn(commonStyles[`${direction}Radio`], commonStyles[`${direction}TagLabel`]) },
43
43
  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 }),
44
44
  clone));
45
45
  };
46
46
  const errorMessage = typeof error === 'boolean' ? '' : error;
47
- return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], commonStyles[direction], { [commonStyles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
47
+ return (React.createElement("div", { className: cn(commonStyles.component, commonStyles[type], { [commonStyles.error]: error }, className), "data-test-id": dataTestId, ref: ref },
48
48
  label ? (React.createElement("span", { className: cn(commonStyles.label, styles.label) }, label)) : null,
49
- children ? (React.createElement("div", { className: cn(commonStyles.radioList, radioListClassName, {
50
- [styles.radioList]: type === 'radio',
51
- }), onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
49
+ children ? (React.createElement("div", { className: cn(commonStyles.radioList, commonStyles[`${direction}RadioList`], radioListClassName, { [styles.radioList]: type === 'radio' }), onBlur: onBlur, onFocus: onFocus }, Children.map(children, (child) => {
52
50
  if (isValidElement(child)) {
53
51
  return type === 'radio' ? renderRadio(child) : renderTag(child);
54
52
  }
package/modern/components/base-radio-group/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: rhtyn */
1
+ /* hash: 7lhr8 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -28,55 +28,55 @@
28
28
  --radio-group-hint-color: var(--color-light-text-secondary);
29
29
 
30
30
  /* mobile */
31
- } .radio-group__component_1gwql {
31
+ } .radio-group__component_11qfb {
32
32
  display: flex;
33
33
  flex-direction: column;
34
- } .radio-group__error_1gwql {
34
+ } .radio-group__error_11qfb {
35
35
  padding-left: var(--gap-s);
36
36
  border-left: 1px solid var(--radio-group-error-color)
37
- } .radio-group__error_1gwql.radio-group__tag_1gwql {
37
+ } .radio-group__error_11qfb.radio-group__tag_11qfb {
38
38
  padding-left: var(--gap-xs);
39
- } .radio-group__radioList_1gwql {
39
+ } .radio-group__radioList_11qfb {
40
40
  display: flex;
41
- } .radio-group__vertical_1gwql .radio-group__radioList_1gwql {
41
+ } .radio-group__verticalRadioList_11qfb {
42
42
  flex-direction: column;
43
43
  align-items: flex-start;
44
- } .radio-group__vertical_1gwql .radio-group__radio_1gwql {
45
- margin-bottom: var(--gap-m)
46
- } .radio-group__vertical_1gwql .radio-group__radio_1gwql:last-child {
47
- margin-bottom: 0;
48
- } .radio-group__horizontal_1gwql .radio-group__radioList_1gwql {
44
+ } .radio-group__horizontalRadioList_11qfb {
49
45
  flex-wrap: wrap;
50
46
  margin-bottom: var(--gap-xs-neg);
51
- } .radio-group__horizontal_1gwql .radio-group__radio_1gwql {
47
+ } .radio-group__verticalRadio_11qfb {
48
+ margin-bottom: var(--gap-m)
49
+ } .radio-group__verticalRadio_11qfb:last-child {
50
+ margin-bottom: 0;
51
+ } .radio-group__horizontalRadio_11qfb {
52
52
  margin-right: var(--gap-xl);
53
53
  margin-bottom: var(--gap-xs);
54
- } .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql {
54
+ } .radio-group__horizontalTagLabel_11qfb {
55
55
  margin-right: var(--gap-xs);
56
- } .radio-group__horizontal_1gwql .radio-group__radio_1gwql:last-child,
57
- .radio-group__horizontal_1gwql .radio-group__tagLabel_1gwql:last-child {
56
+ } .radio-group__horizontalRadio_11qfb:last-child,
57
+ .radio-group__horizontalTagLabel_11qfb:last-child {
58
58
  margin-right: 0;
59
- } .radio-group__label_1gwql {
59
+ } .radio-group__label_11qfb {
60
60
  margin-bottom: var(--gap-s);
61
- } .radio-group__sub_1gwql {
61
+ } .radio-group__sub_11qfb {
62
62
  font-size: 14px;
63
63
  line-height: 18px;
64
64
  font-weight: 400;
65
65
  margin-top: var(--gap-s);
66
- } .radio-group__errorMessage_1gwql {
66
+ } .radio-group__errorMessage_11qfb {
67
67
  color: var(--radio-group-error-color);
68
- } .radio-group__hint_1gwql {
68
+ } .radio-group__hint_11qfb {
69
69
  color: var(--radio-group-hint-color);
70
- } .radio-group__hiddenInput_1gwql {
70
+ } .radio-group__hiddenInput_11qfb {
71
71
  position: absolute;
72
72
  z-index: -1;
73
73
  top: 0;
74
74
  left: 0;
75
75
  opacity: 0
76
- } .radio-group__hiddenInput_1gwql:focus ~ button {
76
+ } .radio-group__hiddenInput_11qfb:focus ~ button {
77
77
  outline: 2px solid var(--focus-color);
78
78
  outline-offset: 2px;
79
- } .radio-group__tagLabel_1gwql {
79
+ } .radio-group__tagLabel_11qfb {
80
80
  position: relative;
81
81
  max-width: 100%;
82
82
  }
package/modern/desktop.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 12evq */
1
+ /* hash: ezy2i */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
21
21
  --radio-group-list-padding-left: 0;
22
22
 
23
23
  /* mobile */
24
- } .radio-group__radioList_j0spj {
24
+ } .radio-group__radioList_jar3i {
25
25
  padding-left: var(--radio-group-list-padding-left);
26
- } .radio-group__label_j0spj {
26
+ } .radio-group__label_jar3i {
27
27
  font-size: 16px;
28
28
  line-height: 24px;
29
29
  font-weight: 400;
30
30
  color: var(--radio-group-label-color);
31
31
  padding-left: var(--radio-group-sub-padding-left);
32
- } .radio-group__sub_j0spj {
32
+ } .radio-group__sub_jar3i {
33
33
  padding-left: var(--radio-group-sub-padding-left);
34
34
  }
package/modern/mobile.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1nxht */
1
+ /* hash: 8spym */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --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 @@
23
23
  --radio-group-mobile-sub-padding-left: var(--gap-2xs);
24
24
  --radio-group-mobile-list-padding-left: var(--gap-3xs);
25
25
  --radio-group-mobile-label-color: var(--color-light-text-secondary);
26
- } .radio-group__radioList_ree10 {
26
+ } .radio-group__radioList_4mstm {
27
27
  padding-left: var(--radio-group-mobile-list-padding-left);
28
- } .radio-group__label_ree10 {
28
+ } .radio-group__label_4mstm {
29
29
  font-size: 14px;
30
30
  line-height: 18px;
31
31
  font-weight: 400;
32
32
  color: var(--radio-group-mobile-label-color);
33
33
  padding-left: var(--radio-group-mobile-sub-padding-left);
34
- } .radio-group__sub_ree10 {
34
+ } .radio-group__sub_4mstm {
35
35
  padding-left: var(--radio-group-mobile-sub-padding-left);
36
36
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-radio-group",
3
- "version": "4.1.0",
3
+ "version": "4.1.1",
4
4
  "description": "Radio group",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/src/components/base-radio-group/Component.tsx CHANGED
@@ -154,7 +154,7 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
154
154
  ...child.props,
155
155
  checked: isChecked(childValue),
156
156
  name,
157
- className: cn(childClassName, commonStyles.radio),
157
+ className: cn(childClassName, commonStyles[`${direction}Radio`]),
158
158
  });
159
159
  };
160
160
 
@@ -171,7 +171,12 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
171
171
  });
172
172
 
173
173
  return (
174
- <label className={cn(commonStyles.radio, commonStyles.tagLabel)}>
174
+ <label
175
+ className={cn(
176
+ commonStyles[`${direction}Radio`],
177
+ commonStyles[`${direction}TagLabel`],
178
+ )}
179
+ >
175
180
  <input
176
181
  type='radio'
177
182
  autoComplete='off'
@@ -194,7 +199,6 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
194
199
  className={cn(
195
200
  commonStyles.component,
196
201
  commonStyles[type],
197
- commonStyles[direction],
198
202
  { [commonStyles.error]: error },
199
203
  className,
200
204
  )}
@@ -207,9 +211,12 @@ export const BaseRadioGroup = forwardRef<HTMLDivElement, BaseRadioGroupProps>(
207
211
 
208
212
  {children ? (
209
213
  <div
210
- className={cn(commonStyles.radioList, radioListClassName, {
211
- [styles.radioList]: type === 'radio',
212
- })}
214
+ className={cn(
215
+ commonStyles.radioList,
216
+ commonStyles[`${direction}RadioList`],
217
+ radioListClassName,
218
+ { [styles.radioList]: type === 'radio' },
219
+ )}
213
220
  onBlur={onBlur}
214
221
  onFocus={onFocus}
215
222
  >
package/src/components/base-radio-group/index.module.css CHANGED
@@ -18,12 +18,17 @@
18
18
  display: flex;
19
19
  }
20
20
 
21
- .vertical .radioList {
21
+ .verticalRadioList {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }
25
25
 
26
- .vertical .radio {
26
+ .horizontalRadioList {
27
+ flex-wrap: wrap;
28
+ margin-bottom: var(--gap-xs-neg);
29
+ }
30
+
31
+ .verticalRadio {
27
32
  margin-bottom: var(--gap-m);
28
33
 
29
34
  &:last-child {
@@ -31,22 +36,17 @@
31
36
  }
32
37
  }
33
38
 
34
- .horizontal .radioList {
35
- flex-wrap: wrap;
36
- margin-bottom: var(--gap-xs-neg);
37
- }
38
-
39
- .horizontal .radio {
39
+ .horizontalRadio {
40
40
  margin-right: var(--gap-xl);
41
41
  margin-bottom: var(--gap-xs);
42
42
  }
43
43
 
44
- .horizontal .tagLabel {
44
+ .horizontalTagLabel {
45
45
  margin-right: var(--gap-xs);
46
46
  }
47
47
 
48
- .horizontal .radio:last-child,
49
- .horizontal .tagLabel:last-child {
48
+ .horizontalRadio:last-child,
49
+ .horizontalTagLabel:last-child {
50
50
  margin-right: 0;
51
51
  }
52
52