@blockle/blocks 0.20.0-alpha1 → 1.0.0

package/dist/themes/momotaro/components/slider.css.cjs

@@ -1,89 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
-const trackBackground = css.createVar("trackBackground");
-const filledTrackBackground = css.createVar("filledTrackBackground");
-const thumbBackground = css.createVar("thumbBackground");
-const thumbActive = css.createVar("thumbActive");
-const slider = lib_theme_makeComponentTheme_cjs.makeComponentTheme("slider", {
-  base: lib_css_style_style_cjs.style({
-    blockSize: "20px"
-  }),
-  track: lib_css_style_style_cjs.style({
-    blockSize: "4px",
-    backgroundColor: trackBackground,
-    borderRadius: "small"
-  }),
-  filledTrack: lib_css_style_style_cjs.style({
-    backgroundColor: filledTrackBackground
-  }),
-  thumb: lib_css_style_style_cjs.style([{
-    backgroundColor: thumbBackground,
-    borderRadius: "50%",
-    height: "16px",
-    width: "16px",
-    boxShadow: `0 0 0 0px color-mix(in srgb,  ${lib_theme_vars_css_cjs.vars.color.primaryLight}, transparent 0%)`,
-    vars: {
-      [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${lib_theme_vars_css_cjs.vars.color.primaryLight}, transparent 20%)`
-    },
-    ":hover": {
-      boxShadow: thumbActive
-    },
-    ":focus-visible": {
-      boxShadow: thumbActive
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "box-shadow 0.2s"
-      }
-    }
-  }, themes_momotaro_components_helpers_css_cjs.focusable]),
-  variants: {
-    size: {
-      small: lib_css_style_style_cjs.style({
-        inlineSize: "100px"
-      }),
-      medium: lib_css_style_style_cjs.style({
-        inlineSize: "200px"
-      }),
-      large: lib_css_style_style_cjs.style({
-        inlineSize: "300px"
-      })
-    },
-    colorScheme: {
-      primary: lib_css_style_style_cjs.style({
-        vars: {
-          [trackBackground]: lib_theme_vars_css_cjs.vars.color.primaryLight,
-          [filledTrackBackground]: lib_theme_vars_css_cjs.vars.color.primary,
-          [thumbBackground]: lib_theme_vars_css_cjs.vars.color.primary
-        }
-      }),
-      secondary: lib_css_style_style_cjs.style({
-        vars: {
-          [trackBackground]: lib_theme_vars_css_cjs.vars.color.primaryLight,
-          [filledTrackBackground]: lib_theme_vars_css_cjs.vars.color.secondary,
-          [thumbBackground]: lib_theme_vars_css_cjs.vars.color.secondary
-        }
-      })
-    },
-    disabled: lib_css_style_style_cjs.style({
-      pointerEvents: "none",
-      vars: {
-        [trackBackground]: "#c0c0c0",
-        [filledTrackBackground]: "#ccc",
-        [thumbBackground]: "#c0c0c0"
-      }
-    })
-  },
-  defaultVariants: {
-    size: "medium",
-    colorScheme: "primary"
-  }
-});
-fileScope.endFileScope();
-exports.slider = slider;

package/dist/themes/momotaro/components/slider.css.mjs

@@ -1,90 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar } from "@vanilla-extract/css";
-import { style } from "../../../lib/css/style/style.mjs";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { vars } from "../../../lib/theme/vars.css.mjs";
-import { focusable } from "./helpers.css.mjs";
-setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
-const trackBackground = createVar("trackBackground");
-const filledTrackBackground = createVar("filledTrackBackground");
-const thumbBackground = createVar("thumbBackground");
-const thumbActive = createVar("thumbActive");
-const slider = makeComponentTheme("slider", {
-  base: style({
-    blockSize: "20px"
-  }),
-  track: style({
-    blockSize: "4px",
-    backgroundColor: trackBackground,
-    borderRadius: "small"
-  }),
-  filledTrack: style({
-    backgroundColor: filledTrackBackground
-  }),
-  thumb: style([{
-    backgroundColor: thumbBackground,
-    borderRadius: "50%",
-    height: "16px",
-    width: "16px",
-    boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 0%)`,
-    vars: {
-      [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars.color.primaryLight}, transparent 20%)`
-    },
-    ":hover": {
-      boxShadow: thumbActive
-    },
-    ":focus-visible": {
-      boxShadow: thumbActive
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "box-shadow 0.2s"
-      }
-    }
-  }, focusable]),
-  variants: {
-    size: {
-      small: style({
-        inlineSize: "100px"
-      }),
-      medium: style({
-        inlineSize: "200px"
-      }),
-      large: style({
-        inlineSize: "300px"
-      })
-    },
-    colorScheme: {
-      primary: style({
-        vars: {
-          [trackBackground]: vars.color.primaryLight,
-          [filledTrackBackground]: vars.color.primary,
-          [thumbBackground]: vars.color.primary
-        }
-      }),
-      secondary: style({
-        vars: {
-          [trackBackground]: vars.color.primaryLight,
-          [filledTrackBackground]: vars.color.secondary,
-          [thumbBackground]: vars.color.secondary
-        }
-      })
-    },
-    disabled: style({
-      pointerEvents: "none",
-      vars: {
-        [trackBackground]: "#c0c0c0",
-        [filledTrackBackground]: "#ccc",
-        [thumbBackground]: "#c0c0c0"
-      }
-    })
-  },
-  defaultVariants: {
-    size: "medium",
-    colorScheme: "primary"
-  }
-});
-endFileScope();
-export {
-  slider
-};

package/dist/themes/momotaro/components/spinner.css.cjs

@@ -1,43 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
-const spinAnimation = css.keyframes({
-  "0%": {
-    transform: "rotate(0deg)"
-  },
-  "100%": {
-    transform: "rotate(360deg)"
-  }
-}, "spinAnimation");
-const spinner = lib_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
-  base: css.style({
-    aspectRatio: "1 / 1",
-    overflow: "hidden",
-    borderRadius: "50%",
-    borderWidth: "3px",
-    borderStyle: "solid",
-    borderColor: "currentColor transparent currentColor transparent",
-    animation: `${spinAnimation} 1.2s linear infinite`
-  }, "spinner_base"),
-  variants: {
-    // note: colors are handled by atoms
-    size: {
-      small: css.style({
-        width: 16
-      }, "spinner_variants_size_small"),
-      medium: css.style({
-        width: 24
-      }, "spinner_variants_size_medium"),
-      large: css.style({
-        width: 32
-      }, "spinner_variants_size_large")
-    }
-  },
-  defaultVariants: {
-    size: "small"
-  }
-});
-fileScope.endFileScope();
-exports.spinner = spinner;

package/dist/themes/momotaro/components/spinner.css.mjs

@@ -1,44 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, keyframes } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
-const spinAnimation = keyframes({
-  "0%": {
-    transform: "rotate(0deg)"
-  },
-  "100%": {
-    transform: "rotate(360deg)"
-  }
-}, "spinAnimation");
-const spinner = makeComponentTheme("spinner", {
-  base: style({
-    aspectRatio: "1 / 1",
-    overflow: "hidden",
-    borderRadius: "50%",
-    borderWidth: "3px",
-    borderStyle: "solid",
-    borderColor: "currentColor transparent currentColor transparent",
-    animation: `${spinAnimation} 1.2s linear infinite`
-  }, "spinner_base"),
-  variants: {
-    // note: colors are handled by atoms
-    size: {
-      small: style({
-        width: 16
-      }, "spinner_variants_size_small"),
-      medium: style({
-        width: 24
-      }, "spinner_variants_size_medium"),
-      large: style({
-        width: 32
-      }, "spinner_variants_size_large")
-    }
-  },
-  defaultVariants: {
-    size: "small"
-  }
-});
-endFileScope();
-export {
-  spinner
-};

package/dist/themes/momotaro/components/switch.css.cjs

@@ -1,58 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
-const activeScaleFactor = css.createVar("activeScaleFactor");
-const switchTheme = lib_theme_makeComponentTheme_cjs.makeComponentTheme("switch", {
-  base: lib_css_style_style_cjs.style([{
-    width: 52,
-    height: 32,
-    borderRadius: "xlarge",
-    backgroundColor: "textLight",
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color 120ms linear, box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
-      }
-    },
-    selectors: {
-      '&[data-checked="true"]': {
-        backgroundColor: lib_theme_vars_css_cjs.vars.color.secondary
-      }
-    },
-    // Scale the switch when it's `:active`
-    vars: {
-      [activeScaleFactor]: "1"
-    },
-    ":active": {
-      vars: {
-        [activeScaleFactor]: "0.96"
-      }
-    }
-  }, themes_momotaro_components_helpers_css_cjs.focusable]),
-  slider: lib_css_style_style_cjs.style({
-    width: 24,
-    height: 24,
-    top: 4,
-    left: 4,
-    transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
-    position: "absolute",
-    backgroundColor: "white",
-    borderRadius: "xlarge",
-    selectors: {
-      '&[data-checked="true"]': {
-        transform: `translateX(20px) scale(${activeScaleFactor})`
-      }
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "transform 120ms ease-out"
-      }
-    }
-  })
-});
-fileScope.endFileScope();
-exports.switchTheme = switchTheme;

package/dist/themes/momotaro/components/switch.css.mjs

@@ -1,59 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar } from "@vanilla-extract/css";
-import { style } from "../../../lib/css/style/style.mjs";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { vars } from "../../../lib/theme/vars.css.mjs";
-import { focusable } from "./helpers.css.mjs";
-setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
-const activeScaleFactor = createVar("activeScaleFactor");
-const switchTheme = makeComponentTheme("switch", {
-  base: style([{
-    width: 52,
-    height: 32,
-    borderRadius: "xlarge",
-    backgroundColor: "textLight",
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
-      }
-    },
-    selectors: {
-      '&[data-checked="true"]': {
-        backgroundColor: vars.color.secondary
-      }
-    },
-    // Scale the switch when it's `:active`
-    vars: {
-      [activeScaleFactor]: "1"
-    },
-    ":active": {
-      vars: {
-        [activeScaleFactor]: "0.96"
-      }
-    }
-  }, focusable]),
-  slider: style({
-    width: 24,
-    height: 24,
-    top: 4,
-    left: 4,
-    transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
-    position: "absolute",
-    backgroundColor: "white",
-    borderRadius: "xlarge",
-    selectors: {
-      '&[data-checked="true"]': {
-        transform: `translateX(20px) scale(${activeScaleFactor})`
-      }
-    },
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: "transform 120ms ease-out"
-      }
-    }
-  })
-});
-endFileScope();
-export {
-  switchTheme
-};

package/dist/themes/momotaro/components/tooltip.css.cjs

@@ -1,30 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/tooltip.css.ts", "@blockle/blocks");
-const tooltip = lib_theme_makeComponentTheme_cjs.makeComponentTheme("tooltip", {
-  base: lib_css_style_style_cjs.style({
-    backgroundColor: "primary",
-    padding: "small"
-  }),
-  variants: {
-    colorScheme: {
-      primary: lib_css_style_style_cjs.style({
-        backgroundColor: "rgba(0, 0, 0, 0.8)",
-        boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.1)",
-        color: "white"
-      }),
-      secondary: lib_css_style_style_cjs.style({
-        backgroundColor: "rgba(255, 255, 255, 0.8)",
-        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
-        color: "black"
-      })
-    }
-  },
-  defaultVariants: {
-    colorScheme: "primary"
-  }
-});
-fileScope.endFileScope();
-exports.tooltip = tooltip;

package/dist/themes/momotaro/components/tooltip.css.mjs

@@ -1,31 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "../../../lib/css/style/style.mjs";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-setFileScope("src/themes/momotaro/components/tooltip.css.ts", "@blockle/blocks");
-const tooltip = makeComponentTheme("tooltip", {
-  base: style({
-    backgroundColor: "primary",
-    padding: "small"
-  }),
-  variants: {
-    colorScheme: {
-      primary: style({
-        backgroundColor: "rgba(0, 0, 0, 0.8)",
-        boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.1)",
-        color: "white"
-      }),
-      secondary: style({
-        backgroundColor: "rgba(255, 255, 255, 0.8)",
-        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
-        color: "black"
-      })
-    }
-  },
-  defaultVariants: {
-    colorScheme: "primary"
-  }
-});
-endFileScope();
-export {
-  tooltip
-};

package/dist/themes/momotaro/components/transitions.cjs

@@ -1,3 +0,0 @@
-"use strict";
-const bounceOut = "cubic-bezier(.65,.36,.55,1.65)";
-exports.bounceOut = bounceOut;

package/dist/themes/momotaro/components/transitions.mjs

@@ -1,4 +0,0 @@
-const bounceOut = "cubic-bezier(.65,.36,.55,1.65)";
-export {
-  bounceOut
-};

package/dist/themes/momotaro/index.cjs

@@ -1,2 +0,0 @@
-"use strict";
-require("./momotaro.css.cjs");

package/dist/themes/momotaro/index.mjs

@@ -1 +0,0 @@
-import "./momotaro.css.mjs";

package/dist/themes/momotaro/momotaro.css.cjs

@@ -1,13 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const lib_theme_makeTheme_cjs = require("../../lib/theme/makeTheme.cjs");
-const themes_momotaro_components_index_cjs = require("./components/index.cjs");
-const themes_momotaro_tokens_css_cjs = require("./tokens.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts", "@blockle/blocks");
-const momotaro = lib_theme_makeTheme_cjs.makeTheme({
-  name: "momotaro",
-  tokens: themes_momotaro_tokens_css_cjs.tokens,
-  components: themes_momotaro_components_index_cjs.components
-});
-fileScope.endFileScope();
-exports.momotaro = momotaro;

package/dist/themes/momotaro/momotaro.css.mjs

@@ -1,14 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeTheme } from "../../lib/theme/makeTheme.mjs";
-import { components } from "./components/index.mjs";
-import { tokens } from "./tokens.css.mjs";
-setFileScope("src/themes/momotaro/momotaro.css.ts", "@blockle/blocks");
-const momotaro = makeTheme({
-  name: "momotaro",
-  tokens,
-  components
-});
-endFileScope();
-export {
-  momotaro
-};

package/dist/themes/momotaro/tokens.css.cjs

@@ -1,85 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const lib_css_utils_cssUtils_cjs = require("../../lib/css/utils/cssUtils.cjs");
-fileScope.setFileScope("src/themes/momotaro/tokens.css.ts", "@blockle/blocks");
-const tokens = {
-  border: {
-    radius: {
-      small: "4px",
-      medium: "8px",
-      large: "16px",
-      xlarge: "32px"
-    },
-    width: {
-      small: "1px",
-      medium: "2px",
-      large: "4px"
-    }
-  },
-  color: {
-    white: "#fff",
-    black: "#000",
-    body: "#F4F6FA",
-    primaryLight: "#E4DFFF",
-    primary: "#7265E3",
-    primaryDark: "#4D3CAB",
-    secondaryLight: "#7CF5CD",
-    secondary: "#7FE3F0",
-    secondaryDark: "#68C6EF",
-    text: "#2D3142",
-    textLight: "#9C9EB9",
-    textDark: "#4C5980",
-    danger: "#FF9B90",
-    link: "#7265E3"
-  },
-  shadow: {
-    small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
-    medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
-    large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
-  },
-  focus: {
-    boxShadow: "0 0 1px 2px #AF8EFF"
-  },
-  spacing: {
-    none: "0px",
-    gutter: "28px",
-    xsmall: "4px",
-    small: "8px",
-    medium: "12px",
-    large: "16px",
-    xlarge: "24px"
-  },
-  transition: {
-    slow: "240ms",
-    normal: "120ms",
-    fast: "80ms"
-  },
-  typography: {
-    fontFamily: {
-      body: '"Rubik", sans-serif',
-      primary: '"Rubik", sans-serif',
-      secondary: '"Rubik", sans-serif'
-    },
-    fontSize: {
-      xsmall: lib_css_utils_cssUtils_cjs.rem(12),
-      small: lib_css_utils_cssUtils_cjs.rem(14),
-      medium: lib_css_utils_cssUtils_cjs.rem(16),
-      large: lib_css_utils_cssUtils_cjs.rem(20),
-      xlarge: lib_css_utils_cssUtils_cjs.rem(24)
-    },
-    fontWeight: {
-      regular: 400,
-      medium: 500,
-      strong: 700
-    },
-    lineHeight: {
-      xsmall: lib_css_utils_cssUtils_cjs.rem(16),
-      small: lib_css_utils_cssUtils_cjs.rem(20),
-      medium: lib_css_utils_cssUtils_cjs.rem(24),
-      large: lib_css_utils_cssUtils_cjs.rem(28),
-      xlarge: lib_css_utils_cssUtils_cjs.rem(32)
-    }
-  }
-};
-fileScope.endFileScope();
-exports.tokens = tokens;

package/dist/themes/momotaro/tokens.css.mjs

@@ -1,86 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { rem } from "../../lib/css/utils/cssUtils.mjs";
-setFileScope("src/themes/momotaro/tokens.css.ts", "@blockle/blocks");
-const tokens = {
-  border: {
-    radius: {
-      small: "4px",
-      medium: "8px",
-      large: "16px",
-      xlarge: "32px"
-    },
-    width: {
-      small: "1px",
-      medium: "2px",
-      large: "4px"
-    }
-  },
-  color: {
-    white: "#fff",
-    black: "#000",
-    body: "#F4F6FA",
-    primaryLight: "#E4DFFF",
-    primary: "#7265E3",
-    primaryDark: "#4D3CAB",
-    secondaryLight: "#7CF5CD",
-    secondary: "#7FE3F0",
-    secondaryDark: "#68C6EF",
-    text: "#2D3142",
-    textLight: "#9C9EB9",
-    textDark: "#4C5980",
-    danger: "#FF9B90",
-    link: "#7265E3"
-  },
-  shadow: {
-    small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
-    medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
-    large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
-  },
-  focus: {
-    boxShadow: "0 0 1px 2px #AF8EFF"
-  },
-  spacing: {
-    none: "0px",
-    gutter: "28px",
-    xsmall: "4px",
-    small: "8px",
-    medium: "12px",
-    large: "16px",
-    xlarge: "24px"
-  },
-  transition: {
-    slow: "240ms",
-    normal: "120ms",
-    fast: "80ms"
-  },
-  typography: {
-    fontFamily: {
-      body: '"Rubik", sans-serif',
-      primary: '"Rubik", sans-serif',
-      secondary: '"Rubik", sans-serif'
-    },
-    fontSize: {
-      xsmall: rem(12),
-      small: rem(14),
-      medium: rem(16),
-      large: rem(20),
-      xlarge: rem(24)
-    },
-    fontWeight: {
-      regular: 400,
-      medium: 500,
-      strong: 700
-    },
-    lineHeight: {
-      xsmall: rem(16),
-      small: rem(20),
-      medium: rem(24),
-      large: rem(28),
-      xlarge: rem(32)
-    }
-  }
-};
-endFileScope();
-export {
-  tokens
-};

package/dist/themes/momotaro.cjs

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const themes_momotaro_momotaro_css_cjs = require("./momotaro/momotaro.css.cjs");
-exports.momotaro = themes_momotaro_momotaro_css_cjs.momotaro;

package/dist/themes/momotaro.d.mts

@@ -1 +0,0 @@
-export { momotaro } from '../momotaro.chunk.js';

package/dist/themes/momotaro.d.ts

@@ -1 +0,0 @@
-export { momotaro } from '../momotaro.chunk.js';