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

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

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

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.js

@@ -1,84 +0,0 @@
-import { defineSlotRecipe as t } from "@chakra-ui/react";
-const i = t({
-  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"
-  }
-});
-export {
-  i as recipe
-};

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.js

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