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

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

@@ -1,104 +0,0 @@
-import { defineSlotRecipe as e } from "@chakra-ui/react";
-const i = e({
-  slots: ["content", "item", "itemText", "itemGroupLabel", "indicator", "itemCommand", "separator"],
-  base: {
-    content: {
-      outline: 0,
-      bg: "popover.bg",
-      boxShadow: "popover",
-      color: "initial",
-      maxHeight: "var(--available-height)",
-      "--menu-z-index": "zIndex.dropdown",
-      zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
-      borderRadius: "md",
-      overflow: "hidden",
-      overflowY: "auto",
-      _open: {
-        animationStyle: "slide-fade-in",
-        animationDuration: "fast"
-      },
-      _closed: {
-        animationStyle: "slide-fade-out",
-        animationDuration: "faster"
-      }
-    },
-    item: {
-      textDecoration: "none",
-      color: "initial",
-      userSelect: "none",
-      borderRadius: "none",
-      width: "100%",
-      display: "flex",
-      cursor: "pointer",
-      alignItems: "center",
-      textAlign: "start",
-      position: "relative",
-      flex: "0 0 auto",
-      outline: 0,
-      _disabled: {
-        layerStyle: "disabled"
-      }
-    },
-    itemText: {
-      flex: "1"
-    },
-    itemGroupLabel: {
-      px: "2",
-      py: "1.5",
-      fontWeight: "semibold",
-      textStyle: "sm"
-    },
-    indicator: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: "0"
-    },
-    itemCommand: {
-      opacity: "0.6",
-      textStyle: "xs",
-      ms: "auto",
-      ps: "4",
-      letterSpacing: "widest"
-    },
-    separator: {
-      height: "1px",
-      bg: "bg.muted",
-      my: "1",
-      mx: "-1"
-    }
-  },
-  variants: {
-    variant: {
-      subtle: {
-        item: {
-          _highlighted: {
-            bg: "menu.item.bg.highlighted"
-          }
-        }
-      }
-    },
-    size: {
-      md: {
-        content: {
-          minW: "150px",
-          py: "2",
-          px: "0"
-        },
-        item: {
-          gap: "2",
-          textStyle: "md",
-          py: "2",
-          px: "4"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "subtle"
-  }
-});
-export {
-  i as recipe
-};

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

@@ -1,105 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'content', 'item', 'itemText', 'itemGroupLabel', 'indicator', 'itemCommand', 'separator' ],
-  base: {
-    content: {
-      outline: 0,
-      bg: 'popover.bg',
-      boxShadow: 'popover',
-      color: 'initial',
-      maxHeight: 'var(--available-height)',
-      '--menu-z-index': 'zIndex.dropdown',
-      zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
-      borderRadius: 'md',
-      overflow: 'hidden',
-      overflowY: 'auto',
-      _open: {
-        animationStyle: 'slide-fade-in',
-        animationDuration: 'fast',
-      },
-      _closed: {
-        animationStyle: 'slide-fade-out',
-        animationDuration: 'faster',
-      },
-    },
-    item: {
-      textDecoration: 'none',
-      color: 'initial',
-      userSelect: 'none',
-      borderRadius: 'none',
-      width: '100%',
-      display: 'flex',
-      cursor: 'pointer',
-      alignItems: 'center',
-      textAlign: 'start',
-      position: 'relative',
-      flex: '0 0 auto',
-      outline: 0,
-      _disabled: {
-        layerStyle: 'disabled',
-      },
-    },
-    itemText: {
-      flex: '1',
-    },
-    itemGroupLabel: {
-      px: '2',
-      py: '1.5',
-      fontWeight: 'semibold',
-      textStyle: 'sm',
-    },
-    indicator: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexShrink: '0',
-    },
-    itemCommand: {
-      opacity: '0.6',
-      textStyle: 'xs',
-      ms: 'auto',
-      ps: '4',
-      letterSpacing: 'widest',
-    },
-    separator: {
-      height: '1px',
-      bg: 'bg.muted',
-      my: '1',
-      mx: '-1',
-    },
-  },
-
-  variants: {
-    variant: {
-      subtle: {
-        item: {
-          _highlighted: {
-            bg: 'menu.item.bg.highlighted',
-          },
-        },
-      },
-    },
-
-    size: {
-      md: {
-        content: {
-          minW: '150px',
-          py: '2',
-          px: '0',
-        },
-        item: {
-          gap: '2',
-          textStyle: 'md',
-          py: '2',
-          px: '4',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'subtle',
-  },
-});

package/dist/theme/recipes/pin-input.recipe.js

@@ -1,34 +0,0 @@
-import { defineSlotRecipe as r } from "@chakra-ui/react";
-import { mapEntries as a } from "../utils/entries.js";
-import { recipe as i } from "./input.recipe.js";
-const { variants: n } = i, m = r({
-  slots: ["input"],
-  base: {
-    input: {
-      ...i.base,
-      textAlign: "center",
-      width: "var(--input-height)"
-    }
-  },
-  variants: {
-    size: {
-      md: {
-        input: {
-          boxSize: 10,
-          borderRadius: "base"
-        }
-      }
-    },
-    variant: a(n.variant, (t, e) => [
-      t,
-      { input: e }
-    ])
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "outline"
-  }
-});
-export {
-  m as recipe
-};

package/dist/theme/recipes/pin-input.recipe.ts

@@ -1,35 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-import { mapEntries } from '../utils/entries';
-import { recipe as inputRecipe } from './input.recipe';
-
-const { variants } = inputRecipe;
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'input' ],
-  base: {
-    input: {
-      ...inputRecipe.base,
-      textAlign: 'center',
-      width: 'var(--input-height)',
-    },
-  },
-  variants: {
-    size: {
-      md: {
-        input: {
-          boxSize: 10,
-          borderRadius: 'base',
-        },
-      },
-    },
-    variant: mapEntries(variants!.variant, (key, value) => [
-      key,
-      { input: value },
-    ]),
-  },
-  defaultVariants: {
-    size: 'md',
-    variant: 'outline',
-  },
-});

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

@@ -1,72 +0,0 @@
-import { defineSlotRecipe as o } from "@chakra-ui/react";
-const r = o({
-  slots: ["content", "header", "body", "footer", "arrow", "arrowTip"],
-  base: {
-    content: {
-      position: "relative",
-      display: "flex",
-      flexDirection: "column",
-      textStyle: "sm",
-      "--popover-bg": "colors.popover.bg",
-      bg: "var(--popover-bg)",
-      boxShadow: "popover",
-      boxShadowColor: "colors.popover.shadow",
-      "--popover-mobile-size": "calc(100dvw - 1rem)",
-      width: {
-        base: "min(var(--popover-mobile-size), var(--popover-size))",
-        lg: "fit-content"
-      },
-      borderWidth: "0",
-      borderRadius: "md",
-      "--popover-z-index": "zIndex.popover",
-      zIndex: "calc(var(--popover-z-index) + var(--layer-index, 0))",
-      outline: "0",
-      transformOrigin: "var(--transform-origin)",
-      _open: {
-        animationStyle: "scale-fade-in",
-        animationDuration: "fast"
-      },
-      _closed: {
-        animationStyle: "scale-fade-out",
-        animationDuration: "faster"
-      }
-    },
-    header: {
-      paddingInline: "var(--popover-padding)",
-      paddingTop: "var(--popover-padding)"
-    },
-    body: {
-      padding: "var(--popover-padding)",
-      flex: "1"
-    },
-    footer: {
-      display: "flex",
-      alignItems: "center",
-      paddingInline: "var(--popover-padding)",
-      paddingBottom: "var(--popover-padding)"
-    },
-    arrow: {
-      "--arrow-size": "sizes.3",
-      "--arrow-background": "var(--popover-bg)"
-    },
-    arrowTip: {
-      borderTopWidth: "1px",
-      borderInlineStartWidth: "1px"
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        content: {
-          "--popover-padding": "spacing.4"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "sm"
-  }
-});
-export {
-  r as recipe
-};

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

@@ -1,70 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'content', 'header', 'body', 'footer', 'arrow', 'arrowTip' ],
-  base: {
-    content: {
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      textStyle: 'sm',
-      '--popover-bg': 'colors.popover.bg',
-      bg: 'var(--popover-bg)',
-      boxShadow: 'popover',
-      boxShadowColor: 'colors.popover.shadow',
-      '--popover-mobile-size': 'calc(100dvw - 1rem)',
-      width: {
-        base: 'min(var(--popover-mobile-size), var(--popover-size))',
-        lg: 'fit-content',
-      },
-      borderWidth: '0',
-      borderRadius: 'md',
-      '--popover-z-index': 'zIndex.popover',
-      zIndex: 'calc(var(--popover-z-index) + var(--layer-index, 0))',
-      outline: '0',
-      transformOrigin: 'var(--transform-origin)',
-      _open: {
-        animationStyle: 'scale-fade-in',
-        animationDuration: 'fast',
-      },
-      _closed: {
-        animationStyle: 'scale-fade-out',
-        animationDuration: 'faster',
-      },
-    },
-    header: {
-      paddingInline: 'var(--popover-padding)',
-      paddingTop: 'var(--popover-padding)',
-    },
-    body: {
-      padding: 'var(--popover-padding)',
-      flex: '1',
-    },
-    footer: {
-      display: 'flex',
-      alignItems: 'center',
-      paddingInline: 'var(--popover-padding)',
-      paddingBottom: 'var(--popover-padding)',
-    },
-    arrow: {
-      '--arrow-size': 'sizes.3',
-      '--arrow-background': 'var(--popover-bg)',
-    },
-    arrowTip: {
-      borderTopWidth: '1px',
-      borderInlineStartWidth: '1px',
-    },
-  },
-  variants: {
-    size: {
-      sm: {
-        content: {
-          '--popover-padding': 'spacing.4',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'sm',
-  },
-});

package/dist/theme/recipes/progress-circle.recipe.js

@@ -1,74 +0,0 @@
-import { defineSlotRecipe as e } from "@chakra-ui/react";
-const t = e({
-  slots: ["root", "circle", "circleTrack", "circleRange", "label", "valueText"],
-  base: {
-    root: {
-      display: "inline-flex",
-      textStyle: "sm",
-      position: "relative"
-    },
-    circle: {
-      _indeterminate: {
-        animation: "spin 2s linear infinite"
-      }
-    },
-    circleTrack: {
-      "--track-color": "colors.progressCircle.trackColor",
-      stroke: "var(--track-color)"
-    },
-    circleRange: {
-      stroke: "blue.500",
-      transitionProperty: "stroke-dasharray",
-      transitionDuration: "0.6s",
-      _indeterminate: {
-        animation: "circular-progress 1.5s linear infinite"
-      }
-    },
-    label: {
-      display: "inline-flex"
-    },
-    valueText: {
-      lineHeight: "1",
-      fontWeight: "medium",
-      letterSpacing: "tight",
-      fontVariantNumeric: "tabular-nums"
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        circle: {
-          "--size": "20px",
-          "--thickness": "2px"
-        },
-        valueText: {
-          textStyle: "xs"
-        }
-      },
-      md: {
-        circle: {
-          "--size": "32px",
-          "--thickness": "3px"
-        },
-        valueText: {
-          textStyle: "xs"
-        }
-      },
-      lg: {
-        circle: {
-          "--size": "80px",
-          "--thickness": "8px"
-        },
-        valueText: {
-          textStyle: "sm"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-export {
-  t as recipe
-};

package/dist/theme/recipes/progress-circle.recipe.ts

@@ -1,74 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'circle', 'circleTrack', 'circleRange', 'label', 'valueText' ],
-  base: {
-    root: {
-      display: 'inline-flex',
-      textStyle: 'sm',
-      position: 'relative',
-    },
-    circle: {
-      _indeterminate: {
-        animation: 'spin 2s linear infinite',
-      },
-    },
-    circleTrack: {
-      '--track-color': 'colors.progressCircle.trackColor',
-      stroke: 'var(--track-color)',
-    },
-    circleRange: {
-      stroke: 'blue.500',
-      transitionProperty: 'stroke-dasharray',
-      transitionDuration: '0.6s',
-      _indeterminate: {
-        animation: 'circular-progress 1.5s linear infinite',
-      },
-    },
-    label: {
-      display: 'inline-flex',
-    },
-    valueText: {
-      lineHeight: '1',
-      fontWeight: 'medium',
-      letterSpacing: 'tight',
-      fontVariantNumeric: 'tabular-nums',
-    },
-  },
-
-  variants: {
-    size: {
-      sm: {
-        circle: {
-          '--size': '20px',
-          '--thickness': '2px',
-        },
-        valueText: {
-          textStyle: 'xs',
-        },
-      },
-      md: {
-        circle: {
-          '--size': '32px',
-          '--thickness': '3px',
-        },
-        valueText: {
-          textStyle: 'xs',
-        },
-      },
-      lg: {
-        circle: {
-          '--size': '80px',
-          '--thickness': '8px',
-        },
-        valueText: {
-          textStyle: 'sm',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-});

package/dist/theme/recipes/radio-group.recipe.js

@@ -1,69 +0,0 @@
-import { defineSlotRecipe as a } from "@chakra-ui/react";
-import { recipe as e } from "./radiomark.recipe.js";
-var t, i, o, r;
-const s = a({
-  slots: ["item", "itemControl", "itemText", "root"],
-  base: {
-    root: {
-      display: "flex"
-    },
-    item: {
-      display: "inline-flex",
-      alignItems: "center",
-      position: "relative",
-      fontWeight: "normal",
-      cursor: "pointer",
-      _disabled: {
-        cursor: "disabled"
-      },
-      _readOnly: {
-        cursor: "default"
-      }
-    },
-    itemControl: e.base,
-    itemText: {
-      userSelect: "none",
-      textStyle: "md",
-      _disabled: {
-        opacity: "control.disabled"
-      }
-    }
-  },
-  variants: {
-    variant: {
-      solid: {
-        itemControl: (i = (t = e.variants) == null ? void 0 : t.variant) == null ? void 0 : i.solid
-      }
-    },
-    size: {
-      md: {
-        item: { textStyle: "md", gap: "2" },
-        itemControl: (r = (o = e.variants) == null ? void 0 : o.size) == null ? void 0 : r.md
-      }
-    },
-    orientation: {
-      vertical: {
-        root: {
-          flexDirection: "column",
-          alignItems: "flex-start",
-          rowGap: "12px"
-        }
-      },
-      horizontal: {
-        root: {
-          flexDirection: "row",
-          alignItems: "center",
-          columnGap: "32px"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    variant: "solid",
-    orientation: "vertical"
-  }
-});
-export {
-  s as recipe
-};

package/dist/theme/recipes/radio-group.recipe.ts

@@ -1,73 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-import { recipe as radiomarkRecipe } from './radiomark.recipe';
-
-export const recipe = defineSlotRecipe({
-  slots: [ 'item', 'itemControl', 'itemText', 'root' ],
-  base: {
-    root: {
-      display: 'flex',
-    },
-
-    item: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      position: 'relative',
-      fontWeight: 'normal',
-      cursor: 'pointer',
-      _disabled: {
-        cursor: 'disabled',
-      },
-      _readOnly: {
-        cursor: 'default',
-      },
-    },
-
-    itemControl: radiomarkRecipe.base,
-
-    itemText: {
-      userSelect: 'none',
-      textStyle: 'md',
-      _disabled: {
-        opacity: 'control.disabled',
-      },
-    },
-  },
-  variants: {
-    variant: {
-      solid: {
-        itemControl: radiomarkRecipe.variants?.variant?.solid,
-      },
-    },
-
-    size: {
-      md: {
-        item: { textStyle: 'md', gap: '2' },
-        itemControl: radiomarkRecipe.variants?.size?.md,
-      },
-    },
-
-    orientation: {
-      vertical: {
-        root: {
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-          rowGap: '12px',
-        },
-      },
-      horizontal: {
-        root: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          columnGap: '32px',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'solid',
-    orientation: 'vertical',
-  },
-});