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

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

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

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

@@ -1,98 +0,0 @@
-import { defineSlotRecipe as t } from "@chakra-ui/react";
-const e = t({
-  slots: ["root", "title", "description", "indicator", "actionTrigger", "closeTrigger"],
-  base: {
-    root: {
-      width: "full",
-      display: "flex",
-      alignItems: "flex-start",
-      position: "relative",
-      gap: "3",
-      py: "3",
-      ps: "6",
-      pe: "3",
-      borderRadius: "md",
-      translate: "var(--x) var(--y)",
-      scale: "var(--scale)",
-      zIndex: "var(--z-index)",
-      height: "var(--height)",
-      opacity: "var(--opacity)",
-      willChange: "translate, opacity, scale",
-      transition: "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
-      transitionTimingFunction: "cubic-bezier(0.21, 1.02, 0.73, 1)",
-      _closed: {
-        transition: "translate 400ms, scale 400ms, opacity 200ms",
-        transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)"
-      },
-      bg: "toast.bg.info",
-      color: "toast.fg",
-      boxShadow: "xl",
-      "--toast-trigger-bg": "colors.bg.muted",
-      "&[data-type=warning]": {
-        color: "toast.fg",
-        bg: "toast.bg.warning",
-        "--toast-trigger-bg": "{white/10}",
-        "--toast-border-color": "{white/40}"
-      },
-      "&[data-type=success]": {
-        color: "toast.fg",
-        bg: "toast.bg.success",
-        "--toast-trigger-bg": "{white/10}",
-        "--toast-border-color": "{white/40}"
-      },
-      "&[data-type=error]": {
-        color: "toast.fg",
-        bg: "toast.bg.error",
-        "--toast-trigger-bg": "{white/10}",
-        "--toast-border-color": "{white/40}"
-      },
-      "&[data-type=info]": {
-        color: "toast.fg",
-        bg: "toast.bg.info",
-        "--toast-trigger-bg": "{white/10}",
-        "--toast-border-color": "{white/40}"
-      },
-      "&[data-type=loading]": {
-        color: "toast.fg",
-        bg: "toast.bg.info",
-        "--toast-trigger-bg": "{white/10}",
-        "--toast-border-color": "{white/40}"
-      }
-    },
-    title: {
-      fontWeight: "700",
-      textStyle: "md",
-      marginEnd: "0"
-    },
-    description: {
-      display: "inline",
-      textStyle: "md"
-    },
-    indicator: {
-      flexShrink: "0",
-      boxSize: "5"
-    },
-    actionTrigger: {
-      textStyle: "sm",
-      fontWeight: "medium",
-      height: "8",
-      px: "3",
-      borderRadius: "base",
-      alignSelf: "center",
-      borderWidth: "1px",
-      borderColor: "var(--toast-border-color, inherit)",
-      transition: "background 200ms",
-      _hover: {
-        bg: "var(--toast-trigger-bg)"
-      }
-    },
-    closeTrigger: {
-      position: "static",
-      alignSelf: "center",
-      color: "closeButton.fg"
-    }
-  }
-});
-export {
-  e as recipe
-};

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

@@ -1,87 +0,0 @@
-import { defineSlotRecipe as o } from "@chakra-ui/react";
-const r = o({
-  slots: ["content", "arrow", "arrowTip"],
-  base: {
-    content: {
-      px: "2",
-      py: "1",
-      borderRadius: "sm",
-      fontWeight: "500",
-      textStyle: "sm",
-      textAlign: "center",
-      boxShadow: "size.md",
-      zIndex: "tooltip",
-      maxW: "320px",
-      transformOrigin: "var(--transform-origin)",
-      _open: {
-        animationStyle: "scale-fade-in",
-        animationDuration: "fast"
-      },
-      _closed: {
-        animationStyle: "scale-fade-out",
-        animationDuration: "fast"
-      }
-    },
-    arrow: {
-      "--arrow-size": "sizes.2",
-      "--arrow-background": "var(--tooltip-bg)"
-    },
-    arrowTip: {
-      borderTopWidth: "1px",
-      borderInlineStartWidth: "1px",
-      borderColor: "var(--tooltip-bg)"
-    }
-  },
-  variants: {
-    variant: {
-      regular: {
-        content: {
-          "--tooltip-bg": "colors.tooltip.bg",
-          bg: "var(--tooltip-bg)",
-          color: "tooltip.fg"
-        }
-      },
-      navigation: {
-        content: {
-          "--tooltip-bg": "colors.tooltip.navigation.bg",
-          bg: "var(--tooltip-bg)",
-          color: "tooltip.navigation.fg",
-          borderWidth: "0",
-          borderRadius: "base",
-          minW: "120px",
-          boxShadow: "none",
-          textAlign: "center",
-          padding: "15px 12px",
-          _selected: {
-            color: "tooltip.navigation.fg.selected"
-          }
-        },
-        arrow: {
-          display: "none"
-        },
-        arrowTip: {
-          display: "none"
-        }
-      },
-      popover: {
-        content: {
-          maxW: "none",
-          bg: "popover.bg",
-          color: "text.primary",
-          p: "4",
-          boxShadow: "popover",
-          boxShadowColor: "popover.shadow",
-          borderRadius: "md",
-          textAlign: "left",
-          fontWeight: "normal"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "regular"
-  }
-});
-export {
-  r as recipe
-};

package/dist/theme/theme.js

@@ -1,40 +0,0 @@
-import { defineConfig as o, createSystem as m, defaultConfig as r } from "@chakra-ui/react";
-import { keyframes as e } from "./foundations/animations.js";
-import * as t from "./foundations/borders.js";
-import s from "./foundations/breakpoints.js";
-import i from "./foundations/colors.js";
-import f from "./foundations/durations.js";
-import a from "./foundations/semanticTokens.js";
-import p from "./foundations/shadows.js";
-import { fonts as n, textStyles as l } from "./foundations/typography.js";
-import { zIndex as d } from "./foundations/zIndex.js";
-import u from "./globalCss.js";
-import { slotRecipes as c, recipes as b } from "./recipes/index.js";
-const g = o({
-  globalCss: u,
-  theme: {
-    breakpoints: s,
-    keyframes: e,
-    recipes: b,
-    slotRecipes: c,
-    semanticTokens: a,
-    textStyles: l,
-    tokens: {
-      ...t,
-      colors: i,
-      durations: f,
-      fonts: n,
-      shadows: p,
-      zIndex: d,
-      fontWeights: {
-        normal: { value: "400" },
-        medium: { value: "500" },
-        semibold: { value: "600" },
-        bold: { value: "700" }
-      }
-    }
-  }
-}), T = m(r, g);
-export {
-  T as default
-};

package/dist/theme/utils/entries.js

@@ -1,11 +0,0 @@
-function s(n, o) {
-  const t = {};
-  for (const r in n) {
-    const e = o(r, n[r]);
-    t[e[0]] = e[1];
-  }
-  return t;
-}
-export {
-  s as mapEntries
-};

package/dist/theme.d.ts

@@ -1,2 +0,0 @@
-export * from './theme/index'
-export {}

package/dist/theme.js

@@ -1,4 +0,0 @@
-import { default as a } from "./theme/theme.js";
-export {
-  a as theme
-};