@rescui/switcher 0.10.7 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/index.css +115 -71
  2. package/lib/switcher.d.ts +3 -1
  3. package/lib/switcher.js +27 -9
  4. package/lib/switcher.p.module.css.js +18 -17
  5. package/lib/vertical-switcher.js +25 -8
  6. package/lib/vertical-switcher.p.module.css.js +19 -18
  7. package/package.json +2 -2
package/lib/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._themeLight_g6yjva_6{
1
+ ._themeLight_1l4l2vf_6{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_g6yjva_9{
4
+ ._themeDark_1l4l2vf_9{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._sizeXS_g6yjva_13{
7
+ ._sizeXS_1l4l2vf_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_g6yjva_13 [data-rs-internal='switcher__option']{
17
+ ._sizeXS_1l4l2vf_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;
@@ -48,7 +48,7 @@
48
48
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
49
49
  --_rs-typography-link-border-bottom-width-from-text:1px;
50
50
  }
51
- ._sizeS_g6yjva_16{
51
+ ._sizeS_1l4l2vf_16{
52
52
  --_rs-switcher-border-radius:16px;
53
53
  --_rs-switcher-compact-border-radius:4px;
54
54
  --_rs-switcher-option-padding:6px 16px;
@@ -58,7 +58,7 @@
58
58
  --_rs-switcher-compact-icon-offset:4px;
59
59
  --_rs-switcher-icon-margin-vertical:0px;
60
60
  }
61
- ._sizeS_g6yjva_16 [data-rs-internal='switcher__option']{
61
+ ._sizeS_1l4l2vf_16 [data-rs-internal='switcher__option']{
62
62
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
63
63
  --_rs-typography-text-transform:initial;
64
64
  --_rs-typography-font-variant-numeric:initial;
@@ -92,7 +92,7 @@
92
92
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
93
93
  --_rs-typography-link-border-bottom-width-from-text:1px;
94
94
  }
95
- ._sizeM_g6yjva_19{
95
+ ._sizeM_1l4l2vf_19{
96
96
  --_rs-switcher-border-radius:20px;
97
97
  --_rs-switcher-compact-border-radius:8px;
98
98
  --_rs-switcher-option-padding:8px 24px;
@@ -102,7 +102,7 @@
102
102
  --_rs-switcher-compact-icon-offset:8px;
103
103
  --_rs-switcher-icon-margin-vertical:0px;
104
104
  }
105
- ._sizeM_g6yjva_19 [data-rs-internal='switcher__option']{
105
+ ._sizeM_1l4l2vf_19 [data-rs-internal='switcher__option']{
106
106
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
107
107
  --_rs-typography-text-transform:initial;
108
108
  --_rs-typography-font-variant-numeric:initial;
@@ -137,11 +137,11 @@
137
137
  --_rs-typography-link-border-bottom-width-from-text:1px;
138
138
  }
139
139
  @media screen and (max-width: 640px){
140
- ._sizeM_g6yjva_19 [data-rs-internal='switcher__option']{
140
+ ._sizeM_1l4l2vf_19 [data-rs-internal='switcher__option']{
141
141
  --_rs-typography-list-li-margin-top-from-text:12px;
142
142
  }
143
143
  }
144
- ._sizeL_g6yjva_22{
144
+ ._sizeL_1l4l2vf_22{
145
145
  --_rs-switcher-border-radius:26px;
146
146
  --_rs-switcher-compact-border-radius:12px;
147
147
  --_rs-switcher-option-padding:12px 32px;
@@ -151,7 +151,7 @@
151
151
  --_rs-switcher-compact-icon-offset:12px;
152
152
  --_rs-switcher-icon-margin-vertical:0px;
153
153
  }
154
- ._sizeL_g6yjva_22 [data-rs-internal='switcher__option']{
154
+ ._sizeL_1l4l2vf_22 [data-rs-internal='switcher__option']{
155
155
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
156
156
  --_rs-typography-text-transform:initial;
157
157
  --_rs-typography-font-variant-numeric:initial;
@@ -186,22 +186,22 @@
186
186
  --_rs-typography-link-border-bottom-width-from-text:1px;
187
187
  }
188
188
  @media screen and (max-width: 640px){
189
- ._sizeL_g6yjva_22 [data-rs-internal='switcher__option']{
189
+ ._sizeL_1l4l2vf_22 [data-rs-internal='switcher__option']{
190
190
  --_rs-typography-list-li-margin-top-from-text:16px;
191
191
  }
192
192
  }
193
- ._modeClassic_g6yjva_26{
193
+ ._modeClassic_1l4l2vf_26{
194
194
  --_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
195
195
  --_rs-switcher-mark-border-color:var(--_rs-color-primary);
196
196
  }
197
- ._modeRock_g6yjva_29{
197
+ ._modeRock_1l4l2vf_29{
198
198
  --_rs-switcher-option-hover-background:rgba(
199
199
  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),
200
200
  0.1
201
201
  );
202
202
  --_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));
203
203
  }
204
- ._compact_g6yjva_33{
204
+ ._compact_1l4l2vf_33{
205
205
  --_rs-switcher-border-radius-from-compact:var(
206
206
  --_rs-switcher-compact-border-radius
207
207
  );
@@ -212,7 +212,7 @@
212
212
  --_rs-switcher-compact-icon-offset
213
213
  );
214
214
  }
215
- ._switcher_g6yjva_37{
215
+ ._switcher_1l4l2vf_37{
216
216
  --_rs-theme-dark:var(
217
217
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
218
218
  var(--rs-theme-dark, 0)
@@ -222,7 +222,7 @@
222
222
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
223
223
  }
224
224
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
225
- ._switcher_g6yjva_37{
225
+ ._switcher_1l4l2vf_37{
226
226
  --_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)));
227
227
  --_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)));
228
228
  --_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)));
@@ -231,7 +231,7 @@
231
231
  }
232
232
  }
233
233
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
234
- ._switcher_g6yjva_37{
234
+ ._switcher_1l4l2vf_37{
235
235
  --_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);
236
236
  --_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));
237
237
  --_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));
@@ -239,7 +239,7 @@
239
239
  --_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));
240
240
  }
241
241
  }
242
- ._switcher_g6yjva_37 {
242
+ ._switcher_1l4l2vf_37 {
243
243
 
244
244
  position:relative;
245
245
 
@@ -255,16 +255,16 @@
255
255
  background:transparent;
256
256
  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;
257
257
  }
258
- ._switcher_g6yjva_37._disabled_g6yjva_55{
258
+ ._switcher_1l4l2vf_37._disabled_1l4l2vf_55{
259
259
  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;
260
260
  }
261
- ._alignIconLeft_g6yjva_60{
261
+ ._alignIconLeft_1l4l2vf_60{
262
262
  --_rs-switcher-option-flex-direction:row;
263
263
  }
264
- ._alignIconRight_g6yjva_63{
264
+ ._alignIconRight_1l4l2vf_63{
265
265
  --_rs-switcher-option-flex-direction:row-reverse;
266
266
  }
267
- ._option_g6yjva_67{
267
+ ._option_1l4l2vf_67{
268
268
  letter-spacing:var(
269
269
  --rs-text-base-letter-spacing,
270
270
  var(--_rs-typography-letter-spacing)
@@ -315,27 +315,46 @@
315
315
  -moz-appearance:none;
316
316
  appearance:none;
317
317
  }
318
- ._disabled_g6yjva_55 ._option_g6yjva_67{
318
+ ._disabled_1l4l2vf_55 ._option_1l4l2vf_67{
319
319
  cursor:not-allowed;
320
320
  pointer-events:none;
321
321
  }
322
- ._option_g6yjva_67:focus[data-focus-method='key']{
322
+ ._option_1l4l2vf_67:focus[data-focus-method='key']{
323
323
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
324
324
  }
325
325
  @media (hover: hover){
326
- ._option_g6yjva_67:hover{
326
+ ._option_1l4l2vf_67:hover{
327
327
  background:var(--_rs-switcher-option-hover-background);
328
328
  }
329
329
  }
330
- ._option_g6yjva_67._selected_g6yjva_118:active{
330
+ ._option_1l4l2vf_67._selected_1l4l2vf_118:active{
331
331
  background:transparent;
332
332
  }
333
- ._option_g6yjva_67._selected_g6yjva_118:hover,
334
- ._option_g6yjva_67._selected_g6yjva_118:active{
333
+ ._option_1l4l2vf_67._selected_1l4l2vf_118:hover,
334
+ ._option_1l4l2vf_67._selected_1l4l2vf_118:active{
335
335
  cursor:default;
336
336
  }
337
- ._disabled_g6yjva_55 ._option_g6yjva_67,
338
- ._disabled_g6yjva_55 ._option_g6yjva_67._selected_g6yjva_118{
337
+ ._hiddenMark_1l4l2vf_127 ._option_1l4l2vf_67._selected_1l4l2vf_118::before{
338
+ position:absolute;
339
+ top:0;
340
+ right:0;
341
+ bottom:0;
342
+ left:0;
343
+
344
+ display:inline-block;
345
+
346
+ box-sizing:border-box;
347
+
348
+ border:solid 2px var(--_rs-switcher-mark-border-color);
349
+ border-radius:inherit;
350
+
351
+ content:'';
352
+ }
353
+ ._hiddenMark_1l4l2vf_127._disabled_1l4l2vf_55 ._option_1l4l2vf_67._selected_1l4l2vf_118::before{
354
+ 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);
355
+ }
356
+ ._disabled_1l4l2vf_55 ._option_1l4l2vf_67,
357
+ ._disabled_1l4l2vf_55 ._option_1l4l2vf_67._selected_1l4l2vf_118{
339
358
  color:var(
340
359
  --rs-color-pale,
341
360
  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)
@@ -345,7 +364,7 @@
345
364
 
346
365
  background:transparent;
347
366
  }
348
- ._option_g6yjva_67 ._icon_g6yjva_137{
367
+ ._option_1l4l2vf_67 ._icon_1l4l2vf_158{
349
368
  flex:0 0 auto;
350
369
 
351
370
  width:auto;
@@ -356,7 +375,7 @@
356
375
  margin-top:var(--_rs-switcher-icon-margin-vertical);
357
376
  margin-bottom:var(--_rs-switcher-icon-margin-vertical);
358
377
  }
359
- ._mark_g6yjva_150{
378
+ ._mark_1l4l2vf_171{
360
379
  position:absolute;
361
380
  top:0;
362
381
  bottom:0;
@@ -372,19 +391,22 @@
372
391
  var(--_rs-switcher-border-radius)
373
392
  );
374
393
 
375
- transition:all 0.2s;
394
+ transition:all var(--_rs-switcher-mark-transition-duration);
376
395
  }
377
- ._disabled_g6yjva_55 ._mark_g6yjva_150{
396
+ ._disabled_1l4l2vf_55 ._mark_1l4l2vf_171{
378
397
  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);
379
398
  }
399
+ ._hiddenMark_1l4l2vf_127 ._mark_1l4l2vf_171{
400
+ display:none;
401
+ }
380
402
 
381
- ._themeLight_82io4v_6{
403
+ ._themeLight_1elh7si_6{
382
404
  --rs-theme-dark:0;
383
405
  }
384
- ._themeDark_82io4v_9{
406
+ ._themeDark_1elh7si_9{
385
407
  --rs-theme-dark:1;
386
408
  }
387
- ._sizeXS_82io4v_13{
409
+ ._sizeXS_1elh7si_13{
388
410
  --_rs-switcher-vertical-border-radius:4px;
389
411
  --_rs-switcher-vertical-option-vertical-padding:2px;
390
412
  --_rs-switcher-vertical-option-horizontal-padding:8px;
@@ -392,7 +414,7 @@
392
414
  --_rs-switcher-vertical-icon-offset:4px;
393
415
  --_rs-switcher-vertical-icon-margin-vertical:2px;
394
416
  }
395
- ._sizeXS_82io4v_13 [data-rs-internal='vertical-switcher__option']{
417
+ ._sizeXS_1elh7si_13 [data-rs-internal='vertical-switcher__option']{
396
418
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
397
419
  --_rs-typography-text-transform:initial;
398
420
  --_rs-typography-font-variant-numeric:initial;
@@ -426,7 +448,7 @@
426
448
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
427
449
  --_rs-typography-link-border-bottom-width-from-text:1px;
428
450
  }
429
- ._sizeS_82io4v_16{
451
+ ._sizeS_1elh7si_16{
430
452
  --_rs-switcher-vertical-border-radius:4px;
431
453
  --_rs-switcher-vertical-option-vertical-padding:6px;
432
454
  --_rs-switcher-vertical-option-horizontal-padding:12px;
@@ -434,7 +456,7 @@
434
456
  --_rs-switcher-vertical-icon-offset:4px;
435
457
  --_rs-switcher-vertical-icon-margin-vertical:0px;
436
458
  }
437
- ._sizeS_82io4v_16 [data-rs-internal='vertical-switcher__option']{
459
+ ._sizeS_1elh7si_16 [data-rs-internal='vertical-switcher__option']{
438
460
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
439
461
  --_rs-typography-text-transform:initial;
440
462
  --_rs-typography-font-variant-numeric:initial;
@@ -468,7 +490,7 @@
468
490
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
469
491
  --_rs-typography-link-border-bottom-width-from-text:1px;
470
492
  }
471
- ._sizeM_82io4v_19{
493
+ ._sizeM_1elh7si_19{
472
494
  --_rs-switcher-vertical-border-radius:8px;
473
495
  --_rs-switcher-vertical-option-vertical-padding:8px;
474
496
  --_rs-switcher-vertical-option-horizontal-padding:16px;
@@ -476,7 +498,7 @@
476
498
  --_rs-switcher-vertical-icon-offset:8px;
477
499
  --_rs-switcher-vertical-icon-margin-vertical:0px;
478
500
  }
479
- ._sizeM_82io4v_19 [data-rs-internal='vertical-switcher__option']{
501
+ ._sizeM_1elh7si_19 [data-rs-internal='vertical-switcher__option']{
480
502
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
481
503
  --_rs-typography-text-transform:initial;
482
504
  --_rs-typography-font-variant-numeric:initial;
@@ -511,11 +533,11 @@
511
533
  --_rs-typography-link-border-bottom-width-from-text:1px;
512
534
  }
513
535
  @media screen and (max-width: 640px){
514
- ._sizeM_82io4v_19 [data-rs-internal='vertical-switcher__option']{
536
+ ._sizeM_1elh7si_19 [data-rs-internal='vertical-switcher__option']{
515
537
  --_rs-typography-list-li-margin-top-from-text:12px;
516
538
  }
517
539
  }
518
- ._sizeL_82io4v_22{
540
+ ._sizeL_1elh7si_22{
519
541
  --_rs-switcher-vertical-border-radius:12px;
520
542
  --_rs-switcher-vertical-option-vertical-padding:12px;
521
543
  --_rs-switcher-vertical-option-horizontal-padding:24px;
@@ -523,7 +545,7 @@
523
545
  --_rs-switcher-vertical-icon-offset:12px;
524
546
  --_rs-switcher-vertical-icon-margin-vertical:0px;
525
547
  }
526
- ._sizeL_82io4v_22 [data-rs-internal='vertical-switcher__option']{
548
+ ._sizeL_1elh7si_22 [data-rs-internal='vertical-switcher__option']{
527
549
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
528
550
  --_rs-typography-text-transform:initial;
529
551
  --_rs-typography-font-variant-numeric:initial;
@@ -558,17 +580,17 @@
558
580
  --_rs-typography-link-border-bottom-width-from-text:1px;
559
581
  }
560
582
  @media screen and (max-width: 640px){
561
- ._sizeL_82io4v_22 [data-rs-internal='vertical-switcher__option']{
583
+ ._sizeL_1elh7si_22 [data-rs-internal='vertical-switcher__option']{
562
584
  --_rs-typography-list-li-margin-top-from-text:16px;
563
585
  }
564
586
  }
565
- ._modeClassic_82io4v_26{
587
+ ._modeClassic_1elh7si_26{
566
588
  --_rs-switcher-vertical-option-hover-background:var(
567
589
  --_rs-color-primary-t-fog
568
590
  );
569
591
  --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
570
592
  }
571
- ._modeRock_82io4v_29{
593
+ ._modeRock_1elh7si_29{
572
594
  --_rs-switcher-vertical-option-hover-background:rgba(
573
595
  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),
574
596
  0.1
@@ -577,7 +599,7 @@
577
599
  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)
578
600
  );
579
601
  }
580
- ._verticalSwitcher_82io4v_33{
602
+ ._verticalSwitcher_1elh7si_33{
581
603
  --_rs-theme-dark:var(
582
604
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
583
605
  var(--rs-theme-dark, 0)
@@ -587,7 +609,7 @@
587
609
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
588
610
  }
589
611
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
590
- ._verticalSwitcher_82io4v_33{
612
+ ._verticalSwitcher_1elh7si_33{
591
613
  --_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)));
592
614
  --_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)));
593
615
  --_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)));
@@ -596,7 +618,7 @@
596
618
  }
597
619
  }
598
620
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
599
- ._verticalSwitcher_82io4v_33{
621
+ ._verticalSwitcher_1elh7si_33{
600
622
  --_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);
601
623
  --_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));
602
624
  --_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));
@@ -604,7 +626,7 @@
604
626
  --_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));
605
627
  }
606
628
  }
607
- ._verticalSwitcher_82io4v_33 {
629
+ ._verticalSwitcher_1elh7si_33 {
608
630
 
609
631
  position:relative;
610
632
 
@@ -619,16 +641,16 @@
619
641
  background:transparent;
620
642
  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;
621
643
  }
622
- ._verticalSwitcher_82io4v_33._disabled_82io4v_50{
644
+ ._verticalSwitcher_1elh7si_33._disabled_1elh7si_50{
623
645
  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;
624
646
  }
625
- ._alignIconLeft_82io4v_55{
647
+ ._alignIconLeft_1elh7si_55{
626
648
  --_rs-switcher-vertical-option-flex-direction:row;
627
649
  }
628
- ._alignIconRight_82io4v_58{
650
+ ._alignIconRight_1elh7si_58{
629
651
  --_rs-switcher-vertical-option-flex-direction:row-reverse;
630
652
  }
631
- ._option_82io4v_62{
653
+ ._option_1elh7si_62{
632
654
  letter-spacing:var(
633
655
  --rs-text-base-letter-spacing,
634
656
  var(--_rs-typography-letter-spacing)
@@ -672,27 +694,46 @@
672
694
  -moz-appearance:none;
673
695
  appearance:none;
674
696
  }
675
- ._disabled_82io4v_50 ._option_82io4v_62{
697
+ ._disabled_1elh7si_50 ._option_1elh7si_62{
676
698
  cursor:not-allowed;
677
699
  pointer-events:none;
678
700
  }
679
- ._option_82io4v_62:focus[data-focus-method='key']{
701
+ ._option_1elh7si_62:focus[data-focus-method='key']{
680
702
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
681
703
  }
682
704
  @media (hover: hover){
683
- ._option_82io4v_62:hover{
705
+ ._option_1elh7si_62:hover{
684
706
  background:var(--_rs-switcher-vertical-option-hover-background);
685
707
  }
686
708
  }
687
- ._option_82io4v_62._selected_82io4v_107:active{
709
+ ._option_1elh7si_62._selected_1elh7si_107:active{
688
710
  background:transparent;
689
711
  }
690
- ._option_82io4v_62._selected_82io4v_107:hover,
691
- ._option_82io4v_62._selected_82io4v_107:active{
712
+ ._option_1elh7si_62._selected_1elh7si_107:hover,
713
+ ._option_1elh7si_62._selected_1elh7si_107:active{
692
714
  cursor:default;
693
715
  }
694
- ._disabled_82io4v_50 ._option_82io4v_62,
695
- ._disabled_82io4v_50 ._option_82io4v_62._selected_82io4v_107{
716
+ ._hiddenMark_1elh7si_116 ._option_1elh7si_62._selected_1elh7si_107::before{
717
+ position:absolute;
718
+ top:0;
719
+ right:0;
720
+ bottom:0;
721
+ left:0;
722
+
723
+ display:inline-block;
724
+
725
+ box-sizing:border-box;
726
+
727
+ border:solid 2px var(--_rs-switcher-vertical-mark-border-color);
728
+ border-radius:inherit;
729
+
730
+ content:'';
731
+ }
732
+ ._hiddenMark_1elh7si_116._disabled_1elh7si_50 ._option_1elh7si_62._selected_1elh7si_107::before{
733
+ 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);
734
+ }
735
+ ._disabled_1elh7si_50 ._option_1elh7si_62,
736
+ ._disabled_1elh7si_50 ._option_1elh7si_62._selected_1elh7si_107{
696
737
  color:var(
697
738
  --rs-color-pale,
698
739
  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)
@@ -702,12 +743,12 @@
702
743
 
703
744
  background:transparent;
704
745
  }
705
- ._option_82io4v_62 ._optionLabel_82io4v_126{
746
+ ._option_1elh7si_62 ._optionLabel_1elh7si_147{
706
747
  flex:1 1 auto;
707
748
 
708
749
  text-align:left;
709
750
  }
710
- ._option_82io4v_62 ._icon_82io4v_132{
751
+ ._option_1elh7si_62 ._icon_1elh7si_153{
711
752
  flex:0 0 auto;
712
753
 
713
754
  width:auto;
@@ -718,12 +759,12 @@
718
759
 
719
760
  fill:currentColor;
720
761
  }
721
- ._option_82io4v_62 ._fakeIcon_82io4v_143{
762
+ ._option_1elh7si_62 ._fakeIcon_1elh7si_164{
722
763
  display:inline-block;
723
764
 
724
765
  width:var(--_rs-switcher-vertical-icon-size);
725
766
  }
726
- ._mark_82io4v_150{
767
+ ._mark_1elh7si_171{
727
768
  position:absolute;
728
769
  right:0;
729
770
  left:0;
@@ -736,8 +777,11 @@
736
777
 
737
778
  border-radius:var(--_rs-switcher-vertical-border-radius);
738
779
 
739
- transition:all 0.2s;
780
+ transition:all var(--_rs-switcher-vertical-mark-transition-duration);
740
781
  }
741
- ._disabled_82io4v_50 ._mark_82io4v_150{
782
+ ._disabled_1elh7si_50 ._mark_1elh7si_171{
742
783
  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);
743
784
  }
785
+ ._hiddenMark_1elh7si_116 ._mark_1elh7si_171{
786
+ display:none;
787
+ }
package/lib/switcher.d.ts CHANGED
@@ -28,8 +28,10 @@ export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
28
28
  'data-e2e'?: string;
29
29
  /** **Works only if the `icon` on options is present.** Additional icon position. */
30
30
  iconPosition?: SwitcherOptionIconPosition;
31
+ /** CSS style object */
32
+ style?: React.CSSProperties;
31
33
  }
32
- export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
34
+ export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange, style }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
33
35
  export declare namespace Switcher {
34
36
  var propTypes: {};
35
37
  }
package/lib/switcher.js CHANGED
@@ -4,6 +4,7 @@ import cn from 'classnames';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
5
  import { useResizeObserver } from '@rescui/use-resize-observer';
6
6
  import styles from './switcher.p.module.css.js';
7
+ const MARK_TRANSITION_DURATION = '0.2s';
7
8
  const sizeToClass = {
8
9
  l: styles.sizeL,
9
10
  m: styles.sizeM,
@@ -64,7 +65,8 @@ function Switcher(_ref2) {
64
65
  value: switcherValue,
65
66
  mode = 'classic',
66
67
  iconPosition = 'left',
67
- onChange
68
+ onChange,
69
+ style
68
70
  } = _ref2;
69
71
  const refsArray = useRef([]);
70
72
  const containerRef = useRef(null);
@@ -81,10 +83,14 @@ function Switcher(_ref2) {
81
83
  const activeIndex = findIndexByValue(options, switcherValue);
82
84
  const [mark, setMark] = useState({
83
85
  offset: 0,
84
- width: 0
86
+ width: 0,
87
+ hidden: true
85
88
  });
89
+ const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
90
+ const firstMarkUpdate = useRef(true);
86
91
 
87
- const onResize = () => {
92
+ const updateMark = function () {
93
+ let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
88
94
  const activeEl = refsArray.current[activeIndex];
89
95
 
90
96
  if (!activeEl) {
@@ -96,19 +102,30 @@ function Switcher(_ref2) {
96
102
  setMark({
97
103
  // standard activeEl.offsetLeft always return rounded value, so it does not suit us
98
104
  offset: activeElBox.left - parentBox.left,
99
- width: activeElBox.width
105
+ width: activeElBox.width,
106
+ hidden: false
100
107
  });
108
+
109
+ if (firstMarkUpdate.current) {
110
+ firstMarkUpdate.current = false;
111
+ setIsMarkTransitionEnabled(false);
112
+ } else {
113
+ setIsMarkTransitionEnabled(isValueChanged);
114
+ }
101
115
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
102
116
 
103
117
 
104
- useEffect(() => onResize(), [activeIndex]);
105
- useResizeObserver(containerRef, onResize);
118
+ useEffect(() => updateMark(true), [activeIndex]);
119
+ useResizeObserver(containerRef, () => updateMark(false));
106
120
  return /*#__PURE__*/React.createElement("span", {
107
- className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
121
+ className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
108
122
  "data-e2e": e2eId,
109
123
  ref: containerRef,
110
124
  "data-rs-internal": 'switcher',
111
- "data-test": cn(`switcher`, disabled && `switcher-disabled`)
125
+ "data-test": cn(`switcher`, disabled && `switcher-disabled`),
126
+ style: { ...style,
127
+ '--_rs-switcher-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
128
+ }
112
129
  }, options.map((_ref3, index) => {
113
130
  var _options$activeIndex;
114
131
 
@@ -150,6 +167,7 @@ Switcher.propTypes = {
150
167
  theme: PropTypes.oneOf(['light', 'dark']),
151
168
  disabled: PropTypes.bool,
152
169
  iconPosition: PropTypes.oneOf(['left', 'right']),
153
- 'data-e2e': PropTypes.string
170
+ 'data-e2e': PropTypes.string,
171
+ style: PropTypes.object
154
172
  };
155
173
  export { Switcher, Switcher as default };
package/lib/switcher.p.module.css.js CHANGED
@@ -1,20 +1,21 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_g6yjva_6",
3
- "themeDark": "_themeDark_g6yjva_9",
4
- "sizeXS": "_sizeXS_g6yjva_13",
5
- "sizeS": "_sizeS_g6yjva_16",
6
- "sizeM": "_sizeM_g6yjva_19",
7
- "sizeL": "_sizeL_g6yjva_22",
8
- "modeClassic": "_modeClassic_g6yjva_26",
9
- "modeRock": "_modeRock_g6yjva_29",
10
- "compact": "_compact_g6yjva_33",
11
- "switcher": "_switcher_g6yjva_37",
12
- "disabled": "_disabled_g6yjva_55",
13
- "alignIconLeft": "_alignIconLeft_g6yjva_60",
14
- "alignIconRight": "_alignIconRight_g6yjva_63",
15
- "option": "_option_g6yjva_67",
16
- "selected": "_selected_g6yjva_118",
17
- "icon": "_icon_g6yjva_137",
18
- "mark": "_mark_g6yjva_150"
2
+ "themeLight": "_themeLight_1l4l2vf_6",
3
+ "themeDark": "_themeDark_1l4l2vf_9",
4
+ "sizeXS": "_sizeXS_1l4l2vf_13",
5
+ "sizeS": "_sizeS_1l4l2vf_16",
6
+ "sizeM": "_sizeM_1l4l2vf_19",
7
+ "sizeL": "_sizeL_1l4l2vf_22",
8
+ "modeClassic": "_modeClassic_1l4l2vf_26",
9
+ "modeRock": "_modeRock_1l4l2vf_29",
10
+ "compact": "_compact_1l4l2vf_33",
11
+ "switcher": "_switcher_1l4l2vf_37",
12
+ "disabled": "_disabled_1l4l2vf_55",
13
+ "alignIconLeft": "_alignIconLeft_1l4l2vf_60",
14
+ "alignIconRight": "_alignIconRight_1l4l2vf_63",
15
+ "option": "_option_1l4l2vf_67",
16
+ "selected": "_selected_1l4l2vf_118",
17
+ "hiddenMark": "_hiddenMark_1l4l2vf_127",
18
+ "icon": "_icon_1l4l2vf_158",
19
+ "mark": "_mark_1l4l2vf_171"
19
20
  };
20
21
  export { styles as default };
package/lib/vertical-switcher.js CHANGED
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
3
3
  import cn from 'classnames';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
5
  import { useResizeObserver } from '@rescui/use-resize-observer';
6
- import styles from './vertical-switcher.p.module.css.js'; // eslint-disable-next-line @typescript-eslint/no-empty-function
6
+ import styles from './vertical-switcher.p.module.css.js';
7
+ const MARK_TRANSITION_DURATION = '0.2s'; // eslint-disable-next-line @typescript-eslint/no-empty-function
7
8
 
8
9
  const noop = () => {};
9
10
 
@@ -146,10 +147,14 @@ function VerticalSwitcher(_ref3) {
146
147
  }, []);
147
148
  const [mark, setMark] = useState({
148
149
  offset: 0,
149
- height: 0
150
+ height: 0,
151
+ hidden: true
150
152
  });
153
+ const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
154
+ const firstMarkUpdate = useRef(true);
151
155
 
152
- const onResize = () => {
156
+ const updateMark = function () {
157
+ let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
153
158
  const activeEl = refsArray.current[activeIndex];
154
159
 
155
160
  if (!activeEl) {
@@ -162,20 +167,32 @@ function VerticalSwitcher(_ref3) {
162
167
  setMark({
163
168
  // standard activeEl.offsetTop always return rounded value, so it does not suit us
164
169
  offset: activeElBox.top - parentBox.top + parentEl.scrollTop,
165
- height: activeElBox.height
170
+ height: activeElBox.height,
171
+ hidden: false
166
172
  });
173
+
174
+ if (firstMarkUpdate.current) {
175
+ firstMarkUpdate.current = false;
176
+ setIsMarkTransitionEnabled(false);
177
+ } else {
178
+ setIsMarkTransitionEnabled(isValueChanged);
179
+ }
167
180
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
168
181
 
169
182
 
170
- useEffect(() => onResize(), [activeIndex]);
171
- useResizeObserver(containerRef, onResize);
183
+ useEffect(() => updateMark(true), [activeIndex]);
184
+ useResizeObserver(containerRef, () => updateMark(false), {
185
+ ignoreFirstCall: true
186
+ });
172
187
  return /*#__PURE__*/React.createElement("span", {
173
- className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
188
+ className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
174
189
  "data-e2e": e2eId,
175
190
  ref: containerRef,
176
191
  "data-rs-internal": 'vertical-switcher',
177
192
  "data-test": cn(`vertical-switcher`, disabled && `vertical-switcher-disabled`),
178
- style: style
193
+ style: { ...style,
194
+ '--_rs-switcher-vertical-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
195
+ }
179
196
  }, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
180
197
  value: {
181
198
  switcherValue: (_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.value,
package/lib/vertical-switcher.p.module.css.js CHANGED
@@ -1,21 +1,22 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_82io4v_6",
3
- "themeDark": "_themeDark_82io4v_9",
4
- "sizeXS": "_sizeXS_82io4v_13",
5
- "sizeS": "_sizeS_82io4v_16",
6
- "sizeM": "_sizeM_82io4v_19",
7
- "sizeL": "_sizeL_82io4v_22",
8
- "modeClassic": "_modeClassic_82io4v_26",
9
- "modeRock": "_modeRock_82io4v_29",
10
- "verticalSwitcher": "_verticalSwitcher_82io4v_33",
11
- "disabled": "_disabled_82io4v_50",
12
- "alignIconLeft": "_alignIconLeft_82io4v_55",
13
- "alignIconRight": "_alignIconRight_82io4v_58",
14
- "option": "_option_82io4v_62",
15
- "selected": "_selected_82io4v_107",
16
- "optionLabel": "_optionLabel_82io4v_126",
17
- "icon": "_icon_82io4v_132",
18
- "fakeIcon": "_fakeIcon_82io4v_143",
19
- "mark": "_mark_82io4v_150"
2
+ "themeLight": "_themeLight_1elh7si_6",
3
+ "themeDark": "_themeDark_1elh7si_9",
4
+ "sizeXS": "_sizeXS_1elh7si_13",
5
+ "sizeS": "_sizeS_1elh7si_16",
6
+ "sizeM": "_sizeM_1elh7si_19",
7
+ "sizeL": "_sizeL_1elh7si_22",
8
+ "modeClassic": "_modeClassic_1elh7si_26",
9
+ "modeRock": "_modeRock_1elh7si_29",
10
+ "verticalSwitcher": "_verticalSwitcher_1elh7si_33",
11
+ "disabled": "_disabled_1elh7si_50",
12
+ "alignIconLeft": "_alignIconLeft_1elh7si_55",
13
+ "alignIconRight": "_alignIconRight_1elh7si_58",
14
+ "option": "_option_1elh7si_62",
15
+ "selected": "_selected_1elh7si_107",
16
+ "hiddenMark": "_hiddenMark_1elh7si_116",
17
+ "optionLabel": "_optionLabel_1elh7si_147",
18
+ "icon": "_icon_1elh7si_153",
19
+ "fakeIcon": "_fakeIcon_1elh7si_164",
20
+ "mark": "_mark_1elh7si_171"
20
21
  };
21
22
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/switcher",
3
- "version": "0.10.7",
3
+ "version": "0.11.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -36,5 +36,5 @@
36
36
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
37
37
  },
38
38
  "nx": {},
39
- "gitHead": "94b4b5531e261cde472a2218ace4a21d7b0f990f"
39
+ "gitHead": "3af08f3c5ae8423986d7de93b2377e030cd55e0d"
40
40
  }