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

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

@@ -1,145 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'label', 'startElement', 'endElement', 'closeTrigger' ],
-  base: {
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      verticalAlign: 'top',
-      maxWidth: '100%',
-      userSelect: 'none',
-      borderRadius: 'sm',
-      focusVisibleRing: 'outside',
-      _loading: {
-        borderRadius: 'sm',
-      },
-    },
-    label: {
-      lineClamp: '1',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      fontWeight: 'medium',
-      display: 'inline',
-    },
-    closeTrigger: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      outline: '0',
-      borderRadius: 'none',
-      color: 'closeButton.fg',
-      focusVisibleRing: 'inside',
-      focusRingWidth: '2px',
-      _hover: {
-        color: 'link.primary.hover',
-      },
-    },
-    startElement: {
-      flexShrink: 0,
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      boxSize: 'var(--tag-element-size)',
-      ms: 'var(--tag-element-offset)',
-      '&:has([data-scope=avatar])': {
-        boxSize: 'var(--tag-avatar-size)',
-        ms: 'calc(var(--tag-element-offset) * 1.5)',
-      },
-      _icon: { boxSize: '100%' },
-    },
-    endElement: {
-      flexShrink: 0,
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      boxSize: 'var(--tag-element-size)',
-      me: 'var(--tag-element-offset)',
-      _icon: { boxSize: '100%' },
-      '&:has(button)': {
-        ms: 'calc(var(--tag-element-offset) * -1)',
-      },
-    },
-  },
-
-  variants: {
-    size: {
-      md: {
-        root: {
-          px: '1',
-          py: '0.5',
-          minH: '6',
-          gap: '1',
-          '--tag-avatar-size': 'spacing.4',
-          '--tag-element-size': 'spacing.3',
-          '--tag-element-offset': '0px',
-        },
-        label: {
-          textStyle: 'sm',
-        },
-      },
-      lg: {
-        root: {
-          px: '6px',
-          py: '6px',
-          minH: '8',
-          gap: '1',
-          '--tag-avatar-size': 'spacing.4',
-          '--tag-element-size': 'spacing.3',
-          '--tag-element-offset': '0px',
-        },
-        label: {
-          textStyle: 'sm',
-        },
-      },
-    },
-
-    variant: {
-      subtle: {
-        root: {
-          bgColor: 'tag.root.subtle.bg',
-          color: 'tag.root.subtle.fg',
-        },
-      },
-      clickable: {
-        root: {
-          cursor: 'pointer',
-          bgColor: 'tag.root.clickable.bg',
-          color: 'tag.root.clickable.fg',
-          _hover: {
-            opacity: 0.76,
-          },
-        },
-      },
-      filter: {
-        root: {
-          bgColor: 'tag.root.filter.bg',
-        },
-      },
-      select: {
-        root: {
-          cursor: 'pointer',
-          bgColor: 'tag.root.select.bg',
-          color: 'tag.root.select.fg',
-          _hover: {
-            color: 'blue.400',
-            opacity: 0.76,
-          },
-          _selected: {
-            bgColor: 'tag.root.select.bg.selected',
-            color: 'whiteAlpha.800',
-            _hover: {
-              color: 'whiteAlpha.800',
-              opacity: 0.76,
-            },
-          },
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'subtle',
-  },
-});

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

@@ -1,86 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react';
-
-export const recipe = defineRecipe({
-  base: {
-    width: '100%',
-    minWidth: '0',
-    minHeight: '160px',
-    outline: '0',
-    position: 'relative',
-    appearance: 'none',
-    textAlign: 'start',
-    borderRadius: 'base',
-    color: 'input.fg',
-    '--focus-color': 'colors.border.error',
-    '--error-color': 'colors.border.error',
-    _invalid: {
-      focusRingColor: 'var(--error-color)',
-      borderColor: 'var(--error-color)',
-    },
-  },
-  variants: {
-    size: {
-      '2xl': {
-        textStyle: 'md',
-        py: '4',
-        pl: '4',
-        pr: '5', // === scrollbar width
-        scrollPaddingBottom: '4',
-      },
-    },
-
-    variant: {
-      outline: {
-        bg: 'input.bg',
-        borderWidth: '2px',
-        borderColor: 'input.border',
-        focusVisibleRing: 'none',
-        _hover: {
-          borderColor: 'input.border.hover',
-        },
-        _focus: {
-          borderColor: 'input.border.focus',
-          boxShadow: 'size.md',
-          _hover: {
-            borderColor: 'input.border.focus',
-          },
-        },
-        _readOnly: {
-          userSelect: 'all',
-          bg: 'input.bg.readOnly',
-          borderColor: 'input.border.readOnly',
-          _focus: {
-            borderColor: 'input.border.readOnly',
-          },
-          _hover: {
-            borderColor: 'input.border.readOnly',
-          },
-        },
-        _disabled: {
-          pointerEvents: 'none',
-          opacity: 'control.disabled',
-        },
-        _invalid: {
-          borderColor: 'input.border.error',
-          _hover: {
-            borderColor: 'input.border.error',
-          },
-        },
-      },
-    },
-
-    floating: {
-      'true': {
-        paddingTop: '8',
-        _placeholderShown: {
-          paddingTop: '10',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: '2xl',
-    variant: 'outline',
-  },
-});

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

@@ -1,97 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'title', 'description', 'indicator', 'actionTrigger', 'closeTrigger' ],
-  base: {
-    root: {
-      width: 'full',
-      display: 'flex',
-      alignItems: 'flex-start',
-      position: 'relative',
-      gap: '3',
-      py: '3',
-      ps: '6',
-      pe: '3',
-      borderRadius: 'md',
-      translate: 'var(--x) var(--y)',
-      scale: 'var(--scale)',
-      zIndex: 'var(--z-index)',
-      height: 'var(--height)',
-      opacity: 'var(--opacity)',
-      willChange: 'translate, opacity, scale',
-      transition:
-        'translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms',
-      transitionTimingFunction: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
-      _closed: {
-        transition: 'translate 400ms, scale 400ms, opacity 200ms',
-        transitionTimingFunction: 'cubic-bezier(0.06, 0.71, 0.55, 1)',
-      },
-      bg: 'toast.bg.info',
-      color: 'toast.fg',
-      boxShadow: 'xl',
-      '--toast-trigger-bg': 'colors.bg.muted',
-      '&[data-type=warning]': {
-        color: 'toast.fg',
-        bg: 'toast.bg.warning',
-        '--toast-trigger-bg': '{white/10}',
-        '--toast-border-color': '{white/40}',
-      },
-      '&[data-type=success]': {
-        color: 'toast.fg',
-        bg: 'toast.bg.success',
-        '--toast-trigger-bg': '{white/10}',
-        '--toast-border-color': '{white/40}',
-      },
-      '&[data-type=error]': {
-        color: 'toast.fg',
-        bg: 'toast.bg.error',
-        '--toast-trigger-bg': '{white/10}',
-        '--toast-border-color': '{white/40}',
-      },
-      '&[data-type=info]': {
-        color: 'toast.fg',
-        bg: 'toast.bg.info',
-        '--toast-trigger-bg': '{white/10}',
-        '--toast-border-color': '{white/40}',
-      },
-      '&[data-type=loading]': {
-        color: 'toast.fg',
-        bg: 'toast.bg.info',
-        '--toast-trigger-bg': '{white/10}',
-        '--toast-border-color': '{white/40}',
-      },
-    },
-    title: {
-      fontWeight: '700',
-      textStyle: 'md',
-      marginEnd: '0',
-    },
-    description: {
-      display: 'inline',
-      textStyle: 'md',
-    },
-    indicator: {
-      flexShrink: '0',
-      boxSize: '5',
-    },
-    actionTrigger: {
-      textStyle: 'sm',
-      fontWeight: 'medium',
-      height: '8',
-      px: '3',
-      borderRadius: 'base',
-      alignSelf: 'center',
-      borderWidth: '1px',
-      borderColor: 'var(--toast-border-color, inherit)',
-      transition: 'background 200ms',
-      _hover: {
-        bg: 'var(--toast-trigger-bg)',
-      },
-    },
-    closeTrigger: {
-      position: 'static',
-      alignSelf: 'center',
-      color: 'closeButton.fg',
-    },
-  },
-});

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

@@ -1,85 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'content', 'arrow', 'arrowTip' ],
-  base: {
-    content: {
-      px: '2',
-      py: '1',
-      borderRadius: 'sm',
-      fontWeight: '500',
-      textStyle: 'sm',
-      textAlign: 'center',
-      boxShadow: 'size.md',
-      zIndex: 'tooltip',
-      maxW: '320px',
-      transformOrigin: 'var(--transform-origin)',
-      _open: {
-        animationStyle: 'scale-fade-in',
-        animationDuration: 'fast',
-      },
-      _closed: {
-        animationStyle: 'scale-fade-out',
-        animationDuration: 'fast',
-      },
-    },
-    arrow: {
-      '--arrow-size': 'sizes.2',
-      '--arrow-background': 'var(--tooltip-bg)',
-    },
-    arrowTip: {
-      borderTopWidth: '1px',
-      borderInlineStartWidth: '1px',
-      borderColor: 'var(--tooltip-bg)',
-    },
-  },
-  variants: {
-    variant: {
-      regular: {
-        content: {
-          '--tooltip-bg': 'colors.tooltip.bg',
-          bg: 'var(--tooltip-bg)',
-          color: 'tooltip.fg',
-        },
-      },
-      navigation: {
-        content: {
-          '--tooltip-bg': 'colors.tooltip.navigation.bg',
-          bg: 'var(--tooltip-bg)',
-          color: 'tooltip.navigation.fg',
-          borderWidth: '0',
-          borderRadius: 'base',
-          minW: '120px',
-          boxShadow: 'none',
-          textAlign: 'center',
-          padding: '15px 12px',
-          _selected: {
-            color: 'tooltip.navigation.fg.selected',
-          },
-        },
-        arrow: {
-          display: 'none',
-        },
-        arrowTip: {
-          display: 'none',
-        },
-      },
-      popover: {
-        content: {
-          maxW: 'none',
-          bg: 'popover.bg',
-          color: 'text.primary',
-          p: '4',
-          boxShadow: 'popover',
-          boxShadowColor: 'popover.shadow',
-          borderRadius: 'md',
-          textAlign: 'left',
-          fontWeight: 'normal',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'regular',
-  },
-});

package/dist/theme/theme.ts

@@ -1,41 +0,0 @@
-import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';
-
-import { keyframes } from './foundations/animations';
-import * as borders from './foundations/borders';
-import breakpoints from './foundations/breakpoints';
-import colors from './foundations/colors';
-import durations from './foundations/durations';
-import semanticTokens from './foundations/semanticTokens';
-import shadows from './foundations/shadows';
-import { fonts, textStyles } from './foundations/typography';
-import zIndex from './foundations/zIndex';
-import globalCss from './globalCss';
-import { recipes, slotRecipes } from './recipes';
-
-const customConfig = defineConfig({
-  globalCss,
-  theme: {
-    breakpoints,
-    keyframes,
-    recipes,
-    slotRecipes,
-    semanticTokens,
-    textStyles,
-    tokens: {
-      ...borders,
-      colors,
-      durations,
-      fonts,
-      shadows,
-      zIndex,
-      fontWeights: {
-        normal: { value: '400' },
-        medium: { value: '500' },
-        semibold: { value: '600' },
-        bold: { value: '700' },
-      },
-    },
-  },
-});
-
-export default createSystem(defaultConfig, customConfig);

package/dist/theme/utils/entries.ts

@@ -1,12 +0,0 @@
-// https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/utils/entries.ts#L1
-export function mapEntries<A, B, K extends string | number | symbol>(
-  obj: { [key in K]: A },
-  f: (key: K, val: A) => [K, B],
-): { [key in K]: B } {
-  const result: { [key in K]: B } = {} as unknown as { [key in K]: B };
-  for (const key in obj) {
-    const kv = f(key, obj[key]);
-    result[kv[0]] = kv[1];
-  }
-  return result;
-}