@rescui/switcher 0.13.5 → 0.13.6

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 (8) hide show
  1. package/lib/index.css +87 -77
  2. package/lib/public-api.p.css +5 -0
  3. package/lib/public-api.pcss +5 -0
  4. package/lib/switcher.p.module.css.js +19 -19
  5. package/lib/use-safe-id.d.ts +3 -1
  6. package/lib/use-safe-id.js +6 -11
  7. package/lib/vertical-switcher.p.module.css.js +20 -20
  8. package/package.json +6 -6
package/lib/index.css CHANGED
@@ -1,10 +1,15 @@
1
- ._themeLight_1x86d4_6{
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
6
+ ._themeLight_10udnwc_6{
2
7
  --rs-theme-dark:0;
3
8
  }
4
- ._themeDark_1x86d4_9{
9
+ ._themeDark_10udnwc_9{
5
10
  --rs-theme-dark:1;
6
11
  }
7
- ._sizeXS_1x86d4_13{
12
+ ._sizeXS_10udnwc_13{
8
13
  --_rs-switcher-border-radius:4px;
9
14
  --_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
10
15
  --_rs-switcher-option-padding:2px 12px;
@@ -14,7 +19,7 @@
14
19
  --_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
15
20
  --_rs-switcher-icon-margin-vertical:2px;
16
21
  }
17
- ._sizeXS_1x86d4_13 [data-rs-internal='switcher__option']{
22
+ ._sizeXS_10udnwc_13 [data-rs-internal='switcher__option']{
18
23
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
19
24
  --_rs-typography-text-transform:initial;
20
25
  --_rs-typography-font-variant-numeric:initial;
@@ -49,7 +54,7 @@
49
54
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
50
55
  --_rs-typography-link-border-bottom-width-from-text:1px;
51
56
  }
52
- ._sizeS_1x86d4_16{
57
+ ._sizeS_10udnwc_16{
53
58
  --_rs-switcher-border-radius:16px;
54
59
  --_rs-switcher-compact-border-radius:4px;
55
60
  --_rs-switcher-option-padding:6px 16px;
@@ -59,7 +64,7 @@
59
64
  --_rs-switcher-compact-icon-offset:4px;
60
65
  --_rs-switcher-icon-margin-vertical:0px;
61
66
  }
62
- ._sizeS_1x86d4_16 [data-rs-internal='switcher__option']{
67
+ ._sizeS_10udnwc_16 [data-rs-internal='switcher__option']{
63
68
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
64
69
  --_rs-typography-text-transform:initial;
65
70
  --_rs-typography-font-variant-numeric:initial;
@@ -94,7 +99,7 @@
94
99
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
95
100
  --_rs-typography-link-border-bottom-width-from-text:1px;
96
101
  }
97
- ._sizeM_1x86d4_19{
102
+ ._sizeM_10udnwc_19{
98
103
  --_rs-switcher-border-radius:20px;
99
104
  --_rs-switcher-compact-border-radius:8px;
100
105
  --_rs-switcher-option-padding:8px 24px;
@@ -104,7 +109,7 @@
104
109
  --_rs-switcher-compact-icon-offset:8px;
105
110
  --_rs-switcher-icon-margin-vertical:0px;
106
111
  }
107
- ._sizeM_1x86d4_19 [data-rs-internal='switcher__option']{
112
+ ._sizeM_10udnwc_19 [data-rs-internal='switcher__option']{
108
113
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
109
114
  --_rs-typography-text-transform:initial;
110
115
  --_rs-typography-font-variant-numeric:initial;
@@ -143,11 +148,11 @@
143
148
  --_rs-typography-link-border-bottom-width-from-text:1px;
144
149
  }
145
150
  @media screen and (max-width: 640px){
146
- ._sizeM_1x86d4_19 [data-rs-internal='switcher__option']{
151
+ ._sizeM_10udnwc_19 [data-rs-internal='switcher__option']{
147
152
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
148
153
  }
149
154
  }
150
- ._sizeL_1x86d4_22{
155
+ ._sizeL_10udnwc_22{
151
156
  --_rs-switcher-border-radius:26px;
152
157
  --_rs-switcher-compact-border-radius:12px;
153
158
  --_rs-switcher-option-padding:12px 32px;
@@ -157,7 +162,7 @@
157
162
  --_rs-switcher-compact-icon-offset:12px;
158
163
  --_rs-switcher-icon-margin-vertical:0px;
159
164
  }
160
- ._sizeL_1x86d4_22 [data-rs-internal='switcher__option']{
165
+ ._sizeL_10udnwc_22 [data-rs-internal='switcher__option']{
161
166
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
162
167
  --_rs-typography-text-transform:initial;
163
168
  --_rs-typography-font-variant-numeric:initial;
@@ -196,22 +201,22 @@
196
201
  --_rs-typography-link-border-bottom-width-from-text:1px;
197
202
  }
198
203
  @media screen and (max-width: 640px){
199
- ._sizeL_1x86d4_22 [data-rs-internal='switcher__option']{
204
+ ._sizeL_10udnwc_22 [data-rs-internal='switcher__option']{
200
205
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
201
206
  }
202
207
  }
203
- ._modeClassic_1x86d4_26{
208
+ ._modeClassic_10udnwc_26{
204
209
  --_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
205
210
  --_rs-switcher-mark-border-color:var(--_rs-color-primary);
206
211
  }
207
- ._modeRock_1x86d4_29{
212
+ ._modeRock_10udnwc_29{
208
213
  --_rs-switcher-option-hover-background:rgba(
209
214
  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
215
  0.1
211
216
  );
212
217
  --_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
218
  }
214
- ._compact_1x86d4_33{
219
+ ._compact_10udnwc_33{
215
220
  --_rs-switcher-border-radius-from-compact:var(
216
221
  --_rs-switcher-compact-border-radius
217
222
  );
@@ -222,7 +227,7 @@
222
227
  --_rs-switcher-compact-icon-offset
223
228
  );
224
229
  }
225
- ._switcher_1x86d4_37{
230
+ ._switcher_10udnwc_37{
226
231
  --_rs-theme-dark:var(
227
232
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
228
233
  var(--rs-theme-dark, 0)
@@ -232,7 +237,7 @@
232
237
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
233
238
  }
234
239
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
235
- ._switcher_1x86d4_37{
240
+ ._switcher_10udnwc_37{
236
241
  --_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
242
  --_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
243
  --_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 +246,7 @@
241
246
  }
242
247
  }
243
248
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
244
- ._switcher_1x86d4_37{
249
+ ._switcher_10udnwc_37{
245
250
  --_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
251
  --_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
252
  --_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 +254,7 @@
249
254
  --_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
255
  }
251
256
  }
252
- ._switcher_1x86d4_37 {
257
+ ._switcher_10udnwc_37 {
253
258
 
254
259
  position:relative;
255
260
 
@@ -265,16 +270,16 @@
265
270
  background:transparent;
266
271
  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
272
  }
268
- ._switcher_1x86d4_37._disabled_1x86d4_55{
273
+ ._switcher_10udnwc_37._disabled_10udnwc_55{
269
274
  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
275
  }
271
- ._alignIconLeft_1x86d4_60{
276
+ ._alignIconLeft_10udnwc_60{
272
277
  --_rs-switcher-option-flex-direction:row;
273
278
  }
274
- ._alignIconRight_1x86d4_63{
279
+ ._alignIconRight_10udnwc_63{
275
280
  --_rs-switcher-option-flex-direction:row-reverse;
276
281
  }
277
- ._option_1x86d4_67{
282
+ ._option_10udnwc_67{
278
283
  letter-spacing:var(
279
284
  --rs-text-base-letter-spacing,
280
285
  var(--_rs-typography-letter-spacing)
@@ -325,26 +330,26 @@
325
330
  -moz-appearance:none;
326
331
  appearance:none;
327
332
  }
328
- ._disabled_1x86d4_55 ._option_1x86d4_67{
333
+ ._disabled_10udnwc_55 ._option_10udnwc_67{
329
334
  cursor:not-allowed;
330
335
  pointer-events:none;
331
336
  }
332
- ._option_1x86d4_67:has(:focus[data-focus-method='key']){
337
+ ._option_10udnwc_67:has(:focus[data-focus-method='key']){
333
338
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
334
339
  }
335
340
  @media (hover: hover){
336
- ._option_1x86d4_67:hover{
341
+ ._option_10udnwc_67:hover{
337
342
  background:var(--_rs-switcher-option-hover-background);
338
343
  }
339
344
  }
340
- ._option_1x86d4_67._selected_1x86d4_118:active{
345
+ ._option_10udnwc_67._selected_10udnwc_118:active{
341
346
  background:transparent;
342
347
  }
343
- ._option_1x86d4_67._selected_1x86d4_118:hover,
344
- ._option_1x86d4_67._selected_1x86d4_118:active{
348
+ ._option_10udnwc_67._selected_10udnwc_118:hover,
349
+ ._option_10udnwc_67._selected_10udnwc_118:active{
345
350
  cursor:default;
346
351
  }
347
- ._hiddenMark_1x86d4_127 ._option_1x86d4_67._selected_1x86d4_118::before{
352
+ ._hiddenMark_10udnwc_127 ._option_10udnwc_67._selected_10udnwc_118::before{
348
353
  position:absolute;
349
354
  top:0;
350
355
  right:0;
@@ -360,11 +365,11 @@
360
365
 
361
366
  content:'';
362
367
  }
363
- ._hiddenMark_1x86d4_127._disabled_1x86d4_55 ._option_1x86d4_67._selected_1x86d4_118::before{
368
+ ._hiddenMark_10udnwc_127._disabled_10udnwc_55 ._option_10udnwc_67._selected_10udnwc_118::before{
364
369
  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
370
  }
366
- ._disabled_1x86d4_55 ._option_1x86d4_67,
367
- ._disabled_1x86d4_55 ._option_1x86d4_67._selected_1x86d4_118{
371
+ ._disabled_10udnwc_55 ._option_10udnwc_67,
372
+ ._disabled_10udnwc_55 ._option_10udnwc_67._selected_10udnwc_118{
368
373
  color:var(
369
374
  --rs-color-pale,
370
375
  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 +379,7 @@
374
379
 
375
380
  background:transparent;
376
381
  }
377
- ._option_1x86d4_67 ._icon_1x86d4_158{
382
+ ._option_10udnwc_67 ._icon_10udnwc_158{
378
383
  flex:0 0 auto;
379
384
 
380
385
  width:auto;
@@ -385,7 +390,7 @@
385
390
  margin-top:var(--_rs-switcher-icon-margin-vertical);
386
391
  margin-bottom:var(--_rs-switcher-icon-margin-vertical);
387
392
  }
388
- ._mark_1x86d4_171{
393
+ ._mark_10udnwc_171{
389
394
  position:absolute;
390
395
  top:0;
391
396
  bottom:0;
@@ -403,13 +408,13 @@
403
408
 
404
409
  transition:all var(--_rs-switcher-mark-transition-duration) var(--rs-transition-function, ease);
405
410
  }
406
- ._disabled_1x86d4_55 ._mark_1x86d4_171{
411
+ ._disabled_10udnwc_55 ._mark_10udnwc_171{
407
412
  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
413
  }
409
- ._hiddenMark_1x86d4_127 ._mark_1x86d4_171{
414
+ ._hiddenMark_10udnwc_127 ._mark_10udnwc_171{
410
415
  display:none;
411
416
  }
412
- ._radio_1x86d4_199{
417
+ ._radio_10udnwc_199{
413
418
  position:absolute;
414
419
 
415
420
  overflow:hidden;
@@ -426,13 +431,18 @@
426
431
  clip-path:inset(50%);
427
432
  }
428
433
 
429
- ._themeLight_9mpz35_6{
434
+ @property --_rs-theme-dark-coefficient{
435
+ syntax:'<number>';
436
+ inherits:true;
437
+ initial-value:0;
438
+ }
439
+ ._themeLight_hy17j9_6{
430
440
  --rs-theme-dark:0;
431
441
  }
432
- ._themeDark_9mpz35_9{
442
+ ._themeDark_hy17j9_9{
433
443
  --rs-theme-dark:1;
434
444
  }
435
- ._sizeXS_9mpz35_13{
445
+ ._sizeXS_hy17j9_13{
436
446
  --_rs-switcher-vertical-border-radius:4px;
437
447
  --_rs-switcher-vertical-option-vertical-padding:2px;
438
448
  --_rs-switcher-vertical-option-horizontal-padding:8px;
@@ -440,7 +450,7 @@
440
450
  --_rs-switcher-vertical-icon-offset:4px;
441
451
  --_rs-switcher-vertical-icon-margin-vertical:2px;
442
452
  }
443
- ._sizeXS_9mpz35_13 [data-rs-internal='vertical-switcher__option']{
453
+ ._sizeXS_hy17j9_13 [data-rs-internal='vertical-switcher__option']{
444
454
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
445
455
  --_rs-typography-text-transform:initial;
446
456
  --_rs-typography-font-variant-numeric:initial;
@@ -475,7 +485,7 @@
475
485
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
476
486
  --_rs-typography-link-border-bottom-width-from-text:1px;
477
487
  }
478
- ._sizeS_9mpz35_16{
488
+ ._sizeS_hy17j9_16{
479
489
  --_rs-switcher-vertical-border-radius:4px;
480
490
  --_rs-switcher-vertical-option-vertical-padding:6px;
481
491
  --_rs-switcher-vertical-option-horizontal-padding:12px;
@@ -483,7 +493,7 @@
483
493
  --_rs-switcher-vertical-icon-offset:4px;
484
494
  --_rs-switcher-vertical-icon-margin-vertical:0px;
485
495
  }
486
- ._sizeS_9mpz35_16 [data-rs-internal='vertical-switcher__option']{
496
+ ._sizeS_hy17j9_16 [data-rs-internal='vertical-switcher__option']{
487
497
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
488
498
  --_rs-typography-text-transform:initial;
489
499
  --_rs-typography-font-variant-numeric:initial;
@@ -518,7 +528,7 @@
518
528
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
519
529
  --_rs-typography-link-border-bottom-width-from-text:1px;
520
530
  }
521
- ._sizeM_9mpz35_19{
531
+ ._sizeM_hy17j9_19{
522
532
  --_rs-switcher-vertical-border-radius:8px;
523
533
  --_rs-switcher-vertical-option-vertical-padding:8px;
524
534
  --_rs-switcher-vertical-option-horizontal-padding:16px;
@@ -526,7 +536,7 @@
526
536
  --_rs-switcher-vertical-icon-offset:8px;
527
537
  --_rs-switcher-vertical-icon-margin-vertical:0px;
528
538
  }
529
- ._sizeM_9mpz35_19 [data-rs-internal='vertical-switcher__option']{
539
+ ._sizeM_hy17j9_19 [data-rs-internal='vertical-switcher__option']{
530
540
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
531
541
  --_rs-typography-text-transform:initial;
532
542
  --_rs-typography-font-variant-numeric:initial;
@@ -565,11 +575,11 @@
565
575
  --_rs-typography-link-border-bottom-width-from-text:1px;
566
576
  }
567
577
  @media screen and (max-width: 640px){
568
- ._sizeM_9mpz35_19 [data-rs-internal='vertical-switcher__option']{
578
+ ._sizeM_hy17j9_19 [data-rs-internal='vertical-switcher__option']{
569
579
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
570
580
  }
571
581
  }
572
- ._sizeL_9mpz35_22{
582
+ ._sizeL_hy17j9_22{
573
583
  --_rs-switcher-vertical-border-radius:12px;
574
584
  --_rs-switcher-vertical-option-vertical-padding:12px;
575
585
  --_rs-switcher-vertical-option-horizontal-padding:24px;
@@ -577,7 +587,7 @@
577
587
  --_rs-switcher-vertical-icon-offset:12px;
578
588
  --_rs-switcher-vertical-icon-margin-vertical:0px;
579
589
  }
580
- ._sizeL_9mpz35_22 [data-rs-internal='vertical-switcher__option']{
590
+ ._sizeL_hy17j9_22 [data-rs-internal='vertical-switcher__option']{
581
591
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
582
592
  --_rs-typography-text-transform:initial;
583
593
  --_rs-typography-font-variant-numeric:initial;
@@ -616,17 +626,17 @@
616
626
  --_rs-typography-link-border-bottom-width-from-text:1px;
617
627
  }
618
628
  @media screen and (max-width: 640px){
619
- ._sizeL_9mpz35_22 [data-rs-internal='vertical-switcher__option']{
629
+ ._sizeL_hy17j9_22 [data-rs-internal='vertical-switcher__option']{
620
630
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
621
631
  }
622
632
  }
623
- ._modeClassic_9mpz35_26{
633
+ ._modeClassic_hy17j9_26{
624
634
  --_rs-switcher-vertical-option-hover-background:var(
625
635
  --_rs-color-primary-t-fog
626
636
  );
627
637
  --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
628
638
  }
629
- ._modeRock_9mpz35_29{
639
+ ._modeRock_hy17j9_29{
630
640
  --_rs-switcher-vertical-option-hover-background:rgba(
631
641
  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
642
  0.1
@@ -635,7 +645,7 @@
635
645
  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
646
  );
637
647
  }
638
- ._verticalSwitcher_9mpz35_33{
648
+ ._verticalSwitcher_hy17j9_33{
639
649
  --_rs-theme-dark:var(
640
650
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
641
651
  var(--rs-theme-dark, 0)
@@ -645,7 +655,7 @@
645
655
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
646
656
  }
647
657
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
648
- ._verticalSwitcher_9mpz35_33{
658
+ ._verticalSwitcher_hy17j9_33{
649
659
  --_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
660
  --_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
661
  --_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 +664,7 @@
654
664
  }
655
665
  }
656
666
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
657
- ._verticalSwitcher_9mpz35_33{
667
+ ._verticalSwitcher_hy17j9_33{
658
668
  --_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
669
  --_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
670
  --_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 +672,7 @@
662
672
  --_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
673
  }
664
674
  }
665
- ._verticalSwitcher_9mpz35_33 {
675
+ ._verticalSwitcher_hy17j9_33 {
666
676
 
667
677
  position:relative;
668
678
 
@@ -677,16 +687,16 @@
677
687
  background:transparent;
678
688
  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
689
  }
680
- ._verticalSwitcher_9mpz35_33._disabled_9mpz35_50{
690
+ ._verticalSwitcher_hy17j9_33._disabled_hy17j9_50{
681
691
  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
692
  }
683
- ._alignIconLeft_9mpz35_55{
693
+ ._alignIconLeft_hy17j9_55{
684
694
  --_rs-switcher-vertical-option-flex-direction:row;
685
695
  }
686
- ._alignIconRight_9mpz35_58{
696
+ ._alignIconRight_hy17j9_58{
687
697
  --_rs-switcher-vertical-option-flex-direction:row-reverse;
688
698
  }
689
- ._option_9mpz35_62{
699
+ ._option_hy17j9_62{
690
700
  letter-spacing:var(
691
701
  --rs-text-base-letter-spacing,
692
702
  var(--_rs-typography-letter-spacing)
@@ -730,26 +740,26 @@
730
740
  -moz-appearance:none;
731
741
  appearance:none;
732
742
  }
733
- ._disabled_9mpz35_50 ._option_9mpz35_62{
743
+ ._disabled_hy17j9_50 ._option_hy17j9_62{
734
744
  cursor:not-allowed;
735
745
  pointer-events:none;
736
746
  }
737
- ._option_9mpz35_62:has(:focus[data-focus-method='key']){
747
+ ._option_hy17j9_62:has(:focus[data-focus-method='key']){
738
748
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
739
749
  }
740
750
  @media (hover: hover){
741
- ._option_9mpz35_62:hover{
751
+ ._option_hy17j9_62:hover{
742
752
  background:var(--_rs-switcher-vertical-option-hover-background);
743
753
  }
744
754
  }
745
- ._option_9mpz35_62._selected_9mpz35_107:active{
755
+ ._option_hy17j9_62._selected_hy17j9_107:active{
746
756
  background:transparent;
747
757
  }
748
- ._option_9mpz35_62._selected_9mpz35_107:hover,
749
- ._option_9mpz35_62._selected_9mpz35_107:active{
758
+ ._option_hy17j9_62._selected_hy17j9_107:hover,
759
+ ._option_hy17j9_62._selected_hy17j9_107:active{
750
760
  cursor:default;
751
761
  }
752
- ._hiddenMark_9mpz35_116 ._option_9mpz35_62._selected_9mpz35_107::before{
762
+ ._hiddenMark_hy17j9_116 ._option_hy17j9_62._selected_hy17j9_107::before{
753
763
  position:absolute;
754
764
  top:0;
755
765
  right:0;
@@ -765,11 +775,11 @@
765
775
 
766
776
  content:'';
767
777
  }
768
- ._hiddenMark_9mpz35_116._disabled_9mpz35_50 ._option_9mpz35_62._selected_9mpz35_107::before{
778
+ ._hiddenMark_hy17j9_116._disabled_hy17j9_50 ._option_hy17j9_62._selected_hy17j9_107::before{
769
779
  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
780
  }
771
- ._disabled_9mpz35_50 ._option_9mpz35_62,
772
- ._disabled_9mpz35_50 ._option_9mpz35_62._selected_9mpz35_107{
781
+ ._disabled_hy17j9_50 ._option_hy17j9_62,
782
+ ._disabled_hy17j9_50 ._option_hy17j9_62._selected_hy17j9_107{
773
783
  color:var(
774
784
  --rs-color-pale,
775
785
  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 +789,12 @@
779
789
 
780
790
  background:transparent;
781
791
  }
782
- ._option_9mpz35_62 ._optionLabel_9mpz35_147{
792
+ ._option_hy17j9_62 ._optionLabel_hy17j9_147{
783
793
  flex:1 1 auto;
784
794
 
785
795
  text-align:left;
786
796
  }
787
- ._option_9mpz35_62 ._icon_9mpz35_153{
797
+ ._option_hy17j9_62 ._icon_hy17j9_153{
788
798
  flex:0 0 auto;
789
799
 
790
800
  width:auto;
@@ -795,12 +805,12 @@
795
805
 
796
806
  fill:currentColor;
797
807
  }
798
- ._option_9mpz35_62 ._fakeIcon_9mpz35_164{
808
+ ._option_hy17j9_62 ._fakeIcon_hy17j9_164{
799
809
  display:inline-block;
800
810
 
801
811
  width:var(--_rs-switcher-vertical-icon-size);
802
812
  }
803
- ._mark_9mpz35_171{
813
+ ._mark_hy17j9_171{
804
814
  position:absolute;
805
815
  right:0;
806
816
  left:0;
@@ -815,13 +825,13 @@
815
825
 
816
826
  transition:all var(--_rs-switcher-vertical-mark-transition-duration) var(--rs-transition-function, ease);
817
827
  }
818
- ._disabled_9mpz35_50 ._mark_9mpz35_171{
828
+ ._disabled_hy17j9_50 ._mark_hy17j9_171{
819
829
  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
830
  }
821
- ._hiddenMark_9mpz35_116 ._mark_9mpz35_171{
831
+ ._hiddenMark_hy17j9_116 ._mark_hy17j9_171{
822
832
  display:none;
823
833
  }
824
- ._radio_9mpz35_196{
834
+ ._radio_hy17j9_196{
825
835
  position:absolute;
826
836
 
827
837
  overflow:hidden;
package/lib/public-api.p.css CHANGED
@@ -1,3 +1,8 @@
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
1
6
  @define-mixin rs-switcher-size-xs{
2
7
  &:not(html){
3
8
  --_rs-switcher-border-radius:4px;
package/lib/public-api.pcss CHANGED
@@ -1,3 +1,8 @@
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
1
6
  @define-mixin rs-switcher-size-xs{
2
7
  &:not(html){
3
8
  --_rs-switcher-border-radius:4px;
package/lib/switcher.p.module.css.js CHANGED
@@ -1,22 +1,22 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_1x86d4_6",
3
- "themeDark": "_themeDark_1x86d4_9",
4
- "sizeXS": "_sizeXS_1x86d4_13",
5
- "sizeS": "_sizeS_1x86d4_16",
6
- "sizeM": "_sizeM_1x86d4_19",
7
- "sizeL": "_sizeL_1x86d4_22",
8
- "modeClassic": "_modeClassic_1x86d4_26",
9
- "modeRock": "_modeRock_1x86d4_29",
10
- "compact": "_compact_1x86d4_33",
11
- "switcher": "_switcher_1x86d4_37",
12
- "disabled": "_disabled_1x86d4_55",
13
- "alignIconLeft": "_alignIconLeft_1x86d4_60",
14
- "alignIconRight": "_alignIconRight_1x86d4_63",
15
- "option": "_option_1x86d4_67",
16
- "selected": "_selected_1x86d4_118",
17
- "hiddenMark": "_hiddenMark_1x86d4_127",
18
- "icon": "_icon_1x86d4_158",
19
- "mark": "_mark_1x86d4_171",
20
- "radio": "_radio_1x86d4_199"
2
+ "themeLight": "_themeLight_10udnwc_6",
3
+ "themeDark": "_themeDark_10udnwc_9",
4
+ "sizeXS": "_sizeXS_10udnwc_13",
5
+ "sizeS": "_sizeS_10udnwc_16",
6
+ "sizeM": "_sizeM_10udnwc_19",
7
+ "sizeL": "_sizeL_10udnwc_22",
8
+ "modeClassic": "_modeClassic_10udnwc_26",
9
+ "modeRock": "_modeRock_10udnwc_29",
10
+ "compact": "_compact_10udnwc_33",
11
+ "switcher": "_switcher_10udnwc_37",
12
+ "disabled": "_disabled_10udnwc_55",
13
+ "alignIconLeft": "_alignIconLeft_10udnwc_60",
14
+ "alignIconRight": "_alignIconRight_10udnwc_63",
15
+ "option": "_option_10udnwc_67",
16
+ "selected": "_selected_10udnwc_118",
17
+ "hiddenMark": "_hiddenMark_10udnwc_127",
18
+ "icon": "_icon_10udnwc_158",
19
+ "mark": "_mark_10udnwc_171",
20
+ "radio": "_radio_10udnwc_199"
21
21
  };
22
22
  export { styles as default };
package/lib/use-safe-id.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import React from 'react';
2
- export declare const useSafeId: typeof React.useId;
2
+ declare function useFallbackId(): number;
3
+ export declare const useSafeId: typeof React.useId | typeof useFallbackId;
4
+ export {};
package/lib/use-safe-id.js CHANGED
@@ -1,15 +1,10 @@
1
- import React, { useRef } from 'react';
1
+ import React, { useState } from 'react';
2
+ let nextFallbackId = 0;
2
3
 
3
- const useFallbackId = () => {
4
- const id = useRef(null);
4
+ function useFallbackId() {
5
+ const [id] = useState(() => nextFallbackId++);
6
+ return id;
7
+ }
5
8
 
6
- if (id.current === null) {
7
- id.current = useFallbackId.counter++;
8
- }
9
-
10
- return id.current.toString();
11
- };
12
-
13
- useFallbackId.counter = 0;
14
9
  const useSafeId = React.useId ?? useFallbackId;
15
10
  export { useSafeId };
package/lib/vertical-switcher.p.module.css.js CHANGED
@@ -1,23 +1,23 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_9mpz35_6",
3
- "themeDark": "_themeDark_9mpz35_9",
4
- "sizeXS": "_sizeXS_9mpz35_13",
5
- "sizeS": "_sizeS_9mpz35_16",
6
- "sizeM": "_sizeM_9mpz35_19",
7
- "sizeL": "_sizeL_9mpz35_22",
8
- "modeClassic": "_modeClassic_9mpz35_26",
9
- "modeRock": "_modeRock_9mpz35_29",
10
- "verticalSwitcher": "_verticalSwitcher_9mpz35_33",
11
- "disabled": "_disabled_9mpz35_50",
12
- "alignIconLeft": "_alignIconLeft_9mpz35_55",
13
- "alignIconRight": "_alignIconRight_9mpz35_58",
14
- "option": "_option_9mpz35_62",
15
- "selected": "_selected_9mpz35_107",
16
- "hiddenMark": "_hiddenMark_9mpz35_116",
17
- "optionLabel": "_optionLabel_9mpz35_147",
18
- "icon": "_icon_9mpz35_153",
19
- "fakeIcon": "_fakeIcon_9mpz35_164",
20
- "mark": "_mark_9mpz35_171",
21
- "radio": "_radio_9mpz35_196"
2
+ "themeLight": "_themeLight_hy17j9_6",
3
+ "themeDark": "_themeDark_hy17j9_9",
4
+ "sizeXS": "_sizeXS_hy17j9_13",
5
+ "sizeS": "_sizeS_hy17j9_16",
6
+ "sizeM": "_sizeM_hy17j9_19",
7
+ "sizeL": "_sizeL_hy17j9_22",
8
+ "modeClassic": "_modeClassic_hy17j9_26",
9
+ "modeRock": "_modeRock_hy17j9_29",
10
+ "verticalSwitcher": "_verticalSwitcher_hy17j9_33",
11
+ "disabled": "_disabled_hy17j9_50",
12
+ "alignIconLeft": "_alignIconLeft_hy17j9_55",
13
+ "alignIconRight": "_alignIconRight_hy17j9_58",
14
+ "option": "_option_hy17j9_62",
15
+ "selected": "_selected_hy17j9_107",
16
+ "hiddenMark": "_hiddenMark_hy17j9_116",
17
+ "optionLabel": "_optionLabel_hy17j9_147",
18
+ "icon": "_icon_hy17j9_153",
19
+ "fakeIcon": "_fakeIcon_hy17j9_164",
20
+ "mark": "_mark_hy17j9_171",
21
+ "radio": "_radio_hy17j9_196"
22
22
  };
23
23
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/switcher",
3
- "version": "0.13.5",
3
+ "version": "0.13.6",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -18,7 +18,7 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@babel/runtime-corejs3": "^7.26.0",
21
- "@rescui/use-resize-observer": "^0.3.3",
21
+ "@rescui/use-resize-observer": "^0.3.4",
22
22
  "classnames": "^2.2.6"
23
23
  },
24
24
  "peerDependencies": {
@@ -27,15 +27,15 @@
27
27
  "react": ">=16.8.0 <20"
28
28
  },
29
29
  "devDependencies": {
30
- "@rescui/colors": "^0.3.2",
31
- "@rescui/icons": "^1.8.3",
30
+ "@rescui/colors": "^0.3.3",
31
+ "@rescui/icons": "^1.8.4",
32
32
  "@rescui/scripts": "^0.5.2",
33
- "@rescui/typography": "^0.27.3"
33
+ "@rescui/typography": "^0.27.4"
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": "7614b4519a4716fbf1151d94c97fda48eab60800"
40
+ "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
41
41
  }