@rescui/switcher 0.13.3 → 0.13.5-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10

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/README.md +1 -1
  2. package/lib/index.css +77 -77
  3. package/lib/switcher.p.module.css.js +19 -19
  4. package/lib/vertical-switcher.p.module.css.js +20 -20
  5. package/llm/components/switcher.md +54 -84
  6. package/package.json +8 -8
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # Switcher
1
+ # Switcher and VerticalSwitcher
2
2
 
3
3
  ## LLM
4
4
 
package/lib/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._themeLight_1aka0vt_6{
1
+ ._themeLight_1wk58a3_6{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_1aka0vt_9{
4
+ ._themeDark_1wk58a3_9{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._sizeXS_1aka0vt_13{
7
+ ._sizeXS_1wk58a3_13{
8
8
  --_rs-switcher-border-radius:4px;
9
9
  --_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
10
10
  --_rs-switcher-option-padding:2px 12px;
@@ -14,7 +14,7 @@
14
14
  --_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
15
15
  --_rs-switcher-icon-margin-vertical:2px;
16
16
  }
17
- ._sizeXS_1aka0vt_13 [data-rs-internal='switcher__option']{
17
+ ._sizeXS_1wk58a3_13 [data-rs-internal='switcher__option']{
18
18
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
19
19
  --_rs-typography-text-transform:initial;
20
20
  --_rs-typography-font-variant-numeric:initial;
@@ -49,7 +49,7 @@
49
49
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
50
50
  --_rs-typography-link-border-bottom-width-from-text:1px;
51
51
  }
52
- ._sizeS_1aka0vt_16{
52
+ ._sizeS_1wk58a3_16{
53
53
  --_rs-switcher-border-radius:16px;
54
54
  --_rs-switcher-compact-border-radius:4px;
55
55
  --_rs-switcher-option-padding:6px 16px;
@@ -59,7 +59,7 @@
59
59
  --_rs-switcher-compact-icon-offset:4px;
60
60
  --_rs-switcher-icon-margin-vertical:0px;
61
61
  }
62
- ._sizeS_1aka0vt_16 [data-rs-internal='switcher__option']{
62
+ ._sizeS_1wk58a3_16 [data-rs-internal='switcher__option']{
63
63
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
64
64
  --_rs-typography-text-transform:initial;
65
65
  --_rs-typography-font-variant-numeric:initial;
@@ -94,7 +94,7 @@
94
94
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
95
95
  --_rs-typography-link-border-bottom-width-from-text:1px;
96
96
  }
97
- ._sizeM_1aka0vt_19{
97
+ ._sizeM_1wk58a3_19{
98
98
  --_rs-switcher-border-radius:20px;
99
99
  --_rs-switcher-compact-border-radius:8px;
100
100
  --_rs-switcher-option-padding:8px 24px;
@@ -104,7 +104,7 @@
104
104
  --_rs-switcher-compact-icon-offset:8px;
105
105
  --_rs-switcher-icon-margin-vertical:0px;
106
106
  }
107
- ._sizeM_1aka0vt_19 [data-rs-internal='switcher__option']{
107
+ ._sizeM_1wk58a3_19 [data-rs-internal='switcher__option']{
108
108
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
109
109
  --_rs-typography-text-transform:initial;
110
110
  --_rs-typography-font-variant-numeric:initial;
@@ -143,11 +143,11 @@
143
143
  --_rs-typography-link-border-bottom-width-from-text:1px;
144
144
  }
145
145
  @media screen and (max-width: 640px){
146
- ._sizeM_1aka0vt_19 [data-rs-internal='switcher__option']{
146
+ ._sizeM_1wk58a3_19 [data-rs-internal='switcher__option']{
147
147
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
148
148
  }
149
149
  }
150
- ._sizeL_1aka0vt_22{
150
+ ._sizeL_1wk58a3_22{
151
151
  --_rs-switcher-border-radius:26px;
152
152
  --_rs-switcher-compact-border-radius:12px;
153
153
  --_rs-switcher-option-padding:12px 32px;
@@ -157,7 +157,7 @@
157
157
  --_rs-switcher-compact-icon-offset:12px;
158
158
  --_rs-switcher-icon-margin-vertical:0px;
159
159
  }
160
- ._sizeL_1aka0vt_22 [data-rs-internal='switcher__option']{
160
+ ._sizeL_1wk58a3_22 [data-rs-internal='switcher__option']{
161
161
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
162
162
  --_rs-typography-text-transform:initial;
163
163
  --_rs-typography-font-variant-numeric:initial;
@@ -196,22 +196,22 @@
196
196
  --_rs-typography-link-border-bottom-width-from-text:1px;
197
197
  }
198
198
  @media screen and (max-width: 640px){
199
- ._sizeL_1aka0vt_22 [data-rs-internal='switcher__option']{
199
+ ._sizeL_1wk58a3_22 [data-rs-internal='switcher__option']{
200
200
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
201
201
  }
202
202
  }
203
- ._modeClassic_1aka0vt_26{
203
+ ._modeClassic_1wk58a3_26{
204
204
  --_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
205
205
  --_rs-switcher-mark-border-color:var(--_rs-color-primary);
206
206
  }
207
- ._modeRock_1aka0vt_29{
207
+ ._modeRock_1wk58a3_29{
208
208
  --_rs-switcher-option-hover-background:rgba(
209
209
  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),
210
210
  0.1
211
211
  );
212
212
  --_rs-switcher-mark-border-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));
213
213
  }
214
- ._compact_1aka0vt_33{
214
+ ._compact_1wk58a3_33{
215
215
  --_rs-switcher-border-radius-from-compact:var(
216
216
  --_rs-switcher-compact-border-radius
217
217
  );
@@ -222,7 +222,7 @@
222
222
  --_rs-switcher-compact-icon-offset
223
223
  );
224
224
  }
225
- ._switcher_1aka0vt_37{
225
+ ._switcher_1wk58a3_37{
226
226
  --_rs-theme-dark:var(
227
227
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
228
228
  var(--rs-theme-dark, 0)
@@ -232,7 +232,7 @@
232
232
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
233
233
  }
234
234
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
235
- ._switcher_1aka0vt_37{
235
+ ._switcher_1wk58a3_37{
236
236
  --_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)));
237
237
  --_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)));
238
238
  --_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)));
@@ -241,7 +241,7 @@
241
241
  }
242
242
  }
243
243
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
244
- ._switcher_1aka0vt_37{
244
+ ._switcher_1wk58a3_37{
245
245
  --_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);
246
246
  --_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));
247
247
  --_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));
@@ -249,7 +249,7 @@
249
249
  --_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));
250
250
  }
251
251
  }
252
- ._switcher_1aka0vt_37 {
252
+ ._switcher_1wk58a3_37 {
253
253
 
254
254
  position:relative;
255
255
 
@@ -265,16 +265,16 @@
265
265
  background:transparent;
266
266
  box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3) 0 0 0 1px;
267
267
  }
268
- ._switcher_1aka0vt_37._disabled_1aka0vt_55{
268
+ ._switcher_1wk58a3_37._disabled_1wk58a3_55{
269
269
  box-shadow:inset 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) 0 0 0 1px;
270
270
  }
271
- ._alignIconLeft_1aka0vt_60{
271
+ ._alignIconLeft_1wk58a3_60{
272
272
  --_rs-switcher-option-flex-direction:row;
273
273
  }
274
- ._alignIconRight_1aka0vt_63{
274
+ ._alignIconRight_1wk58a3_63{
275
275
  --_rs-switcher-option-flex-direction:row-reverse;
276
276
  }
277
- ._option_1aka0vt_67{
277
+ ._option_1wk58a3_67{
278
278
  letter-spacing:var(
279
279
  --rs-text-base-letter-spacing,
280
280
  var(--_rs-typography-letter-spacing)
@@ -325,26 +325,26 @@
325
325
  -moz-appearance:none;
326
326
  appearance:none;
327
327
  }
328
- ._disabled_1aka0vt_55 ._option_1aka0vt_67{
328
+ ._disabled_1wk58a3_55 ._option_1wk58a3_67{
329
329
  cursor:not-allowed;
330
330
  pointer-events:none;
331
331
  }
332
- ._option_1aka0vt_67:has(:focus[data-focus-method='key']){
332
+ ._option_1wk58a3_67:has(:focus[data-focus-method='key']){
333
333
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
334
334
  }
335
335
  @media (hover: hover){
336
- ._option_1aka0vt_67:hover{
336
+ ._option_1wk58a3_67:hover{
337
337
  background:var(--_rs-switcher-option-hover-background);
338
338
  }
339
339
  }
340
- ._option_1aka0vt_67._selected_1aka0vt_118:active{
340
+ ._option_1wk58a3_67._selected_1wk58a3_118:active{
341
341
  background:transparent;
342
342
  }
343
- ._option_1aka0vt_67._selected_1aka0vt_118:hover,
344
- ._option_1aka0vt_67._selected_1aka0vt_118:active{
343
+ ._option_1wk58a3_67._selected_1wk58a3_118:hover,
344
+ ._option_1wk58a3_67._selected_1wk58a3_118:active{
345
345
  cursor:default;
346
346
  }
347
- ._hiddenMark_1aka0vt_127 ._option_1aka0vt_67._selected_1aka0vt_118::before{
347
+ ._hiddenMark_1wk58a3_127 ._option_1wk58a3_67._selected_1wk58a3_118::before{
348
348
  position:absolute;
349
349
  top:0;
350
350
  right:0;
@@ -360,11 +360,11 @@
360
360
 
361
361
  content:'';
362
362
  }
363
- ._hiddenMark_1aka0vt_127._disabled_1aka0vt_55 ._option_1aka0vt_67._selected_1aka0vt_118::before{
363
+ ._hiddenMark_1wk58a3_127._disabled_1wk58a3_55 ._option_1wk58a3_67._selected_1wk58a3_118::before{
364
364
  border-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.2);
365
365
  }
366
- ._disabled_1aka0vt_55 ._option_1aka0vt_67,
367
- ._disabled_1aka0vt_55 ._option_1aka0vt_67._selected_1aka0vt_118{
366
+ ._disabled_1wk58a3_55 ._option_1wk58a3_67,
367
+ ._disabled_1wk58a3_55 ._option_1wk58a3_67._selected_1wk58a3_118{
368
368
  color:var(
369
369
  --rs-color-pale,
370
370
  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)
@@ -374,7 +374,7 @@
374
374
 
375
375
  background:transparent;
376
376
  }
377
- ._option_1aka0vt_67 ._icon_1aka0vt_158{
377
+ ._option_1wk58a3_67 ._icon_1wk58a3_158{
378
378
  flex:0 0 auto;
379
379
 
380
380
  width:auto;
@@ -385,7 +385,7 @@
385
385
  margin-top:var(--_rs-switcher-icon-margin-vertical);
386
386
  margin-bottom:var(--_rs-switcher-icon-margin-vertical);
387
387
  }
388
- ._mark_1aka0vt_171{
388
+ ._mark_1wk58a3_171{
389
389
  position:absolute;
390
390
  top:0;
391
391
  bottom:0;
@@ -403,13 +403,13 @@
403
403
 
404
404
  transition:all var(--_rs-switcher-mark-transition-duration) var(--rs-transition-function, ease);
405
405
  }
406
- ._disabled_1aka0vt_55 ._mark_1aka0vt_171{
406
+ ._disabled_1wk58a3_55 ._mark_1wk58a3_171{
407
407
  border-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.2);
408
408
  }
409
- ._hiddenMark_1aka0vt_127 ._mark_1aka0vt_171{
409
+ ._hiddenMark_1wk58a3_127 ._mark_1wk58a3_171{
410
410
  display:none;
411
411
  }
412
- ._radio_1aka0vt_199{
412
+ ._radio_1wk58a3_199{
413
413
  position:absolute;
414
414
 
415
415
  overflow:hidden;
@@ -426,13 +426,13 @@
426
426
  clip-path:inset(50%);
427
427
  }
428
428
 
429
- ._themeLight_12tytog_6{
429
+ ._themeLight_2evdxu_6{
430
430
  --rs-theme-dark:0;
431
431
  }
432
- ._themeDark_12tytog_9{
432
+ ._themeDark_2evdxu_9{
433
433
  --rs-theme-dark:1;
434
434
  }
435
- ._sizeXS_12tytog_13{
435
+ ._sizeXS_2evdxu_13{
436
436
  --_rs-switcher-vertical-border-radius:4px;
437
437
  --_rs-switcher-vertical-option-vertical-padding:2px;
438
438
  --_rs-switcher-vertical-option-horizontal-padding:8px;
@@ -440,7 +440,7 @@
440
440
  --_rs-switcher-vertical-icon-offset:4px;
441
441
  --_rs-switcher-vertical-icon-margin-vertical:2px;
442
442
  }
443
- ._sizeXS_12tytog_13 [data-rs-internal='vertical-switcher__option']{
443
+ ._sizeXS_2evdxu_13 [data-rs-internal='vertical-switcher__option']{
444
444
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
445
445
  --_rs-typography-text-transform:initial;
446
446
  --_rs-typography-font-variant-numeric:initial;
@@ -475,7 +475,7 @@
475
475
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
476
476
  --_rs-typography-link-border-bottom-width-from-text:1px;
477
477
  }
478
- ._sizeS_12tytog_16{
478
+ ._sizeS_2evdxu_16{
479
479
  --_rs-switcher-vertical-border-radius:4px;
480
480
  --_rs-switcher-vertical-option-vertical-padding:6px;
481
481
  --_rs-switcher-vertical-option-horizontal-padding:12px;
@@ -483,7 +483,7 @@
483
483
  --_rs-switcher-vertical-icon-offset:4px;
484
484
  --_rs-switcher-vertical-icon-margin-vertical:0px;
485
485
  }
486
- ._sizeS_12tytog_16 [data-rs-internal='vertical-switcher__option']{
486
+ ._sizeS_2evdxu_16 [data-rs-internal='vertical-switcher__option']{
487
487
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
488
488
  --_rs-typography-text-transform:initial;
489
489
  --_rs-typography-font-variant-numeric:initial;
@@ -518,7 +518,7 @@
518
518
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
519
519
  --_rs-typography-link-border-bottom-width-from-text:1px;
520
520
  }
521
- ._sizeM_12tytog_19{
521
+ ._sizeM_2evdxu_19{
522
522
  --_rs-switcher-vertical-border-radius:8px;
523
523
  --_rs-switcher-vertical-option-vertical-padding:8px;
524
524
  --_rs-switcher-vertical-option-horizontal-padding:16px;
@@ -526,7 +526,7 @@
526
526
  --_rs-switcher-vertical-icon-offset:8px;
527
527
  --_rs-switcher-vertical-icon-margin-vertical:0px;
528
528
  }
529
- ._sizeM_12tytog_19 [data-rs-internal='vertical-switcher__option']{
529
+ ._sizeM_2evdxu_19 [data-rs-internal='vertical-switcher__option']{
530
530
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
531
531
  --_rs-typography-text-transform:initial;
532
532
  --_rs-typography-font-variant-numeric:initial;
@@ -565,11 +565,11 @@
565
565
  --_rs-typography-link-border-bottom-width-from-text:1px;
566
566
  }
567
567
  @media screen and (max-width: 640px){
568
- ._sizeM_12tytog_19 [data-rs-internal='vertical-switcher__option']{
568
+ ._sizeM_2evdxu_19 [data-rs-internal='vertical-switcher__option']{
569
569
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
570
570
  }
571
571
  }
572
- ._sizeL_12tytog_22{
572
+ ._sizeL_2evdxu_22{
573
573
  --_rs-switcher-vertical-border-radius:12px;
574
574
  --_rs-switcher-vertical-option-vertical-padding:12px;
575
575
  --_rs-switcher-vertical-option-horizontal-padding:24px;
@@ -577,7 +577,7 @@
577
577
  --_rs-switcher-vertical-icon-offset:12px;
578
578
  --_rs-switcher-vertical-icon-margin-vertical:0px;
579
579
  }
580
- ._sizeL_12tytog_22 [data-rs-internal='vertical-switcher__option']{
580
+ ._sizeL_2evdxu_22 [data-rs-internal='vertical-switcher__option']{
581
581
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
582
582
  --_rs-typography-text-transform:initial;
583
583
  --_rs-typography-font-variant-numeric:initial;
@@ -616,17 +616,17 @@
616
616
  --_rs-typography-link-border-bottom-width-from-text:1px;
617
617
  }
618
618
  @media screen and (max-width: 640px){
619
- ._sizeL_12tytog_22 [data-rs-internal='vertical-switcher__option']{
619
+ ._sizeL_2evdxu_22 [data-rs-internal='vertical-switcher__option']{
620
620
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
621
621
  }
622
622
  }
623
- ._modeClassic_12tytog_26{
623
+ ._modeClassic_2evdxu_26{
624
624
  --_rs-switcher-vertical-option-hover-background:var(
625
625
  --_rs-color-primary-t-fog
626
626
  );
627
627
  --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
628
628
  }
629
- ._modeRock_12tytog_29{
629
+ ._modeRock_2evdxu_29{
630
630
  --_rs-switcher-vertical-option-hover-background:rgba(
631
631
  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),
632
632
  0.1
@@ -635,7 +635,7 @@
635
635
  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)
636
636
  );
637
637
  }
638
- ._verticalSwitcher_12tytog_33{
638
+ ._verticalSwitcher_2evdxu_33{
639
639
  --_rs-theme-dark:var(
640
640
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
641
641
  var(--rs-theme-dark, 0)
@@ -645,7 +645,7 @@
645
645
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
646
646
  }
647
647
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
648
- ._verticalSwitcher_12tytog_33{
648
+ ._verticalSwitcher_2evdxu_33{
649
649
  --_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)));
650
650
  --_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)));
651
651
  --_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)));
@@ -654,7 +654,7 @@
654
654
  }
655
655
  }
656
656
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
657
- ._verticalSwitcher_12tytog_33{
657
+ ._verticalSwitcher_2evdxu_33{
658
658
  --_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);
659
659
  --_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));
660
660
  --_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));
@@ -662,7 +662,7 @@
662
662
  --_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));
663
663
  }
664
664
  }
665
- ._verticalSwitcher_12tytog_33 {
665
+ ._verticalSwitcher_2evdxu_33 {
666
666
 
667
667
  position:relative;
668
668
 
@@ -677,16 +677,16 @@
677
677
  background:transparent;
678
678
  box-shadow:inset rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3) 0 0 0 1px;
679
679
  }
680
- ._verticalSwitcher_12tytog_33._disabled_12tytog_50{
680
+ ._verticalSwitcher_2evdxu_33._disabled_2evdxu_50{
681
681
  box-shadow:inset 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) 0 0 0 1px;
682
682
  }
683
- ._alignIconLeft_12tytog_55{
683
+ ._alignIconLeft_2evdxu_55{
684
684
  --_rs-switcher-vertical-option-flex-direction:row;
685
685
  }
686
- ._alignIconRight_12tytog_58{
686
+ ._alignIconRight_2evdxu_58{
687
687
  --_rs-switcher-vertical-option-flex-direction:row-reverse;
688
688
  }
689
- ._option_12tytog_62{
689
+ ._option_2evdxu_62{
690
690
  letter-spacing:var(
691
691
  --rs-text-base-letter-spacing,
692
692
  var(--_rs-typography-letter-spacing)
@@ -730,26 +730,26 @@
730
730
  -moz-appearance:none;
731
731
  appearance:none;
732
732
  }
733
- ._disabled_12tytog_50 ._option_12tytog_62{
733
+ ._disabled_2evdxu_50 ._option_2evdxu_62{
734
734
  cursor:not-allowed;
735
735
  pointer-events:none;
736
736
  }
737
- ._option_12tytog_62:has(:focus[data-focus-method='key']){
737
+ ._option_2evdxu_62:has(:focus[data-focus-method='key']){
738
738
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
739
739
  }
740
740
  @media (hover: hover){
741
- ._option_12tytog_62:hover{
741
+ ._option_2evdxu_62:hover{
742
742
  background:var(--_rs-switcher-vertical-option-hover-background);
743
743
  }
744
744
  }
745
- ._option_12tytog_62._selected_12tytog_107:active{
745
+ ._option_2evdxu_62._selected_2evdxu_107:active{
746
746
  background:transparent;
747
747
  }
748
- ._option_12tytog_62._selected_12tytog_107:hover,
749
- ._option_12tytog_62._selected_12tytog_107:active{
748
+ ._option_2evdxu_62._selected_2evdxu_107:hover,
749
+ ._option_2evdxu_62._selected_2evdxu_107:active{
750
750
  cursor:default;
751
751
  }
752
- ._hiddenMark_12tytog_116 ._option_12tytog_62._selected_12tytog_107::before{
752
+ ._hiddenMark_2evdxu_116 ._option_2evdxu_62._selected_2evdxu_107::before{
753
753
  position:absolute;
754
754
  top:0;
755
755
  right:0;
@@ -765,11 +765,11 @@
765
765
 
766
766
  content:'';
767
767
  }
768
- ._hiddenMark_12tytog_116._disabled_12tytog_50 ._option_12tytog_62._selected_12tytog_107::before{
768
+ ._hiddenMark_2evdxu_116._disabled_2evdxu_50 ._option_2evdxu_62._selected_2evdxu_107::before{
769
769
  border-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.2);
770
770
  }
771
- ._disabled_12tytog_50 ._option_12tytog_62,
772
- ._disabled_12tytog_50 ._option_12tytog_62._selected_12tytog_107{
771
+ ._disabled_2evdxu_50 ._option_2evdxu_62,
772
+ ._disabled_2evdxu_50 ._option_2evdxu_62._selected_2evdxu_107{
773
773
  color:var(
774
774
  --rs-color-pale,
775
775
  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)
@@ -779,12 +779,12 @@
779
779
 
780
780
  background:transparent;
781
781
  }
782
- ._option_12tytog_62 ._optionLabel_12tytog_147{
782
+ ._option_2evdxu_62 ._optionLabel_2evdxu_147{
783
783
  flex:1 1 auto;
784
784
 
785
785
  text-align:left;
786
786
  }
787
- ._option_12tytog_62 ._icon_12tytog_153{
787
+ ._option_2evdxu_62 ._icon_2evdxu_153{
788
788
  flex:0 0 auto;
789
789
 
790
790
  width:auto;
@@ -795,12 +795,12 @@
795
795
 
796
796
  fill:currentColor;
797
797
  }
798
- ._option_12tytog_62 ._fakeIcon_12tytog_164{
798
+ ._option_2evdxu_62 ._fakeIcon_2evdxu_164{
799
799
  display:inline-block;
800
800
 
801
801
  width:var(--_rs-switcher-vertical-icon-size);
802
802
  }
803
- ._mark_12tytog_171{
803
+ ._mark_2evdxu_171{
804
804
  position:absolute;
805
805
  right:0;
806
806
  left:0;
@@ -815,13 +815,13 @@
815
815
 
816
816
  transition:all var(--_rs-switcher-vertical-mark-transition-duration) var(--rs-transition-function, ease);
817
817
  }
818
- ._disabled_12tytog_50 ._mark_12tytog_171{
818
+ ._disabled_2evdxu_50 ._mark_2evdxu_171{
819
819
  border-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.2);
820
820
  }
821
- ._hiddenMark_12tytog_116 ._mark_12tytog_171{
821
+ ._hiddenMark_2evdxu_116 ._mark_2evdxu_171{
822
822
  display:none;
823
823
  }
824
- ._radio_12tytog_196{
824
+ ._radio_2evdxu_196{
825
825
  position:absolute;
826
826
 
827
827
  overflow:hidden;
package/lib/switcher.p.module.css.js CHANGED
@@ -1,22 +1,22 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_1aka0vt_6",
3
- "themeDark": "_themeDark_1aka0vt_9",
4
- "sizeXS": "_sizeXS_1aka0vt_13",
5
- "sizeS": "_sizeS_1aka0vt_16",
6
- "sizeM": "_sizeM_1aka0vt_19",
7
- "sizeL": "_sizeL_1aka0vt_22",
8
- "modeClassic": "_modeClassic_1aka0vt_26",
9
- "modeRock": "_modeRock_1aka0vt_29",
10
- "compact": "_compact_1aka0vt_33",
11
- "switcher": "_switcher_1aka0vt_37",
12
- "disabled": "_disabled_1aka0vt_55",
13
- "alignIconLeft": "_alignIconLeft_1aka0vt_60",
14
- "alignIconRight": "_alignIconRight_1aka0vt_63",
15
- "option": "_option_1aka0vt_67",
16
- "selected": "_selected_1aka0vt_118",
17
- "hiddenMark": "_hiddenMark_1aka0vt_127",
18
- "icon": "_icon_1aka0vt_158",
19
- "mark": "_mark_1aka0vt_171",
20
- "radio": "_radio_1aka0vt_199"
2
+ "themeLight": "_themeLight_1wk58a3_6",
3
+ "themeDark": "_themeDark_1wk58a3_9",
4
+ "sizeXS": "_sizeXS_1wk58a3_13",
5
+ "sizeS": "_sizeS_1wk58a3_16",
6
+ "sizeM": "_sizeM_1wk58a3_19",
7
+ "sizeL": "_sizeL_1wk58a3_22",
8
+ "modeClassic": "_modeClassic_1wk58a3_26",
9
+ "modeRock": "_modeRock_1wk58a3_29",
10
+ "compact": "_compact_1wk58a3_33",
11
+ "switcher": "_switcher_1wk58a3_37",
12
+ "disabled": "_disabled_1wk58a3_55",
13
+ "alignIconLeft": "_alignIconLeft_1wk58a3_60",
14
+ "alignIconRight": "_alignIconRight_1wk58a3_63",
15
+ "option": "_option_1wk58a3_67",
16
+ "selected": "_selected_1wk58a3_118",
17
+ "hiddenMark": "_hiddenMark_1wk58a3_127",
18
+ "icon": "_icon_1wk58a3_158",
19
+ "mark": "_mark_1wk58a3_171",
20
+ "radio": "_radio_1wk58a3_199"
21
21
  };
22
22
  export { styles as default };
package/lib/vertical-switcher.p.module.css.js CHANGED
@@ -1,23 +1,23 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_12tytog_6",
3
- "themeDark": "_themeDark_12tytog_9",
4
- "sizeXS": "_sizeXS_12tytog_13",
5
- "sizeS": "_sizeS_12tytog_16",
6
- "sizeM": "_sizeM_12tytog_19",
7
- "sizeL": "_sizeL_12tytog_22",
8
- "modeClassic": "_modeClassic_12tytog_26",
9
- "modeRock": "_modeRock_12tytog_29",
10
- "verticalSwitcher": "_verticalSwitcher_12tytog_33",
11
- "disabled": "_disabled_12tytog_50",
12
- "alignIconLeft": "_alignIconLeft_12tytog_55",
13
- "alignIconRight": "_alignIconRight_12tytog_58",
14
- "option": "_option_12tytog_62",
15
- "selected": "_selected_12tytog_107",
16
- "hiddenMark": "_hiddenMark_12tytog_116",
17
- "optionLabel": "_optionLabel_12tytog_147",
18
- "icon": "_icon_12tytog_153",
19
- "fakeIcon": "_fakeIcon_12tytog_164",
20
- "mark": "_mark_12tytog_171",
21
- "radio": "_radio_12tytog_196"
2
+ "themeLight": "_themeLight_2evdxu_6",
3
+ "themeDark": "_themeDark_2evdxu_9",
4
+ "sizeXS": "_sizeXS_2evdxu_13",
5
+ "sizeS": "_sizeS_2evdxu_16",
6
+ "sizeM": "_sizeM_2evdxu_19",
7
+ "sizeL": "_sizeL_2evdxu_22",
8
+ "modeClassic": "_modeClassic_2evdxu_26",
9
+ "modeRock": "_modeRock_2evdxu_29",
10
+ "verticalSwitcher": "_verticalSwitcher_2evdxu_33",
11
+ "disabled": "_disabled_2evdxu_50",
12
+ "alignIconLeft": "_alignIconLeft_2evdxu_55",
13
+ "alignIconRight": "_alignIconRight_2evdxu_58",
14
+ "option": "_option_2evdxu_62",
15
+ "selected": "_selected_2evdxu_107",
16
+ "hiddenMark": "_hiddenMark_2evdxu_116",
17
+ "optionLabel": "_optionLabel_2evdxu_147",
18
+ "icon": "_icon_2evdxu_153",
19
+ "fakeIcon": "_fakeIcon_2evdxu_164",
20
+ "mark": "_mark_2evdxu_171",
21
+ "radio": "_radio_2evdxu_196"
22
22
  };
23
23
  export { styles as default };
package/llm/components/switcher.md CHANGED
@@ -179,66 +179,51 @@ render(<MyVerticalSwitcher />);
179
179
 
180
180
  ##### Demo
181
181
 
182
- Instead of separate classes, it may be a single class with `@media` queries inside:
182
+ Use the controls to see the effect at different viewport widths.
183
183
 
184
184
  ```tsx
185
185
  import { useState } from 'react';
186
186
  import { Switcher } from '@rescui/switcher';
187
187
  import { HintOutlineIcon, PersonOutlineIcon } from '@rescui/icons';
188
188
 
189
- const MySwitcher = ({ className }) => {
189
+ const MySwitcher = () => {
190
190
  const [value, setValue] = useState(3);
191
191
 
192
192
  return (
193
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
194
- <Switcher
195
- value={value}
196
- onChange={setValue}
197
- options={[
198
- { label: 'One', value: 1, icon: <HintOutlineIcon /> },
199
- { label: 'Two', value: 2, icon: <PersonOutlineIcon /> },
200
- { label: 'Three', value: 3 },
201
- { label: 'Four', value: 4 },
202
- { label: 'Five', value: 5 }
203
- ]}
204
- className={className}
205
- />
206
- </div>
193
+ <Switcher
194
+ value={value}
195
+ onChange={setValue}
196
+ options={[
197
+ { label: 'One', value: 1, icon: <HintOutlineIcon /> },
198
+ { label: 'Two', value: 2, icon: <PersonOutlineIcon /> },
199
+ { label: 'Three', value: 3 },
200
+ { label: 'Four', value: 4 },
201
+ { label: 'Five', value: 5 }
202
+ ]}
203
+ className="my-switcher"
204
+ />
207
205
  );
208
206
  };
209
207
 
210
- render(
211
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
212
- <div>
213
- <p>Default:</p>
214
- <MySwitcher />
215
- </div>
216
- <div>
217
- <p>Var1:</p>
218
- <MySwitcher className={`my-switcher-var-1`} />
219
- </div>
220
- <div>
221
- <p>Var1 & Var2 combined:</p>
222
- <MySwitcher className={`my-switcher-var-1 my-switcher-var-2`} />
223
- </div>
224
- </div>
225
- );
208
+ render(<MySwitcher />);
226
209
  ```
227
210
 
228
211
  ```postcss attached
229
212
  @import '@rescui/switcher/lib/public-api.p.css';
230
213
 
231
- .my-switcher-var-1 {
232
- @mixin rs-switcher-size-l;
233
- @mixin rs-switcher-mode-rock;
234
- @mixin rs-switcher-compact-true;
235
- @mixin rs-switcher-icon-position-right;
236
- }
237
- .my-switcher-var-2 {
238
- @mixin rs-switcher-size-s;
239
- @mixin rs-switcher-mode-classic;
240
- @mixin rs-switcher-compact-false;
241
- @mixin rs-switcher-icon-position-left;
214
+ .my-switcher {
215
+ @media (max-width: 640px) {
216
+ @mixin rs-switcher-size-l;
217
+ @mixin rs-switcher-mode-rock;
218
+ @mixin rs-switcher-compact-true;
219
+ @mixin rs-switcher-icon-position-right;
220
+ }
221
+ @media (max-width: 500px) {
222
+ @mixin rs-switcher-size-s;
223
+ @mixin rs-switcher-mode-classic;
224
+ @mixin rs-switcher-compact-false;
225
+ @mixin rs-switcher-icon-position-left;
226
+ }
242
227
  }
243
228
  ```
244
229
 
@@ -257,7 +242,7 @@ render(
257
242
 
258
243
  ##### Demo
259
244
 
260
- Instead of separate classes, it may be a single class with `@media` queries inside:
245
+ Use the controls to see the effect at different viewport widths.
261
246
 
262
247
  ```tsx
263
248
  import { useState } from 'react';
@@ -270,56 +255,41 @@ import {
270
255
  CloudOutlineIcon
271
256
  } from '@rescui/icons';
272
257
 
273
- const MyVerticalSwitcher = ({ className }) => {
258
+ const MyVerticalSwitcher = () => {
274
259
  const [value, setValue] = useState(3);
275
260
 
276
261
  return (
277
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
278
- <VerticalSwitcher
279
- value={value}
280
- onChange={setValue}
281
- options={[
282
- { label: 'One', value: 1, icon: <HintOutlineIcon /> },
283
- { label: 'Two', value: 2, icon: <PersonOutlineIcon /> },
284
- { label: 'Three', value: 3, icon: <CompanyOutlineIcon /> },
285
- { label: 'Four', value: 4, icon: <BellOutlineIcon /> },
286
- { label: 'Five', value: 5, icon: <CloudOutlineIcon /> }
287
- ]}
288
- className={className}
289
- />
290
- </div>
262
+ <VerticalSwitcher
263
+ value={value}
264
+ onChange={setValue}
265
+ options={[
266
+ { label: 'One', value: 1, icon: <HintOutlineIcon /> },
267
+ { label: 'Two', value: 2, icon: <PersonOutlineIcon /> },
268
+ { label: 'Three', value: 3, icon: <CompanyOutlineIcon /> },
269
+ { label: 'Four', value: 4, icon: <BellOutlineIcon /> },
270
+ { label: 'Five', value: 5, icon: <CloudOutlineIcon /> }
271
+ ]}
272
+ className="my-vertical-switcher"
273
+ />
291
274
  );
292
275
  };
293
276
 
294
- render(
295
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
296
- <div>
297
- <p>Default:</p>
298
- <MyVerticalSwitcher />
299
- </div>
300
- <div>
301
- <p>Var1:</p>
302
- <MyVerticalSwitcher className={`my-vertical-switcher-var-1`} />
303
- </div>
304
- <div>
305
- <p>Var1 & Var2 combined:</p>
306
- <MyVerticalSwitcher className={`my-vertical-switcher-var-1 my-vertical-switcher-var-2`} />
307
- </div>
308
- </div>
309
- );
277
+ render(<MyVerticalSwitcher />);
310
278
  ```
311
279
 
312
280
  ```postcss
313
281
  @import '@rescui/switcher/lib/public-api.p.css';
314
282
 
315
- .my-vertical-switcher-var-1 {
316
- @mixin rs-vertical-switcher-size-l;
317
- @mixin rs-vertical-switcher-mode-rock;
318
- @mixin rs-vertical-switcher-icon-position-right;
319
- }
320
- .my-vertical-switcher-var-2 {
321
- @mixin rs-vertical-switcher-size-s;
322
- @mixin rs-vertical-switcher-mode-classic;
323
- @mixin rs-vertical-switcher-icon-position-left;
283
+ .my-vertical-switcher {
284
+ @media (max-width: 640px) {
285
+ @mixin rs-vertical-switcher-size-l;
286
+ @mixin rs-vertical-switcher-mode-rock;
287
+ @mixin rs-vertical-switcher-icon-position-right;
288
+ }
289
+ @media (max-width: 500px) {
290
+ @mixin rs-vertical-switcher-size-s;
291
+ @mixin rs-vertical-switcher-mode-classic;
292
+ @mixin rs-vertical-switcher-icon-position-left;
293
+ }
324
294
  }
325
295
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/switcher",
3
- "version": "0.13.3",
3
+ "version": "0.13.5-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -18,24 +18,24 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@babel/runtime-corejs3": "^7.26.0",
21
- "@rescui/use-resize-observer": "^0.3.2",
21
+ "@rescui/use-resize-observer": "0.3.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
22
22
  "classnames": "^2.2.6"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "@rescui/ui-contexts": "^0.6.0",
26
26
  "prop-types": "^15",
27
- "react": ">=16.8.0 <20"
27
+ "react": ">=17.0.0 <20"
28
28
  },
29
29
  "devDependencies": {
30
- "@rescui/colors": "^0.3.2",
31
- "@rescui/icons": "^1.8.2",
32
- "@rescui/scripts": "^0.5.2",
33
- "@rescui/typography": "^0.27.2"
30
+ "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
31
+ "@rescui/icons": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
32
+ "@rescui/scripts": "0.5.2",
33
+ "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "rescui-scripts build && yarn run build-pcss-api",
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
39
  "nx": {},
40
- "gitHead": "d60e4f3491c7cdb9ef684d08940869914492a61b"
40
+ "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
41
41
  }