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

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

@@ -33,9 +33,31 @@ export * from '../../chakra/tag';
 export * from '../../chakra/textarea';
 export * from '../../chakra/toaster';
 export * from '../../chakra/tooltip';
-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 { 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 { default as useClipboard } from '../../hooks/useClipboard';
+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 { default as useViewportSize } from '../../hooks/useViewportSize';
+export { useUpdateEffect } from '../../hooks/useUpdateEffect';
+export { useFirstMountState } from '../../hooks/useFirstMountState';
+export { useIsSticky } from '../../hooks/useIsSticky';
+export { useViewportSize } from '../../hooks/useViewportSize';

package/dist/theme/theme.d.ts

@@ -1,2 +1,3 @@
+export declare const customConfig: import('@chakra-ui/react').SystemConfig;
 declare const _default: import('@chakra-ui/react').SystemContext;
 export default _default;

package/dist/utils/consts.d.ts

@@ -0,0 +1,15 @@
+import { default as BigNumber } from 'bignumber.js';
+export declare const WEI: BigNumber;
+export declare const GWEI: BigNumber;
+export declare const WEI_IN_GWEI: BigNumber;
+export declare const ZERO: BigNumber;
+export declare const SECOND = 1000;
+export declare const MINUTE: number;
+export declare const HOUR: number;
+export declare const DAY: number;
+export declare const WEEK: number;
+export declare const MONTH: number;
+export declare const YEAR: number;
+export declare const Kb = 1000;
+export declare const Mb: number;
+export declare const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";

package/dist/utils/guards.d.ts

@@ -0,0 +1,2 @@
+export declare function castToString(payload: unknown): string | undefined;
+export declare function castToNumber(payload: unknown): number | undefined;

package/dist/utils/htmlEntities.d.ts

@@ -0,0 +1,26 @@
+export declare const asymp: string;
+export declare const tilde: string;
+export declare const hellip: string;
+export declare const nbsp: string;
+export declare const thinsp: string;
+export declare const hairsp: string;
+export declare const space: string;
+export declare const nbdash: string;
+export declare const mdash: string;
+export declare const ndash: string;
+export declare const laquo: string;
+export declare const raquo: string;
+export declare const middot: string;
+export declare const blackCircle: string;
+export declare const blackRightwardsArrowhead: string;
+export declare const degree: string;
+export declare const times: string;
+export declare const disk: string;
+export declare const minus: string;
+export declare const leftLineArrow: string;
+export declare const rightLineArrow: string;
+export declare const apos: string;
+export declare const shift: string;
+export declare const cmd: string;
+export declare const alt: string;
+export declare const copy: string;

package/dist/utils/isBrowser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/dist/utils/regexp.d.ts

@@ -0,0 +1,6 @@
+export declare const URL_PREFIX: RegExp;
+export declare const IPFS_PREFIX: RegExp;
+export declare const HEX_REGEXP: RegExp;
+export declare const HEX_REGEXP_WITH_0X: RegExp;
+export declare const FILE_EXTENSION: RegExp;
+export declare const BLOCK_HEIGHT: RegExp;

package/dist/utils/url.d.ts

@@ -0,0 +1,6 @@
+export declare const stripTrailingSlash: (str: string) => string;
+export declare const stripLeadingSlash: (str: string) => string;
+export declare function makePrettyLink(url: string | undefined): {
+    href: string;
+    domain: string;
+} | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockscout/ui-toolkit",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.3",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -22,12 +22,15 @@
   "peerDependencies": {
     "@chakra-ui/react": ">=3.15.0",
     "@emotion/react": ">=11.14.0",
+    "next": ">=15.2.3",
+    "next-themes": ">=0.4.4",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1",
-    "next": ">=15.2.3",
-    "next-themes": ">=0.4.4"
+    "react-hook-form": ">=7.52.1"
   },
   "devDependencies": {
+    "@svgr/plugin-jsx": "8.1.0",
+    "@svgr/plugin-svgo": "8.1.0",
     "@types/node": "20.16.7",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",

package/dist/components/ButtonBackTo.d.ts

@@ -1,8 +0,0 @@
-import { default as React } from 'react';
-import { IconButtonProps } from '../chakra/icon-button';
-interface Props extends IconButtonProps {
-    href?: string;
-    hint?: string;
-}
-declare const _default: React.MemoExoticComponent<({ href, hint, ...rest }: Props) => React.JSX.Element>;
-export default _default;

package/dist/components/TruncatedTextTooltip.d.ts

@@ -1,9 +0,0 @@
-import { Placement } from '@floating-ui/dom';
-import { default as React } from 'react';
-interface Props {
-    children: React.ReactNode;
-    label: React.ReactNode;
-    placement?: Placement;
-}
-declare const _default: React.MemoExoticComponent<({ children, label, placement }: Props) => React.JSX.Element>;
-export default _default;

package/dist/components/index.d.ts

@@ -1 +0,0 @@
-export * from './TruncatedTextTooltip';

package/dist/theme/foundations/animations.ts

@@ -1,12 +0,0 @@
-export const keyframes = {
-  fromLeftToRight: {
-    from: {
-      left: '0%',
-      transform: 'translateX(0%)',
-    },
-    to: {
-      left: '100%',
-      transform: 'translateX(-100%)',
-    },
-  },
-};

package/dist/theme/foundations/borders.ts

@@ -1,13 +0,0 @@
-import type { ThemingConfig } from '@chakra-ui/react';
-
-import type { ExcludeUndefined } from 'types/utils';
-
-export const radii: ExcludeUndefined<ThemingConfig['tokens']>['radii'] = {
-  none: { value: '0' },
-  sm: { value: '4px' },
-  base: { value: '8px' },
-  md: { value: '12px' },
-  lg: { value: '16px' },
-  xl: { value: '24px' },
-  full: { value: '9999px' },
-};

package/dist/theme/foundations/breakpoints.ts

@@ -1,10 +0,0 @@
-const breakpoints = {
-  sm: '415px',
-  lg: '1000px',
-  xl: '1440px',
-  '2xl': '1920px',
-  // these breakpoint are needed just to make others work
-  '3xl': '3000px',
-};
-
-export default breakpoints;

package/dist/theme/foundations/colors.ts

@@ -1,162 +0,0 @@
-const colors = {
-  green: {
-    '50': { value: '#F0FFF4' },
-    '100': { value: '#C6F6D5' },
-    '200': { value: '#9AE6B4' },
-    '300': { value: '#68D391' },
-    '400': { value: '#48BB78' },
-    '500': { value: '#38A169' },
-    '600': { value: '#25855A' },
-    '700': { value: '#276749' },
-    '800': { value: '#22543D' },
-    '900': { value: '#1C4532' },
-  },
-  blue: {
-    '50': { value: '#EBF8FF' },
-    '100': { value: '#BEE3F8' },
-    '200': { value: '#90CDF4' },
-    '300': { value: '#63B3ED' },
-    '400': { value: '#4299E1' },
-    '500': { value: '#3182CE' },
-    '600': { value: '#2B6CB0' },
-    '700': { value: '#2C5282' },
-    '800': { value: '#2A4365' },
-    '900': { value: '#1A365D' },
-  },
-  red: {
-    '50': { value: '#FFF5F5' },
-    '100': { value: '#FED7D7' },
-    '200': { value: '#FEB2B2' },
-    '300': { value: '#FC8181' },
-    '400': { value: '#F56565' },
-    '500': { value: '#E53E3E' },
-    '600': { value: '#C53030' },
-    '700': { value: '#9B2C2C' },
-    '800': { value: '#822727' },
-    '900': { value: '#63171B' },
-  },
-  orange: {
-    '50': { value: '#FFFAF0' },
-    '100': { value: '#FEEBCB' },
-    '200': { value: '#FBD38D' },
-    '300': { value: '#F6AD55' },
-    '400': { value: '#ED8936' },
-    '500': { value: '#DD6B20' },
-    '600': { value: '#C05621' },
-    '700': { value: '#9C4221' },
-    '800': { value: '#7B341E' },
-    '900': { value: '#652B19' },
-  },
-  yellow: {
-    '50': { value: '#FFFFF0' },
-    '100': { value: '#FEFCBF' },
-    '200': { value: '#FAF089' },
-    '300': { value: '#F6E05E' },
-    '400': { value: '#ECC94B' },
-    '500': { value: '#D69E2E' },
-    '600': { value: '#B7791F' },
-    '700': { value: '#975A16' },
-    '800': { value: '#744210' },
-    '900': { value: '#5F370E' },
-  },
-  gray: {
-    '50': { value: '#F7FAFC' },
-    '100': { value: '#EDF2F7' },
-    '200': { value: '#E2E8F0' },
-    '300': { value: '#CBD5E0' },
-    '400': { value: '#A0AEC0' },
-    '500': { value: '#718096' },
-    '600': { value: '#4A5568' },
-    '700': { value: '#2D3748' },
-    '800': { value: '#1A202C' },
-    '900': { value: '#171923' },
-  },
-  teal: {
-    '50': { value: '#E6FFFA' },
-    '100': { value: '#B2F5EA' },
-    '200': { value: '#81E6D9' },
-    '300': { value: '#4FD1C5' },
-    '400': { value: '#38B2AC' },
-    '500': { value: '#319795' },
-    '600': { value: '#2C7A7B' },
-    '700': { value: '#285E61' },
-    '800': { value: '#234E52' },
-    '900': { value: '#1D4044' },
-  },
-  cyan: {
-    '50': { value: '#EDFDFD' },
-    '100': { value: '#C4F1F9' },
-    '200': { value: '#9DECF9' },
-    '300': { value: '#76E4F7' },
-    '400': { value: '#0BC5EA' },
-    '500': { value: '#00B5D8' },
-    '600': { value: '#00A3C4' },
-    '700': { value: '#0987A0' },
-    '800': { value: '#086F83' },
-    '900': { value: '#065666' },
-  },
-  purple: {
-    '50': { value: '#FAF5FF' },
-    '100': { value: '#E9D8FD' },
-    '200': { value: '#D6BCFA' },
-    '300': { value: '#B794F4' },
-    '400': { value: '#9F7AEA' },
-    '500': { value: '#805AD5' },
-    '600': { value: '#6B46C1' },
-    '700': { value: '#553C9A' },
-    '800': { value: '#44337A' },
-    '900': { value: '#322659' },
-  },
-  pink: {
-    '50': { value: '#FFF5F7' },
-    '100': { value: '#FED7E2' },
-    '200': { value: '#FBB6CE' },
-    '300': { value: '#F687B3' },
-    '400': { value: '#ED64A6' },
-    '500': { value: '#D53F8C' },
-    '600': { value: '#B83280' },
-    '700': { value: '#97266D' },
-    '800': { value: '#702459' },
-    '900': { value: '#521B41' },
-  },
-  black: { value: '#101112' },
-  white: { value: '#ffffff' },
-  whiteAlpha: {
-    '50': { value: 'RGBA(255, 255, 255, 0.04)' },
-    '100': { value: 'RGBA(255, 255, 255, 0.06)' },
-    '200': { value: 'RGBA(255, 255, 255, 0.08)' },
-    '300': { value: 'RGBA(255, 255, 255, 0.16)' },
-    '400': { value: 'RGBA(255, 255, 255, 0.24)' },
-    '500': { value: 'RGBA(255, 255, 255, 0.36)' },
-    '600': { value: 'RGBA(255, 255, 255, 0.48)' },
-    '700': { value: 'RGBA(255, 255, 255, 0.64)' },
-    '800': { value: 'RGBA(255, 255, 255, 0.80)' },
-    '900': { value: 'RGBA(255, 255, 255, 0.92)' },
-  },
-  blackAlpha: {
-    '50': { value: 'RGBA(16, 17, 18, 0.04)' },
-    '100': { value: 'RGBA(16, 17, 18, 0.06)' },
-    '200': { value: 'RGBA(16, 17, 18, 0.08)' },
-    '300': { value: 'RGBA(16, 17, 18, 0.16)' },
-    '400': { value: 'RGBA(16, 17, 18, 0.24)' },
-    '500': { value: 'RGBA(16, 17, 18, 0.36)' },
-    '600': { value: 'RGBA(16, 17, 18, 0.48)' },
-    '700': { value: 'RGBA(16, 17, 18, 0.64)' },
-    '800': { value: 'RGBA(16, 17, 18, 0.80)' },
-    '900': { value: 'RGBA(16, 17, 18, 0.92)' },
-  },
-  // BRAND COLORS
-  github: { value: '#171923' },
-  telegram: { value: '#2775CA' },
-  linkedin: { value: '#1564BA' },
-  discord: { value: '#9747FF' },
-  slack: { value: '#1BA27A' },
-  twitter: { value: '#000000' },
-  opensea: { value: '#2081E2' },
-  facebook: { value: '#4460A0' },
-  medium: { value: '#231F20' },
-  reddit: { value: '#FF4500' },
-  celo: { value: '#FCFF52' },
-};
-
-export default colors;

package/dist/theme/foundations/durations.ts

@@ -1,15 +0,0 @@
-import type { ThemingConfig } from '@chakra-ui/react';
-
-import type { ExcludeUndefined } from 'types/utils';
-
-const durations: ExcludeUndefined<ThemingConfig['tokens']>['durations'] = {
-  'ultra-fast': { value: '50ms' },
-  faster: { value: '100ms' },
-  fast: { value: '150ms' },
-  normal: { value: '200ms' },
-  slow: { value: '300ms' },
-  slower: { value: '400ms' },
-  'ultra-slow': { value: '500ms' },
-};
-
-export default durations;