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

package/package.json

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

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

@@ -6,9 +6,6 @@ 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(
   {
@@ -98,11 +95,9 @@ export const carouselNav = recipe(
       pointerEvents: 'none',
       justifyContent: 'flex-end',
 
-      '@media': {
-        ...generateResponsiveMedia({
-          gap: themeContract.carousel.nav.gap,
-        }),
-      },
+      '@media': generateResponsive({
+        gap: themeContract.carousel.nav.gap,
+      }),
     },
 
     variants: {
@@ -122,14 +117,34 @@ export const carouselNav = recipe(
 
       navPositionVertical: {
         top: {
-          '@media': generateResponsiveMediaCalc('bottom', '100%', themeContract.carousel.nav.positionVerticalOffset, '+'),
+          '@media': generateResponsive(
+            {}, // pas de props "normales" ici
+            [
+              {
+                property: 'bottom',
+                base: '100%',
+                offset: themeContract.carousel.nav.positionVerticalOffset,
+                operator: '+',
+              },
+            ]
+          ),
         },
         center: {
           top: '50%',
           transform: 'translate(0%, -50%)',
         },
         bottom: {
-          '@media': generateResponsiveMediaCalc('top', '100%', themeContract.carousel.nav.positionVerticalOffset, '+'),
+          '@media': generateResponsive(
+            {}, // pas de props "normales" ici non plus
+            [
+              {
+                property: 'top',
+                base: '100%',
+                offset: themeContract.carousel.nav.positionVerticalOffset,
+                operator: '+',
+              },
+            ]
+          ),
         },
       },
     },
@@ -167,12 +182,10 @@ export const carouselNavButton = style(
       pointerEvents: 'none',
     },
 
-    '@media': {
-      ...generateResponsiveMedia({
-        width: themeContract.carousel.nav.width,
-        height: themeContract.carousel.nav.height,
-      }),
-    },
+    '@media': generateResponsive({
+      width: themeContract.carousel.nav.width,
+      height: themeContract.carousel.nav.height,
+    }),
   },
   'carousel-nav-button'
 );
@@ -214,12 +227,10 @@ export const carouselBullet = style(
       transform: 'scale(1.2)',
     },
 
-    '@media': {
-      ...generateResponsiveMedia({
-        width: themeContract.carousel.bullet.width,
-        height: themeContract.carousel.bullet.height,
-      }),
-    },
+    '@media': generateResponsive({
+      width: themeContract.carousel.bullet.width,
+      height: themeContract.carousel.bullet.height,
+    }),
   },
   'carousel-bullet'
 );

package/src/utils/generateResponsive.ts

@@ -1,17 +1,24 @@
+// utils/generateResponsive.ts
 import { queries } from '../styles/mediaqueries';
 
+// Define the supported breakpoint keys
 type BreakpointKey = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+// A responsive value can be a string, number, or anything with a toString method
 type ResponsiveValue = string | number | { toString(): string };
+
+// Map of breakpoint keys to responsive values
 type BreakpointMap = Partial<Record<BreakpointKey, ResponsiveValue>>;
 
+// Ordered list of breakpoints to iterate over
 const BPS: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
 
 /**
- * Generate fully responsive CSS object for Vanilla Extract
+ * Generates a 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
+ * @param props - normal CSS properties, either a single value or responsive map
+ * @param calcProps - optional array of calc() rules for dynamic calculations
+ * @returns an object ready to use under `@media` in Vanilla Extract
  */
 export function generateResponsive(
   props: Record<string, ResponsiveValue | BreakpointMap>,
@@ -19,22 +26,25 @@ export function generateResponsive(
     property: string;
     base: ResponsiveValue | BreakpointMap;
     offset: ResponsiveValue | BreakpointMap;
-    operator?: string; // + - * / ...
+    operator?: string; // + - * / etc.
   }>
 ): Record<string, Record<string, string>> {
   const result: Record<string, Record<string, string>> = {};
 
+  // Helper to convert a value to a proper CSS string
   const toCssValue = (v: ResponsiveValue) => {
     const s = String(v);
+    // If the value is a CSS variable, wrap it with var()
     return s.startsWith('--') ? `var(${s})` : s;
   };
 
-  // 1️⃣ Normal props
+  // 1️⃣ Process normal CSS properties
   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) {
+      // Responsive map provided
       const map = valOrMap as BreakpointMap;
       for (const bp of BPS) {
         const token = map[bp];
@@ -44,22 +54,34 @@ export function generateResponsive(
         result[media][cssProp] = toCssValue(token);
       }
     } else {
+      // Single value, apply to all breakpoints
+      const token = valOrMap as ResponsiveValue;
       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);
+        result[media][cssProp] = toCssValue(token);
       }
     }
   }
 
-  // 2️⃣ Calc props
+  // 2️⃣ Process calc() properties if provided
   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]);
+
+        // Safely extract the base value for the current breakpoint
+        const baseValue =
+          typeof base === 'object' && !Array.isArray(base) ? ((base as BreakpointMap)[bp] ?? Object.values(base as BreakpointMap)[0]) : base;
+
+        // Safely extract the offset value for the current breakpoint
+        const offsetValue =
+          typeof offset === 'object' && !Array.isArray(offset)
+            ? ((offset as BreakpointMap)[bp] ?? Object.values(offset as BreakpointMap)[0])
+            : offset;
+
         if (!result[media]) result[media] = {};
+        // Build the calc() CSS value
         result[media][property] = `calc(${baseValue} ${operator} ${offsetValue})`;
       }
     }

package/src/utils/generateResponsiveMediaCalc.ts

@@ -1,32 +0,0 @@
-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/mergeResponsiveMedias.ts

@@ -1,21 +0,0 @@
-/**
- * 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;
-}