@blockle/blocks-core 0.21.7 → 0.21.8

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.7",
+  "version": "0.21.8",
   "description": "Core for Blocks",
   "type": "module",
   "sideEffects": false,