@blockle/blocks-core 0.21.6 → 0.21.8

package/dist/atoms/defineProperties.cjs

@@ -8,21 +8,19 @@ function defineProperties({
   const result = {};
   for (const property in properties) {
     const values = properties[property];
-    result[property] = {
+    const propertyResult = {
       values: {}
     };
-    const ref = result[property];
-    if (!ref || !ref.values) {
-      throw new Error(`Invalid property definition for ${property}`);
-    }
     if (Array.isArray(values)) {
       for (const value of values) {
         const defaultClass = css.style({
           [property]: value
         });
-        ref.values[value] = {
-          defaultClass,
-          conditions: conditions == null ? void 0 : conditions.map((condition, i) => {
+        const propResult = {
+          defaultClass
+        };
+        if (conditions) {
+          propResult.conditions = conditions.map((condition, i) => {
             if (i === 0 && Object.keys(condition).length === 0) {
               return defaultClass;
             }
@@ -38,21 +36,22 @@ function defineProperties({
             throw new Error(
               `Invalid condition for ${property}: ${JSON.stringify(condition)}`
             );
-          })
-        };
-        if (!conditions && "conditions" in ref.values) {
-          delete ref.values.conditions;
+          });
         }
+        propertyResult.values[value] = propResult;
       }
+      result[property] = propertyResult;
       continue;
     }
     for (const value in values) {
       const defaultClass = css.style({
         [property]: values[value]
       });
-      ref.values[value] = {
-        defaultClass,
-        conditions: conditions == null ? void 0 : conditions.map((condition, i) => {
+      const propResult = {
+        defaultClass
+      };
+      if (conditions) {
+        propResult.conditions = conditions.map((condition, i) => {
           if (i === 0 && Object.keys(condition).length === 0) {
             return defaultClass;
           }
@@ -68,12 +67,11 @@ function defineProperties({
           throw new Error(
             `Invalid condition for ${property}: ${JSON.stringify(condition)}`
           );
-        })
-      };
-      if (!conditions && "conditions" in ref.values) {
-        delete ref.values.conditions;
+        });
       }
+      propertyResult.values[value] = propResult;
     }
+    result[property] = propertyResult;
   }
   return result;
 }

package/dist/atoms/defineProperties.js

@@ -6,21 +6,19 @@ function defineProperties({
   const result = {};
   for (const property in properties) {
     const values = properties[property];
-    result[property] = {
+    const propertyResult = {
       values: {}
     };
-    const ref = result[property];
-    if (!ref || !ref.values) {
-      throw new Error(`Invalid property definition for ${property}`);
-    }
     if (Array.isArray(values)) {
       for (const value of values) {
         const defaultClass = style({
           [property]: value
         });
-        ref.values[value] = {
-          defaultClass,
-          conditions: conditions == null ? void 0 : conditions.map((condition, i) => {
+        const propResult = {
+          defaultClass
+        };
+        if (conditions) {
+          propResult.conditions = conditions.map((condition, i) => {
             if (i === 0 && Object.keys(condition).length === 0) {
               return defaultClass;
             }
@@ -36,21 +34,22 @@ function defineProperties({
             throw new Error(
               `Invalid condition for ${property}: ${JSON.stringify(condition)}`
             );
-          })
-        };
-        if (!conditions && "conditions" in ref.values) {
-          delete ref.values.conditions;
+          });
         }
+        propertyResult.values[value] = propResult;
       }
+      result[property] = propertyResult;
       continue;
     }
     for (const value in values) {
       const defaultClass = style({
         [property]: values[value]
       });
-      ref.values[value] = {
-        defaultClass,
-        conditions: conditions == null ? void 0 : conditions.map((condition, i) => {
+      const propResult = {
+        defaultClass
+      };
+      if (conditions) {
+        propResult.conditions = conditions.map((condition, i) => {
           if (i === 0 && Object.keys(condition).length === 0) {
             return defaultClass;
           }
@@ -66,12 +65,11 @@ function defineProperties({
           throw new Error(
             `Invalid condition for ${property}: ${JSON.stringify(condition)}`
           );
-        })
-      };
-      if (!conditions && "conditions" in ref.values) {
-        delete ref.values.conditions;
+        });
       }
+      propertyResult.values[value] = propResult;
     }
+    result[property] = propertyResult;
   }
   return result;
 }

package/dist/css/cssMatrixUtils.cjs

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function parseCSSTransform(styleDeclaration) {
+  const transform = styleDeclaration.getPropertyValue("transform");
+  if (!transform || transform === "none" || !transform.startsWith("matrix(")) {
+    return {
+      a: 1,
+      b: 0,
+      c: 0,
+      d: 1,
+      tx: 0,
+      ty: 0
+    };
+  }
+  const matrixValues = transform.substring(7, transform.length - 1).split(",").map((value) => cssValueToNumber(value.trim()));
+  if (matrixValues.length !== 6) {
+    throw new Error("Invalid matrix value");
+  }
+  return {
+    a: matrixValues[0],
+    b: matrixValues[1],
+    c: matrixValues[2],
+    d: matrixValues[3],
+    tx: matrixValues[4],
+    ty: matrixValues[5]
+  };
+}
+function getCSSScale(styleDeclaration) {
+  const scale = styleDeclaration.getPropertyValue("scale");
+  if (!scale || scale === "none") {
+    const matrix2d = parseCSSTransform(styleDeclaration);
+    const scaleX = Math.sqrt(matrix2d.a * matrix2d.a + matrix2d.b * matrix2d.b);
+    const scaleY = Math.sqrt(matrix2d.c * matrix2d.c + matrix2d.d * matrix2d.d);
+    return [scaleX, scaleY];
+  }
+  if (scale.includes(" ")) {
+    return scale.split(" ").map((value) => cssValueToNumber(value));
+  }
+  const scaleValue = cssValueToNumber(scale);
+  return [scaleValue, scaleValue];
+}
+function getOriginalElementSize(styleDeclaration, width, height) {
+  const [scaleX, scaleY] = getCSSScale(styleDeclaration);
+  return [width / scaleX, height / scaleY];
+}
+function cssValueToNumber(value) {
+  if (!value) {
+    return 0;
+  }
+  const parsedValue = Number.parseFloat(value);
+  if (Number.isNaN(parsedValue)) {
+    return 0;
+  }
+  return parsedValue;
+}
+exports.cssValueToNumber = cssValueToNumber;
+exports.getCSSScale = getCSSScale;
+exports.getOriginalElementSize = getOriginalElementSize;
+exports.parseCSSTransform = parseCSSTransform;

package/dist/css/cssMatrixUtils.d.ts

@@ -0,0 +1,13 @@
+export type Vector2D = [x: number, y: number];
+export type Matrix2D = {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    tx: number;
+    ty: number;
+};
+export declare function parseCSSTransform(styleDeclaration: CSSStyleDeclaration): Matrix2D;
+export declare function getCSSScale(styleDeclaration: CSSStyleDeclaration): Vector2D;
+export declare function getOriginalElementSize(styleDeclaration: CSSStyleDeclaration, width: number, height: number): Vector2D;
+export declare function cssValueToNumber(value?: string): number;

package/dist/css/cssMatrixUtils.js

@@ -0,0 +1,59 @@
+function parseCSSTransform(styleDeclaration) {
+  const transform = styleDeclaration.getPropertyValue("transform");
+  if (!transform || transform === "none" || !transform.startsWith("matrix(")) {
+    return {
+      a: 1,
+      b: 0,
+      c: 0,
+      d: 1,
+      tx: 0,
+      ty: 0
+    };
+  }
+  const matrixValues = transform.substring(7, transform.length - 1).split(",").map((value) => cssValueToNumber(value.trim()));
+  if (matrixValues.length !== 6) {
+    throw new Error("Invalid matrix value");
+  }
+  return {
+    a: matrixValues[0],
+    b: matrixValues[1],
+    c: matrixValues[2],
+    d: matrixValues[3],
+    tx: matrixValues[4],
+    ty: matrixValues[5]
+  };
+}
+function getCSSScale(styleDeclaration) {
+  const scale = styleDeclaration.getPropertyValue("scale");
+  if (!scale || scale === "none") {
+    const matrix2d = parseCSSTransform(styleDeclaration);
+    const scaleX = Math.sqrt(matrix2d.a * matrix2d.a + matrix2d.b * matrix2d.b);
+    const scaleY = Math.sqrt(matrix2d.c * matrix2d.c + matrix2d.d * matrix2d.d);
+    return [scaleX, scaleY];
+  }
+  if (scale.includes(" ")) {
+    return scale.split(" ").map((value) => cssValueToNumber(value));
+  }
+  const scaleValue = cssValueToNumber(scale);
+  return [scaleValue, scaleValue];
+}
+function getOriginalElementSize(styleDeclaration, width, height) {
+  const [scaleX, scaleY] = getCSSScale(styleDeclaration);
+  return [width / scaleX, height / scaleY];
+}
+function cssValueToNumber(value) {
+  if (!value) {
+    return 0;
+  }
+  const parsedValue = Number.parseFloat(value);
+  if (Number.isNaN(parsedValue)) {
+    return 0;
+  }
+  return parsedValue;
+}
+export {
+  cssValueToNumber,
+  getCSSScale,
+  getOriginalElementSize,
+  parseCSSTransform
+};

package/dist/css/cssMatrixUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.cjs

@@ -16,6 +16,7 @@ const helpers = require("./utils/typing/helpers.cjs");
 const atoms = require("./atoms/atoms.cjs");
 const atoms_css = require("./atoms/atoms.css.cjs");
 const getAtomsAndProps = require("./atoms/getAtomsAndProps.cjs");
+const cssMatrixUtils = require("./css/cssMatrixUtils.cjs");
 exports.breakpointNames = breakpoint.breakpointNames;
 exports.minMediaQuery = breakpoint.minMediaQuery;
 exports.blocksLayer = layers_css.blocksLayer;
@@ -35,3 +36,7 @@ exports.isObjectLike = helpers.isObjectLike;
 exports.atoms = atoms.atoms;
 exports.atomicProperties = atoms_css.atomicProperties;
 exports.getAtomsAndProps = getAtomsAndProps.getAtomsAndProps;
+exports.cssValueToNumber = cssMatrixUtils.cssValueToNumber;
+exports.getCSSScale = cssMatrixUtils.getCSSScale;
+exports.getOriginalElementSize = cssMatrixUtils.getOriginalElementSize;
+exports.parseCSSTransform = cssMatrixUtils.parseCSSTransform;

package/dist/index.d.ts

@@ -19,3 +19,4 @@ export { atoms, type Atoms } from './atoms/atoms';
 export { atomicProperties } from './atoms/atoms.css';
 export type { MarginAtoms, PaddingAtoms, TextAtoms } from './atoms/atomTypes';
 export { getAtomsAndProps } from './atoms/getAtomsAndProps';
+export { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform, } from './css/cssMatrixUtils';

package/dist/index.js

@@ -14,6 +14,7 @@ import { isObjectLike } from "./utils/typing/helpers.js";
 import { atoms } from "./atoms/atoms.js";
 import { atomicProperties } from "./atoms/atoms.css.js";
 import { getAtomsAndProps } from "./atoms/getAtomsAndProps.js";
+import { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform } from "./css/cssMatrixUtils.js";
 export {
   alignItemsMap,
   atomicProperties,
@@ -22,8 +23,11 @@ export {
   breakpointNames,
   classnames,
   composeRefs,
+  cssValueToNumber,
   getAtomsAndProps,
   getBoundValue,
+  getCSSScale,
+  getOriginalElementSize,
   hasAnimationDuration,
   isObjectLike,
   justifyContentMap,
@@ -31,6 +35,7 @@ export {
   makeTheme,
   mergeProps,
   minMediaQuery,
+  parseCSSTransform,
   rem,
   roundToPrecision,
   vars

package/dist/theme/makeComponentTheme.d.ts

@@ -25,5 +25,5 @@ export type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
 export type ThemeComponentsStyles = {
     [K in keyof ComponentThemes]?: ComponentTheme<ComponentThemes[K]>;
 };
-export declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
+export declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: Exclude<ThemeComponentsStyles[T], undefined>): Exclude<ThemeComponentsStyles[T], undefined>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-core",
-  "version": "0.21.6",
+  "version": "0.21.8",
   "description": "Core for Blocks",
   "type": "module",
   "sideEffects": false,