@blockscout/ui-toolkit 0.0.1-alpha.1 → 0.0.1-alpha.2

package/dist/package/src/index.d.ts

@@ -13,8 +13,8 @@ export * from '../../chakra/field';
 export * from '../../chakra/heading';
 export * from '../../chakra/icon-button';
 export * from '../../chakra/image';
-export * from '../../chakra/input';
 export * from '../../chakra/input-group';
+export * from '../../chakra/input';
 export * from '../../chakra/link';
 export * from '../../chakra/menu';
 export * from '../../chakra/pin-input';
@@ -33,13 +33,9 @@ export * from '../../chakra/tag';
 export * from '../../chakra/textarea';
 export * from '../../chakra/toaster';
 export * from '../../chakra/tooltip';
-export * from '../../theme/theme';
-export * from '../../theme/globalCss';
-export * from '../../components/AdaptiveTabs/AdaptiveTabs';
-export * from '../../components/AdaptiveTabs/types';
-export * from '../../components/RoutedTabs/RoutedTabs';
-export * from '../../components/RoutedTabs/RoutedTabsSkeleton';
-export * from '../../utils/getComponentDisplayName';
-export * from '../../hooks/useClipboard';
-export * from '../../hooks/useDisclosure';
-export * from '../../hooks/useViewportSize';
+export { AspectRatio, Box, Center, Circle, ClientOnly, Code, ColorPicker, ColorSwatch, Fieldset, Flex, For, FormatNumber, FormatByte, Grid, GridItem, Group, HStack, Icon, LinkBox, LinkOverlay, List, ListItem, LocaleProvider, Portal, Presence, Progress, QrCode, SegmentGroup, Separator, Show, Slider, Spinner, StackSeparator, Stat, Status, Text, Theme, VisuallyHidden, VStack, Wrap, useBreakpointValue, useCheckboxGroup, useToken, useUpdateEffect, chakra, createListCollection, } from '@chakra-ui/react';
+export { default as theme } from '../../theme/theme';
+export { default as getComponentDisplayName } from '../../utils/getComponentDisplayName';
+export { default as useClipboard } from '../../hooks/useClipboard';
+export { useDisclosure } from '../../hooks/useDisclosure';
+export { default as useViewportSize } from '../../hooks/useViewportSize';

package/dist/theme/foundations/semanticTokens.ts

@@ -135,12 +135,8 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           active: { value: { _light: '{colors.link.primary.hover}' } },
         },
         bg: {
-          DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
-          selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
-        },
-        border: {
-          DEFAULT: { value: '{colors.border.divider}' },
           selected: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
+          group: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
         },
       },
       menu: {

package/dist/theme/recipes/alert.recipe.d.ts

@@ -1,50 +1,10 @@
-export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "content" | "description" | "root" | "indicator", {
+export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
     status: {
-        info: {
-            root: {
-                bgColor: "alert.bg.info";
-                '&:not([data-loading], [aria-busy=true])': {
-                    bgColor: "alert.bg.info";
-                };
-                color: "alert.fg";
-            };
-        };
-        warning: {
-            root: {
-                bgColor: "alert.bg.warning";
-                '&:not([data-loading], [aria-busy=true])': {
-                    bgColor: "alert.bg.warning";
-                };
-                color: "alert.fg";
-            };
-        };
-        warning_table: {
-            root: {
-                bgColor: "alert.bg.warning_table";
-                '&:not([data-loading], [aria-busy=true])': {
-                    bgColor: "alert.bg.warning_table";
-                };
-                color: "alert.fg";
-            };
-        };
-        success: {
-            root: {
-                bgColor: "alert.bg.success";
-                '&:not([data-loading], [aria-busy=true])': {
-                    bgColor: "alert.bg.success";
-                };
-                color: "alert.fg";
-            };
-        };
-        error: {
-            root: {
-                bgColor: "alert.bg.error";
-                '&:not([data-loading], [aria-busy=true])': {
-                    bgColor: "alert.bg.error";
-                };
-                color: "alert.fg";
-            };
-        };
+        info: {};
+        warning: {};
+        warning_table: {};
+        success: {};
+        error: {};
     };
     variant: {
         subtle: {

package/dist/theme/recipes/alert.recipe.ts

@@ -11,9 +11,6 @@ export const recipe = defineSlotRecipe({
       position: 'relative',
       borderRadius: 'base',
       color: 'alert.fg',
-      _loading: {
-        bgColor: 'unset',
-      },
     },
     title: {
       fontWeight: '600',
@@ -39,51 +36,11 @@ export const recipe = defineSlotRecipe({
 
   variants: {
     status: {
-      info: {
-        root: {
-          bgColor: 'alert.bg.info',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.info',
-          },
-          color: 'alert.fg',
-        },
-      },
-      warning: {
-        root: {
-          bgColor: 'alert.bg.warning',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.warning',
-          },
-          color: 'alert.fg',
-        },
-      },
-      warning_table: {
-        root: {
-          bgColor: 'alert.bg.warning_table',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.warning_table',
-          },
-          color: 'alert.fg',
-        },
-      },
-      success: {
-        root: {
-          bgColor: 'alert.bg.success',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.success',
-          },
-          color: 'alert.fg',
-        },
-      },
-      error: {
-        root: {
-          bgColor: 'alert.bg.error',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'alert.bg.error',
-          },
-          color: 'alert.fg',
-        },
-      },
+      info: {},
+      warning: {},
+      warning_table: {},
+      success: {},
+      error: {},
     },
 
     variant: {
@@ -129,6 +86,46 @@ export const recipe = defineSlotRecipe({
     },
   },
 
+  compoundVariants: [
+    {
+      status: 'info',
+      variant: 'subtle',
+      css: {
+        root: {
+          bg: 'alert.bg.info',
+        },
+      },
+    },
+    {
+      status: 'warning',
+      variant: 'subtle',
+      css: {
+        root: { bg: 'alert.bg.warning' },
+      },
+    },
+    {
+      status: 'warning_table',
+      variant: 'subtle',
+      css: {
+        root: { bg: 'alert.bg.warning_table' },
+      },
+    },
+    {
+      status: 'success',
+      variant: 'subtle',
+      css: {
+        root: { bg: 'alert.bg.success' },
+      },
+    },
+    {
+      status: 'error',
+      variant: 'subtle',
+      css: {
+        root: { bg: 'alert.bg.error' },
+      },
+    },
+  ],
+
   defaultVariants: {
     status: 'info',
     size: 'md',

package/dist/theme/recipes/badge.recipe.d.ts

@@ -4,80 +4,47 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
     };
     colorPalette: {
         gray: {
-            bgColor: "badge.gray.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.gray.bg";
-            };
+            bg: "badge.gray.bg";
             color: "badge.gray.fg";
         };
         green: {
-            bgColor: "badge.green.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.green.bg";
-            };
+            bg: "badge.green.bg";
             color: "badge.green.fg";
         };
         red: {
-            bgColor: "badge.red.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.red.bg";
-            };
+            bg: "badge.red.bg";
             color: "badge.red.fg";
         };
         purple: {
-            bgColor: "badge.purple.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.purple.bg";
-            };
+            bg: "badge.purple.bg";
             color: "badge.purple.fg";
         };
         orange: {
-            bgColor: "badge.orange.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.orange.bg";
-            };
+            bg: "badge.orange.bg";
             color: "badge.orange.fg";
         };
         blue: {
-            bgColor: "badge.blue.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.blue.bg";
-            };
+            bg: "badge.blue.bg";
             color: "badge.blue.fg";
         };
         yellow: {
-            bgColor: "badge.yellow.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.yellow.bg";
-            };
+            bg: "badge.yellow.bg";
             color: "badge.yellow.fg";
         };
         teal: {
-            bgColor: "badge.teal.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.teal.bg";
-            };
+            bg: "badge.teal.bg";
             color: "badge.teal.fg";
         };
         cyan: {
-            bgColor: "badge.cyan.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.cyan.bg";
-            };
+            bg: "badge.cyan.bg";
             color: "badge.cyan.fg";
         };
         purple_alt: {
-            bgColor: "badge.purple_alt.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.purple_alt.bg";
-            };
+            bg: "badge.purple_alt.bg";
             color: "badge.purple_alt.fg";
         };
         blue_alt: {
-            bgColor: "badge.blue_alt.bg";
-            '&:not([data-loading], [aria-busy=true])': {
-                bgColor: "badge.blue_alt.bg";
-            };
+            bg: "badge.blue_alt.bg";
             color: "badge.blue_alt.fg";
         };
     };

package/dist/theme/recipes/badge.recipe.ts

@@ -14,7 +14,6 @@ export const recipe = defineRecipe({
     userSelect: 'none',
     _loading: {
       borderRadius: 'sm',
-      bgColor: 'unset',
     },
   },
   variants: {
@@ -23,80 +22,47 @@ export const recipe = defineRecipe({
     },
     colorPalette: {
       gray: {
-        bgColor: 'badge.gray.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.gray.bg',
-        },
+        bg: 'badge.gray.bg',
         color: 'badge.gray.fg',
       },
       green: {
-        bgColor: 'badge.green.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.green.bg',
-        },
+        bg: 'badge.green.bg',
         color: 'badge.green.fg',
       },
       red: {
-        bgColor: 'badge.red.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.red.bg',
-        },
+        bg: 'badge.red.bg',
         color: 'badge.red.fg',
       },
       purple: {
-        bgColor: 'badge.purple.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.purple.bg',
-        },
+        bg: 'badge.purple.bg',
         color: 'badge.purple.fg',
       },
       orange: {
-        bgColor: 'badge.orange.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.orange.bg',
-        },
+        bg: 'badge.orange.bg',
         color: 'badge.orange.fg',
       },
       blue: {
-        bgColor: 'badge.blue.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.blue.bg',
-        },
+        bg: 'badge.blue.bg',
         color: 'badge.blue.fg',
       },
       yellow: {
-        bgColor: 'badge.yellow.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.yellow.bg',
-        },
+        bg: 'badge.yellow.bg',
         color: 'badge.yellow.fg',
       },
       teal: {
-        bgColor: 'badge.teal.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.teal.bg',
-        },
+        bg: 'badge.teal.bg',
         color: 'badge.teal.fg',
       },
       cyan: {
-        bgColor: 'badge.cyan.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.cyan.bg',
-        },
+        bg: 'badge.cyan.bg',
         color: 'badge.cyan.fg',
       },
       purple_alt: {
-        bgColor: 'badge.purple_alt.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.purple_alt.bg',
-        },
+        bg: 'badge.purple_alt.bg',
         color: 'badge.purple_alt.fg',
       },
       blue_alt: {
-        bgColor: 'badge.blue_alt.bg',
-        '&:not([data-loading], [aria-busy=true])': {
-          bgColor: 'badge.blue_alt.bg',
-        },
+        bg: 'badge.blue_alt.bg',
         color: 'badge.blue_alt.fg',
       },
     },

package/dist/theme/recipes/button.recipe.d.ts

@@ -3,12 +3,6 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
         solid: {
             bg: "blue.600";
             color: "white";
-            '&:not([data-loading-skeleton])': {
-                bgColor: "blue.600";
-                _expanded: {
-                    bg: "blue.400";
-                };
-            };
             _hover: {
                 bg: "blue.400";
             };
@@ -20,16 +14,16 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
                     borderInlineStartColor: "spinner.track";
                 };
             };
+            _expanded: {
+                bg: "blue.400";
+            };
         };
         outline: {
-            borderWidth: "0px";
+            borderWidth: "2px";
             borderStyle: "solid";
             bg: "transparent";
             color: "button.outline.fg";
             borderColor: "button.outline.fg";
-            '&:not([data-loading-skeleton])': {
-                borderWidth: "2px";
-            };
             _hover: {
                 bg: "transparent";
                 color: "blue.400";
@@ -45,14 +39,11 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
             };
         };
         dropdown: {
-            borderWidth: "0px";
+            borderWidth: "2px";
             borderStyle: "solid";
             bg: "transparent";
             color: "button.dropdown.fg";
             borderColor: "button.dropdown.border";
-            '&:not([data-loading-skeleton])': {
-                borderWidth: "2px";
-            };
             _hover: {
                 bg: "transparent";
                 color: "blue.400";
@@ -125,9 +116,6 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
         hero: {
             bg: "button.hero.bg";
             color: "button.hero.fg";
-            '&:not([data-loading-skeleton])': {
-                bg: "button.hero.bg";
-            };
             _loading: {
                 opacity: number;
                 '& .chakra-spinner': {
@@ -190,9 +178,6 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
         subtle: {
             bg: "button.subtle.bg";
             color: "button.subtle.fg";
-            '&:not([data-loading-skeleton])': {
-                bg: "button.subtle.bg";
-            };
             _hover: {
                 bg: "button.subtle.bg";
                 color: "link.primary.hover";
@@ -245,6 +230,9 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
             textStyle: "xs";
             borderRadius: "sm";
             gap: number;
+            _icon: {
+                boxSize: "auto";
+            };
         };
         xs: {
             px: number;
@@ -253,6 +241,9 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
             textStyle: "sm";
             borderRadius: "sm";
             gap: number;
+            _icon: {
+                boxSize: "auto";
+            };
         };
         sm: {
             px: number;
@@ -261,6 +252,9 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
             textStyle: "sm";
             borderRadius: "base";
             gap: number;
+            _icon: {
+                boxSize: "auto";
+            };
         };
         md: {
             px: number;
@@ -269,6 +263,9 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
             textStyle: "md";
             borderRadius: "base";
             gap: number;
+            _icon: {
+                boxSize: "auto";
+            };
             '& .chakra-spinner': {
                 '--spinner-size': "20px";
             };

package/dist/theme/recipes/button.recipe.ts

@@ -9,21 +9,12 @@ export const recipe = defineRecipe({
     _disabled: {
       opacity: 'control.disabled',
     },
-    _loading: {
-      bgColor: 'unset',
-    },
   },
   variants: {
     variant: {
       solid: {
         bg: 'blue.600',
         color: 'white',
-        '&:not([data-loading-skeleton])': {
-          bgColor: 'blue.600',
-          _expanded: {
-            bg: 'blue.400',
-          },
-        },
         _hover: {
           bg: 'blue.400',
         },
@@ -35,16 +26,16 @@ export const recipe = defineRecipe({
             borderInlineStartColor: 'spinner.track',
           },
         },
+        _expanded: {
+          bg: 'blue.400',
+        },
       },
       outline: {
-        borderWidth: '0px',
+        borderWidth: '2px',
         borderStyle: 'solid',
         bg: 'transparent',
         color: 'button.outline.fg',
         borderColor: 'button.outline.fg',
-        '&:not([data-loading-skeleton])': {
-          borderWidth: '2px',
-        },
         _hover: {
           bg: 'transparent',
           color: 'blue.400',
@@ -60,14 +51,11 @@ export const recipe = defineRecipe({
         },
       },
       dropdown: {
-        borderWidth: '0px',
+        borderWidth: '2px',
         borderStyle: 'solid',
         bg: 'transparent',
         color: 'button.dropdown.fg',
         borderColor: 'button.dropdown.border',
-        '&:not([data-loading-skeleton])': {
-          borderWidth: '2px',
-        },
         _hover: {
           bg: 'transparent',
           color: 'blue.400',
@@ -144,9 +132,6 @@ export const recipe = defineRecipe({
       hero: {
         bg: 'button.hero.bg',
         color: 'button.hero.fg',
-        '&:not([data-loading-skeleton])': {
-          bg: 'button.hero.bg',
-        },
         _loading: {
           opacity: 1,
           '& .chakra-spinner': {
@@ -209,9 +194,6 @@ export const recipe = defineRecipe({
       subtle: {
         bg: 'button.subtle.bg',
         color: 'button.subtle.fg',
-        '&:not([data-loading-skeleton])': {
-          bg: 'button.subtle.bg',
-        },
         _hover: {
           bg: 'button.subtle.bg',
           color: 'link.primary.hover',
@@ -257,10 +239,43 @@ export const recipe = defineRecipe({
       },
     },
     size: {
-      '2xs': { px: 2, h: 5, minW: 5, textStyle: 'xs', borderRadius: 'sm', gap: 1 },
-      xs: { px: 2, h: 6, minW: 6, textStyle: 'sm', borderRadius: 'sm', gap: 1 },
-      sm: { px: 3, h: 8, minW: 8, textStyle: 'sm', borderRadius: 'base', gap: 1 },
-      md: { px: 3, h: 10, minW: 10, textStyle: 'md', borderRadius: 'base', gap: 2, '& .chakra-spinner': { '--spinner-size': '20px' } },
+      '2xs': {
+        px: 2,
+        h: 5,
+        minW: 5,
+        textStyle: 'xs',
+        borderRadius: 'sm',
+        gap: 1,
+        _icon: { boxSize: 'auto' },
+      },
+      xs: {
+        px: 2,
+        h: 6,
+        minW: 6,
+        textStyle: 'sm',
+        borderRadius: 'sm',
+        gap: 1,
+        _icon: { boxSize: 'auto' },
+      },
+      sm: {
+        px: 3,
+        h: 8,
+        minW: 8,
+        textStyle: 'sm',
+        borderRadius: 'base',
+        gap: 1,
+        _icon: { boxSize: 'auto' },
+      },
+      md: {
+        px: 3,
+        h: 10,
+        minW: 10,
+        textStyle: 'md',
+        borderRadius: 'base',
+        gap: 2,
+        _icon: { boxSize: 'auto' },
+        '& .chakra-spinner': { '--spinner-size': '20px' },
+      },
     },
   },
   defaultVariants: {

package/dist/theme/recipes/close-button.recipe.d.ts

@@ -4,9 +4,6 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
             bg: "transparent";
             color: "closeButton.fg";
             border: "none";
-            '&:not([data-loading-skeleton])': {
-                bg: "transparent";
-            };
             _hover: {
                 bg: "transparent";
                 color: "link.primary.hover";

package/dist/theme/recipes/close-button.recipe.ts

@@ -17,9 +17,6 @@ export const recipe = defineRecipe({
         bg: 'transparent',
         color: 'closeButton.fg',
         border: 'none',
-        '&:not([data-loading-skeleton])': {
-          bg: 'transparent',
-        },
         _hover: {
           bg: 'transparent',
           color: 'link.primary.hover',

package/dist/theme/recipes/dialog.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "content" | "body" | "footer" | "header" | "description" | "positioner" | "backdrop", {
+export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "description" | "positioner" | "backdrop", {
     placement: {
         center: {
             positioner: {

package/dist/theme/recipes/drawer.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "content" | "body" | "footer" | "header" | "description" | "root" | "positioner" | "backdrop" | "trigger", {
+export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "positioner" | "backdrop" | "trigger", {
     size: {
         md: {
             content: {