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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.321",
+  "version": "0.0.323",
   "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, '+'),
         },
       },
     },
@@ -207,8 +188,7 @@ export const carouselBullets = style({
     ...generateResponsiveMedia({
       gap: themeContract.carousel.bullet.gap,
     }),
-
-    [queries.lg]: {},
+    ...generateResponsiveMediaCalc('top', '100%', themeContract.carousel.bullet.positionVerticalOffset, '+'),
   },
 });
 

package/src/components/Carousel/theme.ts

@@ -37,6 +37,14 @@ const themeCarouselBase = {
     },
     bullet: {
       borderRadius: '1000px',
+      positionVerticalOffset: {
+        mobile: '15',
+        sm: '15',
+        md: '30',
+        lg: '30',
+        xl: '50',
+        '2xl': '50',
+      },
       bottom: {
         mobile: '15px',
         sm: '15px',

package/src/theme/contract.css.ts

@@ -851,6 +851,14 @@ export const themeContract = createGlobalThemeContract({
       borderRadius: 'latte-carousel-bullet-borderRadius',
       backgroundColor: 'latte-carousel-bullet-backgroundColor',
       activeBackgroundColor: 'latte-carousel-bullet-active-backgroundColor',
+      positionVerticalOffset: {
+        mobile: 'latte-carousel-nav-positionVerticalOffset-mobile',
+        sm: 'latte-carousel-nav-positionVerticalOffset-sm',
+        md: 'latte-carousel-nav-positionVerticalOffset-md',
+        lg: 'latte-carousel-nav-positionVerticalOffset-lg',
+        xl: 'latte-carousel-nav-positionVerticalOffset-xl',
+        '2xl': 'latte-carousel-nav-positionVerticalOffset-2xl',
+      },
 
       gap: {
         mobile: 'latte-carousel-bullet-gap-mobile',

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