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

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

@@ -1,71 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'content', 'header', 'body', 'footer', 'arrow', 'arrowTip' ],
-  base: {
-    content: {
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      textStyle: 'sm',
-      '--popover-bg': 'colors.popover.bg',
-      bg: 'var(--popover-bg)',
-      boxShadow: 'popover',
-      boxShadowColor: 'colors.popover.shadow',
-      '--popover-mobile-size': 'calc(100dvw - 1rem)',
-      width: 'fit-content',
-      maxW: {
-        base: 'calc(100vw - 8px)',
-        lg: '800px',
-      },
-      borderWidth: '0',
-      borderRadius: 'md',
-      '--popover-z-index': 'zIndex.popover',
-      zIndex: 'calc(var(--popover-z-index) + var(--layer-index, 0))',
-      outline: '0',
-      transformOrigin: 'var(--transform-origin)',
-      _open: {
-        animationStyle: 'scale-fade-in',
-        animationDuration: 'fast',
-      },
-      _closed: {
-        animationStyle: 'scale-fade-out',
-        animationDuration: 'faster',
-      },
-    },
-    header: {
-      paddingInline: 'var(--popover-padding)',
-      paddingTop: 'var(--popover-padding)',
-    },
-    body: {
-      padding: 'var(--popover-padding)',
-      flex: '1',
-    },
-    footer: {
-      display: 'flex',
-      alignItems: 'center',
-      paddingInline: 'var(--popover-padding)',
-      paddingBottom: 'var(--popover-padding)',
-    },
-    arrow: {
-      '--arrow-size': 'sizes.3',
-      '--arrow-background': 'var(--popover-bg)',
-    },
-    arrowTip: {
-      borderTopWidth: '1px',
-      borderInlineStartWidth: '1px',
-    },
-  },
-  variants: {
-    size: {
-      sm: {
-        content: {
-          '--popover-padding': 'spacing.4',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'sm',
-  },
-});

package/dist/theme/recipes/progress-circle.recipe.ts

@@ -1,74 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'circle', 'circleTrack', 'circleRange', 'label', 'valueText' ],
-  base: {
-    root: {
-      display: 'inline-flex',
-      textStyle: 'sm',
-      position: 'relative',
-    },
-    circle: {
-      _indeterminate: {
-        animation: 'spin 2s linear infinite',
-      },
-    },
-    circleTrack: {
-      '--track-color': 'colors.progressCircle.trackColor',
-      stroke: 'var(--track-color)',
-    },
-    circleRange: {
-      stroke: 'blue.500',
-      transitionProperty: 'stroke-dasharray',
-      transitionDuration: '0.6s',
-      _indeterminate: {
-        animation: 'circular-progress 1.5s linear infinite',
-      },
-    },
-    label: {
-      display: 'inline-flex',
-    },
-    valueText: {
-      lineHeight: '1',
-      fontWeight: 'medium',
-      letterSpacing: 'tight',
-      fontVariantNumeric: 'tabular-nums',
-    },
-  },
-
-  variants: {
-    size: {
-      sm: {
-        circle: {
-          '--size': '20px',
-          '--thickness': '2px',
-        },
-        valueText: {
-          textStyle: 'xs',
-        },
-      },
-      md: {
-        circle: {
-          '--size': '32px',
-          '--thickness': '3px',
-        },
-        valueText: {
-          textStyle: 'xs',
-        },
-      },
-      lg: {
-        circle: {
-          '--size': '80px',
-          '--thickness': '8px',
-        },
-        valueText: {
-          textStyle: 'sm',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-});

package/dist/theme/recipes/radio-group.recipe.ts

@@ -1,73 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-import { recipe as radiomarkRecipe } from './radiomark.recipe';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'item', 'itemControl', 'itemText', 'root' ],
-  base: {
-    root: {
-      display: 'flex',
-    },
-
-    item: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      position: 'relative',
-      fontWeight: 'normal',
-      cursor: 'pointer',
-      _disabled: {
-        cursor: 'disabled',
-      },
-      _readOnly: {
-        cursor: 'default',
-      },
-    },
-
-    itemControl: radiomarkRecipe.base,
-
-    itemText: {
-      userSelect: 'none',
-      textStyle: 'md',
-      _disabled: {
-        opacity: 'control.disabled',
-      },
-    },
-  },
-  variants: {
-    variant: {
-      solid: {
-        itemControl: radiomarkRecipe.variants?.variant?.solid,
-      },
-    },
-
-    size: {
-      md: {
-        item: { textStyle: 'md', gap: '2' },
-        itemControl: radiomarkRecipe.variants?.size?.md,
-      },
-    },
-
-    orientation: {
-      vertical: {
-        root: {
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          rowGap: '12px',
-        },
-      },
-      horizontal: {
-        root: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          columnGap: '32px',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'solid',
-    orientation: 'vertical',
-  },
-});

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

@@ -1,91 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react';
-
-export const recipe = defineRecipe({
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    verticalAlign: 'top',
-    color: 'white',
-    borderWidth: '2px',
-    borderColor: 'transparent',
-    borderRadius: 'full',
-    _focusVisible: {
-      outline: '2px solid',
-      outlineColor: 'colorPalette.focusRing',
-      outlineOffset: '2px',
-    },
-    _disabled: {
-      cursor: 'disabled',
-      opacity: 'control.disabled',
-    },
-
-    '& .dot': {
-      height: '100%',
-      width: '100%',
-      borderRadius: 'full',
-      bg: 'currentColor',
-      scale: '0.4',
-    },
-  },
-
-  variants: {
-    variant: {
-      solid: {
-        borderWidth: '2px',
-        borderColor: 'radio.control.border',
-        _hover: {
-          borderColor: 'radio.control.border.hover',
-        },
-        _checked: {
-          bg: 'blue.500',
-          color: 'white',
-          borderColor: 'blue.500',
-          _hover: {
-            bg: 'blue.400',
-            borderColor: 'blue.400',
-          },
-        },
-        _invalid: {
-          bg: 'red.500',
-          borderColor: 'red.500',
-        },
-        _readOnly: {
-          borderColor: 'radio.control.border.readOnly',
-          _hover: {
-            borderColor: 'radio.control.border.readOnly',
-          },
-          _checked: {
-            bg: 'radio.control.border.readOnly',
-            _hover: {
-              bg: 'radio.control.border.readOnly',
-            },
-            '& .dot': {
-              bg: 'gray.500',
-            },
-          },
-        },
-      },
-    },
-
-    size: {
-      xs: {
-        boxSize: '3',
-      },
-
-      sm: {
-        boxSize: '4',
-      },
-
-      md: {
-        boxSize: '5',
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-  },
-});

package/dist/theme/recipes/rating-group.recipe.ts

@@ -1,93 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  className: 'chakra-rating-group',
-  slots: [ 'root', 'control', 'item', 'itemIndicator' ],
-  base: {
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      columnGap: 3,
-    },
-
-    control: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 1,
-    },
-
-    item: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      userSelect: 'none',
-      cursor: 'pointer',
-
-      _icon: {
-        width: '100%',
-        height: '100%',
-        display: 'inline-block',
-        flexShrink: 0,
-        position: 'absolute',
-        left: 0,
-        top: 0,
-      },
-    },
-
-    itemIndicator: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative',
-
-      _icon: {
-        stroke: 'none',
-        width: '100%',
-        height: '100%',
-        display: 'inline-block',
-        flexShrink: 0,
-        position: 'absolute',
-        left: 0,
-        top: 0,
-      },
-
-      '& [data-bg]': {
-        color: 'rating',
-      },
-
-      '& [data-fg]': {
-        color: 'transparent',
-      },
-
-      '&[data-highlighted]:not([data-half])': {
-        '& [data-fg]': {
-          color: 'rating.highlighted',
-        },
-      },
-
-      '&[data-half]': {
-        '& [data-fg]': {
-          color: 'rating.highlighted',
-          clipPath: 'inset(0 50% 0 0)',
-        },
-      },
-    },
-  },
-
-  variants: {
-    size: {
-      md: {
-        item: {
-          boxSize: 5,
-        },
-        root: {
-          textStyle: 'md',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-});

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

@@ -1,277 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'trigger', 'indicatorGroup', 'indicator', 'content', 'item', 'control', 'itemText', 'itemGroup', 'itemGroupLabel', 'label', 'valueText' ],
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '1.5',
-      width: '100%',
-    },
-    trigger: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      width: 'full',
-      minH: 'var(--select-trigger-height)',
-      pr: 'var(--select-trigger-padding-right)',
-      pl: 'var(--select-trigger-padding-left)',
-      borderRadius: 'base',
-      userSelect: 'none',
-      textAlign: 'start',
-      fontWeight: 'semibold',
-      cursor: 'pointer',
-      focusVisibleRing: 'none',
-      _disabled: {
-        opacity: 'control.disabled',
-      },
-      _placeholderShown: {
-        '& [data-part=value-text]': {
-          display: '-webkit-box',
-        },
-      },
-    },
-    indicatorGroup: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '1',
-      pos: 'absolute',
-      right: '0',
-      top: '0',
-      bottom: '0',
-      px: '0',
-      pointerEvents: 'none',
-    },
-    indicator: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      boxSize: '5',
-      color: 'inherit',
-      _open: {
-        color: 'link.primary.hover',
-      },
-    },
-    content: {
-      background: 'popover.bg',
-      display: 'flex',
-      flexDirection: 'column',
-      zIndex: 'popover',
-      borderRadius: 'md',
-      borderWidth: '0',
-      outline: 0,
-      boxShadow: 'popover',
-      boxShadowColor: 'colors.popover.shadow',
-      maxH: '96',
-      overflowY: 'auto',
-      minWidth: '150px',
-      rowGap: '2',
-      _open: {
-        animationStyle: 'slide-fade-in',
-        animationDuration: 'fast',
-      },
-      _closed: {
-        animationStyle: 'slide-fade-out',
-        animationDuration: 'fastest',
-      },
-    },
-    item: {
-      position: 'relative',
-      userSelect: 'none',
-      display: 'flex',
-      alignItems: 'center',
-      gap: '2',
-      cursor: 'pointer',
-      justifyContent: 'flex-start',
-      flex: '1',
-      textAlign: 'start',
-      borderRadius: 'none',
-      _disabled: {
-        pointerEvents: 'none',
-        opacity: 'control.disabled',
-      },
-      _highlighted: {
-        bg: 'select.item.bg.highlighted',
-      },
-    },
-    control: {
-      pos: 'relative',
-    },
-    itemText: {
-      flex: '1',
-    },
-    itemGroup: {
-      _first: { mt: '0' },
-    },
-    itemGroupLabel: {
-      py: '1',
-      fontWeight: 'medium',
-    },
-    label: {
-      fontWeight: 'medium',
-      userSelect: 'none',
-      textStyle: 'sm',
-      _disabled: {
-        opacity: 'control.disabled',
-      },
-    },
-    valueText: {
-      display: 'flex',
-      flexDirection: 'column',
-      lineClamp: '1',
-      maxW: '100%',
-      wordBreak: 'break-all',
-    },
-  },
-
-  variants: {
-    variant: {
-      outline: {
-        trigger: {
-          borderWidth: '2px',
-          bg: 'input.bg',
-          color: 'select.trigger.outline.fg',
-          borderColor: 'input.border.filled',
-          _expanded: {
-            color: 'link.primary.hover',
-            borderColor: 'link.primary.hover',
-            _hover: {
-              color: 'link.primary.hover',
-              borderColor: 'link.primary.hover',
-            },
-          },
-          _hover: {
-            color: 'select.trigger.outline.fg',
-            borderColor: 'input.border.hover',
-          },
-          _focusVisible: {
-            borderColor: 'input.border.focus',
-          },
-          _readOnly: {
-            userSelect: 'all',
-            pointerEvents: 'none',
-            cursor: 'default',
-            bg: 'input.bg.readOnly',
-            borderColor: 'input.border.readOnly',
-            _focus: {
-              borderColor: 'input.border.readOnly',
-            },
-            _hover: {
-              borderColor: 'input.border.readOnly',
-            },
-          },
-          _invalid: {
-            borderColor: 'input.border.error',
-            _hover: {
-              borderColor: 'input.border.error',
-            },
-            _expanded: {
-              color: 'link.primary.hover',
-              borderColor: 'link.primary.hover',
-              _hover: {
-                color: 'link.primary.hover',
-                borderColor: 'link.primary.hover',
-              },
-            },
-          },
-          _placeholderShown: {
-            color: 'select.placeholder.fg',
-            borderColor: 'input.border',
-            _hover: {
-              color: 'select.placeholder.fg',
-            },
-            _invalid: {
-              color: 'select.placeholder.fg.error',
-              _hover: {
-                color: 'select.placeholder.fg.error',
-              },
-            },
-          },
-        },
-        indicatorGroup: {
-          color: 'select.indicator.fg',
-          _peerDisabled: {
-            opacity: 'control.disabled',
-          },
-        },
-      },
-      plain: {
-        trigger: {},
-        indicatorGroup: {},
-      },
-    },
-
-    size: {
-      sm: {
-        root: {
-          '--select-trigger-height': 'sizes.8',
-          '--select-trigger-padding-right': 'spacing.8',
-          '--select-trigger-padding-left': 'spacing.2',
-        },
-        content: {
-          px: '0',
-          py: '4',
-          textStyle: 'md',
-        },
-        trigger: {
-          textStyle: 'sm',
-          gap: '1',
-        },
-        indicatorGroup: {
-          pr: '2',
-          pl: '1',
-        },
-        item: {
-          py: '5px',
-          px: '4',
-        },
-      },
-      lg: {
-        root: {
-          '--select-trigger-height': '60px',
-          '--select-trigger-padding-right': '44px',
-          '--select-trigger-padding-left': 'spacing.4',
-        },
-        content: {
-          px: '0',
-          py: '4',
-          textStyle: 'md',
-        },
-        trigger: {
-          py: '2',
-        },
-        item: {
-          py: '5px',
-          px: '4',
-        },
-        indicatorGroup: {
-          pr: '4',
-          pl: '2',
-        },
-      },
-    },
-  },
-
-  compoundVariants: [
-    {
-      size: 'sm',
-      variant: 'outline',
-      css: {
-        trigger: {
-          _placeholderShown: {
-            color: 'select.trigger.outline.fg',
-            _hover: {
-              color: 'select.trigger.outline.fg',
-            },
-          },
-        },
-      },
-    },
-  ],
-
-  defaultVariants: {
-    size: 'sm',
-    variant: 'outline',
-  },
-});