@blockscout/ui-toolkit 2.5.2 → 2.6.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.
@@ -9,6 +9,7 @@ export * from '../../chakra/collapsible';
9
9
  export * from '../../chakra/color-mode';
10
10
  export * from '../../chakra/dialog';
11
11
  export * from '../../chakra/drawer';
12
+ export * from '../../chakra/empty-state';
12
13
  export * from '../../chakra/field';
13
14
  export * from '../../chakra/heading';
14
15
  export * from '../../chakra/icon-button';
@@ -50,6 +51,7 @@ export * from '../../components/forms/utils';
50
51
  export * from '../../components/forms/validators';
51
52
  export * from '../../components/loaders/ContentLoader';
52
53
  export * from '../../components/truncation/TruncatedTextTooltip';
54
+ export * from '../../components/truncation/TruncatedText';
53
55
  export { default as getComponentDisplayName } from '../../utils/getComponentDisplayName';
54
56
  export * as html from '../../utils/htmlEntities';
55
57
  export * as consts from '../../utils/consts';
@@ -9,4 +9,12 @@ export declare const keyframes: {
9
9
  transform: string;
10
10
  };
11
11
  };
12
+ skeletonShimmer: {
13
+ from: {
14
+ transform: string;
15
+ };
16
+ to: {
17
+ transform: string;
18
+ };
19
+ };
12
20
  };
@@ -0,0 +1,34 @@
1
+ export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
2
+ size: {
3
+ md: {
4
+ root: {
5
+ p: "0";
6
+ mt: "50px";
7
+ };
8
+ title: {
9
+ textStyle: "heading.md";
10
+ };
11
+ content: {
12
+ gap: {
13
+ base: "4";
14
+ lg: "6";
15
+ };
16
+ };
17
+ description: {
18
+ textStyle: {
19
+ base: "sm";
20
+ lg: "md";
21
+ };
22
+ };
23
+ indicator: {
24
+ _icon: {
25
+ width: {
26
+ base: "160px";
27
+ lg: "260px";
28
+ };
29
+ height: "auto";
30
+ };
31
+ };
32
+ };
33
+ };
34
+ }>;
@@ -724,7 +724,7 @@ export declare const recipes: {
724
724
  borderWidth: "0px";
725
725
  pointerEvents: "none";
726
726
  userSelect: "none";
727
- '&::before, &::after, *': {
727
+ '& > *': {
728
728
  visibility: "hidden";
729
729
  };
730
730
  };
@@ -736,14 +736,32 @@ export declare const recipes: {
736
736
  animationDuration: "var(--duration, 1.2s)";
737
737
  };
738
738
  shine: {
739
+ opacity: number;
739
740
  '--animate-from': "100%";
740
741
  '--animate-to': "-100%";
741
742
  '--start-color': "colors.skeleton.bg.start";
742
743
  '--end-color': "colors.skeleton.bg.end";
743
- backgroundImage: "linear-gradient(90deg,var(--start-color) 8%,var(--end-color) 18%,var(--start-color) 33%)";
744
- backgroundColor: "transparent";
745
- backgroundSize: "200% 100%";
746
- animation: "bg-position var(--duration, 2s) linear infinite";
744
+ position: "relative";
745
+ overflow: "hidden";
746
+ backgroundColor: "var(--start-color)";
747
+ animation: "none";
748
+ '&::after': {
749
+ content: "\"\"";
750
+ position: "absolute";
751
+ inset: "0";
752
+ left: "0";
753
+ width: "100%";
754
+ pointerEvents: "none";
755
+ willChange: "transform";
756
+ transform: "translateX(-100%)";
757
+ backgroundImage: "linear-gradient(90deg, transparent 0%, transparent 32%, var(--end-color) 46%, var(--end-color) 54%, transparent 68%, transparent 100%)";
758
+ animation: "skeletonShimmer var(--duration, 2s) linear infinite";
759
+ };
760
+ _motionReduce: {
761
+ '&::after': {
762
+ animation: "none";
763
+ };
764
+ };
747
765
  };
748
766
  none: {
749
767
  animation: "none";
@@ -1248,6 +1266,40 @@ export declare const slotRecipes: {
1248
1266
  };
1249
1267
  };
1250
1268
  }>;
1269
+ emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
1270
+ size: {
1271
+ md: {
1272
+ root: {
1273
+ p: "0";
1274
+ mt: "50px";
1275
+ };
1276
+ title: {
1277
+ textStyle: "heading.md";
1278
+ };
1279
+ content: {
1280
+ gap: {
1281
+ base: "4";
1282
+ lg: "6";
1283
+ };
1284
+ };
1285
+ description: {
1286
+ textStyle: {
1287
+ base: "sm";
1288
+ lg: "md";
1289
+ };
1290
+ };
1291
+ indicator: {
1292
+ _icon: {
1293
+ width: {
1294
+ base: "160px";
1295
+ lg: "260px";
1296
+ };
1297
+ height: "auto";
1298
+ };
1299
+ };
1300
+ };
1301
+ };
1302
+ }>;
1251
1303
  field: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "requiredIndicator" | "errorText" | "helperText", {
1252
1304
  floating: {
1253
1305
  true: {
@@ -12,7 +12,7 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
12
12
  borderWidth: "0px";
13
13
  pointerEvents: "none";
14
14
  userSelect: "none";
15
- '&::before, &::after, *': {
15
+ '& > *': {
16
16
  visibility: "hidden";
17
17
  };
18
18
  };
@@ -24,14 +24,32 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
24
24
  animationDuration: "var(--duration, 1.2s)";
25
25
  };
26
26
  shine: {
27
+ opacity: number;
27
28
  '--animate-from': "100%";
28
29
  '--animate-to': "-100%";
29
30
  '--start-color': "colors.skeleton.bg.start";
30
31
  '--end-color': "colors.skeleton.bg.end";
31
- backgroundImage: "linear-gradient(90deg,var(--start-color) 8%,var(--end-color) 18%,var(--start-color) 33%)";
32
- backgroundColor: "transparent";
33
- backgroundSize: "200% 100%";
34
- animation: "bg-position var(--duration, 2s) linear infinite";
32
+ position: "relative";
33
+ overflow: "hidden";
34
+ backgroundColor: "var(--start-color)";
35
+ animation: "none";
36
+ '&::after': {
37
+ content: "\"\"";
38
+ position: "absolute";
39
+ inset: "0";
40
+ left: "0";
41
+ width: "100%";
42
+ pointerEvents: "none";
43
+ willChange: "transform";
44
+ transform: "translateX(-100%)";
45
+ backgroundImage: "linear-gradient(90deg, transparent 0%, transparent 32%, var(--end-color) 46%, var(--end-color) 54%, transparent 68%, transparent 100%)";
46
+ animation: "skeletonShimmer var(--duration, 2s) linear infinite";
47
+ };
48
+ _motionReduce: {
49
+ '&::after': {
50
+ animation: "none";
51
+ };
52
+ };
35
53
  };
36
54
  none: {
37
55
  animation: "none";
@@ -1,7 +1,4 @@
1
1
  import { default as BigNumber } from 'bignumber.js';
2
- export declare const WEI: BigNumber;
3
- export declare const GWEI: BigNumber;
4
- export declare const WEI_IN_GWEI: BigNumber;
5
2
  export declare const ZERO: BigNumber;
6
3
  export declare const SECOND = 1000;
7
4
  export declare const MINUTE: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockscout/ui-toolkit",
3
- "version": "2.5.2",
3
+ "version": "2.6.0",
4
4
  "description": "A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -51,21 +51,24 @@
51
51
  },
52
52
  "devDependencies": {
53
53
  "@svgr/plugin-jsx": "8.1.0",
54
- "@svgr/plugin-svgo": "8.1.0",
55
54
  "@types/node": "20.16.7",
56
55
  "@types/react": "18.3.12",
57
56
  "@types/react-dom": "18.3.1",
58
57
  "@vitejs/plugin-react": "4.3.4",
59
58
  "typescript": "5.9.2",
60
59
  "vite": "6.4.1",
61
- "vite-plugin-dts": "4.5.3",
62
- "vite-plugin-svgr": "4.3.0",
60
+ "vite-plugin-dts": "4.5.4",
61
+ "vite-plugin-svgr": "4.5.0",
63
62
  "vite-tsconfig-paths": "5.1.4"
64
63
  },
65
64
  "engines": {
66
- "node": ">=22.11.0"
65
+ "node": ">=22.14.0"
67
66
  },
68
67
  "publishConfig": {
69
68
  "access": "public"
69
+ },
70
+ "resolutions": {
71
+ "vite-plugin-dts/**/brace-expansion": "2.0.2",
72
+ "vite-plugin-svgr/**/js-yaml": "4.1.1"
70
73
  }
71
74
  }