@blockle/blocks 0.19.0 → 0.20.0-alpha1

package/dist/{styles/lib → lib}/css/atoms/atomicProperties.cjs

@@ -1,12 +1,12 @@
 "use strict";
-const styles_lib_theme_vars_css_cjs = require("../../theme/vars.css.cjs");
-const colorsWithCurrentColor = { ...styles_lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
+const lib_theme_vars_css_cjs = require("../../theme/vars.css.cjs");
+const colorsWithCurrentColor = { ...lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
 const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
 const unresponsiveProperties = {
   backgroundColor: colorsWithCurrentColor,
   borderColor: colorsWithCurrentColor,
-  borderRadius: styles_lib_theme_vars_css_cjs.vars.borderRadius,
-  borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth,
+  borderRadius: lib_theme_vars_css_cjs.vars.borderRadius,
+  borderWidth: lib_theme_vars_css_cjs.vars.borderWidth,
   border: ["none"],
   insetBlock: [0],
   insetBlockStart: [0],
@@ -14,13 +14,13 @@ const unresponsiveProperties = {
   insetInline: [0],
   insetInlineStart: [0],
   insetInlineEnd: [0],
-  boxShadow: styles_lib_theme_vars_css_cjs.vars.shadow,
+  boxShadow: lib_theme_vars_css_cjs.vars.shadow,
   color: colorsWithCurrentColor,
   cursor: ["auto", "pointer"],
-  fontFamily: styles_lib_theme_vars_css_cjs.vars.fontFamily,
+  fontFamily: lib_theme_vars_css_cjs.vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],
-  fontWeight: styles_lib_theme_vars_css_cjs.vars.fontWeight,
-  lineHeight: styles_lib_theme_vars_css_cjs.vars.lineHeight,
+  fontWeight: lib_theme_vars_css_cjs.vars.fontWeight,
+  lineHeight: lib_theme_vars_css_cjs.vars.lineHeight,
   blockSize: size,
   maxBlockSize: size,
   inlineSize: size,
@@ -33,18 +33,18 @@ const unresponsiveProperties = {
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
   textWrap: ["balance", "wrap"],
-  transition: styles_lib_theme_vars_css_cjs.vars.transition,
+  transition: lib_theme_vars_css_cjs.vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
   wordBreak: ["break-word"],
   wordWrap: ["break-word"]
 };
-const marginSpace = { auto: "auto", ...styles_lib_theme_vars_css_cjs.vars.space };
+const marginSpace = { auto: "auto", ...lib_theme_vars_css_cjs.vars.space };
 const responsiveProperties = {
   alignContent: ["stretch", "center", "flex-start", "flex-end"],
   alignItems: ["stretch", "center", "flex-start", "flex-end"],
   alignSelf: ["stretch", "center", "flex-start", "flex-end"],
-  columnGap: styles_lib_theme_vars_css_cjs.vars.space,
+  columnGap: lib_theme_vars_css_cjs.vars.space,
   display: [
     "none",
     "flex",
@@ -60,23 +60,29 @@ const responsiveProperties = {
   flexGrow: [0, 1],
   flexShrink: [0, 1],
   flexWrap: ["nowrap", "wrap"],
-  fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize,
-  gap: styles_lib_theme_vars_css_cjs.vars.space,
-  justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
+  fontSize: lib_theme_vars_css_cjs.vars.fontSize,
+  gap: lib_theme_vars_css_cjs.vars.space,
+  justifyContent: [
+    "flex-start",
+    "flex-end",
+    "center",
+    "space-between",
+    "space-around"
+  ],
   marginBlockStart: marginSpace,
   marginBlockEnd: marginSpace,
   marginInlineStart: marginSpace,
   marginInlineEnd: marginSpace,
   outline: ["none"],
-  padding: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingBlock: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingBlockStart: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingBlockEnd: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingInline: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingInlineStart: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingInlineEnd: styles_lib_theme_vars_css_cjs.vars.space,
+  padding: lib_theme_vars_css_cjs.vars.space,
+  paddingBlock: lib_theme_vars_css_cjs.vars.space,
+  paddingBlockStart: lib_theme_vars_css_cjs.vars.space,
+  paddingBlockEnd: lib_theme_vars_css_cjs.vars.space,
+  paddingInline: lib_theme_vars_css_cjs.vars.space,
+  paddingInlineStart: lib_theme_vars_css_cjs.vars.space,
+  paddingInlineEnd: lib_theme_vars_css_cjs.vars.space,
   position: ["relative", "fixed", "absolute", "sticky", "static"],
-  rowGap: styles_lib_theme_vars_css_cjs.vars.space,
+  rowGap: lib_theme_vars_css_cjs.vars.space,
   textAlign: ["center", "left", "right", "justify"]
 };
 exports.responsiveProperties = responsiveProperties;

package/dist/{styles/lib → lib}/css/atoms/atomicProperties.mjs

@@ -61,7 +61,13 @@ const responsiveProperties = {
   flexWrap: ["nowrap", "wrap"],
   fontSize: vars.fontSize,
   gap: vars.space,
-  justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
+  justifyContent: [
+    "flex-start",
+    "flex-end",
+    "center",
+    "space-between",
+    "space-around"
+  ],
   marginBlockStart: marginSpace,
   marginBlockEnd: marginSpace,
   marginInlineStart: marginSpace,

package/dist/{styles/lib → lib}/css/atoms/sprinkles.css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const sprinkles = require("@vanilla-extract/sprinkles");
-const styles_lib_css_atoms_atomicProperties_cjs = require("./atomicProperties.cjs");
-const styles_lib_css_atoms_breakpoints_cjs = require("./breakpoints.cjs");
+const lib_css_atoms_atomicProperties_cjs = require("./atomicProperties.cjs");
+const lib_css_atoms_breakpoints_cjs = require("./breakpoints.cjs");
 fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts", "@blockle/blocks");
 const unresponsiveAtomicProperties = sprinkles.defineProperties({
-  properties: styles_lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
+  properties: lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
   shorthands: {
     inset: ["insetBlockStart", "insetBlockEnd", "insetInlineStart", "insetInlineEnd"]
   }
@@ -15,17 +15,17 @@ const responsiveAtomicProperties = sprinkles.defineProperties({
   conditions: {
     mobile: {},
     tablet: {
-      "@media": styles_lib_css_atoms_breakpoints_cjs.minMediaQuery("tablet")
+      "@media": lib_css_atoms_breakpoints_cjs.minMediaQuery("tablet")
     },
     desktop: {
-      "@media": styles_lib_css_atoms_breakpoints_cjs.minMediaQuery("desktop")
+      "@media": lib_css_atoms_breakpoints_cjs.minMediaQuery("desktop")
     },
     wide: {
-      "@media": styles_lib_css_atoms_breakpoints_cjs.minMediaQuery("wide")
+      "@media": lib_css_atoms_breakpoints_cjs.minMediaQuery("wide")
     }
   },
-  responsiveArray: styles_lib_css_atoms_breakpoints_cjs.breakpointNames,
-  properties: styles_lib_css_atoms_atomicProperties_cjs.responsiveProperties,
+  responsiveArray: lib_css_atoms_breakpoints_cjs.breakpointNames,
+  properties: lib_css_atoms_atomicProperties_cjs.responsiveProperties,
   shorthands: {
     margin: ["marginBlockStart", "marginBlockEnd", "marginInlineStart", "marginInlineEnd"],
     marginBlock: ["marginBlockStart", "marginBlockEnd"],

package/dist/lib/css/flexbox/flexbox.cjs

@@ -0,0 +1,16 @@
+"use strict";
+const justifyContentMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around"
+};
+const alignItemsMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
+};
+exports.alignItemsMap = alignItemsMap;
+exports.justifyContentMap = justifyContentMap;

package/dist/lib/css/flexbox/flexbox.mjs

@@ -0,0 +1,17 @@
+const justifyContentMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around"
+};
+const alignItemsMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
+};
+export {
+  alignItemsMap,
+  justifyContentMap
+};

package/dist/{styles/lib → lib}/css/style/style.cjs

@@ -1,6 +1,6 @@
 "use strict";
 const css = require("@vanilla-extract/css");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../atoms/sprinkles.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../atoms/sprinkles.css.cjs");
 function style(props) {
   const styleRule = {};
   const atomClassNames = [];
@@ -13,9 +13,9 @@ function style(props) {
     }).join(" ");
   }
   for (const [name, value] of Object.entries(props)) {
-    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+    if (lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
       try {
-        atomClassNames.push(styles_lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
+        atomClassNames.push(lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
       } catch {
         styleRule[name] = value;
       }

package/dist/lib/react/mergeProps.cjs

@@ -0,0 +1,42 @@
+"use strict";
+const lib_utils_classnames_cjs = require("../utils/classnames.cjs");
+const lib_react_refs_cjs = require("./refs.cjs");
+function mergeProps(slotProps, childProps) {
+  const overrideProps = {};
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (childPropValue === void 0) {
+      continue;
+    }
+    if (slotPropValue === void 0) {
+      overrideProps[propName] = childPropValue;
+      continue;
+    }
+    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+      overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+    } else
+      switch (propName) {
+        case "style": {
+          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+          break;
+        }
+        case "className": {
+          overrideProps[propName] = lib_utils_classnames_cjs.classnames(slotPropValue, childPropValue);
+          break;
+        }
+        case "ref": {
+          overrideProps[propName] = lib_react_refs_cjs.composeRefs(slotPropValue, childPropValue);
+          break;
+        }
+        default: {
+          overrideProps[propName] = childPropValue;
+        }
+      }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+exports.mergeProps = mergeProps;

package/dist/lib/react/mergeProps.mjs

@@ -0,0 +1,43 @@
+import { classnames } from "../utils/classnames.mjs";
+import { composeRefs } from "./refs.mjs";
+function mergeProps(slotProps, childProps) {
+  const overrideProps = {};
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (childPropValue === void 0) {
+      continue;
+    }
+    if (slotPropValue === void 0) {
+      overrideProps[propName] = childPropValue;
+      continue;
+    }
+    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+      overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+    } else
+      switch (propName) {
+        case "style": {
+          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+          break;
+        }
+        case "className": {
+          overrideProps[propName] = classnames(slotPropValue, childPropValue);
+          break;
+        }
+        case "ref": {
+          overrideProps[propName] = composeRefs(slotPropValue, childPropValue);
+          break;
+        }
+        default: {
+          overrideProps[propName] = childPropValue;
+        }
+      }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+export {
+  mergeProps
+};

package/dist/lib/react/refs.cjs

@@ -0,0 +1,16 @@
+"use strict";
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+exports.composeRefs = composeRefs;

package/dist/lib/react/refs.mjs

@@ -0,0 +1,17 @@
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+export {
+  composeRefs
+};

package/dist/lib/theme/makeTheme.cjs

@@ -0,0 +1,12 @@
+"use strict";
+const css = require("@vanilla-extract/css");
+const lib_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
+const lib_theme_vars_css_cjs = require("./vars.css.cjs");
+function makeTheme(theme) {
+  return {
+    name: theme.name,
+    vars: css.createTheme(lib_theme_vars_css_cjs.vars, lib_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens)),
+    components: theme.components
+  };
+}
+exports.makeTheme = makeTheme;

package/dist/lib/theme/store/theme.cjs

@@ -0,0 +1,92 @@
+"use strict";
+let currentTheme = null;
+function setTheme(theme) {
+  currentTheme = theme;
+}
+function getTheme() {
+  if (!currentTheme) {
+    throw new Error("No theme has been set. Use setTheme() to set a theme.");
+  }
+  return currentTheme;
+}
+function getComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = getTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(
+        // biome-ignore lint/suspicious/noExplicitAny: This is a type assertion for a dynamic key
+        component[key]
+      );
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
+        variantsWithDefaults[key] = defaultVariants[key];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
+      const keys2 = Object.keys(
+        compoundVariant.variants
+      );
+      const matches = keys2.every((key) => {
+        const value = variantsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+function getComponentStyleDefaults(name) {
+  const { components } = getTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+}
+exports.getComponentStyleDefaults = getComponentStyleDefaults;
+exports.getComponentStyles = getComponentStyles;
+exports.getTheme = getTheme;
+exports.setTheme = setTheme;

package/dist/lib/theme/store/theme.mjs

@@ -0,0 +1,93 @@
+let currentTheme = null;
+function setTheme(theme) {
+  currentTheme = theme;
+}
+function getTheme() {
+  if (!currentTheme) {
+    throw new Error("No theme has been set. Use setTheme() to set a theme.");
+  }
+  return currentTheme;
+}
+function getComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = getTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(
+        // biome-ignore lint/suspicious/noExplicitAny: This is a type assertion for a dynamic key
+        component[key]
+      );
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
+        variantsWithDefaults[key] = defaultVariants[key];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
+      const keys2 = Object.keys(
+        compoundVariant.variants
+      );
+      const matches = keys2.every((key) => {
+        const value = variantsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+function getComponentStyleDefaults(name) {
+  const { components } = getTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+}
+export {
+  getComponentStyleDefaults,
+  getComponentStyles,
+  getTheme,
+  setTheme
+};

package/dist/lib/theme/vars.css.cjs

@@ -0,0 +1,9 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const lib_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
+const lib_theme_tokens_cjs = require("./tokens.cjs");
+fileScope.setFileScope("src/lib/theme/vars.css.ts", "@blockle/blocks");
+const vars = css.createThemeContract(lib_theme_makeVanillaTheme_cjs.makeVanillaTheme(lib_theme_tokens_cjs.tokens));
+fileScope.endFileScope();
+exports.vars = vars;

package/dist/{styles/lib → lib}/utils/atom-props.cjs

@@ -1,10 +1,10 @@
 "use strict";
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
 function getAtomsAndProps(props) {
   const atomProps = {};
   const otherProps = {};
   for (const [name, value] of Object.entries(props)) {
-    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+    if (lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
       atomProps[name] = value;
     } else {
       otherProps[name] = value;

package/dist/lib/utils/classnames.cjs

@@ -0,0 +1,6 @@
+"use strict";
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+exports.classnames = classnames;

package/dist/lib/utils/classnames.mjs

@@ -0,0 +1,7 @@
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+export {
+  classnames
+};

package/dist/lib/utils/dom.cjs

@@ -0,0 +1,12 @@
+"use strict";
+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);
+}
+exports.hasAnimationDuration = hasAnimationDuration;

package/dist/lib/utils/dom.mjs

@@ -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/math.cjs

@@ -0,0 +1,12 @@
+"use strict";
+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.mjs

@@ -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
+};