@rescui/button 0.16.0 → 0.16.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 (6) hide show
  1. package/lib/_virtual/index.css.js +10 -0
  2. package/lib/_virtual/loading.js +45 -0
  3. package/lib/button.js +1 -1
  4. package/lib/button.p.module.css.js +29 -29
  5. package/lib/index.css +131 -57
  6. package/package.json +7 -7
package/lib/_virtual/index.css.js ADDED
@@ -0,0 +1,10 @@
1
+ var styles = {
2
+ "icon": "_icon_1jmu341_4",
3
+ "sizeXS": "_sizeXS_1jmu341_14",
4
+ "sizeS": "_sizeS_1jmu341_18",
5
+ "sizeM": "_sizeM_1jmu341_22",
6
+ "sizeL": "_sizeL_1jmu341_26",
7
+ "light": "_light_1jmu341_30",
8
+ "dark": "_dark_1jmu341_34"
9
+ };
10
+ export { styles as default };
package/lib/_virtual/loading.js ADDED
@@ -0,0 +1,45 @@
1
+ import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
2
+ import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import cn from 'classnames';
6
+ import styles from './index.css.js';
7
+ var _excluded = ["theme", "size", "className"];
8
+ var sizeStyles = {
9
+ "xs": styles.sizeXS,
10
+ "s": styles.sizeS,
11
+ "m": styles.sizeM,
12
+ "l": styles.sizeL
13
+ };
14
+ var LoadingIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
15
+ var theme = _ref.theme,
16
+ size = _ref.size,
17
+ className = _ref.className,
18
+ props = _objectWithoutProperties(_ref, _excluded);
19
+
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("g", {
26
+ style: {
27
+ animation: "rs-icon-rotate 1s linear infinite",
28
+ transformOrigin: "center center"
29
+ }
30
+ }, /*#__PURE__*/React.createElement("path", {
31
+ opacity: 0.2,
32
+ d: "M12 2c5.523 0 10 4.477 10 10h-2a8 8 0 00-8-8V2z"
33
+ }), /*#__PURE__*/React.createElement("path", {
34
+ d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10h-2a8 8 0 11-8-8V2z"
35
+ })));
36
+ });
37
+ LoadingIcon.propTypes = {
38
+ className: PropTypes.string,
39
+ theme: PropTypes.oneOf(["light", "dark"]),
40
+ size: PropTypes.oneOf(["xs", "s", "m", "l"])
41
+ };
42
+ LoadingIcon.defaultProps = {
43
+ size: "m"
44
+ };
45
+ export { LoadingIcon as default };
package/lib/button.js CHANGED
@@ -20,8 +20,8 @@ import React, { useState, cloneElement, useRef, useEffect } from 'react';
20
20
  import cn from 'classnames';
21
21
  import PropTypes from 'prop-types';
22
22
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
23
- import { LoadingIcon } from '@rescui/icons';
24
23
  import { useResizeObserver } from '@rescui/use-resize-observer';
24
+ import LoadingIcon from './_virtual/loading.js';
25
25
  import styles from './button.p.module.css.js';
26
26
 
27
27
  var calculateShifted = function calculateShifted(shiftedProp, side) {
package/lib/button.p.module.css.js CHANGED
@@ -1,32 +1,32 @@
1
1
  var styles = {
2
- "light": "_light_119sa12_6",
3
- "dark": "_dark_119sa12_9",
4
- "flatRight": "_flatRight_119sa12_13",
5
- "flatLeft": "_flatLeft_119sa12_16",
6
- "sizeXs": "_sizeXs_119sa12_20",
7
- "sizeS": "_sizeS_119sa12_23",
8
- "sizeM": "_sizeM_119sa12_26",
9
- "sizeL": "_sizeL_119sa12_29",
10
- "modeClassic": "_modeClassic_119sa12_33",
11
- "modeRock": "_modeRock_119sa12_36",
12
- "modeTransparent": "_modeTransparent_119sa12_39",
13
- "modeOutline": "_modeOutline_119sa12_42",
14
- "modeClear": "_modeClear_119sa12_45",
15
- "alignIconLeft": "_alignIconLeft_119sa12_49",
16
- "alignIconRight": "_alignIconRight_119sa12_52",
17
- "main": "_main_119sa12_56",
18
- "disabled": "_disabled_119sa12_131",
19
- "busy": "_busy_119sa12_141",
20
- "busyOverlay": "_busyOverlay_119sa12_145",
21
- "allowMultiline": "_allowMultiline_119sa12_185",
22
- "multiline": "_multiline_119sa12_189",
23
- "withoutText": "_withoutText_119sa12_193",
24
- "withIcon": "_withIcon_119sa12_201",
25
- "icon": "_icon_119sa12_207",
26
- "busyIcon": "_busyIcon_119sa12_221",
27
- "shiftedLeft": "_shiftedLeft_119sa12_238",
28
- "shiftedRight": "_shiftedRight_119sa12_241",
29
- "shiftedTop": "_shiftedTop_119sa12_244",
30
- "shiftedBottom": "_shiftedBottom_119sa12_247"
2
+ "light": "_light_1m9atk3_6",
3
+ "dark": "_dark_1m9atk3_9",
4
+ "flatRight": "_flatRight_1m9atk3_13",
5
+ "flatLeft": "_flatLeft_1m9atk3_16",
6
+ "sizeXs": "_sizeXs_1m9atk3_20",
7
+ "sizeS": "_sizeS_1m9atk3_23",
8
+ "sizeM": "_sizeM_1m9atk3_26",
9
+ "sizeL": "_sizeL_1m9atk3_29",
10
+ "modeClassic": "_modeClassic_1m9atk3_33",
11
+ "modeRock": "_modeRock_1m9atk3_36",
12
+ "modeTransparent": "_modeTransparent_1m9atk3_39",
13
+ "modeOutline": "_modeOutline_1m9atk3_42",
14
+ "modeClear": "_modeClear_1m9atk3_45",
15
+ "alignIconLeft": "_alignIconLeft_1m9atk3_49",
16
+ "alignIconRight": "_alignIconRight_1m9atk3_52",
17
+ "main": "_main_1m9atk3_56",
18
+ "disabled": "_disabled_1m9atk3_131",
19
+ "busy": "_busy_1m9atk3_141",
20
+ "busyOverlay": "_busyOverlay_1m9atk3_145",
21
+ "allowMultiline": "_allowMultiline_1m9atk3_185",
22
+ "multiline": "_multiline_1m9atk3_189",
23
+ "withoutText": "_withoutText_1m9atk3_193",
24
+ "withIcon": "_withIcon_1m9atk3_201",
25
+ "icon": "_icon_1m9atk3_207",
26
+ "busyIcon": "_busyIcon_1m9atk3_221",
27
+ "shiftedLeft": "_shiftedLeft_1m9atk3_238",
28
+ "shiftedRight": "_shiftedRight_1m9atk3_241",
29
+ "shiftedTop": "_shiftedTop_1m9atk3_244",
30
+ "shiftedBottom": "_shiftedBottom_1m9atk3_247"
31
31
  };
32
32
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,22 +1,96 @@
1
- ._light_119sa12_6{
1
+ ._icon_1jmu341_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_1jmu341_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_1jmu341_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_1jmu341_4{
29
+
30
+ fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
+
32
+ width:auto;
33
+ height:var(--_rs-icons-height);
34
+ }
35
+ ._sizeXS_1jmu341_14{
36
+ --_rs-icons-height:16px;
37
+ }
38
+ ._sizeS_1jmu341_18{
39
+ --_rs-icons-height:20px;
40
+ }
41
+ ._sizeM_1jmu341_22{
42
+ --_rs-icons-height:24px;
43
+ }
44
+ ._sizeL_1jmu341_26{
45
+ --_rs-icons-height:28px;
46
+ }
47
+ ._light_1jmu341_30{
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));
50
+ }
51
+ ._dark_1jmu341_34{
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
+ @-webkit-keyframes rs-icon-rotate{
56
+ from{
57
+ -webkit-transform:rotate(0deg);
58
+ transform:rotate(0deg);
59
+ }
60
+ to{
61
+ -webkit-transform:rotate(360deg);
62
+ transform:rotate(360deg);
63
+ }
64
+ }
65
+ @keyframes rs-icon-rotate{
66
+ from{
67
+ -webkit-transform:rotate(0deg);
68
+ transform:rotate(0deg);
69
+ }
70
+ to{
71
+ -webkit-transform:rotate(360deg);
72
+ transform:rotate(360deg);
73
+ }
74
+ }
75
+ ._light_1m9atk3_6{
2
76
  --rs-theme-dark:0;
3
77
  }
4
- ._dark_119sa12_9{
78
+ ._dark_1m9atk3_9{
5
79
  --rs-theme-dark:1;
6
80
  }
7
- ._flatRight_119sa12_13{
81
+ ._flatRight_1m9atk3_13{
8
82
  --_rs-button-top-right-border-radius-or-initial:0px;
9
83
  --_rs-button-bottom-right-border-radius-or-initial:0px;
10
84
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
11
85
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
12
86
  }
13
- ._flatLeft_119sa12_16{
87
+ ._flatLeft_1m9atk3_16{
14
88
  --_rs-button-top-left-border-radius-or-initial:0px;
15
89
  --_rs-button-bottom-left-border-radius-or-initial:0px;
16
90
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
17
91
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
18
92
  }
19
- ._sizeXs_119sa12_20{
93
+ ._sizeXs_1m9atk3_20{
20
94
  --_rs-typography-letter-spacing:0.0045em;
21
95
  --_rs-typography-text-transform:initial;
22
96
  --_rs-typography-font-variant-numeric:initial;
@@ -63,7 +137,7 @@
63
137
  --_rs-button-icon-offset:8px;
64
138
  --_rs-button-icon-margin-top:2px;
65
139
  }
66
- ._sizeS_119sa12_23{
140
+ ._sizeS_1m9atk3_23{
67
141
  --_rs-typography-letter-spacing:0.0045em;
68
142
  --_rs-typography-text-transform:initial;
69
143
  --_rs-typography-font-variant-numeric:initial;
@@ -110,7 +184,7 @@
110
184
  --_rs-button-icon-offset:8px;
111
185
  --_rs-button-icon-margin-top:0px;
112
186
  }
113
- ._sizeM_119sa12_26{
187
+ ._sizeM_1m9atk3_26{
114
188
  --_rs-typography-letter-spacing:0.0015em;
115
189
  --_rs-typography-text-transform:initial;
116
190
  --_rs-typography-font-variant-numeric:initial;
@@ -145,11 +219,11 @@
145
219
  --_rs-typography-link-border-bottom-width-from-text:1px;
146
220
  }
147
221
  @media screen and (max-width: 640px){
148
- ._sizeM_119sa12_26{
222
+ ._sizeM_1m9atk3_26{
149
223
  --_rs-typography-list-li-margin-top-from-text:12px;
150
224
  }
151
225
  }
152
- ._sizeM_119sa12_26 {
226
+ ._sizeM_1m9atk3_26 {
153
227
  --_rs-button-border-radius-base:var(
154
228
  --rs-button-m-border-radius,
155
229
  var(--rs-button-border-radius, 20px)
@@ -164,7 +238,7 @@
164
238
  --_rs-button-icon-offset:8px;
165
239
  --_rs-button-icon-margin-top:0px;
166
240
  }
167
- ._sizeL_119sa12_29{
241
+ ._sizeL_1m9atk3_29{
168
242
  --_rs-typography-letter-spacing:normal;
169
243
  --_rs-typography-text-transform:initial;
170
244
  --_rs-typography-font-variant-numeric:initial;
@@ -199,11 +273,11 @@
199
273
  --_rs-typography-link-border-bottom-width-from-text:1px;
200
274
  }
201
275
  @media screen and (max-width: 640px){
202
- ._sizeL_119sa12_29{
276
+ ._sizeL_1m9atk3_29{
203
277
  --_rs-typography-list-li-margin-top-from-text:16px;
204
278
  }
205
279
  }
206
- ._sizeL_119sa12_29 {
280
+ ._sizeL_1m9atk3_29 {
207
281
  --_rs-button-border-radius-base:var(
208
282
  --rs-button-l-border-radius,
209
283
  var(--rs-button-border-radius, 26px)
@@ -218,7 +292,7 @@
218
292
  --_rs-button-icon-offset:16px;
219
293
  --_rs-button-icon-margin-top:0px;
220
294
  }
221
- ._modeClassic_119sa12_33{
295
+ ._modeClassic_1m9atk3_33{
222
296
  --_rs-button-inner-border-display:none;
223
297
  --_rs-button-color:#FFFFFF;
224
298
  --_rs-button-background:var(--_rs-color-primary);
@@ -230,7 +304,7 @@
230
304
  --_rs-button-disabled-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);
231
305
  --_rs-button-disabled-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.2);
232
306
  }
233
- ._modeRock_119sa12_36{
307
+ ._modeRock_1m9atk3_36{
234
308
  --_rs-button-inner-border-display:none;
235
309
  --_rs-button-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));
236
310
  --_rs-button-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));
@@ -243,7 +317,7 @@
243
317
  --_rs-button-disabled-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);
244
318
  --_rs-button-disabled-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.2);
245
319
  }
246
- ._modeTransparent_119sa12_39{
320
+ ._modeTransparent_1m9atk3_39{
247
321
  --_rs-button-inner-border-display:none;
248
322
  --_rs-button-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));
249
323
  --_rs-button-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.5);
@@ -255,7 +329,7 @@
255
329
  --_rs-button-disabled-color:rgba(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), 0.5);
256
330
  --_rs-button-disabled-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.4);
257
331
  }
258
- ._modeOutline_119sa12_42{
332
+ ._modeOutline_1m9atk3_42{
259
333
  --_rs-button-inner-border-display:block;
260
334
  --_rs-button-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));
261
335
  --_rs-button-background:transparent;
@@ -267,7 +341,7 @@
267
341
  --_rs-button-disabled-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);
268
342
  --_rs-button-disabled-background:transparent;
269
343
  }
270
- ._modeClear_119sa12_45{
344
+ ._modeClear_1m9atk3_45{
271
345
  --_rs-button-inner-border-display:none;
272
346
  --_rs-button-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));
273
347
  --_rs-button-background:transparent;
@@ -279,17 +353,17 @@
279
353
  --_rs-button-disabled-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);
280
354
  --_rs-button-disabled-background:transparent;
281
355
  }
282
- ._alignIconLeft_119sa12_49{
356
+ ._alignIconLeft_1m9atk3_49{
283
357
  --_rs-button-icon-flex-direction:row;
284
358
  --_rs-button-icon-position-multiplier-left:1;
285
359
  --_rs-button-icon-position-multiplier-right:0;
286
360
  }
287
- ._alignIconRight_119sa12_52{
361
+ ._alignIconRight_1m9atk3_52{
288
362
  --_rs-button-icon-flex-direction:row-reverse;
289
363
  --_rs-button-icon-position-multiplier-left:0;
290
364
  --_rs-button-icon-position-multiplier-right:1;
291
365
  }
292
- ._main_119sa12_56{
366
+ ._main_1m9atk3_56{
293
367
  --_rs-theme-dark:var(
294
368
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
295
369
  var(--rs-theme-dark, 0)
@@ -299,7 +373,7 @@
299
373
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
300
374
  }
301
375
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
302
- ._main_119sa12_56{
376
+ ._main_1m9atk3_56{
303
377
  --_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)));
304
378
  --_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)));
305
379
  --_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)));
@@ -308,7 +382,7 @@
308
382
  }
309
383
  }
310
384
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
311
- ._main_119sa12_56{
385
+ ._main_1m9atk3_56{
312
386
  --_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);
313
387
  --_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));
314
388
  --_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));
@@ -316,7 +390,7 @@
316
390
  --_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));
317
391
  }
318
392
  }
319
- ._main_119sa12_56 {
393
+ ._main_1m9atk3_56 {
320
394
  --_rs-button-border-radius:var(
321
395
  --_rs-button-top-left-border-radius-or-initial,
322
396
  var(--_rs-button-border-radius-base)
@@ -358,11 +432,11 @@
358
432
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
359
433
  font-feature-settings:'kern', 'liga', 'calt';
360
434
  }
361
- ._main_119sa12_56 > p:not(:nth-child(1)),
362
- ._main_119sa12_56 > pre:not(:nth-child(1)){
435
+ ._main_1m9atk3_56 > p:not(:nth-child(1)),
436
+ ._main_1m9atk3_56 > pre:not(:nth-child(1)){
363
437
  padding-top:var(--_rs-typography-auto-offset-or-initial);
364
438
  }
365
- ._main_119sa12_56 {
439
+ ._main_1m9atk3_56 {
366
440
 
367
441
  --_rs-button-border-inner-width:1px;
368
442
  --_rs-button-border-inner-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.3);
@@ -395,19 +469,19 @@
395
469
 
396
470
  transition:color 100ms, background-color 100ms;
397
471
  }
398
- ._main_119sa12_56:hover,
399
- ._main_119sa12_56:focus,
400
- ._main_119sa12_56:active{
472
+ ._main_1m9atk3_56:hover,
473
+ ._main_1m9atk3_56:focus,
474
+ ._main_1m9atk3_56:active{
401
475
  outline:none;
402
476
 
403
477
  text-decoration:none;
404
478
  }
405
- ._main_119sa12_56:focus{
479
+ ._main_1m9atk3_56:focus{
406
480
  color:var(--_rs-button-color);
407
481
  background:var(--_rs-button-background);
408
482
  }
409
483
  @media (hover: hover){
410
- ._main_119sa12_56:hover{
484
+ ._main_1m9atk3_56:hover{
411
485
  --_rs-button-border-inner-color:rgba(
412
486
  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),
413
487
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -417,21 +491,21 @@
417
491
  background:var(--_rs-button-hover-background);
418
492
  }
419
493
  }
420
- ._main_119sa12_56:active{
494
+ ._main_1m9atk3_56:active{
421
495
  --_rs-button-border-inner-width:2px;
422
496
  --_rs-button-border-inner-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));
423
497
 
424
498
  color:var(--_rs-button-color);
425
499
  background:var(--_rs-button-active-background);
426
500
  }
427
- ._main_119sa12_56:focus[data-focus-method='key']{
501
+ ._main_1m9atk3_56:focus[data-focus-method='key']{
428
502
  -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
429
503
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
430
504
  }
431
- ._main_119sa12_56:active:not(:hover):focus[data-focus-method='key']{
505
+ ._main_1m9atk3_56:active:not(:hover):focus[data-focus-method='key']{
432
506
  background:var(--_rs-button-active-focus-visible-no-hover-background);
433
507
  }
434
- ._main_119sa12_56._disabled_119sa12_131{
508
+ ._main_1m9atk3_56._disabled_1m9atk3_131{
435
509
  --_rs-button-border-inner-color:rgba(
436
510
  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),
437
511
  0.2
@@ -440,10 +514,10 @@
440
514
  color:var(--_rs-button-disabled-color);
441
515
  background:var(--_rs-button-disabled-background);
442
516
  }
443
- ._main_119sa12_56._busy_119sa12_141{
517
+ ._main_1m9atk3_56._busy_1m9atk3_141{
444
518
  pointer-events:none;
445
519
  }
446
- ._main_119sa12_56._busyOverlay_119sa12_145{
520
+ ._main_1m9atk3_56._busyOverlay_1m9atk3_145{
447
521
  display:-webkit-inline-box;
448
522
  display:-ms-inline-flexbox;
449
523
  display:inline-flex;
@@ -454,11 +528,11 @@
454
528
  -ms-flex-align:center;
455
529
  align-items:center;
456
530
  }
457
- ._main_119sa12_56._busyOverlay_119sa12_145,
458
- ._main_119sa12_56._busyOverlay_119sa12_145:hover,
459
- ._main_119sa12_56._busyOverlay_119sa12_145:active,
460
- ._main_119sa12_56._busyOverlay_119sa12_145._disabled_119sa12_131,
461
- ._main_119sa12_56._busyOverlay_119sa12_145:focus{
531
+ ._main_1m9atk3_56._busyOverlay_1m9atk3_145,
532
+ ._main_1m9atk3_56._busyOverlay_1m9atk3_145:hover,
533
+ ._main_1m9atk3_56._busyOverlay_1m9atk3_145:active,
534
+ ._main_1m9atk3_56._busyOverlay_1m9atk3_145._disabled_1m9atk3_131,
535
+ ._main_1m9atk3_56._busyOverlay_1m9atk3_145:focus{
462
536
  -webkit-user-select:none;
463
537
  -moz-user-select:none;
464
538
  -ms-user-select:none;
@@ -466,7 +540,7 @@
466
540
 
467
541
  color:transparent;
468
542
  }
469
- ._main_119sa12_56::before{
543
+ ._main_1m9atk3_56::before{
470
544
  position:absolute;
471
545
  top:0;
472
546
  right:0;
@@ -485,16 +559,16 @@
485
559
 
486
560
  transition:border-color 100ms;
487
561
  }
488
- ._disabled_119sa12_131{
562
+ ._disabled_1m9atk3_131{
489
563
  pointer-events:none;
490
564
  }
491
- ._allowMultiline_119sa12_185{
565
+ ._allowMultiline_1m9atk3_185{
492
566
  white-space:normal;
493
567
  }
494
- ._multiline_119sa12_189{
568
+ ._multiline_1m9atk3_189{
495
569
  border-radius:var(--_rs-button-multiline-border-radius);
496
570
  }
497
- ._withoutText_119sa12_193{
571
+ ._withoutText_1m9atk3_193{
498
572
  display:-webkit-inline-box;
499
573
  display:-ms-inline-flexbox;
500
574
  display:inline-flex;
@@ -507,7 +581,7 @@
507
581
 
508
582
  padding:var(--_rs-button-vertical-padding);
509
583
  }
510
- ._withIcon_119sa12_201{
584
+ ._withIcon_1m9atk3_201{
511
585
  display:-webkit-inline-box;
512
586
  display:-ms-inline-flexbox;
513
587
  display:inline-flex;
@@ -522,17 +596,17 @@
522
596
  -ms-flex-align:center;
523
597
  align-items:center;
524
598
  }
525
- ._withIcon_119sa12_201 ._icon_119sa12_207{
599
+ ._withIcon_1m9atk3_201 ._icon_1m9atk3_207{
526
600
  width:auto;
527
601
  height:var(--_rs-button-icon-size);
528
602
 
529
603
  margin:var(--_rs-button-icon-margin-top) var(--_rs-button-icon-margin-right) 0 var(--_rs-button-icon-margin-left);
530
604
  fill:currentColor;
531
605
  }
532
- ._withIcon_119sa12_201._withoutText_119sa12_193 ._icon_119sa12_207{
606
+ ._withIcon_1m9atk3_201._withoutText_1m9atk3_193 ._icon_1m9atk3_207{
533
607
  margin:0;
534
608
  }
535
- ._busyIcon_119sa12_221{
609
+ ._busyIcon_1m9atk3_221{
536
610
  position:absolute;
537
611
  top:50%;
538
612
  left:50%;
@@ -541,21 +615,21 @@
541
615
 
542
616
  transform:translate(-50%, -50%);
543
617
  }
544
- ._main_119sa12_56 ._busyIcon_119sa12_221{
618
+ ._main_1m9atk3_56 ._busyIcon_1m9atk3_221{
545
619
  color:var(--_rs-button-color);
546
620
  }
547
- ._main_119sa12_56._disabled_119sa12_131 ._busyIcon_119sa12_221{
621
+ ._main_1m9atk3_56._disabled_1m9atk3_131 ._busyIcon_1m9atk3_221{
548
622
  color:var(--_rs-button-disabled-color);
549
623
  }
550
- ._shiftedLeft_119sa12_238{
624
+ ._shiftedLeft_1m9atk3_238{
551
625
  margin-left:calc(var(--_rs-button-horizontal-padding)*-1);
552
626
  }
553
- ._shiftedRight_119sa12_241{
627
+ ._shiftedRight_1m9atk3_241{
554
628
  margin-right:calc(var(--_rs-button-horizontal-padding)*-1);
555
629
  }
556
- ._shiftedTop_119sa12_244{
630
+ ._shiftedTop_1m9atk3_244{
557
631
  margin-top:calc(var(--_rs-button-vertical-padding)*-1);
558
632
  }
559
- ._shiftedBottom_119sa12_247{
633
+ ._shiftedBottom_1m9atk3_247{
560
634
  margin-bottom:calc(var(--_rs-button-vertical-padding)*-1);
561
635
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.16.0",
3
+ "version": "0.16.1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -15,8 +15,7 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@babel/runtime-corejs3": "^7.14.0",
18
- "@rescui/icons": "^0.16.3",
19
- "@rescui/use-resize-observer": "^0.2.1",
18
+ "@rescui/use-resize-observer": "^0.2.2",
20
19
  "classnames": "^2.2.6",
21
20
  "core-js": "^3.9.1"
22
21
  },
@@ -26,9 +25,10 @@
26
25
  "react": ">=16.8.0 <19"
27
26
  },
28
27
  "devDependencies": {
29
- "@rescui/colors": "^0.2.1",
30
- "@rescui/scripts": "^0.3.1",
31
- "@rescui/typography": "^0.16.3",
28
+ "@rescui/colors": "^0.2.2",
29
+ "@rescui/icons": "^0.16.4",
30
+ "@rescui/scripts": "^0.3.2",
31
+ "@rescui/typography": "^0.16.4",
32
32
  "@rescui/visual-regression": "^0.1.2",
33
33
  "@types/classnames": "^2.2.11"
34
34
  },
@@ -37,5 +37,5 @@
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
39
  "nx": {},
40
- "gitHead": "950fab43f95d8788d3b4a266957a73233c5ea72e"
40
+ "gitHead": "d4bb4a95bc321907bc55b9ad9768f7e822acbd2d"
41
41
  }