@blockle/blocks-core 1.1.0 → 1.2.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { atomicProperties } from './atoms/atoms.css.js';
 export { type Atoms, atoms } from './atoms/atoms.js';
-export type { MarginAtoms, PaddingAtoms, TextAtoms, } from './atoms/atomTypes.js';
+export type { MarginAtoms, PaddingAtoms, ResponsiveValue, TextAtoms, } from './atoms/atomTypes.js';
 export { getAtomsAndProps } from './atoms/getAtomsAndProps.js';
 export type { ComponentThemes, ComponentThemesProps, } from './config/componentThemes.js';
 export type { ThemeTokens } from './config/themeTokens.js';
@@ -19,5 +19,6 @@ export { type AlignItemsMap, alignItemsMap, type JustifyContentMap, justifyConte
 export { clampAndRoundValue } from './utils/math/math.js';
 export { mergeProps } from './utils/react/mergeProps.js';
 export { composeRefs } from './utils/react/refs.js';
+export { createResponsiveStyles, getResponsiveStyle, } from './utils/styles/responsiveStyles.js';
 export { type AnyString, type HTMLElementProps, type IsNumberUnion, type IsStringUnion, type IsUnion, isObjectLike, type OptionalLiteral, type RecordLike, } from './utils/typing/helpers.js';
 //# sourceMappingURL=index.d.ts.map

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,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,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,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,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,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,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"}

package/dist/index.js

@@ -14,6 +14,7 @@ import { alignItemsMap, justifyContentMap } from "./utils/flexbox/flexbox.js";
 import { clampAndRoundValue } from "./utils/math/math.js";
 import { mergeProps } from "./utils/react/mergeProps.js";
 import { composeRefs } from "./utils/react/refs.js";
+import { createResponsiveStyles, getResponsiveStyle } from "./utils/styles/responsiveStyles.js";
 import { isObjectLike } from "./utils/typing/helpers.js";
 export {
   alignItemsMap,
@@ -23,10 +24,12 @@ export {
   clampAndRoundValue,
   classnames,
   composeRefs,
+  createResponsiveStyles,
   cssValueToNumber,
   getAtomsAndProps,
   getCSSScale,
   getOriginalElementSize,
+  getResponsiveStyle,
   hasAnimationDuration,
   isObjectLike,
   justifyContentMap,

package/dist/utils/styles/responsiveStyles.d.ts

@@ -0,0 +1,12 @@
+import { StyleRule } from '@vanilla-extract/css';
+import { ResponsiveValue } from '../../atoms/atomTypes.js';
+type ResponsiveStyle<TKeys extends string | number> = Record<TKeys, [
+    string,
+    string,
+    string,
+    string
+]>;
+export declare function createResponsiveStyles<const TKeys extends string | number>(keys: TKeys[], styles: (key: TKeys) => StyleRule, layer?: string): ResponsiveStyle<TKeys>;
+export declare function getResponsiveStyle<TStyles extends ResponsiveStyle<TKeys>, TKeys extends string | number>(stylesMap: TStyles, value: ResponsiveValue<TKeys> | undefined): string | undefined;
+export {};
+//# sourceMappingURL=responsiveStyles.d.ts.map

package/dist/utils/styles/responsiveStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveStyles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles/responsiveStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,sBAAsB,CAAC;AAE7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKhE,KAAK,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,MAAM,CAC1D,KAAK,EACL;IAAC,MAAM;IAAE,MAAM;IAAE,MAAM;IAAE,MAAM;CAAC,CACjC,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,KAAK,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACxE,IAAI,EAAE,KAAK,EAAE,EACb,MAAM,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,SAAS,EACjC,KAAK,SAAkB,GACtB,eAAe,CAAC,KAAK,CAAC,CAyCxB;AAED,wBAAgB,kBAAkB,CAChC,OAAO,SAAS,eAAe,CAAC,KAAK,CAAC,EACtC,KAAK,SAAS,MAAM,GAAG,MAAM,EAE7B,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG,SAAS,GACxC,MAAM,GAAG,SAAS,CAUpB"}

package/dist/utils/styles/responsiveStyles.js

@@ -0,0 +1,58 @@
+import { style } from "@vanilla-extract/css";
+import { minMediaQuery } from "../../css/breakpoint/breakpoint.js";
+import { layers } from "../../css/layers.css.js";
+import { classnames } from "../classnames/classnames.js";
+function createResponsiveStyles(keys, styles, layer = layers.molecule) {
+  const responsiveStyles = {};
+  for (const key of keys) {
+    responsiveStyles[key] = [
+      style({
+        "@layer": {
+          [layer]: styles(key)
+        }
+      }),
+      style({
+        "@layer": {
+          [layer]: {
+            "@media": {
+              [minMediaQuery("tablet")]: styles(key)
+            }
+          }
+        }
+      }),
+      style({
+        "@layer": {
+          [layer]: {
+            "@media": {
+              [minMediaQuery("desktop")]: styles(key)
+            }
+          }
+        }
+      }),
+      style({
+        "@layer": {
+          [layer]: {
+            "@media": {
+              [minMediaQuery("wide")]: styles(key)
+            }
+          }
+        }
+      })
+    ];
+  }
+  return responsiveStyles;
+}
+function getResponsiveStyle(stylesMap, value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (Array.isArray(value)) {
+    return classnames(...value.map((v, index) => stylesMap[v][index]));
+  } else {
+    return stylesMap[value][0];
+  }
+}
+export {
+  createResponsiveStyles,
+  getResponsiveStyle
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-core",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Core for Blocks",
   "type": "module",
   "sideEffects": false,
@@ -31,9 +31,9 @@
   },
   "homepage": "https://github.com/Blockle/blocks#readme",
   "dependencies": {
-    "@vanilla-extract/css": "^1.17.1"
+    "@vanilla-extract/css": "^1.17.4"
   },
   "peerDependencies": {
-    "@vanilla-extract/css": ">=1.17.1"
+    "@vanilla-extract/css": "^1.17.4"
   }
 }