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

package/package.json

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

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

@@ -7,6 +7,7 @@ import { themeContract } from '../../theme/contract.css';
 
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 import { generateResponsiveMediaCalc } from '../../utils/generateResponsiveMediaCalc';
+import { mergeResponsiveMedias } from '../../utils/mergeResponsiveMedias';
 
 export const carouselRecipe = recipe(
   {
@@ -184,12 +185,12 @@ export const carouselBullets = style({
   position: 'absolute',
   justifyContent: 'center',
 
-  '@media': {
-    ...generateResponsiveMedia({
+  '@media': mergeResponsiveMedias(
+    generateResponsiveMedia({
       gap: themeContract.carousel.bullet.gap,
     }),
-    ...generateResponsiveMediaCalc('top', '100%', themeContract.carousel.bullet.positionVerticalOffset, '+'),
-  },
+    generateResponsiveMediaCalc('top', '100%', themeContract.carousel.bullet.positionVerticalOffset, '+')
+  ),
 });
 
 export const carouselBullet = style(

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;
+}