@rescui/button 0.24.2 → 0.24.4

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 (7) hide show
  1. package/README.md +3 -1
  2. package/lib/_virtual/index.css.js +12 -12
  3. package/lib/button.p.module.css.js +31 -31
  4. package/lib/index.css +79 -79
  5. package/llm/components/button.md +595 -0
  6. package/llm/index.md +2 -0
  7. package/package.json +7 -6
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
1
  # Button
2
2
 
3
- * [Usage examples](./docs/demo.md)
3
+ ## LLM
4
+
5
+ To get the docs for the LLM, check out [this index](./llm/index.md).
package/lib/_virtual/index.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_1tf5os8_4",
3
- "sizeXS": "_sizeXS_1tf5os8_14",
4
- "sizeS": "_sizeS_1tf5os8_18",
5
- "sizeM": "_sizeM_1tf5os8_22",
6
- "sizeL": "_sizeL_1tf5os8_26",
7
- "light": "_light_1tf5os8_30",
8
- "dark": "_dark_1tf5os8_34",
9
- "allVariants": "_allVariants_1tf5os8_48",
10
- "variant16": "_variant16_1tf5os8_53",
11
- "variant20": "_variant20_1tf5os8_54",
12
- "variant24": "_variant24_1tf5os8_55",
13
- "variant28": "_variant28_1tf5os8_58"
2
+ "icon": "_icon_1usw79t_4",
3
+ "sizeXS": "_sizeXS_1usw79t_14",
4
+ "sizeS": "_sizeS_1usw79t_18",
5
+ "sizeM": "_sizeM_1usw79t_22",
6
+ "sizeL": "_sizeL_1usw79t_26",
7
+ "light": "_light_1usw79t_30",
8
+ "dark": "_dark_1usw79t_34",
9
+ "allVariants": "_allVariants_1usw79t_48",
10
+ "variant16": "_variant16_1usw79t_53",
11
+ "variant20": "_variant20_1usw79t_54",
12
+ "variant24": "_variant24_1usw79t_55",
13
+ "variant28": "_variant28_1usw79t_58"
14
14
  };
15
15
  export { styles as default };
package/lib/button.p.module.css.js CHANGED
@@ -1,34 +1,34 @@
1
1
  var styles = {
2
- "light": "_light_ip4dl4_6",
3
- "dark": "_dark_ip4dl4_9",
4
- "flatRight": "_flatRight_ip4dl4_13",
5
- "flatLeft": "_flatLeft_ip4dl4_16",
6
- "sizeXs": "_sizeXs_ip4dl4_20",
7
- "sizeS": "_sizeS_ip4dl4_23",
8
- "sizeM": "_sizeM_ip4dl4_26",
9
- "sizeL": "_sizeL_ip4dl4_29",
10
- "modeClassic": "_modeClassic_ip4dl4_33",
11
- "modeRock": "_modeRock_ip4dl4_36",
12
- "modeTransparent": "_modeTransparent_ip4dl4_39",
13
- "modeOutline": "_modeOutline_ip4dl4_42",
14
- "modeClear": "_modeClear_ip4dl4_45",
15
- "alignIconLeft": "_alignIconLeft_ip4dl4_49",
16
- "alignIconLeftEdge": "_alignIconLeftEdge_ip4dl4_52",
17
- "alignIconRight": "_alignIconRight_ip4dl4_55",
18
- "alignIconRightEdge": "_alignIconRightEdge_ip4dl4_58",
19
- "main": "_main_ip4dl4_62",
20
- "disabled": "_disabled_ip4dl4_139",
21
- "busy": "_busy_ip4dl4_149",
22
- "busyOverlay": "_busyOverlay_ip4dl4_153",
23
- "icon": "_icon_ip4dl4_188",
24
- "allowMultiline": "_allowMultiline_ip4dl4_203",
25
- "content": "_content_ip4dl4_207",
26
- "multiline": "_multiline_ip4dl4_213",
27
- "withoutText": "_withoutText_ip4dl4_217",
28
- "busyIcon": "_busyIcon_ip4dl4_222",
29
- "shiftedLeft": "_shiftedLeft_ip4dl4_243",
30
- "shiftedRight": "_shiftedRight_ip4dl4_246",
31
- "shiftedTop": "_shiftedTop_ip4dl4_249",
32
- "shiftedBottom": "_shiftedBottom_ip4dl4_252"
2
+ "light": "_light_soyq2x_6",
3
+ "dark": "_dark_soyq2x_9",
4
+ "flatRight": "_flatRight_soyq2x_13",
5
+ "flatLeft": "_flatLeft_soyq2x_16",
6
+ "sizeXs": "_sizeXs_soyq2x_20",
7
+ "sizeS": "_sizeS_soyq2x_23",
8
+ "sizeM": "_sizeM_soyq2x_26",
9
+ "sizeL": "_sizeL_soyq2x_29",
10
+ "modeClassic": "_modeClassic_soyq2x_33",
11
+ "modeRock": "_modeRock_soyq2x_36",
12
+ "modeTransparent": "_modeTransparent_soyq2x_39",
13
+ "modeOutline": "_modeOutline_soyq2x_42",
14
+ "modeClear": "_modeClear_soyq2x_45",
15
+ "alignIconLeft": "_alignIconLeft_soyq2x_49",
16
+ "alignIconLeftEdge": "_alignIconLeftEdge_soyq2x_52",
17
+ "alignIconRight": "_alignIconRight_soyq2x_55",
18
+ "alignIconRightEdge": "_alignIconRightEdge_soyq2x_58",
19
+ "main": "_main_soyq2x_62",
20
+ "disabled": "_disabled_soyq2x_139",
21
+ "busy": "_busy_soyq2x_149",
22
+ "busyOverlay": "_busyOverlay_soyq2x_153",
23
+ "icon": "_icon_soyq2x_188",
24
+ "allowMultiline": "_allowMultiline_soyq2x_203",
25
+ "content": "_content_soyq2x_207",
26
+ "multiline": "_multiline_soyq2x_213",
27
+ "withoutText": "_withoutText_soyq2x_217",
28
+ "busyIcon": "_busyIcon_soyq2x_222",
29
+ "shiftedLeft": "_shiftedLeft_soyq2x_243",
30
+ "shiftedRight": "_shiftedRight_soyq2x_246",
31
+ "shiftedTop": "_shiftedTop_soyq2x_249",
32
+ "shiftedBottom": "_shiftedBottom_soyq2x_252"
33
33
  };
34
34
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_1tf5os8_4{
1
+ ._icon_1usw79t_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_1tf5os8_4{
11
+ ._icon_1usw79t_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_1tf5os8_4{
20
+ ._icon_1usw79t_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_1tf5os8_4{
28
+ ._icon_1usw79t_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:var(--rs-icons-width, auto);
33
33
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
34
  }
35
- ._sizeXS_1tf5os8_14{
35
+ ._sizeXS_1usw79t_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_1tf5os8_18{
38
+ ._sizeS_1usw79t_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_1tf5os8_22{
41
+ ._sizeM_1usw79t_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_1tf5os8_26{
44
+ ._sizeL_1usw79t_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_1tf5os8_30{
47
+ ._light_1usw79t_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_1tf5os8_34{
51
+ ._dark_1usw79t_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,61 +60,61 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_1tf5os8_48{
63
+ ._allVariants_1usw79t_48{
64
64
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
65
  container:rs-icon / size;
66
66
  }
67
- ._variant16_1tf5os8_53,
68
- ._variant20_1tf5os8_54,
69
- ._variant24_1tf5os8_55{
67
+ ._variant16_1usw79t_53,
68
+ ._variant20_1usw79t_54,
69
+ ._variant24_1usw79t_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_1tf5os8_58{
72
+ ._variant28_1usw79t_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_1tf5os8_55{
76
+ ._variant24_1usw79t_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_1tf5os8_58{
79
+ ._variant28_1usw79t_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_1tf5os8_54{
84
+ ._variant20_1usw79t_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_1tf5os8_55{
87
+ ._variant24_1usw79t_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_1tf5os8_53{
92
+ ._variant16_1usw79t_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_1tf5os8_54{
95
+ ._variant20_1usw79t_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._light_ip4dl4_6{
99
+ ._light_soyq2x_6{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._dark_ip4dl4_9{
102
+ ._dark_soyq2x_9{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._flatRight_ip4dl4_13{
105
+ ._flatRight_soyq2x_13{
106
106
  --_rs-button-top-right-border-radius-or-initial:0px;
107
107
  --_rs-button-bottom-right-border-radius-or-initial:0px;
108
108
  --_rs-button-top-right-multiline-border-radius-or-initial:0px;
109
109
  --_rs-button-bottom-right-multiline-border-radius-or-initial:0px;
110
110
  }
111
- ._flatLeft_ip4dl4_16{
111
+ ._flatLeft_soyq2x_16{
112
112
  --_rs-button-top-left-border-radius-or-initial:0px;
113
113
  --_rs-button-bottom-left-border-radius-or-initial:0px;
114
114
  --_rs-button-top-left-multiline-border-radius-or-initial:0px;
115
115
  --_rs-button-bottom-left-multiline-border-radius-or-initial:0px;
116
116
  }
117
- ._sizeXs_ip4dl4_20{
117
+ ._sizeXs_soyq2x_20{
118
118
  --_rs-button-border-radius-base:var(
119
119
  --rs-button-xs-border-radius,
120
120
  var(--rs-button-border-radius, 4px)
@@ -129,7 +129,7 @@
129
129
  --_rs-button-icon-size:16px;
130
130
  --_rs-button-icon-offset:4px;
131
131
  }
132
- ._sizeXs_ip4dl4_20 [data-rs-internal='button__content']{
132
+ ._sizeXs_soyq2x_20 [data-rs-internal='button__content']{
133
133
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
134
134
  --_rs-typography-text-transform:initial;
135
135
  --_rs-typography-font-variant-numeric:initial;
@@ -164,7 +164,7 @@
164
164
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
165
165
  --_rs-typography-link-border-bottom-width-from-text:1px;
166
166
  }
167
- ._sizeS_ip4dl4_23{
167
+ ._sizeS_soyq2x_23{
168
168
  --_rs-button-border-radius-base:var(
169
169
  --rs-button-s-border-radius,
170
170
  var(--rs-button-border-radius, 16px)
@@ -179,7 +179,7 @@
179
179
  --_rs-button-icon-size:20px;
180
180
  --_rs-button-icon-offset:8px;
181
181
  }
182
- ._sizeS_ip4dl4_23 [data-rs-internal='button__content']{
182
+ ._sizeS_soyq2x_23 [data-rs-internal='button__content']{
183
183
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
184
184
  --_rs-typography-text-transform:initial;
185
185
  --_rs-typography-font-variant-numeric:initial;
@@ -214,7 +214,7 @@
214
214
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
215
215
  --_rs-typography-link-border-bottom-width-from-text:1px;
216
216
  }
217
- ._sizeM_ip4dl4_26{
217
+ ._sizeM_soyq2x_26{
218
218
  --_rs-button-border-radius-base:var(
219
219
  --rs-button-m-border-radius,
220
220
  var(--rs-button-border-radius, 20px)
@@ -229,7 +229,7 @@
229
229
  --_rs-button-icon-size:24px;
230
230
  --_rs-button-icon-offset:8px;
231
231
  }
232
- ._sizeM_ip4dl4_26 [data-rs-internal='button__content']{
232
+ ._sizeM_soyq2x_26 [data-rs-internal='button__content']{
233
233
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
234
234
  --_rs-typography-text-transform:initial;
235
235
  --_rs-typography-font-variant-numeric:initial;
@@ -268,11 +268,11 @@
268
268
  --_rs-typography-link-border-bottom-width-from-text:1px;
269
269
  }
270
270
  @media screen and (max-width: 640px){
271
- ._sizeM_ip4dl4_26 [data-rs-internal='button__content']{
271
+ ._sizeM_soyq2x_26 [data-rs-internal='button__content']{
272
272
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
273
273
  }
274
274
  }
275
- ._sizeL_ip4dl4_29{
275
+ ._sizeL_soyq2x_29{
276
276
  --_rs-button-border-radius-base:var(
277
277
  --rs-button-l-border-radius,
278
278
  var(--rs-button-border-radius, 26px)
@@ -287,7 +287,7 @@
287
287
  --_rs-button-icon-size:28px;
288
288
  --_rs-button-icon-offset:16px;
289
289
  }
290
- ._sizeL_ip4dl4_29 [data-rs-internal='button__content']{
290
+ ._sizeL_soyq2x_29 [data-rs-internal='button__content']{
291
291
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
292
292
  --_rs-typography-text-transform:initial;
293
293
  --_rs-typography-font-variant-numeric:initial;
@@ -326,11 +326,11 @@
326
326
  --_rs-typography-link-border-bottom-width-from-text:1px;
327
327
  }
328
328
  @media screen and (max-width: 640px){
329
- ._sizeL_ip4dl4_29 [data-rs-internal='button__content']{
329
+ ._sizeL_soyq2x_29 [data-rs-internal='button__content']{
330
330
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
331
331
  }
332
332
  }
333
- ._modeClassic_ip4dl4_33{
333
+ ._modeClassic_soyq2x_33{
334
334
  --_rs-button-inner-border-display:none;
335
335
  --_rs-button-color:rgb(
336
336
  calc(255 - var(--rs-button-flip-text-color, 0)*230),
@@ -346,7 +346,7 @@
346
346
  --_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);
347
347
  --_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);
348
348
  }
349
- ._modeRock_ip4dl4_36{
349
+ ._modeRock_soyq2x_36{
350
350
  --_rs-button-inner-border-display:none;
351
351
  --_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));
352
352
  --_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));
@@ -359,7 +359,7 @@
359
359
  --_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);
360
360
  --_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);
361
361
  }
362
- ._modeTransparent_ip4dl4_39{
362
+ ._modeTransparent_soyq2x_39{
363
363
  --_rs-button-inner-border-display:none;
364
364
  --_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));
365
365
  --_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);
@@ -371,7 +371,7 @@
371
371
  --_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);
372
372
  --_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);
373
373
  }
374
- ._modeOutline_ip4dl4_42{
374
+ ._modeOutline_soyq2x_42{
375
375
  --_rs-button-inner-border-display:block;
376
376
  --_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));
377
377
  --_rs-button-background:transparent;
@@ -383,7 +383,7 @@
383
383
  --_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);
384
384
  --_rs-button-disabled-background:transparent;
385
385
  }
386
- ._modeClear_ip4dl4_45{
386
+ ._modeClear_soyq2x_45{
387
387
  --_rs-button-inner-border-display:none;
388
388
  --_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));
389
389
  --_rs-button-background:transparent;
@@ -395,23 +395,23 @@
395
395
  --_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);
396
396
  --_rs-button-disabled-background:transparent;
397
397
  }
398
- ._alignIconLeft_ip4dl4_49{
398
+ ._alignIconLeft_soyq2x_49{
399
399
  --_rs-button-icon-flex-direction:row;
400
400
  --_rs-button-content-grow:0;
401
401
  }
402
- ._alignIconLeftEdge_ip4dl4_52{
402
+ ._alignIconLeftEdge_soyq2x_52{
403
403
  --_rs-button-icon-flex-direction:row;
404
404
  --_rs-button-content-grow:1;
405
405
  }
406
- ._alignIconRight_ip4dl4_55{
406
+ ._alignIconRight_soyq2x_55{
407
407
  --_rs-button-icon-flex-direction:row-reverse;
408
408
  --_rs-button-content-grow:0;
409
409
  }
410
- ._alignIconRightEdge_ip4dl4_58{
410
+ ._alignIconRightEdge_soyq2x_58{
411
411
  --_rs-button-icon-flex-direction:row-reverse;
412
412
  --_rs-button-content-grow:1;
413
413
  }
414
- ._main_ip4dl4_62{
414
+ ._main_soyq2x_62{
415
415
  --_rs-theme-dark:var(
416
416
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
417
417
  var(--rs-theme-dark, 0)
@@ -421,7 +421,7 @@
421
421
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
422
422
  }
423
423
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
424
- ._main_ip4dl4_62{
424
+ ._main_soyq2x_62{
425
425
  --_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)));
426
426
  --_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)));
427
427
  --_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)));
@@ -430,7 +430,7 @@
430
430
  }
431
431
  }
432
432
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
433
- ._main_ip4dl4_62{
433
+ ._main_soyq2x_62{
434
434
  --_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);
435
435
  --_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));
436
436
  --_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));
@@ -438,7 +438,7 @@
438
438
  --_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));
439
439
  }
440
440
  }
441
- ._main_ip4dl4_62 {
441
+ ._main_soyq2x_62 {
442
442
  --_rs-button-background-final:var(
443
443
  --_rs-button-background-from-state-active-focus-visible-no-hover,
444
444
  var(
@@ -519,19 +519,19 @@
519
519
  -moz-column-gap:var(--_rs-button-icon-offset);
520
520
  column-gap:var(--_rs-button-icon-offset);
521
521
  }
522
- ._main_ip4dl4_62:hover,
523
- ._main_ip4dl4_62:focus,
524
- ._main_ip4dl4_62:active{
522
+ ._main_soyq2x_62:hover,
523
+ ._main_soyq2x_62:focus,
524
+ ._main_soyq2x_62:active{
525
525
  outline:none;
526
526
 
527
527
  text-decoration:none;
528
528
  }
529
- ._main_ip4dl4_62:focus{
529
+ ._main_soyq2x_62:focus{
530
530
  color:var(--_rs-button-color);
531
531
  background:var(--_rs-button-background-final);
532
532
  }
533
533
  @media (hover: hover){
534
- ._main_ip4dl4_62:hover{
534
+ ._main_soyq2x_62:hover{
535
535
  --_rs-button-border-inner-color:rgba(
536
536
  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),
537
537
  calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -539,24 +539,24 @@
539
539
  --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
540
540
  }
541
541
  }
542
- ._main_ip4dl4_62:active{
542
+ ._main_soyq2x_62:active{
543
543
  --_rs-button-border-inner-width:2px;
544
544
  --_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));
545
545
  --_rs-button-background-from-state-active:var(
546
546
  --_rs-button-active-background
547
547
  );
548
548
  }
549
- ._main_ip4dl4_62:focus[data-focus-method='key']{
549
+ ._main_soyq2x_62:focus[data-focus-method='key']{
550
550
  --_rs-button-box-shadow-from-state-focus-visible:var(
551
551
  --_rs-color-primary-t-dim
552
552
  ) 0 0 0 4px;
553
553
  }
554
- ._main_ip4dl4_62:active:not(:hover):focus[data-focus-method='key']{
554
+ ._main_soyq2x_62:active:not(:hover):focus[data-focus-method='key']{
555
555
  --_rs-button-background-from-state-active-focus-visible-no-hover:var(
556
556
  --_rs-button-active-focus-visible-no-hover-background
557
557
  );
558
558
  }
559
- ._main_ip4dl4_62._disabled_ip4dl4_139{
559
+ ._main_soyq2x_62._disabled_soyq2x_139{
560
560
  --_rs-button-border-inner-color:rgba(
561
561
  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),
562
562
  0.2
@@ -565,26 +565,26 @@
565
565
  color:var(--_rs-button-disabled-color);
566
566
  background:var(--_rs-button-disabled-background);
567
567
  }
568
- ._main_ip4dl4_62._busy_ip4dl4_149{
568
+ ._main_soyq2x_62._busy_soyq2x_149{
569
569
  pointer-events:none;
570
570
  }
571
- ._main_ip4dl4_62._busyOverlay_ip4dl4_153{
571
+ ._main_soyq2x_62._busyOverlay_soyq2x_153{
572
572
  display:inline-flex;
573
573
  justify-content:center;
574
574
  align-items:center;
575
575
  }
576
- ._main_ip4dl4_62._busyOverlay_ip4dl4_153,
577
- ._main_ip4dl4_62._busyOverlay_ip4dl4_153:hover,
578
- ._main_ip4dl4_62._busyOverlay_ip4dl4_153:active,
579
- ._main_ip4dl4_62._busyOverlay_ip4dl4_153._disabled_ip4dl4_139,
580
- ._main_ip4dl4_62._busyOverlay_ip4dl4_153:focus{
576
+ ._main_soyq2x_62._busyOverlay_soyq2x_153,
577
+ ._main_soyq2x_62._busyOverlay_soyq2x_153:hover,
578
+ ._main_soyq2x_62._busyOverlay_soyq2x_153:active,
579
+ ._main_soyq2x_62._busyOverlay_soyq2x_153._disabled_soyq2x_139,
580
+ ._main_soyq2x_62._busyOverlay_soyq2x_153:focus{
581
581
  -webkit-user-select:none;
582
582
  -moz-user-select:none;
583
583
  user-select:none;
584
584
 
585
585
  color:transparent;
586
586
  }
587
- ._main_ip4dl4_62::before{
587
+ ._main_soyq2x_62::before{
588
588
  position:absolute;
589
589
  top:0;
590
590
  right:0;
@@ -601,7 +601,7 @@
601
601
 
602
602
  transition:border-color 100ms var(--rs-transition-function, ease);
603
603
  }
604
- ._main_ip4dl4_62 ._icon_ip4dl4_188{
604
+ ._main_soyq2x_62 ._icon_soyq2x_188{
605
605
  flex:0 0 auto;
606
606
 
607
607
  width:auto;
@@ -610,38 +610,38 @@
610
610
  margin:0;
611
611
  fill:currentColor;
612
612
  }
613
- ._disabled_ip4dl4_139{
613
+ ._disabled_soyq2x_139{
614
614
  pointer-events:none;
615
615
  }
616
- ._allowMultiline_ip4dl4_203{
616
+ ._allowMultiline_soyq2x_203{
617
617
  white-space:normal;
618
618
  }
619
- ._content_ip4dl4_207{
619
+ ._content_soyq2x_207{
620
620
  flex:var(--_rs-button-content-grow) 1 auto;
621
621
 
622
622
  min-width:0;
623
623
  }
624
- ._multiline_ip4dl4_213{
624
+ ._multiline_soyq2x_213{
625
625
  border-radius:var(--_rs-button-multiline-border-radius);
626
626
  }
627
- ._withoutText_ip4dl4_217{
627
+ ._withoutText_soyq2x_217{
628
628
  --_rs-button-horizontal-real-padding:var(--_rs-button-icon-only-padding);
629
629
  --_rs-button-vertical-real-padding:var(--_rs-button-icon-only-padding);
630
630
  }
631
- ._busyIcon_ip4dl4_222{
631
+ ._busyIcon_soyq2x_222{
632
632
  position:absolute;
633
633
  top:50%;
634
634
  left:50%;
635
635
 
636
636
  transform:translate(-50%, -50%);
637
637
  }
638
- ._main_ip4dl4_62 ._busyIcon_ip4dl4_222{
638
+ ._main_soyq2x_62 ._busyIcon_soyq2x_222{
639
639
  color:var(--_rs-button-color);
640
640
  }
641
- ._main_ip4dl4_62._disabled_ip4dl4_139 ._busyIcon_ip4dl4_222{
641
+ ._main_soyq2x_62._disabled_soyq2x_139 ._busyIcon_soyq2x_222{
642
642
  color:var(--_rs-button-disabled-color);
643
643
  }
644
- ._content_ip4dl4_207{
644
+ ._content_soyq2x_207{
645
645
  letter-spacing:var(
646
646
  --rs-text-base-letter-spacing,
647
647
  var(--_rs-typography-letter-spacing)
@@ -654,15 +654,15 @@
654
654
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
655
655
  font-feature-settings:'kern', 'liga', 'calt';
656
656
  }
657
- ._shiftedLeft_ip4dl4_243{
657
+ ._shiftedLeft_soyq2x_243{
658
658
  margin-left:calc(var(--_rs-button-horizontal-real-padding)*-1);
659
659
  }
660
- ._shiftedRight_ip4dl4_246{
660
+ ._shiftedRight_soyq2x_246{
661
661
  margin-right:calc(var(--_rs-button-horizontal-real-padding)*-1);
662
662
  }
663
- ._shiftedTop_ip4dl4_249{
663
+ ._shiftedTop_soyq2x_249{
664
664
  margin-top:calc(var(--_rs-button-vertical-real-padding)*-1);
665
665
  }
666
- ._shiftedBottom_ip4dl4_252{
666
+ ._shiftedBottom_soyq2x_252{
667
667
  margin-bottom:calc(var(--_rs-button-vertical-real-padding)*-1);
668
668
  }
package/llm/components/button.md ADDED
@@ -0,0 +1,595 @@
1
+ # Button
2
+
3
+ Buttons allow users to perform actions with a single click.
4
+
5
+ ## Usage
6
+
7
+ ### Features showcase
8
+
9
+ ### Basic usage
10
+
11
+ ```tsx
12
+ import { Button } from '@rescui/button';
13
+
14
+ <Button onClick={() => alert('Boom💥😀')}>Button</Button>;
15
+ ```
16
+
17
+ ### Change mode and size
18
+
19
+ ```tsx
20
+ import { Button } from '@rescui/button';
21
+
22
+ <Button mode="rock" size="s">
23
+ Button
24
+ </Button>;
25
+ ```
26
+
27
+ ### Add icon
28
+
29
+ ```tsx
30
+ import { Button } from '@rescui/button';
31
+ import { DownloadOutlineIcon } from '@rescui/icons';
32
+
33
+ <div className="rs-docs-row">
34
+ <span className="rs-docs-col">
35
+ <Button icon={<DownloadOutlineIcon />}>Icon on the left</Button>
36
+ </span>
37
+ <span className="rs-docs-col">
38
+ <Button icon={<DownloadOutlineIcon />} iconPosition="right">
39
+ Icon on the right
40
+ </Button>
41
+ </span>
42
+ </div>;
43
+ ```
44
+
45
+ ### Push icon to the edge
46
+
47
+ Use this to align icons in a column of buttons, ensuring consistency even when some buttons have multiple lines of text.
48
+
49
+ ```tsx
50
+ import { Button } from '@rescui/button';
51
+ import { AiIcon } from '@rescui/icons';
52
+
53
+ const Demo = () => {
54
+ return (
55
+ <div className="container">
56
+ <div>
57
+ <Button className="btn" iconPosition="left-edge" allowMultiline icon={<AiIcon />}>
58
+ Short Button
59
+ </Button>
60
+ </div>
61
+ <div>
62
+ <Button className="btn" iconPosition="left-edge" allowMultiline icon={<AiIcon />}>
63
+ Some long content of my beautiful Button
64
+ </Button>
65
+ </div>
66
+ </div>
67
+ );
68
+ };
69
+
70
+ render(<Demo />);
71
+ ```
72
+
73
+ ```postcss attached
74
+ .container {
75
+ display: flex;
76
+ overflow: auto;
77
+ flex-direction: column;
78
+
79
+ width: 350px;
80
+ padding: 24px;
81
+
82
+ border: 1px solid black;
83
+
84
+ resize: horizontal;
85
+ gap: 12px;
86
+ }
87
+
88
+ .btn {
89
+ width: 100%;
90
+ }
91
+ ```
92
+
93
+ ### Customizing primary color
94
+
95
+ To get the correct primary color variables bundle, use the [primary color tool](/design/colors/primary-tool/).
96
+
97
+ ```tsx
98
+ import { Button } from '@rescui/button';
99
+
100
+ render(
101
+ <div>
102
+ <Button>Default primary button</Button>
103
+ <div className="pink-primary" style={{ marginTop: 12 }}>
104
+ <Button>Pink primary button</Button>
105
+ </div>
106
+ <div style={{ marginTop: 12 }}>
107
+ <Button className="green-primary">Green primary button</Button>
108
+ </div>
109
+ </div>
110
+ );
111
+ ```
112
+
113
+ ```postcss
114
+ .pink-primary {
115
+ --rs-color-primary-light-theme: rgb(223, 36, 119);
116
+ --rs-color-primary-t-dim-light-theme: rgba(223, 36, 119, 0.8);
117
+ --rs-color-primary-t-fog-light-theme: rgba(223, 36, 119, 0.2);
118
+
119
+ --rs-color-primary-dark-theme: rgb(223, 36, 119);
120
+ --rs-color-primary-t-dim-dark-theme: rgba(223, 36, 119, 0.8);
121
+ --rs-color-primary-t-fog-dark-theme: rgba(223, 36, 119, 0.2);
122
+ }
123
+
124
+ .green-primary {
125
+ --rs-color-primary-light-theme: rgb(8, 132, 132);
126
+ --rs-color-primary-t-dim-light-theme: rgba(8, 132, 132, 0.8);
127
+ --rs-color-primary-t-fog-light-theme: rgba(8, 132, 132, 0.2);
128
+
129
+ --rs-color-primary-dark-theme: rgb(8, 132, 132);
130
+ --rs-color-primary-t-dim-dark-theme: rgba(8, 132, 132, 0.8);
131
+ --rs-color-primary-t-fog-dark-theme: rgba(8, 132, 132, 0.2);
132
+ }
133
+ ```
134
+
135
+ ## CSS API
136
+
137
+ #### `Button` mixins
138
+
139
+ | Mixin name | Details |
140
+ | --- | --- |
141
+ | `rs-button-size-xs` | prop: `size`<br><br>value: `"xs"` |
142
+ | `rs-button-size-s` | prop: `size`<br><br>value: `"s"` |
143
+ | `rs-button-size-m` | prop: `size`<br><br>value: `"m"` |
144
+ | `rs-button-size-l` | prop: `size`<br><br>value: `"l"` |
145
+ | `rs-button-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
146
+ | `rs-button-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
147
+ | `rs-button-mode-transparent` | prop: `mode`<br><br>value: `"transparent"` |
148
+ | `rs-button-mode-outline` | prop: `mode`<br><br>value: `"outline"` |
149
+ | `rs-button-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
150
+ | `rs-button-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
151
+ | `rs-button-icon-left-edge` | prop: `iconPosition`<br><br>value: `"left-edge"` |
152
+ | `rs-button-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
153
+ | `rs-button-icon-right-edge` | prop: `iconPosition`<br><br>value: `"right-edge"` |
154
+ | `rs-button-flat-right` | prop: `flat`<br><br>value: `"right"`<br><br>Flatten `right` side of a button |
155
+ | `rs-button-flat-left` | prop: `flat`<br><br>value: `"left"`<br><br>Flatten `left` side of a button |
156
+ | `rs-button-state-hover` | prop: `css-state`<br><br>value: `":hover"` |
157
+ | `rs-button-state-active` | prop: `css-state`<br><br>value: `":active"` |
158
+ | `rs-button-state-focus-visible` | prop: `css-state`<br><br>value: `":focus-visible"` |
159
+ | `rs-button-state-active-focus-visible-no-hover` | prop: `css-state`<br><br>value: `":active:focus-visible:not(:hover)"` |
160
+
161
+ ##### Demo
162
+
163
+ Use the controls to see the effect at different viewport widths.
164
+
165
+ ```tsx
166
+ import { Button } from '@rescui/button';
167
+ import { PersonIcon } from '@rescui/icons';
168
+
169
+ const MyButton = () => {
170
+ return (
171
+ <Button className="my-button" icon={<PersonIcon />}>
172
+ Button
173
+ </Button>
174
+ );
175
+ };
176
+
177
+ render(<MyButton />);
178
+ ```
179
+
180
+ ```postcss
181
+ @import '@rescui/button/lib/public-api.p.css';
182
+
183
+ .my-button {
184
+ @media (max-width: 640px) {
185
+ @mixin rs-button-size-l;
186
+ @mixin rs-button-mode-rock;
187
+ @mixin rs-button-icon-right;
188
+ }
189
+ @media (max-width: 500px) {
190
+ @mixin rs-button-size-xs;
191
+ @mixin rs-button-mode-outline;
192
+ @mixin rs-button-icon-left;
193
+ }
194
+ }
195
+ ```
196
+
197
+ #### CSS Vars
198
+
199
+ | Variable | Syntax | Description |
200
+ | --- | --- | --- |
201
+ | `--rs-button-flip-text-color` | `0 \| 1` | The flag whenever the text color should be inverted |
202
+ | `--rs-button-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button |
203
+ | `--rs-button-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button |
204
+ | `--rs-button-l-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button for `l` size |
205
+ | `--rs-button-l-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button for `l` size |
206
+ | `--rs-button-m-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button for `m` size |
207
+ | `--rs-button-m-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button for `m` size |
208
+ | `--rs-button-s-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button for `s` size |
209
+ | `--rs-button-s-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button for `s` size |
210
+ | `--rs-button-xs-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the single-line button for `xs` size |
211
+ | `--rs-button-xs-multiline-border-radius` | [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | Border-radius of the multi-line button for `xs` size |
212
+
213
+ ##### Demo
214
+
215
+ ```tsx
216
+ import { Button } from '@rescui/button';
217
+
218
+ <div className="button-customization-example-wrapper-1 rs-docs-row">
219
+ <div className="rs-docs-col">
220
+ <Button size="l">Button L</Button>
221
+ </div>
222
+ <div className="rs-docs-col">
223
+ <Button size="m">Button M</Button>
224
+ </div>
225
+ <div className="rs-docs-col">
226
+ <Button size="s">Button S</Button>
227
+ </div>
228
+ </div>;
229
+ ```
230
+
231
+ ```postcss attached
232
+ .button-customization-example-wrapper-1 {
233
+ --rs-button-border-radius: 0;
234
+ }
235
+ ```
236
+
237
+ ```tsx
238
+ import { Button } from '@rescui/button';
239
+
240
+ <div className="button-customization-example-wrapper-2 rs-docs-row">
241
+ <div className="rs-docs-col">
242
+ <Button size="l">Button L</Button>
243
+ </div>
244
+ <div className="rs-docs-col">
245
+ <Button size="m">Button M</Button>
246
+ </div>
247
+ <div className="rs-docs-col">
248
+ <Button size="s">Button S</Button>
249
+ </div>
250
+ </div>;
251
+ ```
252
+
253
+ ```postcss
254
+ .button-customization-example-wrapper-2 {
255
+ --rs-button-border-radius: 0;
256
+ --rs-button-l-border-radius: 8px;
257
+ --rs-button-s-border-radius: 4px;
258
+ }
259
+ ```
260
+
261
+ ## Customizations
262
+
263
+ #### Custom width
264
+
265
+ You can control button width externally via a `width` CSS property. You can also do that by putting it into CSS Flexbox container.
266
+
267
+ ```tsx
268
+ import { Button } from '@rescui/button';
269
+
270
+ <Button className={'my-button-with-custom-width'}>Custom width button</Button>;
271
+ ```
272
+
273
+ ```postcss
274
+ .my-button-with-custom-width {
275
+ width: 300px;
276
+ }
277
+ ```
278
+
279
+ ##### Adaptive equal width buttons
280
+
281
+ ```tsx
282
+ import { useState } from 'react';
283
+ import { createTextCn } from '@rescui/typography';
284
+ import { Button } from '@rescui/button';
285
+
286
+ const ResizeableContainer = ({ children }) => {
287
+ const [width, setWidth] = useState(400);
288
+
289
+ return (
290
+ <div className={createTextCn('light')('rs-text-2')}>
291
+ <input
292
+ type="range"
293
+ min={250}
294
+ max={800}
295
+ onChange={e => setWidth(e.target.value)}
296
+ value={width}
297
+ />
298
+ <span>Container width: {width}px</span>
299
+ <div
300
+ style={{
301
+ width: `${width}px`,
302
+ marginTop: '24px',
303
+ border: 'dotted 1px red'
304
+ }}
305
+ >
306
+ {children}
307
+ </div>
308
+ </div>
309
+ );
310
+ };
311
+
312
+ const AdaptiveButtons = () => (
313
+ <>
314
+ <div className="my-buttons-container">
315
+ <Button className="my-adaptive-button">Sort</Button>
316
+ <Button className="my-adaptive-button">Long long long text</Button>
317
+ </div>
318
+ </>
319
+ );
320
+
321
+ render(
322
+ <ResizeableContainer>
323
+ <AdaptiveButtons />
324
+ </ResizeableContainer>
325
+ );
326
+ ```
327
+
328
+ ```postcss
329
+ .my-buttons-container {
330
+ display: flex;
331
+ gap: 10px;
332
+ }
333
+
334
+ .my-adaptive-button {
335
+ flex: 1 1 0;
336
+ }
337
+ ```
338
+
339
+ #### Add new icons
340
+
341
+ If you want to add your own icons, make sure they use correct box sizes
342
+
343
+ - 16x16px for xs size
344
+
345
+ - 20x20px for s size
346
+
347
+ - 24x24px for m size
348
+
349
+ - 28x28px for l size
350
+
351
+ Icons should support `className` prop, as well.
352
+
353
+ ```tsx
354
+ import { Button } from '@rescui/button';
355
+
356
+ const SettingsIcon = ({ className }) => (
357
+ <svg className={className} width="24" height="24" viewBox="0 0 24 24">
358
+ <path d="M12 3L4 7.5v9l8 4.5 8-4.5v-9zm.01 13.005a4 4 0 1 1 3.998-4 4 4 0 0 1-3.999 4z" />
359
+ </svg>
360
+ );
361
+
362
+ render(
363
+ <div className="rs-docs-row rs-docs-row_vertical-center">
364
+ <Button className="rs-docs-col" icon={<SettingsIcon />}>
365
+ External icon on the left
366
+ </Button>
367
+ <span className="rs-docs-col rs-text-2">or</span>
368
+ <Button
369
+ className="rs-docs-col"
370
+ icon={<SettingsIcon />}
371
+ iconPosition="right"
372
+ >
373
+ External icon on the right
374
+ </Button>
375
+ </div>
376
+ );
377
+ ```
378
+
379
+ #### Border-radius customization
380
+
381
+ You can customize border-radius for all and for specific button sizes, using CSS variables:
382
+
383
+ - `--rs-button-border-radius`
384
+ - `--rs-button-xs-border-radius`
385
+ - `--rs-button-s-border-radius`
386
+ - `--rs-button-m-border-radius`
387
+ - `--rs-button-l-border-radius`
388
+ - `--rs-button-multiline-border-radius`
389
+ - `--rs-button-xs-multiline-border-radius`
390
+ - `--rs-button-s-multiline-border-radius`
391
+ - `--rs-button-m-multiline-border-radius`
392
+ - `--rs-button-l-multiline-border-radius`
393
+
394
+ ```tsx
395
+ import { Button } from '@rescui/button';
396
+
397
+ <div className="button-customization-example-wrapper-1 rs-docs-row">
398
+ <div className="rs-docs-col">
399
+ <Button size="l">Button L</Button>
400
+ </div>
401
+ <div className="rs-docs-col">
402
+ <Button size="m">Button M</Button>
403
+ </div>
404
+ <div className="rs-docs-col">
405
+ <Button size="s">Button S</Button>
406
+ </div>
407
+ </div>;
408
+ ```
409
+
410
+ ```postcss
411
+ .button-customization-example-wrapper-1 {
412
+ --rs-button-border-radius: 0;
413
+ }
414
+ ```
415
+
416
+ ```tsx
417
+ import { Button } from '@rescui/button';
418
+
419
+ <div className="button-customization-example-wrapper-2 rs-docs-row">
420
+ <div className="rs-docs-col">
421
+ <Button size="l">Button L</Button>
422
+ </div>
423
+ <div className="rs-docs-col">
424
+ <Button size="m">Button M</Button>
425
+ </div>
426
+ <div className="rs-docs-col">
427
+ <Button size="s">Button S</Button>
428
+ </div>
429
+ </div>;
430
+ ```
431
+
432
+ ```postcss
433
+ .button-customization-example-wrapper-2 {
434
+ --rs-button-border-radius: 0;
435
+ --rs-button-l-border-radius: 8px;
436
+ --rs-button-s-border-radius: 4px;
437
+ }
438
+ ```
439
+
440
+ #### Shifted side
441
+
442
+ Shifted side means that buttons will be shifted to a specific side by the padding value. This feature works only with `Clear` buttons.
443
+
444
+ - **Avoid** mixing `shifted="all"` buttons with any `margin` style names (used in some layout columns) - use wrapper instead.
445
+ - **Avoid** mixing `shifted={side}` buttons with `margin-${side}` style names (used in some layout columns) - use wrapper instead.
446
+ - When shifted buttons overlap, the last one gets the priority.
447
+ - **Use only when necessary**.
448
+
449
+ Examples:
450
+
451
+ ```tsx
452
+ import { Button } from '@rescui/button';
453
+ import '@rescui/typography';
454
+
455
+ <div className="rs-text-2">
456
+ <p>Some common text</p>
457
+ <p>
458
+ <Button mode="clear" shifted="left">
459
+ Button
460
+ </Button>
461
+ </p>
462
+ <p>
463
+ <Button mode="clear" shifted="all">
464
+ Hover
465
+ </Button>{' '}
466
+ over the first word.
467
+ </p>
468
+ <p className="rs-docs-offset-top-24">Another common paragraph</p>
469
+ <p>
470
+ <Button mode="clear" shifted={['top', 'bottom', 'left']}>
471
+ Button
472
+ </Button>
473
+ </p>
474
+ <p>Button above has normal line-height</p>
475
+ <p className="rs-docs-offset-top-48">
476
+ <Button mode="clear" shifted="top" size="l">
477
+ Top shifted with offset 48
478
+ </Button>
479
+ </p>
480
+ <p className="rs-docs-offset-top-24">
481
+ <span>
482
+ <Button mode="clear" shifted="left">
483
+ Left col button
484
+ </Button>
485
+ </span>
486
+ <span style={{ float: 'right' }}>
487
+ <Button mode="clear" shifted="right">
488
+ Right col button
489
+ </Button>
490
+ </span>
491
+ </p>
492
+ </div>;
493
+ ```
494
+
495
+ ##### CSS variables for shifted emulation
496
+
497
+ You may also use following CSS variables to manually shift your button:
498
+
499
+ - `--rs-out-button-vertical-padding`
500
+ - `--rs-out-button-horizontal-padding`
501
+
502
+ ```tsx
503
+ import { Button } from '@rescui/button';
504
+
505
+ <div className="shifted-css__wrapper">
506
+ <Button mode={'clear'} className="shifted-css__btn">
507
+ Button
508
+ </Button>
509
+ </div>;
510
+ ```
511
+
512
+ ```postcss
513
+ .shifted-css__wrapper {
514
+ border: 1px solid black;
515
+ display: inline-block;
516
+ }
517
+
518
+ .shifted-css__btn {
519
+ margin: calc(-1 * var(--rs-out-button-vertical-padding)) calc(
520
+ -1 * var(--rs-out-button-horizontal-padding)
521
+ );
522
+ }
523
+ ```
524
+
525
+ #### Customizing primary color
526
+
527
+ To get the correct primary color variables bundle, use the [primary color tool](/design/colors/primary-tool/).
528
+
529
+ ```tsx
530
+ import { Button } from '@rescui/button';
531
+
532
+ render(
533
+ <div>
534
+ <Button>Default primary button</Button>
535
+ <div className="pink-primary" style={{ marginTop: 12 }}>
536
+ <Button>Pink primary button</Button>
537
+ </div>
538
+ <div style={{ marginTop: 12 }}>
539
+ <Button className="green-primary">Green primary button</Button>
540
+ </div>
541
+ </div>
542
+ );
543
+ ```
544
+
545
+ ```postcss attached
546
+ .pink-primary {
547
+ --rs-color-primary-light-theme: rgb(223, 36, 119);
548
+ --rs-color-primary-t-dim-light-theme: rgba(223, 36, 119, 0.8);
549
+ --rs-color-primary-t-fog-light-theme: rgba(223, 36, 119, 0.2);
550
+
551
+ --rs-color-primary-dark-theme: rgb(223, 36, 119);
552
+ --rs-color-primary-t-dim-dark-theme: rgba(223, 36, 119, 0.8);
553
+ --rs-color-primary-t-fog-dark-theme: rgba(223, 36, 119, 0.2);
554
+ }
555
+
556
+ .green-primary {
557
+ --rs-color-primary-light-theme: rgb(8, 132, 132);
558
+ --rs-color-primary-t-dim-light-theme: rgba(8, 132, 132, 0.8);
559
+ --rs-color-primary-t-fog-light-theme: rgba(8, 132, 132, 0.2);
560
+
561
+ --rs-color-primary-dark-theme: rgb(8, 132, 132);
562
+ --rs-color-primary-t-dim-dark-theme: rgba(8, 132, 132, 0.8);
563
+ --rs-color-primary-t-fog-dark-theme: rgba(8, 132, 132, 0.2);
564
+ }
565
+ ```
566
+
567
+ #### Flipping text color
568
+
569
+ You may also use `--rs-button-flip-text-color` CSS variable to flip the text color of the `mode="classic"` Button:
570
+
571
+ ```tsx
572
+ import { Button } from '@rescui/button';
573
+
574
+ <div className="light-green-primary">
575
+ <Button mode={'classic'} className="contrast-button">
576
+ Button
577
+ </Button>
578
+ </div>;
579
+ ```
580
+
581
+ ```postcss
582
+ .contrast-button {
583
+ --rs-button-flip-text-color: 1;
584
+ }
585
+
586
+ .light-green-primary {
587
+ --rs-color-primary-light-theme: rgb(71, 224, 84);
588
+ --rs-color-primary-t-dim-light-theme: rgba(71, 224, 84, 0.8);
589
+ --rs-color-primary-t-fog-light-theme: rgba(71, 224, 84, 0.2);
590
+
591
+ --rs-color-primary-dark-theme: rgb(71, 224, 84);
592
+ --rs-color-primary-t-dim-dark-theme: rgba(71, 224, 84, 0.8);
593
+ --rs-color-primary-t-fog-dark-theme: rgba(71, 224, 84, 0.2);
594
+ }
595
+ ```
package/llm/index.md ADDED
@@ -0,0 +1,2 @@
1
+ - Components and Hooks
2
+ - [Button](./components/button.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/button",
3
- "version": "0.24.2",
3
+ "version": "0.24.4",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -9,6 +9,7 @@
9
9
  "src:main": "src/index.ts",
10
10
  "files": [
11
11
  "lib",
12
+ "llm",
12
13
  "LICENSE.txt"
13
14
  ],
14
15
  "publishConfig": {
@@ -16,7 +17,7 @@
16
17
  },
17
18
  "dependencies": {
18
19
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/use-resize-observer": "^0.3.1",
20
+ "@rescui/use-resize-observer": "^0.3.3",
20
21
  "classnames": "^2.2.6"
21
22
  },
22
23
  "peerDependencies": {
@@ -25,10 +26,10 @@
25
26
  "react": ">=16.8.0 <20"
26
27
  },
27
28
  "devDependencies": {
28
- "@rescui/colors": "^0.3.1",
29
- "@rescui/icons": "^1.8.1",
29
+ "@rescui/colors": "^0.3.2",
30
+ "@rescui/icons": "^1.8.2",
30
31
  "@rescui/scripts": "^0.5.2",
31
- "@rescui/typography": "^0.27.1",
32
+ "@rescui/typography": "^0.27.2",
32
33
  "@rescui/visual-regression": "^0.1.4",
33
34
  "@types/classnames": "^2.2.11"
34
35
  },
@@ -37,5 +38,5 @@
37
38
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
39
  },
39
40
  "nx": {},
40
- "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
41
+ "gitHead": "7aade8fced69c4a1ac61078a1daf2c1cd4f5a1c9"
41
42
  }