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

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

@@ -1,168 +0,0 @@
-import { defineSlotRecipe as e } from "@chakra-ui/react";
-const o = e({
-  slots: ["root", "backdrop", "trigger", "content", "header", "body", "footer", "title", "description", "positioner"],
-  className: "chakra-drawer",
-  base: {
-    backdrop: {
-      bg: "blackAlpha.800",
-      pos: "fixed",
-      insetInlineStart: 0,
-      top: 0,
-      w: "100vw",
-      h: "100dvh",
-      zIndex: "modal",
-      _open: {
-        animationName: "fade-in",
-        animationDuration: "slow"
-      },
-      _closed: {
-        animationName: "fade-out",
-        animationDuration: "moderate"
-      }
-    },
-    positioner: {
-      display: "flex",
-      width: "100vw",
-      height: "100dvh",
-      position: "fixed",
-      insetInlineStart: 0,
-      top: 0,
-      zIndex: "modal",
-      overscrollBehaviorY: "none"
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      position: "relative",
-      width: "100%",
-      outline: 0,
-      zIndex: "modal",
-      textStyle: "sm",
-      maxH: "100dvh",
-      color: "inherit",
-      bg: "drawer.bg",
-      boxShadow: "drawer",
-      _open: {
-        animationDuration: "slowest",
-        animationTimingFunction: "ease-in-smooth"
-      },
-      _closed: {
-        animationDuration: "slower",
-        animationTimingFunction: "ease-in-smooth"
-      }
-    },
-    header: {
-      flex: 0,
-      px: "6",
-      pt: "6",
-      pb: "4"
-    },
-    body: {
-      p: "6",
-      flex: "1",
-      overflow: "auto"
-    },
-    footer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      gap: "3",
-      px: "6",
-      pt: "2",
-      pb: "4"
-    },
-    title: {
-      textStyle: "lg",
-      fontWeight: "semibold"
-    },
-    description: {
-      color: "fg.muted"
-    }
-  },
-  variants: {
-    size: {
-      md: {
-        content: {
-          maxW: "300px"
-        }
-      }
-    },
-    placement: {
-      start: {
-        positioner: {
-          justifyContent: "flex-start"
-        },
-        content: {
-          _open: {
-            animationName: {
-              base: "slide-from-left-full, fade-in",
-              _rtl: "slide-from-right-full, fade-in"
-            }
-          },
-          _closed: {
-            animationName: {
-              base: "slide-to-left-full, fade-out",
-              _rtl: "slide-to-right-full, fade-out"
-            }
-          }
-        }
-      },
-      end: {
-        positioner: {
-          justifyContent: "flex-end"
-        },
-        content: {
-          _open: {
-            animationName: {
-              base: "slide-from-right-full, fade-in",
-              _rtl: "slide-from-left-full, fade-in"
-            }
-          },
-          _closed: {
-            animationName: {
-              base: "slide-to-right-full, fade-out",
-              _rtl: "slide-to-right-full, fade-out"
-            }
-          }
-        }
-      },
-      top: {
-        positioner: {
-          alignItems: "flex-start"
-        },
-        content: {
-          maxW: "100%",
-          _open: { animationName: "slide-from-top-full, fade-in" },
-          _closed: { animationName: "slide-to-top-full, fade-out" }
-        }
-      },
-      bottom: {
-        positioner: {
-          alignItems: "flex-end"
-        },
-        content: {
-          maxW: "100%",
-          _open: { animationName: "slide-from-bottom-full, fade-in" },
-          _closed: { animationName: "slide-to-bottom-full, fade-out" }
-        }
-      }
-    },
-    contained: {
-      true: {
-        positioner: {
-          padding: "4"
-        },
-        content: {
-          borderRadius: "l3"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    placement: "end"
-  }
-});
-export {
-  o as recipe
-};

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

@@ -1,173 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'backdrop', 'trigger', 'content', 'header', 'body', 'footer', 'title', 'description', 'positioner' ],
-  className: 'chakra-drawer',
-  base: {
-    backdrop: {
-      bg: 'blackAlpha.800',
-      pos: 'fixed',
-      insetInlineStart: 0,
-      top: 0,
-      w: '100vw',
-      h: '100dvh',
-      zIndex: 'modal',
-      _open: {
-        animationName: 'fade-in',
-        animationDuration: 'slow',
-      },
-      _closed: {
-        animationName: 'fade-out',
-        animationDuration: 'moderate',
-      },
-    },
-    positioner: {
-      display: 'flex',
-      width: '100vw',
-      height: '100dvh',
-      position: 'fixed',
-      insetInlineStart: 0,
-      top: 0,
-      zIndex: 'modal',
-      overscrollBehaviorY: 'none',
-    },
-    content: {
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
-      width: '100%',
-      outline: 0,
-      zIndex: 'modal',
-      textStyle: 'sm',
-      maxH: '100dvh',
-      color: 'inherit',
-      bg: 'drawer.bg',
-      boxShadow: 'drawer',
-      _open: {
-        animationDuration: 'slowest',
-        animationTimingFunction: 'ease-in-smooth',
-      },
-      _closed: {
-        animationDuration: 'slower',
-        animationTimingFunction: 'ease-in-smooth',
-      },
-    },
-    header: {
-      flex: 0,
-      px: '6',
-      pt: '6',
-      pb: '4',
-    },
-    body: {
-      p: '6',
-      flex: '1',
-      overflow: 'auto',
-    },
-    footer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      gap: '3',
-      px: '6',
-      pt: '2',
-      pb: '4',
-    },
-    title: {
-      textStyle: 'lg',
-      fontWeight: 'semibold',
-    },
-    description: {
-      color: 'fg.muted',
-    },
-  },
-
-  variants: {
-    size: {
-      md: {
-        content: {
-          maxW: '300px',
-        },
-      },
-    },
-
-    placement: {
-      start: {
-        positioner: {
-          justifyContent: 'flex-start',
-        },
-        content: {
-          _open: {
-            animationName: {
-              base: 'slide-from-left-full, fade-in',
-              _rtl: 'slide-from-right-full, fade-in',
-            },
-          },
-          _closed: {
-            animationName: {
-              base: 'slide-to-left-full, fade-out',
-              _rtl: 'slide-to-right-full, fade-out',
-            },
-          },
-        },
-      },
-
-      end: {
-        positioner: {
-          justifyContent: 'flex-end',
-        },
-        content: {
-          _open: {
-            animationName: {
-              base: 'slide-from-right-full, fade-in',
-              _rtl: 'slide-from-left-full, fade-in',
-            },
-          },
-          _closed: {
-            animationName: {
-              base: 'slide-to-right-full, fade-out',
-              _rtl: 'slide-to-right-full, fade-out',
-            },
-          },
-        },
-      },
-
-      top: {
-        positioner: {
-          alignItems: 'flex-start',
-        },
-        content: {
-          maxW: '100%',
-          _open: { animationName: 'slide-from-top-full, fade-in' },
-          _closed: { animationName: 'slide-to-top-full, fade-out' },
-        },
-      },
-
-      bottom: {
-        positioner: {
-          alignItems: 'flex-end',
-        },
-        content: {
-          maxW: '100%',
-          _open: { animationName: 'slide-from-bottom-full, fade-in' },
-          _closed: { animationName: 'slide-to-bottom-full, fade-out' },
-        },
-      },
-    },
-
-    contained: {
-      'true': {
-        positioner: {
-          padding: '4',
-        },
-        content: {
-          borderRadius: 'l3',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    placement: 'end',
-  },
-});

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

@@ -1,174 +0,0 @@
-import { defineSlotRecipe as e } from "@chakra-ui/react";
-const i = e({
-  className: "chakra-field",
-  slots: ["root", "label", "requiredIndicator", "errorText", "helperText"],
-  base: {
-    requiredIndicator: {
-      color: "inherit",
-      lineHeight: "inherit"
-    },
-    root: {
-      display: "flex",
-      width: "100%",
-      position: "relative",
-      gap: "1"
-    },
-    label: {
-      display: "flex",
-      alignItems: "center",
-      textAlign: "start",
-      textStyle: "sm",
-      fontWeight: "500",
-      gap: "0",
-      userSelect: "none",
-      zIndex: "1",
-      _disabled: {
-        opacity: "control.disabled"
-      },
-      _invalid: {
-        color: "input.fg.error"
-      }
-    },
-    errorText: {
-      display: "inline-flex",
-      alignItems: "center",
-      fontWeight: "medium",
-      gap: "1",
-      color: "input.fg.error",
-      textStyle: "sm"
-    },
-    helperText: {
-      color: "fg.muted",
-      textStyle: "sm"
-    }
-  },
-  variants: {
-    floating: {
-      true: {
-        label: {
-          pos: "absolute",
-          bg: "bg",
-          top: "2px",
-          left: "2px",
-          color: "input.placeholder",
-          width: "calc(100% - 4px)",
-          borderRadius: "base",
-          pointerEvents: "none",
-          transformOrigin: "top left",
-          transitionProperty: "font-size, line-height, padding, background-color",
-          transitionDuration: "fast",
-          transitionTimingFunction: "ease"
-        }
-      }
-    },
-    size: {
-      sm: {
-        label: {
-          fontSize: "sm"
-        }
-      },
-      md: {
-        label: {
-          fontSize: "md"
-        }
-      },
-      lg: {
-        label: {
-          fontSize: "md"
-        }
-      },
-      // special size for textarea
-      "2xl": {
-        label: {
-          fontSize: "md"
-        }
-      }
-    },
-    orientation: {
-      vertical: {
-        root: {
-          flexDirection: "column",
-          alignItems: "flex-start"
-        }
-      },
-      horizontal: {
-        root: {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between"
-        },
-        label: {
-          flex: "0 0 var(--field-label-width, 80px)"
-        }
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      size: "lg",
-      floating: !0,
-      css: {
-        label: {
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          padding: "10px 16px 0px 16px",
-          textStyle: "xs",
-          _peerPlaceholderShown: {
-            padding: "16px",
-            textStyle: "md"
-          },
-          _peerFocusVisible: {
-            padding: "10px 16px 0px 16px",
-            textStyle: "xs"
-          },
-          _readOnly: {
-            bg: "input.bg.readOnly"
-          }
-        },
-        errorText: {
-          fontSize: "inherit",
-          lineHeight: "inherit"
-        }
-      }
-    },
-    {
-      size: "2xl",
-      floating: !0,
-      css: {
-        label: {
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          // 20px = scrollbar width
-          // 4px = border width
-          width: "calc(100% - 4px - 20px)",
-          padding: "16px 16px 0px 16px",
-          textStyle: "xs",
-          borderTopRightRadius: "0px",
-          borderBottomRightRadius: "0px",
-          _peerPlaceholderShown: {
-            textStyle: "md"
-          },
-          _peerFocusVisible: {
-            textStyle: "xs"
-          },
-          _readOnly: {
-            bg: "input.bg.readOnly"
-          }
-        },
-        errorText: {
-          fontSize: "inherit",
-          lineHeight: "inherit"
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    floating: !1,
-    orientation: "vertical"
-  }
-});
-export {
-  i as recipe
-};

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

@@ -1,175 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  className: 'chakra-field',
-  slots: [ 'root', 'label', 'requiredIndicator', 'errorText', 'helperText' ],
-  base: {
-    requiredIndicator: {
-      color: 'inherit',
-      lineHeight: 'inherit',
-    },
-    root: {
-      display: 'flex',
-      width: '100%',
-      position: 'relative',
-      gap: '1',
-    },
-    label: {
-      display: 'flex',
-      alignItems: 'center',
-      textAlign: 'start',
-      textStyle: 'sm',
-      fontWeight: '500',
-      gap: '0',
-      userSelect: 'none',
-      zIndex: '1',
-      _disabled: {
-        opacity: 'control.disabled',
-      },
-      _invalid: {
-        color: 'input.fg.error',
-      },
-    },
-    errorText: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      fontWeight: 'medium',
-      gap: '1',
-      color: 'input.fg.error',
-      textStyle: 'sm',
-    },
-    helperText: {
-      color: 'fg.muted',
-      textStyle: 'sm',
-    },
-  },
-
-  variants: {
-    floating: {
-      'true': {
-        label: {
-          pos: 'absolute',
-          bg: 'bg',
-          top: '2px',
-          left: '2px',
-          color: 'input.placeholder',
-          width: 'calc(100% - 4px)',
-          borderRadius: 'base',
-          pointerEvents: 'none',
-          transformOrigin: 'top left',
-          transitionProperty: 'font-size, line-height, padding, background-color',
-          transitionDuration: 'fast',
-          transitionTimingFunction: 'ease',
-        },
-      },
-    },
-    size: {
-      sm: {
-        label: {
-          fontSize: 'sm',
-        },
-      },
-      md: {
-        label: {
-          fontSize: 'md',
-        },
-      },
-      lg: {
-        label: {
-          fontSize: 'md',
-        },
-      },
-      // special size for textarea
-      '2xl': {
-        label: {
-          fontSize: 'md',
-        },
-      },
-    },
-    orientation: {
-      vertical: {
-        root: {
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-        },
-      },
-      horizontal: {
-        root: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        },
-        label: {
-          flex: '0 0 var(--field-label-width, 80px)',
-        },
-      },
-    },
-  },
-
-  compoundVariants: [
-    {
-      size: 'lg',
-      floating: true,
-      css: {
-        label: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          padding: '10px 16px 0px 16px',
-          textStyle: 'xs',
-          _peerPlaceholderShown: {
-            padding: '16px',
-            textStyle: 'md',
-          },
-          _peerFocusVisible: {
-            padding: '10px 16px 0px 16px',
-            textStyle: 'xs',
-          },
-          _readOnly: {
-            bg: 'input.bg.readOnly',
-          },
-        },
-        errorText: {
-          fontSize: 'inherit',
-          lineHeight: 'inherit',
-        },
-      },
-    },
-    {
-      size: '2xl',
-      floating: true,
-      css: {
-        label: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          // 20px = scrollbar width
-          // 4px = border width
-          width: 'calc(100% - 4px - 20px)',
-          padding: '16px 16px 0px 16px',
-          textStyle: 'xs',
-          borderTopRightRadius: '0px',
-          borderBottomRightRadius: '0px',
-          _peerPlaceholderShown: {
-            textStyle: 'md',
-          },
-          _peerFocusVisible: {
-            textStyle: 'xs',
-          },
-          _readOnly: {
-            bg: 'input.bg.readOnly',
-          },
-        },
-        errorText: {
-          fontSize: 'inherit',
-          lineHeight: 'inherit',
-        },
-      },
-    },
-  ],
-
-  defaultVariants: {
-    floating: false,
-    orientation: 'vertical',
-  },
-});