@rescui/button 0.21.1 → 0.21.3

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 +12 -7
  2. package/lib/_virtual/loading.js +100 -22
  3. package/lib/button.js +7 -3
  4. package/lib/button.p.module.css.js +31 -31
  5. package/lib/index.css +104 -68
  6. package/package.json +7 -7
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_gxmcf_4",
3
- "sizeXS": "_sizeXS_gxmcf_14",
4
- "sizeS": "_sizeS_gxmcf_18",
5
- "sizeM": "_sizeM_gxmcf_22",
6
- "sizeL": "_sizeL_gxmcf_26",
7
- "light": "_light_gxmcf_30",
8
- "dark": "_dark_gxmcf_34"
2
+ "icon": "_icon_oeje7x_4",
3
+ "sizeXS": "_sizeXS_oeje7x_14",
4
+ "sizeS": "_sizeS_oeje7x_18",
5
+ "sizeM": "_sizeM_oeje7x_22",
6
+ "sizeL": "_sizeL_oeje7x_26",
7
+ "light": "_light_oeje7x_30",
8
+ "dark": "_dark_oeje7x_34",
9
+ "allVariants": "_allVariants_oeje7x_48",
10
+ "variant16": "_variant16_oeje7x_53",
11
+ "variant20": "_variant20_oeje7x_54",
12
+ "variant24": "_variant24_oeje7x_55",
13
+ "variant28": "_variant28_oeje7x_58"
9
14
  };
10
15
  export { styles as default };
package/lib/_virtual/loading.js CHANGED
@@ -9,36 +9,114 @@ const sizeStyles = {
9
9
  "m": styles.sizeM,
10
10
  "l": styles.sizeL
11
11
  };
12
+ const Size = {
13
+ "xs": "xs",
14
+ "s": "s",
15
+ "m": "m",
16
+ "l": "l"
17
+ };
18
+ const LoadingIcon16 = /*#__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: "M8 3.25a4.75 4.75 0 1 0 4.686 3.968.75.75 0 1 1 1.48-.245q.083.503.084 1.027a6.25 6.25 0 1 1-5.223-6.166.75.75 0 0 1-.245 1.48A5 5 0 0 0 8 3.25",
24
+ style: {
25
+ animation: "rs-icon-rotate 1s linear infinite",
26
+ transformOrigin: "center center"
27
+ }
28
+ })));
29
+ LoadingIcon16.displayName = 'LoadingIcon16';
30
+ const LoadingIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
31
+ viewBox: "0 0 20 20"
32
+ }, props, {
33
+ ref: ref
34
+ }), /*#__PURE__*/React.createElement("path", {
35
+ d: "M10 4a6 6 0 1 0 5.92 5.012 1 1 0 0 1 1.972-.326Q18 9.329 18 10a8 8 0 1 1-6.686-7.892 1 1 0 0 1-.326 1.973A6 6 0 0 0 10 4",
36
+ style: {
37
+ animation: "rs-icon-rotate 1s linear infinite",
38
+ transformOrigin: "center center"
39
+ }
40
+ })));
41
+ LoadingIcon20.displayName = 'LoadingIcon20';
42
+ const LoadingIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
43
+ viewBox: "0 0 24 24"
44
+ }, props, {
45
+ ref: ref
46
+ }), /*#__PURE__*/React.createElement("path", {
47
+ d: "M12 6a6 6 0 1 0 5.92 5.012 1.5 1.5 0 0 1 2.959-.49q.12.724.121 1.478a9 9 0 1 1-7.522-8.879 1.5 1.5 0 0 1-.49 2.96Q12.508 6 12 6",
48
+ style: {
49
+ animation: "rs-icon-rotate 1s linear infinite",
50
+ transformOrigin: "center center"
51
+ }
52
+ })));
53
+ LoadingIcon24.displayName = 'LoadingIcon24';
54
+ const LoadingIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
55
+ viewBox: "0 0 28 28"
56
+ }, props, {
57
+ ref: ref
58
+ }), /*#__PURE__*/React.createElement("path", {
59
+ d: "M14 6.5a7.5 7.5 0 1 0 7.399 6.265 1.5 1.5 0 0 1 2.96-.49q.14.844.141 1.725c0 5.799-4.701 10.5-10.5 10.5S3.5 19.799 3.5 14 8.201 3.5 14 3.5q.813 0 1.595.12a1.5 1.5 0 0 1-.453 2.966A7.6 7.6 0 0 0 14 6.5",
60
+ style: {
61
+ animation: "rs-icon-rotate 1s linear infinite",
62
+ transformOrigin: "center center"
63
+ }
64
+ })));
65
+ LoadingIcon28.displayName = 'LoadingIcon28';
12
66
  const LoadingIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
13
67
  let {
14
68
  theme,
15
- size,
69
+ size: sizeFromProps = "m",
16
70
  className,
71
+ style,
72
+ ['data-render-all-sizes']: renderAllSizes = false,
17
73
  ...props
18
74
  } = _ref;
19
- return /*#__PURE__*/React.createElement("svg", _extends({
20
- viewBox: "0 0 24 24"
21
- }, props, {
22
- className: cn(styles.icon, styles[theme], sizeStyles[size], className),
23
- ref: ref
24
- }), /*#__PURE__*/React.createElement("g", {
25
- style: {
26
- animation: "rs-icon-rotate 1s linear infinite",
27
- transformOrigin: "center center"
28
- }
29
- }, /*#__PURE__*/React.createElement("path", {
30
- opacity: 0.2,
31
- d: "M12 2c5.523 0 10 4.477 10 10h-2a8 8 0 00-8-8V2z"
32
- }), /*#__PURE__*/React.createElement("path", {
33
- 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"
34
- })));
75
+ const size = sizeFromProps in Size ? sizeFromProps : "m";
76
+ const mainProps = { ...props,
77
+ className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
78
+ style: renderAllSizes ? {
79
+ '--rs-icon-ar-width': 28,
80
+ '--rs-icon-ar-height': 28,
81
+ ...style
82
+ } : style,
83
+ ref
84
+ };
85
+
86
+ if (renderAllSizes) {
87
+ return /*#__PURE__*/React.createElement("svg", _extends({
88
+ viewBox: "0 0 28 28"
89
+ }, mainProps), /*#__PURE__*/React.createElement(LoadingIcon16, {
90
+ className: styles.variant16
91
+ }), /*#__PURE__*/React.createElement(LoadingIcon20, {
92
+ className: styles.variant20
93
+ }), /*#__PURE__*/React.createElement(LoadingIcon24, {
94
+ className: styles.variant24
95
+ }), /*#__PURE__*/React.createElement(LoadingIcon28, {
96
+ className: styles.variant28
97
+ }));
98
+ }
99
+
100
+ if (size === Size['xs']) {
101
+ return /*#__PURE__*/React.createElement(LoadingIcon16, mainProps);
102
+ }
103
+
104
+ if (size === Size['s']) {
105
+ return /*#__PURE__*/React.createElement(LoadingIcon20, mainProps);
106
+ }
107
+
108
+ if (size === Size['m']) {
109
+ return /*#__PURE__*/React.createElement(LoadingIcon24, mainProps);
110
+ }
111
+
112
+ return /*#__PURE__*/React.createElement(LoadingIcon28, mainProps);
35
113
  });
114
+ LoadingIcon.displayName = 'LoadingIcon';
36
115
  LoadingIcon.propTypes = {
37
116
  className: PropTypes.string,
38
117
  theme: PropTypes.oneOf(["light", "dark"]),
39
- size: PropTypes.oneOf(["xs", "s", "m", "l"])
40
- };
41
- LoadingIcon.defaultProps = {
42
- size: "m"
118
+ size: PropTypes.oneOf(["xs", "s", "m", "l"]),
119
+ 'data-render-all-sizes': PropTypes.bool,
120
+ style: PropTypes.object
43
121
  };
44
- export { LoadingIcon as default };
122
+ export { Size, LoadingIcon as default };
package/lib/button.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
2
2
  import React, { useState, useRef, cloneElement } from 'react';
3
- import cn from 'classnames';
4
3
  import PropTypes from 'prop-types';
4
+ import cn from 'classnames';
5
5
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
6
  import { useResizeObserver } from '@rescui/use-resize-observer';
7
7
  import LoadingIcon from './_virtual/loading.js';
@@ -90,11 +90,15 @@ const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comple
90
90
 
91
91
  if ( /*#__PURE__*/React.isValidElement(icon) && busy) {
92
92
  iconSlot = /*#__PURE__*/React.createElement(LoadingIcon, {
93
- className: styles.icon
93
+ className: styles.icon,
94
+ "data-render-all-sizes": true
94
95
  });
95
96
  } else if ( /*#__PURE__*/React.isValidElement(icon)) {
97
+ var _icon$props;
98
+
96
99
  iconSlot = /*#__PURE__*/cloneElement(icon, {
97
- className: cn(icon.props.className, styles.icon)
100
+ className: cn((_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.className, styles.icon),
101
+ 'data-render-all-sizes': true
98
102
  });
99
103
  }
100
104
 
package/lib/button.p.module.css.js CHANGED
@@ -1,34 +1,34 @@
1
1
  var styles = {
2
- "light": "_light_xd7td5_6",
3
- "dark": "_dark_xd7td5_9",
4
- "flatRight": "_flatRight_xd7td5_13",
5
- "flatLeft": "_flatLeft_xd7td5_16",
6
- "sizeXs": "_sizeXs_xd7td5_20",
7
- "sizeS": "_sizeS_xd7td5_23",
8
- "sizeM": "_sizeM_xd7td5_26",
9
- "sizeL": "_sizeL_xd7td5_29",
10
- "modeClassic": "_modeClassic_xd7td5_33",
11
- "modeRock": "_modeRock_xd7td5_36",
12
- "modeTransparent": "_modeTransparent_xd7td5_39",
13
- "modeOutline": "_modeOutline_xd7td5_42",
14
- "modeClear": "_modeClear_xd7td5_45",
15
- "alignIconLeft": "_alignIconLeft_xd7td5_49",
16
- "alignIconLeftEdge": "_alignIconLeftEdge_xd7td5_52",
17
- "alignIconRight": "_alignIconRight_xd7td5_55",
18
- "alignIconRightEdge": "_alignIconRightEdge_xd7td5_58",
19
- "main": "_main_xd7td5_62",
20
- "disabled": "_disabled_xd7td5_139",
21
- "busy": "_busy_xd7td5_149",
22
- "busyOverlay": "_busyOverlay_xd7td5_153",
23
- "icon": "_icon_xd7td5_188",
24
- "allowMultiline": "_allowMultiline_xd7td5_203",
25
- "content": "_content_xd7td5_207",
26
- "multiline": "_multiline_xd7td5_211",
27
- "withoutText": "_withoutText_xd7td5_215",
28
- "busyIcon": "_busyIcon_xd7td5_220",
29
- "shiftedLeft": "_shiftedLeft_xd7td5_241",
30
- "shiftedRight": "_shiftedRight_xd7td5_244",
31
- "shiftedTop": "_shiftedTop_xd7td5_247",
32
- "shiftedBottom": "_shiftedBottom_xd7td5_250"
2
+ "light": "_light_1k623te_6",
3
+ "dark": "_dark_1k623te_9",
4
+ "flatRight": "_flatRight_1k623te_13",
5
+ "flatLeft": "_flatLeft_1k623te_16",
6
+ "sizeXs": "_sizeXs_1k623te_20",
7
+ "sizeS": "_sizeS_1k623te_23",
8
+ "sizeM": "_sizeM_1k623te_26",
9
+ "sizeL": "_sizeL_1k623te_29",
10
+ "modeClassic": "_modeClassic_1k623te_33",
11
+ "modeRock": "_modeRock_1k623te_36",
12
+ "modeTransparent": "_modeTransparent_1k623te_39",
13
+ "modeOutline": "_modeOutline_1k623te_42",
14
+ "modeClear": "_modeClear_1k623te_45",
15
+ "alignIconLeft": "_alignIconLeft_1k623te_49",
16
+ "alignIconLeftEdge": "_alignIconLeftEdge_1k623te_52",
17
+ "alignIconRight": "_alignIconRight_1k623te_55",
18
+ "alignIconRightEdge": "_alignIconRightEdge_1k623te_58",
19
+ "main": "_main_1k623te_62",
20
+ "disabled": "_disabled_1k623te_139",
21
+ "busy": "_busy_1k623te_149",
22
+ "busyOverlay": "_busyOverlay_1k623te_153",
23
+ "icon": "_icon_1k623te_188",
24
+ "allowMultiline": "_allowMultiline_1k623te_203",
25
+ "content": "_content_1k623te_207",
26
+ "multiline": "_multiline_1k623te_211",
27
+ "withoutText": "_withoutText_1k623te_215",
28
+ "busyIcon": "_busyIcon_1k623te_220",
29
+ "shiftedLeft": "_shiftedLeft_1k623te_241",
30
+ "shiftedRight": "_shiftedRight_1k623te_244",
31
+ "shiftedTop": "_shiftedTop_1k623te_247",
32
+ "shiftedBottom": "_shiftedBottom_1k623te_250"
33
33
  };
34
34
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_gxmcf_4{
1
+ ._icon_oeje7x_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_gxmcf_4{
11
+ ._icon_oeje7x_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_gxmcf_4{
20
+ ._icon_oeje7x_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_gxmcf_4{
28
+ ._icon_oeje7x_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_gxmcf_14{
35
+ ._sizeXS_oeje7x_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_gxmcf_18{
38
+ ._sizeS_oeje7x_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_gxmcf_22{
41
+ ._sizeM_oeje7x_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_gxmcf_26{
44
+ ._sizeL_oeje7x_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_gxmcf_30{
47
+ ._light_oeje7x_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_gxmcf_34{
51
+ ._dark_oeje7x_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
  }
@@ -60,25 +60,61 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._light_xd7td5_6{
63
+ ._allVariants_oeje7x_48{
64
+ aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
+ container:rs-icon / size;
66
+ }
67
+ ._variant16_oeje7x_53,
68
+ ._variant20_oeje7x_54,
69
+ ._variant24_oeje7x_55{
70
+ display:none;
71
+ }
72
+ ._variant28_oeje7x_58{
73
+ display:block;
74
+ }
75
+ @container rs-icon (max-height: 24px){
76
+ ._variant24_oeje7x_55{
77
+ display:block;
78
+ }
79
+ ._variant28_oeje7x_58{
80
+ display:none;
81
+ }
82
+ }
83
+ @container rs-icon (max-height: 20px){
84
+ ._variant20_oeje7x_54{
85
+ display:block;
86
+ }
87
+ ._variant24_oeje7x_55{
88
+ display:none;
89
+ }
90
+ }
91
+ @container rs-icon (max-height: 16px){
92
+ ._variant16_oeje7x_53{
93
+ display:block;
94
+ }
95
+ ._variant20_oeje7x_54{
96
+ display:none;
97
+ }
98
+ }
99
+ ._light_1k623te_6{
64
100
  --rs-theme-dark:0;
65
101
  }
66
- ._dark_xd7td5_9{
102
+ ._dark_1k623te_9{
67
103
  --rs-theme-dark:1;
68
104
  }
69
- ._flatRight_xd7td5_13{
105
+ ._flatRight_1k623te_13{
70
106
  --_rs-button-top-right-border-radius-or-initial:0px;
71
107
  --_rs-button-bottom-right-border-radius-or-initial:0px;
72
108
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
73
109
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
74
110
  }
75
- ._flatLeft_xd7td5_16{
111
+ ._flatLeft_1k623te_16{
76
112
  --_rs-button-top-left-border-radius-or-initial:0px;
77
113
  --_rs-button-bottom-left-border-radius-or-initial:0px;
78
114
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
79
115
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
80
116
  }
81
- ._sizeXs_xd7td5_20{
117
+ ._sizeXs_1k623te_20{
82
118
  --_rs-button-border-radius-base:var(
83
119
  --rs-button-xs-border-radius,
84
120
  var(--rs-button-border-radius, 4px)
@@ -93,7 +129,7 @@
93
129
  --_rs-button-icon-size:16px;
94
130
  --_rs-button-icon-offset:4px;
95
131
  }
96
- ._sizeXs_xd7td5_20 [data-rs-internal='button__content']{
132
+ ._sizeXs_1k623te_20 [data-rs-internal='button__content']{
97
133
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
98
134
  --_rs-typography-text-transform:initial;
99
135
  --_rs-typography-font-variant-numeric:initial;
@@ -127,7 +163,7 @@
127
163
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
128
164
  --_rs-typography-link-border-bottom-width-from-text:1px;
129
165
  }
130
- ._sizeS_xd7td5_23{
166
+ ._sizeS_1k623te_23{
131
167
  --_rs-button-border-radius-base:var(
132
168
  --rs-button-s-border-radius,
133
169
  var(--rs-button-border-radius, 16px)
@@ -142,7 +178,7 @@
142
178
  --_rs-button-icon-size:20px;
143
179
  --_rs-button-icon-offset:8px;
144
180
  }
145
- ._sizeS_xd7td5_23 [data-rs-internal='button__content']{
181
+ ._sizeS_1k623te_23 [data-rs-internal='button__content']{
146
182
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
147
183
  --_rs-typography-text-transform:initial;
148
184
  --_rs-typography-font-variant-numeric:initial;
@@ -176,7 +212,7 @@
176
212
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
177
213
  --_rs-typography-link-border-bottom-width-from-text:1px;
178
214
  }
179
- ._sizeM_xd7td5_26{
215
+ ._sizeM_1k623te_26{
180
216
  --_rs-button-border-radius-base:var(
181
217
  --rs-button-m-border-radius,
182
218
  var(--rs-button-border-radius, 20px)
@@ -191,7 +227,7 @@
191
227
  --_rs-button-icon-size:24px;
192
228
  --_rs-button-icon-offset:8px;
193
229
  }
194
- ._sizeM_xd7td5_26 [data-rs-internal='button__content']{
230
+ ._sizeM_1k623te_26 [data-rs-internal='button__content']{
195
231
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
196
232
  --_rs-typography-text-transform:initial;
197
233
  --_rs-typography-font-variant-numeric:initial;
@@ -229,11 +265,11 @@
229
265
  --_rs-typography-link-border-bottom-width-from-text:1px;
230
266
  }
231
267
  @media screen and (max-width: 640px){
232
- ._sizeM_xd7td5_26 [data-rs-internal='button__content']{
268
+ ._sizeM_1k623te_26 [data-rs-internal='button__content']{
233
269
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
234
270
  }
235
271
  }
236
- ._sizeL_xd7td5_29{
272
+ ._sizeL_1k623te_29{
237
273
  --_rs-button-border-radius-base:var(
238
274
  --rs-button-l-border-radius,
239
275
  var(--rs-button-border-radius, 26px)
@@ -248,7 +284,7 @@
248
284
  --_rs-button-icon-size:28px;
249
285
  --_rs-button-icon-offset:16px;
250
286
  }
251
- ._sizeL_xd7td5_29 [data-rs-internal='button__content']{
287
+ ._sizeL_1k623te_29 [data-rs-internal='button__content']{
252
288
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
253
289
  --_rs-typography-text-transform:initial;
254
290
  --_rs-typography-font-variant-numeric:initial;
@@ -286,11 +322,11 @@
286
322
  --_rs-typography-link-border-bottom-width-from-text:1px;
287
323
  }
288
324
  @media screen and (max-width: 640px){
289
- ._sizeL_xd7td5_29 [data-rs-internal='button__content']{
325
+ ._sizeL_1k623te_29 [data-rs-internal='button__content']{
290
326
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
291
327
  }
292
328
  }
293
- ._modeClassic_xd7td5_33{
329
+ ._modeClassic_1k623te_33{
294
330
  --_rs-button-inner-border-display:none;
295
331
  --_rs-button-color:rgb(
296
332
  calc(255 - var(--rs-button-flip-text-color, 0)*230),
@@ -306,7 +342,7 @@
306
342
  --_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);
307
343
  --_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);
308
344
  }
309
- ._modeRock_xd7td5_36{
345
+ ._modeRock_1k623te_36{
310
346
  --_rs-button-inner-border-display:none;
311
347
  --_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));
312
348
  --_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));
@@ -319,7 +355,7 @@
319
355
  --_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);
320
356
  --_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);
321
357
  }
322
- ._modeTransparent_xd7td5_39{
358
+ ._modeTransparent_1k623te_39{
323
359
  --_rs-button-inner-border-display:none;
324
360
  --_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));
325
361
  --_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);
@@ -331,7 +367,7 @@
331
367
  --_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);
332
368
  --_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);
333
369
  }
334
- ._modeOutline_xd7td5_42{
370
+ ._modeOutline_1k623te_42{
335
371
  --_rs-button-inner-border-display:block;
336
372
  --_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));
337
373
  --_rs-button-background:transparent;
@@ -343,7 +379,7 @@
343
379
  --_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);
344
380
  --_rs-button-disabled-background:transparent;
345
381
  }
346
- ._modeClear_xd7td5_45{
382
+ ._modeClear_1k623te_45{
347
383
  --_rs-button-inner-border-display:none;
348
384
  --_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));
349
385
  --_rs-button-background:transparent;
@@ -355,23 +391,23 @@
355
391
  --_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);
356
392
  --_rs-button-disabled-background:transparent;
357
393
  }
358
- ._alignIconLeft_xd7td5_49{
394
+ ._alignIconLeft_1k623te_49{
359
395
  --_rs-button-icon-flex-direction:row;
360
396
  --_rs-button-content-grow:0;
361
397
  }
362
- ._alignIconLeftEdge_xd7td5_52{
398
+ ._alignIconLeftEdge_1k623te_52{
363
399
  --_rs-button-icon-flex-direction:row;
364
400
  --_rs-button-content-grow:1;
365
401
  }
366
- ._alignIconRight_xd7td5_55{
402
+ ._alignIconRight_1k623te_55{
367
403
  --_rs-button-icon-flex-direction:row-reverse;
368
404
  --_rs-button-content-grow:0;
369
405
  }
370
- ._alignIconRightEdge_xd7td5_58{
406
+ ._alignIconRightEdge_1k623te_58{
371
407
  --_rs-button-icon-flex-direction:row-reverse;
372
408
  --_rs-button-content-grow:1;
373
409
  }
374
- ._main_xd7td5_62{
410
+ ._main_1k623te_62{
375
411
  --_rs-theme-dark:var(
376
412
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
377
413
  var(--rs-theme-dark, 0)
@@ -381,7 +417,7 @@
381
417
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
382
418
  }
383
419
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
384
- ._main_xd7td5_62{
420
+ ._main_1k623te_62{
385
421
  --_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)));
386
422
  --_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)));
387
423
  --_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)));
@@ -390,7 +426,7 @@
390
426
  }
391
427
  }
392
428
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
393
- ._main_xd7td5_62{
429
+ ._main_1k623te_62{
394
430
  --_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);
395
431
  --_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));
396
432
  --_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));
@@ -398,7 +434,7 @@
398
434
  --_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));
399
435
  }
400
436
  }
401
- ._main_xd7td5_62 {
437
+ ._main_1k623te_62 {
402
438
  --_rs-button-background-final:var(
403
439
  --_rs-button-background-from-state-active-focus-visible-no-hover,
404
440
  var(
@@ -479,19 +515,19 @@
479
515
  -moz-column-gap:var(--_rs-button-icon-offset);
480
516
  column-gap:var(--_rs-button-icon-offset);
481
517
  }
482
- ._main_xd7td5_62:hover,
483
- ._main_xd7td5_62:focus,
484
- ._main_xd7td5_62:active{
518
+ ._main_1k623te_62:hover,
519
+ ._main_1k623te_62:focus,
520
+ ._main_1k623te_62:active{
485
521
  outline:none;
486
522
 
487
523
  text-decoration:none;
488
524
  }
489
- ._main_xd7td5_62:focus{
525
+ ._main_1k623te_62:focus{
490
526
  color:var(--_rs-button-color);
491
527
  background:var(--_rs-button-background-final);
492
528
  }
493
529
  @media (hover: hover){
494
- ._main_xd7td5_62:hover{
530
+ ._main_1k623te_62:hover{
495
531
  --_rs-button-border-inner-color:rgba(
496
532
  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),
497
533
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -499,24 +535,24 @@
499
535
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
500
536
  }
501
537
  }
502
- ._main_xd7td5_62:active{
538
+ ._main_1k623te_62:active{
503
539
  --_rs-button-border-inner-width:2px;
504
540
  --_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));
505
541
  --_rs-button-background-from-state-active:var(
506
542
  --_rs-button-active-background
507
543
  );
508
544
  }
509
- ._main_xd7td5_62:focus[data-focus-method='key']{
545
+ ._main_1k623te_62:focus[data-focus-method='key']{
510
546
  --_rs-button-box-shadow-from-state-focus-visible:var(
511
547
  --_rs-color-primary-t-dim
512
548
  ) 0 0 0 4px;
513
549
  }
514
- ._main_xd7td5_62:active:not(:hover):focus[data-focus-method='key']{
550
+ ._main_1k623te_62:active:not(:hover):focus[data-focus-method='key']{
515
551
  --_rs-button-background-from-state-active-focus-visible-no-hover:var(
516
552
  --_rs-button-active-focus-visible-no-hover-background
517
553
  );
518
554
  }
519
- ._main_xd7td5_62._disabled_xd7td5_139{
555
+ ._main_1k623te_62._disabled_1k623te_139{
520
556
  --_rs-button-border-inner-color:rgba(
521
557
  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),
522
558
  0.2
@@ -525,26 +561,26 @@
525
561
  color:var(--_rs-button-disabled-color);
526
562
  background:var(--_rs-button-disabled-background);
527
563
  }
528
- ._main_xd7td5_62._busy_xd7td5_149{
564
+ ._main_1k623te_62._busy_1k623te_149{
529
565
  pointer-events:none;
530
566
  }
531
- ._main_xd7td5_62._busyOverlay_xd7td5_153{
567
+ ._main_1k623te_62._busyOverlay_1k623te_153{
532
568
  display:inline-flex;
533
569
  justify-content:center;
534
570
  align-items:center;
535
571
  }
536
- ._main_xd7td5_62._busyOverlay_xd7td5_153,
537
- ._main_xd7td5_62._busyOverlay_xd7td5_153:hover,
538
- ._main_xd7td5_62._busyOverlay_xd7td5_153:active,
539
- ._main_xd7td5_62._busyOverlay_xd7td5_153._disabled_xd7td5_139,
540
- ._main_xd7td5_62._busyOverlay_xd7td5_153:focus{
572
+ ._main_1k623te_62._busyOverlay_1k623te_153,
573
+ ._main_1k623te_62._busyOverlay_1k623te_153:hover,
574
+ ._main_1k623te_62._busyOverlay_1k623te_153:active,
575
+ ._main_1k623te_62._busyOverlay_1k623te_153._disabled_1k623te_139,
576
+ ._main_1k623te_62._busyOverlay_1k623te_153:focus{
541
577
  -webkit-user-select:none;
542
578
  -moz-user-select:none;
543
579
  user-select:none;
544
580
 
545
581
  color:transparent;
546
582
  }
547
- ._main_xd7td5_62::before{
583
+ ._main_1k623te_62::before{
548
584
  position:absolute;
549
585
  top:0;
550
586
  right:0;
@@ -561,7 +597,7 @@
561
597
 
562
598
  transition:border-color 100ms;
563
599
  }
564
- ._main_xd7td5_62 ._icon_xd7td5_188{
600
+ ._main_1k623te_62 ._icon_1k623te_188{
565
601
  flex:0 0 auto;
566
602
 
567
603
  width:auto;
@@ -570,36 +606,36 @@
570
606
  margin:0;
571
607
  fill:currentColor;
572
608
  }
573
- ._disabled_xd7td5_139{
609
+ ._disabled_1k623te_139{
574
610
  pointer-events:none;
575
611
  }
576
- ._allowMultiline_xd7td5_203{
612
+ ._allowMultiline_1k623te_203{
577
613
  white-space:normal;
578
614
  }
579
- ._content_xd7td5_207{
615
+ ._content_1k623te_207{
580
616
  flex:var(--_rs-button-content-grow) 1 auto;
581
617
  }
582
- ._multiline_xd7td5_211{
618
+ ._multiline_1k623te_211{
583
619
  border-radius:var(--_rs-button-multiline-border-radius);
584
620
  }
585
- ._withoutText_xd7td5_215{
621
+ ._withoutText_1k623te_215{
586
622
  --_rs-button-horizontal-real-padding:var(--_rs-button-icon-only-padding);
587
623
  --_rs-button-vertical-real-padding:var(--_rs-button-icon-only-padding);
588
624
  }
589
- ._busyIcon_xd7td5_220{
625
+ ._busyIcon_1k623te_220{
590
626
  position:absolute;
591
627
  top:50%;
592
628
  left:50%;
593
629
 
594
630
  transform:translate(-50%, -50%);
595
631
  }
596
- ._main_xd7td5_62 ._busyIcon_xd7td5_220{
632
+ ._main_1k623te_62 ._busyIcon_1k623te_220{
597
633
  color:var(--_rs-button-color);
598
634
  }
599
- ._main_xd7td5_62._disabled_xd7td5_139 ._busyIcon_xd7td5_220{
635
+ ._main_1k623te_62._disabled_1k623te_139 ._busyIcon_1k623te_220{
600
636
  color:var(--_rs-button-disabled-color);
601
637
  }
602
- ._content_xd7td5_207{
638
+ ._content_1k623te_207{
603
639
  letter-spacing:var(
604
640
  --rs-text-base-letter-spacing,
605
641
  var(--_rs-typography-letter-spacing)
@@ -612,15 +648,15 @@
612
648
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
613
649
  font-feature-settings:'kern', 'liga', 'calt';
614
650
  }
615
- ._shiftedLeft_xd7td5_241{
651
+ ._shiftedLeft_1k623te_241{
616
652
  margin-left:calc(var(--_rs-button-horizontal-real-padding)*-1);
617
653
  }
618
- ._shiftedRight_xd7td5_244{
654
+ ._shiftedRight_1k623te_244{
619
655
  margin-right:calc(var(--_rs-button-horizontal-real-padding)*-1);
620
656
  }
621
- ._shiftedTop_xd7td5_247{
657
+ ._shiftedTop_1k623te_247{
622
658
  margin-top:calc(var(--_rs-button-vertical-real-padding)*-1);
623
659
  }
624
- ._shiftedBottom_xd7td5_250{
660
+ ._shiftedBottom_1k623te_250{
625
661
  margin-bottom:calc(var(--_rs-button-vertical-real-padding)*-1);
626
662
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.21.1",
3
+ "version": "0.21.3",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/use-resize-observer": "^0.2.6",
19
+ "@rescui/use-resize-observer": "^0.2.7",
20
20
  "classnames": "^2.2.6"
21
21
  },
22
22
  "peerDependencies": {
@@ -25,10 +25,10 @@
25
25
  "react": ">=16.8.0 <19"
26
26
  },
27
27
  "devDependencies": {
28
- "@rescui/colors": "^0.2.7",
29
- "@rescui/icons": "^0.16.16",
30
- "@rescui/scripts": "^0.3.5",
31
- "@rescui/typography": "^0.22.0",
28
+ "@rescui/colors": "^0.2.8",
29
+ "@rescui/icons": "^1.0.0",
30
+ "@rescui/scripts": "^0.4.0",
31
+ "@rescui/typography": "^0.23.1",
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": "71902b643c074d76514a26a5ee2feecc75d41347"
40
+ "gitHead": "f521c66dfa4124f1cac34821bf8531a0f9596bcc"
41
41
  }