@latte-macchiat-io/latte-vanilla-components 0.0.543 → 0.0.545

package/package.json

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

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

@@ -1,8 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '@latte-macchiat-io/latte-vanilla-components';
+import { mediaQuery, themeContract } from '@latte-macchiat-io/latte-vanilla-components';
 
-import { queries } from '../../styles/mediaqueries';
 import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 
 export const boxBase = style({
@@ -111,7 +110,7 @@ export const boxContent = recipe({
         flexDirection: 'column',
 
         '@media': {
-          [queries.md]: {
+          [mediaQuery('md')]: {
             flexDirection: 'row',
           },
         },
@@ -140,7 +139,7 @@ export const boxContent = recipe({
         flexDirection: 'column-reverse',
 
         '@media': {
-          [queries.md]: {
+          [mediaQuery('md')]: {
             flexDirection: 'row-reverse',
           },
         },

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

@@ -2,7 +2,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mediaQuery, queries } from '../../styles/mediaqueries';
+import { mediaQuery } from '../../styles/mediaqueries';
 import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
 
@@ -22,7 +22,7 @@ export const carouselRecipe = recipe(
           marginRight: calc(themeContract.global.paddingRight.mobile).negate().toString(),
 
           '@media': {
-            [queries.sm]: {
+            [mediaQuery('sm')]: {
               marginLeft: calc(themeContract.global.paddingLeft.sm).negate().toString(),
               marginRight: calc(themeContract.global.paddingRight.sm).negate().toString(),
             },
@@ -30,15 +30,15 @@ export const carouselRecipe = recipe(
               marginLeft: calc(themeContract.global.paddingLeft.md).negate().toString(),
               marginRight: calc(themeContract.global.paddingRight.md).negate().toString(),
             },
-            [queries.lg]: {
+            [mediaQuery('lg')]: {
               marginLeft: calc(themeContract.global.paddingLeft.lg).negate().toString(),
               marginRight: calc(themeContract.global.paddingRight.lg).negate().toString(),
             },
-            [queries.xl]: {
+            [mediaQuery('xl')]: {
               marginLeft: calc(themeContract.global.paddingLeft.xl).negate().toString(),
               marginRight: calc(themeContract.global.paddingRight.xl).negate().toString(),
             },
-            [queries['2xl']]: {
+            [mediaQuery('2xl')]: {
               marginLeft: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
               marginRight: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
             },

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

@@ -1,6 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { queries } from '../../styles/mediaqueries';
+
+import { mediaQuery } from '../../styles/mediaqueries';
 import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
 
@@ -14,7 +15,7 @@ export const columnsBase = style({
       gap: themeContract.columns.gap,
     }),
 
-    [queries.md]: {
+    [mediaQuery('md')]: {
       gridAutoFlow: 'row',
       gridTemplateColumns: 'var(--columns)', // desktop : prend la variable CSS
     },
@@ -40,7 +41,7 @@ export const columnsRecipe = recipe(
       reverse: {
         true: {
           '@media': {
-            [queries.md]: {
+            [mediaQuery('md')]: {
               direction: 'rtl',
             },
           },

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

@@ -1,8 +1,7 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-import { themeContract } from '../..';
-import { queries } from '../../styles/mediaqueries';
+import { mediaQuery, themeContract } from '../..';
 import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 
 export const headerBase = style({
@@ -116,7 +115,7 @@ export const headerToggleNav = recipe(
         mobileOnly: {
           display: 'block',
           '@media': {
-            [queries.md]: {
+            [mediaQuery('md')]: {
               display: 'none',
             },
           },

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

@@ -2,7 +2,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { queries } from '../../styles/mediaqueries';
+import { mediaQuery } from '../../styles/mediaqueries';
 import { generateResponsiveMedia } from '../../styles/utils/generateResponsiveMedia';
 import { themeContract } from '../../theme/contract.css';
 import { addPixelsToBreakpoints } from '../../utils/addPixelsToBreakpoints';
@@ -30,23 +30,23 @@ export const videoRecipe = recipe(
             marginRight: calc(themeContract.global.paddingRight.mobile).negate().toString(),
 
             '@media': {
-              [queries.sm]: {
+              [mediaQuery('md')]: {
                 marginLeft: calc(themeContract.global.paddingLeft.sm).negate().toString(),
                 marginRight: calc(themeContract.global.paddingRight.sm).negate().toString(),
               },
-              [queries.md]: {
+              [mediaQuery('md')]: {
                 marginLeft: calc(themeContract.global.paddingLeft.md).negate().toString(),
                 marginRight: calc(themeContract.global.paddingRight.md).negate().toString(),
               },
-              [queries.lg]: {
+              [mediaQuery('lg')]: {
                 marginLeft: calc(themeContract.global.paddingLeft.lg).negate().toString(),
                 marginRight: calc(themeContract.global.paddingRight.lg).negate().toString(),
               },
-              [queries.xl]: {
+              [mediaQuery('xl')]: {
                 marginLeft: calc(themeContract.global.paddingLeft.xl).negate().toString(),
                 marginRight: calc(themeContract.global.paddingRight.xl).negate().toString(),
               },
-              [queries['2xl']]: {
+              [mediaQuery('2xl')]: {
                 marginLeft: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
                 marginRight: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
               },

package/src/styles/mediaqueries.ts

@@ -1,24 +1,30 @@
-import { Breakpoints } from './BreakpointsProvider';
-import { getBreakpoints } from './config';
-
 export const defaultBreakpoints = {
-  mobile: 0,
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  '2xl': 1536,
+  mobile: 0, // Mobile par défaut
+  sm: 640, // Mobile large
+  md: 888, // Tablette
+  lg: 1024, // Petit laptop
+  xl: 1280, // Desktop
+  '2xl': 1536, // Grand écran
 } as const;
 
-export const queries = {
-  mobile: `screen and (min-width: ${defaultBreakpoints.mobile}px)`,
-  sm: `screen and (min-width: ${defaultBreakpoints.sm}px)`,
-  md: `screen and (min-width: ${defaultBreakpoints.md}px)`,
-  lg: `screen and (min-width: ${defaultBreakpoints.lg}px)`,
-  xl: `screen and (min-width: ${defaultBreakpoints.xl}px)`,
-  '2xl': `screen and (min-width: ${defaultBreakpoints['2xl']}px)`,
-};
+// export const queries = {
+//   mobile: `screen and (min-width: ${defaultBreakpoints.mobile}px)`,
+//   sm: `screen and (min-width: ${defaultBreakpoints.sm}px)`,
+//   md: `screen and (min-width: ${defaultBreakpoints.md}px)`,
+//   lg: `screen and (min-width: ${defaultBreakpoints.lg}px)`,
+//   xl: `screen and (min-width: ${defaultBreakpoints.xl}px)`,
+//   '2xl': `screen and (min-width: ${defaultBreakpoints['2xl']}px)`,
+// };
+
+export type Breakpoints = keyof typeof defaultBreakpoints;
 
-export type BreakpointKey = keyof typeof defaultBreakpoints;
+let projectBreakpoints: typeof defaultBreakpoints | undefined;
 
-export const mediaQuery = (key: BreakpointKey) => `screen and (min-width: ${defaultBreakpoints[key]}px)`;
+export const setProjectBreakpoints = (bp: typeof defaultBreakpoints) => {
+  projectBreakpoints = bp;
+};
+
+export const mediaQuery = (key: Breakpoints) => {
+  const bp = projectBreakpoints ?? defaultBreakpoints;
+  return `screen and (min-width: ${bp[key]}px)`;
+};

package/src/styles/utils/calcResponsiveSubtract.ts

@@ -1,4 +1,4 @@
-import { Breakpoints } from '../types';
+import { Breakpoints } from '../mediaqueries';
 
 // A responsive value can be a string, number, or anything with a toString method
 type ResponsiveValue = string | number | { toString(): string };

package/src/styles/utils/generateResponsiveMedia.ts

@@ -1,6 +1,5 @@
-// utils/generateResponsive.ts
-import { queries } from '../mediaqueries';
-import { Breakpoints } from '../types';
+// utils/generateResponsiveMedia.ts
+import { Breakpoints, mediaQuery } from '../mediaqueries';
 
 // A responsive value can be a string, number, or anything with a toString method
 type ResponsiveValue = string | number | { toString(): string };
@@ -8,7 +7,7 @@ type ResponsiveValue = string | number | { toString(): string };
 // Map of breakpoint keys to responsive values
 type BreakpointMap = Partial<Record<Breakpoints, ResponsiveValue>>;
 
-// Ordered list of breakpoints to iterate over
+// Ordered list of breakpoints
 const BPS: Breakpoints[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
 
 /**
@@ -24,63 +23,54 @@ export function generateResponsiveMedia(
     property: string;
     base: ResponsiveValue | BreakpointMap;
     offset: ResponsiveValue | BreakpointMap;
-    operator?: string; // + - * / etc.
+    operator?: string;
   }>
 ): 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️⃣ 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 Breakpoints));
 
     if (isMapLike) {
-      // Responsive map provided
       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];
+        const media = mediaQuery(bp); // <-- juste la condition, pas @media
         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];
+        const media = mediaQuery(bp);
         if (!result[media]) result[media] = {};
         result[media][cssProp] = toCssValue(token);
       }
     }
   }
 
-  // 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 media = mediaQuery(bp);
 
-        // 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})`;
+        result[media][property] = `calc(${toCssValue(baseValue)} ${operator} ${toCssValue(offsetValue)})`;
       }
     }
   }

package/src/styles/BreakpointsProvider.tsx

@@ -1,15 +0,0 @@
-import React, { createContext, ReactNode, useContext } from 'react';
-
-export type Breakpoints = Record<string, number>;
-
-const BreakpointsContext = createContext<Breakpoints | null>(null);
-
-export const BreakpointsProvider = ({ breakpoints, children }: { breakpoints: Breakpoints; children: ReactNode }) => {
-  return <BreakpointsContext.Provider value={breakpoints}>{children}</BreakpointsContext.Provider>;
-};
-
-export const useBreakpoints = (): Breakpoints => {
-  const ctx = useContext(BreakpointsContext);
-  if (!ctx) throw new Error('No BreakpointsProvider found');
-  return ctx;
-};

package/src/styles/config.ts

@@ -1,12 +0,0 @@
-import { Breakpoints } from './BreakpointsProvider';
-import { defaultBreakpoints } from './mediaqueries';
-
-let activeBreakpoints: Breakpoints = defaultBreakpoints; // ✅ IMPORTANT
-
-export function configureBreakpoints(breakpoints: Breakpoints) {
-  activeBreakpoints = breakpoints;
-}
-
-export function getBreakpoints(): Breakpoints {
-  return activeBreakpoints;
-}

package/src/styles/types.ts

@@ -1 +0,0 @@
-export type Breakpoints = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';