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

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

@@ -1,73 +0,0 @@
-import { defineRecipe as e } from "@chakra-ui/react";
-const o = e({
-  className: "chakra-checkmark",
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: "0",
-    color: "white",
-    borderWidth: "2px",
-    borderColor: "transparent",
-    focusVisibleRing: "outside",
-    _icon: {
-      boxSize: "full"
-    },
-    _disabled: {
-      opacity: "control.disabled"
-    }
-  },
-  variants: {
-    size: {
-      xs: {
-        boxSize: "3",
-        borderRadius: "2px"
-      },
-      sm: {
-        boxSize: "4",
-        borderRadius: "2px"
-      },
-      md: {
-        boxSize: "5",
-        borderRadius: "sm"
-      }
-    },
-    variant: {
-      solid: {
-        borderColor: "checkbox.control.border",
-        _hover: {
-          borderColor: "checkbox.control.border.hover"
-        },
-        _readOnly: {
-          borderColor: "checkbox.control.border.readOnly",
-          _hover: {
-            borderColor: "checkbox.control.border.readOnly"
-          },
-          "&:is([data-state=checked], [data-state=indeterminate])": {
-            bg: "checkbox.control.border.readOnly",
-            color: "gray.500",
-            _hover: {
-              bg: "checkbox.control.border.readOnly"
-            }
-          }
-        },
-        "&:is([data-state=checked], [data-state=indeterminate])": {
-          bg: "blue.500",
-          color: "white",
-          borderColor: "blue.500",
-          _hover: {
-            bg: "blue.400",
-            borderColor: "blue.400"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    size: "md"
-  }
-});
-export {
-  o as recipe
-};

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

@@ -1,73 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react';
-
-export const recipe = defineRecipe({
-  className: 'chakra-checkmark',
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: '0',
-    color: 'white',
-    borderWidth: '2px',
-    borderColor: 'transparent',
-    focusVisibleRing: 'outside',
-    _icon: {
-      boxSize: 'full',
-    },
-    _disabled: {
-      opacity: 'control.disabled',
-    },
-  },
-  variants: {
-    size: {
-      xs: {
-        boxSize: '3',
-        borderRadius: '2px',
-      },
-      sm: {
-        boxSize: '4',
-        borderRadius: '2px',
-      },
-      md: {
-        boxSize: '5',
-        borderRadius: 'sm',
-      },
-    },
-
-    variant: {
-      solid: {
-        borderColor: 'checkbox.control.border',
-        _hover: {
-          borderColor: 'checkbox.control.border.hover',
-        },
-        _readOnly: {
-          borderColor: 'checkbox.control.border.readOnly',
-          _hover: {
-            borderColor: 'checkbox.control.border.readOnly',
-          },
-          '&:is([data-state=checked], [data-state=indeterminate])': {
-            bg: 'checkbox.control.border.readOnly',
-            color: 'gray.500',
-            _hover: {
-              bg: 'checkbox.control.border.readOnly',
-            },
-          },
-        },
-        '&:is([data-state=checked], [data-state=indeterminate])': {
-          bg: 'blue.500',
-          color: 'white',
-          borderColor: 'blue.500',
-          _hover: {
-            bg: 'blue.400',
-            borderColor: 'blue.400',
-          },
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-  },
-});

package/dist/theme/recipes/close-button.recipe.js

@@ -1,39 +0,0 @@
-import { defineRecipe as e } from "@chakra-ui/react";
-const o = e({
-  base: {
-    display: "flex",
-    gap: 0,
-    borderRadius: "sm",
-    overflow: "hidden",
-    _disabled: {
-      opacity: "control.disabled"
-    },
-    minWidth: "auto"
-  },
-  variants: {
-    visual: {
-      plain: {
-        bg: "transparent",
-        color: "closeButton.fg",
-        border: "none",
-        "&:not([data-loading-skeleton])": {
-          bg: "transparent"
-        },
-        _hover: {
-          bg: "transparent",
-          color: "link.primary.hover"
-        }
-      }
-    },
-    size: {
-      md: { boxSize: 5 }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    visual: "plain"
-  }
-});
-export {
-  o as recipe
-};

package/dist/theme/recipes/close-button.recipe.ts

@@ -1,37 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react';
-
-export const recipe = defineRecipe({
-  base: {
-    display: 'flex',
-    gap: 0,
-    borderRadius: 'sm',
-    overflow: 'hidden',
-    _disabled: {
-      opacity: 'control.disabled',
-    },
-    minWidth: 'auto',
-  },
-  variants: {
-    visual: {
-      plain: {
-        bg: 'transparent',
-        color: 'closeButton.fg',
-        border: 'none',
-        '&:not([data-loading-skeleton])': {
-          bg: 'transparent',
-        },
-        _hover: {
-          bg: 'transparent',
-          color: 'link.primary.hover',
-        },
-      },
-    },
-    size: {
-      md: { boxSize: 5 },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    visual: 'plain',
-  },
-});

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

@@ -1,210 +0,0 @@
-import { defineSlotRecipe as e } from "@chakra-ui/react";
-const i = e({
-  slots: ["backdrop", "positioner", "content", "header", "body", "footer", "title", "description"],
-  base: {
-    backdrop: {
-      bg: "blackAlpha.800",
-      pos: "fixed",
-      left: 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",
-      left: 0,
-      top: 0,
-      "--dialog-z-index": "zIndex.modal",
-      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      justifyContent: "center",
-      overscrollBehaviorY: "none"
-    },
-    content: {
-      display: "flex",
-      flexDirection: "column",
-      position: "relative",
-      width: "100%",
-      padding: 6,
-      outline: 0,
-      textStyle: "md",
-      my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.modal",
-      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
-      bg: "dialog.bg",
-      color: "dialog.fg",
-      boxShadow: "size.lg",
-      borderRadius: "xl",
-      _open: {
-        animationDuration: "moderate"
-      },
-      _closed: {
-        animationDuration: "faster"
-      }
-    },
-    header: {
-      flex: 0,
-      p: 0,
-      mb: 2,
-      display: "flex",
-      alignItems: "center",
-      columnGap: 2,
-      minH: "40px"
-    },
-    body: {
-      flex: "1",
-      p: 0
-    },
-    footer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      gap: "6",
-      p: "0",
-      mt: "6"
-    },
-    title: {
-      textStyle: "heading.lg",
-      fontWeight: "500"
-    },
-    description: {
-      color: "dialog.fg"
-    }
-  },
-  variants: {
-    placement: {
-      center: {
-        positioner: {
-          alignItems: "center"
-        },
-        content: {
-          "--dialog-base-margin": "auto",
-          mx: "auto"
-        }
-      },
-      top: {
-        positioner: {
-          alignItems: "flex-start"
-        },
-        content: {
-          "--dialog-base-margin": "spacing.16",
-          mx: "auto"
-        }
-      },
-      bottom: {
-        positioner: {
-          alignItems: "flex-end"
-        },
-        content: {
-          "--dialog-base-margin": "spacing.16",
-          mx: "auto"
-        }
-      }
-    },
-    scrollBehavior: {
-      inside: {
-        positioner: {
-          overflow: "hidden"
-        },
-        content: {
-          // source code has minH: 'auto', but I am not sure why
-          // anyway it will override the minH from the "full" size variant
-          // minH: 'auto',
-          maxH: "calc(100% - 7.5rem)"
-        },
-        body: {
-          overflow: "auto"
-        }
-      },
-      outside: {
-        positioner: {
-          overflow: "auto",
-          pointerEvents: "auto"
-        }
-      }
-    },
-    size: {
-      sm: {
-        content: {
-          maxW: "400px"
-        }
-      },
-      md: {
-        content: {
-          maxW: "728px"
-        }
-      },
-      cover: {
-        positioner: {
-          padding: "10"
-        },
-        content: {
-          width: "100%",
-          height: "100%",
-          "--dialog-margin": "0"
-        }
-      },
-      full: {
-        content: {
-          maxW: "100vw",
-          minH: "100vh",
-          "--dialog-margin": "0",
-          borderRadius: "0"
-        }
-      }
-    },
-    motionPreset: {
-      scale: {
-        content: {
-          _open: { animationName: "scale-in, fade-in" },
-          _closed: { animationName: "scale-out, fade-out" }
-        }
-      },
-      "slide-in-bottom": {
-        content: {
-          _open: { animationName: "slide-from-bottom, fade-in" },
-          _closed: { animationName: "slide-to-bottom, fade-out" }
-        }
-      },
-      "slide-in-top": {
-        content: {
-          _open: { animationName: "slide-from-top, fade-in" },
-          _closed: { animationName: "slide-to-top, fade-out" }
-        }
-      },
-      "slide-in-left": {
-        content: {
-          _open: { animationName: "slide-from-left, fade-in" },
-          _closed: { animationName: "slide-to-left, fade-out" }
-        }
-      },
-      "slide-in-right": {
-        content: {
-          _open: { animationName: "slide-from-right, fade-in" },
-          _closed: { animationName: "slide-to-right, fade-out" }
-        }
-      },
-      none: {}
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    scrollBehavior: "inside",
-    placement: "center",
-    motionPreset: "scale"
-  }
-});
-export {
-  i as recipe
-};

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

@@ -1,213 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'backdrop', 'positioner', 'content', 'header', 'body', 'footer', 'title', 'description' ],
-  base: {
-    backdrop: {
-      bg: 'blackAlpha.800',
-      pos: 'fixed',
-      left: 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',
-      left: 0,
-      top: 0,
-      '--dialog-z-index': 'zIndex.modal',
-      zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
-      justifyContent: 'center',
-      overscrollBehaviorY: 'none',
-    },
-    content: {
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
-      width: '100%',
-      padding: 6,
-      outline: 0,
-      textStyle: 'md',
-      my: 'var(--dialog-margin, var(--dialog-base-margin))',
-      '--dialog-z-index': 'zIndex.modal',
-      zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
-      bg: 'dialog.bg',
-      color: 'dialog.fg',
-      boxShadow: 'size.lg',
-      borderRadius: 'xl',
-      _open: {
-        animationDuration: 'moderate',
-      },
-      _closed: {
-        animationDuration: 'faster',
-      },
-    },
-    header: {
-      flex: 0,
-      p: 0,
-      mb: 2,
-      display: 'flex',
-      alignItems: 'center',
-      columnGap: 2,
-      minH: '40px',
-    },
-    body: {
-      flex: '1',
-      p: 0,
-    },
-    footer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      gap: '6',
-      p: '0',
-      mt: '6',
-    },
-    title: {
-      textStyle: 'heading.lg',
-      fontWeight: '500',
-    },
-    description: {
-      color: 'dialog.fg',
-    },
-  },
-
-  variants: {
-    placement: {
-      center: {
-        positioner: {
-          alignItems: 'center',
-        },
-        content: {
-          '--dialog-base-margin': 'auto',
-          mx: 'auto',
-        },
-      },
-      top: {
-        positioner: {
-          alignItems: 'flex-start',
-        },
-        content: {
-          '--dialog-base-margin': 'spacing.16',
-          mx: 'auto',
-        },
-      },
-      bottom: {
-        positioner: {
-          alignItems: 'flex-end',
-        },
-        content: {
-          '--dialog-base-margin': 'spacing.16',
-          mx: 'auto',
-        },
-      },
-    },
-
-    scrollBehavior: {
-      inside: {
-        positioner: {
-          overflow: 'hidden',
-        },
-        content: {
-          // source code has minH: 'auto', but I am not sure why
-          // anyway it will override the minH from the "full" size variant
-          // minH: 'auto',
-          maxH: 'calc(100% - 7.5rem)',
-        },
-        body: {
-          overflow: 'auto',
-        },
-      },
-      outside: {
-        positioner: {
-          overflow: 'auto',
-          pointerEvents: 'auto',
-        },
-      },
-    },
-
-    size: {
-      sm: {
-        content: {
-          maxW: '400px',
-        },
-      },
-      md: {
-        content: {
-          maxW: '728px',
-        },
-      },
-      cover: {
-        positioner: {
-          padding: '10',
-        },
-        content: {
-          width: '100%',
-          height: '100%',
-          '--dialog-margin': '0',
-        },
-      },
-      full: {
-        content: {
-          maxW: '100vw',
-          minH: '100vh',
-          '--dialog-margin': '0',
-          borderRadius: '0',
-        },
-      },
-    },
-
-    motionPreset: {
-      scale: {
-        content: {
-          _open: { animationName: 'scale-in, fade-in' },
-          _closed: { animationName: 'scale-out, fade-out' },
-        },
-      },
-      'slide-in-bottom': {
-        content: {
-          _open: { animationName: 'slide-from-bottom, fade-in' },
-          _closed: { animationName: 'slide-to-bottom, fade-out' },
-        },
-      },
-      'slide-in-top': {
-        content: {
-          _open: { animationName: 'slide-from-top, fade-in' },
-          _closed: { animationName: 'slide-to-top, fade-out' },
-        },
-      },
-      'slide-in-left': {
-        content: {
-          _open: { animationName: 'slide-from-left, fade-in' },
-          _closed: { animationName: 'slide-to-left, fade-out' },
-        },
-      },
-      'slide-in-right': {
-        content: {
-          _open: { animationName: 'slide-from-right, fade-in' },
-          _closed: { animationName: 'slide-to-right, fade-out' },
-        },
-      },
-      none: {},
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    scrollBehavior: 'inside',
-    placement: 'center',
-    motionPreset: 'scale',
-  },
-});