@blockle/blocks 0.11.0 → 0.11.1

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

@@ -0,0 +1,104 @@
+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 { clickable, focusRingColor } from "./helpers.css.mjs";
+setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
+const intentColor = createVar("intentColor");
+const hoverBackgroundColor = createVar("hoverBackgroundColor");
+const button = makeComponentTheme("button", {
+  base: style([{
+    display: "inline-flex",
+    placeItems: "center",
+    fontSize: "medium",
+    borderRadius: "medium",
+    fontWeight: "medium",
+    // Space between `startSlot | children | endSlot`
+    gap: "small",
+    selectors: {
+      "&:hover:not(:disabled)": {
+        backgroundColor: hoverBackgroundColor
+      }
+    }
+  }, clickable]),
+  variants: {
+    variant: {
+      solid: style({
+        color: vars.color.white,
+        backgroundColor: intentColor,
+        border: "none"
+      }),
+      outline: style({
+        color: intentColor,
+        borderWidth: "small",
+        borderStyle: "solid",
+        borderColor: intentColor,
+        background: "transparent"
+      }),
+      ghost: style({
+        color: intentColor,
+        background: "transparent"
+      })
+    },
+    size: {
+      small: style({
+        paddingInline: "large",
+        height: 40
+      }),
+      medium: style({
+        paddingInline: "xlarge",
+        height: 56
+      }),
+      large: style({
+        paddingInline: "xlarge",
+        height: 72
+      })
+    },
+    intent: {
+      neutral: style({
+        vars: {
+          [intentColor]: vars.color.primary,
+          [hoverBackgroundColor]: vars.color.primaryLight
+        }
+      }),
+      danger: style({
+        vars: {
+          [intentColor]: vars.color.danger,
+          [hoverBackgroundColor]: "#fff8f7",
+          [focusRingColor]: vars.color.danger
+        }
+      })
+    }
+  },
+  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",
+    intent: "neutral"
+  }
+});
+endFileScope();
+export {
+  button
+};

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

@@ -0,0 +1,59 @@
+"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", "@blockle/blocks");
+const checkbox = styles_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 ${styles_lib_theme_vars_css_cjs.vars.transition.normal}, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+      }
+    },
+    selectors: {
+      "&:hover:not(:has(input:disabled))": {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
+      },
+      "&:has(input:checked)": {
+        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({
+    inlineSize: "1rem",
+    blockSize: "1rem",
+    color: "white",
+    transform: "scale(0)",
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${styles_lib_theme_vars_css_cjs.vars.transition.normal} ${styles_themes_momotaro_components_transitions_cjs.bounceOut}`
+      }
+    }
+  }, "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,60 @@
+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", "@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], "checkbox_base"),
+  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}`
+      }
+    }
+  }, "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

@@ -0,0 +1,68 @@
+"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_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
+const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
+  dialog: css.style([styles_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",
+    selectors: {
+      "&[data-open]": {
+        transform: "scale(1)"
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transform: "scale(0.9)",
+        transition: "transform 160ms"
+      }
+    }
+  }], "dialog_dialog"),
+  backdrop: css.style({
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    selectors: {
+      "&[data-open]": {
+        opacity: 1
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        opacity: 0,
+        transition: "opacity 160ms"
+      }
+    }
+  }, "dialog_backdrop"),
+  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: {
+    size: "small"
+  }
+});
+fileScope.endFileScope();
+exports.dialog = dialog;

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

@@ -0,0 +1,69 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+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",
+    selectors: {
+      "&[data-open]": {
+        transform: "scale(1)"
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transform: "scale(0.9)",
+        transition: "transform 160ms"
+      }
+    }
+  }], "dialog_dialog"),
+  backdrop: style({
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    selectors: {
+      "&[data-open]": {
+        opacity: 1
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        opacity: 0,
+        transition: "opacity 160ms"
+      }
+    }
+  }, "dialog_backdrop"),
+  variants: {
+    size: {
+      small: style({
+        width: "400px",
+        maxWidth: "min(400px, 90%)"
+      }, "dialog_variants_size_small"),
+      medium: style({
+        width: "600px",
+        maxWidth: "min(600px, 90%)"
+      }, "dialog_variants_size_medium"),
+      large: style({
+        width: "800px",
+        maxWidth: "min(800px, 90%)"
+      }, "dialog_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+endFileScope();
+export {
+  dialog
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
+const divider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
+  defaultVariants: {
+    color: "textLight"
+  }
+});
+fileScope.endFileScope();
+exports.divider = divider;

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

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

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

@@ -0,0 +1,53 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/dropdown.css.ts", "@blockle/blocks");
+const dropdown = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dropdown", {
+  base: styles_lib_css_style_style_cjs.style({
+    backgroundColor: "white",
+    borderRadius: "small",
+    boxShadow: "medium",
+    padding: "medium",
+    vars: {
+      "--spacing": "0.5rem"
+    },
+    selectors: {
+      "&[data-open]": {
+        transform: "scale(1)",
+        opacity: 1
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transform: "scale(0.95)",
+        transition: "opacity 80ms linear, transform 80ms",
+        opacity: 0
+      }
+    }
+  }),
+  variants: {
+    variant: {
+      solid: styles_lib_css_style_style_cjs.style({
+        backgroundColor: "white",
+        border: "none",
+        boxShadow: "medium",
+        color: "black",
+        padding: "medium"
+      }),
+      outline: styles_lib_css_style_style_cjs.style({
+        backgroundColor: "transparent",
+        border: "1px solid black",
+        boxShadow: "none",
+        color: "black",
+        padding: "medium"
+      })
+    }
+  },
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+fileScope.endFileScope();
+exports.dropdown = dropdown;

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

@@ -0,0 +1,54 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "../../../lib/css/style/style.mjs";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+setFileScope("src/themes/momotaro/components/dropdown.css.ts", "@blockle/blocks");
+const dropdown = makeComponentTheme("dropdown", {
+  base: style({
+    backgroundColor: "white",
+    borderRadius: "small",
+    boxShadow: "medium",
+    padding: "medium",
+    vars: {
+      "--spacing": "0.5rem"
+    },
+    selectors: {
+      "&[data-open]": {
+        transform: "scale(1)",
+        opacity: 1
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transform: "scale(0.95)",
+        transition: "opacity 80ms linear, transform 80ms",
+        opacity: 0
+      }
+    }
+  }),
+  variants: {
+    variant: {
+      solid: style({
+        backgroundColor: "white",
+        border: "none",
+        boxShadow: "medium",
+        color: "black",
+        padding: "medium"
+      }),
+      outline: style({
+        backgroundColor: "transparent",
+        border: "1px solid black",
+        boxShadow: "none",
+        color: "black",
+        padding: "medium"
+      })
+    }
+  },
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+endFileScope();
+export {
+  dropdown
+};

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

@@ -0,0 +1,43 @@
+"use strict";
+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", "@blockle/blocks");
+const focusRingColor = css.createVar("focusRingColor");
+const focusable = css.style({
+  "@media": {
+    "(prefers-reduced-motion: no-preference)": {
+      transition: `box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+    }
+  },
+  ":focus-visible": {
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`
+  },
+  selectors: {
+    "&:disabled, &[disabled]": {
+      opacity: 0.5,
+      cursor: "auto",
+      pointerEvents: "none"
+    },
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: styles_lib_theme_vars_css_cjs.vars.focus.boxShadow
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
+  }
+}, "focusable");
+const clickable = css.style([focusable, {
+  ":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

@@ -0,0 +1,44 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar, style, fallbackVar } from "@vanilla-extract/css";
+import { vars } from "../../../lib/theme/vars.css.mjs";
+setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
+const focusRingColor = createVar("focusRingColor");
+const focusable = style({
+  "@media": {
+    "(prefers-reduced-motion: no-preference)": {
+      transition: `box-shadow ${vars.transition.fast}`
+    }
+  },
+  ":focus-visible": {
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`
+  },
+  selectors: {
+    "&:disabled, &[disabled]": {
+      opacity: 0.5,
+      cursor: "auto",
+      pointerEvents: "none"
+    },
+    "&:has(input:focus-visible)": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: vars.focus.boxShadow
+    },
+    "&:has(input:disabled)": {
+      opacity: 0.5,
+      cursor: "auto"
+    }
+  }
+}, "focusable");
+const clickable = style([focusable, {
+  ":active": {
+    transform: "scale(0.975)"
+  }
+}], "clickable");
+endFileScope();
+export {
+  clickable,
+  focusRingColor,
+  focusable
+};

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

@@ -0,0 +1,32 @@
+"use strict";
+const styles_themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
+const styles_themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
+const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
+const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
+const styles_themes_momotaro_components_dropdown_css_cjs = require("./dropdown.css.cjs");
+const styles_themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
+const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
+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_select_css_cjs = require("./select.css.cjs");
+const styles_themes_momotaro_components_slider_css_cjs = require("./slider.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,
+  dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
+  divider: styles_themes_momotaro_components_divider_css_cjs.divider,
+  dropdown: styles_themes_momotaro_components_dropdown_css_cjs.dropdown,
+  input: styles_themes_momotaro_components_input_css_cjs.input,
+  label: styles_themes_momotaro_components_label_css_cjs.label,
+  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,
+  select: styles_themes_momotaro_components_select_css_cjs.select,
+  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
+  switch: styles_themes_momotaro_components_switch_css_cjs.switchTheme,
+  slider: styles_themes_momotaro_components_slider_css_cjs.slider
+};
+exports.components = components;

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

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