@blockle/blocks 0.5.1 → 0.7.0

package/dist/styles/themes/momotaro/components/index.cjs

@@ -1,14 +1,22 @@
 "use strict";
 const styles_themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
+const styles_themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
+const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
+const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
+const styles_themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
+const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
+const styles_themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
-const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
-const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
   link: styles_themes_momotaro_components_link_css_cjs.link,
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
   divider: styles_themes_momotaro_components_divider_css_cjs.divider,
-  dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog
+  dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
+  input: styles_themes_momotaro_components_input_css_cjs.input,
+  checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
+  radio: styles_themes_momotaro_components_radio_css_cjs.radio,
+  label: styles_themes_momotaro_components_label_css_cjs.label
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -1,14 +1,22 @@
 import { button } from "./button.css.mjs";
+import { checkbox } from "./checkbox.css.mjs";
+import { dialog } from "./dialog.css.mjs";
+import { divider } from "./divider.css.mjs";
+import { input } from "./input.css.mjs";
+import { label } from "./label.css.mjs";
 import { link } from "./link.css.mjs";
+import { radio } from "./radio.css.mjs";
 import { spinner } from "./spinner.css.mjs";
-import { divider } from "./divider.css.mjs";
-import { dialog } from "./dialog.css.mjs";
 const components = {
   button,
   link,
   spinner,
   divider,
-  dialog
+  dialog,
+  input,
+  checkbox,
+  radio,
+  label
 };
 export {
   components

package/dist/styles/themes/momotaro/components/input.css.cjs

@@ -0,0 +1,40 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/input.css.ts?used", "blocks");
+const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input", {
+  input: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    color: "text",
+    paddingY: "large",
+    paddingX: "large",
+    border: "none",
+    borderRadius: "small"
+  }), {
+    outline: "none",
+    background: "transparent",
+    "::placeholder": {
+      color: styles_lib_theme_vars_css_cjs.vars.color.textLight
+    },
+    ":disabled": {}
+  }], "input_input"),
+  container: css.style([{
+    minHeight: 56,
+    transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
+    transitionProperty: "box-shadow",
+    ":focus-within": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: `${styles_lib_theme_vars_css_cjs.vars.shadow.small}, ${styles_lib_theme_vars_css_cjs.vars.focus.boxShadow}`
+    }
+  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    backgroundColor: "white",
+    borderRadius: "medium",
+    boxShadow: "medium",
+    gap: "large"
+  })], "input_container")
+});
+fileScope.endFileScope();
+exports.input = input;

package/dist/styles/themes/momotaro/components/input.css.mjs

@@ -0,0 +1,41 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/input.css.ts?used", "blocks");
+const input = makeComponentTheme("input", {
+  input: style([atoms({
+    color: "text",
+    paddingY: "large",
+    paddingX: "large",
+    border: "none",
+    borderRadius: "small"
+  }), {
+    outline: "none",
+    background: "transparent",
+    "::placeholder": {
+      color: vars.color.textLight
+    },
+    ":disabled": {}
+  }], "input_input"),
+  container: style([{
+    minHeight: 56,
+    transitionDuration: vars.transition.fast,
+    transitionProperty: "box-shadow",
+    ":focus-within": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
+    }
+  }, atoms({
+    backgroundColor: "white",
+    borderRadius: "medium",
+    boxShadow: "medium",
+    gap: "large"
+  })], "input_container")
+});
+endFileScope();
+export {
+  input
+};

package/dist/styles/themes/momotaro/components/label.css.cjs

@@ -0,0 +1,33 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/label.css.ts?used", "blocks");
+const label = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("label", {
+  base: css.style({}, "label_base"),
+  variants: {
+    size: {
+      small: css.style({
+        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.xsmall
+      }, "label_variants_size_small"),
+      medium: css.style({
+        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.small
+      }, "label_variants_size_medium"),
+      large: css.style({
+        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.medium
+      }, "label_variants_size_large")
+    },
+    required: css.style({
+      ":after": {
+        content: '"*"',
+        marginLeft: styles_lib_theme_vars_css_cjs.vars.space.xsmall
+      }
+    }, "label_variants_required")
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+fileScope.endFileScope();
+exports.label = label;

package/dist/styles/themes/momotaro/components/label.css.mjs

@@ -0,0 +1,34 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+setFileScope("src/themes/momotaro/components/label.css.ts?used", "blocks");
+const label = makeComponentTheme("label", {
+  base: style({}, "label_base"),
+  variants: {
+    size: {
+      small: style({
+        fontSize: vars.fontSize.xsmall
+      }, "label_variants_size_small"),
+      medium: style({
+        fontSize: vars.fontSize.small
+      }, "label_variants_size_medium"),
+      large: style({
+        fontSize: vars.fontSize.medium
+      }, "label_variants_size_large")
+    },
+    required: style({
+      ":after": {
+        content: '"*"',
+        marginLeft: vars.space.xsmall
+      }
+    }, "label_variants_required")
+  },
+  defaultVariants: {
+    size: "large"
+  }
+});
+endFileScope();
+export {
+  label
+};

package/dist/styles/themes/momotaro/components/link.css.cjs

@@ -1,15 +1,17 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
-const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("link", {
-  base: css.style({
+const link = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("link", {
+  base: css.style([{
     outline: "none",
     border: "none",
     textDecoration: "none",
     background: "transparent",
+    borderRadius: 1,
     ":hover": {
       textDecoration: "underline"
     },
@@ -17,7 +19,7 @@ const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("lin
       textDecoration: "underline"
     },
     cursor: "pointer"
-  }, "link_base"),
+  }, styles_themes_momotaro_components_helpers_css_cjs.focusable], "link_base"),
   variants: {
     variant: {
       inherit: css.style({

package/dist/styles/themes/momotaro/components/link.css.mjs

@@ -1,14 +1,16 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { focusable } from "./helpers.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
 const link = makeComponentTheme("link", {
-  base: style({
+  base: style([{
     outline: "none",
     border: "none",
     textDecoration: "none",
     background: "transparent",
+    borderRadius: 1,
     ":hover": {
       textDecoration: "underline"
     },
@@ -16,7 +18,7 @@ const link = makeComponentTheme("link", {
       textDecoration: "underline"
     },
     cursor: "pointer"
-  }, "link_base"),
+  }, focusable], "link_base"),
   variants: {
     variant: {
       inherit: style({

package/dist/styles/themes/momotaro/components/radio.css.cjs

@@ -0,0 +1,53 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const styles_themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/radio.css.ts?used", "blocks");
+const radio = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("radio", {
+  base: css.style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`,
+    transitionProperty: "background-color",
+    ":hover": {
+      backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+    },
+    selectors: {
+      "&:has(input:checked):not(:hover)": {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primary
+      }
+    }
+  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    backgroundColor: "primaryLight"
+  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "radio_base"),
+  icon: css.style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`,
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }, "radio_icon"),
+  label: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.radio = radio;

package/dist/styles/themes/momotaro/components/radio.css.mjs

@@ -0,0 +1,54 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+import { focusable } from "./helpers.css.mjs";
+import { bounceOut } from "./transitions.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/radio.css.ts?used", "blocks");
+const radio = makeComponentTheme("radio", {
+  base: style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    transition: `transform ${vars.transition.fast}`,
+    transitionProperty: "background-color",
+    ":hover": {
+      backgroundColor: vars.color.primaryDark
+    },
+    selectors: {
+      "&:has(input:checked):not(:hover)": {
+        backgroundColor: vars.color.primary
+      }
+    }
+  }, atoms({
+    backgroundColor: "primaryLight"
+  }), focusable], "radio_base"),
+  icon: style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    transition: `transform ${vars.transition.normal} ${bounceOut}`,
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }, "radio_icon"),
+  label: atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+endFileScope();
+export {
+  radio
+};

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

@@ -1,7 +1,7 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts?used", "blocks");
 const spinAnimation = css.keyframes({
   "0%": {
@@ -11,7 +11,7 @@ const spinAnimation = css.keyframes({
     transform: "rotate(360deg)"
   }
 }, "spinAnimation");
-const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
+const spinner = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
   base: css.style({
     aspectRatio: "1 / 1",
     overflow: "hidden",

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

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { keyframes, style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 setFileScope("src/themes/momotaro/components/spinner.css.ts?used", "blocks");
 const spinAnimation = keyframes({
   "0%": {

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

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

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

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

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

@@ -1,10 +1,10 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const styles_lib_css_theme_makeTheme_cjs = require("../../lib/css/theme/makeTheme.cjs");
+const styles_lib_theme_makeTheme_cjs = require("../../lib/theme/makeTheme.cjs");
 const styles_themes_momotaro_components_index_cjs = require("./components/index.cjs");
 const styles_themes_momotaro_tokens_css_cjs = require("./tokens.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
-const momotaro = styles_lib_css_theme_makeTheme_cjs.makeTheme({
+const momotaro = styles_lib_theme_makeTheme_cjs.makeTheme({
   name: "momotaro",
   tokens: styles_themes_momotaro_tokens_css_cjs.tokens,
   components: styles_themes_momotaro_components_index_cjs.components

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

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeTheme } from "../../lib/css/theme/makeTheme.mjs";
+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?used", "blocks");

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

@@ -37,7 +37,7 @@ const tokens = {
     large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
   },
   focus: {
-    boxShadow: "0 0 4px 2px #AF8EFF"
+    boxShadow: "0 0 1px 2px #AF8EFF"
   },
   spacing: {
     none: "0px",
@@ -49,9 +49,9 @@ const tokens = {
     xlarge: "24px"
   },
   transition: {
-    slow: "0.5s",
-    normal: "0.3s",
-    fast: "0.1s"
+    slow: "240ms",
+    normal: "120ms",
+    fast: "80ms"
   },
   typography: {
     fontFamily: {

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

@@ -36,7 +36,7 @@ const tokens = {
     large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
   },
   focus: {
-    boxShadow: "0 0 4px 2px #AF8EFF"
+    boxShadow: "0 0 1px 2px #AF8EFF"
   },
   spacing: {
     none: "0px",
@@ -48,9 +48,9 @@ const tokens = {
     xlarge: "24px"
   },
   transition: {
-    slow: "0.5s",
-    normal: "0.3s",
-    fast: "0.1s"
+    slow: "240ms",
+    normal: "120ms",
+    fast: "80ms"
   },
   typography: {
     fontFamily: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -44,7 +44,7 @@
     "storybook": "storybook dev -p 6006 --no-open",
     "test": "vitest",
     "ts": "tsc --noemit --project ./tsconfig.json",
-    "release": "yarn test && yarn build && changeset publish"
+    "release": "yarn ts && yarn test && yarn build && changeset publish"
   },
   "resolutions": {
     "string-width": "^4.2.2"

package/dist/styles/lib/css/theme/makeComponentTheme.cjs

@@ -1,3 +0,0 @@
-"use strict";
-const makeComponentTheme = (name, options) => options;
-exports.makeComponentTheme = makeComponentTheme;

package/dist/styles/lib/css/theme/makeComponentTheme.mjs

@@ -1,4 +0,0 @@
-const makeComponentTheme = (name, options) => options;
-export {
-  makeComponentTheme
-};

package/dist/styles/lib/css/theme/makeTheme.cjs

@@ -1,11 +0,0 @@
-"use strict";
-const css = require("@vanilla-extract/css");
-const styles_lib_css_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
-const styles_lib_css_theme_vars_css_cjs = require("./vars.css.cjs");
-const makeTheme = (theme) => {
-  return {
-    vars: css.createTheme(styles_lib_css_theme_vars_css_cjs.vars, styles_lib_css_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens)),
-    components: theme.components
-  };
-};
-exports.makeTheme = makeTheme;

package/dist/styles/lib/css/theme/vars.css.cjs

@@ -1,9 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_lib_css_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
-const styles_lib_css_theme_tokens_cjs = require("./tokens.cjs");
-fileScope.setFileScope("src/lib/css/theme/vars.css.ts?used", "blocks");
-const vars = css.createThemeContract(styles_lib_css_theme_makeVanillaTheme_cjs.makeVanillaTheme(styles_lib_css_theme_tokens_cjs.tokens));
-fileScope.endFileScope();
-exports.vars = vars;