@blockle/blocks-core 0.21.7 → 0.21.9

package/dist/atoms/atoms.js

@@ -4,20 +4,26 @@ function atoms(properties) {
   for (const property in properties) {
     const value = properties[property];
     const target = atomicProperties[property];
-    if (typeof value === "string") {
-      if (target.values[value]) {
+    if (!target) {
+      continue;
+    }
+    if (typeof value === "string" || typeof value === "number") {
+      if (target.values[value] !== void 0) {
         classList.push(target.values[value].defaultClass);
       }
     } else if (Array.isArray(value)) {
       value.forEach((val, i) => {
-        var _a;
+        const atomicValue = target.values[val];
         if (i === 0) {
-          if (target.values[val]) {
-            classList.push(target.values[val].defaultClass);
+          if (atomicValue) {
+            classList.push(atomicValue.defaultClass);
           }
-        } else {
-          classList.push(((_a = target.values[val]) == null ? void 0 : _a.conditions[i]) ?? "");
+          return;
+        }
+        if (!(atomicValue == null ? void 0 : atomicValue.conditions[i])) {
+          return;
         }
+        classList.push(atomicValue == null ? void 0 : atomicValue.conditions[i]);
       });
     }
   }

package/dist/atoms/atoms.spec.d.ts

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

package/dist/atoms/defineProperties.cjs

@@ -19,7 +19,7 @@ function defineProperties({
         const propResult = {
           defaultClass
         };
-        if (conditions) {
+        if (isValidConditionList(conditions)) {
           propResult.conditions = conditions.map((condition, i) => {
             if (i === 0 && Object.keys(condition).length === 0) {
               return defaultClass;
@@ -50,7 +50,7 @@ function defineProperties({
       const propResult = {
         defaultClass
       };
-      if (conditions) {
+      if (isValidConditionList(conditions)) {
         propResult.conditions = conditions.map((condition, i) => {
           if (i === 0 && Object.keys(condition).length === 0) {
             return defaultClass;
@@ -75,4 +75,7 @@ function defineProperties({
   }
   return result;
 }
+function isValidConditionList(condition) {
+  return Array.isArray(condition) && condition.length > 0;
+}
 exports.defineProperties = defineProperties;

package/dist/atoms/defineProperties.d.ts

@@ -1,5 +1,5 @@
 import { Properties as CSSProperties } from 'csstype';
-type MapArray<T extends any[], V> = {
+type MapArray<T extends unknown[], V> = {
     [Index in keyof T]: V;
 };
 type AtomicPrimitiveValue = string | number;
@@ -13,20 +13,20 @@ type PropertyDefinition<TProperties, TConditions> = {
     properties: TProperties;
     conditions?: TConditions;
 };
-type PropertyResultValue<TConditions> = TConditions extends any[] ? {
+type PropertyResultValue<TConditions> = TConditions extends unknown[] ? {
     defaultClass: string;
-    conditions: TConditions extends any[] ? MapArray<TConditions, string> : never;
+    conditions: TConditions extends unknown[] ? MapArray<TConditions, string> : never;
 } : {
     defaultClass: string;
 };
 type PropertyResult<TProperties extends Properties, TConditions> = {
     [K in keyof TProperties]: {
-        values: TProperties[K] extends any[] ? {
+        values: TProperties[K] extends AtomicPrimitiveValue[] ? {
             [V in TProperties[K][number]]: PropertyResultValue<TConditions>;
         } : {
             [V in keyof TProperties[K]]: PropertyResultValue<TConditions>;
         };
     };
 };
-export declare function defineProperties<const TProperties extends Properties, const TConditions extends PropertyConditions>({ properties, conditions, }: PropertyDefinition<TProperties, TConditions>): PropertyResult<TProperties, TConditions>;
+export declare function defineProperties<const TProperties extends Properties, TConditions extends PropertyConditions | undefined>({ properties, conditions, }: PropertyDefinition<TProperties, TConditions>): PropertyResult<TProperties, TConditions>;
 export {};

package/dist/atoms/defineProperties.js

@@ -17,7 +17,7 @@ function defineProperties({
         const propResult = {
           defaultClass
         };
-        if (conditions) {
+        if (isValidConditionList(conditions)) {
           propResult.conditions = conditions.map((condition, i) => {
             if (i === 0 && Object.keys(condition).length === 0) {
               return defaultClass;
@@ -48,7 +48,7 @@ function defineProperties({
       const propResult = {
         defaultClass
       };
-      if (conditions) {
+      if (isValidConditionList(conditions)) {
         propResult.conditions = conditions.map((condition, i) => {
           if (i === 0 && Object.keys(condition).length === 0) {
             return defaultClass;
@@ -73,6 +73,9 @@ function defineProperties({
   }
   return result;
 }
+function isValidConditionList(condition) {
+  return Array.isArray(condition) && condition.length > 0;
+}
 export {
   defineProperties
 };

package/dist/css/cssMatrixUtils.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CSSMatrixValuePattern = /matrix\((.*?)\)/;
+function parseCSSTransform(styleDeclaration) {
+  const transform = styleDeclaration.getPropertyValue("transform");
+  if (!transform || !CSSMatrixValuePattern.test(transform)) {
+    return {
+      a: 1,
+      b: 0,
+      c: 0,
+      d: 1,
+      tx: 0,
+      ty: 0
+    };
+  }
+  const matrixMatch = transform.match(CSSMatrixValuePattern);
+  if (!matrixMatch || !matrixMatch[1]) {
+    throw new Error(`Invalid matrix value: ${transform}`);
+  }
+  const matrixValues = matrixMatch[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,64 @@
+const CSSMatrixValuePattern = /matrix\((.*?)\)/;
+function parseCSSTransform(styleDeclaration) {
+  const transform = styleDeclaration.getPropertyValue("transform");
+  if (!transform || !CSSMatrixValuePattern.test(transform)) {
+    return {
+      a: 1,
+      b: 0,
+      c: 0,
+      d: 1,
+      tx: 0,
+      ty: 0
+    };
+  }
+  const matrixMatch = transform.match(CSSMatrixValuePattern);
+  if (!matrixMatch || !matrixMatch[1]) {
+    throw new Error(`Invalid matrix value: ${transform}`);
+  }
+  const matrixValues = matrixMatch[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.9",
   "description": "Core for Blocks",
   "type": "module",
   "sideEffects": false,