@blockle/blocks 0.20.0-alpha1 → 0.20.0-alpha1.0

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

@@ -1,36 +1,41 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
-const themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+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/checkbox.css.ts", "@blockle/blocks");
-const checkbox = lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox", {
-  base: css.style([{
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    inlineSize: 24,
-    blockSize: 24,
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color ${lib_theme_vars_css_cjs.vars.transition.normal}, box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
-      }
-    },
-    selectors: {
-      "&:hover:not(:has(input:disabled))": {
-        backgroundColor: lib_theme_vars_css_cjs.vars.color.primaryDark
+const checkbox = makeComponentTheme.makeComponentTheme("checkbox", {
+  base: css.style([
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      inlineSize: 24,
+      blockSize: 24,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color ${vars_css.vars.transition.normal}, box-shadow ${vars_css.vars.transition.fast}`
+        }
       },
-      "&:has(input:checked)": {
-        backgroundColor: lib_theme_vars_css_cjs.vars.color.primary
+      selectors: {
+        "&:hover:not(:has(input:disabled))": {
+          backgroundColor: vars_css.vars.color.primaryDark
+        },
+        "&:has(input:checked)": {
+          backgroundColor: vars_css.vars.color.primary
+        }
       }
-    }
-  }, lib_css_atoms_sprinkles_css_cjs.atoms({
-    backgroundColor: "primaryLight",
-    borderRadius: "small"
-  }), themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_base"),
+    },
+    sprinkles_css.atoms({
+      backgroundColor: "primaryLight",
+      borderRadius: "small"
+    }),
+    helpers_css.focusable
+  ]),
   icon: css.style({
     inlineSize: "1rem",
     blockSize: "1rem",
@@ -43,11 +48,11 @@ const checkbox = lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox",
     },
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        transition: `transform ${lib_theme_vars_css_cjs.vars.transition.normal} ${themes_momotaro_components_transitions_cjs.bounceOut}`
+        transition: `transform ${vars_css.vars.transition.normal} ${transitions.bounceOut}`
       }
     }
-  }, "checkbox_icon"),
-  label: lib_css_atoms_sprinkles_css_cjs.atoms({
+  }),
+  label: sprinkles_css.atoms({
     display: "flex",
     flexDirection: "row",
     padding: "xsmall",

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

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

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

@@ -0,0 +1,64 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+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/checkbox.css.ts", "@blockle/blocks");
+const checkbox = makeComponentTheme("checkbox", {
+  base: style([
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      inlineSize: 24,
+      blockSize: 24,
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transition: `background-color ${vars.transition.normal}, box-shadow ${vars.transition.fast}`
+        }
+      },
+      selectors: {
+        "&:hover:not(:has(input:disabled))": {
+          backgroundColor: vars.color.primaryDark
+        },
+        "&:has(input:checked)": {
+          backgroundColor: vars.color.primary
+        }
+      }
+    },
+    atoms({
+      backgroundColor: "primaryLight",
+      borderRadius: "small"
+    }),
+    focusable
+  ]),
+  icon: style({
+    inlineSize: "1rem",
+    blockSize: "1rem",
+    color: "white",
+    transform: "scale(0)",
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${vars.transition.normal} ${bounceOut}`
+      }
+    }
+  }),
+  label: atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+endFileScope();
+export {
+  checkbox
+};

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

@@ -1,73 +1,77 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
-const dialog = lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
-  dialog: css.style([lib_css_atoms_sprinkles_css_cjs.atoms({
-    display: "flex",
-    flexDirection: "column",
-    padding: "gutter",
-    border: "none",
-    overflow: "auto",
-    borderRadius: "medium",
-    boxShadow: "large"
-  }), {
-    maxHeight: "90%",
-    minWidth: "300px",
-    "::backdrop": {
-      backgroundColor: "rgba(0, 0, 0, 0.5)"
-    },
-    selectors: {
-      "&[open]": {
-        transform: "translate(0, 0)",
-        opacity: 1,
-        // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
-        "@starting-style": {
-          transform: "translate(0, -120px)",
-          opacity: 0
-        }
+const dialog = makeComponentTheme.makeComponentTheme("dialog", {
+  dialog: css.style([
+    sprinkles_css.atoms({
+      display: "flex",
+      flexDirection: "column",
+      padding: "gutter",
+      border: "none",
+      overflow: "auto",
+      borderRadius: "medium",
+      boxShadow: "large"
+    }),
+    {
+      maxHeight: "90%",
+      minWidth: "300px",
+      "::backdrop": {
+        backgroundColor: "rgba(0, 0, 0, 0.5)"
       },
-      "&[open]::backdrop": {
-        opacity: 1,
-        "@starting-style": {
-          opacity: 0
+      selectors: {
+        "&[open]": {
+          transform: "translate(0, 0)",
+          opacity: 1,
+          // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+          "@starting-style": {
+            transform: "translate(0, -120px)",
+            opacity: 0
+          }
+        },
+        "&[open]::backdrop": {
+          opacity: 1,
+          "@starting-style": {
+            opacity: 0
+          }
         }
-      }
-    },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        // Ending style
-        transform: "translate(0, -120px)",
-        opacity: 0,
-        transitionBehavior: "allow-discrete",
-        transitionProperty: "opacity, transform, overlay, display",
-        transitionDuration: "240ms, 160ms, 240ms, 240ms",
-        "::backdrop": {
+      },
+      // Apply the animation only if the user has not requested reduced motion
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          // Ending style
+          transform: "translate(0, -120px)",
           opacity: 0,
           transitionBehavior: "allow-discrete",
-          transitionProperty: "opacity, overlay, display",
-          transitionDuration: "160ms, 240ms, 240ms"
+          transitionProperty: "opacity, transform, overlay, display",
+          transitionDuration: "240ms, 160ms, 240ms, 240ms",
+          "::backdrop": {
+            opacity: 0,
+            transitionBehavior: "allow-discrete",
+            transitionProperty: "opacity, overlay, display",
+            transitionDuration: "160ms, 240ms, 240ms"
+          }
         }
       }
     }
-  }], "dialog_dialog"),
+  ]),
   variants: {
     size: {
       small: css.style({
         width: "400px",
         maxWidth: "min(400px, 90%)"
-      }, "dialog_variants_size_small"),
+      }),
       medium: css.style({
         width: "600px",
         maxWidth: "min(600px, 90%)"
-      }, "dialog_variants_size_medium"),
+      }),
       large: css.style({
         width: "800px",
         maxWidth: "min(800px, 90%)"
-      }, "dialog_variants_size_large")
+      })
     }
   },
   defaultVariants: {

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

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

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

@@ -0,0 +1,82 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
+setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
+const dialog = makeComponentTheme("dialog", {
+  dialog: style([
+    atoms({
+      display: "flex",
+      flexDirection: "column",
+      padding: "gutter",
+      border: "none",
+      overflow: "auto",
+      borderRadius: "medium",
+      boxShadow: "large"
+    }),
+    {
+      maxHeight: "90%",
+      minWidth: "300px",
+      "::backdrop": {
+        backgroundColor: "rgba(0, 0, 0, 0.5)"
+      },
+      selectors: {
+        "&[open]": {
+          transform: "translate(0, 0)",
+          opacity: 1,
+          // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
+          "@starting-style": {
+            transform: "translate(0, -120px)",
+            opacity: 0
+          }
+        },
+        "&[open]::backdrop": {
+          opacity: 1,
+          "@starting-style": {
+            opacity: 0
+          }
+        }
+      },
+      // Apply the animation only if the user has not requested reduced motion
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          // Ending style
+          transform: "translate(0, -120px)",
+          opacity: 0,
+          transitionBehavior: "allow-discrete",
+          transitionProperty: "opacity, transform, overlay, display",
+          transitionDuration: "240ms, 160ms, 240ms, 240ms",
+          "::backdrop": {
+            opacity: 0,
+            transitionBehavior: "allow-discrete",
+            transitionProperty: "opacity, overlay, display",
+            transitionDuration: "160ms, 240ms, 240ms"
+          }
+        }
+      }
+    }
+  ]),
+  variants: {
+    size: {
+      small: style({
+        width: "400px",
+        maxWidth: "min(400px, 90%)"
+      }),
+      medium: style({
+        width: "600px",
+        maxWidth: "min(600px, 90%)"
+      }),
+      large: style({
+        width: "800px",
+        maxWidth: "min(800px, 90%)"
+      })
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+endFileScope();
+export {
+  dialog
+};

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

@@ -1,12 +1,13 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
-const divider = lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
+const divider = makeComponentTheme.makeComponentTheme("divider", {
   base: css.style({
     blockSize: 1
-  }, "divider_base"),
+  }),
   defaultVariants: {
     color: "textLight"
   }

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

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

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

@@ -1,11 +1,11 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
 setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
 const divider = makeComponentTheme("divider", {
   base: style({
     blockSize: 1
-  }, "divider_base"),
+  }),
   defaultVariants: {
     color: "textLight"
   }

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

@@ -1,13 +1,14 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
-const focusRingColor = css.createVar("focusRingColor");
+const focusRingColor = css.createVar();
 const focusable = css.style({
   "@media": {
     "(prefers-reduced-motion: no-preference)": {
-      transition: `box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
+      transition: `box-shadow ${vars_css.vars.transition.fast}`
     }
   },
   ":focus-visible": {
@@ -24,19 +25,22 @@ const focusable = css.style({
     "&:has(input:focus-visible)": {
       outline: "2px solid transparent",
       outlineOffset: "2px",
-      boxShadow: lib_theme_vars_css_cjs.vars.focus.boxShadow
+      boxShadow: vars_css.vars.focus.boxShadow
     },
     "&:has(input:disabled)": {
       opacity: 0.5,
       cursor: "auto"
     }
   }
-}, "focusable");
-const clickable = css.style([focusable, {
-  ":active": {
-    transform: "scale(0.975)"
+});
+const clickable = css.style([
+  focusable,
+  {
+    ":active": {
+      transform: "scale(0.975)"
+    }
   }
-}], "clickable");
+]);
 fileScope.endFileScope();
 exports.clickable = clickable;
 exports.focusRingColor = focusRingColor;

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

@@ -0,0 +1,8 @@
+export declare const focusRingColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+/**
+ * NOTE: When the original element has a transition, make sure to include
+ * `box-shadow ${vars.transition.fast}` in the transition property for the
+ * focus transition to work correctly.
+ */
+export declare const focusable: string;
+export declare const clickable: string;

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

@@ -1,8 +1,8 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, fallbackVar, createVar } from "@vanilla-extract/css";
-import { vars } from "../../../lib/theme/vars.css.mjs";
+import { vars } from "../../../lib/theme/vars.css.js";
 setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
-const focusRingColor = createVar("focusRingColor");
+const focusRingColor = createVar();
 const focusable = style({
   "@media": {
     "(prefers-reduced-motion: no-preference)": {
@@ -30,12 +30,15 @@ const focusable = style({
       cursor: "auto"
     }
   }
-}, "focusable");
-const clickable = style([focusable, {
-  ":active": {
-    transform: "scale(0.975)"
+});
+const clickable = style([
+  focusable,
+  {
+    ":active": {
+      transform: "scale(0.975)"
+    }
   }
-}], "clickable");
+]);
 endFileScope();
 export {
   clickable,

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

@@ -1,34 +1,35 @@
 "use strict";
-const themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
-const themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
-const themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
-const themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
-const themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
-const themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
-const themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
-const themes_momotaro_components_popover_css_cjs = require("./popover.css.cjs");
-const themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
-const themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
-const themes_momotaro_components_select_css_cjs = require("./select.css.cjs");
-const themes_momotaro_components_slider_css_cjs = require("./slider.css.cjs");
-const themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
-const themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
-const themes_momotaro_components_tooltip_css_cjs = require("./tooltip.css.cjs");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const button_css = require("./button.css.cjs");
+const checkbox_css = require("./checkbox.css.cjs");
+const dialog_css = require("./dialog.css.cjs");
+const divider_css = require("./divider.css.cjs");
+const input_css = require("./input.css.cjs");
+const label_css = require("./label.css.cjs");
+const link_css = require("./link.css.cjs");
+const popover_css = require("./popover.css.cjs");
+const progress_css = require("./progress.css.cjs");
+const radio_css = require("./radio.css.cjs");
+const select_css = require("./select.css.cjs");
+const slider_css = require("./slider.css.cjs");
+const spinner_css = require("./spinner.css.cjs");
+const switch_css = require("./switch.css.cjs");
+const tooltip_css = require("./tooltip.css.cjs");
 const components = {
-  button: themes_momotaro_components_button_css_cjs.button,
-  checkbox: themes_momotaro_components_checkbox_css_cjs.checkbox,
-  dialog: themes_momotaro_components_dialog_css_cjs.dialog,
-  divider: themes_momotaro_components_divider_css_cjs.divider,
-  input: themes_momotaro_components_input_css_cjs.input,
-  label: themes_momotaro_components_label_css_cjs.label,
-  link: themes_momotaro_components_link_css_cjs.link,
-  popover: themes_momotaro_components_popover_css_cjs.popover,
-  progress: themes_momotaro_components_progress_css_cjs.progress,
-  radio: themes_momotaro_components_radio_css_cjs.radio,
-  select: themes_momotaro_components_select_css_cjs.select,
-  slider: themes_momotaro_components_slider_css_cjs.slider,
-  spinner: themes_momotaro_components_spinner_css_cjs.spinner,
-  switch: themes_momotaro_components_switch_css_cjs.switchTheme,
-  tooltip: themes_momotaro_components_tooltip_css_cjs.tooltip
+  button: button_css.button,
+  checkbox: checkbox_css.checkbox,
+  dialog: dialog_css.dialog,
+  divider: divider_css.divider,
+  input: input_css.input,
+  label: label_css.label,
+  link: link_css.link,
+  popover: popover_css.popover,
+  progress: progress_css.progress,
+  radio: radio_css.radio,
+  select: select_css.select,
+  slider: slider_css.slider,
+  spinner: spinner_css.spinner,
+  switch: switch_css.switchTheme,
+  tooltip: tooltip_css.tooltip
 };
 exports.components = components;

package/dist/themes/momotaro/components/index.d.ts

@@ -0,0 +1,2 @@
+import { ThemeComponentsStyles } from '../../../lib/theme/makeComponentTheme';
+export declare const components: ThemeComponentsStyles;

package/dist/themes/momotaro/components/index.js

@@ -0,0 +1,35 @@
+import { button } from "./button.css.js";
+import { checkbox } from "./checkbox.css.js";
+import { dialog } from "./dialog.css.js";
+import { divider } from "./divider.css.js";
+import { input } from "./input.css.js";
+import { label } from "./label.css.js";
+import { link } from "./link.css.js";
+import { popover } from "./popover.css.js";
+import { progress } from "./progress.css.js";
+import { radio } from "./radio.css.js";
+import { select } from "./select.css.js";
+import { slider } from "./slider.css.js";
+import { spinner } from "./spinner.css.js";
+import { switchTheme } from "./switch.css.js";
+import { tooltip } from "./tooltip.css.js";
+const components = {
+  button,
+  checkbox,
+  dialog,
+  divider,
+  input,
+  label,
+  link,
+  popover,
+  progress,
+  radio,
+  select,
+  slider,
+  spinner,
+  switch: switchTheme,
+  tooltip
+};
+export {
+  components
+};