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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.327",
+  "version": "0.0.329",
   "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,7 +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';
 
 export const carouselRecipe = recipe(
   {
@@ -95,7 +95,7 @@ export const carouselNav = recipe(
       pointerEvents: 'none',
       justifyContent: 'flex-end',
 
-      '@media': generateResponsive({
+      '@media': generateResponsiveMedia({
         gap: themeContract.carousel.nav.gap,
       }),
     },
@@ -117,7 +117,7 @@ export const carouselNav = recipe(
 
       navPositionVertical: {
         top: {
-          '@media': generateResponsive(
+          '@media': generateResponsiveMedia(
             {}, // pas de props "normales" ici
             [
               {
@@ -134,7 +134,7 @@ export const carouselNav = recipe(
           transform: 'translate(0%, -50%)',
         },
         bottom: {
-          '@media': generateResponsive(
+          '@media': generateResponsiveMedia(
             {}, // pas de props "normales" ici non plus
             [
               {
@@ -172,8 +172,8 @@ export const carouselNavButton = style(
 
     ':hover': {
       transform: 'scale(1.1)',
-      color: themeContract.colors.background,
-      backgroundColor: themeContract.colors.primary,
+      border: themeContract.carousel.nav.borderHover,
+      backgroundColor: themeContract.carousel.nav.backgroundColorHover,
     },
 
     ':disabled': {
@@ -182,7 +182,7 @@ export const carouselNavButton = style(
       pointerEvents: 'none',
     },
 
-    '@media': generateResponsive({
+    '@media': generateResponsiveMedia({
       width: themeContract.carousel.nav.width,
       height: themeContract.carousel.nav.height,
     }),
@@ -199,7 +199,7 @@ export const carouselBullets = style({
   position: 'absolute',
   justifyContent: 'center',
 
-  '@media': generateResponsive(
+  '@media': generateResponsiveMedia(
     {
       gap: themeContract.carousel.bullet.gap,
     },
@@ -227,7 +227,7 @@ export const carouselBullet = style(
       transform: 'scale(1.2)',
     },
 
-    '@media': generateResponsive({
+    '@media': generateResponsiveMedia({
       width: themeContract.carousel.bullet.width,
       height: themeContract.carousel.bullet.height,
     }),

package/src/components/Carousel/theme.ts

@@ -90,6 +90,8 @@ export const themeCarouselLight = {
       ...themeCarouselBase.carousel.nav,
       border: '1px solid #000',
       backgroundColor: '#FF7377',
+      borderHover: '1px solid #000',
+      backgroundColorHover: '#FF7377',
     },
 
     bullet: {
@@ -109,6 +111,8 @@ export const themeCarouselDark = {
       ...themeCarouselBase.carousel.nav,
       border: '1px solid #000',
       backgroundColor: '#FF7377',
+      borderHover: '1px solid #000',
+      backgroundColorHover: '#FF7377',
     },
 
     bullet: {

package/src/theme/contract.css.ts

@@ -811,8 +811,10 @@ export const themeContract = createGlobalThemeContract({
 
     nav: {
       border: 'latte-carousel-nav-border',
+      borderHover: 'latte-carousel-nav-borderHover',
       borderRadius: 'latte-carousel-nav-borderRadius',
       backgroundColor: 'latte-carousel-nav-backgroundColor',
+      backgroundColorHover: 'latte-carousel-nav-backgroundColorHover',
       positionVerticalOffset: {
         mobile: 'latte-carousel-nav-positionVerticalOffset-mobile',
         sm: 'latte-carousel-nav-positionVerticalOffset-sm',

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,91 +0,0 @@
-// 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'];
-
-/**
- * Generates a fully responsive CSS object for 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>,
-  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 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 BreakpointKey));
-
-    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];
-        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️⃣ 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;
-}