@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

package/dist/lib/utils/dom.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Check if the element has animation duration.
+ */
+export declare function hasAnimationDuration(element: HTMLElement | null): boolean;

package/dist/lib/utils/dom.js

@@ -0,0 +1,13 @@
+function hasAnimationDuration(element) {
+  if (!element) {
+    return false;
+  }
+  const style = window.getComputedStyle(element);
+  return hasDuration(style.transitionDuration) || hasDuration(style.animationDuration);
+}
+function hasDuration(duration) {
+  return duration.split(",").map((part) => Number.parseFloat(part.trim())).some((part) => part > 0);
+}
+export {
+  hasAnimationDuration
+};

package/dist/lib/utils/helpers.d.ts

@@ -0,0 +1,9 @@
+export type AnyString = string & {};
+/**
+ * Suggest a type for a string literal but also allow any string.
+ */
+export type OptionalLiteral<T extends string> = T | AnyString;
+export type RecordLike = Record<string | number, unknown>;
+export type IsStringUnion<T> = T extends string ? string extends T ? false : true : false;
+export type IsNumberUnion<T> = T extends number ? number extends T ? false : true : false;
+export type IsUnion<T> = IsStringUnion<T> extends true ? true : IsNumberUnion<T> extends true ? true : false;

package/dist/lib/utils/math.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function roundToPrecision(value, precision) {
+  const factor = 10 ** precision;
+  return Math.round(value * factor) / factor;
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
+exports.getBoundValue = getBoundValue;
+exports.roundToPrecision = roundToPrecision;

package/dist/lib/utils/math.d.ts

@@ -0,0 +1,2 @@
+export declare function roundToPrecision(value: number, precision: number): number;
+export declare function getBoundValue(newValue: number, min: number, max: number, step: number): number;

package/dist/lib/utils/math.js

@@ -0,0 +1,13 @@
+function roundToPrecision(value, precision) {
+  const factor = 10 ** precision;
+  return Math.round(value * factor) / factor;
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
+export {
+  getBoundValue,
+  roundToPrecision
+};

package/dist/lib/utils/utils.d.ts

@@ -0,0 +1,3 @@
+import { Atoms } from '../css/atoms';
+export type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
+export declare function isObjectLike<T extends Record<string, unknown>>(value: T): value is T;

package/dist/reset.cjs

@@ -1,3 +1,3 @@
 "use strict";
-require("./styles/lib/css/atoms/sprinkles.css.cjs");
-require("./styles/lib/css/reset/reset.css.cjs");
+require("./lib/css/atoms/sprinkles.css.cjs");
+require("./lib/css/reset/reset.css.cjs");

package/dist/reset.js

@@ -0,0 +1,2 @@
+import "./lib/css/atoms/sprinkles.css.js";
+import "./lib/css/reset/reset.css.js";

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

@@ -0,0 +1,110 @@
+"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/button.css.ts", "@blockle/blocks");
+const intentColor = css.createVar();
+const hoverBackgroundColor = css.createVar();
+const button = makeComponentTheme.makeComponentTheme("button", {
+  base: style.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
+        }
+      }
+    },
+    helpers_css.clickable
+  ]),
+  variants: {
+    variant: {
+      solid: style.style({
+        color: vars_css.vars.color.white,
+        backgroundColor: intentColor,
+        border: "none"
+      }),
+      outline: style.style({
+        color: intentColor,
+        borderWidth: "small",
+        borderStyle: "solid",
+        borderColor: intentColor,
+        background: "transparent"
+      }),
+      ghost: style.style({
+        color: intentColor,
+        background: "transparent"
+      })
+    },
+    size: {
+      small: style.style({
+        paddingInline: "large",
+        height: 40
+      }),
+      medium: style.style({
+        paddingInline: "xlarge",
+        height: 56
+      }),
+      large: style.style({
+        paddingInline: "xlarge",
+        height: 72
+      })
+    },
+    intent: {
+      neutral: style.style({
+        vars: {
+          [intentColor]: vars_css.vars.color.primary,
+          [hoverBackgroundColor]: vars_css.vars.color.primaryLight
+        }
+      }),
+      danger: style.style({
+        vars: {
+          [intentColor]: vars_css.vars.color.danger,
+          [hoverBackgroundColor]: "#fff8f7",
+          [helpers_css.focusRingColor]: vars_css.vars.color.danger
+        }
+      })
+    }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        variant: "solid",
+        intent: "neutral"
+      },
+      style: style.style({
+        vars: {
+          [hoverBackgroundColor]: vars_css.vars.color.primaryDark
+        }
+      })
+    },
+    {
+      variants: {
+        variant: "solid",
+        intent: "danger"
+      },
+      style: style.style({
+        vars: {
+          [hoverBackgroundColor]: "#f9b1a9"
+        }
+      })
+    }
+  ],
+  defaultVariants: {
+    size: "small",
+    variant: "solid",
+    intent: "neutral"
+  }
+});
+fileScope.endFileScope();
+exports.button = button;

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

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

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

@@ -1,27 +1,30 @@
 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 { focusRingColor, clickable } 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 { focusRingColor, clickable } from "./helpers.css.js";
 setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
-const intentColor = createVar("intentColor");
-const hoverBackgroundColor = createVar("hoverBackgroundColor");
+const intentColor = createVar();
+const hoverBackgroundColor = createVar();
 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
+  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]),
+    },
+    clickable
+  ]),
   variants: {
     variant: {
       solid: style({
@@ -71,27 +74,30 @@ const button = makeComponentTheme("button", {
       })
     }
   },
-  compoundVariants: [{
-    variants: {
-      variant: "solid",
-      intent: "neutral"
-    },
-    style: style({
-      vars: {
-        [hoverBackgroundColor]: vars.color.primaryDark
-      }
-    })
-  }, {
-    variants: {
-      variant: "solid",
-      intent: "danger"
+  compoundVariants: [
+    {
+      variants: {
+        variant: "solid",
+        intent: "neutral"
+      },
+      style: style({
+        vars: {
+          [hoverBackgroundColor]: vars.color.primaryDark
+        }
+      })
     },
-    style: style({
-      vars: {
-        [hoverBackgroundColor]: "#f9b1a9"
-      }
-    })
-  }],
+    {
+      variants: {
+        variant: "solid",
+        intent: "danger"
+      },
+      style: style({
+        vars: {
+          [hoverBackgroundColor]: "#f9b1a9"
+        }
+      })
+    }
+  ],
   defaultVariants: {
     size: "small",
     variant: "solid",

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

@@ -0,0 +1,64 @@
+"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/checkbox.css.ts", "@blockle/blocks");
+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}`
+        }
+      },
+      selectors: {
+        "&:hover:not(:has(input:disabled))": {
+          backgroundColor: vars_css.vars.color.primaryDark
+        },
+        "&:has(input:checked)": {
+          backgroundColor: vars_css.vars.color.primary
+        }
+      }
+    },
+    sprinkles_css.atoms({
+      backgroundColor: "primaryLight",
+      borderRadius: "small"
+    }),
+    helpers_css.focusable
+  ]),
+  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 ${vars_css.vars.transition.normal} ${transitions.bounceOut}`
+      }
+    }
+  }),
+  label: sprinkles_css.atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.checkbox = checkbox;

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

@@ -0,0 +1,82 @@
+"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 sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
+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)"
+      },
+      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: css.style({
+        width: "400px",
+        maxWidth: "min(400px, 90%)"
+      }),
+      medium: css.style({
+        width: "600px",
+        maxWidth: "min(600px, 90%)"
+      }),
+      large: css.style({
+        width: "800px",
+        maxWidth: "min(800px, 90%)"
+      })
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+fileScope.endFileScope();
+exports.dialog = dialog;

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/{styles/themes → 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 styles_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 = styles_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/{styles/themes/momotaro/components/divider.css.mjs → themes/momotaro/components/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"
   }