@blockscout/ui-toolkit 2.7.3 → 2.8.0-alpha.0

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

@@ -28,6 +28,7 @@ export * from '../../chakra/rating';
 export * from '../../chakra/select';
 export * from '../../chakra/skeleton';
 export * from '../../chakra/slider';
+export * from '../../chakra/status';
 export * from '../../chakra/switch';
 export * from '../../chakra/table';
 export * from '../../chakra/tabs';

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

@@ -96,7 +96,6 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
         sm: {
             textStyle: "xs";
             p: "1";
-            h: "4.5";
             minH: "4.5";
         };
         md: {

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

@@ -301,6 +301,14 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
             _expanded: {
                 color: "hover";
             };
+            _loading: {
+                opacity: number;
+                '& .chakra-spinner': {
+                    borderColor: "selected.option.bg";
+                    borderBottomColor: "spinner.track";
+                    borderInlineStartColor: "spinner.track";
+                };
+            };
         };
         pagination: {
             borderWidth: "2px";

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

@@ -7,110 +7,12 @@ export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
             bg: "badge.gray.bg";
             color: "badge.gray.fg";
         };
-        green: {
-            bg: "badge.green.bg";
-            color: "badge.green.fg";
-        };
-        red: {
-            bg: "badge.red.bg";
-            color: "badge.red.fg";
-        };
-        purple: {
-            bg: "badge.purple.bg";
-            color: "badge.purple.fg";
-        };
-        orange: {
-            bg: "badge.orange.bg";
-            color: "badge.orange.fg";
-        };
-        blue: {
-            bg: "badge.blue.bg";
-            color: "badge.blue.fg";
-        };
-        yellow: {
-            bg: "badge.yellow.bg";
-            color: "badge.yellow.fg";
-        };
-        teal: {
-            bg: "badge.teal.bg";
-            color: "badge.teal.fg";
-        };
-        cyan: {
-            bg: "badge.cyan.bg";
-            color: "badge.cyan.fg";
-        };
-        pink: {
-            bg: "badge.pink.bg";
-            color: "badge.pink.fg";
-        };
-        purple_alt: {
-            bg: "badge.purple_alt.bg";
-            color: "badge.purple_alt.fg";
-        };
-        blue_alt: {
-            bg: "badge.blue_alt.bg";
-            color: "badge.blue_alt.fg";
-        };
-        bright_gray: {
-            bg: "badge.bright.gray.bg";
-            color: "badge.bright.gray.fg";
-        };
-        bright_green: {
-            bg: "badge.bright.green.bg";
-            color: "badge.bright.green.fg";
-        };
-        bright_red: {
-            bg: "badge.bright.red.bg";
-            color: "badge.bright.red.fg";
-        };
-        bright_blue: {
-            bg: "badge.bright.blue.bg";
-            color: "badge.bright.blue.fg";
-        };
-        bright_yellow: {
-            bg: "badge.bright.yellow.bg";
-            color: "badge.bright.yellow.fg";
-        };
-        bright_teal: {
-            bg: "badge.bright.teal.bg";
-            color: "badge.bright.teal.fg";
-        };
-        bright_cyan: {
-            bg: "badge.bright.cyan.bg";
-            color: "badge.bright.cyan.fg";
-        };
-        bright_orange: {
-            bg: "badge.bright.orange.bg";
-            color: "badge.bright.orange.fg";
-        };
-        bright_purple: {
-            bg: "badge.bright.purple.bg";
-            color: "badge.bright.purple.fg";
-        };
-        bright_pink: {
-            bg: "badge.bright.pink.bg";
-            color: "badge.bright.pink.fg";
-        };
     };
     size: {
         sm: {
             textStyle: "xs";
-            p: "1";
-            h: "4.5";
-            minH: "4.5";
-        };
-        md: {
-            textStyle: "sm";
-            px: "1";
-            py: "0.5";
-            minH: "6";
-        };
-        lg: {
-            textStyle: "sm";
-            px: "2";
-            py: "1";
-            minH: "7";
-            fontWeight: "600";
+            px: number;
+            py: number;
         };
     };
 }>;

package/dist/theme/recipes/index.d.ts

@@ -97,7 +97,6 @@ export declare const recipes: {
             sm: {
                 textStyle: "xs";
                 p: "1";
-                h: "4.5";
                 minH: "4.5";
             };
             md: {
@@ -418,6 +417,14 @@ export declare const recipes: {
                 _expanded: {
                     color: "hover";
                 };
+                _loading: {
+                    opacity: number;
+                    '& .chakra-spinner': {
+                        borderColor: "selected.option.bg";
+                        borderBottomColor: "spinner.track";
+                        borderInlineStartColor: "spinner.track";
+                    };
+                };
             };
             pagination: {
                 borderWidth: "2px";
@@ -501,110 +508,12 @@ export declare const recipes: {
                 bg: "badge.gray.bg";
                 color: "badge.gray.fg";
             };
-            green: {
-                bg: "badge.green.bg";
-                color: "badge.green.fg";
-            };
-            red: {
-                bg: "badge.red.bg";
-                color: "badge.red.fg";
-            };
-            purple: {
-                bg: "badge.purple.bg";
-                color: "badge.purple.fg";
-            };
-            orange: {
-                bg: "badge.orange.bg";
-                color: "badge.orange.fg";
-            };
-            blue: {
-                bg: "badge.blue.bg";
-                color: "badge.blue.fg";
-            };
-            yellow: {
-                bg: "badge.yellow.bg";
-                color: "badge.yellow.fg";
-            };
-            teal: {
-                bg: "badge.teal.bg";
-                color: "badge.teal.fg";
-            };
-            cyan: {
-                bg: "badge.cyan.bg";
-                color: "badge.cyan.fg";
-            };
-            pink: {
-                bg: "badge.pink.bg";
-                color: "badge.pink.fg";
-            };
-            purple_alt: {
-                bg: "badge.purple_alt.bg";
-                color: "badge.purple_alt.fg";
-            };
-            blue_alt: {
-                bg: "badge.blue_alt.bg";
-                color: "badge.blue_alt.fg";
-            };
-            bright_gray: {
-                bg: "badge.bright.gray.bg";
-                color: "badge.bright.gray.fg";
-            };
-            bright_green: {
-                bg: "badge.bright.green.bg";
-                color: "badge.bright.green.fg";
-            };
-            bright_red: {
-                bg: "badge.bright.red.bg";
-                color: "badge.bright.red.fg";
-            };
-            bright_blue: {
-                bg: "badge.bright.blue.bg";
-                color: "badge.bright.blue.fg";
-            };
-            bright_yellow: {
-                bg: "badge.bright.yellow.bg";
-                color: "badge.bright.yellow.fg";
-            };
-            bright_teal: {
-                bg: "badge.bright.teal.bg";
-                color: "badge.bright.teal.fg";
-            };
-            bright_cyan: {
-                bg: "badge.bright.cyan.bg";
-                color: "badge.bright.cyan.fg";
-            };
-            bright_orange: {
-                bg: "badge.bright.orange.bg";
-                color: "badge.bright.orange.fg";
-            };
-            bright_purple: {
-                bg: "badge.bright.purple.bg";
-                color: "badge.bright.purple.fg";
-            };
-            bright_pink: {
-                bg: "badge.bright.pink.bg";
-                color: "badge.bright.pink.fg";
-            };
         };
         size: {
             sm: {
                 textStyle: "xs";
-                p: "1";
-                h: "4.5";
-                minH: "4.5";
-            };
-            md: {
-                textStyle: "sm";
-                px: "1";
-                py: "0.5";
-                minH: "6";
-            };
-            lg: {
-                textStyle: "sm";
-                px: "2";
-                py: "1";
-                minH: "7";
-                fontWeight: "600";
+                px: number;
+                py: number;
             };
         };
     }>;
@@ -1995,6 +1904,28 @@ export declare const slotRecipes: {
             };
         };
     }>;
+    status: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "indicator", {
+        size: {
+            xs: {
+                root: {
+                    boxSize: "6px";
+                    borderWidth: "1px";
+                };
+            };
+            sm: {
+                root: {
+                    boxSize: "8px";
+                    borderWidth: "1px";
+                };
+            };
+            md: {
+                root: {
+                    boxSize: "10px";
+                    borderWidth: "1px";
+                };
+            };
+        };
+    }>;
     switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
         variant: {
             primary: {

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

@@ -0,0 +1,22 @@
+export declare const recipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "indicator", {
+    size: {
+        xs: {
+            root: {
+                boxSize: "6px";
+                borderWidth: "1px";
+            };
+        };
+        sm: {
+            root: {
+                boxSize: "8px";
+                borderWidth: "1px";
+            };
+        };
+        md: {
+            root: {
+                boxSize: "10px";
+                borderWidth: "1px";
+            };
+        };
+    };
+}>;

package/dist/utils/file.d.ts

@@ -1,2 +1,2 @@
 export declare function downloadBlob(blob: Blob, filename: string): void;
-export declare function saveAsCsv(headerRows: Array<string>, dataRows: Array<Array<string>>, filename: string): void;
+export declare function saveAsCsv(data: Array<Array<string>>, filename: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockscout/ui-toolkit",
-  "version": "2.7.3",
+  "version": "2.8.0-alpha.0",
   "description": "A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,7 +43,7 @@
   "peerDependencies": {
     "@chakra-ui/react": ">=3.33.0",
     "@emotion/react": ">=11.14.0",
-    "next": ">=15.2.3",
+    "next": ">=16.2.4",
     "next-themes": ">=0.4.4",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
@@ -56,7 +56,7 @@
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.4",
     "typescript": "5.9.2",
-    "vite": "6.4.1",
+    "vite": "6.4.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-svgr": "4.5.0",
     "vite-tsconfig-paths": "5.1.4"
@@ -66,9 +66,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "resolutions": {
-    "vite-plugin-dts/**/brace-expansion": "2.0.2",
-    "vite-plugin-svgr/**/js-yaml": "4.1.1"
   }
 }

package/dist/components/charts/Chart.d.ts

@@ -1,13 +0,0 @@
-import { default as React } from 'react';
-import { AxesConfigFn, ChartMargin, TimeChartData, Resolution } from './types';
-export interface ChartProps {
-    charts: TimeChartData;
-    zoomRange?: [Date, Date];
-    onZoom: (range: [Date, Date]) => void;
-    margin?: ChartMargin;
-    noAnimation?: boolean;
-    resolution?: Resolution;
-    axesConfig?: AxesConfigFn;
-    isEnlarged?: boolean;
-}
-export declare const Chart: React.MemoExoticComponent<({ isEnlarged, charts, onZoom, margin: marginProps, noAnimation, resolution, zoomRange, axesConfig: axesConfigProps, }: ChartProps) => React.JSX.Element>;

package/dist/components/charts/ChartFullscreenDialog.d.ts

@@ -1,17 +0,0 @@
-import { default as React } from 'react';
-import { Resolution, TimeChartData } from './types';
-export interface Props {
-    open: boolean;
-    onOpenChange: ({ open }: {
-        open: boolean;
-    }) => void;
-    title: string;
-    description?: string;
-    charts: TimeChartData;
-    resolution?: Resolution;
-    zoomRange?: [Date, Date];
-    handleZoom: (range: [Date, Date]) => void;
-    handleZoomReset: () => void;
-}
-declare const FullscreenChartModal: ({ charts, open, onOpenChange, title, description, resolution, zoomRange, handleZoom, handleZoomReset, }: Props) => React.JSX.Element;
-export default FullscreenChartModal;

package/dist/components/charts/ChartWidget.d.ts

@@ -1,19 +0,0 @@
-import { FlexProps } from '@chakra-ui/react';
-import { default as React } from 'react';
-import { AxesConfigFn, TimeChartData } from './types';
-import { ChartMenuItemId } from './parts/ChartMenu';
-export interface ChartWidgetProps extends FlexProps {
-    charts: TimeChartData;
-    title: string;
-    description?: string;
-    isLoading: boolean;
-    isError: boolean;
-    emptyText?: string;
-    noAnimation?: boolean;
-    href?: string;
-    chartUrl?: string;
-    axesConfig?: AxesConfigFn;
-    menuItemIds?: Array<ChartMenuItemId>;
-    noWatermark?: boolean;
-}
-export declare const ChartWidget: React.MemoExoticComponent<({ charts, title, description, isLoading, isError, emptyText, noAnimation, href, chartUrl, axesConfig, menuItemIds, noWatermark, ...rest }: ChartWidgetProps) => React.JSX.Element>;

package/dist/components/charts/ChartWidgetContent.d.ts

@@ -1,17 +0,0 @@
-import { default as React } from 'react';
-import { AxesConfigFn, Resolution, TimeChartData } from './types';
-export interface ChartWidgetContentProps {
-    charts: TimeChartData;
-    isLoading?: boolean;
-    isError?: boolean;
-    empty?: boolean;
-    emptyText?: string;
-    zoomRange?: [Date, Date];
-    handleZoom: (range: [Date, Date]) => void;
-    isEnlarged?: boolean;
-    noAnimation?: boolean;
-    resolution?: Resolution;
-    axesConfig?: AxesConfigFn;
-    noWatermark?: boolean;
-}
-export declare const ChartWidgetContent: React.MemoExoticComponent<({ charts, isLoading, isError, empty, emptyText, zoomRange, handleZoom, isEnlarged, noAnimation, resolution, axesConfig, noWatermark, }: ChartWidgetContentProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartGridLine.d.ts

@@ -1,10 +0,0 @@
-import { default as React } from 'react';
-import * as d3 from 'd3';
-export interface ChartGridLineProps extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
-    type: 'vertical' | 'horizontal';
-    scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
-    noAnimation?: boolean;
-    size: number;
-    ticks: number;
-}
-export declare const ChartGridLine: React.MemoExoticComponent<({ type, scale, ticks, size, noAnimation, ...props }: ChartGridLineProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartLegend.d.ts

@@ -1,9 +0,0 @@
-import { BoxProps } from '@chakra-ui/react';
-import { default as React } from 'react';
-import { TimeChartData } from '../types';
-export interface ChartLegendProps extends BoxProps {
-    data: TimeChartData;
-    selectedIndexes?: Array<number>;
-    onItemClick?: (index: number) => void;
-}
-export declare const ChartLegend: React.MemoExoticComponent<({ data, selectedIndexes, onItemClick, ...props }: ChartLegendProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartLine.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { TimeChartItem } from '../types';
-import { AnimationType } from '../utils/animations';
-import * as d3 from 'd3';
-export interface ChartLineProps extends React.SVGProps<SVGPathElement> {
-    xScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
-    yScale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number>;
-    data: Array<TimeChartItem>;
-    animation: AnimationType;
-}
-export declare const ChartLine: React.MemoExoticComponent<({ xScale, yScale, data, animation, strokeDasharray, ...props }: ChartLineProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartMenu.d.ts

@@ -1,19 +0,0 @@
-import { default as React } from 'react';
-import { Resolution, TimeChartData } from '../types';
-export declare const CHART_MENU_ITEMS_IDS: ("share" | "fullscreen" | "save_png" | "save_csv")[];
-export type ChartMenuItemId = (typeof CHART_MENU_ITEMS_IDS)[number];
-export interface Props {
-    itemIds?: Array<ChartMenuItemId>;
-    charts: TimeChartData;
-    title: string;
-    description?: string;
-    isLoading: boolean;
-    chartRef: React.RefObject<HTMLDivElement | null>;
-    chartUrl?: string;
-    resolution?: Resolution;
-    zoomRange?: [Date, Date];
-    handleZoom: (range: [Date, Date]) => void;
-    handleZoomReset: () => void;
-}
-declare const ChartMenu: ({ itemIds, charts, title, description, isLoading, chartRef, chartUrl, resolution, zoomRange, handleZoom, handleZoomReset, }: Props) => React.JSX.Element;
-export default ChartMenu;

package/dist/components/charts/parts/ChartOverlay.d.ts

@@ -1,7 +0,0 @@
-import { default as React } from 'react';
-export interface ChartOverlayProps {
-    width: number;
-    height: number;
-    children: React.ReactNode;
-}
-export declare const ChartOverlay: React.ForwardRefExoticComponent<ChartOverlayProps & React.RefAttributes<SVGRectElement>>;

package/dist/components/charts/parts/ChartSelectionX.d.ts

@@ -1,11 +0,0 @@
-import { default as React } from 'react';
-import { TimeChartData } from '../types';
-import * as d3 from 'd3';
-export interface ChartSelectionXProps {
-    height: number;
-    anchorEl?: SVGRectElement | null;
-    scale: d3.ScaleTime<number, number>;
-    data: TimeChartData;
-    onSelect: (range: [Date, Date]) => void;
-}
-export declare const ChartSelectionX: React.MemoExoticComponent<({ anchorEl, height, scale, data, onSelect }: ChartSelectionXProps) => React.JSX.Element>;

package/dist/components/charts/parts/ChartTooltip.d.ts

@@ -1,15 +0,0 @@
-import { default as React } from 'react';
-import { Resolution, TimeChartData } from '../types';
-import * as d3 from 'd3';
-export interface ChartTooltipProps {
-    width?: number;
-    tooltipWidth?: number;
-    height?: number;
-    data: TimeChartData;
-    xScale: d3.ScaleTime<number, number>;
-    yScale: d3.ScaleLinear<number, number>;
-    anchorEl: SVGRectElement | null;
-    noAnimation?: boolean;
-    resolution?: Resolution;
-}
-export declare const ChartTooltip: React.MemoExoticComponent<({ xScale, yScale, width, tooltipWidth, height, data, anchorEl, noAnimation, resolution, ...props }: ChartTooltipProps) => React.JSX.Element>;

package/dist/components/charts/sankey/parts/SankeyLink.d.ts

@@ -1,18 +0,0 @@
-import { default as React } from 'react';
-import { SankeyLinkExtended } from '../types';
-export interface SankeyLinkProps {
-    link: SankeyLinkExtended;
-    /** Single color when gradient is not used */
-    color?: string;
-    /** When set with targetColor, link stroke is a gradient from source to target */
-    sourceColor?: string;
-    targetColor?: string;
-    /** Unique suffix for gradient id (e.g. link index) when multiple links share same source/target */
-    gradientIdSuffix?: string | number;
-    opacity: number;
-    hoverOpacity: number;
-    pathGenerator: (link: SankeyLinkExtended, ...args: Array<any>) => string | null;
-    onMouseEnter?: (link: SankeyLinkExtended, event: React.MouseEvent) => void;
-    onMouseLeave?: () => void;
-}
-export declare const SankeyLink: React.MemoExoticComponent<({ link, color, sourceColor, targetColor, gradientIdSuffix, opacity, hoverOpacity, pathGenerator, onMouseEnter, onMouseLeave, }: SankeyLinkProps) => React.JSX.Element | null>;

package/dist/components/charts/sankey/parts/SankeyNode.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { SankeyNodeExtended } from '../types';
-export interface SankeyNodeProps {
-    node: SankeyNodeExtended;
-    color: string;
-    onMouseEnter?: (node: SankeyNodeExtended, event: React.MouseEvent) => void;
-    onMouseLeave?: () => void;
-}
-export declare const SankeyNode: React.MemoExoticComponent<({ node, color, onMouseEnter, onMouseLeave }: SankeyNodeProps) => React.JSX.Element | null>;

package/dist/components/charts/utils/formatters.d.ts

@@ -1,2 +0,0 @@
-import { TimeChartItem } from '../types';
-export declare const getIncompleteDataLineSource: (data: Array<TimeChartItem>) => Array<TimeChartItem>;

package/dist/components/charts/utils/getDateLabel.d.ts

@@ -1,2 +0,0 @@
-import { Resolution } from '../types';
-export declare function getDateLabel(date: Date, dateTo?: Date, resolution?: Resolution): string;