@latte-macchiat-io/latte-vanilla-components 0.0.323 → 0.0.325

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.323",
+  "version": "0.0.325",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Carousel/styles.css.ts

@@ -5,8 +5,10 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
 
+import { generateResponsive } from '../../utils/generateResponsive';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 import { generateResponsiveMediaCalc } from '../../utils/generateResponsiveMediaCalc';
+import { mergeResponsiveMedias } from '../../utils/mergeResponsiveMedias';
 
 export const carouselRecipe = recipe(
   {
@@ -184,12 +186,19 @@ export const carouselBullets = style({
   position: 'absolute',
   justifyContent: 'center',
 
-  '@media': {
-    ...generateResponsiveMedia({
+  '@media': generateResponsive(
+    {
       gap: themeContract.carousel.bullet.gap,
-    }),
-    ...generateResponsiveMediaCalc('top', '100%', themeContract.carousel.bullet.positionVerticalOffset, '+'),
-  },
+    },
+    [
+      {
+        property: 'top',
+        base: '100%',
+        offset: themeContract.carousel.bullet.positionVerticalOffset,
+        operator: '+',
+      },
+    ]
+  ),
 });
 
 export const carouselBullet = style(

package/src/utils/generateResponsive.ts

@@ -0,0 +1,69 @@
+import { queries } from '../styles/mediaqueries';
+
+type BreakpointKey = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ResponsiveValue = string | number | { toString(): string };
+type BreakpointMap = Partial<Record<BreakpointKey, ResponsiveValue>>;
+
+const BPS: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+/**
+ * Generate fully responsive CSS object for Vanilla Extract
+ *
+ * @param props - normal CSS properties (string/number or responsive map)
+ * @param calcProps - optional array of calc() rules
+ * @returns object ready for `@media` in Vanilla Extract
+ */
+export function generateResponsive(
+  props: Record<string, ResponsiveValue | BreakpointMap>,
+  calcProps?: Array<{
+    property: string;
+    base: ResponsiveValue | BreakpointMap;
+    offset: ResponsiveValue | BreakpointMap;
+    operator?: string; // + - * / ...
+  }>
+): Record<string, Record<string, string>> {
+  const result: Record<string, Record<string, string>> = {};
+
+  const toCssValue = (v: ResponsiveValue) => {
+    const s = String(v);
+    return s.startsWith('--') ? `var(${s})` : s;
+  };
+
+  // 1️⃣ Normal props
+  for (const [cssProp, valOrMap] of Object.entries(props)) {
+    const isMapLike =
+      valOrMap && typeof valOrMap === 'object' && !Array.isArray(valOrMap) && Object.keys(valOrMap).some((k) => BPS.includes(k as BreakpointKey));
+
+    if (isMapLike) {
+      const map = valOrMap as BreakpointMap;
+      for (const bp of BPS) {
+        const token = map[bp];
+        if (token === undefined) continue;
+        const media = queries[bp as keyof typeof queries];
+        if (!result[media]) result[media] = {};
+        result[media][cssProp] = toCssValue(token);
+      }
+    } else {
+      for (const bp of BPS) {
+        const media = queries[bp as keyof typeof queries];
+        if (!result[media]) result[media] = {};
+        result[media][cssProp] = toCssValue(valOrMap as ResponsiveValue);
+      }
+    }
+  }
+
+  // 2️⃣ Calc props
+  if (calcProps) {
+    for (const { property, base, offset, operator = '+' } of calcProps) {
+      for (const bp of BPS) {
+        const media = queries[bp as keyof typeof queries];
+        const baseValue = typeof base === 'string' ? base : (base[bp] ?? Object.values(base)[0]);
+        const offsetValue = typeof offset === 'string' ? offset : (offset[bp] ?? Object.values(offset)[0]);
+        if (!result[media]) result[media] = {};
+        result[media][property] = `calc(${baseValue} ${operator} ${offsetValue})`;
+      }
+    }
+  }
+
+  return result;
+}

package/src/utils/mergeResponsiveMedias.ts

@@ -0,0 +1,21 @@
+/**
+ * Fusionne plusieurs objets responsive générés pour Vanilla Extract
+ * sans écraser les valeurs existantes des mêmes breakpoints.
+ *
+ * Exemple :
+ * mergeResponsiveMedias(a, b) => combine les clés communes
+ */
+export function mergeResponsiveMedias(...mediaObjects: Record<string, Record<string, string>>[]): Record<string, Record<string, string>> {
+  const merged: Record<string, Record<string, string>> = {};
+
+  for (const obj of mediaObjects) {
+    for (const [query, styles] of Object.entries(obj)) {
+      merged[query] = {
+        ...(merged[query] || {}),
+        ...styles,
+      };
+    }
+  }
+
+  return merged;
+}