@xsolla/xui-core 0.64.0-pr56.1768348754

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 (5) hide show
  1. package/index.d.mts +1940 -0
  2. package/index.d.ts +1940 -0
  3. package/index.js +4393 -0
  4. package/index.mjs +4368 -0
  5. package/package.json +14 -0
package/index.d.mts ADDED
@@ -0,0 +1,1940 @@
1
+ import React from 'react';
2
+
3
+ var background = {
4
+ primary: "#202a2c",
5
+ secondary: "#151c1e",
6
+ inverse: "#ffffff",
7
+ brand: {
8
+ primary: "#66e6ff",
9
+ secondary: "#00aacc"
10
+ },
11
+ brandExtra: {
12
+ primary: "#d9ff66",
13
+ secondary: "#bfff00"
14
+ },
15
+ success: {
16
+ primary: "#80ffb5",
17
+ secondary: "#33ff88"
18
+ },
19
+ warning: {
20
+ primary: "#ffee99",
21
+ secondary: "#ffdd33"
22
+ },
23
+ alert: {
24
+ primary: "#ff8066",
25
+ secondary: "#ff5533"
26
+ },
27
+ neutral: {
28
+ primary: "#aa99ff",
29
+ secondary: "#5533ff"
30
+ }
31
+ };
32
+ var content = {
33
+ primary: "#ffffff",
34
+ secondary: "rgba(255, 255, 255, 0.72)",
35
+ tertiary: "rgba(255, 255, 255, 0.58)",
36
+ inverse: "#000000",
37
+ brand: {
38
+ primary: "#66e6ff",
39
+ secondary: "#00d4ff"
40
+ },
41
+ brandExtra: {
42
+ primary: "#d9ff66",
43
+ secondary: "#bfff00"
44
+ },
45
+ success: {
46
+ primary: "#66ffa6",
47
+ secondary: "#00ff6a"
48
+ },
49
+ warning: {
50
+ primary: "#ffe566",
51
+ secondary: "#ffd400"
52
+ },
53
+ alert: {
54
+ primary: "#ff8066",
55
+ secondary: "#ff2b00"
56
+ },
57
+ neutral: {
58
+ primary: "#aa99ff",
59
+ secondary: "#8066ff"
60
+ },
61
+ on: {
62
+ brand: "#000000",
63
+ brandExtra: "#000000",
64
+ success: "#000000",
65
+ warning: "#000000",
66
+ alert: "#ffffff",
67
+ neutral: "#ffffff"
68
+ },
69
+ "static": {
70
+ light: "#ffffff",
71
+ dark: "#000000"
72
+ }
73
+ };
74
+ var border = {
75
+ primary: "#ffffff",
76
+ secondary: "rgba(255, 255, 255, 0.16)",
77
+ inverse: "rgba(0, 0, 0, 0.15)",
78
+ brand: "#66e6ff",
79
+ brandExtra: "#d9ff66",
80
+ success: "#66ffa6",
81
+ warning: "#ffe566",
82
+ alert: "#ff8066",
83
+ neutral: "#aa99ff"
84
+ };
85
+ var overlay = {
86
+ mono: "rgba(255, 255, 255, 0.1)",
87
+ brand: "rgba(102, 230, 255, 0.3)",
88
+ brandExtra: "rgba(217, 255, 102, 0.3)",
89
+ success: "rgba(0, 255, 106, 0.3)",
90
+ warning: "rgba(255, 221, 51, 0.3)",
91
+ alert: "rgba(255, 85, 51, 0.3)",
92
+ neutral: "rgba(128, 102, 255, 0.3)"
93
+ };
94
+ var layer = {
95
+ scrim: "rgba(0, 0, 0, 0.5)",
96
+ float: "#202a2c"
97
+ };
98
+ var control = {
99
+ brand: {
100
+ primary: {
101
+ bg: "#66e6ff",
102
+ bgHover: "#99eeff",
103
+ bgPress: "#33ddff",
104
+ bgDisable: "#557177",
105
+ border: "rgba(255, 255, 255, 0)",
106
+ borderHover: "rgba(255, 255, 255, 0)",
107
+ borderPress: "rgba(255, 255, 255, 0)",
108
+ borderDisable: "rgba(255, 255, 255, 0)",
109
+ text: {
110
+ primary: "#000000",
111
+ secondary: "#ffffff",
112
+ disable: "#a6bbbf"
113
+ }
114
+ },
115
+ secondary: {
116
+ bg: "rgba(102, 230, 255, 0.4)",
117
+ bgHover: "rgba(153, 238, 255, 0.4)",
118
+ bgPress: "rgba(51, 221, 255, 0.4)",
119
+ border: "rgba(255, 255, 255, 0)",
120
+ borderHover: "rgba(255, 255, 255, 0)",
121
+ borderPress: "rgba(255, 255, 255, 0)",
122
+ text: {
123
+ primary: "#000000",
124
+ secondary: "#ffffff"
125
+ }
126
+ }
127
+ },
128
+ brandExtra: {
129
+ primary: {
130
+ bg: "#d9ff66",
131
+ bgHover: "#ccff33",
132
+ bgPress: "#e6ff99",
133
+ border: "rgba(255, 255, 255, 0)",
134
+ borderHover: "rgba(255, 255, 255, 0)",
135
+ borderPress: "rgba(255, 255, 255, 0)",
136
+ text: {
137
+ primary: "#000000",
138
+ secondary: "#ffffff"
139
+ }
140
+ },
141
+ secondary: {
142
+ bg: "rgba(217, 255, 102, 0.4)",
143
+ bgHover: "rgba(204, 255, 51, 0.4)",
144
+ bgPress: "rgba(230, 255, 153, 0.4)",
145
+ border: "rgba(255, 255, 255, 0)",
146
+ borderHover: "rgba(255, 255, 255, 0)",
147
+ borderPress: "rgba(255, 255, 255, 0)",
148
+ text: {
149
+ primary: "#000000",
150
+ secondary: "#ffffff"
151
+ }
152
+ }
153
+ },
154
+ alert: {
155
+ primary: {
156
+ bg: "#ff8066",
157
+ bgHover: "#ffaa99",
158
+ bgPress: "#ff5533",
159
+ border: "rgba(255, 255, 255, 0)",
160
+ borderHover: "rgba(255, 255, 255, 0)",
161
+ borderPress: "rgba(255, 255, 255, 0)",
162
+ text: {
163
+ primary: "#ffffff",
164
+ secondary: "#ffffff"
165
+ }
166
+ },
167
+ secondary: {
168
+ bg: "rgba(255, 128, 102, 0.4)",
169
+ bgHover: "rgba(255, 170, 153, 0.4)",
170
+ bgPress: "rgba(255, 85, 51, 0.4)",
171
+ border: "rgba(255, 255, 255, 0)",
172
+ borderHover: "rgba(255, 255, 255, 0)",
173
+ borderPress: "rgba(255, 255, 255, 0)",
174
+ text: {
175
+ primary: "#ffffff",
176
+ secondary: "#ffffff"
177
+ }
178
+ }
179
+ },
180
+ mono: {
181
+ primary: {
182
+ bg: "#ffffff",
183
+ bgHover: "#f0f4f4",
184
+ bgPress: "#f6f8f9",
185
+ border: "rgba(255, 255, 255, 0)",
186
+ borderHover: "rgba(255, 255, 255, 0)",
187
+ borderPress: "rgba(255, 255, 255, 0)",
188
+ text: {
189
+ primary: "#000000",
190
+ secondary: "#ffffff"
191
+ }
192
+ },
193
+ secondary: {
194
+ bg: "rgba(255, 255, 255, 0.4)",
195
+ bgHover: "rgba(255, 255, 255, 0.34)",
196
+ bgPress: "rgba(255, 255, 255, 0.44)",
197
+ border: "rgba(255, 255, 255, 0)",
198
+ borderHover: "rgba(255, 255, 255, 0)",
199
+ borderPress: "rgba(255, 255, 255, 0)",
200
+ text: {
201
+ primary: "#000000",
202
+ secondary: "#ffffff"
203
+ }
204
+ }
205
+ },
206
+ input: {
207
+ bg: "rgba(255, 255, 255, 0.12)",
208
+ bgHover: "rgba(255, 255, 255, 0.15)",
209
+ bgDisable: "rgba(255, 255, 255, 0.25)",
210
+ border: "rgba(255, 255, 255, 0)",
211
+ borderHover: "rgba(255, 255, 255, 0.1)",
212
+ borderDisable: "rgba(255, 255, 255, 0)",
213
+ text: "#ffffff",
214
+ textDisable: "rgba(255, 255, 255, 0.36)",
215
+ placeholder: "rgba(255, 255, 255, 0.55)"
216
+ },
217
+ focus: {
218
+ bg: "rgba(255, 255, 255, 1)"
219
+ },
220
+ check: {
221
+ bg: "#ffffff",
222
+ bgHover: "#f0f4f4",
223
+ bgDisable: "rgba(255, 255, 255, 0.2)"
224
+ },
225
+ faint: {
226
+ bg: "rgba(255, 255, 255, 0.15)",
227
+ bgHover: "rgba(255, 255, 255, 0.2)",
228
+ border: "rgba(255, 255, 255, 0)",
229
+ borderHover: "rgba(255, 255, 255, 0.16)"
230
+ },
231
+ "switch": {
232
+ bg: "rgba(255, 255, 255, 0.1)",
233
+ bgHover: "rgba(255, 255, 255, 0.15)"
234
+ },
235
+ text: {
236
+ primary: "#ffffff",
237
+ secondary: "#ffffff",
238
+ faint: "#000000",
239
+ disable: "rgba(255, 255, 255, 0.4)"
240
+ },
241
+ link: {
242
+ primary: "#66e6ff",
243
+ primaryHover: "rgba(102, 230, 255, 0.7)",
244
+ secondary: "#d9ff66",
245
+ secondaryHover: "rgba(217, 255, 102, 0.7)"
246
+ }
247
+ };
248
+ var darkTheme = {
249
+ background: background,
250
+ content: content,
251
+ border: border,
252
+ overlay: overlay,
253
+ layer: layer,
254
+ control: control
255
+ };
256
+
257
+ declare const colors: {
258
+ dark: {
259
+ background: {
260
+ primary: string;
261
+ secondary: string;
262
+ inverse: string;
263
+ brand: {
264
+ primary: string;
265
+ secondary: string;
266
+ };
267
+ brandExtra: {
268
+ primary: string;
269
+ secondary: string;
270
+ };
271
+ success: {
272
+ primary: string;
273
+ secondary: string;
274
+ };
275
+ warning: {
276
+ primary: string;
277
+ secondary: string;
278
+ };
279
+ alert: {
280
+ primary: string;
281
+ secondary: string;
282
+ };
283
+ neutral: {
284
+ primary: string;
285
+ secondary: string;
286
+ };
287
+ };
288
+ content: {
289
+ primary: string;
290
+ secondary: string;
291
+ tertiary: string;
292
+ inverse: string;
293
+ brand: {
294
+ primary: string;
295
+ secondary: string;
296
+ };
297
+ brandExtra: {
298
+ primary: string;
299
+ secondary: string;
300
+ };
301
+ success: {
302
+ primary: string;
303
+ secondary: string;
304
+ };
305
+ warning: {
306
+ primary: string;
307
+ secondary: string;
308
+ };
309
+ alert: {
310
+ primary: string;
311
+ secondary: string;
312
+ };
313
+ neutral: {
314
+ primary: string;
315
+ secondary: string;
316
+ };
317
+ on: {
318
+ brand: string;
319
+ brandExtra: string;
320
+ success: string;
321
+ warning: string;
322
+ alert: string;
323
+ neutral: string;
324
+ };
325
+ static: {
326
+ light: string;
327
+ dark: string;
328
+ };
329
+ };
330
+ border: {
331
+ primary: string;
332
+ secondary: string;
333
+ inverse: string;
334
+ brand: string;
335
+ brandExtra: string;
336
+ success: string;
337
+ warning: string;
338
+ alert: string;
339
+ neutral: string;
340
+ };
341
+ overlay: {
342
+ mono: string;
343
+ brand: string;
344
+ brandExtra: string;
345
+ success: string;
346
+ warning: string;
347
+ alert: string;
348
+ neutral: string;
349
+ };
350
+ layer: {
351
+ scrim: string;
352
+ float: string;
353
+ };
354
+ control: {
355
+ brand: {
356
+ primary: {
357
+ bg: string;
358
+ bgHover: string;
359
+ bgPress: string;
360
+ bgDisable: string;
361
+ border: string;
362
+ borderHover: string;
363
+ borderPress: string;
364
+ borderDisable: string;
365
+ text: {
366
+ primary: string;
367
+ secondary: string;
368
+ disable: string;
369
+ };
370
+ };
371
+ secondary: {
372
+ bg: string;
373
+ bgHover: string;
374
+ bgPress: string;
375
+ border: string;
376
+ borderHover: string;
377
+ borderPress: string;
378
+ text: {
379
+ primary: string;
380
+ secondary: string;
381
+ };
382
+ };
383
+ };
384
+ brandExtra: {
385
+ primary: {
386
+ bg: string;
387
+ bgHover: string;
388
+ bgPress: string;
389
+ border: string;
390
+ borderHover: string;
391
+ borderPress: string;
392
+ text: {
393
+ primary: string;
394
+ secondary: string;
395
+ };
396
+ };
397
+ secondary: {
398
+ bg: string;
399
+ bgHover: string;
400
+ bgPress: string;
401
+ border: string;
402
+ borderHover: string;
403
+ borderPress: string;
404
+ text: {
405
+ primary: string;
406
+ secondary: string;
407
+ };
408
+ };
409
+ };
410
+ alert: {
411
+ primary: {
412
+ bg: string;
413
+ bgHover: string;
414
+ bgPress: string;
415
+ border: string;
416
+ borderHover: string;
417
+ borderPress: string;
418
+ text: {
419
+ primary: string;
420
+ secondary: string;
421
+ };
422
+ };
423
+ secondary: {
424
+ bg: string;
425
+ bgHover: string;
426
+ bgPress: string;
427
+ border: string;
428
+ borderHover: string;
429
+ borderPress: string;
430
+ text: {
431
+ primary: string;
432
+ secondary: string;
433
+ };
434
+ };
435
+ };
436
+ mono: {
437
+ primary: {
438
+ bg: string;
439
+ bgHover: string;
440
+ bgPress: string;
441
+ border: string;
442
+ borderHover: string;
443
+ borderPress: string;
444
+ text: {
445
+ primary: string;
446
+ secondary: string;
447
+ };
448
+ };
449
+ secondary: {
450
+ bg: string;
451
+ bgHover: string;
452
+ bgPress: string;
453
+ border: string;
454
+ borderHover: string;
455
+ borderPress: string;
456
+ text: {
457
+ primary: string;
458
+ secondary: string;
459
+ };
460
+ };
461
+ };
462
+ input: {
463
+ bg: string;
464
+ bgHover: string;
465
+ bgDisable: string;
466
+ border: string;
467
+ borderHover: string;
468
+ borderDisable: string;
469
+ text: string;
470
+ textDisable: string;
471
+ placeholder: string;
472
+ };
473
+ focus: {
474
+ bg: string;
475
+ };
476
+ check: {
477
+ bg: string;
478
+ bgHover: string;
479
+ bgDisable: string;
480
+ };
481
+ faint: {
482
+ bg: string;
483
+ bgHover: string;
484
+ border: string;
485
+ borderHover: string;
486
+ };
487
+ switch: {
488
+ bg: string;
489
+ bgHover: string;
490
+ };
491
+ text: {
492
+ primary: string;
493
+ secondary: string;
494
+ faint: string;
495
+ disable: string;
496
+ };
497
+ link: {
498
+ primary: string;
499
+ primaryHover: string;
500
+ secondary: string;
501
+ secondaryHover: string;
502
+ };
503
+ };
504
+ };
505
+ light: {
506
+ background: {
507
+ primary: string;
508
+ secondary: string;
509
+ inverse: string;
510
+ brand: {
511
+ primary: string;
512
+ secondary: string;
513
+ };
514
+ brandExtra: {
515
+ primary: string;
516
+ secondary: string;
517
+ };
518
+ success: {
519
+ primary: string;
520
+ secondary: string;
521
+ };
522
+ warning: {
523
+ primary: string;
524
+ secondary: string;
525
+ };
526
+ alert: {
527
+ primary: string;
528
+ secondary: string;
529
+ };
530
+ neutral: {
531
+ primary: string;
532
+ secondary: string;
533
+ };
534
+ };
535
+ content: {
536
+ primary: string;
537
+ secondary: string;
538
+ tertiary: string;
539
+ inverse: string;
540
+ brand: {
541
+ primary: string;
542
+ secondary: string;
543
+ };
544
+ brandExtra: {
545
+ primary: string;
546
+ secondary: string;
547
+ };
548
+ success: {
549
+ primary: string;
550
+ secondary: string;
551
+ };
552
+ warning: {
553
+ primary: string;
554
+ secondary: string;
555
+ };
556
+ alert: {
557
+ primary: string;
558
+ secondary: string;
559
+ };
560
+ neutral: {
561
+ primary: string;
562
+ secondary: string;
563
+ };
564
+ on: {
565
+ brand: string;
566
+ brandExtra: string;
567
+ success: string;
568
+ warning: string;
569
+ alert: string;
570
+ neutral: string;
571
+ };
572
+ static: {
573
+ light: string;
574
+ dark: string;
575
+ };
576
+ };
577
+ border: {
578
+ primary: string;
579
+ secondary: string;
580
+ inverse: string;
581
+ brand: string;
582
+ brandExtra: string;
583
+ success: string;
584
+ warning: string;
585
+ alert: string;
586
+ neutral: string;
587
+ };
588
+ overlay: {
589
+ mono: string;
590
+ brand: string;
591
+ brandExtra: string;
592
+ success: string;
593
+ warning: string;
594
+ alert: string;
595
+ neutral: string;
596
+ };
597
+ layer: {
598
+ scrim: string;
599
+ float: string;
600
+ };
601
+ control: {
602
+ brand: {
603
+ primary: {
604
+ bg: string;
605
+ bgHover: string;
606
+ bgPress: string;
607
+ bgDisable: string;
608
+ border: string;
609
+ borderHover: string;
610
+ borderPress: string;
611
+ borderDisable: string;
612
+ text: {
613
+ primary: string;
614
+ secondary: string;
615
+ disable: string;
616
+ };
617
+ };
618
+ secondary: {
619
+ bg: string;
620
+ bgHover: string;
621
+ bgPress: string;
622
+ border: string;
623
+ borderHover: string;
624
+ borderPress: string;
625
+ text: {
626
+ primary: string;
627
+ secondary: string;
628
+ };
629
+ };
630
+ };
631
+ brandExtra: {
632
+ primary: {
633
+ bg: string;
634
+ bgHover: string;
635
+ bgPress: string;
636
+ border: string;
637
+ borderHover: string;
638
+ borderPress: string;
639
+ text: {
640
+ primary: string;
641
+ secondary: string;
642
+ };
643
+ };
644
+ secondary: {
645
+ bg: string;
646
+ bgHover: string;
647
+ bgPress: string;
648
+ border: string;
649
+ borderHover: string;
650
+ borderPress: string;
651
+ text: {
652
+ primary: string;
653
+ secondary: string;
654
+ };
655
+ };
656
+ };
657
+ alert: {
658
+ primary: {
659
+ bg: string;
660
+ bgHover: string;
661
+ bgPress: string;
662
+ border: string;
663
+ borderHover: string;
664
+ borderPress: string;
665
+ text: {
666
+ primary: string;
667
+ secondary: string;
668
+ };
669
+ };
670
+ secondary: {
671
+ bg: string;
672
+ bgHover: string;
673
+ bgPress: string;
674
+ border: string;
675
+ borderHover: string;
676
+ borderPress: string;
677
+ text: {
678
+ primary: string;
679
+ secondary: string;
680
+ };
681
+ };
682
+ };
683
+ mono: {
684
+ primary: {
685
+ bg: string;
686
+ bgHover: string;
687
+ bgPress: string;
688
+ border: string;
689
+ borderHover: string;
690
+ borderPress: string;
691
+ text: {
692
+ primary: string;
693
+ secondary: string;
694
+ };
695
+ };
696
+ secondary: {
697
+ bg: string;
698
+ bgHover: string;
699
+ bgPress: string;
700
+ border: string;
701
+ borderHover: string;
702
+ borderPress: string;
703
+ text: {
704
+ primary: string;
705
+ secondary: string;
706
+ };
707
+ };
708
+ };
709
+ input: {
710
+ bg: string;
711
+ bgHover: string;
712
+ bgDisable: string;
713
+ border: string;
714
+ borderHover: string;
715
+ borderDisable: string;
716
+ text: string;
717
+ textDisable: string;
718
+ placeholder: string;
719
+ };
720
+ focus: {
721
+ bg: string;
722
+ };
723
+ check: {
724
+ bg: string;
725
+ bgHover: string;
726
+ bgDisable: string;
727
+ };
728
+ faint: {
729
+ bg: string;
730
+ bgHover: string;
731
+ border: string;
732
+ borderHover: string;
733
+ };
734
+ switch: {
735
+ bg: string;
736
+ bgHover: string;
737
+ };
738
+ text: {
739
+ primary: string;
740
+ secondary: string;
741
+ faint: string;
742
+ disable: string;
743
+ };
744
+ link: {
745
+ primary: string;
746
+ primaryHover: string;
747
+ secondary: string;
748
+ secondaryHover: string;
749
+ };
750
+ };
751
+ };
752
+ };
753
+ type ThemeColors = typeof darkTheme;
754
+
755
+ declare const spacing: {
756
+ xs: number;
757
+ sm: number;
758
+ md: number;
759
+ lg: number;
760
+ xl: number;
761
+ };
762
+ declare const radius: {
763
+ button: number;
764
+ card: number;
765
+ input: number;
766
+ tagSmall: number;
767
+ tagLarge: number;
768
+ avatarSmall: number;
769
+ avatarLarge: number;
770
+ avatarCircle: number;
771
+ };
772
+
773
+ declare const shadow: {
774
+ active: string;
775
+ surface: string;
776
+ surfaceHover: string;
777
+ popover: string;
778
+ modal: string;
779
+ };
780
+
781
+ declare const fonts: {
782
+ primary: string;
783
+ };
784
+ declare const typography: {
785
+ button: {
786
+ fontFamily: string;
787
+ fontWeight: string;
788
+ };
789
+ };
790
+
791
+ declare const isWeb: boolean;
792
+ declare const isNative: boolean;
793
+ declare const isIOS: boolean;
794
+ declare const isAndroid: boolean;
795
+
796
+ type ThemeMode = "dark" | "light";
797
+ declare const themeConfig: (mode?: ThemeMode) => {
798
+ colors: {
799
+ background: {
800
+ primary: string;
801
+ secondary: string;
802
+ inverse: string;
803
+ brand: {
804
+ primary: string;
805
+ secondary: string;
806
+ };
807
+ brandExtra: {
808
+ primary: string;
809
+ secondary: string;
810
+ };
811
+ success: {
812
+ primary: string;
813
+ secondary: string;
814
+ };
815
+ warning: {
816
+ primary: string;
817
+ secondary: string;
818
+ };
819
+ alert: {
820
+ primary: string;
821
+ secondary: string;
822
+ };
823
+ neutral: {
824
+ primary: string;
825
+ secondary: string;
826
+ };
827
+ };
828
+ content: {
829
+ primary: string;
830
+ secondary: string;
831
+ tertiary: string;
832
+ inverse: string;
833
+ brand: {
834
+ primary: string;
835
+ secondary: string;
836
+ };
837
+ brandExtra: {
838
+ primary: string;
839
+ secondary: string;
840
+ };
841
+ success: {
842
+ primary: string;
843
+ secondary: string;
844
+ };
845
+ warning: {
846
+ primary: string;
847
+ secondary: string;
848
+ };
849
+ alert: {
850
+ primary: string;
851
+ secondary: string;
852
+ };
853
+ neutral: {
854
+ primary: string;
855
+ secondary: string;
856
+ };
857
+ on: {
858
+ brand: string;
859
+ brandExtra: string;
860
+ success: string;
861
+ warning: string;
862
+ alert: string;
863
+ neutral: string;
864
+ };
865
+ static: {
866
+ light: string;
867
+ dark: string;
868
+ };
869
+ };
870
+ border: {
871
+ primary: string;
872
+ secondary: string;
873
+ inverse: string;
874
+ brand: string;
875
+ brandExtra: string;
876
+ success: string;
877
+ warning: string;
878
+ alert: string;
879
+ neutral: string;
880
+ };
881
+ overlay: {
882
+ mono: string;
883
+ brand: string;
884
+ brandExtra: string;
885
+ success: string;
886
+ warning: string;
887
+ alert: string;
888
+ neutral: string;
889
+ };
890
+ layer: {
891
+ scrim: string;
892
+ float: string;
893
+ };
894
+ control: {
895
+ brand: {
896
+ primary: {
897
+ bg: string;
898
+ bgHover: string;
899
+ bgPress: string;
900
+ bgDisable: string;
901
+ border: string;
902
+ borderHover: string;
903
+ borderPress: string;
904
+ borderDisable: string;
905
+ text: {
906
+ primary: string;
907
+ secondary: string;
908
+ disable: string;
909
+ };
910
+ };
911
+ secondary: {
912
+ bg: string;
913
+ bgHover: string;
914
+ bgPress: string;
915
+ border: string;
916
+ borderHover: string;
917
+ borderPress: string;
918
+ text: {
919
+ primary: string;
920
+ secondary: string;
921
+ };
922
+ };
923
+ };
924
+ brandExtra: {
925
+ primary: {
926
+ bg: string;
927
+ bgHover: string;
928
+ bgPress: string;
929
+ border: string;
930
+ borderHover: string;
931
+ borderPress: string;
932
+ text: {
933
+ primary: string;
934
+ secondary: string;
935
+ };
936
+ };
937
+ secondary: {
938
+ bg: string;
939
+ bgHover: string;
940
+ bgPress: string;
941
+ border: string;
942
+ borderHover: string;
943
+ borderPress: string;
944
+ text: {
945
+ primary: string;
946
+ secondary: string;
947
+ };
948
+ };
949
+ };
950
+ alert: {
951
+ primary: {
952
+ bg: string;
953
+ bgHover: string;
954
+ bgPress: string;
955
+ border: string;
956
+ borderHover: string;
957
+ borderPress: string;
958
+ text: {
959
+ primary: string;
960
+ secondary: string;
961
+ };
962
+ };
963
+ secondary: {
964
+ bg: string;
965
+ bgHover: string;
966
+ bgPress: string;
967
+ border: string;
968
+ borderHover: string;
969
+ borderPress: string;
970
+ text: {
971
+ primary: string;
972
+ secondary: string;
973
+ };
974
+ };
975
+ };
976
+ mono: {
977
+ primary: {
978
+ bg: string;
979
+ bgHover: string;
980
+ bgPress: string;
981
+ border: string;
982
+ borderHover: string;
983
+ borderPress: string;
984
+ text: {
985
+ primary: string;
986
+ secondary: string;
987
+ };
988
+ };
989
+ secondary: {
990
+ bg: string;
991
+ bgHover: string;
992
+ bgPress: string;
993
+ border: string;
994
+ borderHover: string;
995
+ borderPress: string;
996
+ text: {
997
+ primary: string;
998
+ secondary: string;
999
+ };
1000
+ };
1001
+ };
1002
+ input: {
1003
+ bg: string;
1004
+ bgHover: string;
1005
+ bgDisable: string;
1006
+ border: string;
1007
+ borderHover: string;
1008
+ borderDisable: string;
1009
+ text: string;
1010
+ textDisable: string;
1011
+ placeholder: string;
1012
+ };
1013
+ focus: {
1014
+ bg: string;
1015
+ };
1016
+ check: {
1017
+ bg: string;
1018
+ bgHover: string;
1019
+ bgDisable: string;
1020
+ };
1021
+ faint: {
1022
+ bg: string;
1023
+ bgHover: string;
1024
+ border: string;
1025
+ borderHover: string;
1026
+ };
1027
+ switch: {
1028
+ bg: string;
1029
+ bgHover: string;
1030
+ };
1031
+ text: {
1032
+ primary: string;
1033
+ secondary: string;
1034
+ faint: string;
1035
+ disable: string;
1036
+ };
1037
+ link: {
1038
+ primary: string;
1039
+ primaryHover: string;
1040
+ secondary: string;
1041
+ secondaryHover: string;
1042
+ };
1043
+ };
1044
+ } | {
1045
+ background: {
1046
+ primary: string;
1047
+ secondary: string;
1048
+ inverse: string;
1049
+ brand: {
1050
+ primary: string;
1051
+ secondary: string;
1052
+ };
1053
+ brandExtra: {
1054
+ primary: string;
1055
+ secondary: string;
1056
+ };
1057
+ success: {
1058
+ primary: string;
1059
+ secondary: string;
1060
+ };
1061
+ warning: {
1062
+ primary: string;
1063
+ secondary: string;
1064
+ };
1065
+ alert: {
1066
+ primary: string;
1067
+ secondary: string;
1068
+ };
1069
+ neutral: {
1070
+ primary: string;
1071
+ secondary: string;
1072
+ };
1073
+ };
1074
+ content: {
1075
+ primary: string;
1076
+ secondary: string;
1077
+ tertiary: string;
1078
+ inverse: string;
1079
+ brand: {
1080
+ primary: string;
1081
+ secondary: string;
1082
+ };
1083
+ brandExtra: {
1084
+ primary: string;
1085
+ secondary: string;
1086
+ };
1087
+ success: {
1088
+ primary: string;
1089
+ secondary: string;
1090
+ };
1091
+ warning: {
1092
+ primary: string;
1093
+ secondary: string;
1094
+ };
1095
+ alert: {
1096
+ primary: string;
1097
+ secondary: string;
1098
+ };
1099
+ neutral: {
1100
+ primary: string;
1101
+ secondary: string;
1102
+ };
1103
+ on: {
1104
+ brand: string;
1105
+ brandExtra: string;
1106
+ success: string;
1107
+ warning: string;
1108
+ alert: string;
1109
+ neutral: string;
1110
+ };
1111
+ static: {
1112
+ light: string;
1113
+ dark: string;
1114
+ };
1115
+ };
1116
+ border: {
1117
+ primary: string;
1118
+ secondary: string;
1119
+ inverse: string;
1120
+ brand: string;
1121
+ brandExtra: string;
1122
+ success: string;
1123
+ warning: string;
1124
+ alert: string;
1125
+ neutral: string;
1126
+ };
1127
+ overlay: {
1128
+ mono: string;
1129
+ brand: string;
1130
+ brandExtra: string;
1131
+ success: string;
1132
+ warning: string;
1133
+ alert: string;
1134
+ neutral: string;
1135
+ };
1136
+ layer: {
1137
+ scrim: string;
1138
+ float: string;
1139
+ };
1140
+ control: {
1141
+ brand: {
1142
+ primary: {
1143
+ bg: string;
1144
+ bgHover: string;
1145
+ bgPress: string;
1146
+ bgDisable: string;
1147
+ border: string;
1148
+ borderHover: string;
1149
+ borderPress: string;
1150
+ borderDisable: string;
1151
+ text: {
1152
+ primary: string;
1153
+ secondary: string;
1154
+ disable: string;
1155
+ };
1156
+ };
1157
+ secondary: {
1158
+ bg: string;
1159
+ bgHover: string;
1160
+ bgPress: string;
1161
+ border: string;
1162
+ borderHover: string;
1163
+ borderPress: string;
1164
+ text: {
1165
+ primary: string;
1166
+ secondary: string;
1167
+ };
1168
+ };
1169
+ };
1170
+ brandExtra: {
1171
+ primary: {
1172
+ bg: string;
1173
+ bgHover: string;
1174
+ bgPress: string;
1175
+ border: string;
1176
+ borderHover: string;
1177
+ borderPress: string;
1178
+ text: {
1179
+ primary: string;
1180
+ secondary: string;
1181
+ };
1182
+ };
1183
+ secondary: {
1184
+ bg: string;
1185
+ bgHover: string;
1186
+ bgPress: string;
1187
+ border: string;
1188
+ borderHover: string;
1189
+ borderPress: string;
1190
+ text: {
1191
+ primary: string;
1192
+ secondary: string;
1193
+ };
1194
+ };
1195
+ };
1196
+ alert: {
1197
+ primary: {
1198
+ bg: string;
1199
+ bgHover: string;
1200
+ bgPress: string;
1201
+ border: string;
1202
+ borderHover: string;
1203
+ borderPress: string;
1204
+ text: {
1205
+ primary: string;
1206
+ secondary: string;
1207
+ };
1208
+ };
1209
+ secondary: {
1210
+ bg: string;
1211
+ bgHover: string;
1212
+ bgPress: string;
1213
+ border: string;
1214
+ borderHover: string;
1215
+ borderPress: string;
1216
+ text: {
1217
+ primary: string;
1218
+ secondary: string;
1219
+ };
1220
+ };
1221
+ };
1222
+ mono: {
1223
+ primary: {
1224
+ bg: string;
1225
+ bgHover: string;
1226
+ bgPress: string;
1227
+ border: string;
1228
+ borderHover: string;
1229
+ borderPress: string;
1230
+ text: {
1231
+ primary: string;
1232
+ secondary: string;
1233
+ };
1234
+ };
1235
+ secondary: {
1236
+ bg: string;
1237
+ bgHover: string;
1238
+ bgPress: string;
1239
+ border: string;
1240
+ borderHover: string;
1241
+ borderPress: string;
1242
+ text: {
1243
+ primary: string;
1244
+ secondary: string;
1245
+ };
1246
+ };
1247
+ };
1248
+ input: {
1249
+ bg: string;
1250
+ bgHover: string;
1251
+ bgDisable: string;
1252
+ border: string;
1253
+ borderHover: string;
1254
+ borderDisable: string;
1255
+ text: string;
1256
+ textDisable: string;
1257
+ placeholder: string;
1258
+ };
1259
+ focus: {
1260
+ bg: string;
1261
+ };
1262
+ check: {
1263
+ bg: string;
1264
+ bgHover: string;
1265
+ bgDisable: string;
1266
+ };
1267
+ faint: {
1268
+ bg: string;
1269
+ bgHover: string;
1270
+ border: string;
1271
+ borderHover: string;
1272
+ };
1273
+ switch: {
1274
+ bg: string;
1275
+ bgHover: string;
1276
+ };
1277
+ text: {
1278
+ primary: string;
1279
+ secondary: string;
1280
+ faint: string;
1281
+ disable: string;
1282
+ };
1283
+ link: {
1284
+ primary: string;
1285
+ primaryHover: string;
1286
+ secondary: string;
1287
+ secondaryHover: string;
1288
+ };
1289
+ };
1290
+ };
1291
+ spacing: {
1292
+ xs: number;
1293
+ sm: number;
1294
+ md: number;
1295
+ lg: number;
1296
+ xl: number;
1297
+ };
1298
+ radius: {
1299
+ button: number;
1300
+ card: number;
1301
+ input: number;
1302
+ tagSmall: number;
1303
+ tagLarge: number;
1304
+ avatarSmall: number;
1305
+ avatarLarge: number;
1306
+ avatarCircle: number;
1307
+ };
1308
+ shadow: {
1309
+ active: string;
1310
+ surface: string;
1311
+ surfaceHover: string;
1312
+ popover: string;
1313
+ modal: string;
1314
+ };
1315
+ fonts: {
1316
+ primary: string;
1317
+ };
1318
+ typography: {
1319
+ primary: string;
1320
+ };
1321
+ sizing: {
1322
+ button: (size: "xl" | "l" | "m" | "s" | "xs") => {
1323
+ height: number;
1324
+ padding: number;
1325
+ fontSize: number;
1326
+ spinnerSize: number;
1327
+ iconSize: number;
1328
+ iconContainerSize: number;
1329
+ iconPadding: number;
1330
+ loadingPadding: number;
1331
+ } | {
1332
+ height: number;
1333
+ padding: number;
1334
+ fontSize: number;
1335
+ spinnerSize: number;
1336
+ iconSize: number;
1337
+ iconContainerSize: number;
1338
+ iconPadding: number;
1339
+ loadingPadding: number;
1340
+ } | {
1341
+ height: number;
1342
+ padding: number;
1343
+ fontSize: number;
1344
+ spinnerSize: number;
1345
+ iconSize: number;
1346
+ iconContainerSize: number;
1347
+ iconPadding: number;
1348
+ loadingPadding: number;
1349
+ } | {
1350
+ height: number;
1351
+ padding: number;
1352
+ fontSize: number;
1353
+ spinnerSize: number;
1354
+ iconSize: number;
1355
+ iconContainerSize: number;
1356
+ iconPadding: number;
1357
+ loadingPadding: number;
1358
+ } | {
1359
+ height: number;
1360
+ padding: number;
1361
+ fontSize: number;
1362
+ spinnerSize: number;
1363
+ iconSize: number;
1364
+ iconContainerSize: number;
1365
+ iconPadding: number;
1366
+ loadingPadding: number;
1367
+ };
1368
+ flexButton: (size: "xl" | "l" | "m" | "s" | "xs") => {
1369
+ height: number;
1370
+ padding: number;
1371
+ fontSize: number;
1372
+ spinnerSize: number;
1373
+ iconSize: number;
1374
+ borderRadius: number;
1375
+ } | {
1376
+ height: number;
1377
+ padding: number;
1378
+ fontSize: number;
1379
+ spinnerSize: number;
1380
+ iconSize: number;
1381
+ borderRadius: number;
1382
+ } | {
1383
+ height: number;
1384
+ padding: number;
1385
+ fontSize: number;
1386
+ spinnerSize: number;
1387
+ iconSize: number;
1388
+ borderRadius: number;
1389
+ } | {
1390
+ height: number;
1391
+ padding: number;
1392
+ fontSize: number;
1393
+ spinnerSize: number;
1394
+ iconSize: number;
1395
+ borderRadius: number;
1396
+ } | {
1397
+ height: number;
1398
+ padding: number;
1399
+ fontSize: number;
1400
+ spinnerSize: number;
1401
+ iconSize: number;
1402
+ borderRadius: number;
1403
+ };
1404
+ checkbox: (size: "xl" | "l" | "m" | "s") => {
1405
+ size: number;
1406
+ fontSize: number;
1407
+ descriptionFontSize: number;
1408
+ labelGap: number;
1409
+ textGap: number;
1410
+ borderRadius: number;
1411
+ } | {
1412
+ size: number;
1413
+ fontSize: number;
1414
+ descriptionFontSize: number;
1415
+ labelGap: number;
1416
+ textGap: number;
1417
+ borderRadius: number;
1418
+ } | {
1419
+ size: number;
1420
+ fontSize: number;
1421
+ descriptionFontSize: number;
1422
+ labelGap: number;
1423
+ textGap: number;
1424
+ borderRadius: number;
1425
+ } | {
1426
+ size: number;
1427
+ fontSize: number;
1428
+ descriptionFontSize: number;
1429
+ labelGap: number;
1430
+ textGap: number;
1431
+ borderRadius: number;
1432
+ };
1433
+ radio: (size: "xl" | "l" | "m" | "s") => {
1434
+ size: number;
1435
+ fontSize: number;
1436
+ lineHeight: number;
1437
+ descriptionFontSize: number;
1438
+ descriptionLineHeight: number;
1439
+ labelGap: number;
1440
+ textGap: number;
1441
+ borderWidth: number;
1442
+ } | {
1443
+ size: number;
1444
+ fontSize: number;
1445
+ lineHeight: number;
1446
+ descriptionFontSize: number;
1447
+ descriptionLineHeight: number;
1448
+ labelGap: number;
1449
+ textGap: number;
1450
+ borderWidth: number;
1451
+ } | {
1452
+ size: number;
1453
+ fontSize: number;
1454
+ lineHeight: number;
1455
+ descriptionFontSize: number;
1456
+ descriptionLineHeight: number;
1457
+ labelGap: number;
1458
+ textGap: number;
1459
+ borderWidth: number;
1460
+ } | {
1461
+ size: number;
1462
+ fontSize: number;
1463
+ lineHeight: number;
1464
+ descriptionFontSize: number;
1465
+ descriptionLineHeight: number;
1466
+ labelGap: number;
1467
+ textGap: number;
1468
+ borderWidth: number;
1469
+ };
1470
+ input: (size: "xl" | "l" | "m" | "s" | "xs") => {
1471
+ height: number;
1472
+ padding: number;
1473
+ fontSize: number;
1474
+ iconSize: number;
1475
+ radius: number;
1476
+ borderWidth: number;
1477
+ } | {
1478
+ height: number;
1479
+ padding: number;
1480
+ fontSize: number;
1481
+ iconSize: number;
1482
+ radius: number;
1483
+ borderWidth: number;
1484
+ } | {
1485
+ height: number;
1486
+ padding: number;
1487
+ fontSize: number;
1488
+ iconSize: number;
1489
+ radius: number;
1490
+ borderWidth: number;
1491
+ } | {
1492
+ height: number;
1493
+ padding: number;
1494
+ fontSize: number;
1495
+ iconSize: number;
1496
+ radius: number;
1497
+ borderWidth: number;
1498
+ } | {
1499
+ height: number;
1500
+ padding: number;
1501
+ fontSize: number;
1502
+ iconSize: number;
1503
+ radius: number;
1504
+ borderWidth: number;
1505
+ };
1506
+ inputPin: (size: "xl" | "l" | "m" | "s" | "xs") => {
1507
+ size: number;
1508
+ gap: number;
1509
+ fontSize: number;
1510
+ radius: number;
1511
+ borderWidth: number;
1512
+ } | {
1513
+ size: number;
1514
+ gap: number;
1515
+ fontSize: number;
1516
+ radius: number;
1517
+ borderWidth: number;
1518
+ } | {
1519
+ size: number;
1520
+ gap: number;
1521
+ fontSize: number;
1522
+ radius: number;
1523
+ borderWidth: number;
1524
+ } | {
1525
+ size: number;
1526
+ gap: number;
1527
+ fontSize: number;
1528
+ radius: number;
1529
+ borderWidth: number;
1530
+ } | {
1531
+ size: number;
1532
+ gap: number;
1533
+ fontSize: number;
1534
+ radius: number;
1535
+ borderWidth: number;
1536
+ };
1537
+ textarea: (size: "xl" | "l" | "m" | "s" | "xs") => {
1538
+ height: number;
1539
+ padding: number;
1540
+ fontSize: number;
1541
+ iconSize: number;
1542
+ } | {
1543
+ height: number;
1544
+ padding: number;
1545
+ fontSize: number;
1546
+ iconSize: number;
1547
+ } | {
1548
+ height: number;
1549
+ padding: number;
1550
+ fontSize: number;
1551
+ iconSize: number;
1552
+ } | {
1553
+ height: number;
1554
+ padding: number;
1555
+ fontSize: number;
1556
+ iconSize: number;
1557
+ } | {
1558
+ height: number;
1559
+ padding: number;
1560
+ fontSize: number;
1561
+ iconSize: number;
1562
+ };
1563
+ switch: (size: "xl" | "l" | "m" | "s") => {
1564
+ width: number;
1565
+ height: number;
1566
+ knobSize: number;
1567
+ fontSize: number;
1568
+ lineHeight: number;
1569
+ descriptionFontSize: number;
1570
+ descriptionLineHeight: number;
1571
+ labelGap: number;
1572
+ textGap: number;
1573
+ frameBorderRadius: number;
1574
+ knobBorderRadius: number;
1575
+ } | {
1576
+ width: number;
1577
+ height: number;
1578
+ knobSize: number;
1579
+ fontSize: number;
1580
+ lineHeight: number;
1581
+ descriptionFontSize: number;
1582
+ descriptionLineHeight: number;
1583
+ labelGap: number;
1584
+ textGap: number;
1585
+ frameBorderRadius: number;
1586
+ knobBorderRadius: number;
1587
+ } | {
1588
+ width: number;
1589
+ height: number;
1590
+ knobSize: number;
1591
+ fontSize: number;
1592
+ lineHeight: number;
1593
+ descriptionFontSize: number;
1594
+ descriptionLineHeight: number;
1595
+ labelGap: number;
1596
+ textGap: number;
1597
+ frameBorderRadius: number;
1598
+ knobBorderRadius: number;
1599
+ } | {
1600
+ width: number;
1601
+ height: number;
1602
+ knobSize: number;
1603
+ fontSize: number;
1604
+ lineHeight: number;
1605
+ descriptionFontSize: number;
1606
+ descriptionLineHeight: number;
1607
+ labelGap: number;
1608
+ textGap: number;
1609
+ frameBorderRadius: number;
1610
+ knobBorderRadius: number;
1611
+ };
1612
+ avatar: (size: "xl" | "l" | "m" | "s" | "xs") => {
1613
+ size: number;
1614
+ fontSize: number;
1615
+ iconSize: number;
1616
+ badgeSize: number;
1617
+ badgeOffsetCircle: number;
1618
+ badgeOffsetSquare: number;
1619
+ borderRadiusSquare: number;
1620
+ borderRadiusCircle: number;
1621
+ } | {
1622
+ size: number;
1623
+ fontSize: number;
1624
+ iconSize: number;
1625
+ badgeSize: number;
1626
+ badgeOffsetCircle: number;
1627
+ badgeOffsetSquare: number;
1628
+ borderRadiusSquare: number;
1629
+ borderRadiusCircle: number;
1630
+ } | {
1631
+ size: number;
1632
+ fontSize: number;
1633
+ iconSize: number;
1634
+ badgeSize: number;
1635
+ badgeOffsetCircle: number;
1636
+ badgeOffsetSquare: number;
1637
+ borderRadiusSquare: number;
1638
+ borderRadiusCircle: number;
1639
+ } | {
1640
+ size: number;
1641
+ fontSize: number;
1642
+ iconSize: number;
1643
+ badgeSize: number;
1644
+ badgeOffsetCircle: number;
1645
+ badgeOffsetSquare: number;
1646
+ borderRadiusSquare: number;
1647
+ borderRadiusCircle: number;
1648
+ } | {
1649
+ size: number;
1650
+ fontSize: number;
1651
+ iconSize: number;
1652
+ badgeSize: number;
1653
+ badgeOffsetCircle: number;
1654
+ badgeOffsetSquare: number;
1655
+ borderRadiusSquare: number;
1656
+ borderRadiusCircle: number;
1657
+ };
1658
+ tag: (size: "xl" | "l" | "m" | "s" | "xs") => {
1659
+ height: number;
1660
+ padding: number;
1661
+ fontSize: number;
1662
+ gap: number;
1663
+ iconSize: number;
1664
+ radius: number;
1665
+ } | {
1666
+ height: number;
1667
+ padding: number;
1668
+ fontSize: number;
1669
+ gap: number;
1670
+ iconSize: number;
1671
+ radius: number;
1672
+ } | {
1673
+ height: number;
1674
+ padding: number;
1675
+ fontSize: number;
1676
+ gap: number;
1677
+ iconSize: number;
1678
+ radius: number;
1679
+ } | {
1680
+ height: number;
1681
+ padding: number;
1682
+ fontSize: number;
1683
+ gap: number;
1684
+ iconSize: number;
1685
+ radius: number;
1686
+ } | {
1687
+ height: number;
1688
+ padding: number;
1689
+ fontSize: number;
1690
+ gap: number;
1691
+ iconSize: number;
1692
+ radius: number;
1693
+ };
1694
+ divider: (size: "l" | "m" | "s") => {
1695
+ height: number;
1696
+ fontSize: number;
1697
+ lineWeight: number;
1698
+ } | {
1699
+ height: number;
1700
+ fontSize: number;
1701
+ lineWeight: number;
1702
+ } | {
1703
+ height: number;
1704
+ fontSize: number;
1705
+ lineWeight: number;
1706
+ };
1707
+ spinner: (size: "xl" | "l" | "m" | "s" | "xs") => {
1708
+ size: number;
1709
+ strokeWidth: number;
1710
+ } | {
1711
+ size: number;
1712
+ strokeWidth: number;
1713
+ } | {
1714
+ size: number;
1715
+ strokeWidth: number;
1716
+ } | {
1717
+ size: number;
1718
+ strokeWidth: number;
1719
+ } | {
1720
+ size: number;
1721
+ strokeWidth: number;
1722
+ };
1723
+ tabs: (size: "xl" | "l" | "m" | "s") => {
1724
+ height: number;
1725
+ fontSize: number;
1726
+ iconSize: number;
1727
+ gap: number;
1728
+ paddingHorizontal: number;
1729
+ } | {
1730
+ height: number;
1731
+ fontSize: number;
1732
+ iconSize: number;
1733
+ gap: number;
1734
+ paddingHorizontal: number;
1735
+ } | {
1736
+ height: number;
1737
+ fontSize: number;
1738
+ iconSize: number;
1739
+ gap: number;
1740
+ paddingHorizontal: number;
1741
+ } | {
1742
+ height: number;
1743
+ fontSize: number;
1744
+ iconSize: number;
1745
+ gap: number;
1746
+ paddingHorizontal: number;
1747
+ };
1748
+ segmented: (size: "xl" | "l" | "m" | "s") => {
1749
+ height: number;
1750
+ fontSize: number;
1751
+ iconSize: number;
1752
+ gap: number;
1753
+ padding: number;
1754
+ } | {
1755
+ height: number;
1756
+ fontSize: number;
1757
+ iconSize: number;
1758
+ gap: number;
1759
+ padding: number;
1760
+ } | {
1761
+ height: number;
1762
+ fontSize: number;
1763
+ iconSize: number;
1764
+ gap: number;
1765
+ padding: number;
1766
+ } | {
1767
+ height: number;
1768
+ fontSize: number;
1769
+ iconSize: number;
1770
+ gap: number;
1771
+ padding: number;
1772
+ };
1773
+ badge: (size: "xl" | "l" | "m" | "s" | "xs") => {
1774
+ size: number;
1775
+ fontSize: number;
1776
+ lineHeight: number;
1777
+ iconSize: number;
1778
+ padding: number;
1779
+ } | {
1780
+ size: number;
1781
+ fontSize: number;
1782
+ lineHeight: number;
1783
+ iconSize: number;
1784
+ padding: number;
1785
+ } | {
1786
+ size: number;
1787
+ fontSize: number;
1788
+ lineHeight: number;
1789
+ iconSize: number;
1790
+ padding: number;
1791
+ } | {
1792
+ size: number;
1793
+ fontSize: number;
1794
+ lineHeight: number;
1795
+ iconSize: number;
1796
+ padding: number;
1797
+ } | {
1798
+ size: number;
1799
+ fontSize: number;
1800
+ lineHeight: number;
1801
+ iconSize: number;
1802
+ padding: number;
1803
+ };
1804
+ notification: (type: "toast" | "inline") => {
1805
+ width: number;
1806
+ paddingHorizontal: number;
1807
+ paddingVertical: number;
1808
+ gap: number;
1809
+ titleSize: number;
1810
+ messageSize: number;
1811
+ iconSize: number;
1812
+ iconWrapperSize: number;
1813
+ radius: number;
1814
+ } | {
1815
+ width: string;
1816
+ paddingHorizontal: number;
1817
+ paddingVertical: number;
1818
+ gap: number;
1819
+ titleSize: number;
1820
+ messageSize: number;
1821
+ iconSize: number;
1822
+ iconWrapperSize: number;
1823
+ radius: number;
1824
+ };
1825
+ progress: (size: "xl" | "l" | "m" | "s" | "xs" | "xxs") => {
1826
+ height: number;
1827
+ labelSize: number;
1828
+ helperSize: number;
1829
+ gap: number;
1830
+ } | {
1831
+ height: number;
1832
+ labelSize: number;
1833
+ helperSize: number;
1834
+ gap: number;
1835
+ } | {
1836
+ height: number;
1837
+ labelSize: number;
1838
+ helperSize: number;
1839
+ gap: number;
1840
+ } | {
1841
+ height: number;
1842
+ labelSize: number;
1843
+ helperSize: number;
1844
+ gap: number;
1845
+ } | {
1846
+ height: number;
1847
+ labelSize: number;
1848
+ helperSize: number;
1849
+ gap: number;
1850
+ } | {
1851
+ height: number;
1852
+ labelSize: number;
1853
+ helperSize: number;
1854
+ gap: number;
1855
+ };
1856
+ supportingText: (size: "xl" | "l" | "m" | "s" | "xs") => {
1857
+ fontSize: number;
1858
+ lineHeight: string;
1859
+ gap: number;
1860
+ iconSize: number;
1861
+ } | {
1862
+ fontSize: number;
1863
+ lineHeight: string;
1864
+ gap: number;
1865
+ iconSize: number;
1866
+ } | {
1867
+ fontSize: number;
1868
+ lineHeight: string;
1869
+ gap: number;
1870
+ iconSize: number;
1871
+ } | {
1872
+ fontSize: number;
1873
+ lineHeight: string;
1874
+ gap: number;
1875
+ iconSize: number;
1876
+ } | {
1877
+ fontSize: number;
1878
+ lineHeight: string;
1879
+ gap: number;
1880
+ iconSize: number;
1881
+ };
1882
+ iconWrapper: (size: "xl" | "l" | "m" | "s" | "xs" | "xxs") => {
1883
+ size: number;
1884
+ iconSize: number;
1885
+ fontSize: number;
1886
+ } | {
1887
+ size: number;
1888
+ iconSize: number;
1889
+ fontSize: number;
1890
+ } | {
1891
+ size: number;
1892
+ iconSize: number;
1893
+ fontSize: number;
1894
+ } | {
1895
+ size: number;
1896
+ iconSize: number;
1897
+ fontSize: number;
1898
+ } | {
1899
+ size: number;
1900
+ iconSize: number;
1901
+ fontSize: number;
1902
+ } | {
1903
+ size: number;
1904
+ iconSize: number;
1905
+ fontSize: number;
1906
+ };
1907
+ stepper: (size: "md" | "sm") => {
1908
+ iconSize: number;
1909
+ titleSize: number;
1910
+ descSize: number;
1911
+ gap: number;
1912
+ currentTitleSize: number;
1913
+ currentDescSize: number;
1914
+ currentPadding: number;
1915
+ tailSize: number;
1916
+ } | {
1917
+ iconSize: number;
1918
+ titleSize: number;
1919
+ descSize: number;
1920
+ gap: number;
1921
+ currentTitleSize: number;
1922
+ currentDescSize: number;
1923
+ currentPadding: number;
1924
+ tailSize: number;
1925
+ };
1926
+ };
1927
+ };
1928
+ interface DesignSystemContextType {
1929
+ mode: ThemeMode;
1930
+ setMode: (mode: ThemeMode) => void;
1931
+ theme: ReturnType<typeof themeConfig>;
1932
+ }
1933
+ declare const XUIProvider: React.FC<{
1934
+ children: React.ReactNode;
1935
+ initialMode?: ThemeMode;
1936
+ }>;
1937
+ declare const useDesignSystem: () => DesignSystemContextType;
1938
+ declare const useId: () => string;
1939
+
1940
+ export { type ThemeColors, type ThemeMode, XUIProvider, colors, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId };