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

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,31 @@ 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, chakra, createListCollection, } from '@chakra-ui/react';
+export { default as theme } from '../../theme/theme';
+export { customConfig as themeConfig } from '../../theme/theme';
+export * as AdaptiveTabs from '../../components/AdaptiveTabs/index';
+export * from '../../components/RoutedTabs/index';
+export * from '../../components/buttons/BackToButton';
+export * from '../../components/buttons/ClearButton';
+export * from '../../components/Hint/Hint';
+export * from '../../components/filters/FilterInput';
+export * from '../../components/forms/components';
+export * from '../../components/forms/fields';
+export * from '../../components/forms/inputs';
+export * from '../../components/forms/utils';
+export * from '../../components/forms/validators';
+export * from '../../components/truncation/TruncatedTextTooltip';
+export { default as getComponentDisplayName } from '../../utils/getComponentDisplayName';
+export * as html from '../../utils/htmlEntities';
+export * as consts from '../../utils/consts';
+export * as regexp from '../../utils/regexp';
+export * as guards from '../../utils/guards';
+export * from '../../utils/url';
+export * from '../../utils/isBrowser';
+export { useClipboard } from '../../hooks/useClipboard';
+export { useDisclosure } from '../../hooks/useDisclosure';
+export { useUpdateEffect } from '../../hooks/useUpdateEffect';
+export { useFirstMountState } from '../../hooks/useFirstMountState';
+export { useIsSticky } from '../../hooks/useIsSticky';
+export { useViewportSize } from '../../hooks/useViewportSize';

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/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/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/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/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: {