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

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',
-  },
-});

package/dist/theme/recipes/skeleton.recipe.js

@@ -1,54 +0,0 @@
-import { defineRecipe as a } from "@chakra-ui/react";
-const e = a({
-  base: {},
-  variants: {
-    loading: {
-      true: {
-        borderRadius: "base",
-        boxShadow: "none",
-        backgroundClip: "padding-box",
-        cursor: "default",
-        color: "transparent",
-        pointerEvents: "none",
-        userSelect: "none",
-        // we have to override the property set by chakra in order to make the skeleton shrink
-        // when the text is too long
-        flexShrink: "initial",
-        "&::before, &::after, *": {
-          visibility: "hidden"
-        }
-      },
-      false: {
-        background: "var(--layer-bg)",
-        animation: "fade-in var(--fade-duration, 0.1s) ease-out !important"
-      }
-    },
-    variant: {
-      pulse: {
-        background: "bg.emphasized",
-        animation: "pulse",
-        animationDuration: "var(--duration, 1.2s)"
-      },
-      shine: {
-        "--animate-from": "100%",
-        "--animate-to": "-100%",
-        "--start-color": "colors.skeleton.bg.start",
-        "--end-color": "colors.skeleton.bg.end",
-        backgroundImage: "linear-gradient(90deg,var(--start-color) 8%,var(--end-color) 18%,var(--start-color) 33%)",
-        backgroundColor: "transparent",
-        backgroundSize: "200% 100%",
-        animation: "bg-position var(--duration, 2s) linear infinite"
-      },
-      none: {
-        animation: "none"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "shine",
-    loading: !0
-  }
-});
-export {
-  e as recipe
-};

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

@@ -1,55 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react';
-
-export const recipe = defineRecipe({
-  base: {},
-
-  variants: {
-    loading: {
-      'true': {
-        borderRadius: 'base',
-        boxShadow: 'none',
-        backgroundClip: 'padding-box',
-        cursor: 'default',
-        color: 'transparent',
-        pointerEvents: 'none',
-        userSelect: 'none',
-        // we have to override the property set by chakra in order to make the skeleton shrink
-        // when the text is too long
-        flexShrink: 'initial',
-        '&::before, &::after, *': {
-          visibility: 'hidden',
-        },
-      },
-      'false': {
-        background: 'var(--layer-bg)',
-        animation: 'fade-in var(--fade-duration, 0.1s) ease-out !important',
-      },
-    },
-    variant: {
-      pulse: {
-        background: 'bg.emphasized',
-        animation: 'pulse',
-        animationDuration: 'var(--duration, 1.2s)',
-      },
-      shine: {
-        '--animate-from': '100%',
-        '--animate-to': '-100%',
-        '--start-color': 'colors.skeleton.bg.start',
-        '--end-color': 'colors.skeleton.bg.end',
-        backgroundImage:
-          'linear-gradient(90deg,var(--start-color) 8%,var(--end-color) 18%,var(--start-color) 33%)',
-        backgroundColor: 'transparent',
-        backgroundSize: '200% 100%',
-        animation: 'bg-position var(--duration, 2s) linear infinite',
-      },
-      none: {
-        animation: 'none',
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'shine',
-    loading: true,
-  },
-});

package/dist/theme/recipes/spinner.recipe.js

@@ -1,33 +0,0 @@
-import { defineRecipe as e } from "@chakra-ui/react";
-const r = e({
-  base: {
-    display: "inline-block",
-    borderColor: "blue.500",
-    borderStyle: "solid",
-    borderWidth: "2px",
-    borderRadius: "full",
-    width: "var(--spinner-size)",
-    height: "var(--spinner-size)",
-    animation: "spin",
-    animationDuration: "slowest",
-    "--spinner-track-color": "{colors.spinner.track}",
-    borderBottomColor: "var(--spinner-track-color)",
-    borderInlineStartColor: "var(--spinner-track-color)"
-  },
-  variants: {
-    size: {
-      inherit: { "--spinner-size": "1em" },
-      xs: { "--spinner-size": "sizes.3" },
-      sm: { "--spinner-size": "sizes.4" },
-      md: { "--spinner-size": "sizes.5" },
-      lg: { "--spinner-size": "sizes.8" },
-      xl: { "--spinner-size": "sizes.10" }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-export {
-  r as recipe
-};

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

@@ -1,31 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react';
-
-export const recipe = defineRecipe({
-  base: {
-    display: 'inline-block',
-    borderColor: 'blue.500',
-    borderStyle: 'solid',
-    borderWidth: '2px',
-    borderRadius: 'full',
-    width: 'var(--spinner-size)',
-    height: 'var(--spinner-size)',
-    animation: 'spin',
-    animationDuration: 'slowest',
-    '--spinner-track-color': '{colors.spinner.track}',
-    borderBottomColor: 'var(--spinner-track-color)',
-    borderInlineStartColor: 'var(--spinner-track-color)',
-  },
-  variants: {
-    size: {
-      inherit: { '--spinner-size': '1em' },
-      xs: { '--spinner-size': 'sizes.3' },
-      sm: { '--spinner-size': 'sizes.4' },
-      md: { '--spinner-size': 'sizes.5' },
-      lg: { '--spinner-size': 'sizes.8' },
-      xl: { '--spinner-size': 'sizes.10' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});

package/dist/theme/recipes/stat.recipe.js

@@ -1,101 +0,0 @@
-import { defineSlotRecipe as t } from "@chakra-ui/react";
-const i = t({
-  slots: ["root", "label", "helpText", "valueUnit", "valueText", "indicator"],
-  base: {
-    root: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "1",
-      position: "relative",
-      flex: "1"
-    },
-    label: {
-      display: "inline-flex",
-      gap: "1.5",
-      alignItems: "center",
-      color: "text",
-      textStyle: "sm"
-    },
-    helpText: {
-      color: "text",
-      textStyle: "xs"
-    },
-    valueUnit: {
-      color: "text",
-      textStyle: "xs",
-      fontWeight: "initial",
-      letterSpacing: "initial"
-    },
-    valueText: {
-      verticalAlign: "baseline",
-      fontWeight: "semibold",
-      letterSpacing: "normal",
-      fontFeatureSettings: "initial",
-      fontVariantNumeric: "initial",
-      display: "inline-flex",
-      gap: "1"
-    },
-    indicator: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      marginEnd: 0,
-      "& :where(svg)": {
-        w: "1em",
-        h: "1em"
-      },
-      "&[data-type=up]": {
-        color: "stat.indicator.up"
-      },
-      "&[data-type=down]": {
-        color: "stat.indicator.down"
-      }
-    }
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        root: {
-          flexDirection: "row",
-          alignItems: "center"
-        }
-      }
-    },
-    positive: {
-      true: {
-        valueText: {
-          color: "stat.indicator.up"
-        }
-      },
-      false: {
-        valueText: {
-          color: "stat.indicator.down"
-        }
-      }
-    },
-    size: {
-      sm: {
-        valueText: {
-          textStyle: "sm"
-        }
-      },
-      md: {
-        valueText: {
-          textStyle: "md"
-        }
-      },
-      lg: {
-        valueText: {
-          textStyle: "lg"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    orientation: "horizontal"
-  }
-});
-export {
-  i as recipe
-};

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

@@ -1,101 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'label', 'helpText', 'valueUnit', 'valueText', 'indicator' ],
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '1',
-      position: 'relative',
-      flex: '1',
-    },
-    label: {
-      display: 'inline-flex',
-      gap: '1.5',
-      alignItems: 'center',
-      color: 'text',
-      textStyle: 'sm',
-    },
-    helpText: {
-      color: 'text',
-      textStyle: 'xs',
-    },
-    valueUnit: {
-      color: 'text',
-      textStyle: 'xs',
-      fontWeight: 'initial',
-      letterSpacing: 'initial',
-    },
-    valueText: {
-      verticalAlign: 'baseline',
-      fontWeight: 'semibold',
-      letterSpacing: 'normal',
-      fontFeatureSettings: 'initial',
-      fontVariantNumeric: 'initial',
-      display: 'inline-flex',
-      gap: '1',
-    },
-    indicator: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginEnd: 0,
-      '& :where(svg)': {
-        w: '1em',
-        h: '1em',
-      },
-      '&[data-type=up]': {
-        color: 'stat.indicator.up',
-      },
-      '&[data-type=down]': {
-        color: 'stat.indicator.down',
-      },
-    },
-  },
-
-  variants: {
-    orientation: {
-      horizontal: {
-        root: {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-      },
-    },
-    positive: {
-      'true': {
-        valueText: {
-          color: 'stat.indicator.up',
-        },
-      },
-      'false': {
-        valueText: {
-          color: 'stat.indicator.down',
-        },
-      },
-    },
-    size: {
-      sm: {
-        valueText: {
-          textStyle: 'sm',
-        },
-      },
-      md: {
-        valueText: {
-          textStyle: 'md',
-        },
-      },
-      lg: {
-        valueText: {
-          textStyle: 'lg',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    orientation: 'horizontal',
-  },
-});