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

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

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

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

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

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

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