@latte-macchiat-io/latte-vanilla-components 0.0.326 → 0.0.328

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.326",
+  "version": "0.0.328",
   "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,10 +5,7 @@ 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(
   {
@@ -98,11 +95,9 @@ export const carouselNav = recipe(
       pointerEvents: 'none',
       justifyContent: 'flex-end',
 
-      '@media': {
-        ...generateResponsiveMedia({
-          gap: themeContract.carousel.nav.gap,
-        }),
-      },
+      '@media': generateResponsiveMedia({
+        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': generateResponsiveMedia(
+            {}, // 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': generateResponsiveMedia(
+            {}, // 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': generateResponsiveMedia({
+      width: themeContract.carousel.nav.width,
+      height: themeContract.carousel.nav.height,
+    }),
   },
   'carousel-nav-button'
 );
@@ -186,7 +199,7 @@ export const carouselBullets = style({
   position: 'absolute',
   justifyContent: 'center',
 
-  '@media': generateResponsive(
+  '@media': generateResponsiveMedia(
     {
       gap: themeContract.carousel.bullet.gap,
     },
@@ -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': generateResponsiveMedia({
+      width: themeContract.carousel.bullet.width,
+      height: themeContract.carousel.bullet.height,
+    }),
   },
   'carousel-bullet'
 );

package/src/utils/generateResponsiveMedia.ts

@@ -1,46 +1,50 @@
-// utils/generateResponsiveMedia.ts
+// utils/generateResponsive.ts
 import { queries } from '../styles/mediaqueries';
 
-/**
- * Breakpoint keys you support (should match your queries object).
- */
+// Define the supported breakpoint keys
 type BreakpointKey = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-const BPS: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
 
-/**
- * Responsive values can be a plain string/number or anything with a toString().
- */
+// 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 responsive media queries for a set of CSS properties.
+ * Generates a fully responsive CSS object for Vanilla Extract
  *
- * Example:
- * generateResponsiveMedia({
- *   width: { mobile: '100%', md: '50%' },
- *   padding: '20px'
- * })
- *
- * => {
- *   '@media (min-width:...)': { width: '50%', padding: '20px' },
- *   ...
- * }
+ * @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 generateResponsiveMedia(properties: Record<string, ResponsiveValue | BreakpointMap>) {
+export function generateResponsiveMedia(
+  props: Record<string, ResponsiveValue | BreakpointMap>,
+  calcProps?: Array<{
+    property: string;
+    base: ResponsiveValue | BreakpointMap;
+    offset: ResponsiveValue | BreakpointMap;
+    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 it's a CSS variable token, wrap with var(...)
+    // If the value is a CSS variable, wrap it with var()
     return s.startsWith('--') ? `var(${s})` : s;
   };
 
-  for (const [cssProp, valOrMap] of Object.entries(properties)) {
+  // 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];
@@ -50,7 +54,7 @@ export function generateResponsiveMedia(properties: Record<string, ResponsiveVal
         result[media][cssProp] = toCssValue(token);
       }
     } else {
-      // single value => apply to all breakpoints
+      // Single value, apply to all breakpoints
       const token = valOrMap as ResponsiveValue;
       for (const bp of BPS) {
         const media = queries[bp as keyof typeof queries];
@@ -60,6 +64,29 @@ export function generateResponsiveMedia(properties: Record<string, ResponsiveVal
     }
   }
 
+  // 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];
+
+        // 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})`;
+      }
+    }
+  }
+
   return result;
 }
 

package/src/utils/generateResponsive.ts

@@ -1,80 +0,0 @@
-// utils/generateResponsive.ts
-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 {
-      // 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(token);
-      }
-    }
-  }
-
-  // 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];
-
-        // ✅ TypeScript safe access
-        const baseValue =
-          typeof base === 'object' && !Array.isArray(base) ? ((base as BreakpointMap)[bp] ?? Object.values(base as BreakpointMap)[0]) : base;
-
-        const offsetValue =
-          typeof offset === 'object' && !Array.isArray(offset)
-            ? ((offset as BreakpointMap)[bp] ?? Object.values(offset as BreakpointMap)[0])
-            : offset;
-
-        if (!result[media]) result[media] = {};
-        result[media][property] = `calc(${baseValue} ${operator} ${offsetValue})`;
-      }
-    }
-  }
-
-  return result;
-}

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