@latte-macchiat-io/latte-vanilla-components 0.0.333 → 0.0.334

package/package.json

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

package/src/components/Carousel/index.tsx

@@ -2,7 +2,6 @@
 
 import { clsx } from 'clsx';
 import { ReactNode, useEffect, useRef, useState } from 'react';
-
 import {
   carouselBullet,
   carouselBulletActive,
@@ -17,27 +16,38 @@ import {
   carouselSlide,
   type CarouselVariants,
 } from './styles.css';
-
 import { breakpoints } from '../../styles/mediaqueries';
-
 import { useWindowSize } from '../../utils/useWindowSize';
-
 import { Icon } from '../Icon';
 
 export type CarouselProps = React.HTMLAttributes<HTMLDivElement> &
   CarouselVariants &
   CarouselNavVariants &
   CarouselContentVariants & {
-    gap?: number;
     data: ReactNode[];
+    gap?: number | Partial<Record<keyof typeof breakpoints, number>>;
     itemsPerView?: number;
     showBullets?: boolean;
     showNavButtons?: boolean;
-
     autoplay?: boolean;
     autoplayInterval?: number;
   };
 
+const getResponsiveValue = (values: number | Partial<Record<keyof typeof breakpoints, number>>, width: number | undefined): number => {
+  if (typeof values === 'number') return values;
+
+  const bpOrder: (keyof typeof breakpoints)[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
+  let currentValue: number = values.mobile ?? 0;
+
+  for (const bp of bpOrder) {
+    if (width && width >= breakpoints[bp] && values[bp] !== undefined) {
+      currentValue = values[bp]!;
+    }
+  }
+
+  return currentValue;
+};
+
 export const Carousel = ({
   data,
   overflow,
@@ -63,7 +73,6 @@ export const Carousel = ({
   const isTablet = windowWidth !== undefined && windowWidth > breakpoints.md;
   const isDesktop = windowWidth !== undefined && windowWidth > breakpoints.lg;
 
-  // Adapter le nombre d’items visibles selon le viewport
   useEffect(() => {
     if (isDesktop) {
       setVisibleItems(itemsPerView);
@@ -74,12 +83,12 @@ export const Carousel = ({
     }
   }, [isTablet, isDesktop, itemsPerView]);
 
-  // Calcul largeur d’un item
   useEffect(() => {
     const calculateItemWidth = () => {
       if (carouselRef.current) {
         const containerWidth = carouselRef.current.getBoundingClientRect().width;
-        const totalGap = (visibleItems - 1) * gap;
+        const currentGap = getResponsiveValue(gap, windowWidth);
+        const totalGap = (visibleItems - 1) * currentGap;
         setItemWidth((containerWidth - totalGap) / visibleItems);
       }
     };
@@ -87,23 +96,19 @@ export const Carousel = ({
     calculateItemWidth();
     window.addEventListener('resize', calculateItemWidth);
     return () => window.removeEventListener('resize', calculateItemWidth);
-  }, [visibleItems, gap]);
+  }, [visibleItems, gap, windowWidth]);
 
-  // Autoplay
   useEffect(() => {
     if (!autoplay) return;
-
     const interval = setInterval(() => {
       setCurrentIndex((prev) => {
         const maxIndex = Math.max(0, data.length - visibleItems);
         return prev >= maxIndex ? 0 : prev + 1;
       });
     }, autoplayInterval);
-
     return () => clearInterval(interval);
   }, [autoplay, autoplayInterval, data.length, visibleItems]);
 
-  // Swipe mobile
   useEffect(() => {
     const carousel = carouselRef.current;
     if (!carousel) return;
@@ -156,7 +161,8 @@ export const Carousel = ({
     setCurrentIndex(Math.min(index, maxIndex));
   };
 
-  const translateX = -(currentIndex * (itemWidth + gap));
+  const currentGap = getResponsiveValue(gap, windowWidth);
+  const translateX = -(currentIndex * (itemWidth + currentGap));
   const maxIndex = Math.max(0, data.length - visibleItems);
 
   return (
@@ -166,7 +172,7 @@ export const Carousel = ({
           ref={slideRef}
           className={carouselSlide}
           style={{
-            gap: `${gap}px`,
+            gap: `${currentGap}px`,
             transform: `translateX(${translateX}px)`,
           }}>
           {data.map((item, index) => (