@latte-macchiat-io/latte-vanilla-components 0.0.321 → 0.0.322

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.321",
+  "version": "0.0.322",
   "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,8 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
 
-import { combineResponsive } from '../../utils/combineResponsive';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+import { generateResponsiveMediaCalc } from '../../utils/generateResponsiveMediaCalc';
 
 export const carouselRecipe = recipe(
   {
@@ -120,33 +120,14 @@ export const carouselNav = recipe(
 
       navPositionVertical: {
         top: {
-          '@media': {
-            [queries.mobile]: {
-              bottom: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.mobile})`,
-            },
-            [queries.sm]: {
-              bottom: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.sm})`,
-            },
-            [queries.md]: {
-              bottom: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.md})`,
-            },
-            [queries.lg]: {
-              bottom: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.lg})`,
-            },
-            [queries.xl]: {
-              bottom: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.xl})`,
-            },
-            [queries['2xl']]: {
-              bottom: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset['2xl']})`,
-            },
-          },
+          '@media': generateResponsiveMediaCalc('bottom', '100%', themeContract.carousel.nav.positionVerticalOffset, '+'),
         },
         center: {
           top: '50%',
           transform: 'translate(0%, -50%)',
         },
         bottom: {
-          top: '100%',
+          '@media': generateResponsiveMediaCalc('top', '100%', themeContract.carousel.nav.positionVerticalOffset, '+'),
         },
       },
     },

package/src/utils/generateResponsiveMediaCalc.ts

@@ -0,0 +1,32 @@
+import { queries } from '../styles/mediaqueries';
+
+/**
+ * Génère un objet @media pour Vanilla Extract avec des valeurs calculées (calc)
+ * Supporte les valeurs responsive issues du thème pour les deux opérandes.
+ *
+ * @param property - la propriété CSS (ex: 'top', 'bottom', 'marginTop'…)
+ * @param baseValue - soit une string, soit un objet responsive (themeContract.*)
+ * @param offsetValues - un objet responsive avec des offsets (ex: themeContract.carousel.nav.positionVerticalOffset)
+ * @param operator - opérateur de calcul ('+' ou '-') [par défaut '+']
+ * @returns Un objet directement utilisable dans `@media`
+ */
+export function generateResponsiveMediaCalc(
+  property: string,
+  baseValue: string | Record<string, string>,
+  offsetValues: Record<string, string>,
+  operator: string = '+'
+) {
+  const result: Record<string, Record<string, string>> = {};
+
+  for (const [bp, query] of Object.entries(queries)) {
+    const base = typeof baseValue === 'string' ? baseValue : (baseValue[bp] ?? Object.values(baseValue)[0]); // fallback pour mobile
+    const offset = offsetValues[bp];
+    if (offset) {
+      result[query] = {
+        [property]: `calc(${base} ${operator} ${offset})`,
+      };
+    }
+  }
+
+  return result;
+}

package/src/utils/combineResponsive.ts

@@ -1,9 +0,0 @@
-export function combineResponsive(obj1: Record<string, string>, obj2: Record<string, string>, operator: string = '+'): Record<string, string> {
-  const result: Record<string, string> = {};
-  for (const bp in obj1) {
-    if (obj2[bp]) {
-      result[bp] = `calc(${obj1[bp]} ${operator} ${obj2[bp]})`;
-    }
-  }
-  return result;
-}