@rescui/switcher 0.12.11 → 0.13.1-RUI-293-Update-menu-component-7a032357e.20

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 (15) hide show
  1. package/README.md +4 -2
  2. package/lib/index.css +109 -77
  3. package/lib/index.d.ts +10 -10
  4. package/lib/index.js +2 -2
  5. package/lib/switcher.d.ts +64 -38
  6. package/lib/switcher.js +30 -16
  7. package/lib/switcher.p.module.css.js +19 -18
  8. package/lib/use-safe-id.d.ts +2 -0
  9. package/lib/use-safe-id.js +15 -0
  10. package/lib/vertical-switcher.d.ts +62 -35
  11. package/lib/vertical-switcher.js +34 -18
  12. package/lib/vertical-switcher.p.module.css.js +20 -19
  13. package/llm/components/switcher.md +325 -0
  14. package/llm/index.md +2 -0
  15. package/package.json +8 -7
package/README.md CHANGED
@@ -1,3 +1,5 @@
1
- # Switcher
1
+ # Switcher and VerticalSwitcher
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/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._themeLight_1whkdot_6{
1
+ ._themeLight_dklen2_6{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_1whkdot_9{
4
+ ._themeDark_dklen2_9{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._sizeXS_1whkdot_13{
7
+ ._sizeXS_dklen2_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_1whkdot_13 [data-rs-internal='switcher__option']{
17
+ ._sizeXS_dklen2_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_1whkdot_16{
52
+ ._sizeS_dklen2_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_1whkdot_16 [data-rs-internal='switcher__option']{
62
+ ._sizeS_dklen2_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_1whkdot_19{
97
+ ._sizeM_dklen2_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_1whkdot_19 [data-rs-internal='switcher__option']{
107
+ ._sizeM_dklen2_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_1whkdot_19 [data-rs-internal='switcher__option']{
146
+ ._sizeM_dklen2_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_1whkdot_22{
150
+ ._sizeL_dklen2_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_1whkdot_22 [data-rs-internal='switcher__option']{
160
+ ._sizeL_dklen2_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_1whkdot_22 [data-rs-internal='switcher__option']{
199
+ ._sizeL_dklen2_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_1whkdot_26{
203
+ ._modeClassic_dklen2_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_1whkdot_29{
207
+ ._modeRock_dklen2_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_1whkdot_33{
214
+ ._compact_dklen2_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_1whkdot_37{
225
+ ._switcher_dklen2_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_1whkdot_37{
235
+ ._switcher_dklen2_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_1whkdot_37{
244
+ ._switcher_dklen2_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_1whkdot_37 {
252
+ ._switcher_dklen2_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_1whkdot_37._disabled_1whkdot_55{
268
+ ._switcher_dklen2_37._disabled_dklen2_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_1whkdot_60{
271
+ ._alignIconLeft_dklen2_60{
272
272
  --_rs-switcher-option-flex-direction:row;
273
273
  }
274
- ._alignIconRight_1whkdot_63{
274
+ ._alignIconRight_dklen2_63{
275
275
  --_rs-switcher-option-flex-direction:row-reverse;
276
276
  }
277
- ._option_1whkdot_67{
277
+ ._option_dklen2_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_1whkdot_55 ._option_1whkdot_67{
328
+ ._disabled_dklen2_55 ._option_dklen2_67{
329
329
  cursor:not-allowed;
330
330
  pointer-events:none;
331
331
  }
332
- ._option_1whkdot_67:focus[data-focus-method='key']{
332
+ ._option_dklen2_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_1whkdot_67:hover{
336
+ ._option_dklen2_67:hover{
337
337
  background:var(--_rs-switcher-option-hover-background);
338
338
  }
339
339
  }
340
- ._option_1whkdot_67._selected_1whkdot_118:active{
340
+ ._option_dklen2_67._selected_dklen2_118:active{
341
341
  background:transparent;
342
342
  }
343
- ._option_1whkdot_67._selected_1whkdot_118:hover,
344
- ._option_1whkdot_67._selected_1whkdot_118:active{
343
+ ._option_dklen2_67._selected_dklen2_118:hover,
344
+ ._option_dklen2_67._selected_dklen2_118:active{
345
345
  cursor:default;
346
346
  }
347
- ._hiddenMark_1whkdot_127 ._option_1whkdot_67._selected_1whkdot_118::before{
347
+ ._hiddenMark_dklen2_127 ._option_dklen2_67._selected_dklen2_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_1whkdot_127._disabled_1whkdot_55 ._option_1whkdot_67._selected_1whkdot_118::before{
363
+ ._hiddenMark_dklen2_127._disabled_dklen2_55 ._option_dklen2_67._selected_dklen2_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_1whkdot_55 ._option_1whkdot_67,
367
- ._disabled_1whkdot_55 ._option_1whkdot_67._selected_1whkdot_118{
366
+ ._disabled_dklen2_55 ._option_dklen2_67,
367
+ ._disabled_dklen2_55 ._option_dklen2_67._selected_dklen2_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_1whkdot_67 ._icon_1whkdot_158{
377
+ ._option_dklen2_67 ._icon_dklen2_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_1whkdot_171{
388
+ ._mark_dklen2_171{
389
389
  position:absolute;
390
390
  top:0;
391
391
  bottom:0;
@@ -401,22 +401,38 @@
401
401
  var(--_rs-switcher-border-radius)
402
402
  );
403
403
 
404
- transition:all var(--_rs-switcher-mark-transition-duration);
404
+ transition:all var(--_rs-switcher-mark-transition-duration) var(--rs-transition-function, ease);
405
405
  }
406
- ._disabled_1whkdot_55 ._mark_1whkdot_171{
406
+ ._disabled_dklen2_55 ._mark_dklen2_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_1whkdot_127 ._mark_1whkdot_171{
409
+ ._hiddenMark_dklen2_127 ._mark_dklen2_171{
410
410
  display:none;
411
411
  }
412
+ ._radio_dklen2_199{
413
+ position:absolute;
414
+
415
+ overflow:hidden;
416
+ clip:rect(0 0 0 0);
417
+
418
+ width:1px;
419
+ height:1px;
420
+ margin:-1px;
421
+ padding:0;
422
+
423
+ border:none;
424
+
425
+ white-space:nowrap;
426
+ clip-path:inset(50%);
427
+ }
412
428
 
413
- ._themeLight_8t4v3o_6{
429
+ ._themeLight_z9i77r_6{
414
430
  --rs-theme-dark:0;
415
431
  }
416
- ._themeDark_8t4v3o_9{
432
+ ._themeDark_z9i77r_9{
417
433
  --rs-theme-dark:1;
418
434
  }
419
- ._sizeXS_8t4v3o_13{
435
+ ._sizeXS_z9i77r_13{
420
436
  --_rs-switcher-vertical-border-radius:4px;
421
437
  --_rs-switcher-vertical-option-vertical-padding:2px;
422
438
  --_rs-switcher-vertical-option-horizontal-padding:8px;
@@ -424,7 +440,7 @@
424
440
  --_rs-switcher-vertical-icon-offset:4px;
425
441
  --_rs-switcher-vertical-icon-margin-vertical:2px;
426
442
  }
427
- ._sizeXS_8t4v3o_13 [data-rs-internal='vertical-switcher__option']{
443
+ ._sizeXS_z9i77r_13 [data-rs-internal='vertical-switcher__option']{
428
444
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
429
445
  --_rs-typography-text-transform:initial;
430
446
  --_rs-typography-font-variant-numeric:initial;
@@ -459,7 +475,7 @@
459
475
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
460
476
  --_rs-typography-link-border-bottom-width-from-text:1px;
461
477
  }
462
- ._sizeS_8t4v3o_16{
478
+ ._sizeS_z9i77r_16{
463
479
  --_rs-switcher-vertical-border-radius:4px;
464
480
  --_rs-switcher-vertical-option-vertical-padding:6px;
465
481
  --_rs-switcher-vertical-option-horizontal-padding:12px;
@@ -467,7 +483,7 @@
467
483
  --_rs-switcher-vertical-icon-offset:4px;
468
484
  --_rs-switcher-vertical-icon-margin-vertical:0px;
469
485
  }
470
- ._sizeS_8t4v3o_16 [data-rs-internal='vertical-switcher__option']{
486
+ ._sizeS_z9i77r_16 [data-rs-internal='vertical-switcher__option']{
471
487
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
472
488
  --_rs-typography-text-transform:initial;
473
489
  --_rs-typography-font-variant-numeric:initial;
@@ -502,7 +518,7 @@
502
518
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
503
519
  --_rs-typography-link-border-bottom-width-from-text:1px;
504
520
  }
505
- ._sizeM_8t4v3o_19{
521
+ ._sizeM_z9i77r_19{
506
522
  --_rs-switcher-vertical-border-radius:8px;
507
523
  --_rs-switcher-vertical-option-vertical-padding:8px;
508
524
  --_rs-switcher-vertical-option-horizontal-padding:16px;
@@ -510,7 +526,7 @@
510
526
  --_rs-switcher-vertical-icon-offset:8px;
511
527
  --_rs-switcher-vertical-icon-margin-vertical:0px;
512
528
  }
513
- ._sizeM_8t4v3o_19 [data-rs-internal='vertical-switcher__option']{
529
+ ._sizeM_z9i77r_19 [data-rs-internal='vertical-switcher__option']{
514
530
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
515
531
  --_rs-typography-text-transform:initial;
516
532
  --_rs-typography-font-variant-numeric:initial;
@@ -549,11 +565,11 @@
549
565
  --_rs-typography-link-border-bottom-width-from-text:1px;
550
566
  }
551
567
  @media screen and (max-width: 640px){
552
- ._sizeM_8t4v3o_19 [data-rs-internal='vertical-switcher__option']{
568
+ ._sizeM_z9i77r_19 [data-rs-internal='vertical-switcher__option']{
553
569
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
554
570
  }
555
571
  }
556
- ._sizeL_8t4v3o_22{
572
+ ._sizeL_z9i77r_22{
557
573
  --_rs-switcher-vertical-border-radius:12px;
558
574
  --_rs-switcher-vertical-option-vertical-padding:12px;
559
575
  --_rs-switcher-vertical-option-horizontal-padding:24px;
@@ -561,7 +577,7 @@
561
577
  --_rs-switcher-vertical-icon-offset:12px;
562
578
  --_rs-switcher-vertical-icon-margin-vertical:0px;
563
579
  }
564
- ._sizeL_8t4v3o_22 [data-rs-internal='vertical-switcher__option']{
580
+ ._sizeL_z9i77r_22 [data-rs-internal='vertical-switcher__option']{
565
581
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
566
582
  --_rs-typography-text-transform:initial;
567
583
  --_rs-typography-font-variant-numeric:initial;
@@ -600,17 +616,17 @@
600
616
  --_rs-typography-link-border-bottom-width-from-text:1px;
601
617
  }
602
618
  @media screen and (max-width: 640px){
603
- ._sizeL_8t4v3o_22 [data-rs-internal='vertical-switcher__option']{
619
+ ._sizeL_z9i77r_22 [data-rs-internal='vertical-switcher__option']{
604
620
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
605
621
  }
606
622
  }
607
- ._modeClassic_8t4v3o_26{
623
+ ._modeClassic_z9i77r_26{
608
624
  --_rs-switcher-vertical-option-hover-background:var(
609
625
  --_rs-color-primary-t-fog
610
626
  );
611
627
  --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
612
628
  }
613
- ._modeRock_8t4v3o_29{
629
+ ._modeRock_z9i77r_29{
614
630
  --_rs-switcher-vertical-option-hover-background:rgba(
615
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),
616
632
  0.1
@@ -619,7 +635,7 @@
619
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)
620
636
  );
621
637
  }
622
- ._verticalSwitcher_8t4v3o_33{
638
+ ._verticalSwitcher_z9i77r_33{
623
639
  --_rs-theme-dark:var(
624
640
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
625
641
  var(--rs-theme-dark, 0)
@@ -629,7 +645,7 @@
629
645
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
630
646
  }
631
647
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
632
- ._verticalSwitcher_8t4v3o_33{
648
+ ._verticalSwitcher_z9i77r_33{
633
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)));
634
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)));
635
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)));
@@ -638,7 +654,7 @@
638
654
  }
639
655
  }
640
656
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
641
- ._verticalSwitcher_8t4v3o_33{
657
+ ._verticalSwitcher_z9i77r_33{
642
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);
643
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));
644
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));
@@ -646,7 +662,7 @@
646
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));
647
663
  }
648
664
  }
649
- ._verticalSwitcher_8t4v3o_33 {
665
+ ._verticalSwitcher_z9i77r_33 {
650
666
 
651
667
  position:relative;
652
668
 
@@ -661,16 +677,16 @@
661
677
  background:transparent;
662
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;
663
679
  }
664
- ._verticalSwitcher_8t4v3o_33._disabled_8t4v3o_50{
680
+ ._verticalSwitcher_z9i77r_33._disabled_z9i77r_50{
665
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;
666
682
  }
667
- ._alignIconLeft_8t4v3o_55{
683
+ ._alignIconLeft_z9i77r_55{
668
684
  --_rs-switcher-vertical-option-flex-direction:row;
669
685
  }
670
- ._alignIconRight_8t4v3o_58{
686
+ ._alignIconRight_z9i77r_58{
671
687
  --_rs-switcher-vertical-option-flex-direction:row-reverse;
672
688
  }
673
- ._option_8t4v3o_62{
689
+ ._option_z9i77r_62{
674
690
  letter-spacing:var(
675
691
  --rs-text-base-letter-spacing,
676
692
  var(--_rs-typography-letter-spacing)
@@ -714,26 +730,26 @@
714
730
  -moz-appearance:none;
715
731
  appearance:none;
716
732
  }
717
- ._disabled_8t4v3o_50 ._option_8t4v3o_62{
733
+ ._disabled_z9i77r_50 ._option_z9i77r_62{
718
734
  cursor:not-allowed;
719
735
  pointer-events:none;
720
736
  }
721
- ._option_8t4v3o_62:focus[data-focus-method='key']{
737
+ ._option_z9i77r_62:has(:focus[data-focus-method='key']){
722
738
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
723
739
  }
724
740
  @media (hover: hover){
725
- ._option_8t4v3o_62:hover{
741
+ ._option_z9i77r_62:hover{
726
742
  background:var(--_rs-switcher-vertical-option-hover-background);
727
743
  }
728
744
  }
729
- ._option_8t4v3o_62._selected_8t4v3o_107:active{
745
+ ._option_z9i77r_62._selected_z9i77r_107:active{
730
746
  background:transparent;
731
747
  }
732
- ._option_8t4v3o_62._selected_8t4v3o_107:hover,
733
- ._option_8t4v3o_62._selected_8t4v3o_107:active{
748
+ ._option_z9i77r_62._selected_z9i77r_107:hover,
749
+ ._option_z9i77r_62._selected_z9i77r_107:active{
734
750
  cursor:default;
735
751
  }
736
- ._hiddenMark_8t4v3o_116 ._option_8t4v3o_62._selected_8t4v3o_107::before{
752
+ ._hiddenMark_z9i77r_116 ._option_z9i77r_62._selected_z9i77r_107::before{
737
753
  position:absolute;
738
754
  top:0;
739
755
  right:0;
@@ -749,11 +765,11 @@
749
765
 
750
766
  content:'';
751
767
  }
752
- ._hiddenMark_8t4v3o_116._disabled_8t4v3o_50 ._option_8t4v3o_62._selected_8t4v3o_107::before{
768
+ ._hiddenMark_z9i77r_116._disabled_z9i77r_50 ._option_z9i77r_62._selected_z9i77r_107::before{
753
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);
754
770
  }
755
- ._disabled_8t4v3o_50 ._option_8t4v3o_62,
756
- ._disabled_8t4v3o_50 ._option_8t4v3o_62._selected_8t4v3o_107{
771
+ ._disabled_z9i77r_50 ._option_z9i77r_62,
772
+ ._disabled_z9i77r_50 ._option_z9i77r_62._selected_z9i77r_107{
757
773
  color:var(
758
774
  --rs-color-pale,
759
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)
@@ -763,12 +779,12 @@
763
779
 
764
780
  background:transparent;
765
781
  }
766
- ._option_8t4v3o_62 ._optionLabel_8t4v3o_147{
782
+ ._option_z9i77r_62 ._optionLabel_z9i77r_147{
767
783
  flex:1 1 auto;
768
784
 
769
785
  text-align:left;
770
786
  }
771
- ._option_8t4v3o_62 ._icon_8t4v3o_153{
787
+ ._option_z9i77r_62 ._icon_z9i77r_153{
772
788
  flex:0 0 auto;
773
789
 
774
790
  width:auto;
@@ -779,12 +795,12 @@
779
795
 
780
796
  fill:currentColor;
781
797
  }
782
- ._option_8t4v3o_62 ._fakeIcon_8t4v3o_164{
798
+ ._option_z9i77r_62 ._fakeIcon_z9i77r_164{
783
799
  display:inline-block;
784
800
 
785
801
  width:var(--_rs-switcher-vertical-icon-size);
786
802
  }
787
- ._mark_8t4v3o_171{
803
+ ._mark_z9i77r_171{
788
804
  position:absolute;
789
805
  right:0;
790
806
  left:0;
@@ -797,11 +813,27 @@
797
813
 
798
814
  border-radius:var(--_rs-switcher-vertical-border-radius);
799
815
 
800
- transition:all var(--_rs-switcher-vertical-mark-transition-duration);
816
+ transition:all var(--_rs-switcher-vertical-mark-transition-duration) var(--rs-transition-function, ease);
801
817
  }
802
- ._disabled_8t4v3o_50 ._mark_8t4v3o_171{
818
+ ._disabled_z9i77r_50 ._mark_z9i77r_171{
803
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);
804
820
  }
805
- ._hiddenMark_8t4v3o_116 ._mark_8t4v3o_171{
821
+ ._hiddenMark_z9i77r_116 ._mark_z9i77r_171{
806
822
  display:none;
807
823
  }
824
+ ._radio_z9i77r_196{
825
+ position:absolute;
826
+
827
+ overflow:hidden;
828
+ clip:rect(0 0 0 0);
829
+
830
+ width:1px;
831
+ height:1px;
832
+ margin:-1px;
833
+ padding:0;
834
+
835
+ border:none;
836
+
837
+ white-space:nowrap;
838
+ clip-path:inset(50%);
839
+ }
package/lib/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import Switcher from './switcher';
2
- /**
3
- * @deprecated use named import instead
4
- */
5
- declare const DefaultSwitcher: typeof Switcher;
6
- export default DefaultSwitcher;
7
- export { Switcher } from './switcher';
8
- export type { SwitcherProps } from './switcher';
9
- export { VerticalSwitcher } from './vertical-switcher';
10
- export type { VerticalSwitcherProps } from './vertical-switcher';
1
+ import Switcher from './switcher';
2
+ /**
3
+ * @deprecated use named import instead
4
+ */
5
+ declare const DefaultSwitcher: typeof Switcher;
6
+ export default DefaultSwitcher;
7
+ export { Switcher } from './switcher';
8
+ export type { SwitcherProps } from './switcher';
9
+ export { VerticalSwitcher } from './vertical-switcher';
10
+ export type { VerticalSwitcherProps } from './vertical-switcher';
package/lib/index.js CHANGED
@@ -2,8 +2,8 @@ import './index.css';
2
2
  import { Switcher } from './switcher.js';
3
3
  export { Switcher } from './switcher.js';
4
4
  export { VerticalSwitcher } from './vertical-switcher.js';
5
- /**
6
- * @deprecated use named import instead
5
+ /**
6
+ * @deprecated use named import instead
7
7
  */
8
8
 
9
9
  const DefaultSwitcher = Switcher;
package/lib/switcher.d.ts CHANGED
@@ -1,38 +1,64 @@
1
- import React from 'react';
2
- export declare type SwitcherOptionIconPosition = 'left' | 'right';
3
- export declare type SwitcherSize = 'l' | 'm' | 's' | 'xs';
4
- export declare type SwitcherTheme = 'light' | 'dark';
5
- export declare type SwitcherMode = 'rock' | 'classic';
6
- export declare type SwitcherOption<OptionsValueType> = {
7
- label?: React.ReactNode;
8
- value: OptionsValueType;
9
- /** Additional icon */
10
- icon?: React.ReactNode;
11
- };
12
- export declare type SwitcherOptionForDocs = SwitcherOption<any>;
13
- export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
14
- /** Current selected value */
15
- value: ValueType;
16
- /** Array of options */
17
- options?: SwitcherOption<OptionsValueType>[];
18
- onChange: (value: OptionsValueType) => void;
19
- className?: string;
20
- theme?: SwitcherTheme;
21
- size?: SwitcherSize;
22
- /** Appearance mode */
23
- mode?: SwitcherMode;
24
- disabled?: boolean;
25
- /** Decrease horizontal paddings, gap and border-radius values */
26
- compact?: boolean;
27
- /** Identifier for e2e tests */
28
- 'data-e2e'?: string;
29
- /** **Works only if the `icon` on options is present.** Additional icon position. */
30
- iconPosition?: SwitcherOptionIconPosition;
31
- /** CSS style object */
32
- style?: React.CSSProperties;
33
- }
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;
35
- export declare namespace Switcher {
36
- var propTypes: {};
37
- }
38
- export default Switcher;
1
+ import React from 'react';
2
+ import type { JSX } from 'react';
3
+ import PropTypes from 'prop-types';
4
+ export type SwitcherOptionIconPosition = 'left' | 'right';
5
+ export type SwitcherSize = 'l' | 'm' | 's' | 'xs';
6
+ export type SwitcherTheme = 'light' | 'dark';
7
+ export type SwitcherMode = 'rock' | 'classic';
8
+ export type SwitcherOption<OptionsValueType> = {
9
+ label?: React.ReactNode;
10
+ value: OptionsValueType;
11
+ /** Additional icon */
12
+ icon?: React.ReactNode;
13
+ /** Optional a11y label for the option. May be useful for icon-only options. */
14
+ 'aria-label'?: string;
15
+ };
16
+ export type SwitcherOptionForDocs = SwitcherOption<any>;
17
+ interface SwitcherExplicitProps<ValueType, OptionsValueType extends ValueType> {
18
+ /** Current selected value */
19
+ value: ValueType;
20
+ /** Array of options */
21
+ options?: SwitcherOption<OptionsValueType>[];
22
+ onChange: (value: OptionsValueType) => void;
23
+ className?: string;
24
+ theme?: SwitcherTheme;
25
+ size?: SwitcherSize;
26
+ /** Appearance mode */
27
+ mode?: SwitcherMode;
28
+ disabled?: boolean;
29
+ /** Decrease horizontal paddings, gap and border-radius values */
30
+ compact?: boolean;
31
+ /** Identifier for e2e tests */
32
+ 'data-e2e'?: string;
33
+ /** **Works only if the `icon` on options is present.** Additional icon position. */
34
+ iconPosition?: SwitcherOptionIconPosition;
35
+ /** CSS style object */
36
+ style?: React.CSSProperties;
37
+ /** Optional a11y label for the switcher. Recommended to use either that or `aria-labelledby`. */
38
+ 'aria-label'?: string;
39
+ /** Optional a11y label reference for the switcher. Recommended to use either that or `aria-label`. */
40
+ 'aria-labelledby'?: string;
41
+ /** Optional name of all `input[type="radio"]` children. if not set, it will fallback to a randomly generated name. */
42
+ name?: string;
43
+ }
44
+ export type SwitcherProps<ValueType, OptionsValueType extends ValueType> = SwitcherExplicitProps<ValueType, OptionsValueType> & Omit<React.HTMLProps<HTMLSpanElement>, keyof SwitcherExplicitProps<ValueType, OptionsValueType>>;
45
+ export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, options, value: switcherValue, mode, iconPosition, onChange, style, name, ...rest }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
46
+ export declare namespace Switcher {
47
+ var propTypes: {
48
+ options: PropTypes.Validator<PropTypes.InferProps<{
49
+ label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
50
+ value: PropTypes.Validator<any>;
51
+ icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
52
+ }>[]>;
53
+ onChange: PropTypes.Validator<(...args: any[]) => any>;
54
+ value: PropTypes.Validator<any>;
55
+ className: PropTypes.Requireable<string>;
56
+ size: PropTypes.Requireable<string>;
57
+ theme: PropTypes.Requireable<string>;
58
+ disabled: PropTypes.Requireable<boolean>;
59
+ iconPosition: PropTypes.Requireable<string>;
60
+ 'data-e2e': PropTypes.Requireable<string>;
61
+ style: PropTypes.Requireable<object>;
62
+ };
63
+ }
64
+ export default Switcher;