@blockle/blocks 0.6.0 → 0.7.1

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

@@ -1,7 +1,6 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 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");
@@ -18,7 +17,8 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
     background: "transparent",
     "::placeholder": {
       color: styles_lib_theme_vars_css_cjs.vars.color.textLight
-    }
+    },
+    ":disabled": {}
   }], "input_input"),
   container: css.style([{
     minHeight: 56,
@@ -34,7 +34,7 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
     borderRadius: "medium",
     boxShadow: "medium",
     gap: "large"
-  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "input_container")
+  })], "input_container")
 });
 fileScope.endFileScope();
 exports.input = input;

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

@@ -1,6 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { focusable } from "./helpers.css.mjs";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
@@ -17,7 +16,8 @@ const input = makeComponentTheme("input", {
     background: "transparent",
     "::placeholder": {
       color: vars.color.textLight
-    }
+    },
+    ":disabled": {}
   }], "input_input"),
   container: style([{
     minHeight: 56,
@@ -33,7 +33,7 @@ const input = makeComponentTheme("input", {
     borderRadius: "medium",
     boxShadow: "medium",
     gap: "large"
-  }), focusable], "input_container")
+  })], "input_container")
 });
 endFileScope();
 export {

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

@@ -11,6 +11,7 @@ const link = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("link",
     border: "none",
     textDecoration: "none",
     background: "transparent",
+    borderRadius: 1,
     ":hover": {
       textDecoration: "underline"
     },

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

@@ -10,6 +10,7 @@ const link = makeComponentTheme("link", {
     border: "none",
     textDecoration: "none",
     background: "transparent",
+    borderRadius: 1,
     ":hover": {
       textDecoration: "underline"
     },

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "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"