@rescui/button 0.16.6 → 0.17.0

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 (8) hide show
  1. package/lib/_virtual/index.css.js +7 -7
  2. package/lib/button.d.ts +2 -1
  3. package/lib/button.js +18 -21
  4. package/lib/button.p.module.css.js +29 -29
  5. package/lib/index.css +103 -80
  6. package/lib/public-api.p.css +26 -0
  7. package/lib/public-api.pcss +26 -0
  8. package/package.json +4 -4
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
2
- "icon": "_icon_1uqxwp7_4",
3
- "sizeXS": "_sizeXS_1uqxwp7_14",
4
- "sizeS": "_sizeS_1uqxwp7_18",
5
- "sizeM": "_sizeM_1uqxwp7_22",
6
- "sizeL": "_sizeL_1uqxwp7_26",
7
- "light": "_light_1uqxwp7_30",
8
- "dark": "_dark_1uqxwp7_34"
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"
9
9
  };
10
10
  export { styles as default };
package/lib/button.d.ts CHANGED
@@ -71,5 +71,6 @@ declare type ButtonIntrinsicProps = {
71
71
  };
72
72
  declare type NativeProps = React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement> | React.BaseHTMLAttributes<HTMLDivElement>;
73
73
  export declare type ButtonProps = Omit<NativeProps, keyof ButtonIntrinsicProps> & ButtonIntrinsicProps;
74
- export declare const Button: React.ForwardRefExoticComponent<Omit<NativeProps, keyof ButtonIntrinsicProps> & ButtonIntrinsicProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>>;
74
+ declare type ButtonPossibleHTMLType = HTMLAnchorElement | HTMLButtonElement | HTMLDivElement;
75
+ export declare const Button: React.ForwardRefExoticComponent<Omit<NativeProps, keyof ButtonIntrinsicProps> & ButtonIntrinsicProps & React.RefAttributes<ButtonPossibleHTMLType>>;
75
76
  export default Button;
package/lib/button.js CHANGED
@@ -16,7 +16,7 @@ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable
16
16
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
17
17
  import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
18
18
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
19
- import React, { useState, cloneElement, useRef, useEffect } from 'react';
19
+ import React, { useState, useRef, cloneElement } from 'react';
20
20
  import cn from 'classnames';
21
21
  import PropTypes from 'prop-types';
22
22
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -41,22 +41,6 @@ var SIZE_STYLES = {
41
41
  m: styles.sizeM,
42
42
  l: styles.sizeL
43
43
  };
44
-
45
- var useForwardedRef = function useForwardedRef(ref) {
46
- var innerRef = useRef(null);
47
- var current = innerRef.current;
48
- useEffect(function () {
49
- if (!ref) return;
50
-
51
- if (typeof ref === 'function') {
52
- ref(current);
53
- } else {
54
- ref.current = current;
55
- }
56
- }, [ref, current]);
57
- return innerRef;
58
- };
59
-
60
44
  var Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
61
45
  function (_ref, forwardedRef) {
62
46
  var _cn;
@@ -92,7 +76,20 @@ function (_ref, forwardedRef) {
92
76
  multiline = _useState2[0],
93
77
  setMultiline = _useState2[1];
94
78
 
95
- var ref = useForwardedRef(forwardedRef);
79
+ var ref = useRef(null);
80
+
81
+ var handleRef = function handleRef(el) {
82
+ ref.current = el;
83
+
84
+ if (forwardedRef) {
85
+ if (typeof forwardedRef === 'function') {
86
+ forwardedRef(el);
87
+ } else {
88
+ forwardedRef.current = el;
89
+ }
90
+ }
91
+ };
92
+
96
93
  useResizeObserver(ref, function (entry) {
97
94
  var target = entry.target;
98
95
  var height = entry.contentRect.height;
@@ -145,20 +142,20 @@ function (_ref, forwardedRef) {
145
142
  return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
146
143
  "data-test": 'button'
147
144
  }, restProps), {}, {
148
- ref: ref
145
+ ref: handleRef
149
146
  }, buttonSharedProps), buttonChildren);
150
147
  } else if (href) {
151
148
  return /*#__PURE__*/React.createElement("a", _objectSpread(_objectSpread({
152
149
  "data-test": 'button'
153
150
  }, restProps), {}, {
154
- ref: ref,
151
+ ref: handleRef,
155
152
  type: type
156
153
  }, buttonSharedProps), buttonChildren);
157
154
  } else {
158
155
  return /*#__PURE__*/React.createElement("button", _objectSpread(_objectSpread({
159
156
  "data-test": 'button'
160
157
  }, restProps), {}, {
161
- ref: ref,
158
+ ref: handleRef,
162
159
 
163
160
  /* eslint-disable-next-line react/button-has-type */
164
161
  type: type
package/lib/button.p.module.css.js CHANGED
@@ -1,32 +1,32 @@
1
1
  var styles = {
2
- "light": "_light_o4fso9_6",
3
- "dark": "_dark_o4fso9_9",
4
- "flatRight": "_flatRight_o4fso9_13",
5
- "flatLeft": "_flatLeft_o4fso9_16",
6
- "sizeXs": "_sizeXs_o4fso9_20",
7
- "sizeS": "_sizeS_o4fso9_23",
8
- "sizeM": "_sizeM_o4fso9_26",
9
- "sizeL": "_sizeL_o4fso9_29",
10
- "modeClassic": "_modeClassic_o4fso9_33",
11
- "modeRock": "_modeRock_o4fso9_36",
12
- "modeTransparent": "_modeTransparent_o4fso9_39",
13
- "modeOutline": "_modeOutline_o4fso9_42",
14
- "modeClear": "_modeClear_o4fso9_45",
15
- "alignIconLeft": "_alignIconLeft_o4fso9_49",
16
- "alignIconRight": "_alignIconRight_o4fso9_52",
17
- "main": "_main_o4fso9_56",
18
- "disabled": "_disabled_o4fso9_131",
19
- "busy": "_busy_o4fso9_141",
20
- "busyOverlay": "_busyOverlay_o4fso9_145",
21
- "allowMultiline": "_allowMultiline_o4fso9_185",
22
- "multiline": "_multiline_o4fso9_189",
23
- "withoutText": "_withoutText_o4fso9_193",
24
- "withIcon": "_withIcon_o4fso9_201",
25
- "icon": "_icon_o4fso9_207",
26
- "busyIcon": "_busyIcon_o4fso9_221",
27
- "shiftedLeft": "_shiftedLeft_o4fso9_238",
28
- "shiftedRight": "_shiftedRight_o4fso9_241",
29
- "shiftedTop": "_shiftedTop_o4fso9_244",
30
- "shiftedBottom": "_shiftedBottom_o4fso9_247"
2
+ "light": "_light_h5t57s_6",
3
+ "dark": "_dark_h5t57s_9",
4
+ "flatRight": "_flatRight_h5t57s_13",
5
+ "flatLeft": "_flatLeft_h5t57s_16",
6
+ "sizeXs": "_sizeXs_h5t57s_20",
7
+ "sizeS": "_sizeS_h5t57s_23",
8
+ "sizeM": "_sizeM_h5t57s_26",
9
+ "sizeL": "_sizeL_h5t57s_29",
10
+ "modeClassic": "_modeClassic_h5t57s_33",
11
+ "modeRock": "_modeRock_h5t57s_36",
12
+ "modeTransparent": "_modeTransparent_h5t57s_39",
13
+ "modeOutline": "_modeOutline_h5t57s_42",
14
+ "modeClear": "_modeClear_h5t57s_45",
15
+ "alignIconLeft": "_alignIconLeft_h5t57s_49",
16
+ "alignIconRight": "_alignIconRight_h5t57s_52",
17
+ "main": "_main_h5t57s_56",
18
+ "disabled": "_disabled_h5t57s_122",
19
+ "busy": "_busy_h5t57s_132",
20
+ "busyOverlay": "_busyOverlay_h5t57s_136",
21
+ "allowMultiline": "_allowMultiline_h5t57s_176",
22
+ "multiline": "_multiline_h5t57s_180",
23
+ "withoutText": "_withoutText_h5t57s_184",
24
+ "withIcon": "_withIcon_h5t57s_192",
25
+ "icon": "_icon_h5t57s_198",
26
+ "busyIcon": "_busyIcon_h5t57s_212",
27
+ "shiftedLeft": "_shiftedLeft_h5t57s_229",
28
+ "shiftedRight": "_shiftedRight_h5t57s_232",
29
+ "shiftedTop": "_shiftedTop_h5t57s_235",
30
+ "shiftedBottom": "_shiftedBottom_h5t57s_238"
31
31
  };
32
32
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_1uqxwp7_4{
1
+ ._icon_1g6zqe1_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_1uqxwp7_4{
11
+ ._icon_1g6zqe1_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_1uqxwp7_4{
20
+ ._icon_1g6zqe1_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,30 +25,30 @@
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_1uqxwp7_4{
28
+ ._icon_1g6zqe1_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_1uqxwp7_14{
35
+ ._sizeXS_1g6zqe1_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_1uqxwp7_18{
38
+ ._sizeS_1g6zqe1_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_1uqxwp7_22{
41
+ ._sizeM_1g6zqe1_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_1uqxwp7_26{
44
+ ._sizeL_1g6zqe1_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_1uqxwp7_30{
47
+ ._light_1g6zqe1_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_1uqxwp7_34{
51
+ ._dark_1g6zqe1_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
  }
@@ -72,25 +72,25 @@
72
72
  transform:rotate(360deg);
73
73
  }
74
74
  }
75
- ._light_o4fso9_6{
75
+ ._light_h5t57s_6{
76
76
  --rs-theme-dark:0;
77
77
  }
78
- ._dark_o4fso9_9{
78
+ ._dark_h5t57s_9{
79
79
  --rs-theme-dark:1;
80
80
  }
81
- ._flatRight_o4fso9_13{
81
+ ._flatRight_h5t57s_13{
82
82
  --_rs-button-top-right-border-radius-or-initial:0px;
83
83
  --_rs-button-bottom-right-border-radius-or-initial:0px;
84
84
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
85
85
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
86
86
  }
87
- ._flatLeft_o4fso9_16{
87
+ ._flatLeft_h5t57s_16{
88
88
  --_rs-button-top-left-border-radius-or-initial:0px;
89
89
  --_rs-button-bottom-left-border-radius-or-initial:0px;
90
90
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
91
91
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
92
92
  }
93
- ._sizeXs_o4fso9_20{
93
+ ._sizeXs_h5t57s_20{
94
94
  --_rs-typography-letter-spacing:0.0045em;
95
95
  --_rs-typography-text-transform:initial;
96
96
  --_rs-typography-font-variant-numeric:initial;
@@ -137,7 +137,7 @@
137
137
  --_rs-button-icon-offset:8px;
138
138
  --_rs-button-icon-margin-top:2px;
139
139
  }
140
- ._sizeS_o4fso9_23{
140
+ ._sizeS_h5t57s_23{
141
141
  --_rs-typography-letter-spacing:0.0045em;
142
142
  --_rs-typography-text-transform:initial;
143
143
  --_rs-typography-font-variant-numeric:initial;
@@ -184,7 +184,7 @@
184
184
  --_rs-button-icon-offset:8px;
185
185
  --_rs-button-icon-margin-top:0px;
186
186
  }
187
- ._sizeM_o4fso9_26{
187
+ ._sizeM_h5t57s_26{
188
188
  --_rs-typography-letter-spacing:0.0015em;
189
189
  --_rs-typography-text-transform:initial;
190
190
  --_rs-typography-font-variant-numeric:initial;
@@ -219,11 +219,11 @@
219
219
  --_rs-typography-link-border-bottom-width-from-text:1px;
220
220
  }
221
221
  @media screen and (max-width: 640px){
222
- ._sizeM_o4fso9_26{
222
+ ._sizeM_h5t57s_26{
223
223
  --_rs-typography-list-li-margin-top-from-text:12px;
224
224
  }
225
225
  }
226
- ._sizeM_o4fso9_26 {
226
+ ._sizeM_h5t57s_26 {
227
227
  --_rs-button-border-radius-base:var(
228
228
  --rs-button-m-border-radius,
229
229
  var(--rs-button-border-radius, 20px)
@@ -238,7 +238,7 @@
238
238
  --_rs-button-icon-offset:8px;
239
239
  --_rs-button-icon-margin-top:0px;
240
240
  }
241
- ._sizeL_o4fso9_29{
241
+ ._sizeL_h5t57s_29{
242
242
  --_rs-typography-letter-spacing:normal;
243
243
  --_rs-typography-text-transform:initial;
244
244
  --_rs-typography-font-variant-numeric:initial;
@@ -273,11 +273,11 @@
273
273
  --_rs-typography-link-border-bottom-width-from-text:1px;
274
274
  }
275
275
  @media screen and (max-width: 640px){
276
- ._sizeL_o4fso9_29{
276
+ ._sizeL_h5t57s_29{
277
277
  --_rs-typography-list-li-margin-top-from-text:16px;
278
278
  }
279
279
  }
280
- ._sizeL_o4fso9_29 {
280
+ ._sizeL_h5t57s_29 {
281
281
  --_rs-button-border-radius-base:var(
282
282
  --rs-button-l-border-radius,
283
283
  var(--rs-button-border-radius, 26px)
@@ -292,7 +292,7 @@
292
292
  --_rs-button-icon-offset:16px;
293
293
  --_rs-button-icon-margin-top:0px;
294
294
  }
295
- ._modeClassic_o4fso9_33{
295
+ ._modeClassic_h5t57s_33{
296
296
  --_rs-button-inner-border-display:none;
297
297
  --_rs-button-color:#FFFFFF;
298
298
  --_rs-button-background:var(--_rs-color-primary);
@@ -304,7 +304,7 @@
304
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);
305
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);
306
306
  }
307
- ._modeRock_o4fso9_36{
307
+ ._modeRock_h5t57s_36{
308
308
  --_rs-button-inner-border-display:none;
309
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));
310
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));
@@ -317,7 +317,7 @@
317
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);
318
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);
319
319
  }
320
- ._modeTransparent_o4fso9_39{
320
+ ._modeTransparent_h5t57s_39{
321
321
  --_rs-button-inner-border-display:none;
322
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));
323
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);
@@ -329,7 +329,7 @@
329
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);
330
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);
331
331
  }
332
- ._modeOutline_o4fso9_42{
332
+ ._modeOutline_h5t57s_42{
333
333
  --_rs-button-inner-border-display:block;
334
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));
335
335
  --_rs-button-background:transparent;
@@ -341,7 +341,7 @@
341
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);
342
342
  --_rs-button-disabled-background:transparent;
343
343
  }
344
- ._modeClear_o4fso9_45{
344
+ ._modeClear_h5t57s_45{
345
345
  --_rs-button-inner-border-display:none;
346
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));
347
347
  --_rs-button-background:transparent;
@@ -353,17 +353,17 @@
353
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);
354
354
  --_rs-button-disabled-background:transparent;
355
355
  }
356
- ._alignIconLeft_o4fso9_49{
356
+ ._alignIconLeft_h5t57s_49{
357
357
  --_rs-button-icon-flex-direction:row;
358
358
  --_rs-button-icon-position-multiplier-left:1;
359
359
  --_rs-button-icon-position-multiplier-right:0;
360
360
  }
361
- ._alignIconRight_o4fso9_52{
361
+ ._alignIconRight_h5t57s_52{
362
362
  --_rs-button-icon-flex-direction:row-reverse;
363
363
  --_rs-button-icon-position-multiplier-left:0;
364
364
  --_rs-button-icon-position-multiplier-right:1;
365
365
  }
366
- ._main_o4fso9_56{
366
+ ._main_h5t57s_56{
367
367
  --_rs-theme-dark:var(
368
368
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
369
369
  var(--rs-theme-dark, 0)
@@ -373,7 +373,7 @@
373
373
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
374
374
  }
375
375
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
376
- ._main_o4fso9_56{
376
+ ._main_h5t57s_56{
377
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)));
378
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)));
379
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)));
@@ -382,7 +382,7 @@
382
382
  }
383
383
  }
384
384
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
385
- ._main_o4fso9_56{
385
+ ._main_h5t57s_56{
386
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);
387
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));
388
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));
@@ -390,7 +390,25 @@
390
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));
391
391
  }
392
392
  }
393
- ._main_o4fso9_56 {
393
+ ._main_h5t57s_56 {
394
+ --_rs-button-color-final:var(
395
+ --_rs-button-color-from-state-active,
396
+ var(--_rs-button-color-from-state-hover, var(--_rs-button-color))
397
+ );
398
+ --_rs-button-background-final:var(
399
+ --_rs-button-background-from-state-active-focus-visible-no-hover,
400
+ var(
401
+ --_rs-button-background-from-state-active,
402
+ var(
403
+ --_rs-button-background-from-state-hover,
404
+ var(--_rs-button-background)
405
+ )
406
+ )
407
+ );
408
+ --_rs-button-box-shadow-final:var(
409
+ --_rs-button-box-shadow-from-state-focus-visible,
410
+ initial
411
+ );
394
412
  --_rs-button-border-radius:var(
395
413
  --_rs-button-top-left-border-radius-or-initial,
396
414
  var(--_rs-button-border-radius-base)
@@ -454,52 +472,57 @@
454
472
  white-space:nowrap;
455
473
  text-decoration:none;
456
474
 
457
- color:var(--_rs-button-color);
475
+ color:var(--_rs-button-color-final);
458
476
 
459
- background:var(--_rs-button-background);
477
+ background:var(--_rs-button-background-final);
460
478
  background-origin:border-box;
479
+ -webkit-box-shadow:var(--_rs-button-box-shadow-final);
480
+ box-shadow:var(--_rs-button-box-shadow-final);
461
481
 
462
482
  -webkit-transition:color 100ms, background-color 100ms;
463
483
 
464
484
  transition:color 100ms, background-color 100ms;
465
485
  }
466
- ._main_o4fso9_56:hover,
467
- ._main_o4fso9_56:focus,
468
- ._main_o4fso9_56:active{
486
+ ._main_h5t57s_56:hover,
487
+ ._main_h5t57s_56:focus,
488
+ ._main_h5t57s_56:active{
469
489
  outline:none;
470
490
 
471
491
  text-decoration:none;
472
492
  }
473
- ._main_o4fso9_56:focus{
474
- color:var(--_rs-button-color);
475
- background:var(--_rs-button-background);
493
+ ._main_h5t57s_56:focus{
494
+ color:var(--_rs-button-color-final);
495
+ background:var(--_rs-button-background-final);
476
496
  }
477
497
  @media (hover: hover){
478
- ._main_o4fso9_56:hover{
498
+ ._main_h5t57s_56:hover{
479
499
  --_rs-button-border-inner-color:rgba(
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),
481
- calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
482
- );
483
-
484
- color:var(--_rs-button-color);
485
- background:var(--_rs-button-hover-background);
500
+ 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),
501
+ calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
502
+ );
503
+ --_rs-button-color-from-state-hover:var(--_rs-button-color);
504
+ --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
486
505
  }
487
506
  }
488
- ._main_o4fso9_56:active{
507
+ ._main_h5t57s_56:active{
489
508
  --_rs-button-border-inner-width:2px;
490
509
  --_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));
491
-
492
- color:var(--_rs-button-color);
493
- background:var(--_rs-button-active-background);
510
+ --_rs-button-color-from-state-active:var(--_rs-button-color);
511
+ --_rs-button-background-from-state-active:var(
512
+ --_rs-button-active-background
513
+ );
494
514
  }
495
- ._main_o4fso9_56:focus[data-focus-method='key']{
496
- -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
497
- box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
515
+ ._main_h5t57s_56:focus[data-focus-method='key']{
516
+ --_rs-button-box-shadow-from-state-focus-visible:var(
517
+ --_rs-color-primary-t-dim
518
+ ) 0 0 0 4px;
498
519
  }
499
- ._main_o4fso9_56:active:not(:hover):focus[data-focus-method='key']{
500
- background:var(--_rs-button-active-focus-visible-no-hover-background);
520
+ ._main_h5t57s_56:active:not(:hover):focus[data-focus-method='key']{
521
+ --_rs-button-background-from-state-active-focus-visible-no-hover:var(
522
+ --_rs-button-active-focus-visible-no-hover-background
523
+ );
501
524
  }
502
- ._main_o4fso9_56._disabled_o4fso9_131{
525
+ ._main_h5t57s_56._disabled_h5t57s_122{
503
526
  --_rs-button-border-inner-color:rgba(
504
527
  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),
505
528
  0.2
@@ -508,10 +531,10 @@
508
531
  color:var(--_rs-button-disabled-color);
509
532
  background:var(--_rs-button-disabled-background);
510
533
  }
511
- ._main_o4fso9_56._busy_o4fso9_141{
534
+ ._main_h5t57s_56._busy_h5t57s_132{
512
535
  pointer-events:none;
513
536
  }
514
- ._main_o4fso9_56._busyOverlay_o4fso9_145{
537
+ ._main_h5t57s_56._busyOverlay_h5t57s_136{
515
538
  display:-webkit-inline-box;
516
539
  display:-ms-inline-flexbox;
517
540
  display:inline-flex;
@@ -522,11 +545,11 @@
522
545
  -ms-flex-align:center;
523
546
  align-items:center;
524
547
  }
525
- ._main_o4fso9_56._busyOverlay_o4fso9_145,
526
- ._main_o4fso9_56._busyOverlay_o4fso9_145:hover,
527
- ._main_o4fso9_56._busyOverlay_o4fso9_145:active,
528
- ._main_o4fso9_56._busyOverlay_o4fso9_145._disabled_o4fso9_131,
529
- ._main_o4fso9_56._busyOverlay_o4fso9_145:focus{
548
+ ._main_h5t57s_56._busyOverlay_h5t57s_136,
549
+ ._main_h5t57s_56._busyOverlay_h5t57s_136:hover,
550
+ ._main_h5t57s_56._busyOverlay_h5t57s_136:active,
551
+ ._main_h5t57s_56._busyOverlay_h5t57s_136._disabled_h5t57s_122,
552
+ ._main_h5t57s_56._busyOverlay_h5t57s_136:focus{
530
553
  -webkit-user-select:none;
531
554
  -moz-user-select:none;
532
555
  -ms-user-select:none;
@@ -534,7 +557,7 @@
534
557
 
535
558
  color:transparent;
536
559
  }
537
- ._main_o4fso9_56::before{
560
+ ._main_h5t57s_56::before{
538
561
  position:absolute;
539
562
  top:0;
540
563
  right:0;
@@ -553,16 +576,16 @@
553
576
 
554
577
  transition:border-color 100ms;
555
578
  }
556
- ._disabled_o4fso9_131{
579
+ ._disabled_h5t57s_122{
557
580
  pointer-events:none;
558
581
  }
559
- ._allowMultiline_o4fso9_185{
582
+ ._allowMultiline_h5t57s_176{
560
583
  white-space:normal;
561
584
  }
562
- ._multiline_o4fso9_189{
585
+ ._multiline_h5t57s_180{
563
586
  border-radius:var(--_rs-button-multiline-border-radius);
564
587
  }
565
- ._withoutText_o4fso9_193{
588
+ ._withoutText_h5t57s_184{
566
589
  display:-webkit-inline-box;
567
590
  display:-ms-inline-flexbox;
568
591
  display:inline-flex;
@@ -575,7 +598,7 @@
575
598
 
576
599
  padding:var(--_rs-button-vertical-padding);
577
600
  }
578
- ._withIcon_o4fso9_201{
601
+ ._withIcon_h5t57s_192{
579
602
  display:-webkit-inline-box;
580
603
  display:-ms-inline-flexbox;
581
604
  display:inline-flex;
@@ -590,17 +613,17 @@
590
613
  -ms-flex-align:center;
591
614
  align-items:center;
592
615
  }
593
- ._withIcon_o4fso9_201 ._icon_o4fso9_207{
616
+ ._withIcon_h5t57s_192 ._icon_h5t57s_198{
594
617
  width:auto;
595
618
  height:var(--_rs-button-icon-size);
596
619
 
597
620
  margin:var(--_rs-button-icon-margin-top) var(--_rs-button-icon-margin-right) 0 var(--_rs-button-icon-margin-left);
598
621
  fill:currentColor;
599
622
  }
600
- ._withIcon_o4fso9_201._withoutText_o4fso9_193 ._icon_o4fso9_207{
623
+ ._withIcon_h5t57s_192._withoutText_h5t57s_184 ._icon_h5t57s_198{
601
624
  margin:0;
602
625
  }
603
- ._busyIcon_o4fso9_221{
626
+ ._busyIcon_h5t57s_212{
604
627
  position:absolute;
605
628
  top:50%;
606
629
  left:50%;
@@ -609,21 +632,21 @@
609
632
 
610
633
  transform:translate(-50%, -50%);
611
634
  }
612
- ._main_o4fso9_56 ._busyIcon_o4fso9_221{
635
+ ._main_h5t57s_56 ._busyIcon_h5t57s_212{
613
636
  color:var(--_rs-button-color);
614
637
  }
615
- ._main_o4fso9_56._disabled_o4fso9_131 ._busyIcon_o4fso9_221{
638
+ ._main_h5t57s_56._disabled_h5t57s_122 ._busyIcon_h5t57s_212{
616
639
  color:var(--_rs-button-disabled-color);
617
640
  }
618
- ._shiftedLeft_o4fso9_238{
641
+ ._shiftedLeft_h5t57s_229{
619
642
  margin-left:calc(var(--_rs-button-horizontal-padding)*-1);
620
643
  }
621
- ._shiftedRight_o4fso9_241{
644
+ ._shiftedRight_h5t57s_232{
622
645
  margin-right:calc(var(--_rs-button-horizontal-padding)*-1);
623
646
  }
624
- ._shiftedTop_o4fso9_244{
647
+ ._shiftedTop_h5t57s_235{
625
648
  margin-top:calc(var(--_rs-button-vertical-padding)*-1);
626
649
  }
627
- ._shiftedBottom_o4fso9_247{
650
+ ._shiftedBottom_h5t57s_238{
628
651
  margin-bottom:calc(var(--_rs-button-vertical-padding)*-1);
629
652
  }
package/lib/public-api.p.css CHANGED
@@ -309,3 +309,29 @@
309
309
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
310
310
  }
311
311
  }
312
+ @define-mixin rs-button-state-hover{
313
+ --_rs-button-border-inner-color:rgba(
314
+ 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),
315
+ calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
316
+ );
317
+ --_rs-button-color-from-state-hover:var(--_rs-button-color);
318
+ --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
319
+ }
320
+ @define-mixin rs-button-state-active{
321
+ --_rs-button-border-inner-width:2px;
322
+ --_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));
323
+ --_rs-button-color-from-state-active:var(--_rs-button-color);
324
+ --_rs-button-background-from-state-active:var(
325
+ --_rs-button-active-background
326
+ );
327
+ }
328
+ @define-mixin rs-button-state-focus-visible{
329
+ --_rs-button-box-shadow-from-state-focus-visible:var(
330
+ --_rs-color-primary-t-dim
331
+ ) 0 0 0 4px;
332
+ }
333
+ @define-mixin rs-button-state-active-focus-visible-no-hover{
334
+ --_rs-button-background-from-state-active-focus-visible-no-hover:var(
335
+ --_rs-button-active-focus-visible-no-hover-background
336
+ );
337
+ }
package/lib/public-api.pcss CHANGED
@@ -309,3 +309,29 @@
309
309
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
310
310
  }
311
311
  }
312
+ @define-mixin rs-button-state-hover{
313
+ --_rs-button-border-inner-color:rgba(
314
+ 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),
315
+ calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
316
+ );
317
+ --_rs-button-color-from-state-hover:var(--_rs-button-color);
318
+ --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
319
+ }
320
+ @define-mixin rs-button-state-active{
321
+ --_rs-button-border-inner-width:2px;
322
+ --_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));
323
+ --_rs-button-color-from-state-active:var(--_rs-button-color);
324
+ --_rs-button-background-from-state-active:var(
325
+ --_rs-button-active-background
326
+ );
327
+ }
328
+ @define-mixin rs-button-state-focus-visible{
329
+ --_rs-button-box-shadow-from-state-focus-visible:var(
330
+ --_rs-color-primary-t-dim
331
+ ) 0 0 0 4px;
332
+ }
333
+ @define-mixin rs-button-state-active-focus-visible-no-hover{
334
+ --_rs-button-background-from-state-active-focus-visible-no-hover:var(
335
+ --_rs-button-active-focus-visible-no-hover-background
336
+ );
337
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.16.6",
3
+ "version": "0.17.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -26,9 +26,9 @@
26
26
  },
27
27
  "devDependencies": {
28
28
  "@rescui/colors": "^0.2.5",
29
- "@rescui/icons": "^0.16.9",
29
+ "@rescui/icons": "^0.16.10",
30
30
  "@rescui/scripts": "^0.3.4",
31
- "@rescui/typography": "^0.18.2",
31
+ "@rescui/typography": "^0.19.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": "efe72850816ad50de41544ab1d6f84db0d89b322"
40
+ "gitHead": "69a84812628809943698f0b27643c83dc449f119"
41
41
  }