@rescui/radio-button 0.8.5 → 0.8.7-RUI-226-Update-card-cn-6e43cc89.60

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 (12) hide show
  1. package/lib/_virtual/index.css.js +12 -7
  2. package/lib/_virtual/warning.js +90 -21
  3. package/lib/index.css +97 -86
  4. package/lib/parts/radio-button-control.js +36 -47
  5. package/lib/parts/radio-button-list.js +24 -38
  6. package/lib/parts/radio-button-manager.js +25 -34
  7. package/lib/parts/radio-button.p.module.css.js +19 -19
  8. package/lib/parts/radio-group-context.js +1 -1
  9. package/lib/public-api.p.css +32 -20
  10. package/lib/public-api.pcss +32 -20
  11. package/lib/radio-button.js +14 -26
  12. package/package.json +9 -9
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_1g6zqe1_4",
3
- "sizeXS": "_sizeXS_1g6zqe1_14",
4
- "sizeS": "_sizeS_1g6zqe1_18",
5
- "sizeM": "_sizeM_1g6zqe1_22",
6
- "sizeL": "_sizeL_1g6zqe1_26",
7
- "light": "_light_1g6zqe1_30",
8
- "dark": "_dark_1g6zqe1_34"
2
+ "icon": "_icon_15yklic_4",
3
+ "sizeXS": "_sizeXS_15yklic_14",
4
+ "sizeS": "_sizeS_15yklic_18",
5
+ "sizeM": "_sizeM_15yklic_22",
6
+ "sizeL": "_sizeL_15yklic_26",
7
+ "light": "_light_15yklic_30",
8
+ "dark": "_dark_15yklic_34",
9
+ "allVariants": "_allVariants_15yklic_48",
10
+ "variant16": "_variant16_15yklic_53",
11
+ "variant20": "_variant20_15yklic_54",
12
+ "variant24": "_variant24_15yklic_55",
13
+ "variant28": "_variant28_15yklic_58"
9
14
  };
10
15
  export { styles as default };
package/lib/_virtual/warning.js CHANGED
@@ -1,37 +1,106 @@
1
1
  import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
2
- import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
3
2
  import React from 'react';
4
3
  import PropTypes from 'prop-types';
5
4
  import cn from 'classnames';
6
5
  import styles from './index.css.js';
7
- var _excluded = ["theme", "size", "className"];
8
- var sizeStyles = {
6
+ const sizeStyles = {
9
7
  "xs": styles.sizeXS,
10
8
  "s": styles.sizeS,
11
9
  "m": styles.sizeM,
12
10
  "l": styles.sizeL
13
11
  };
14
- var WarningIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
15
- var theme = _ref.theme,
16
- size = _ref.size,
17
- className = _ref.className,
18
- props = _objectWithoutProperties(_ref, _excluded);
12
+ const Size = {
13
+ "xs": "xs",
14
+ "s": "s",
15
+ "m": "m",
16
+ "l": "l"
17
+ };
18
+ const WarningIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
19
+ viewBox: "0 0 16 16"
20
+ }, props, {
21
+ ref: ref
22
+ }), /*#__PURE__*/React.createElement("path", {
23
+ d: "m6.303 1.989-5.027 8.874C.483 12.263 1.494 14 3.103 14h9.793c1.609 0 2.62-1.736 1.827-3.137L9.696 1.99C8.949.67 7.05.67 6.303 1.989M8 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2m0-8a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4A.5.5 0 0 1 8 4"
24
+ })));
25
+ WarningIcon16.displayName = 'WarningIcon16';
26
+ const WarningIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
27
+ viewBox: "0 0 20 20"
28
+ }, props, {
29
+ ref: ref
30
+ }), /*#__PURE__*/React.createElement("path", {
31
+ d: "m8.042 3.141-5.8 10.24C1.327 14.997 2.494 17 4.35 17h11.3c1.856 0 3.023-2.003 2.108-3.62l-5.8-10.239c-.862-1.521-3.054-1.521-3.916 0M10 5.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75m0 9.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2"
32
+ })));
33
+ WarningIcon20.displayName = 'WarningIcon20';
34
+ const WarningIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
35
+ viewBox: "0 0 24 24"
36
+ }, props, {
37
+ ref: ref
38
+ }), /*#__PURE__*/React.createElement("path", {
39
+ d: "m9.52 3.446-7.346 12.97C1.014 18.463 2.492 21 4.844 21h14.312c2.352 0 3.83-2.537 2.67-4.584L14.48 3.446c-1.092-1.928-3.868-1.928-4.96 0M12 7a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1m0 11a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"
40
+ })));
41
+ WarningIcon24.displayName = 'WarningIcon24';
42
+ const WarningIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
43
+ viewBox: "0 0 28 28"
44
+ }, props, {
45
+ ref: ref
46
+ }), /*#__PURE__*/React.createElement("path", {
47
+ d: "M11.26 4.598 3.14 18.933C1.858 21.195 3.492 24 6.09 24h15.82c2.599 0 4.232-2.805 2.951-5.067l-8.12-14.335c-1.207-2.13-4.275-2.13-5.481 0M14 8a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1m0 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"
48
+ })));
49
+ WarningIcon28.displayName = 'WarningIcon28';
50
+ const WarningIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
51
+ let {
52
+ theme,
53
+ size: sizeFromProps = "m",
54
+ className,
55
+ style,
56
+ ['data-render-all-sizes']: renderAllSizes = false,
57
+ ...props
58
+ } = _ref;
59
+ const size = sizeFromProps in Size ? sizeFromProps : "m";
60
+ const mainProps = { ...props,
61
+ className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
62
+ style: renderAllSizes ? {
63
+ '--rs-icon-ar-width': 28,
64
+ '--rs-icon-ar-height': 28,
65
+ ...style
66
+ } : style,
67
+ ref
68
+ };
69
+
70
+ if (renderAllSizes) {
71
+ return /*#__PURE__*/React.createElement("svg", _extends({
72
+ viewBox: "0 0 28 28"
73
+ }, mainProps), /*#__PURE__*/React.createElement(WarningIcon16, {
74
+ className: styles.variant16
75
+ }), /*#__PURE__*/React.createElement(WarningIcon20, {
76
+ className: styles.variant20
77
+ }), /*#__PURE__*/React.createElement(WarningIcon24, {
78
+ className: styles.variant24
79
+ }), /*#__PURE__*/React.createElement(WarningIcon28, {
80
+ className: styles.variant28
81
+ }));
82
+ }
83
+
84
+ if (size === Size['xs']) {
85
+ return /*#__PURE__*/React.createElement(WarningIcon16, mainProps);
86
+ }
19
87
 
20
- return /*#__PURE__*/React.createElement("svg", _extends({
21
- viewBox: "0 0 24 24"
22
- }, props, {
23
- className: cn(styles.icon, styles[theme], sizeStyles[size], className),
24
- ref: ref
25
- }), /*#__PURE__*/React.createElement("path", {
26
- d: "M2.769 20h18.363a.615.615 0 00.546-.891L12.504 2.8a.566.566 0 00-.989-.002C9.8 5.891 4.026 16.101 2.322 19.112A.61.61 0 002.77 20zm8.229-12h2v6h-2V8zm0 8h2v2h-2v-2z"
27
- }));
88
+ if (size === Size['s']) {
89
+ return /*#__PURE__*/React.createElement(WarningIcon20, mainProps);
90
+ }
91
+
92
+ if (size === Size['m']) {
93
+ return /*#__PURE__*/React.createElement(WarningIcon24, mainProps);
94
+ }
95
+
96
+ return /*#__PURE__*/React.createElement(WarningIcon28, mainProps);
28
97
  });
98
+ WarningIcon.displayName = 'WarningIcon';
29
99
  WarningIcon.propTypes = {
30
100
  className: PropTypes.string,
31
101
  theme: PropTypes.oneOf(["light", "dark"]),
32
- size: PropTypes.oneOf(["xs", "s", "m", "l"])
33
- };
34
- WarningIcon.defaultProps = {
35
- size: "m"
102
+ size: PropTypes.oneOf(["xs", "s", "m", "l"]),
103
+ 'data-render-all-sizes': PropTypes.bool,
104
+ style: PropTypes.object
36
105
  };
37
- export { WarningIcon as default };
106
+ export { Size, WarningIcon as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_1g6zqe1_4{
1
+ ._icon_15yklic_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_1g6zqe1_4{
11
+ ._icon_15yklic_4{
12
12
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
13
13
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
14
14
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_1g6zqe1_4{
20
+ ._icon_15yklic_4{
21
21
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
22
22
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
23
23
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,60 +25,84 @@
25
25
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
26
26
  }
27
27
  }
28
- ._icon_1g6zqe1_4{
28
+ ._icon_15yklic_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:auto;
33
33
  height:var(--_rs-icons-height);
34
34
  }
35
- ._sizeXS_1g6zqe1_14{
35
+ ._sizeXS_15yklic_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_1g6zqe1_18{
38
+ ._sizeS_15yklic_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_1g6zqe1_22{
41
+ ._sizeM_15yklic_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_1g6zqe1_26{
44
+ ._sizeL_15yklic_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_1g6zqe1_30{
47
+ ._light_15yklic_30{
48
48
  --rs-theme-dark:0;
49
49
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
50
50
  }
51
- ._dark_1g6zqe1_34{
51
+ ._dark_15yklic_34{
52
52
  --rs-theme-dark:1;
53
53
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
54
54
  }
55
- @-webkit-keyframes rs-icon-rotate{
55
+ @keyframes rs-icon-rotate{
56
56
  from{
57
- -webkit-transform:rotate(0deg);
58
- transform:rotate(0deg);
57
+ transform:rotate(0deg);
59
58
  }
60
59
  to{
61
- -webkit-transform:rotate(360deg);
62
- transform:rotate(360deg);
60
+ transform:rotate(360deg);
63
61
  }
64
62
  }
65
- @keyframes rs-icon-rotate{
66
- from{
67
- -webkit-transform:rotate(0deg);
68
- transform:rotate(0deg);
63
+ ._allVariants_15yklic_48{
64
+ aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
+ container:rs-icon / size;
66
+ }
67
+ ._variant16_15yklic_53,
68
+ ._variant20_15yklic_54,
69
+ ._variant24_15yklic_55{
70
+ display:none;
71
+ }
72
+ ._variant28_15yklic_58{
73
+ display:block;
74
+ }
75
+ @container rs-icon (max-height: 24px){
76
+ ._variant24_15yklic_55{
77
+ display:block;
69
78
  }
70
- to{
71
- -webkit-transform:rotate(360deg);
72
- transform:rotate(360deg);
79
+ ._variant28_15yklic_58{
80
+ display:none;
73
81
  }
74
82
  }
75
- ._themeLight_e9v4g7_8{
83
+ @container rs-icon (max-height: 20px){
84
+ ._variant20_15yklic_54{
85
+ display:block;
86
+ }
87
+ ._variant24_15yklic_55{
88
+ display:none;
89
+ }
90
+ }
91
+ @container rs-icon (max-height: 16px){
92
+ ._variant16_15yklic_53{
93
+ display:block;
94
+ }
95
+ ._variant20_15yklic_54{
96
+ display:none;
97
+ }
98
+ }
99
+ ._themeLight_6p6zc3_8{
76
100
  --rs-theme-dark:0;
77
101
  }
78
- ._themeDark_e9v4g7_11{
102
+ ._themeDark_6p6zc3_11{
79
103
  --rs-theme-dark:1;
80
104
  }
81
- ._container_e9v4g7_15{
105
+ ._container_6p6zc3_15{
82
106
  --_rs-theme-dark:var(
83
107
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
84
108
  var(--rs-theme-dark, 0)
@@ -88,7 +112,7 @@
88
112
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
89
113
  }
90
114
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
91
- ._container_e9v4g7_15{
115
+ ._container_6p6zc3_15{
92
116
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
93
117
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
94
118
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -97,7 +121,7 @@
97
121
  }
98
122
  }
99
123
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
100
- ._container_e9v4g7_15{
124
+ ._container_6p6zc3_15{
101
125
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
102
126
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
103
127
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -105,8 +129,8 @@
105
129
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
106
130
  }
107
131
  }
108
- ._listSizeS_e9v4g7_20 [data-rs-internal='radio-button-list__error-message']{
109
- --_rs-typography-letter-spacing:normal;
132
+ ._listSizeS_6p6zc3_20 [data-rs-internal='radio-button-list__error-message']{
133
+ --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
110
134
  --_rs-typography-text-transform:initial;
111
135
  --_rs-typography-font-variant-numeric:initial;
112
136
  --_rs-typography-font-family:var(
@@ -136,11 +160,11 @@
136
160
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
137
161
  --_rs-typography-link-border-bottom-width-from-text:2px;
138
162
  }
139
- ._listSizeS_e9v4g7_20 [data-rs-internal='radio-button-list__error-icon']:not(html){
163
+ ._listSizeS_6p6zc3_20 [data-rs-internal='radio-button-list__error-icon']:not(html){
140
164
  --_rs-icons-height:20px;
141
165
  }
142
- ._listSizeM_e9v4g7_23 [data-rs-internal='radio-button-list__error-message']{
143
- --_rs-typography-letter-spacing:normal;
166
+ ._listSizeM_6p6zc3_23 [data-rs-internal='radio-button-list__error-message']{
167
+ --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
144
168
  --_rs-typography-text-transform:initial;
145
169
  --_rs-typography-font-variant-numeric:initial;
146
170
  --_rs-typography-font-family:var(
@@ -170,11 +194,11 @@
170
194
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
171
195
  --_rs-typography-link-border-bottom-width-from-text:2px;
172
196
  }
173
- ._listSizeM_e9v4g7_23 [data-rs-internal='radio-button-list__error-icon']:not(html){
197
+ ._listSizeM_6p6zc3_23 [data-rs-internal='radio-button-list__error-icon']:not(html){
174
198
  --_rs-icons-height:20px;
175
199
  }
176
- ._listSizeL_e9v4g7_26 [data-rs-internal='radio-button-list__error-message']{
177
- --_rs-typography-letter-spacing:normal;
200
+ ._listSizeL_6p6zc3_26 [data-rs-internal='radio-button-list__error-message']{
201
+ --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
178
202
  --_rs-typography-text-transform:initial;
179
203
  --_rs-typography-font-variant-numeric:initial;
180
204
  --_rs-typography-font-family:var(
@@ -204,35 +228,35 @@
204
228
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
205
229
  --_rs-typography-link-border-bottom-width-from-text:2px;
206
230
  }
207
- ._listSizeL_e9v4g7_26 [data-rs-internal='radio-button-list__error-icon']:not(html){
231
+ ._listSizeL_6p6zc3_26 [data-rs-internal='radio-button-list__error-icon']:not(html){
208
232
  --_rs-icons-height:24px;
209
233
  }
210
- ._sizeS_e9v4g7_30{
234
+ ._sizeS_6p6zc3_30{
211
235
  --_rs-radio-button-size:20px;
212
236
  --_rs-radio-button-box-shadow-size:3px;
213
237
  --_rs-radio-button-active-icon-border-width:5px;
214
238
  }
215
- ._sizeM_e9v4g7_33{
239
+ ._sizeM_6p6zc3_33{
216
240
  --_rs-radio-button-size:24px;
217
241
  --_rs-radio-button-box-shadow-size:3px;
218
242
  --_rs-radio-button-active-icon-border-width:6px;
219
243
  }
220
- ._sizeL_e9v4g7_36{
244
+ ._sizeL_6p6zc3_36{
221
245
  --_rs-radio-button-size:28px;
222
246
  --_rs-radio-button-box-shadow-size:4px;
223
247
  --_rs-radio-button-active-icon-border-width:6px;
224
248
  }
225
- ._classic_e9v4g7_40{
249
+ ._classic_6p6zc3_40{
226
250
  --_rs-radio-button-active-icon-border-color:var(--_rs-color-primary);
227
251
  --_rs-radio-button-active-icon-background-color:#FFFFFF;
228
252
  --_rs-radio-button-active-icon-hover-box-shadow-color:var(--_rs-color-primary-t-fog);
229
253
  }
230
- ._rock_e9v4g7_43{
254
+ ._rock_6p6zc3_43{
231
255
  --_rs-radio-button-active-icon-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
232
256
  --_rs-radio-button-active-icon-background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
233
257
  --_rs-radio-button-active-icon-hover-box-shadow-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
234
258
  }
235
- ._main_e9v4g7_47{
259
+ ._main_6p6zc3_47{
236
260
  --_rs-theme-dark:var(
237
261
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
238
262
  var(--rs-theme-dark, 0)
@@ -242,7 +266,7 @@
242
266
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
243
267
  }
244
268
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
245
- ._main_e9v4g7_47{
269
+ ._main_6p6zc3_47{
246
270
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
247
271
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
248
272
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -251,7 +275,7 @@
251
275
  }
252
276
  }
253
277
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
254
- ._main_e9v4g7_47{
278
+ ._main_6p6zc3_47{
255
279
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
256
280
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
257
281
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -259,7 +283,7 @@
259
283
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
260
284
  }
261
285
  }
262
- ._main_e9v4g7_47 {
286
+ ._main_6p6zc3_47 {
263
287
 
264
288
  display:inline-block;
265
289
 
@@ -268,7 +292,7 @@
268
292
 
269
293
  vertical-align:middle;
270
294
  }
271
- ._errorMessage_e9v4g7_59{
295
+ ._errorMessage_6p6zc3_59{
272
296
  letter-spacing:var(
273
297
  --rs-text-base-letter-spacing,
274
298
  var(--_rs-typography-letter-spacing)
@@ -279,32 +303,23 @@
279
303
  font-weight:var(--_rs-typography-font-weight);
280
304
  line-height:var(--_rs-typography-line-height);
281
305
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
282
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
283
306
  font-feature-settings:'kern', 'liga', 'calt';
284
307
 
285
- display:-webkit-box;
286
-
287
- display:-ms-flexbox;
288
-
289
308
  display:flex;
290
- -ms-flex-wrap:nowrap;
291
- flex-wrap:nowrap;
309
+ flex-wrap:nowrap;
292
310
 
293
311
  margin-bottom:8px;
294
312
 
295
313
  color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
296
- -webkit-column-gap:8px;
297
- -moz-column-gap:8px;
298
- column-gap:8px;
299
- }
300
- ._errorIcon_e9v4g7_71{
301
- -webkit-box-flex:0;
302
- -ms-flex:0 0 auto;
303
- flex:0 0 auto;
314
+ -moz-column-gap:8px;
315
+ column-gap:8px;
316
+ }
317
+ ._errorIcon_6p6zc3_71{
318
+ flex:0 0 auto;
304
319
 
305
320
  color:#F45C4A;
306
321
  }
307
- ._input_e9v4g7_77{
322
+ ._input_6p6zc3_77{
308
323
  position:absolute;
309
324
  -webkit-appearance:none;
310
325
  -moz-appearance:none;
@@ -318,14 +333,12 @@
318
333
 
319
334
  border:0;
320
335
  }
321
- ._icon_e9v4g7_90{
336
+ ._icon_6p6zc3_90{
322
337
  position:relative;
323
338
 
324
339
  display:inline-block;
325
340
 
326
- -webkit-box-sizing:border-box;
327
-
328
- box-sizing:border-box;
341
+ box-sizing:border-box;
329
342
  width:calc(var(--_rs-radio-button-size) - var(--_rs-radio-button-box-shadow-size)*2);
330
343
  height:calc(var(--_rs-radio-button-size) - var(--_rs-radio-button-box-shadow-size)*2);
331
344
  margin:var(--_rs-radio-button-box-shadow-size);
@@ -337,16 +350,16 @@
337
350
 
338
351
  background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
339
352
  }
340
- ._enabled_e9v4g7_111 ._icon_e9v4g7_90{
353
+ ._enabled_6p6zc3_111 ._icon_6p6zc3_90{
341
354
  cursor:pointer;
342
355
  }
343
- ._enabled_e9v4g7_111:hover > ._icon_e9v4g7_90,
344
- label:hover ._enabled_e9v4g7_111 > ._icon_e9v4g7_90{
356
+ ._enabled_6p6zc3_111:hover > ._icon_6p6zc3_90,
357
+ label:hover ._enabled_6p6zc3_111 > ._icon_6p6zc3_90{
345
358
  background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*184), calc(255 - var(--_rs-theme-dark-coefficient, 0)*184), calc(255 - var(--_rs-theme-dark-coefficient, 0)*182));
346
359
  }
347
- ._disabled_e9v4g7_120 ._icon_e9v4g7_90._icon_e9v4g7_90,
348
- ._input_e9v4g7_77:disabled + ._icon_e9v4g7_90._icon_e9v4g7_90,
349
- ._input_e9v4g7_77:checked:disabled + ._icon_e9v4g7_90{
360
+ ._disabled_6p6zc3_120 ._icon_6p6zc3_90._icon_6p6zc3_90,
361
+ ._input_6p6zc3_77:disabled + ._icon_6p6zc3_90._icon_6p6zc3_90,
362
+ ._input_6p6zc3_77:checked:disabled + ._icon_6p6zc3_90{
350
363
  border-color:rgb(calc(186 - var(--_rs-theme-dark-coefficient, 0)*92), calc(186 - var(--_rs-theme-dark-coefficient, 0)*92), calc(187 - var(--_rs-theme-dark-coefficient, 0)*91));
351
364
 
352
365
  cursor:not-allowed;
@@ -354,27 +367,25 @@
354
367
 
355
368
  background-color:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
356
369
  }
357
- ._enabled_e9v4g7_111 ._input_e9v4g7_77:active + ._icon_e9v4g7_90,
358
- ._enabled_e9v4g7_111 ._input_e9v4g7_77:checked + ._icon_e9v4g7_90{
370
+ ._enabled_6p6zc3_111 ._input_6p6zc3_77:active + ._icon_6p6zc3_90,
371
+ ._enabled_6p6zc3_111 ._input_6p6zc3_77:checked + ._icon_6p6zc3_90{
359
372
  border-color:var(--_rs-radio-button-active-icon-border-color);
360
373
 
361
374
  background-color:var(--_rs-radio-button-active-icon-background-color);
362
375
  }
363
- ._enabled_e9v4g7_111 ._input_e9v4g7_77:active + ._icon_e9v4g7_90,
364
- ._enabled_e9v4g7_111 ._input_e9v4g7_77:checked + ._icon_e9v4g7_90,
365
- ._main_e9v4g7_47 ._input_e9v4g7_77:checked:disabled + ._icon_e9v4g7_90{
376
+ ._enabled_6p6zc3_111 ._input_6p6zc3_77:active + ._icon_6p6zc3_90,
377
+ ._enabled_6p6zc3_111 ._input_6p6zc3_77:checked + ._icon_6p6zc3_90,
378
+ ._main_6p6zc3_47 ._input_6p6zc3_77:checked:disabled + ._icon_6p6zc3_90{
366
379
  border-width:var(--_rs-radio-button-active-icon-border-width);
367
380
  }
368
- ._error_e9v4g7_59 ._icon_e9v4g7_90._icon_e9v4g7_90._icon_e9v4g7_90{
381
+ ._error_6p6zc3_59 ._icon_6p6zc3_90._icon_6p6zc3_90._icon_6p6zc3_90{
369
382
  border-color:#F45C4A;
370
383
  }
371
- ._enabled_e9v4g7_111:hover > ._icon_e9v4g7_90._icon_e9v4g7_90,
372
- label:hover ._enabled_e9v4g7_111 > ._icon_e9v4g7_90._icon_e9v4g7_90,
373
- ._enabled_e9v4g7_111 ._input_e9v4g7_77:active:not(:checked) + ._icon_e9v4g7_90{
374
- -webkit-box-shadow:0 0 0 var(--_rs-radio-button-box-shadow-size) var(--_rs-radio-button-active-icon-hover-box-shadow-color);
375
- box-shadow:0 0 0 var(--_rs-radio-button-box-shadow-size) var(--_rs-radio-button-active-icon-hover-box-shadow-color);
384
+ ._enabled_6p6zc3_111:hover > ._icon_6p6zc3_90._icon_6p6zc3_90,
385
+ label:hover ._enabled_6p6zc3_111 > ._icon_6p6zc3_90._icon_6p6zc3_90,
386
+ ._enabled_6p6zc3_111 ._input_6p6zc3_77:active:not(:checked) + ._icon_6p6zc3_90{
387
+ box-shadow:0 0 0 var(--_rs-radio-button-box-shadow-size) var(--_rs-radio-button-active-icon-hover-box-shadow-color);
376
388
  }
377
- ._enabled_e9v4g7_111 ._input_e9v4g7_77:focus[data-focus-method='key'] + ._icon_e9v4g7_90{
378
- -webkit-box-shadow:0 0 0 1px rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)), 0 0 0 var(--_rs-radio-button-box-shadow-size) var(--_rs-color-primary-t-dim);
379
- box-shadow:0 0 0 1px rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)), 0 0 0 var(--_rs-radio-button-box-shadow-size) var(--_rs-color-primary-t-dim);
389
+ ._enabled_6p6zc3_111 ._input_6p6zc3_77:focus[data-focus-method='key'] + ._icon_6p6zc3_90{
390
+ box-shadow:0 0 0 1px rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)), 0 0 0 var(--_rs-radio-button-box-shadow-size) var(--_rs-color-primary-t-dim);
380
391
  }
package/lib/parts/radio-button-control.js CHANGED
@@ -1,76 +1,65 @@
1
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
2
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
3
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
4
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
5
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
6
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
7
- import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
8
- var _excluded = ["children", "disabled", "onChange", "checked", "value", "className", "error", "notUseLabelTag"];
9
-
10
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
11
-
12
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
13
-
14
- import "core-js/modules/es.function.name.js";
15
- import "core-js/modules/es.object.to-string.js";
16
- import "core-js/modules/web.dom-collections.for-each.js";
17
1
  import React from 'react';
18
2
  import PropTypes from 'prop-types';
19
3
  import cn from 'classnames';
20
4
  import RadioContext from './radio-group-context.js';
21
5
  import styles from './radio-button.p.module.css.js';
22
- var THEME_STYLES = {
6
+ const THEME_STYLES = {
23
7
  light: styles.themeLight,
24
8
  dark: styles.themeDark
25
9
  };
26
- var SIZE_STYLES = {
10
+ const SIZE_STYLES = {
27
11
  s: styles.sizeS,
28
12
  m: styles.sizeM,
29
13
  l: styles.sizeL
30
14
  };
31
- var MODE_STYLES = {
15
+ const MODE_STYLES = {
32
16
  classic: styles.classic,
33
17
  rock: styles.rock
34
18
  };
35
- var RadioButtonControl = /*#__PURE__*/React.forwardRef(function RadioButtonControl(props, ref) {
36
- var children = props.children,
37
- disabledFromProps = props.disabled,
38
- onChange = props.onChange,
39
- checked = props.checked,
40
- ownValue = props.value,
41
- className = props.className,
42
- error = props.error,
43
- _props$notUseLabelTag = props.notUseLabelTag,
44
- notUseLabelTag = _props$notUseLabelTag === void 0 ? false : _props$notUseLabelTag,
45
- restProps = _objectWithoutProperties(props, _excluded);
46
-
47
- var RootTag = notUseLabelTag ? 'span' : 'label';
48
- return /*#__PURE__*/React.createElement(RadioContext.Consumer, null, function (_ref) {
49
- var groupValue = _ref.value,
50
- theme = _ref.theme,
51
- setValue = _ref.setValue,
52
- name = _ref.name,
53
- errorFromContext = _ref.error,
54
- size = _ref.size,
55
- mode = _ref.mode,
56
- disabled = _ref.disabled;
19
+ const RadioButtonControl = /*#__PURE__*/React.forwardRef(function RadioButtonControl(props, ref) {
20
+ const {
21
+ children,
22
+ disabled: disabledFromProps,
23
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore, react/prop-types
24
+ // @ts-ignore
25
+ onChange,
26
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore, react/prop-types
27
+ // @ts-ignore
28
+ checked,
29
+ value: ownValue,
30
+ className,
31
+ error,
32
+ notUseLabelTag = false,
33
+ ...restProps
34
+ } = props;
35
+ const RootTag = notUseLabelTag ? 'span' : 'label';
36
+ return /*#__PURE__*/React.createElement(RadioContext.Consumer, null, _ref => {
37
+ let {
38
+ value: groupValue,
39
+ theme,
40
+ setValue,
41
+ name,
42
+ error: errorFromContext,
43
+ size,
44
+ mode,
45
+ disabled
46
+ } = _ref;
57
47
  return /*#__PURE__*/React.createElement(RootTag, {
58
48
  className: cn(styles.main, THEME_STYLES[theme], SIZE_STYLES[size], MODE_STYLES[mode], (error || errorFromContext) && styles.error, disabled || disabledFromProps ? styles.disabled : styles.enabled, className),
59
49
  "data-test": 'radio-button-control-root',
60
50
  "data-rs-internal": "radio-button__control"
61
- }, /*#__PURE__*/React.createElement("input", _objectSpread({
51
+ }, /*#__PURE__*/React.createElement("input", {
62
52
  className: styles.input,
63
53
  type: "radio",
64
- onChange: function onChange() {
65
- return setValue(ownValue);
66
- },
54
+ onChange: () => setValue(ownValue),
67
55
  disabled: disabled || disabledFromProps,
68
56
  value: ownValue,
69
57
  name: name,
70
58
  checked: groupValue === ownValue,
71
59
  ref: ref,
72
- "data-test": 'radio-button-control'
73
- }, restProps)), /*#__PURE__*/React.createElement("span", {
60
+ "data-test": 'radio-button-control',
61
+ ...restProps
62
+ }), /*#__PURE__*/React.createElement("span", {
74
63
  className: cn(styles.icon, (error || errorFromContext) && styles.iconError)
75
64
  }));
76
65
  });