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

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

@@ -1,219 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'list', 'trigger', 'content', 'indicator' ],
-  base: {
-    root: {
-      '--tabs-trigger-radius': 'radii.l2',
-      position: 'relative',
-      _horizontal: {
-        display: 'block',
-      },
-      _vertical: {
-        display: 'flex',
-      },
-    },
-    list: {
-      display: 'inline-flex',
-      width: '100%',
-      position: 'relative',
-      isolation: 'isolate',
-      '--tabs-indicator-shadow': 'shadows.xs',
-      '--tabs-indicator-bg': 'colors.bg',
-      minH: 'var(--tabs-height)',
-      _horizontal: {
-        flexDirection: 'row',
-      },
-      _vertical: {
-        flexDirection: 'column',
-      },
-    },
-    trigger: {
-      outline: '0',
-      minW: 'var(--tabs-height)',
-      height: 'var(--tabs-height)',
-      display: 'flex',
-      alignItems: 'center',
-      position: 'relative',
-      cursor: 'button',
-      gap: '2',
-      _focusVisible: {
-        zIndex: 1,
-        outline: '2px solid',
-        outlineColor: 'colorPalette.focusRing',
-      },
-      _disabled: {
-        cursor: 'not-allowed',
-        opacity: 0.5,
-      },
-    },
-    content: {
-      focusVisibleRing: 'inside',
-      _horizontal: {
-        width: '100%',
-        pt: 'var(--tabs-content-padding)',
-      },
-      _vertical: {
-        height: '100%',
-        ps: 'var(--tabs-content-padding)',
-      },
-    },
-    indicator: {
-      width: 'var(--width)',
-      height: 'var(--height)',
-      borderRadius: 'var(--tabs-indicator-radius)',
-      bg: 'var(--tabs-indicator-bg)',
-      shadow: 'var(--tabs-indicator-shadow)',
-      zIndex: -1,
-    },
-  },
-
-  variants: {
-    fitted: {
-      'true': {
-        list: {
-          display: 'flex',
-        },
-        trigger: {
-          flex: 1,
-          textAlign: 'center',
-          justifyContent: 'center',
-        },
-      },
-    },
-
-    justify: {
-      start: {
-        list: {
-          justifyContent: 'flex-start',
-        },
-      },
-      center: {
-        list: {
-          justifyContent: 'center',
-        },
-      },
-      end: {
-        list: {
-          justifyContent: 'flex-end',
-        },
-      },
-    },
-
-    size: {
-      sm: {
-        root: {
-          '--tabs-height': 'sizes.8',
-          '--tabs-content-padding': 'spacing.6',
-        },
-        trigger: {
-          py: '1',
-          px: '3',
-          textStyle: 'sm',
-        },
-      },
-      md: {
-        root: {
-          '--tabs-height': 'sizes.10',
-          '--tabs-content-padding': 'spacing.6',
-        },
-        trigger: {
-          py: '2',
-          px: '4',
-          textStyle: 'md',
-        },
-      },
-      free: {},
-    },
-
-    variant: {
-      solid: {
-        trigger: {
-          fontWeight: '600',
-          gap: '1',
-          borderRadius: 'base',
-          color: 'tabs.solid.fg',
-          bg: 'transparent',
-          _selected: {
-            bg: 'tabs.solid.bg.selected',
-            color: 'tabs.solid.fg.selected',
-            _hover: {
-              color: 'tabs.solid.fg.selected',
-            },
-          },
-          _hover: {
-            color: 'link.primary.hover',
-          },
-        },
-      },
-      secondary: {
-        list: {
-          border: 'none',
-          columnGap: '2',
-          _horizontal: {
-            _before: {
-              display: 'none',
-            },
-          },
-        },
-        trigger: {
-          fontWeight: '500',
-          color: 'tabs.secondary.fg',
-          bg: 'transparent',
-          borderWidth: '2px',
-          borderStyle: 'solid',
-          borderColor: 'tabs.secondary.border',
-          borderRadius: 'base',
-          _selected: {
-            bg: 'tabs.secondary.bg.selected',
-            borderColor: 'transparent',
-            _hover: {
-              borderColor: 'transparent',
-            },
-          },
-          _hover: {
-            color: 'link.primary.hover',
-            borderColor: 'link.primary.hover',
-          },
-        },
-      },
-      segmented: {
-        trigger: {
-          color: 'tabs.segmented.fg',
-          bg: 'transparent',
-          borderWidth: '2px',
-          borderStyle: 'solid',
-          borderColor: 'tabs.segmented.border',
-          _hover: {
-            color: 'link.primary.hover',
-          },
-          _selected: {
-            color: 'tabs.segmented.fg.selected',
-            bg: 'tabs.segmented.border',
-            borderColor: 'tabs.segmented.border',
-            _hover: {
-              color: 'tabs.segmented.fg.selected',
-            },
-          },
-          _notFirst: {
-            borderLeftWidth: '0',
-          },
-          _first: {
-            borderTopLeftRadius: 'base',
-            borderBottomLeftRadius: 'base',
-          },
-          _last: {
-            borderTopRightRadius: 'base',
-            borderBottomRightRadius: 'base',
-          },
-        },
-      },
-      unstyled: {},
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'solid',
-  },
-});

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

@@ -1,157 +0,0 @@
-import { defineSlotRecipe as e } from "@chakra-ui/react";
-const o = e({
-  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",
-        bgColor: "unset"
-      }
-    },
-    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",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "tag.root.subtle.bg"
-          }
-        }
-      },
-      clickable: {
-        root: {
-          cursor: "pointer",
-          bgColor: "tag.root.clickable.bg",
-          color: "tag.root.clickable.fg",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "tag.root.clickable.bg"
-          },
-          _hover: {
-            opacity: 0.76
-          }
-        }
-      },
-      filter: {
-        root: {
-          bgColor: "tag.root.filter.bg",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "tag.root.filter.bg"
-          }
-        }
-      },
-      select: {
-        root: {
-          cursor: "pointer",
-          bgColor: "tag.root.select.bg",
-          color: "tag.root.select.fg",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "tag.root.select.bg"
-          },
-          _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"
-  }
-});
-export {
-  o as recipe
-};

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

@@ -1,158 +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',
-        bgColor: 'unset',
-      },
-    },
-    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',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'tag.root.subtle.bg',
-          },
-        },
-      },
-      clickable: {
-        root: {
-          cursor: 'pointer',
-          bgColor: 'tag.root.clickable.bg',
-          color: 'tag.root.clickable.fg',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'tag.root.clickable.bg',
-          },
-          _hover: {
-            opacity: 0.76,
-          },
-        },
-      },
-      filter: {
-        root: {
-          bgColor: 'tag.root.filter.bg',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'tag.root.filter.bg',
-          },
-        },
-      },
-      select: {
-        root: {
-          cursor: 'pointer',
-          bgColor: 'tag.root.select.bg',
-          color: 'tag.root.select.fg',
-          '&:not([data-loading], [aria-busy=true])': {
-            bgColor: 'tag.root.select.bg',
-          },
-          _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.js

@@ -1,86 +0,0 @@
-import { defineRecipe as r } from "@chakra-ui/react";
-const e = r({
-  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"
-  }
-});
-export {
-  e as recipe
-};

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