@blockle/blocks-core 1.2.6 → 1.3.1

package/dist/css/getNameFromVanillaCSSVar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Vanilla Extract CSS variables are transformed to a format like `var(--variableName)`.
+ * This function extracts the `variableName` part from the string.
+ */
+export declare function getNameFromVanillaCSSVar(varName: string): string;
+//# sourceMappingURL=getNameFromVanillaCSSVar.d.ts.map

package/dist/css/getNameFromVanillaCSSVar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNameFromVanillaCSSVar.d.ts","sourceRoot":"","sources":["../../src/css/getNameFromVanillaCSSVar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM,UAEvD"}

package/dist/css/getNameFromVanillaCSSVar.js

@@ -0,0 +1,6 @@
+function getNameFromVanillaCSSVar(varName) {
+  return varName.substring(4, varName.length - 1);
+}
+export {
+  getNameFromVanillaCSSVar
+};

package/dist/css/layers.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { layer } from "@vanilla-extract/css";
 setFileScope("src/css/layers.css.ts", "@blockle/blocks-core");
+const resetLayer = layer("blockle-reset");
+const atomLayer = layer("blockle-atom");
+const moleculeLayer = layer("blockle-molecule");
 const organismLayer = layer("blockle-organism");
-const moleculeLayer = layer({ parent: organismLayer }, "blockle-molecule");
-const atomLayer = layer({ parent: moleculeLayer }, "blockle-atom");
-const resetLayer = layer({ parent: atomLayer }, "blockle-reset");
 const layers = {
   reset: resetLayer,
   atom: atomLayer,

package/dist/index.d.ts

@@ -6,9 +6,11 @@ export type { ComponentThemes, ComponentThemesProps, } from './config/componentT
 export type { ThemeTokens } from './config/themeTokens.js';
 export { breakpointNames, minMediaQuery } from './css/breakpoint/breakpoint.js';
 export { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform, } from './css/cssMatrixUtils.js';
+export { getNameFromVanillaCSSVar } from './css/getNameFromVanillaCSSVar.js';
 export { layers } from './css/layers.css.js';
 export { pixelsToRem } from './css/pixelsToRem.js';
 export { vars } from './css/vars.css.js';
+export { getComponentStyles } from './theme/getComponentStyles.js';
 export type { ComponentTheme, ThemeComponentsStyles, } from './theme/makeComponentTheme.js';
 export { makeComponentTheme } from './theme/makeComponentTheme.js';
 export type { Theme } from './theme/makeTheme.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACrD,YAAY,EACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,SAAS,GACV,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEhF,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,YAAY,EACV,cAAc,EACd,qBAAqB,GACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,YAAY,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EACL,KAAK,aAAa,EAClB,aAAa,EACb,KAAK,iBAAiB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,OAAO,EACZ,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,UAAU,GAChB,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACrD,YAAY,EACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,SAAS,GACV,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EACV,eAAe,EACf,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEhF,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,YAAY,EACV,cAAc,EACd,qBAAqB,GACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,YAAY,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EACL,KAAK,aAAa,EAClB,aAAa,EACb,KAAK,iBAAiB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EACL,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,OAAO,EACZ,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,UAAU,GAChB,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -3,9 +3,11 @@ import { atoms } from "./atoms/atoms.js";
 import { getAtomsAndProps } from "./atoms/getAtomsAndProps.js";
 import { breakpointNames, minMediaQuery } from "./css/breakpoint/breakpoint.js";
 import { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform } from "./css/cssMatrixUtils.js";
+import { getNameFromVanillaCSSVar } from "./css/getNameFromVanillaCSSVar.js";
 import { layers } from "./css/layers.css.js";
 import { pixelsToRem } from "./css/pixelsToRem.js";
 import { vars } from "./css/vars.css.js";
+import { getComponentStyles } from "./theme/getComponentStyles.js";
 import { makeComponentTheme } from "./theme/makeComponentTheme.js";
 import { makeTheme } from "./theme/makeTheme.js";
 import { classnames } from "./utils/classnames/classnames.js";
@@ -28,6 +30,8 @@ export {
   cssValueToNumber,
   getAtomsAndProps,
   getCSSScale,
+  getComponentStyles,
+  getNameFromVanillaCSSVar,
   getOriginalElementSize,
   getResponsiveStyle,
   hasAnimationDuration,

package/dist/theme/getComponentStyles.d.ts

@@ -0,0 +1,4 @@
+import { ComponentThemesProps } from '../config/componentThemes.js';
+import { Theme } from '../theme/makeTheme.js';
+export declare function getComponentStyles<T extends keyof ComponentThemesProps>(theme: Theme, name: T, styleProps: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
+//# sourceMappingURL=getComponentStyles.d.ts.map

package/dist/theme/getComponentStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getComponentStyles.d.ts","sourceRoot":"","sources":["../../src/theme/getComponentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,oBAAoB,EACrE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,CAAC,EACP,UAAU,EAAE,oBAAoB,CAAC,CAAC,CAAC,EACnC,kBAAkB,UAAO,GACxB,MAAM,CA8ER"}

package/dist/theme/getComponentStyles.js

@@ -0,0 +1,59 @@
+function getComponentStyles(theme, name, styleProps, useDefaultVariants = true) {
+  const component = theme.components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = styleProps.variants;
+  const componentVariants = component.variants;
+  for (const key in styleProps) {
+    const value = styleProps[key];
+    if (value === true) {
+      const className = component[key];
+      if (className) {
+        classNames.push(className);
+      }
+    }
+  }
+  if (!componentVariants) {
+    return classNames.join(" ");
+  }
+  const defaultVariants = useDefaultVariants ? component.defaultVariants : null;
+  for (const key in componentVariants) {
+    const variantValue = variants?.[key] ?? defaultVariants?.[key];
+    if (variantValue === void 0) continue;
+    const variantConfig = componentVariants[key];
+    if (typeof variantValue === "boolean") {
+      if (variantValue && typeof variantConfig === "string") {
+        classNames.push(variantConfig);
+      }
+    } else {
+      const className = variantConfig[variantValue];
+      if (className) {
+        classNames.push(className);
+      }
+    }
+  }
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
+      let matches = true;
+      for (const key in compoundVariant.variants) {
+        const expectedValue = compoundVariant.variants[key];
+        const actualValue = variants?.[key] ?? defaultVariants?.[key];
+        if (actualValue !== expectedValue) {
+          matches = false;
+          break;
+        }
+      }
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+export {
+  getComponentStyles
+};

package/package.json

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