@rescui/button 0.20.3-RUI-230-Update-icons-tree-shaking-ec76507a.10 → 0.20.3-RUI-230-Update-icons-0bd4e5fc.9

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 (9) hide show
  1. package/lib/_virtual/index.css.js +7 -7
  2. package/lib/button.d.ts +7 -2
  3. package/lib/button.js +9 -3
  4. package/lib/button.p.module.css.js +31 -29
  5. package/lib/index.css +80 -65
  6. package/lib/public-api.p.css +14 -0
  7. package/lib/public-api.pcss +14 -0
  8. package/package.json +7 -6
  9. /package/lib/_virtual/{pure.js → loading.js} +0 -0
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
2
- "icon": "_icon_xt44n8_4",
3
- "sizeXS": "_sizeXS_xt44n8_14",
4
- "sizeS": "_sizeS_xt44n8_18",
5
- "sizeM": "_sizeM_xt44n8_22",
6
- "sizeL": "_sizeL_xt44n8_26",
7
- "light": "_light_xt44n8_30",
8
- "dark": "_dark_xt44n8_34"
2
+ "icon": "_icon_7axx9h_4",
3
+ "sizeXS": "_sizeXS_7axx9h_14",
4
+ "sizeS": "_sizeS_7axx9h_18",
5
+ "sizeM": "_sizeM_7axx9h_22",
6
+ "sizeL": "_sizeL_7axx9h_26",
7
+ "light": "_light_7axx9h_30",
8
+ "dark": "_dark_7axx9h_34"
9
9
  };
10
10
  export { styles as default };
package/lib/button.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare type ButtonSize = 'l' | 'm' | 's' | 'xs';
5
5
  export declare type ButtonModeGeneric = 'classic' | 'rock' | 'transparent' | 'outline';
6
6
  export declare type ButtonModeClear = 'clear';
7
7
  export declare type ButtonType = 'button' | 'submit' | 'reset';
8
- export declare type ButtonIconPosition = 'left' | 'right';
8
+ export declare type ButtonIconPosition = 'left' | 'left-edge' | 'right' | 'right-edge';
9
9
  export declare type ButtonFlat = 'left' | 'right';
10
10
  export declare type ButtonShifted = 'all' | ButtonShiftedSide | ButtonShiftedSide[];
11
11
  declare type ButtonIntrinsicProps = {
@@ -43,7 +43,12 @@ declare type ButtonIntrinsicProps = {
43
43
  shifted?: ButtonShifted;
44
44
  /** Additional icon */
45
45
  icon?: React.ReactNode;
46
- /** **Works only if the `icon` is present.** Additional icon position. */
46
+ /**
47
+ * **Works only if the `icon` is present.**
48
+ * Additional icon position.
49
+ * `-edge` variants are useful for aligning icons between multiple buttons in a column (some of which may be multiline).
50
+ * @see [RUI-228](https://youtrack.jetbrains.com/issue/RUI-228/Fix-button-icon-size-and-position)
51
+ * */
47
52
  iconPosition?: ButtonIconPosition;
48
53
  /** Url path for using component as a link. **Transform a Button into a link (`a` element).** */
49
54
  href?: string;
package/lib/button.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import PropTypes from 'prop-types';
5
5
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
6
  import { useResizeObserver } from '@rescui/use-resize-observer';
7
- import LoadingIcon from './_virtual/pure.js';
7
+ import LoadingIcon from './_virtual/loading.js';
8
8
  import styles from './button.p.module.css.js';
9
9
 
10
10
  const calculateShifted = (shiftedProp, side) => shiftedProp === 'all' || shiftedProp === side || Array.isArray(shiftedProp) && _includesInstanceProperty(shiftedProp).call(shiftedProp, side);
@@ -22,6 +22,12 @@ const SIZE_STYLES = {
22
22
  m: styles.sizeM,
23
23
  l: styles.sizeL
24
24
  };
25
+ const ICON_POSITION_STYLES = {
26
+ left: styles.alignIconLeft,
27
+ 'left-edge': styles.alignIconLeftEdge,
28
+ right: styles.alignIconRight,
29
+ 'right-edge': styles.alignIconRightEdge
30
+ };
25
31
  const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
26
32
  (_ref, forwardedRef) => {
27
33
  let {
@@ -96,7 +102,7 @@ const Button = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comple
96
102
  const buttonSharedProps = {
97
103
  href,
98
104
  disabled,
99
- className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, styles[theme], {
105
+ className: cn(styles.main, MODE_STYLES[mode], SIZE_STYLES[size], ICON_POSITION_STYLES[iconPosition] ?? ICON_POSITION_STYLES.left, styles[theme], {
100
106
  [styles.disabled]: disabled,
101
107
  [styles.flatLeft]: flat === 'left',
102
108
  [styles.flatRight]: flat === 'right',
@@ -192,7 +198,7 @@ Button.propTypes = {
192
198
  return null;
193
199
  }),
194
200
  icon: PropTypes.node,
195
- iconPosition: PropTypes.oneOf(['left', 'right']),
201
+ iconPosition: PropTypes.oneOf(['left', 'left-edge', 'right', 'right-edge']),
196
202
  size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
197
203
  mode: validateAdditional(PropTypes.oneOf(['classic', 'rock', 'transparent', 'outline', 'clear']), props => {
198
204
  if (typeof props.shifted !== 'undefined' && props.mode !== 'clear') {
package/lib/button.p.module.css.js CHANGED
@@ -1,32 +1,34 @@
1
1
  var styles = {
2
- "light": "_light_19vj65j_6",
3
- "dark": "_dark_19vj65j_9",
4
- "flatRight": "_flatRight_19vj65j_13",
5
- "flatLeft": "_flatLeft_19vj65j_16",
6
- "sizeXs": "_sizeXs_19vj65j_20",
7
- "sizeS": "_sizeS_19vj65j_23",
8
- "sizeM": "_sizeM_19vj65j_26",
9
- "sizeL": "_sizeL_19vj65j_29",
10
- "modeClassic": "_modeClassic_19vj65j_33",
11
- "modeRock": "_modeRock_19vj65j_36",
12
- "modeTransparent": "_modeTransparent_19vj65j_39",
13
- "modeOutline": "_modeOutline_19vj65j_42",
14
- "modeClear": "_modeClear_19vj65j_45",
15
- "alignIconLeft": "_alignIconLeft_19vj65j_49",
16
- "alignIconRight": "_alignIconRight_19vj65j_52",
17
- "main": "_main_19vj65j_56",
18
- "disabled": "_disabled_19vj65j_133",
19
- "busy": "_busy_19vj65j_143",
20
- "busyOverlay": "_busyOverlay_19vj65j_147",
21
- "icon": "_icon_19vj65j_182",
22
- "allowMultiline": "_allowMultiline_19vj65j_195",
23
- "multiline": "_multiline_19vj65j_199",
24
- "withoutText": "_withoutText_19vj65j_203",
25
- "busyIcon": "_busyIcon_19vj65j_208",
26
- "content": "_content_19vj65j_224",
27
- "shiftedLeft": "_shiftedLeft_19vj65j_229",
28
- "shiftedRight": "_shiftedRight_19vj65j_232",
29
- "shiftedTop": "_shiftedTop_19vj65j_235",
30
- "shiftedBottom": "_shiftedBottom_19vj65j_238"
2
+ "light": "_light_1rya2mr_6",
3
+ "dark": "_dark_1rya2mr_9",
4
+ "flatRight": "_flatRight_1rya2mr_13",
5
+ "flatLeft": "_flatLeft_1rya2mr_16",
6
+ "sizeXs": "_sizeXs_1rya2mr_20",
7
+ "sizeS": "_sizeS_1rya2mr_23",
8
+ "sizeM": "_sizeM_1rya2mr_26",
9
+ "sizeL": "_sizeL_1rya2mr_29",
10
+ "modeClassic": "_modeClassic_1rya2mr_33",
11
+ "modeRock": "_modeRock_1rya2mr_36",
12
+ "modeTransparent": "_modeTransparent_1rya2mr_39",
13
+ "modeOutline": "_modeOutline_1rya2mr_42",
14
+ "modeClear": "_modeClear_1rya2mr_45",
15
+ "alignIconLeft": "_alignIconLeft_1rya2mr_49",
16
+ "alignIconLeftEdge": "_alignIconLeftEdge_1rya2mr_52",
17
+ "alignIconRight": "_alignIconRight_1rya2mr_55",
18
+ "alignIconRightEdge": "_alignIconRightEdge_1rya2mr_58",
19
+ "main": "_main_1rya2mr_62",
20
+ "disabled": "_disabled_1rya2mr_139",
21
+ "busy": "_busy_1rya2mr_149",
22
+ "busyOverlay": "_busyOverlay_1rya2mr_153",
23
+ "icon": "_icon_1rya2mr_188",
24
+ "allowMultiline": "_allowMultiline_1rya2mr_203",
25
+ "content": "_content_1rya2mr_207",
26
+ "multiline": "_multiline_1rya2mr_211",
27
+ "withoutText": "_withoutText_1rya2mr_215",
28
+ "busyIcon": "_busyIcon_1rya2mr_220",
29
+ "shiftedLeft": "_shiftedLeft_1rya2mr_241",
30
+ "shiftedRight": "_shiftedRight_1rya2mr_244",
31
+ "shiftedTop": "_shiftedTop_1rya2mr_247",
32
+ "shiftedBottom": "_shiftedBottom_1rya2mr_250"
31
33
  };
32
34
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_xt44n8_4{
1
+ ._icon_7axx9h_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_xt44n8_4{
11
+ ._icon_7axx9h_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_xt44n8_4{
20
+ ._icon_7axx9h_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_xt44n8_4{
28
+ ._icon_7axx9h_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_xt44n8_14{
35
+ ._sizeXS_7axx9h_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_xt44n8_18{
38
+ ._sizeS_7axx9h_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_xt44n8_22{
41
+ ._sizeM_7axx9h_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_xt44n8_26{
44
+ ._sizeL_7axx9h_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_xt44n8_30{
47
+ ._light_7axx9h_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_xt44n8_34{
51
+ ._dark_7axx9h_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,25 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._light_19vj65j_6{
63
+ ._light_1rya2mr_6{
64
64
  --rs-theme-dark:0;
65
65
  }
66
- ._dark_19vj65j_9{
66
+ ._dark_1rya2mr_9{
67
67
  --rs-theme-dark:1;
68
68
  }
69
- ._flatRight_19vj65j_13{
69
+ ._flatRight_1rya2mr_13{
70
70
  --_rs-button-top-right-border-radius-or-initial:0px;
71
71
  --_rs-button-bottom-right-border-radius-or-initial:0px;
72
72
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
73
73
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
74
74
  }
75
- ._flatLeft_19vj65j_16{
75
+ ._flatLeft_1rya2mr_16{
76
76
  --_rs-button-top-left-border-radius-or-initial:0px;
77
77
  --_rs-button-bottom-left-border-radius-or-initial:0px;
78
78
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
79
79
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
80
80
  }
81
- ._sizeXs_19vj65j_20{
81
+ ._sizeXs_1rya2mr_20{
82
82
  --_rs-button-border-radius-base:var(
83
83
  --rs-button-xs-border-radius,
84
84
  var(--rs-button-border-radius, 4px)
@@ -93,7 +93,7 @@
93
93
  --_rs-button-icon-size:16px;
94
94
  --_rs-button-icon-offset:4px;
95
95
  }
96
- ._sizeXs_19vj65j_20 [data-rs-internal='button__content']{
96
+ ._sizeXs_1rya2mr_20 [data-rs-internal='button__content']{
97
97
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
98
98
  --_rs-typography-text-transform:initial;
99
99
  --_rs-typography-font-variant-numeric:initial;
@@ -127,7 +127,7 @@
127
127
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
128
128
  --_rs-typography-link-border-bottom-width-from-text:1px;
129
129
  }
130
- ._sizeS_19vj65j_23{
130
+ ._sizeS_1rya2mr_23{
131
131
  --_rs-button-border-radius-base:var(
132
132
  --rs-button-s-border-radius,
133
133
  var(--rs-button-border-radius, 16px)
@@ -142,7 +142,7 @@
142
142
  --_rs-button-icon-size:20px;
143
143
  --_rs-button-icon-offset:8px;
144
144
  }
145
- ._sizeS_19vj65j_23 [data-rs-internal='button__content']{
145
+ ._sizeS_1rya2mr_23 [data-rs-internal='button__content']{
146
146
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
147
147
  --_rs-typography-text-transform:initial;
148
148
  --_rs-typography-font-variant-numeric:initial;
@@ -176,7 +176,7 @@
176
176
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
177
177
  --_rs-typography-link-border-bottom-width-from-text:1px;
178
178
  }
179
- ._sizeM_19vj65j_26{
179
+ ._sizeM_1rya2mr_26{
180
180
  --_rs-button-border-radius-base:var(
181
181
  --rs-button-m-border-radius,
182
182
  var(--rs-button-border-radius, 20px)
@@ -191,7 +191,7 @@
191
191
  --_rs-button-icon-size:24px;
192
192
  --_rs-button-icon-offset:8px;
193
193
  }
194
- ._sizeM_19vj65j_26 [data-rs-internal='button__content']{
194
+ ._sizeM_1rya2mr_26 [data-rs-internal='button__content']{
195
195
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
196
196
  --_rs-typography-text-transform:initial;
197
197
  --_rs-typography-font-variant-numeric:initial;
@@ -226,11 +226,11 @@
226
226
  --_rs-typography-link-border-bottom-width-from-text:1px;
227
227
  }
228
228
  @media screen and (max-width: 640px){
229
- ._sizeM_19vj65j_26 [data-rs-internal='button__content']{
229
+ ._sizeM_1rya2mr_26 [data-rs-internal='button__content']{
230
230
  --_rs-typography-list-li-margin-top-from-text:12px;
231
231
  }
232
232
  }
233
- ._sizeL_19vj65j_29{
233
+ ._sizeL_1rya2mr_29{
234
234
  --_rs-button-border-radius-base:var(
235
235
  --rs-button-l-border-radius,
236
236
  var(--rs-button-border-radius, 26px)
@@ -245,7 +245,7 @@
245
245
  --_rs-button-icon-size:28px;
246
246
  --_rs-button-icon-offset:16px;
247
247
  }
248
- ._sizeL_19vj65j_29 [data-rs-internal='button__content']{
248
+ ._sizeL_1rya2mr_29 [data-rs-internal='button__content']{
249
249
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
250
250
  --_rs-typography-text-transform:initial;
251
251
  --_rs-typography-font-variant-numeric:initial;
@@ -280,11 +280,11 @@
280
280
  --_rs-typography-link-border-bottom-width-from-text:1px;
281
281
  }
282
282
  @media screen and (max-width: 640px){
283
- ._sizeL_19vj65j_29 [data-rs-internal='button__content']{
283
+ ._sizeL_1rya2mr_29 [data-rs-internal='button__content']{
284
284
  --_rs-typography-list-li-margin-top-from-text:16px;
285
285
  }
286
286
  }
287
- ._modeClassic_19vj65j_33{
287
+ ._modeClassic_1rya2mr_33{
288
288
  --_rs-button-inner-border-display:none;
289
289
  --_rs-button-color:rgb(
290
290
  calc(255 - var(--rs-button-flip-text-color, 0)*230),
@@ -300,7 +300,7 @@
300
300
  --_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);
301
301
  --_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);
302
302
  }
303
- ._modeRock_19vj65j_36{
303
+ ._modeRock_1rya2mr_36{
304
304
  --_rs-button-inner-border-display:none;
305
305
  --_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));
306
306
  --_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));
@@ -313,7 +313,7 @@
313
313
  --_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);
314
314
  --_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);
315
315
  }
316
- ._modeTransparent_19vj65j_39{
316
+ ._modeTransparent_1rya2mr_39{
317
317
  --_rs-button-inner-border-display:none;
318
318
  --_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));
319
319
  --_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);
@@ -325,7 +325,7 @@
325
325
  --_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);
326
326
  --_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);
327
327
  }
328
- ._modeOutline_19vj65j_42{
328
+ ._modeOutline_1rya2mr_42{
329
329
  --_rs-button-inner-border-display:block;
330
330
  --_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));
331
331
  --_rs-button-background:transparent;
@@ -337,7 +337,7 @@
337
337
  --_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);
338
338
  --_rs-button-disabled-background:transparent;
339
339
  }
340
- ._modeClear_19vj65j_45{
340
+ ._modeClear_1rya2mr_45{
341
341
  --_rs-button-inner-border-display:none;
342
342
  --_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));
343
343
  --_rs-button-background:transparent;
@@ -349,13 +349,23 @@
349
349
  --_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);
350
350
  --_rs-button-disabled-background:transparent;
351
351
  }
352
- ._alignIconLeft_19vj65j_49{
352
+ ._alignIconLeft_1rya2mr_49{
353
353
  --_rs-button-icon-flex-direction:row;
354
+ --_rs-button-content-grow:0;
354
355
  }
355
- ._alignIconRight_19vj65j_52{
356
+ ._alignIconLeftEdge_1rya2mr_52{
357
+ --_rs-button-icon-flex-direction:row;
358
+ --_rs-button-content-grow:1;
359
+ }
360
+ ._alignIconRight_1rya2mr_55{
361
+ --_rs-button-icon-flex-direction:row-reverse;
362
+ --_rs-button-content-grow:0;
363
+ }
364
+ ._alignIconRightEdge_1rya2mr_58{
356
365
  --_rs-button-icon-flex-direction:row-reverse;
366
+ --_rs-button-content-grow:1;
357
367
  }
358
- ._main_19vj65j_56{
368
+ ._main_1rya2mr_62{
359
369
  --_rs-theme-dark:var(
360
370
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
361
371
  var(--rs-theme-dark, 0)
@@ -365,7 +375,7 @@
365
375
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
366
376
  }
367
377
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
368
- ._main_19vj65j_56{
378
+ ._main_1rya2mr_62{
369
379
  --_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)));
370
380
  --_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)));
371
381
  --_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)));
@@ -374,7 +384,7 @@
374
384
  }
375
385
  }
376
386
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
377
- ._main_19vj65j_56{
387
+ ._main_1rya2mr_62{
378
388
  --_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);
379
389
  --_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));
380
390
  --_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));
@@ -382,7 +392,7 @@
382
392
  --_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));
383
393
  }
384
394
  }
385
- ._main_19vj65j_56 {
395
+ ._main_1rya2mr_62 {
386
396
  --_rs-button-background-final:var(
387
397
  --_rs-button-background-from-state-active-focus-visible-no-hover,
388
398
  var(
@@ -463,19 +473,19 @@
463
473
  -moz-column-gap:var(--_rs-button-icon-offset);
464
474
  column-gap:var(--_rs-button-icon-offset);
465
475
  }
466
- ._main_19vj65j_56:hover,
467
- ._main_19vj65j_56:focus,
468
- ._main_19vj65j_56:active{
476
+ ._main_1rya2mr_62:hover,
477
+ ._main_1rya2mr_62:focus,
478
+ ._main_1rya2mr_62:active{
469
479
  outline:none;
470
480
 
471
481
  text-decoration:none;
472
482
  }
473
- ._main_19vj65j_56:focus{
483
+ ._main_1rya2mr_62:focus{
474
484
  color:var(--_rs-button-color);
475
485
  background:var(--_rs-button-background-final);
476
486
  }
477
487
  @media (hover: hover){
478
- ._main_19vj65j_56:hover{
488
+ ._main_1rya2mr_62:hover{
479
489
  --_rs-button-border-inner-color:rgba(
480
490
  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
491
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -483,24 +493,24 @@
483
493
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
484
494
  }
485
495
  }
486
- ._main_19vj65j_56:active{
496
+ ._main_1rya2mr_62:active{
487
497
  --_rs-button-border-inner-width:2px;
488
498
  --_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));
489
499
  --_rs-button-background-from-state-active:var(
490
500
  --_rs-button-active-background
491
501
  );
492
502
  }
493
- ._main_19vj65j_56:focus[data-focus-method='key']{
503
+ ._main_1rya2mr_62:focus[data-focus-method='key']{
494
504
  --_rs-button-box-shadow-from-state-focus-visible:var(
495
505
  --_rs-color-primary-t-dim
496
506
  ) 0 0 0 4px;
497
507
  }
498
- ._main_19vj65j_56:active:not(:hover):focus[data-focus-method='key']{
508
+ ._main_1rya2mr_62:active:not(:hover):focus[data-focus-method='key']{
499
509
  --_rs-button-background-from-state-active-focus-visible-no-hover:var(
500
510
  --_rs-button-active-focus-visible-no-hover-background
501
511
  );
502
512
  }
503
- ._main_19vj65j_56._disabled_19vj65j_133{
513
+ ._main_1rya2mr_62._disabled_1rya2mr_139{
504
514
  --_rs-button-border-inner-color:rgba(
505
515
  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),
506
516
  0.2
@@ -509,26 +519,26 @@
509
519
  color:var(--_rs-button-disabled-color);
510
520
  background:var(--_rs-button-disabled-background);
511
521
  }
512
- ._main_19vj65j_56._busy_19vj65j_143{
522
+ ._main_1rya2mr_62._busy_1rya2mr_149{
513
523
  pointer-events:none;
514
524
  }
515
- ._main_19vj65j_56._busyOverlay_19vj65j_147{
525
+ ._main_1rya2mr_62._busyOverlay_1rya2mr_153{
516
526
  display:inline-flex;
517
527
  justify-content:center;
518
528
  align-items:center;
519
529
  }
520
- ._main_19vj65j_56._busyOverlay_19vj65j_147,
521
- ._main_19vj65j_56._busyOverlay_19vj65j_147:hover,
522
- ._main_19vj65j_56._busyOverlay_19vj65j_147:active,
523
- ._main_19vj65j_56._busyOverlay_19vj65j_147._disabled_19vj65j_133,
524
- ._main_19vj65j_56._busyOverlay_19vj65j_147:focus{
530
+ ._main_1rya2mr_62._busyOverlay_1rya2mr_153,
531
+ ._main_1rya2mr_62._busyOverlay_1rya2mr_153:hover,
532
+ ._main_1rya2mr_62._busyOverlay_1rya2mr_153:active,
533
+ ._main_1rya2mr_62._busyOverlay_1rya2mr_153._disabled_1rya2mr_139,
534
+ ._main_1rya2mr_62._busyOverlay_1rya2mr_153:focus{
525
535
  -webkit-user-select:none;
526
536
  -moz-user-select:none;
527
537
  user-select:none;
528
538
 
529
539
  color:transparent;
530
540
  }
531
- ._main_19vj65j_56::before{
541
+ ._main_1rya2mr_62::before{
532
542
  position:absolute;
533
543
  top:0;
534
544
  right:0;
@@ -545,40 +555,45 @@
545
555
 
546
556
  transition:border-color 100ms;
547
557
  }
548
- ._main_19vj65j_56 ._icon_19vj65j_182{
558
+ ._main_1rya2mr_62 ._icon_1rya2mr_188{
559
+ flex:0 0 auto;
560
+
549
561
  width:auto;
550
562
  height:var(--_rs-button-icon-size);
551
563
 
552
564
  margin:0;
553
565
  fill:currentColor;
554
566
  }
555
- ._disabled_19vj65j_133{
567
+ ._disabled_1rya2mr_139{
556
568
  pointer-events:none;
557
569
  }
558
- ._allowMultiline_19vj65j_195{
570
+ ._allowMultiline_1rya2mr_203{
559
571
  white-space:normal;
560
572
  }
561
- ._multiline_19vj65j_199{
573
+ ._content_1rya2mr_207{
574
+ flex:var(--_rs-button-content-grow) 1 auto;
575
+ }
576
+ ._multiline_1rya2mr_211{
562
577
  border-radius:var(--_rs-button-multiline-border-radius);
563
578
  }
564
- ._withoutText_19vj65j_203{
579
+ ._withoutText_1rya2mr_215{
565
580
  --_rs-button-horizontal-real-padding:var(--_rs-button-icon-only-padding);
566
581
  --_rs-button-vertical-real-padding:var(--_rs-button-icon-only-padding);
567
582
  }
568
- ._busyIcon_19vj65j_208{
583
+ ._busyIcon_1rya2mr_220{
569
584
  position:absolute;
570
585
  top:50%;
571
586
  left:50%;
572
587
 
573
588
  transform:translate(-50%, -50%);
574
589
  }
575
- ._main_19vj65j_56 ._busyIcon_19vj65j_208{
590
+ ._main_1rya2mr_62 ._busyIcon_1rya2mr_220{
576
591
  color:var(--_rs-button-color);
577
592
  }
578
- ._main_19vj65j_56._disabled_19vj65j_133 ._busyIcon_19vj65j_208{
593
+ ._main_1rya2mr_62._disabled_1rya2mr_139 ._busyIcon_1rya2mr_220{
579
594
  color:var(--_rs-button-disabled-color);
580
595
  }
581
- ._content_19vj65j_224{
596
+ ._content_1rya2mr_207{
582
597
  letter-spacing:var(
583
598
  --rs-text-base-letter-spacing,
584
599
  var(--_rs-typography-letter-spacing)
@@ -591,15 +606,15 @@
591
606
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
592
607
  font-feature-settings:'kern', 'liga', 'calt';
593
608
  }
594
- ._shiftedLeft_19vj65j_229{
609
+ ._shiftedLeft_1rya2mr_241{
595
610
  margin-left:calc(var(--_rs-button-horizontal-real-padding)*-1);
596
611
  }
597
- ._shiftedRight_19vj65j_232{
612
+ ._shiftedRight_1rya2mr_244{
598
613
  margin-right:calc(var(--_rs-button-horizontal-real-padding)*-1);
599
614
  }
600
- ._shiftedTop_19vj65j_235{
615
+ ._shiftedTop_1rya2mr_247{
601
616
  margin-top:calc(var(--_rs-button-vertical-real-padding)*-1);
602
617
  }
603
- ._shiftedBottom_19vj65j_238{
618
+ ._shiftedBottom_1rya2mr_250{
604
619
  margin-bottom:calc(var(--_rs-button-vertical-real-padding)*-1);
605
620
  }
package/lib/public-api.p.css CHANGED
@@ -290,11 +290,25 @@
290
290
  @define-mixin rs-button-icon-left{
291
291
  &:not(html){
292
292
  --_rs-button-icon-flex-direction:row;
293
+ --_rs-button-content-grow:0;
294
+ }
295
+ }
296
+ @define-mixin rs-button-icon-left-edge{
297
+ &:not(html){
298
+ --_rs-button-icon-flex-direction:row;
299
+ --_rs-button-content-grow:1;
293
300
  }
294
301
  }
295
302
  @define-mixin rs-button-icon-right{
296
303
  &:not(html){
297
304
  --_rs-button-icon-flex-direction:row-reverse;
305
+ --_rs-button-content-grow:0;
306
+ }
307
+ }
308
+ @define-mixin rs-button-icon-right-edge{
309
+ &:not(html){
310
+ --_rs-button-icon-flex-direction:row-reverse;
311
+ --_rs-button-content-grow:1;
298
312
  }
299
313
  }
300
314
  @define-mixin rs-button-flat-right{
package/lib/public-api.pcss CHANGED
@@ -290,11 +290,25 @@
290
290
  @define-mixin rs-button-icon-left{
291
291
  &:not(html){
292
292
  --_rs-button-icon-flex-direction:row;
293
+ --_rs-button-content-grow:0;
294
+ }
295
+ }
296
+ @define-mixin rs-button-icon-left-edge{
297
+ &:not(html){
298
+ --_rs-button-icon-flex-direction:row;
299
+ --_rs-button-content-grow:1;
293
300
  }
294
301
  }
295
302
  @define-mixin rs-button-icon-right{
296
303
  &:not(html){
297
304
  --_rs-button-icon-flex-direction:row-reverse;
305
+ --_rs-button-content-grow:0;
306
+ }
307
+ }
308
+ @define-mixin rs-button-icon-right-edge{
309
+ &:not(html){
310
+ --_rs-button-icon-flex-direction:row-reverse;
311
+ --_rs-button-content-grow:1;
298
312
  }
299
313
  }
300
314
  @define-mixin rs-button-flat-right{
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.20.3-RUI-230-Update-icons-tree-shaking-ec76507a.10+ec76507a",
3
+ "version": "0.20.3-RUI-230-Update-icons-0bd4e5fc.9+0bd4e5fc",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "main": "lib/index.js",
8
+ "module": "lib/index.js",
8
9
  "src:main": "src/index.ts",
9
10
  "files": [
10
11
  "lib",
@@ -15,7 +16,7 @@
15
16
  },
16
17
  "dependencies": {
17
18
  "@babel/runtime-corejs3": "^7.26.0",
18
- "@rescui/use-resize-observer": "0.2.6-RUI-230-Update-icons-tree-shaking-ec76507a.34+ec76507a",
19
+ "@rescui/use-resize-observer": "0.2.6-RUI-230-Update-icons-0bd4e5fc.33+0bd4e5fc",
19
20
  "classnames": "^2.2.6"
20
21
  },
21
22
  "peerDependencies": {
@@ -24,10 +25,10 @@
24
25
  "react": ">=16.8.0 <19"
25
26
  },
26
27
  "devDependencies": {
27
- "@rescui/colors": "0.2.7-RUI-230-Update-icons-tree-shaking-ec76507a.34+ec76507a",
28
- "@rescui/icons": "0.16.15-RUI-230-Update-icons-tree-shaking-ec76507a.10+ec76507a",
28
+ "@rescui/colors": "0.2.7-RUI-230-Update-icons-0bd4e5fc.33+0bd4e5fc",
29
+ "@rescui/icons": "0.16.15-RUI-230-Update-icons-0bd4e5fc.9+0bd4e5fc",
29
30
  "@rescui/scripts": "0.3.5",
30
- "@rescui/typography": "0.21.1-RUI-230-Update-icons-tree-shaking-ec76507a.10+ec76507a",
31
+ "@rescui/typography": "0.21.1-RUI-230-Update-icons-0bd4e5fc.9+0bd4e5fc",
31
32
  "@rescui/visual-regression": "0.1.2",
32
33
  "@types/classnames": "^2.2.11"
33
34
  },
@@ -36,5 +37,5 @@
36
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
37
38
  },
38
39
  "nx": {},
39
- "gitHead": "ec76507ad979df68d58a0a414b1ae497975090cd"
40
+ "gitHead": "0bd4e5fc55bc38b4b8a80a5dcbdb036720dc9676"
40
41
  }
/package/lib/_virtual/{pure.js → loading.js} RENAMED
File without changes