@blockle/blocks 0.5.1 → 0.7.0

package/dist/styles/components/Input/input.css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/Input/input.css.ts?used", "blocks");
+const input = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      appearance: "none"
+    }
+  }
+}, "input");
+fileScope.endFileScope();
+exports.input = input;

package/dist/styles/components/Input/input.css.mjs

@@ -0,0 +1,15 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Input/input.css.ts?used", "blocks");
+const input = style({
+  "@layer": {
+    [blocksLayer]: {
+      appearance: "none"
+    }
+  }
+}, "input");
+endFileScope();
+export {
+  input
+};

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -1,21 +1,21 @@
 "use strict";
-const styles_lib_css_theme_vars_css_cjs = require("../theme/vars.css.cjs");
-const colorWithCurrentColor = { ...styles_lib_css_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
+const styles_lib_theme_vars_css_cjs = require("../../theme/vars.css.cjs");
+const colorWithCurrentColor = { ...styles_lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
 const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
-  borderRadius: styles_lib_css_theme_vars_css_cjs.vars.borderRadius,
+  borderRadius: styles_lib_theme_vars_css_cjs.vars.borderRadius,
   border: ["none"],
   bottom: [0],
-  boxShadow: styles_lib_css_theme_vars_css_cjs.vars.shadow,
+  boxShadow: styles_lib_theme_vars_css_cjs.vars.shadow,
   color: colorWithCurrentColor,
   cursor: ["auto", "pointer"],
-  fontFamily: styles_lib_css_theme_vars_css_cjs.vars.fontFamily,
+  fontFamily: styles_lib_theme_vars_css_cjs.vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],
-  fontWeight: styles_lib_css_theme_vars_css_cjs.vars.fontWeight,
+  fontWeight: styles_lib_theme_vars_css_cjs.vars.fontWeight,
   height: { auto: "auto", full: "100%" },
   left: [0],
-  lineHeight: styles_lib_css_theme_vars_css_cjs.vars.lineHeight,
+  lineHeight: styles_lib_theme_vars_css_cjs.vars.lineHeight,
   maxHeight: { full: "100%" },
   maxWidth: { full: "100%" },
   opacity: [0, 1],
@@ -28,19 +28,19 @@ const unresponsiveProperties = {
   textTransform: ["lowercase", "uppercase", "capitalize"],
   textWrap: ["balance", "wrap"],
   top: [0],
-  transition: styles_lib_css_theme_vars_css_cjs.vars.transition,
+  transition: styles_lib_theme_vars_css_cjs.vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
   width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
   wordBreak: ["break-word"],
   wordWrap: ["break-word"]
 };
-const marginSpace = { auto: "auto", ...styles_lib_css_theme_vars_css_cjs.vars.space };
+const marginSpace = { auto: "auto", ...styles_lib_theme_vars_css_cjs.vars.space };
 const responsiveProperties = {
   alignContent: ["stretch", "center", "flex-start", "flex-end"],
   alignItems: ["stretch", "center", "flex-start", "flex-end"],
   alignSelf: ["stretch", "center", "flex-start", "flex-end"],
-  columnGap: styles_lib_css_theme_vars_css_cjs.vars.space,
+  columnGap: styles_lib_theme_vars_css_cjs.vars.space,
   display: [
     "none",
     "flex",
@@ -56,20 +56,20 @@ const responsiveProperties = {
   flexGrow: [0, 1],
   flexShrink: [0, 1],
   flexWrap: ["nowrap", "wrap"],
-  fontSize: styles_lib_css_theme_vars_css_cjs.vars.fontSize,
-  gap: styles_lib_css_theme_vars_css_cjs.vars.space,
+  fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize,
+  gap: styles_lib_theme_vars_css_cjs.vars.space,
   justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
   marginBottom: marginSpace,
   marginLeft: marginSpace,
   marginRight: marginSpace,
   marginTop: marginSpace,
   outline: ["none"],
-  paddingBottom: styles_lib_css_theme_vars_css_cjs.vars.space,
-  paddingLeft: styles_lib_css_theme_vars_css_cjs.vars.space,
-  paddingRight: styles_lib_css_theme_vars_css_cjs.vars.space,
-  paddingTop: styles_lib_css_theme_vars_css_cjs.vars.space,
+  paddingBottom: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingLeft: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingRight: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingTop: styles_lib_theme_vars_css_cjs.vars.space,
   position: ["relative", "fixed", "absolute", "sticky", "static"],
-  rowGap: styles_lib_css_theme_vars_css_cjs.vars.space,
+  rowGap: styles_lib_theme_vars_css_cjs.vars.space,
   textAlign: ["center", "left", "right", "justify"]
 };
 exports.responsiveProperties = responsiveProperties;

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -1,4 +1,4 @@
-import { vars } from "../theme/vars.css.mjs";
+import { vars } from "../../theme/vars.css.mjs";
 const colorWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
 const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,

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

@@ -0,0 +1,5 @@
+"use strict";
+function makeComponentTheme(component, componentTheme) {
+  return componentTheme;
+}
+exports.makeComponentTheme = makeComponentTheme;

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

@@ -0,0 +1,6 @@
+function makeComponentTheme(component, componentTheme) {
+  return componentTheme;
+}
+export {
+  makeComponentTheme
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+const css = require("@vanilla-extract/css");
+const styles_lib_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
+const styles_lib_theme_vars_css_cjs = require("./vars.css.cjs");
+function makeTheme(theme) {
+  return {
+    name: theme.name,
+    vars: css.createTheme(styles_lib_theme_vars_css_cjs.vars, styles_lib_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens)),
+    components: theme.components
+  };
+}
+exports.makeTheme = makeTheme;

package/dist/styles/lib/{css/theme → theme}/makeTheme.mjs

@@ -1,12 +1,13 @@
 import { createTheme } from "@vanilla-extract/css";
 import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
 import { vars } from "./vars.css.mjs";
-const makeTheme = (theme) => {
+function makeTheme(theme) {
   return {
+    name: theme.name,
     vars: createTheme(vars, makeVanillaTheme(theme.tokens)),
     components: theme.components
   };
-};
+}
 export {
   makeTheme
 };

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

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

package/dist/styles/lib/{css/theme → theme}/vars.css.mjs

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createThemeContract } from "@vanilla-extract/css";
 import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
 import { tokens } from "./tokens.mjs";
-setFileScope("src/lib/css/theme/vars.css.ts?used", "blocks");
+setFileScope("src/lib/theme/vars.css.ts?used", "blocks");
 const vars = createThemeContract(makeVanillaTheme(tokens));
 endFileScope();
 export {

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

@@ -1,41 +1,41 @@
 "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_css_theme_vars_css_cjs = require("../../../lib/css/theme/vars.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_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/button.css.ts?used", "blocks");
 const primaryColor = css.createVar("primaryColor");
-const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
+const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
   base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     display: "inline-flex",
     placeItems: "center",
     fontSize: "medium",
     borderRadius: "medium",
     fontWeight: "medium"
-  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "button_base"),
+  }), styles_themes_momotaro_components_helpers_css_cjs.clickable], "button_base"),
   variants: {
     variant: {
       solid: css.style({
-        color: styles_lib_css_theme_vars_css_cjs.vars.color.white,
+        color: styles_lib_theme_vars_css_cjs.vars.color.white,
         backgroundColor: primaryColor,
         border: "none",
         selectors: {
           "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color.primaryDark
+            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
           }
         }
       }, "button_variants_variant_solid"),
       outline: css.style({
         color: primaryColor,
-        borderWidth: styles_lib_css_theme_vars_css_cjs.vars.borderWidth.small,
+        borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth.small,
         borderStyle: "solid",
         borderColor: primaryColor,
         background: "transparent",
         selectors: {
           "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color.primaryLight
+            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
           }
         }
       }, "button_variants_variant_outline"),
@@ -44,7 +44,7 @@ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("b
         background: "transparent",
         selectors: {
           "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color.primaryLight
+            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
           }
         }
       }, "button_variants_variant_ghost")
@@ -69,12 +69,12 @@ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("b
     intent: {
       neutral: css.style({
         vars: {
-          [primaryColor]: styles_lib_css_theme_vars_css_cjs.vars.color.primary
+          [primaryColor]: styles_lib_theme_vars_css_cjs.vars.color.primary
         }
       }, "button_variants_intent_neutral"),
       danger: css.style({
         vars: {
-          [primaryColor]: styles_lib_css_theme_vars_css_cjs.vars.color.danger
+          [primaryColor]: styles_lib_theme_vars_css_cjs.vars.color.danger
         }
       }, "button_variants_intent_danger")
     }
@@ -92,10 +92,19 @@ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("b
   //       background: 'red',
   //     }),
   //   },
+  //   {
+  //     variants: {
+  //       variant: 'solid',
+  //       size: 'large',
+  //     },
+  //     style: style({
+  //       transform: 'scale(2)',
+  //     }),
+  //   },
   // ],
   defaultVariants: {
     size: "small",
-    variant: "ghost",
+    variant: "solid",
     intent: "neutral"
   }
 });

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

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar, style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
-import { vars } from "../../../lib/css/theme/vars.css.mjs";
-import { focusable } from "./helpers.css.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+import { clickable } from "./helpers.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = createVar("primaryColor");
@@ -13,7 +13,7 @@ const button = makeComponentTheme("button", {
     fontSize: "medium",
     borderRadius: "medium",
     fontWeight: "medium"
-  }), focusable], "button_base"),
+  }), clickable], "button_base"),
   variants: {
     variant: {
       solid: style({
@@ -91,10 +91,19 @@ const button = makeComponentTheme("button", {
   //       background: 'red',
   //     }),
   //   },
+  //   {
+  //     variants: {
+  //       variant: 'solid',
+  //       size: 'large',
+  //     },
+  //     style: style({
+  //       transform: 'scale(2)',
+  //     }),
+  //   },
   // ],
   defaultVariants: {
     size: "small",
-    variant: "ghost",
+    variant: "solid",
     intent: "neutral"
   }
 });

package/dist/styles/themes/momotaro/components/checkbox.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/checkbox.css.ts?used", "blocks");
+const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox", {
+  base: css.style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    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",
+    borderRadius: "small"
+  }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_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)"
+      }
+    }
+  }, "checkbox_icon"),
+  label: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.checkbox = checkbox;

package/dist/styles/themes/momotaro/components/checkbox.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/checkbox.css.ts?used", "blocks");
+const checkbox = makeComponentTheme("checkbox", {
+  base: style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    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",
+    borderRadius: "small"
+  }), focusable], "checkbox_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)"
+      }
+    }
+  }, "checkbox_icon"),
+  label: atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+endFileScope();
+export {
+  checkbox
+};

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

@@ -1,23 +1,42 @@
 "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_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
-const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
+const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
   base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     display: "flex",
     flexDirection: "column",
     padding: "gutter",
     border: "none",
-    overflow: "auto"
+    overflow: "auto",
+    borderRadius: "medium",
+    boxShadow: "large"
   }), {
     minWidth: "300px"
   }], "dialog_base"),
+  backdrop: css.style({
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  }, "dialog_backdrop"),
   variants: {
-    backdrop: css.style({
-      backgroundColor: "rgba(0, 0, 0, 0.5)"
-    }, "dialog_variants_backdrop")
+    size: {
+      small: css.style({
+        width: "400px",
+        maxWidth: "min(400px, 90vw)"
+      }, "dialog_variants_size_small"),
+      medium: css.style({
+        width: "600px",
+        maxWidth: "min(600px, 90vw)"
+      }, "dialog_variants_size_medium"),
+      large: css.style({
+        width: "800px",
+        maxWidth: "min(800px, 90vw)"
+      }, "dialog_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
   }
 });
 fileScope.endFileScope();

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

@@ -1,6 +1,6 @@
 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 { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
 const dialog = makeComponentTheme("dialog", {
@@ -9,14 +9,33 @@ const dialog = makeComponentTheme("dialog", {
     flexDirection: "column",
     padding: "gutter",
     border: "none",
-    overflow: "auto"
+    overflow: "auto",
+    borderRadius: "medium",
+    boxShadow: "large"
   }), {
     minWidth: "300px"
   }], "dialog_base"),
+  backdrop: style({
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  }, "dialog_backdrop"),
   variants: {
-    backdrop: style({
-      backgroundColor: "rgba(0, 0, 0, 0.5)"
-    }, "dialog_variants_backdrop")
+    size: {
+      small: style({
+        width: "400px",
+        maxWidth: "min(400px, 90vw)"
+      }, "dialog_variants_size_small"),
+      medium: style({
+        width: "600px",
+        maxWidth: "min(600px, 90vw)"
+      }, "dialog_variants_size_medium"),
+      large: style({
+        width: "800px",
+        maxWidth: "min(800px, 90vw)"
+      }, "dialog_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
   }
 });
 endFileScope();

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

@@ -1,8 +1,8 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-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/divider.css.ts?used", "blocks");
-const divider = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
+const divider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
   defaultVariants: {
     color: "textLight"
   }

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

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
 const divider = makeComponentTheme("divider", {
   defaultVariants: {

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

@@ -1,26 +1,41 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_theme_vars_css_cjs = require("../../../lib/css/theme/vars.css.cjs");
+const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
 const focusable = css.style({
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: styles_lib_css_theme_vars_css_cjs.vars.focus.boxShadow,
-    transitionDuration: styles_lib_css_theme_vars_css_cjs.vars.transition.fast,
+    boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow,
+    transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
     transitionProperty: "box-shadow"
   },
   ":disabled": {
     opacity: 0.5,
     cursor: "auto"
   },
-  // TODO This is for buttons?
+  selectors: {
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow,
+      transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
+      transitionProperty: "box-shadow"
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
+  }
+}, "focusable");
+const clickable = css.style([focusable, {
   selectors: {
     "&:active:not(:disabled)": {
       transform: "scale(0.9)"
     }
   }
-}, "focusable");
+}], "clickable");
 fileScope.endFileScope();
+exports.clickable = clickable;
 exports.focusable = focusable;

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

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { vars } from "../../../lib/css/theme/vars.css.mjs";
+import { vars } from "../../../lib/theme/vars.css.mjs";
 setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
 const focusable = style({
   ":focus-visible": {
@@ -14,14 +14,29 @@ const focusable = style({
     opacity: 0.5,
     cursor: "auto"
   },
-  // TODO This is for buttons?
+  selectors: {
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: vars.focus.boxShadow,
+      transitionDuration: vars.transition.fast,
+      transitionProperty: "box-shadow"
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
+  }
+}, "focusable");
+const clickable = style([focusable, {
   selectors: {
     "&:active:not(:disabled)": {
       transform: "scale(0.9)"
     }
   }
-}, "focusable");
+}], "clickable");
 endFileScope();
 export {
+  clickable,
   focusable
 };