@rescui/button 0.16.0 → 0.16.2

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 +128 -60
  6. package/package.json +7 -7
package/lib/_virtual/index.css.js ADDED
@@ -0,0 +1,10 @@
1
+ var styles = {
2
+ "icon": "_icon_ekw7ne_4",
3
+ "sizeXS": "_sizeXS_ekw7ne_14",
4
+ "sizeS": "_sizeS_ekw7ne_18",
5
+ "sizeM": "_sizeM_ekw7ne_22",
6
+ "sizeL": "_sizeL_ekw7ne_26",
7
+ "light": "_light_ekw7ne_30",
8
+ "dark": "_dark_ekw7ne_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_1hd5x4o_6",
3
+ "dark": "_dark_1hd5x4o_9",
4
+ "flatRight": "_flatRight_1hd5x4o_13",
5
+ "flatLeft": "_flatLeft_1hd5x4o_16",
6
+ "sizeXs": "_sizeXs_1hd5x4o_20",
7
+ "sizeS": "_sizeS_1hd5x4o_23",
8
+ "sizeM": "_sizeM_1hd5x4o_26",
9
+ "sizeL": "_sizeL_1hd5x4o_29",
10
+ "modeClassic": "_modeClassic_1hd5x4o_33",
11
+ "modeRock": "_modeRock_1hd5x4o_36",
12
+ "modeTransparent": "_modeTransparent_1hd5x4o_39",
13
+ "modeOutline": "_modeOutline_1hd5x4o_42",
14
+ "modeClear": "_modeClear_1hd5x4o_45",
15
+ "alignIconLeft": "_alignIconLeft_1hd5x4o_49",
16
+ "alignIconRight": "_alignIconRight_1hd5x4o_52",
17
+ "main": "_main_1hd5x4o_56",
18
+ "disabled": "_disabled_1hd5x4o_131",
19
+ "busy": "_busy_1hd5x4o_141",
20
+ "busyOverlay": "_busyOverlay_1hd5x4o_145",
21
+ "allowMultiline": "_allowMultiline_1hd5x4o_185",
22
+ "multiline": "_multiline_1hd5x4o_189",
23
+ "withoutText": "_withoutText_1hd5x4o_193",
24
+ "withIcon": "_withIcon_1hd5x4o_201",
25
+ "icon": "_icon_1hd5x4o_207",
26
+ "busyIcon": "_busyIcon_1hd5x4o_221",
27
+ "shiftedLeft": "_shiftedLeft_1hd5x4o_238",
28
+ "shiftedRight": "_shiftedRight_1hd5x4o_241",
29
+ "shiftedTop": "_shiftedTop_1hd5x4o_244",
30
+ "shiftedBottom": "_shiftedBottom_1hd5x4o_247"
31
31
  };
32
32
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,22 +1,96 @@
1
- ._light_119sa12_6{
1
+ ._icon_ekw7ne_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_ekw7ne_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_ekw7ne_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_ekw7ne_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_ekw7ne_14{
36
+ --_rs-icons-height:16px;
37
+ }
38
+ ._sizeS_ekw7ne_18{
39
+ --_rs-icons-height:20px;
40
+ }
41
+ ._sizeM_ekw7ne_22{
42
+ --_rs-icons-height:24px;
43
+ }
44
+ ._sizeL_ekw7ne_26{
45
+ --_rs-icons-height:28px;
46
+ }
47
+ ._light_ekw7ne_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
- ._dark_119sa12_9{
51
+ ._dark_ekw7ne_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));
6
54
  }
7
- ._flatRight_119sa12_13{
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_1hd5x4o_6{
76
+ --rs-theme-dark:0;
77
+ }
78
+ ._dark_1hd5x4o_9{
79
+ --rs-theme-dark:1;
80
+ }
81
+ ._flatRight_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_26{
149
223
  --_rs-typography-list-li-margin-top-from-text:12px;
150
224
  }
151
225
  }
152
- ._sizeM_119sa12_26 {
226
+ ._sizeM_1hd5x4o_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_1hd5x4o_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_1hd5x4o_29{
203
277
  --_rs-typography-list-li-margin-top-from-text:16px;
204
278
  }
205
279
  }
206
- ._sizeL_119sa12_29 {
280
+ ._sizeL_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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_1hd5x4o_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)
@@ -357,12 +431,6 @@
357
431
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
358
432
  -webkit-font-feature-settings:'kern', 'liga', 'calt';
359
433
  font-feature-settings:'kern', 'liga', 'calt';
360
- }
361
- ._main_119sa12_56 > p:not(:nth-child(1)),
362
- ._main_119sa12_56 > pre:not(:nth-child(1)){
363
- padding-top:var(--_rs-typography-auto-offset-or-initial);
364
- }
365
- ._main_119sa12_56 {
366
434
 
367
435
  --_rs-button-border-inner-width:1px;
368
436
  --_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 +463,19 @@
395
463
 
396
464
  transition:color 100ms, background-color 100ms;
397
465
  }
398
- ._main_119sa12_56:hover,
399
- ._main_119sa12_56:focus,
400
- ._main_119sa12_56:active{
466
+ ._main_1hd5x4o_56:hover,
467
+ ._main_1hd5x4o_56:focus,
468
+ ._main_1hd5x4o_56:active{
401
469
  outline:none;
402
470
 
403
471
  text-decoration:none;
404
472
  }
405
- ._main_119sa12_56:focus{
473
+ ._main_1hd5x4o_56:focus{
406
474
  color:var(--_rs-button-color);
407
475
  background:var(--_rs-button-background);
408
476
  }
409
477
  @media (hover: hover){
410
- ._main_119sa12_56:hover{
478
+ ._main_1hd5x4o_56:hover{
411
479
  --_rs-button-border-inner-color:rgba(
412
480
  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
481
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -417,21 +485,21 @@
417
485
  background:var(--_rs-button-hover-background);
418
486
  }
419
487
  }
420
- ._main_119sa12_56:active{
488
+ ._main_1hd5x4o_56:active{
421
489
  --_rs-button-border-inner-width:2px;
422
490
  --_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
491
 
424
492
  color:var(--_rs-button-color);
425
493
  background:var(--_rs-button-active-background);
426
494
  }
427
- ._main_119sa12_56:focus[data-focus-method='key']{
495
+ ._main_1hd5x4o_56:focus[data-focus-method='key']{
428
496
  -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
429
497
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
430
498
  }
431
- ._main_119sa12_56:active:not(:hover):focus[data-focus-method='key']{
499
+ ._main_1hd5x4o_56:active:not(:hover):focus[data-focus-method='key']{
432
500
  background:var(--_rs-button-active-focus-visible-no-hover-background);
433
501
  }
434
- ._main_119sa12_56._disabled_119sa12_131{
502
+ ._main_1hd5x4o_56._disabled_1hd5x4o_131{
435
503
  --_rs-button-border-inner-color:rgba(
436
504
  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
505
  0.2
@@ -440,10 +508,10 @@
440
508
  color:var(--_rs-button-disabled-color);
441
509
  background:var(--_rs-button-disabled-background);
442
510
  }
443
- ._main_119sa12_56._busy_119sa12_141{
511
+ ._main_1hd5x4o_56._busy_1hd5x4o_141{
444
512
  pointer-events:none;
445
513
  }
446
- ._main_119sa12_56._busyOverlay_119sa12_145{
514
+ ._main_1hd5x4o_56._busyOverlay_1hd5x4o_145{
447
515
  display:-webkit-inline-box;
448
516
  display:-ms-inline-flexbox;
449
517
  display:inline-flex;
@@ -454,11 +522,11 @@
454
522
  -ms-flex-align:center;
455
523
  align-items:center;
456
524
  }
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{
525
+ ._main_1hd5x4o_56._busyOverlay_1hd5x4o_145,
526
+ ._main_1hd5x4o_56._busyOverlay_1hd5x4o_145:hover,
527
+ ._main_1hd5x4o_56._busyOverlay_1hd5x4o_145:active,
528
+ ._main_1hd5x4o_56._busyOverlay_1hd5x4o_145._disabled_1hd5x4o_131,
529
+ ._main_1hd5x4o_56._busyOverlay_1hd5x4o_145:focus{
462
530
  -webkit-user-select:none;
463
531
  -moz-user-select:none;
464
532
  -ms-user-select:none;
@@ -466,7 +534,7 @@
466
534
 
467
535
  color:transparent;
468
536
  }
469
- ._main_119sa12_56::before{
537
+ ._main_1hd5x4o_56::before{
470
538
  position:absolute;
471
539
  top:0;
472
540
  right:0;
@@ -485,16 +553,16 @@
485
553
 
486
554
  transition:border-color 100ms;
487
555
  }
488
- ._disabled_119sa12_131{
556
+ ._disabled_1hd5x4o_131{
489
557
  pointer-events:none;
490
558
  }
491
- ._allowMultiline_119sa12_185{
559
+ ._allowMultiline_1hd5x4o_185{
492
560
  white-space:normal;
493
561
  }
494
- ._multiline_119sa12_189{
562
+ ._multiline_1hd5x4o_189{
495
563
  border-radius:var(--_rs-button-multiline-border-radius);
496
564
  }
497
- ._withoutText_119sa12_193{
565
+ ._withoutText_1hd5x4o_193{
498
566
  display:-webkit-inline-box;
499
567
  display:-ms-inline-flexbox;
500
568
  display:inline-flex;
@@ -507,7 +575,7 @@
507
575
 
508
576
  padding:var(--_rs-button-vertical-padding);
509
577
  }
510
- ._withIcon_119sa12_201{
578
+ ._withIcon_1hd5x4o_201{
511
579
  display:-webkit-inline-box;
512
580
  display:-ms-inline-flexbox;
513
581
  display:inline-flex;
@@ -522,17 +590,17 @@
522
590
  -ms-flex-align:center;
523
591
  align-items:center;
524
592
  }
525
- ._withIcon_119sa12_201 ._icon_119sa12_207{
593
+ ._withIcon_1hd5x4o_201 ._icon_1hd5x4o_207{
526
594
  width:auto;
527
595
  height:var(--_rs-button-icon-size);
528
596
 
529
597
  margin:var(--_rs-button-icon-margin-top) var(--_rs-button-icon-margin-right) 0 var(--_rs-button-icon-margin-left);
530
598
  fill:currentColor;
531
599
  }
532
- ._withIcon_119sa12_201._withoutText_119sa12_193 ._icon_119sa12_207{
600
+ ._withIcon_1hd5x4o_201._withoutText_1hd5x4o_193 ._icon_1hd5x4o_207{
533
601
  margin:0;
534
602
  }
535
- ._busyIcon_119sa12_221{
603
+ ._busyIcon_1hd5x4o_221{
536
604
  position:absolute;
537
605
  top:50%;
538
606
  left:50%;
@@ -541,21 +609,21 @@
541
609
 
542
610
  transform:translate(-50%, -50%);
543
611
  }
544
- ._main_119sa12_56 ._busyIcon_119sa12_221{
612
+ ._main_1hd5x4o_56 ._busyIcon_1hd5x4o_221{
545
613
  color:var(--_rs-button-color);
546
614
  }
547
- ._main_119sa12_56._disabled_119sa12_131 ._busyIcon_119sa12_221{
615
+ ._main_1hd5x4o_56._disabled_1hd5x4o_131 ._busyIcon_1hd5x4o_221{
548
616
  color:var(--_rs-button-disabled-color);
549
617
  }
550
- ._shiftedLeft_119sa12_238{
618
+ ._shiftedLeft_1hd5x4o_238{
551
619
  margin-left:calc(var(--_rs-button-horizontal-padding)*-1);
552
620
  }
553
- ._shiftedRight_119sa12_241{
621
+ ._shiftedRight_1hd5x4o_241{
554
622
  margin-right:calc(var(--_rs-button-horizontal-padding)*-1);
555
623
  }
556
- ._shiftedTop_119sa12_244{
624
+ ._shiftedTop_1hd5x4o_244{
557
625
  margin-top:calc(var(--_rs-button-vertical-padding)*-1);
558
626
  }
559
- ._shiftedBottom_119sa12_247{
627
+ ._shiftedBottom_1hd5x4o_247{
560
628
  margin-bottom:calc(var(--_rs-button-vertical-padding)*-1);
561
629
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.16.0",
3
+ "version": "0.16.2",
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.3",
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.3",
29
+ "@rescui/icons": "^0.16.5",
30
+ "@rescui/scripts": "^0.3.3",
31
+ "@rescui/typography": "^0.17.0",
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": "b422496bacb5df4a601008c646abfb08cebe461c"
41
41
  }