@blockle/blocks 0.8.5 → 0.8.7

package/dist/styles/components/Switch/switch.css.cjs

@@ -0,0 +1,26 @@
+"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/Switch/switch.css.ts?used", "blocks");
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+}, "container");
+const input = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      opacity: 0,
+      maxHeight: 0,
+      maxWidth: 0
+    }
+  }
+}, "input");
+fileScope.endFileScope();
+exports.container = container;
+exports.input = input;

package/dist/styles/components/Switch/switch.css.mjs

@@ -0,0 +1,27 @@
+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/Switch/switch.css.ts?used", "blocks");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+}, "container");
+const input = style({
+  "@layer": {
+    [blocksLayer]: {
+      opacity: 0,
+      maxHeight: 0,
+      maxWidth: 0
+    }
+  }
+}, "input");
+endFileScope();
+export {
+  container,
+  input
+};

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

@@ -5,6 +5,7 @@ const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
   borderRadius: styles_lib_theme_vars_css_cjs.vars.borderRadius,
+  borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth,
   border: ["none"],
   bottom: [0],
   boxShadow: styles_lib_theme_vars_css_cjs.vars.shadow,

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

@@ -4,6 +4,7 @@ const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
   borderRadius: vars.borderRadius,
+  borderWidth: vars.borderWidth,
   border: ["none"],
   bottom: [0],
   boxShadow: vars.shadow,

package/dist/styles/lib/css/style/style.cjs

@@ -0,0 +1,28 @@
+"use strict";
+const css = require("@vanilla-extract/css");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../atoms/sprinkles.css.cjs");
+function style(props) {
+  const styleRule = {};
+  const atomClassNames = [];
+  if (Array.isArray(props)) {
+    return props.map((rule) => {
+      if (typeof rule === "string") {
+        return rule;
+      }
+      return style(rule);
+    }).join(" ");
+  }
+  for (const [name, value] of Object.entries(props)) {
+    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+      try {
+        atomClassNames.push(styles_lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
+      } catch {
+        styleRule[name] = value;
+      }
+    } else {
+      styleRule[name] = value;
+    }
+  }
+  return css.style([styleRule, ...atomClassNames]);
+}
+exports.style = style;

package/dist/styles/lib/css/style/style.mjs

@@ -0,0 +1,29 @@
+import { style as style$1 } from "@vanilla-extract/css";
+import { atoms } from "../atoms/sprinkles.css.mjs";
+function style(props) {
+  const styleRule = {};
+  const atomClassNames = [];
+  if (Array.isArray(props)) {
+    return props.map((rule) => {
+      if (typeof rule === "string") {
+        return rule;
+      }
+      return style(rule);
+    }).join(" ");
+  }
+  for (const [name, value] of Object.entries(props)) {
+    if (atoms.properties.has(name)) {
+      try {
+        atomClassNames.push(atoms({ [name]: value }));
+      } catch {
+        styleRule[name] = value;
+      }
+    } else {
+      styleRule[name] = value;
+    }
+  }
+  return style$1([styleRule, ...atomClassNames]);
+}
+export {
+  style
+};

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

@@ -1,109 +1,98 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
+const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.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 intentColor = css.createVar("intentColor");
+const hoverBackgroundColor = css.createVar("hoverBackgroundColor");
 const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
-  base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+  base: styles_lib_css_style_style_cjs.style([{
     display: "inline-flex",
     placeItems: "center",
     fontSize: "medium",
     borderRadius: "medium",
     fontWeight: "medium",
-    // Space between icon and text
-    gap: "small"
-  }), styles_themes_momotaro_components_helpers_css_cjs.clickable], "button_base"),
+    // Space between `startSlot | children | endSlot`
+    gap: "small",
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: hoverBackgroundColor
+      }
+    }
+  }, styles_themes_momotaro_components_helpers_css_cjs.clickable]),
   variants: {
     variant: {
-      solid: css.style({
+      solid: styles_lib_css_style_style_cjs.style({
         color: styles_lib_theme_vars_css_cjs.vars.color.white,
-        backgroundColor: primaryColor,
-        border: "none",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
-          }
-        }
-      }, "button_variants_variant_solid"),
-      outline: css.style({
-        color: primaryColor,
-        borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth.small,
+        backgroundColor: intentColor,
+        border: "none"
+      }),
+      outline: styles_lib_css_style_style_cjs.style({
+        color: intentColor,
+        borderWidth: "small",
         borderStyle: "solid",
-        borderColor: primaryColor,
-        background: "transparent",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
-          }
-        }
-      }, "button_variants_variant_outline"),
-      ghost: css.style({
-        color: primaryColor,
-        background: "transparent",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
-          }
-        }
-      }, "button_variants_variant_ghost")
+        borderColor: intentColor,
+        background: "transparent"
+      }),
+      ghost: styles_lib_css_style_style_cjs.style({
+        color: intentColor,
+        background: "transparent"
+      })
     },
     size: {
-      small: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-        paddingX: "large"
-      }), {
+      small: styles_lib_css_style_style_cjs.style({
+        paddingX: "large",
         height: 40
-      }], "button_variants_size_small"),
-      medium: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-        paddingX: "xlarge"
-      }), {
+      }),
+      medium: styles_lib_css_style_style_cjs.style({
+        paddingX: "xlarge",
         height: 56
-      }], "button_variants_size_medium"),
-      large: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
-        paddingX: "xlarge"
-      }), {
+      }),
+      large: styles_lib_css_style_style_cjs.style({
+        paddingX: "xlarge",
         height: 72
-      }], "button_variants_size_large")
+      })
     },
     intent: {
-      neutral: css.style({
+      neutral: styles_lib_css_style_style_cjs.style({
         vars: {
-          [primaryColor]: styles_lib_theme_vars_css_cjs.vars.color.primary
+          [intentColor]: styles_lib_theme_vars_css_cjs.vars.color.primary,
+          [hoverBackgroundColor]: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
         }
-      }, "button_variants_intent_neutral"),
-      danger: css.style({
+      }),
+      danger: styles_lib_css_style_style_cjs.style({
         vars: {
-          [primaryColor]: styles_lib_theme_vars_css_cjs.vars.color.danger
+          [intentColor]: styles_lib_theme_vars_css_cjs.vars.color.danger,
+          [hoverBackgroundColor]: "#fff8f7",
+          [styles_themes_momotaro_components_helpers_css_cjs.focusRingColor]: styles_lib_theme_vars_css_cjs.vars.color.danger
         }
-      }, "button_variants_intent_danger")
+      })
     }
   },
-  // compoundVariants: [
-  //   {
-  //     variants: {
-  //       intent: 'danger',
-  //       variant: 'ghost',
-  //       loading: true,
-  //     },
-  //     style: style({
-  //       color: vars.color.danger,
-  //       fontSize: vars.fontSize.small,
-  //       background: 'red',
-  //     }),
-  //   },
-  //   {
-  //     variants: {
-  //       variant: 'solid',
-  //       size: 'large',
-  //     },
-  //     style: style({
-  //       transform: 'scale(2)',
-  //     }),
-  //   },
-  // ],
+  compoundVariants: [{
+    variants: {
+      variant: "solid",
+      intent: "neutral"
+    },
+    style: styles_lib_css_style_style_cjs.style({
+      vars: {
+        [hoverBackgroundColor]: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+      }
+    })
+  }, {
+    variants: {
+      variant: "solid",
+      intent: "danger"
+    },
+    style: styles_lib_css_style_style_cjs.style({
+      vars: {
+        [hoverBackgroundColor]: "#f9b1a9"
+      }
+    })
+  }],
   defaultVariants: {
     size: "small",
     variant: "solid",

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

@@ -1,108 +1,97 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar, style } from "@vanilla-extract/css";
+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 { clickable } from "./helpers.css.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+import { clickable, focusRingColor } from "./helpers.css.mjs";
 setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
-const primaryColor = createVar("primaryColor");
+const intentColor = createVar("intentColor");
+const hoverBackgroundColor = createVar("hoverBackgroundColor");
 const button = makeComponentTheme("button", {
-  base: style([atoms({
+  base: style([{
     display: "inline-flex",
     placeItems: "center",
     fontSize: "medium",
     borderRadius: "medium",
     fontWeight: "medium",
-    // Space between icon and text
-    gap: "small"
-  }), clickable], "button_base"),
+    // Space between `startSlot | children | endSlot`
+    gap: "small",
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: hoverBackgroundColor
+      }
+    }
+  }, clickable]),
   variants: {
     variant: {
       solid: style({
         color: vars.color.white,
-        backgroundColor: primaryColor,
-        border: "none",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: vars.color.primaryDark
-          }
-        }
-      }, "button_variants_variant_solid"),
+        backgroundColor: intentColor,
+        border: "none"
+      }),
       outline: style({
-        color: primaryColor,
-        borderWidth: vars.borderWidth.small,
+        color: intentColor,
+        borderWidth: "small",
         borderStyle: "solid",
-        borderColor: primaryColor,
-        background: "transparent",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: vars.color.primaryLight
-          }
-        }
-      }, "button_variants_variant_outline"),
+        borderColor: intentColor,
+        background: "transparent"
+      }),
       ghost: style({
-        color: primaryColor,
-        background: "transparent",
-        selectors: {
-          "&:hover:not(:disabled)": {
-            backgroundColor: vars.color.primaryLight
-          }
-        }
-      }, "button_variants_variant_ghost")
+        color: intentColor,
+        background: "transparent"
+      })
     },
     size: {
-      small: style([atoms({
-        paddingX: "large"
-      }), {
+      small: style({
+        paddingX: "large",
         height: 40
-      }], "button_variants_size_small"),
-      medium: style([atoms({
-        paddingX: "xlarge"
-      }), {
+      }),
+      medium: style({
+        paddingX: "xlarge",
         height: 56
-      }], "button_variants_size_medium"),
-      large: style([atoms({
-        paddingX: "xlarge"
-      }), {
+      }),
+      large: style({
+        paddingX: "xlarge",
         height: 72
-      }], "button_variants_size_large")
+      })
     },
     intent: {
       neutral: style({
         vars: {
-          [primaryColor]: vars.color.primary
+          [intentColor]: vars.color.primary,
+          [hoverBackgroundColor]: vars.color.primaryLight
         }
-      }, "button_variants_intent_neutral"),
+      }),
       danger: style({
         vars: {
-          [primaryColor]: vars.color.danger
+          [intentColor]: vars.color.danger,
+          [hoverBackgroundColor]: "#fff8f7",
+          [focusRingColor]: vars.color.danger
         }
-      }, "button_variants_intent_danger")
+      })
     }
   },
-  // compoundVariants: [
-  //   {
-  //     variants: {
-  //       intent: 'danger',
-  //       variant: 'ghost',
-  //       loading: true,
-  //     },
-  //     style: style({
-  //       color: vars.color.danger,
-  //       fontSize: vars.fontSize.small,
-  //       background: 'red',
-  //     }),
-  //   },
-  //   {
-  //     variants: {
-  //       variant: 'solid',
-  //       size: 'large',
-  //     },
-  //     style: style({
-  //       transform: 'scale(2)',
-  //     }),
-  //   },
-  // ],
+  compoundVariants: [{
+    variants: {
+      variant: "solid",
+      intent: "neutral"
+    },
+    style: style({
+      vars: {
+        [hoverBackgroundColor]: vars.color.primaryDark
+      }
+    })
+  }, {
+    variants: {
+      variant: "solid",
+      intent: "danger"
+    },
+    style: style({
+      vars: {
+        [hoverBackgroundColor]: "#f9b1a9"
+      }
+    })
+  }],
   defaultVariants: {
     size: "small",
     variant: "solid",

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

@@ -3,11 +3,12 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 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 focusRingColor = css.createVar("focusRingColor");
 const focusable = css.style({
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow,
+    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`,
     transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
     transitionProperty: "box-shadow"
   },
@@ -31,12 +32,11 @@ const focusable = css.style({
   }
 }, "focusable");
 const clickable = css.style([focusable, {
-  selectors: {
-    "&:active:not(:disabled)": {
-      transform: "scale(0.9)"
-    }
+  ":active": {
+    transform: "scale(0.975)"
   }
 }], "clickable");
 fileScope.endFileScope();
 exports.clickable = clickable;
+exports.focusRingColor = focusRingColor;
 exports.focusable = focusable;

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

@@ -1,12 +1,13 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
+import { createVar, style, fallbackVar } from "@vanilla-extract/css";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 setFileScope("src/themes/momotaro/components/helpers.css.ts?used", "blocks");
+const focusRingColor = createVar("focusRingColor");
 const focusable = style({
   ":focus-visible": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    boxShadow: vars.focus.boxShadow,
+    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`,
     transitionDuration: vars.transition.fast,
     transitionProperty: "box-shadow"
   },
@@ -30,14 +31,13 @@ const focusable = style({
   }
 }, "focusable");
 const clickable = style([focusable, {
-  selectors: {
-    "&:active:not(:disabled)": {
-      transform: "scale(0.9)"
-    }
+  ":active": {
+    transform: "scale(0.975)"
   }
 }], "clickable");
 endFileScope();
 export {
   clickable,
+  focusRingColor,
   focusable
 };

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

@@ -9,6 +9,7 @@ const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs")
 const styles_themes_momotaro_components_progress_css_cjs = require("./progress.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_switch_css_cjs = require("./switch.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
   checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
@@ -19,6 +20,7 @@ const components = {
   link: styles_themes_momotaro_components_link_css_cjs.link,
   progress: styles_themes_momotaro_components_progress_css_cjs.progress,
   radio: styles_themes_momotaro_components_radio_css_cjs.radio,
-  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner
+  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
+  switch: styles_themes_momotaro_components_switch_css_cjs.switchTheme
 };
 exports.components = components;

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

@@ -8,6 +8,7 @@ import { link } from "./link.css.mjs";
 import { progress } from "./progress.css.mjs";
 import { radio } from "./radio.css.mjs";
 import { spinner } from "./spinner.css.mjs";
+import { switchTheme } from "./switch.css.mjs";
 const components = {
   button,
   checkbox,
@@ -18,7 +19,8 @@ const components = {
   link,
   progress,
   radio,
-  spinner
+  spinner,
+  switch: switchTheme
 };
 export {
   components

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

@@ -2,6 +2,7 @@
 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/progress.css.ts?used", "blocks");
 const indeterminateAnimation = css.keyframes({
@@ -13,15 +14,15 @@ const indeterminateAnimation = css.keyframes({
   }
 }, "indeterminateAnimation");
 const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("progress", {
-  container: css.style([{
-    height: 6
+  base: css.style([{
+    height: 8
   }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     width: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
     color: "primary",
     overflow: "hidden"
-  })], "progress_container"),
+  })], "progress_base"),
   bar: css.style({
     borderRadius: "inherit",
     "@media": {
@@ -32,10 +33,19 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
   }, "progress_bar"),
   variants: {
     indeterminate: css.style({
-      animation: `${indeterminateAnimation} 10s ease-in-out infinite`,
       "@media": {
+        // For reduce motion we show a striped pattern instead of animating
+        "(prefers-reduced-motion: reduce)": {
+          backgroundImage: `repeating-linear-gradient(
+            45deg,
+            transparent,
+            transparent 20px,
+            ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
+            ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
+          )`
+        },
         "(prefers-reduced-motion: no-preference)": {
-          animationDuration: "3s"
+          animation: `${indeterminateAnimation} 3s ease-in-out infinite`
         }
       }
     }, "progress_variants_indeterminate")