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

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
-};

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/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/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/switch.recipe.js

@@ -1,125 +0,0 @@
-import { defineSlotRecipe as i } from "@chakra-ui/react";
-const e = i({
-  slots: ["root", "label", "indicator", "control", "thumb"],
-  className: "chakra-switch",
-  base: {
-    root: {
-      display: "inline-flex",
-      gap: "2.5",
-      alignItems: "center",
-      position: "relative",
-      verticalAlign: "middle",
-      "--switch-diff": "calc(var(--switch-width) - var(--switch-height))",
-      "--switch-x": {
-        base: "var(--switch-diff)",
-        _rtl: "calc(var(--switch-diff) * -1)"
-      }
-    },
-    label: {
-      lineHeight: "1",
-      userSelect: "none",
-      fontSize: "sm",
-      fontWeight: "400",
-      _disabled: {
-        opacity: "0.5"
-      }
-    },
-    indicator: {
-      position: "absolute",
-      height: "var(--switch-height)",
-      width: "var(--switch-height)",
-      fontSize: "var(--switch-indicator-font-size)",
-      flexShrink: 0,
-      userSelect: "none",
-      display: "grid",
-      placeContent: "center",
-      transition: "inset-inline-start 0.12s ease",
-      insetInlineStart: "calc(var(--switch-x) - 2px)",
-      _checked: {
-        insetInlineStart: "2px"
-      }
-    },
-    control: {
-      display: "inline-flex",
-      gap: "0.5rem",
-      flexShrink: 0,
-      justifyContent: "flex-start",
-      cursor: "switch",
-      borderRadius: "full",
-      position: "relative",
-      width: "var(--switch-width)",
-      height: "var(--switch-height)",
-      _disabled: {
-        opacity: "0.5",
-        cursor: "not-allowed"
-      },
-      _invalid: {
-        outline: "2px solid",
-        outlineColor: "border.error",
-        outlineOffset: "2px"
-      }
-    },
-    thumb: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: 0,
-      transitionProperty: "translate",
-      transitionDuration: "fast",
-      borderRadius: "inherit",
-      _checked: {
-        translate: "var(--switch-x) 0"
-      }
-    }
-  },
-  variants: {
-    variant: {
-      primary: {
-        control: {
-          borderRadius: "full",
-          bg: "switch.primary.bg",
-          focusVisibleRing: "outside",
-          _checked: {
-            bg: "switch.primary.bg.checked",
-            _hover: {
-              bg: "switch.primary.bg.hover"
-            }
-          }
-        },
-        thumb: {
-          bg: "white",
-          width: "var(--switch-height)",
-          height: "var(--switch-height)",
-          scale: "0.8",
-          boxShadow: "sm",
-          _checked: {
-            bg: "white"
-          }
-        }
-      }
-    },
-    size: {
-      sm: {
-        root: {
-          "--switch-width": "26px",
-          "--switch-height": "sizes.4",
-          "--switch-indicator-font-size": "fontSizes.sm"
-        }
-      },
-      md: {
-        root: {
-          "--switch-width": "34px",
-          "--switch-height": "sizes.5",
-          "--switch-indicator-font-size": "fontSizes.md"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "primary",
-    size: "md"
-  }
-});
-export {
-  e as recipe
-};

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

@@ -1,83 +0,0 @@
-import { defineSlotRecipe as e } from "@chakra-ui/react";
-const o = e({
-  slots: ["root", "row", "cell", "columnHeader", "caption", "footer", "body", "header"],
-  base: {
-    root: {
-      tableLayout: "fixed",
-      fontVariant: "normal",
-      fontVariantLigatures: "no-contextual",
-      borderCollapse: "collapse",
-      width: "full",
-      textAlign: "start",
-      verticalAlign: "top",
-      overflow: "unset"
-    },
-    cell: {
-      textAlign: "start",
-      alignItems: "center",
-      verticalAlign: "top",
-      fontWeight: "medium"
-    },
-    columnHeader: {
-      fontWeight: "medium",
-      textAlign: "start"
-    }
-  },
-  variants: {
-    variant: {
-      line: {
-        columnHeader: {
-          color: "table.header.fg",
-          backgroundColor: "table.header.bg",
-          _first: {
-            borderTopLeftRadius: "8px"
-          },
-          _last: {
-            borderTopRightRadius: "8px"
-          }
-        },
-        cell: {
-          borderBottomWidth: "1px",
-          borderColor: "border.divider"
-        },
-        row: {
-          bg: "bg"
-        }
-      }
-    },
-    size: {
-      md: {
-        root: {
-          fontSize: "sm"
-        },
-        columnHeader: {
-          px: "6px",
-          py: "10px",
-          _first: {
-            pl: 3
-          },
-          _last: {
-            pr: 3
-          }
-        },
-        cell: {
-          px: "6px",
-          py: 4,
-          _first: {
-            pl: 3
-          },
-          _last: {
-            pr: 3
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "line",
-    size: "md"
-  }
-});
-export {
-  o as recipe
-};