@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const helpers_css = require("./helpers.css.cjs");
+const transitions = require("./transitions.cjs");
+const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/radio.css.ts", "@blockle/blocks");
+const radio = makeComponentTheme.makeComponentTheme("radio", {
+  base: css.style([
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      inlineSize: 24,
+      blockSize: 24,
+      borderRadius: 12,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color ${vars_css.vars.transition.fast}, box-shadow ${vars_css.vars.transition.fast}`
+        }
+      },
+      ":hover": {
+        backgroundColor: vars_css.vars.color.primaryDark
+      },
+      selectors: {
+        "&:has(input:checked):not(:hover)": {
+          backgroundColor: vars_css.vars.color.primary
+        }
+      }
+    },
+    sprinkles_css.atoms({
+      backgroundColor: "primaryLight"
+    }),
+    helpers_css.focusable
+  ]),
+  icon: css.style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${vars_css.vars.transition.normal} ${transitions.bounceOut}`
+      }
+    },
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }),
+  label: sprinkles_css.atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.radio = radio;

package/dist/themes/momotaro/components/radio.css.d.ts

@@ -0,0 +1 @@
+export declare const radio: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').RadioTheme> | undefined;

package/dist/{styles/themes/momotaro/components/radio.css.mjs → themes/momotaro/components/radio.css.js}

@@ -1,35 +1,39 @@
 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";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusable } from "./helpers.css.js";
+import { bounceOut } from "./transitions.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
 setFileScope("src/themes/momotaro/components/radio.css.ts", "@blockle/blocks");
 const radio = makeComponentTheme("radio", {
-  base: style([{
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    inlineSize: 24,
-    blockSize: 24,
-    borderRadius: 12,
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
+  base: style([
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      inlineSize: 24,
+      blockSize: 24,
+      borderRadius: 12,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color ${vars.transition.fast}, box-shadow ${vars.transition.fast}`
+        }
+      },
+      ":hover": {
+        backgroundColor: vars.color.primaryDark
+      },
+      selectors: {
+        "&:has(input:checked):not(:hover)": {
+          backgroundColor: vars.color.primary
+        }
       }
     },
-    ":hover": {
-      backgroundColor: vars.color.primaryDark
-    },
-    selectors: {
-      "&:has(input:checked):not(:hover)": {
-        backgroundColor: vars.color.primary
-      }
-    }
-  }, atoms({
-    backgroundColor: "primaryLight"
-  }), focusable], "radio_base"),
+    atoms({
+      backgroundColor: "primaryLight"
+    }),
+    focusable
+  ]),
   icon: style({
     height: 12,
     width: 12,
@@ -46,7 +50,7 @@ const radio = makeComponentTheme("radio", {
         transform: "scale(1)"
       }
     }
-  }, "radio_icon"),
+  }),
   label: atoms({
     display: "flex",
     flexDirection: "row",

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const style = require("../../../lib/css/style/style.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const helpers_css = require("./helpers.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
+const select = makeComponentTheme.makeComponentTheme("select", {
+  select: style.style([
+    {
+      color: "text",
+      padding: "large",
+      border: "none",
+      outline: "none",
+      backgroundColor: "white",
+      borderRadius: "medium",
+      boxShadow: "medium",
+      minHeight: 56,
+      transitionDuration: vars_css.vars.transition.fast,
+      transitionProperty: "box-shadow",
+      ":focus-within": {
+        outline: "2px solid transparent",
+        outlineOffset: "2px",
+        boxShadow: `${vars_css.vars.shadow.small}, ${vars_css.vars.focus.boxShadow}`
+      }
+    },
+    helpers_css.focusable
+  ]),
+  variants: {
+    variant: {
+      outline: style.style({
+        borderWidth: "small",
+        borderStyle: "solid",
+        borderColor: "primary"
+      }),
+      solid: style.style({})
+    }
+  },
+  icon: style.style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+fileScope.endFileScope();
+exports.select = select;

package/dist/themes/momotaro/components/select.css.d.ts

@@ -0,0 +1 @@
+export declare const select: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').SelectTheme> | undefined;

package/dist/themes/momotaro/components/select.css.js

@@ -0,0 +1,48 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "../../../lib/css/style/style.js";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusable } from "./helpers.css.js";
+setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
+const select = makeComponentTheme("select", {
+  select: style([
+    {
+      color: "text",
+      padding: "large",
+      border: "none",
+      outline: "none",
+      backgroundColor: "white",
+      borderRadius: "medium",
+      boxShadow: "medium",
+      minHeight: 56,
+      transitionDuration: vars.transition.fast,
+      transitionProperty: "box-shadow",
+      ":focus-within": {
+        outline: "2px solid transparent",
+        outlineOffset: "2px",
+        boxShadow: `${vars.shadow.small}, ${vars.focus.boxShadow}`
+      }
+    },
+    focusable
+  ]),
+  variants: {
+    variant: {
+      outline: style({
+        borderWidth: "small",
+        borderStyle: "solid",
+        borderColor: "primary"
+      }),
+      solid: style({})
+    }
+  },
+  icon: style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+endFileScope();
+export {
+  select
+};

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const style = require("../../../lib/css/style/style.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const helpers_css = require("./helpers.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
+const trackBackground = css.createVar();
+const filledTrackBackground = css.createVar();
+const thumbBackground = css.createVar();
+const thumbActive = css.createVar();
+const slider = makeComponentTheme.makeComponentTheme("slider", {
+  base: style.style({
+    blockSize: "20px"
+  }),
+  track: style.style({
+    blockSize: "4px",
+    backgroundColor: trackBackground,
+    borderRadius: "small"
+  }),
+  filledTrack: style.style({
+    backgroundColor: filledTrackBackground
+  }),
+  thumb: style.style([
+    {
+      backgroundColor: thumbBackground,
+      borderRadius: "50%",
+      height: "16px",
+      width: "16px",
+      boxShadow: `0 0 0 0px color-mix(in srgb,  ${vars_css.vars.color.primaryLight}, transparent 0%)`,
+      vars: {
+        [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${vars_css.vars.color.primaryLight}, transparent 20%)`
+      },
+      ":hover": {
+        boxShadow: thumbActive
+      },
+      ":focus-visible": {
+        boxShadow: thumbActive
+      },
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: "box-shadow 0.2s"
+        }
+      }
+    },
+    helpers_css.focusable
+  ]),
+  variants: {
+    size: {
+      small: style.style({
+        inlineSize: "100px"
+      }),
+      medium: style.style({
+        inlineSize: "200px"
+      }),
+      large: style.style({
+        inlineSize: "300px"
+      })
+    },
+    colorScheme: {
+      primary: style.style({
+        vars: {
+          [trackBackground]: vars_css.vars.color.primaryLight,
+          [filledTrackBackground]: vars_css.vars.color.primary,
+          [thumbBackground]: vars_css.vars.color.primary
+        }
+      }),
+      secondary: style.style({
+        vars: {
+          [trackBackground]: vars_css.vars.color.primaryLight,
+          [filledTrackBackground]: vars_css.vars.color.secondary,
+          [thumbBackground]: vars_css.vars.color.secondary
+        }
+      })
+    },
+    disabled: style.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.d.ts

@@ -0,0 +1 @@
+export declare const slider: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').SliderTheme> | undefined;

package/dist/{styles/themes/momotaro/components/slider.css.mjs → themes/momotaro/components/slider.css.js}

@@ -1,14 +1,14 @@
 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";
+import { style } from "../../../lib/css/style/style.js";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusable } from "./helpers.css.js";
 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 trackBackground = createVar();
+const filledTrackBackground = createVar();
+const thumbBackground = createVar();
+const thumbActive = createVar();
 const slider = makeComponentTheme("slider", {
   base: style({
     blockSize: "20px"
@@ -21,27 +21,30 @@ const slider = makeComponentTheme("slider", {
   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"
+  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]),
+    },
+    focusable
+  ]),
   variants: {
     size: {
       small: style({

package/dist/{styles/themes → themes}/momotaro/components/spinner.css.cjs

@@ -1,7 +1,8 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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 makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
 const spinAnimation = css.keyframes({
   "0%": {
@@ -10,8 +11,8 @@ const spinAnimation = css.keyframes({
   "100%": {
     transform: "rotate(360deg)"
   }
-}, "spinAnimation");
-const spinner = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
+});
+const spinner = makeComponentTheme.makeComponentTheme("spinner", {
   base: css.style({
     aspectRatio: "1 / 1",
     overflow: "hidden",
@@ -20,19 +21,19 @@ const spinner = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("spin
     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: {

package/dist/themes/momotaro/components/spinner.css.d.ts

@@ -0,0 +1 @@
+export declare const spinner: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').SpinnerTheme> | undefined;

package/dist/{styles/themes/momotaro/components/spinner.css.mjs → themes/momotaro/components/spinner.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, keyframes } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
 setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
 const spinAnimation = keyframes({
   "0%": {
@@ -9,7 +9,7 @@ const spinAnimation = keyframes({
   "100%": {
     transform: "rotate(360deg)"
   }
-}, "spinAnimation");
+});
 const spinner = makeComponentTheme("spinner", {
   base: style({
     aspectRatio: "1 / 1",
@@ -19,19 +19,19 @@ const spinner = makeComponentTheme("spinner", {
     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: {

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const style = require("../../../lib/css/style/style.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const helpers_css = require("./helpers.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
+const activeScaleFactor = css.createVar();
+const switchTheme = makeComponentTheme.makeComponentTheme("switch", {
+  base: style.style([
+    {
+      width: 52,
+      height: 32,
+      borderRadius: "xlarge",
+      backgroundColor: "textLight",
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color 120ms linear, box-shadow ${vars_css.vars.transition.fast}`
+        }
+      },
+      selectors: {
+        '&[data-checked="true"]': {
+          backgroundColor: vars_css.vars.color.secondary
+        }
+      },
+      // Scale the switch when it's `:active`
+      vars: {
+        [activeScaleFactor]: "1"
+      },
+      ":active": {
+        vars: {
+          [activeScaleFactor]: "0.96"
+        }
+      }
+    },
+    helpers_css.focusable
+  ]),
+  slider: style.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.d.ts

@@ -0,0 +1 @@
+export declare const switchTheme: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').SwitchTheme> | undefined;

package/dist/{styles/themes/momotaro/components/switch.css.mjs → themes/momotaro/components/switch.css.js}

@@ -1,37 +1,40 @@
 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";
+import { style } from "../../../lib/css/style/style.js";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusable } from "./helpers.css.js";
 setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
-const activeScaleFactor = createVar("activeScaleFactor");
+const activeScaleFactor = createVar();
 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": {
+  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]: "0.96"
+        [activeScaleFactor]: "1"
+      },
+      ":active": {
+        vars: {
+          [activeScaleFactor]: "0.96"
+        }
       }
-    }
-  }, focusable]),
+    },
+    focusable
+  ]),
   slider: style({
     width: 24,
     height: 24,