@blockscout/ui-toolkit 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/chakra/accordion.d.ts +9 -0
  2. package/dist/chakra/select.d.ts +4 -0
  3. package/dist/components/AdaptiveTabs/AdaptiveTabsList.d.ts +1 -1
  4. package/dist/components/AdaptiveTabs/utils.d.ts +1 -1
  5. package/dist/components/RoutedTabs/RoutedTabs.d.ts +1 -0
  6. package/dist/index.js +5406 -5221
  7. package/dist/theme/foundations/colors.d.ts +1 -0
  8. package/dist/theme/recipes/button.recipe.d.ts +53 -47
  9. package/dist/theme/recipes/checkbox.recipe.d.ts +4 -4
  10. package/dist/theme/recipes/checkmark.recipe.d.ts +4 -4
  11. package/dist/theme/recipes/close-button.recipe.d.ts +1 -1
  12. package/dist/theme/recipes/index.d.ts +119 -116
  13. package/dist/theme/recipes/link.recipe.d.ts +2 -2
  14. package/dist/theme/recipes/menu.recipe.d.ts +1 -1
  15. package/dist/theme/recipes/radio-group.recipe.d.ts +4 -4
  16. package/dist/theme/recipes/radiomark.recipe.d.ts +4 -4
  17. package/dist/theme/recipes/select.recipe.d.ts +8 -8
  18. package/dist/theme/recipes/switch.recipe.d.ts +14 -2
  19. package/dist/theme/recipes/tabs.recipe.d.ts +22 -15
  20. package/dist/theme/recipes/tag.recipe.d.ts +2 -2
  21. package/dist/theme/recipes/tooltip.recipe.d.ts +0 -22
  22. package/package.json +1 -1
package/dist/theme/recipes/index.d.ts CHANGED
@@ -61,10 +61,10 @@ export declare const recipes: {
61
61
  button: import('@chakra-ui/react').RecipeDefinition<{
62
62
  variant: {
63
63
  solid: {
64
- bg: "blue.600";
64
+ bg: "button.solid.bg";
65
65
  color: "white";
66
66
  _hover: {
67
- bg: "link.primary.hover";
67
+ bg: "hover";
68
68
  };
69
69
  _loading: {
70
70
  opacity: number;
@@ -75,7 +75,7 @@ export declare const recipes: {
75
75
  };
76
76
  };
77
77
  _expanded: {
78
- bg: "link.primary.hover";
78
+ bg: "hover";
79
79
  };
80
80
  };
81
81
  outline: {
@@ -86,8 +86,8 @@ export declare const recipes: {
86
86
  borderColor: "button.outline.fg";
87
87
  _hover: {
88
88
  bg: "transparent";
89
- color: "link.primary.hover";
90
- borderColor: "link.primary.hover";
89
+ color: "hover";
90
+ borderColor: "hover";
91
91
  };
92
92
  _loading: {
93
93
  opacity: number;
@@ -106,33 +106,33 @@ export declare const recipes: {
106
106
  borderColor: "button.dropdown.border";
107
107
  _hover: {
108
108
  bg: "transparent";
109
- color: "link.primary.hover";
110
- borderColor: "link.primary.hover";
109
+ color: "hover";
110
+ borderColor: "hover";
111
111
  };
112
112
  _loading: {
113
113
  opacity: number;
114
114
  '& .chakra-spinner': {
115
- borderColor: "blue.500";
115
+ borderColor: "selected.option.bg";
116
116
  borderBottomColor: "spinner.track";
117
117
  borderInlineStartColor: "spinner.track";
118
118
  };
119
119
  };
120
120
  _expanded: {
121
121
  bg: "transparent";
122
- color: "link.primary.hover";
123
- borderColor: "link.primary.hover";
122
+ color: "hover";
123
+ borderColor: "hover";
124
124
  };
125
125
  _selected: {
126
- bg: "button.dropdown.bg.selected";
127
- color: "button.dropdown.fg.selected";
126
+ bg: "selected.control.bg";
127
+ color: "selected.control.text";
128
128
  borderColor: "transparent";
129
129
  _hover: {
130
- bg: "button.dropdown.bg.selected";
131
- color: "link.primary.hover";
130
+ bg: "selected.control.bg";
131
+ color: "hover";
132
132
  borderColor: "transparent";
133
133
  };
134
134
  _expanded: {
135
- color: "link.primary.hover";
135
+ color: "hover";
136
136
  };
137
137
  };
138
138
  };
@@ -144,13 +144,13 @@ export declare const recipes: {
144
144
  borderStyle: "solid";
145
145
  _hover: {
146
146
  bg: "transparent";
147
- color: "link.primary.hover";
148
- borderColor: "link.primary.hover";
147
+ color: "hover";
148
+ borderColor: "hover";
149
149
  };
150
150
  _loading: {
151
151
  opacity: number;
152
152
  '& .chakra-spinner': {
153
- borderColor: "blue.500";
153
+ borderColor: "selected.option.bg";
154
154
  borderBottomColor: "spinner.track";
155
155
  borderInlineStartColor: "spinner.track";
156
156
  };
@@ -162,10 +162,10 @@ export declare const recipes: {
162
162
  borderWidth: "0px";
163
163
  _hover: {
164
164
  bg: "button.header.bg.selected";
165
- color: "link.primary.hover";
165
+ color: "hover";
166
166
  };
167
167
  _expanded: {
168
- color: "link.primary.hover";
168
+ color: "hover";
169
169
  };
170
170
  _highlighted: {
171
171
  bg: "button.header.bg.highlighted";
@@ -173,11 +173,11 @@ export declare const recipes: {
173
173
  borderColor: "transparent";
174
174
  borderWidth: "0px";
175
175
  _expanded: {
176
- color: "link.primary.hover";
176
+ color: "hover";
177
177
  };
178
178
  _hover: {
179
179
  bg: "button.header.bg.highlighted";
180
- color: "link.primary.hover";
180
+ color: "hover";
181
181
  };
182
182
  };
183
183
  };
@@ -202,33 +202,39 @@ export declare const recipes: {
202
202
  color: "button.hero.fg.selected";
203
203
  _hover: {
204
204
  bg: "button.hero.bg.selected";
205
- color: "link.primary.hover";
205
+ color: "hover";
206
206
  };
207
207
  _expanded: {
208
- color: "link.primary.hover";
208
+ color: "hover";
209
209
  };
210
210
  };
211
211
  };
212
212
  segmented: {
213
213
  bg: "transparent";
214
214
  color: "button.segmented.fg";
215
- borderColor: "button.segmented.border";
215
+ borderColor: "selected.control.bg";
216
216
  borderWidth: "2px";
217
217
  borderStyle: "solid";
218
218
  borderRadius: "none";
219
219
  _hover: {
220
- color: "link.primary.hover";
220
+ color: "hover";
221
221
  };
222
222
  _selected: {
223
- bg: "button.segmented.border";
224
- color: "button.segmented.fg.selected";
223
+ bg: "selected.control.bg";
224
+ color: "selected.control.text";
225
225
  _hover: {
226
- bg: "button.segmented.border";
227
- color: "button.segmented.fg.selected";
226
+ bg: "selected.control.bg";
227
+ color: "selected.control.text";
228
+ };
229
+ '& + *': {
230
+ borderLeftWidth: "0";
228
231
  };
229
232
  };
230
- _notFirst: {
231
- borderLeftWidth: "0";
233
+ _notLast: {
234
+ borderRightWidth: "0";
235
+ _selected: {
236
+ borderRightWidth: "2px";
237
+ };
232
238
  };
233
239
  _first: {
234
240
  borderTopLeftRadius: "base";
@@ -252,7 +258,7 @@ export declare const recipes: {
252
258
  color: "button.subtle.fg";
253
259
  _hover: {
254
260
  bg: "button.subtle.bg";
255
- color: "link.primary.hover";
261
+ color: "hover";
256
262
  };
257
263
  _disabled: {
258
264
  bg: "button.subtle.bg";
@@ -276,24 +282,24 @@ export declare const recipes: {
276
282
  };
277
283
  icon_secondary: {
278
284
  bg: "transparent";
279
- color: "button.icon_secondary.fg";
285
+ color: "icon.secondary";
280
286
  border: "none";
281
287
  _hover: {
282
- color: "link.primary.hover";
288
+ color: "hover";
283
289
  };
284
290
  _selected: {
285
- bg: "button.icon_secondary.bg.selected";
286
- color: "button.icon_secondary.fg.selected";
291
+ bg: "selected.control.bg";
292
+ color: "selected.control.text";
287
293
  _hover: {
288
- bg: "button.icon_secondary.bg.selected";
289
- color: "link.primary.hover";
294
+ bg: "selected.control.bg";
295
+ color: "hover";
290
296
  };
291
297
  _expanded: {
292
- color: "link.primary.hover";
298
+ color: "hover";
293
299
  };
294
300
  };
295
301
  _expanded: {
296
- color: "link.primary.hover";
302
+ color: "hover";
297
303
  };
298
304
  };
299
305
  pagination: {
@@ -304,16 +310,16 @@ export declare const recipes: {
304
310
  borderColor: "button.pagination.border";
305
311
  _hover: {
306
312
  bg: "transparent";
307
- color: "link.primary.hover";
308
- borderColor: "link.primary.hover";
313
+ color: "hover";
314
+ borderColor: "hover";
309
315
  };
310
316
  _selected: {
311
- bg: "button.pagination.bg.selected";
312
- color: "button.pagination.fg.selected";
317
+ bg: "selected.control.bg";
318
+ color: "selected.control.text";
313
319
  borderColor: "transparent";
314
320
  _hover: {
315
- bg: "button.pagination.bg.selected";
316
- color: "button.pagination.fg.selected";
321
+ bg: "selected.control.bg";
322
+ color: "selected.control.text";
317
323
  borderColor: "transparent";
318
324
  };
319
325
  };
@@ -404,12 +410,12 @@ export declare const recipes: {
404
410
  };
405
411
  };
406
412
  '&:is([data-state=checked], [data-state=indeterminate])': {
407
- bg: "blue.500";
413
+ bg: "selected.option.bg";
408
414
  color: "white";
409
- borderColor: "blue.500";
415
+ borderColor: "selected.option.bg";
410
416
  _hover: {
411
- bg: "blue.400";
412
- borderColor: "blue.400";
417
+ bg: "hover";
418
+ borderColor: "hover";
413
419
  };
414
420
  };
415
421
  };
@@ -423,7 +429,7 @@ export declare const recipes: {
423
429
  border: "none";
424
430
  _hover: {
425
431
  bg: "transparent";
426
- color: "link.primary.hover";
432
+ color: "hover";
427
433
  };
428
434
  };
429
435
  };
@@ -519,7 +525,7 @@ export declare const recipes: {
519
525
  color: "link.secondary";
520
526
  _hover: {
521
527
  textDecoration: "none";
522
- color: "link.primary.hover";
528
+ color: "hover";
523
529
  };
524
530
  };
525
531
  subtle: {
@@ -545,7 +551,7 @@ export declare const recipes: {
545
551
  menu: {
546
552
  color: "link.menu";
547
553
  _hover: {
548
- color: "link.primary.hover";
554
+ color: "hover";
549
555
  textDecoration: "none";
550
556
  };
551
557
  };
@@ -580,12 +586,12 @@ export declare const recipes: {
580
586
  borderColor: "radio.control.border.hover";
581
587
  };
582
588
  _checked: {
583
- bg: "blue.500";
589
+ bg: "selected.option.bg";
584
590
  color: "white";
585
- borderColor: "blue.500";
591
+ borderColor: "selected.option.bg";
586
592
  _hover: {
587
- bg: "blue.400";
588
- borderColor: "blue.400";
593
+ bg: "hover";
594
+ borderColor: "hover";
589
595
  };
590
596
  };
591
597
  _invalid: {
@@ -896,12 +902,12 @@ export declare const slotRecipes: {
896
902
  };
897
903
  };
898
904
  '&:is([data-state=checked], [data-state=indeterminate])': {
899
- bg: "blue.500";
905
+ bg: "selected.option.bg";
900
906
  color: "white";
901
- borderColor: "blue.500";
907
+ borderColor: "selected.option.bg";
902
908
  _hover: {
903
- bg: "blue.400";
904
- borderColor: "blue.400";
909
+ bg: "hover";
910
+ borderColor: "hover";
905
911
  };
906
912
  };
907
913
  } | undefined;
@@ -1230,7 +1236,7 @@ export declare const slotRecipes: {
1230
1236
  subtle: {
1231
1237
  item: {
1232
1238
  _highlighted: {
1233
- bg: "menu.item.bg.highlighted";
1239
+ bg: "selected.control.bg";
1234
1240
  };
1235
1241
  };
1236
1242
  };
@@ -1364,12 +1370,12 @@ export declare const slotRecipes: {
1364
1370
  borderColor: "radio.control.border.hover";
1365
1371
  };
1366
1372
  _checked: {
1367
- bg: "blue.500";
1373
+ bg: "selected.option.bg";
1368
1374
  color: "white";
1369
- borderColor: "blue.500";
1375
+ borderColor: "selected.option.bg";
1370
1376
  _hover: {
1371
- bg: "blue.400";
1372
- borderColor: "blue.400";
1377
+ bg: "hover";
1378
+ borderColor: "hover";
1373
1379
  };
1374
1380
  };
1375
1381
  _invalid: {
@@ -1443,11 +1449,11 @@ export declare const slotRecipes: {
1443
1449
  color: "select.trigger.outline.fg";
1444
1450
  borderColor: "input.border.filled";
1445
1451
  _expanded: {
1446
- color: "link.primary.hover";
1447
- borderColor: "link.primary.hover";
1452
+ color: "hover";
1453
+ borderColor: "hover";
1448
1454
  _hover: {
1449
- color: "link.primary.hover";
1450
- borderColor: "link.primary.hover";
1455
+ color: "hover";
1456
+ borderColor: "hover";
1451
1457
  };
1452
1458
  };
1453
1459
  _hover: {
@@ -1476,11 +1482,11 @@ export declare const slotRecipes: {
1476
1482
  borderColor: "input.border.error";
1477
1483
  };
1478
1484
  _expanded: {
1479
- color: "link.primary.hover";
1480
- borderColor: "link.primary.hover";
1485
+ color: "hover";
1486
+ borderColor: "hover";
1481
1487
  _hover: {
1482
- color: "link.primary.hover";
1483
- borderColor: "link.primary.hover";
1488
+ color: "hover";
1489
+ borderColor: "hover";
1484
1490
  };
1485
1491
  };
1486
1492
  };
@@ -1607,9 +1613,9 @@ export declare const slotRecipes: {
1607
1613
  bg: "switch.primary.bg";
1608
1614
  focusVisibleRing: "outside";
1609
1615
  _checked: {
1610
- bg: "switch.primary.bg.checked";
1616
+ bg: "selected.option.bg";
1611
1617
  _hover: {
1612
- bg: "switch.primary.bg.hover";
1618
+ bg: "hover";
1613
1619
  };
1614
1620
  };
1615
1621
  };
@@ -1625,6 +1631,18 @@ export declare const slotRecipes: {
1625
1631
  };
1626
1632
  };
1627
1633
  };
1634
+ direction: {
1635
+ rtl: {
1636
+ root: {
1637
+ flexDirection: "row-reverse";
1638
+ };
1639
+ };
1640
+ ltr: {
1641
+ root: {
1642
+ flexDirection: "row";
1643
+ };
1644
+ };
1645
+ };
1628
1646
  size: {
1629
1647
  sm: {
1630
1648
  root: {
@@ -1772,14 +1790,14 @@ export declare const slotRecipes: {
1772
1790
  color: "tabs.solid.fg";
1773
1791
  bg: "transparent";
1774
1792
  _selected: {
1775
- bg: "tabs.solid.bg.selected";
1776
- color: "tabs.solid.fg.selected";
1793
+ bg: "selected.control.bg";
1794
+ color: "selected.control.text";
1777
1795
  _hover: {
1778
- color: "tabs.solid.fg.selected";
1796
+ color: "selected.control.text";
1779
1797
  };
1780
1798
  };
1781
1799
  _hover: {
1782
- color: "link.primary.hover";
1800
+ color: "hover";
1783
1801
  };
1784
1802
  };
1785
1803
  };
@@ -1802,15 +1820,16 @@ export declare const slotRecipes: {
1802
1820
  borderColor: "tabs.secondary.border";
1803
1821
  borderRadius: "base";
1804
1822
  _selected: {
1805
- bg: "tabs.secondary.bg.selected";
1823
+ bg: "selected.control.bg";
1824
+ color: "selected.control.text";
1806
1825
  borderColor: "transparent";
1807
1826
  _hover: {
1808
1827
  borderColor: "transparent";
1809
1828
  };
1810
1829
  };
1811
1830
  _hover: {
1812
- color: "link.primary.hover";
1813
- borderColor: "link.primary.hover";
1831
+ color: "hover";
1832
+ borderColor: "hover";
1814
1833
  };
1815
1834
  };
1816
1835
  };
@@ -1820,20 +1839,26 @@ export declare const slotRecipes: {
1820
1839
  bg: "transparent";
1821
1840
  borderWidth: "2px";
1822
1841
  borderStyle: "solid";
1823
- borderColor: "tabs.segmented.border";
1842
+ borderColor: "selected.control.bg";
1824
1843
  _hover: {
1825
- color: "link.primary.hover";
1844
+ color: "hover";
1826
1845
  };
1827
1846
  _selected: {
1828
- color: "tabs.segmented.fg.selected";
1829
- bg: "tabs.segmented.border";
1830
- borderColor: "tabs.segmented.border";
1847
+ color: "selected.control.text";
1848
+ bg: "selected.control.bg";
1849
+ borderColor: "selected.control.bg";
1831
1850
  _hover: {
1832
- color: "tabs.segmented.fg.selected";
1851
+ color: "selected.control.text";
1852
+ };
1853
+ '& + *': {
1854
+ borderLeftWidth: "0";
1833
1855
  };
1834
1856
  };
1835
- _notFirst: {
1836
- borderLeftWidth: "0";
1857
+ _notLast: {
1858
+ borderRightWidth: "0";
1859
+ _selected: {
1860
+ borderRightWidth: "2px";
1861
+ };
1837
1862
  };
1838
1863
  _first: {
1839
1864
  borderTopLeftRadius: "base";
@@ -1907,11 +1932,11 @@ export declare const slotRecipes: {
1907
1932
  bgColor: "tag.root.select.bg";
1908
1933
  color: "tag.root.select.fg";
1909
1934
  _hover: {
1910
- color: "blue.400";
1935
+ color: "hover";
1911
1936
  opacity: number;
1912
1937
  };
1913
1938
  _selected: {
1914
- bgColor: "tag.root.select.bg.selected";
1939
+ bgColor: "selected.option.bg";
1915
1940
  color: "whiteAlpha.800";
1916
1941
  _hover: {
1917
1942
  color: "whiteAlpha.800";
@@ -1932,28 +1957,6 @@ export declare const slotRecipes: {
1932
1957
  color: "tooltip.fg";
1933
1958
  };
1934
1959
  };
1935
- navigation: {
1936
- content: {
1937
- '--tooltip-bg': "colors.tooltip.navigation.bg";
1938
- bg: "var(--tooltip-bg)";
1939
- color: "tooltip.navigation.fg";
1940
- borderWidth: "0";
1941
- borderRadius: "base";
1942
- minW: "120px";
1943
- boxShadow: "none";
1944
- textAlign: "center";
1945
- padding: "15px 12px";
1946
- _selected: {
1947
- color: "tooltip.navigation.fg.selected";
1948
- };
1949
- };
1950
- arrow: {
1951
- display: "none";
1952
- };
1953
- arrowTip: {
1954
- display: "none";
1955
- };
1956
- };
1957
1960
  popover: {
1958
1961
  content: {
1959
1962
  maxW: "none";
package/dist/theme/recipes/link.recipe.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
11
11
  color: "link.secondary";
12
12
  _hover: {
13
13
  textDecoration: "none";
14
- color: "link.primary.hover";
14
+ color: "hover";
15
15
  };
16
16
  };
17
17
  subtle: {
@@ -37,7 +37,7 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
37
37
  menu: {
38
38
  color: "link.menu";
39
39
  _hover: {
40
- color: "link.primary.hover";
40
+ color: "hover";
41
41
  textDecoration: "none";
42
42
  };
43
43
  };
package/dist/theme/recipes/menu.recipe.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"co
3
3
  subtle: {
4
4
  item: {
5
5
  _highlighted: {
6
- bg: "menu.item.bg.highlighted";
6
+ bg: "selected.control.bg";
7
7
  };
8
8
  };
9
9
  };
package/dist/theme/recipes/radio-group.recipe.d.ts CHANGED
@@ -8,12 +8,12 @@ export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"ro
8
8
  borderColor: "radio.control.border.hover";
9
9
  };
10
10
  _checked: {
11
- bg: "blue.500";
11
+ bg: "selected.option.bg";
12
12
  color: "white";
13
- borderColor: "blue.500";
13
+ borderColor: "selected.option.bg";
14
14
  _hover: {
15
- bg: "blue.400";
16
- borderColor: "blue.400";
15
+ bg: "hover";
16
+ borderColor: "hover";
17
17
  };
18
18
  };
19
19
  _invalid: {
package/dist/theme/recipes/radiomark.recipe.d.ts CHANGED
@@ -7,12 +7,12 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
7
7
  borderColor: "radio.control.border.hover";
8
8
  };
9
9
  _checked: {
10
- bg: "blue.500";
10
+ bg: "selected.option.bg";
11
11
  color: "white";
12
- borderColor: "blue.500";
12
+ borderColor: "selected.option.bg";
13
13
  _hover: {
14
- bg: "blue.400";
15
- borderColor: "blue.400";
14
+ bg: "hover";
15
+ borderColor: "hover";
16
16
  };
17
17
  };
18
18
  _invalid: {
package/dist/theme/recipes/select.recipe.d.ts CHANGED
@@ -7,11 +7,11 @@ export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"co
7
7
  color: "select.trigger.outline.fg";
8
8
  borderColor: "input.border.filled";
9
9
  _expanded: {
10
- color: "link.primary.hover";
11
- borderColor: "link.primary.hover";
10
+ color: "hover";
11
+ borderColor: "hover";
12
12
  _hover: {
13
- color: "link.primary.hover";
14
- borderColor: "link.primary.hover";
13
+ color: "hover";
14
+ borderColor: "hover";
15
15
  };
16
16
  };
17
17
  _hover: {
@@ -40,11 +40,11 @@ export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"co
40
40
  borderColor: "input.border.error";
41
41
  };
42
42
  _expanded: {
43
- color: "link.primary.hover";
44
- borderColor: "link.primary.hover";
43
+ color: "hover";
44
+ borderColor: "hover";
45
45
  _hover: {
46
- color: "link.primary.hover";
47
- borderColor: "link.primary.hover";
46
+ color: "hover";
47
+ borderColor: "hover";
48
48
  };
49
49
  };
50
50
  };
package/dist/theme/recipes/switch.recipe.d.ts CHANGED
@@ -6,9 +6,9 @@ export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"la
6
6
  bg: "switch.primary.bg";
7
7
  focusVisibleRing: "outside";
8
8
  _checked: {
9
- bg: "switch.primary.bg.checked";
9
+ bg: "selected.option.bg";
10
10
  _hover: {
11
- bg: "switch.primary.bg.hover";
11
+ bg: "hover";
12
12
  };
13
13
  };
14
14
  };
@@ -24,6 +24,18 @@ export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"la
24
24
  };
25
25
  };
26
26
  };
27
+ direction: {
28
+ rtl: {
29
+ root: {
30
+ flexDirection: "row-reverse";
31
+ };
32
+ };
33
+ ltr: {
34
+ root: {
35
+ flexDirection: "row";
36
+ };
37
+ };
38
+ };
27
39
  size: {
28
40
  sm: {
29
41
  root: {