@rescui/menu 0.13.6-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19 → 0.13.6-RUI-293-Update-menu-component-7a032357e.20

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.
@@ -0,0 +1,106 @@
1
+ import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
2
+ import React from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import cn from 'classnames';
5
+ import styles from './index.css.js';
6
+ const sizeStyles = {
7
+ "xs": styles.sizeXS,
8
+ "s": styles.sizeS,
9
+ "m": styles.sizeM,
10
+ "l": styles.sizeL
11
+ };
12
+ const Size = {
13
+ "xs": "xs",
14
+ "s": "s",
15
+ "m": "m",
16
+ "l": "l"
17
+ };
18
+ const CheckOutlineIcon16 = /*#__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: "M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0"
24
+ })));
25
+ CheckOutlineIcon16.displayName = 'CheckOutlineIcon16';
26
+ const CheckOutlineIcon20 = /*#__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: "M16.53 5.47a.75.75 0 0 1 0 1.06l-8 8a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 1 1 1.06-1.06L8 12.94l7.47-7.47a.75.75 0 0 1 1.06 0"
32
+ })));
33
+ CheckOutlineIcon20.displayName = 'CheckOutlineIcon20';
34
+ const CheckOutlineIcon24 = /*#__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: "M19.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586l9.293-9.293a1 1 0 0 1 1.414 0"
40
+ })));
41
+ CheckOutlineIcon24.displayName = 'CheckOutlineIcon24';
42
+ const CheckOutlineIcon28 = /*#__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: "M22.676 7.263a1 1 0 0 1 .061 1.413l-11 12a1 1 0 0 1-1.444.031l-6-6a1 1 0 1 1 1.414-1.414l5.262 5.261 10.294-11.23a1 1 0 0 1 1.413-.061"
48
+ })));
49
+ CheckOutlineIcon28.displayName = 'CheckOutlineIcon28';
50
+ const CheckOutlineIcon = /*#__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(CheckOutlineIcon16, {
74
+ className: styles.variant16
75
+ }), /*#__PURE__*/React.createElement(CheckOutlineIcon20, {
76
+ className: styles.variant20
77
+ }), /*#__PURE__*/React.createElement(CheckOutlineIcon24, {
78
+ className: styles.variant24
79
+ }), /*#__PURE__*/React.createElement(CheckOutlineIcon28, {
80
+ className: styles.variant28
81
+ }));
82
+ }
83
+
84
+ if (size === Size['xs']) {
85
+ return /*#__PURE__*/React.createElement(CheckOutlineIcon16, mainProps);
86
+ }
87
+
88
+ if (size === Size['s']) {
89
+ return /*#__PURE__*/React.createElement(CheckOutlineIcon20, mainProps);
90
+ }
91
+
92
+ if (size === Size['m']) {
93
+ return /*#__PURE__*/React.createElement(CheckOutlineIcon24, mainProps);
94
+ }
95
+
96
+ return /*#__PURE__*/React.createElement(CheckOutlineIcon28, mainProps);
97
+ });
98
+ CheckOutlineIcon.displayName = 'CheckOutlineIcon';
99
+ CheckOutlineIcon.propTypes = {
100
+ className: PropTypes.string,
101
+ theme: PropTypes.oneOf(["light", "dark"]),
102
+ size: PropTypes.oneOf(["xs", "s", "m", "l"]),
103
+ 'data-render-all-sizes': PropTypes.bool,
104
+ style: PropTypes.object
105
+ };
106
+ export { Size, CheckOutlineIcon as default };
@@ -0,0 +1,15 @@
1
+ var styles = {
2
+ "icon": "_icon_11g9wvk_4",
3
+ "sizeXS": "_sizeXS_11g9wvk_14",
4
+ "sizeS": "_sizeS_11g9wvk_18",
5
+ "sizeM": "_sizeM_11g9wvk_22",
6
+ "sizeL": "_sizeL_11g9wvk_26",
7
+ "light": "_light_11g9wvk_30",
8
+ "dark": "_dark_11g9wvk_34",
9
+ "allVariants": "_allVariants_11g9wvk_48",
10
+ "variant16": "_variant16_11g9wvk_53",
11
+ "variant20": "_variant20_11g9wvk_54",
12
+ "variant24": "_variant24_11g9wvk_55",
13
+ "variant28": "_variant28_11g9wvk_58"
14
+ };
15
+ export { styles as default };
package/lib/index.css CHANGED
@@ -1,10 +1,111 @@
1
- ._themeLight_1fpuqka_8{
1
+ ._icon_11g9wvk_4{
2
+ --_rs-theme-dark:var(
3
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
+ var(--rs-theme-dark, 0)
5
+ );
6
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
7
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
8
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
+ }
10
+ @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
+ ._icon_11g9wvk_4{
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
+ --_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
+ --_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)));
15
+ --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
16
+ --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
17
+ }
18
+ }
19
+ @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
+ ._icon_11g9wvk_4{
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
+ --_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
+ --_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));
24
+ --_rs-color-primary-t-dim: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, 0.8);
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
+ }
27
+ }
28
+ ._icon_11g9wvk_4{
29
+
30
+ fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
+
32
+ width:var(--rs-icons-width, auto);
33
+ height:var(--rs-icons-height, var(--_rs-icons-height));
34
+ }
35
+ ._sizeXS_11g9wvk_14{
36
+ --_rs-icons-height:16px;
37
+ }
38
+ ._sizeS_11g9wvk_18{
39
+ --_rs-icons-height:20px;
40
+ }
41
+ ._sizeM_11g9wvk_22{
42
+ --_rs-icons-height:24px;
43
+ }
44
+ ._sizeL_11g9wvk_26{
45
+ --_rs-icons-height:28px;
46
+ }
47
+ ._light_11g9wvk_30{
2
48
  --rs-theme-dark:0;
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));
3
50
  }
4
- ._themeDark_1fpuqka_11{
51
+ ._dark_11g9wvk_34{
5
52
  --rs-theme-dark:1;
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
+ }
55
+ @keyframes rs-icon-rotate{
56
+ from{
57
+ transform:rotate(0deg);
58
+ }
59
+ to{
60
+ transform:rotate(360deg);
61
+ }
62
+ }
63
+ ._allVariants_11g9wvk_48{
64
+ aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
+ container:rs-icon / size;
6
66
  }
7
- ._sizeS_1fpuqka_15{
67
+ ._variant16_11g9wvk_53,
68
+ ._variant20_11g9wvk_54,
69
+ ._variant24_11g9wvk_55{
70
+ display:none;
71
+ }
72
+ ._variant28_11g9wvk_58{
73
+ display:block;
74
+ }
75
+ @container rs-icon (max-height: 24px){
76
+ ._variant24_11g9wvk_55{
77
+ display:block;
78
+ }
79
+ ._variant28_11g9wvk_58{
80
+ display:none;
81
+ }
82
+ }
83
+ @container rs-icon (max-height: 20px){
84
+ ._variant20_11g9wvk_54{
85
+ display:block;
86
+ }
87
+ ._variant24_11g9wvk_55{
88
+ display:none;
89
+ }
90
+ }
91
+ @container rs-icon (max-height: 16px){
92
+ ._variant16_11g9wvk_53{
93
+ display:block;
94
+ }
95
+ ._variant20_11g9wvk_54{
96
+ display:none;
97
+ }
98
+ }
99
+ ._themeLight_1bzmk9l_8{
100
+ --rs-theme-dark:0;
101
+ }
102
+ ._themeDark_1bzmk9l_11{
103
+ --rs-theme-dark:1;
104
+ }
105
+ ._menu_1bzmk9l_15:focus{
106
+ outline:none;
107
+ }
108
+ ._sizeS_1bzmk9l_21{
8
109
  --_rs-menu-mi-icon-offset:8px;
9
110
  --_rs-menu-mi-icon-size:20px;
10
111
  --_rs-menu-mi-vertical-padding:6px;
@@ -43,7 +144,7 @@
43
144
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
44
145
  --_rs-typography-link-border-bottom-width-from-text:1px;
45
146
  }
46
- ._sizeM_1fpuqka_18{
147
+ ._sizeM_1bzmk9l_24{
47
148
  --_rs-menu-mi-icon-offset:8px;
48
149
  --_rs-menu-mi-icon-size:24px;
49
150
  --_rs-menu-mi-vertical-padding:8px;
@@ -86,11 +187,11 @@
86
187
  --_rs-typography-link-border-bottom-width-from-text:1px;
87
188
  }
88
189
  @media screen and (max-width: 640px){
89
- ._sizeM_1fpuqka_18{
190
+ ._sizeM_1bzmk9l_24{
90
191
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
91
192
  }
92
193
  }
93
- ._sizeL_1fpuqka_21{
194
+ ._sizeL_1bzmk9l_27{
94
195
  --_rs-menu-mi-icon-offset:16px;
95
196
  --_rs-menu-mi-icon-size:28px;
96
197
  --_rs-menu-mi-vertical-padding:12px;
@@ -133,60 +234,63 @@
133
234
  --_rs-typography-link-border-bottom-width-from-text:1px;
134
235
  }
135
236
  @media screen and (max-width: 640px){
136
- ._sizeL_1fpuqka_21{
237
+ ._sizeL_1bzmk9l_27{
137
238
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
138
239
  }
139
240
  }
140
- ._modeClassic_1fpuqka_25{
241
+ ._modeClassic_1bzmk9l_31{
141
242
  --_rs-menu-mi-horizontal-padding-with-mode:var(
142
243
  --_rs-menu-mi-horizontal-padding
143
244
  );
144
- --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
145
- --_rs-menu-mi-selected-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));
146
- --_rs-menu-mi-selected-background: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));
147
- --_rs-menu-mi-hover-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));
148
- --_rs-menu-mi-hover-background: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);
149
- --_rs-menu-mi-selected-hover-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));
150
- --_rs-menu-mi-selected-hover-background:rgb(
151
- calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
152
- );
153
245
  }
154
- ._modeRock_1fpuqka_28{
246
+ ._modeClassic_1bzmk9l_31 [data-rs-internal="menu__menu-item__inner"]{
247
+ --_rs-menu-mi-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.7);
248
+ --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
249
+ --_rs-menu-mi-selected-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));
250
+ --_rs-menu-mi-selected-background: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);
251
+ --_rs-menu-mi-hover-color:rgb(
252
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
253
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
254
+ calc(255 - var(--rs-menu-contrast-primary, 0)*227)
255
+ );
256
+ --_rs-menu-mi-hover-background:var(--_rs-color-primary);
257
+ }
258
+ ._modeRock_1bzmk9l_34{
155
259
  --_rs-menu-mi-horizontal-padding-with-mode:var(
156
260
  --_rs-menu-mi-horizontal-padding
157
261
  );
158
- --_rs-menu-mi-active-background:none;
159
- --_rs-menu-mi-selected-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));
160
- --_rs-menu-mi-selected-background: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));
161
- --_rs-menu-mi-hover-color:#FFFFFF;
162
- --_rs-menu-mi-hover-background:var(--_rs-color-primary);
163
- --_rs-menu-mi-selected-hover-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));
164
- --_rs-menu-mi-selected-hover-background:rgb(
165
- calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
166
- );
167
262
  }
168
- ._modeClear_1fpuqka_31{
263
+ ._modeRock_1bzmk9l_34 [data-rs-internal="menu__menu-item__inner"]{
264
+ --_rs-menu-mi-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.7);
265
+ --_rs-menu-mi-active-background:transparent;
266
+ --_rs-menu-mi-selected-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));
267
+ --_rs-menu-mi-selected-background: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));
268
+ --_rs-menu-mi-hover-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));
269
+ --_rs-menu-mi-hover-background: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));
270
+ }
271
+ ._modeClear_1bzmk9l_37{
169
272
  --_rs-menu-mi-horizontal-padding-with-mode:0;
170
- --_rs-menu-mi-active-background:none;
171
- --_rs-menu-mi-selected-color:var(--_rs-color-primary);
172
- --_rs-menu-mi-selected-background:none;
173
- --_rs-menu-mi-hover-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));
174
- --_rs-menu-mi-hover-background:none;
175
- --_rs-menu-mi-selected-hover-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));
176
- --_rs-menu-mi-selected-hover-background:rgba(
177
- 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),
178
- 0.1
179
- );
180
273
  }
181
- ._iconPlacementLeft_1fpuqka_35{
274
+ ._modeClear_1bzmk9l_37 [data-rs-internal="menu__menu-item__inner"]{
275
+ --_rs-menu-mi-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));
276
+ --_rs-menu-mi-active-background:transparent;
277
+ --_rs-menu-mi-selected-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));
278
+ --_rs-menu-mi-selected-background: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);
279
+ --_rs-menu-mi-hover-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));
280
+ --_rs-menu-mi-hover-background:transparent;
281
+ }
282
+ ._iconPlacementLeft_1bzmk9l_41{
182
283
  --_rs-menu-mi-flex-direction:row;
183
284
  --_rs-menu-mi-justify-content:initial;
184
285
  }
185
- ._iconPlacementRight_1fpuqka_39{
286
+ ._iconPlacementRight_1bzmk9l_45{
186
287
  --_rs-menu-mi-flex-direction:row-reverse;
187
288
  --_rs-menu-mi-justify-content:space-between;
188
289
  }
189
- ._wrapper_1fpuqka_43{
290
+ ._wrapper_1bzmk9l_49{
291
+ display:flex;
292
+ }
293
+ ._menuItem_1bzmk9l_53{
190
294
  --_rs-theme-dark:var(
191
295
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
192
296
  var(--rs-theme-dark, 0)
@@ -196,7 +300,7 @@
196
300
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
197
301
  }
198
302
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
199
- ._wrapper_1fpuqka_43{
303
+ ._menuItem_1bzmk9l_53{
200
304
  --_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)));
201
305
  --_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)));
202
306
  --_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)));
@@ -205,7 +309,7 @@
205
309
  }
206
310
  }
207
311
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
208
- ._wrapper_1fpuqka_43{
312
+ ._menuItem_1bzmk9l_53{
209
313
  --_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);
210
314
  --_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));
211
315
  --_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));
@@ -213,11 +317,7 @@
213
317
  --_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));
214
318
  }
215
319
  }
216
- ._wrapper_1fpuqka_43 {
217
-
218
- display:flex;
219
- }
220
- ._menuItem_1fpuqka_50{
320
+ ._menuItem_1bzmk9l_53 {
221
321
  letter-spacing:var(
222
322
  --rs-text-base-letter-spacing,
223
323
  var(--_rs-typography-letter-spacing)
@@ -250,7 +350,7 @@
250
350
  text-align:start;
251
351
  text-decoration:none;
252
352
 
253
- 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));
353
+ color:var(--_rs-menu-mi-color);
254
354
  background:none;
255
355
  -webkit-appearance:none;
256
356
  -moz-appearance:none;
@@ -258,52 +358,51 @@
258
358
  -webkit-font-smoothing:inherit;
259
359
  -moz-osx-font-smoothing:inherit;
260
360
  }
261
- ._menuItem_1fpuqka_50:focus{
361
+ ._menuItem_1bzmk9l_53:focus{
262
362
  outline:none;
263
363
  }
264
- ._keyboardNavigationDisabled_1fpuqka_85 ._menuItem_1fpuqka_50:focus[data-focus-method='key']{
364
+ ._keyboardNavigationDisabled_1bzmk9l_90 ._menuItem_1bzmk9l_53:focus[data-focus-method='key']{
265
365
  box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
266
366
  }
267
- ._menuItem_1fpuqka_50:active{
367
+ ._menuItem_1bzmk9l_53:active{
268
368
  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));
269
369
  background:var(--_rs-menu-mi-active-background);
270
370
  }
271
- ._menuItem_1fpuqka_50._selected_1fpuqka_99{
371
+ ._menuItem_1bzmk9l_53._selected_1bzmk9l_104{
272
372
  color:var(--_rs-menu-mi-selected-color);
273
373
  background:var(--_rs-menu-mi-selected-background);
274
374
  }
275
- ._menuItem_1fpuqka_50._highlighted_1fpuqka_106,
276
- ._menuItem_1fpuqka_50:not(._disableCursor_1fpuqka_107):hover{
375
+ ._keyboardNavigationEnabled_1bzmk9l_111 ._menuItem_1bzmk9l_53:focus,
376
+ ._keyboardNavigationDisabled_1bzmk9l_90 ._menuItem_1bzmk9l_53:hover{
277
377
  color:var(--_rs-menu-mi-hover-color);
278
378
  background:var(--_rs-menu-mi-hover-background);
279
379
  }
280
- ._menuItem_1fpuqka_50._highlighted_1fpuqka_106._selected_1fpuqka_99,
281
- ._menuItem_1fpuqka_50._selected_1fpuqka_99:not(._disableCursor_1fpuqka_107):hover{
282
- color:var(--_rs-menu-mi-selected-hover-color);
283
- background-color:var(--_rs-menu-mi-selected-hover-background);
284
- }
285
- ._menuItem_1fpuqka_50._disabled_1fpuqka_120{
380
+ ._menuItem_1bzmk9l_53._disabled_1bzmk9l_117{
286
381
  pointer-events:none;
287
382
 
288
383
  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.5);
289
384
  }
290
- ._disableCursor_1fpuqka_107{
291
- pointer-events:none;
385
+ ._contentWrapper_1bzmk9l_124{
386
+ display:flex;
387
+ flex-grow:1;
388
+
389
+ justify-content:space-between;
390
+ gap:var(--_rs-menu-mi-icon-offset);
292
391
  }
293
- ._content_1fpuqka_131{
392
+ ._content_1bzmk9l_124{
294
393
  flex-grow:1;
295
394
 
296
395
  font-size:inherit;
297
396
  }
298
- ._icon_1fpuqka_35{
397
+ ._icon_1bzmk9l_41{
299
398
  flex:0 0;
300
399
  flex-basis:auto;
301
400
  }
302
- ._icon_1fpuqka_35._resizedIcon_1fpuqka_141{
401
+ ._icon_1bzmk9l_41._resizedIcon_1bzmk9l_142{
303
402
  width:auto;
304
403
  height:var(--_rs-menu-mi-icon-size);
305
404
  }
306
- ._divider_1fpuqka_149{
405
+ ._divider_1bzmk9l_150{
307
406
  flex-shrink:0;
308
407
 
309
408
  width:100%;
@@ -314,13 +413,13 @@
314
413
 
315
414
  background-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), 0.2);
316
415
  }
317
- ._groupHeaderThemeLight_1fpuqka_163{
416
+ ._groupHeaderThemeLight_1bzmk9l_164{
318
417
  --rs-theme-dark:0;
319
418
  }
320
- ._groupHeaderThemeDark_1fpuqka_166{
419
+ ._groupHeaderThemeDark_1bzmk9l_167{
321
420
  --rs-theme-dark:1;
322
421
  }
323
- ._groupHeaderSizeL_1fpuqka_170{
422
+ ._groupHeaderSizeL_1bzmk9l_171{
324
423
  --_rs-menu-gh-vertical-padding:12px;
325
424
  --_rs-menu-gh-horizontal-padding:16px;
326
425
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
@@ -354,7 +453,7 @@
354
453
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
355
454
  --_rs-typography-link-border-bottom-width-from-text:2px;
356
455
  }
357
- ._groupHeaderSizeM_1fpuqka_173{
456
+ ._groupHeaderSizeM_1bzmk9l_174{
358
457
  --_rs-menu-gh-vertical-padding:8px;
359
458
  --_rs-menu-gh-horizontal-padding:16px;
360
459
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
@@ -388,7 +487,7 @@
388
487
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
389
488
  --_rs-typography-link-border-bottom-width-from-text:2px;
390
489
  }
391
- ._groupHeaderSizeS_1fpuqka_176{
490
+ ._groupHeaderSizeS_1bzmk9l_177{
392
491
  --_rs-menu-gh-vertical-padding:6px;
393
492
  --_rs-menu-gh-horizontal-padding:8px;
394
493
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
@@ -422,7 +521,7 @@
422
521
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
423
522
  --_rs-typography-link-border-bottom-width-from-text:2px;
424
523
  }
425
- ._groupHeader_1fpuqka_163{
524
+ ._groupHeader_1bzmk9l_164{
426
525
  --_rs-theme-dark:var(
427
526
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
428
527
  var(--rs-theme-dark, 0)
@@ -432,7 +531,7 @@
432
531
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
433
532
  }
434
533
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
435
- ._groupHeader_1fpuqka_163{
534
+ ._groupHeader_1bzmk9l_164{
436
535
  --_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)));
437
536
  --_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)));
438
537
  --_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)));
@@ -441,7 +540,7 @@
441
540
  }
442
541
  }
443
542
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
444
- ._groupHeader_1fpuqka_163{
543
+ ._groupHeader_1bzmk9l_164{
445
544
  --_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);
446
545
  --_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));
447
546
  --_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));
@@ -449,7 +548,7 @@
449
548
  --_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));
450
549
  }
451
550
  }
452
- ._groupHeader_1fpuqka_163 {
551
+ ._groupHeader_1bzmk9l_164 {
453
552
  letter-spacing:var(
454
553
  --rs-text-base-letter-spacing,
455
554
  var(--_rs-typography-letter-spacing)
package/lib/index.d.ts CHANGED
@@ -1,10 +1,6 @@
1
1
  export { default as Menu } from './menu';
2
- export type { MenuProps } from './menu';
3
2
  export { MenuContext } from './parts/menu-context';
4
- export type { MenuContextValue, MenuItemIconPlacement } from './parts/menu-context';
5
3
  export { default as MenuItem } from './parts/menu-item';
6
- export type { MenuItemProps } from './parts/menu-item';
7
4
  export { default as Divider } from './parts/divider';
8
- export type { DividerProps } from './parts/divider';
9
5
  export { default as GroupHeader } from './parts/group-header';
10
- export type { GroupHeaderProps } from './parts/group-header';
6
+ export type { GroupHeaderProps, DividerProps, MenuItemProps, MenuProps, MenuContextValue, MenuItemIconPlacement } from './types';
package/lib/menu.d.ts CHANGED
@@ -1,12 +1,18 @@
1
- import React, { HTMLAttributes, ReactNode } from 'react';
2
- import { MenuContextValue } from './parts/menu-context';
3
- export interface MenuProps extends HTMLAttributes<HTMLElement>, Omit<MenuContextValue, 'isKeyboardNavigating' | 'activeItemRef' | 'wrapWithLi'> {
4
- children?: ReactNode;
5
- tag?: React.ElementType;
6
- enableKeyboardNavigation?: boolean;
7
- activateFirstItem?: boolean;
8
- returnFocusOnUnmount?: boolean;
9
- wrapItemsWithLi?: boolean;
10
- }
11
- export declare const Menu: React.FC<MenuProps>;
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import type { MenuProps } from './types';
4
+ export type { MenuProps } from './types';
5
+ export declare const Menu: {
6
+ ({ enableKeyboardNavigation, activateFirstItem, tag, disabled, size, mode, iconPlacement, resizeIcons, ...props }: MenuProps): React.JSX.Element;
7
+ propTypes: {
8
+ size: PropTypes.Requireable<string>;
9
+ mode: PropTypes.Requireable<string>;
10
+ theme: PropTypes.Requireable<string>;
11
+ disabled: PropTypes.Requireable<boolean>;
12
+ resizeIcons: PropTypes.Requireable<boolean>;
13
+ iconPlacement: PropTypes.Requireable<string>;
14
+ itemTag: PropTypes.Validator<React.ElementType>;
15
+ tag: PropTypes.Validator<React.ElementType>;
16
+ };
17
+ };
12
18
  export default Menu;