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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.332",
+  "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,42 +2,55 @@
 
 import { clsx } from 'clsx';
 import { ReactNode, useEffect, useRef, useState } from 'react';
-
 import {
   carouselBullet,
   carouselBulletActive,
   carouselBullets,
   carouselContent,
+  type CarouselContentVariants,
   carouselItem,
   carouselNav,
   carouselNavButton,
-  CarouselNavVariants,
+  type CarouselNavVariants,
   carouselRecipe,
   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 & {
-    gap?: number;
+  CarouselNavVariants &
+  CarouselContentVariants & {
     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,
   itemsPerView = 1,
   showNavButtons = false,
   showBullets = false,
@@ -60,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);
@@ -71,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);
       }
     };
@@ -84,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;
@@ -153,17 +161,18 @@ 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 (
     <div className={clsx(carouselRecipe({ isFullWidth }), className)}>
-      <div ref={carouselRef} className={carouselContent}>
+      <div ref={carouselRef} className={carouselContent({ overflow })}>
         <div
           ref={slideRef}
           className={carouselSlide}
           style={{
-            gap: `${gap}px`,
+            gap: `${currentGap}px`,
             transform: `translateX(${translateX}px)`,
           }}>
           {data.map((item, index) => (

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

@@ -56,11 +56,23 @@ export const carouselRecipe = recipe(
   'carousel'
 );
 
-export const carouselContent = style(
+export const carouselContent = recipe(
   {
-    width: '100%',
-    overflow: 'hidden',
-    position: 'relative',
+    base: {
+      width: '100%',
+      position: 'relative',
+    },
+
+    variants: {
+      overflow: {
+        hidden: { overflow: 'hidden' },
+        visible: { overflow: 'visible' },
+      },
+    },
+
+    defaultVariants: {
+      overflow: 'hidden',
+    },
   },
   'carousel-content'
 );
@@ -254,4 +266,5 @@ export const carouselBulletActive = style(
 );
 
 export type CarouselVariants = RecipeVariants<typeof carouselRecipe>;
+export type CarouselContentVariants = RecipeVariants<typeof carouselContent>;
 export type CarouselNavVariants = RecipeVariants<typeof carouselNav>;