@latte-macchiat-io/latte-vanilla-components 0.0.202 → 0.0.204

package/package.json

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

package/src/components/Button/index.tsx

@@ -6,7 +6,6 @@ import { buttonRecipe, type ButtonVariants } from './styles.css';
 
 export type ButtonProps = React.HTMLAttributes<HTMLButtonElement> &
   ButtonVariants & {
-    css?: string;
     isPending?: boolean;
     isDisabled?: boolean;
     translation?: {

package/src/components/Carousel/export.tsx

@@ -1,4 +1,2 @@
-// export { Carousel } from '.';
-// export type { CarouselProps } from '.';
-
-// export { styles as CarouselStyles } from './styles.css';
+export { Carousel, type CarouselProps } from './';
+export { type CarouselVariants } from './styles.css';

package/src/components/Carousel/index.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { clsx } from 'clsx';
-import { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 
 import {
   carouselBullet,
@@ -16,214 +15,183 @@ import {
 } from './styles.css';
 
 import { breakpoints } from '../../styles/mediaqueries';
-import { Icon } from '../Icon';
 
-interface UseWindowSizeReturn {
-  width: number | undefined;
-  height: number | undefined;
-}
+import { useWindowSize } from '../../utils/useWindowSize';
 
-const useWindowSize = (): UseWindowSizeReturn => {
-  const [windowSize, setWindowSize] = useState<UseWindowSizeReturn>({
-    width: undefined,
-    height: undefined,
-  });
+import { Icon } from '../Icon';
 
+export type CarouselProps = React.HTMLAttributes<HTMLDivElement> &
+  CarouselVariants & {
+    gap?: number;
+    data: ReactNode[];
+    itemsPerView?: number;
+    showBullets?: boolean;
+    showNavButtons?: boolean;
+
+    autoplay?: boolean;
+    autoplayInterval?: number;
+  };
+
+export const Carousel = ({
+  data,
+  itemsPerView = 1,
+  showNavButtons = false,
+  showBullets = false,
+  autoplay = false,
+  autoplayInterval = 3000,
+  gap = 16,
+  isFullWidth,
+  className,
+}: CarouselProps) => {
+  const { width: windowWidth } = useWindowSize();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [itemWidth, setItemWidth] = useState(0);
+  const [visibleItems, setVisibleItems] = useState(itemsPerView);
+
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const slideRef = useRef<HTMLDivElement>(null);
+
+  const isTablet = windowWidth !== undefined && windowWidth > breakpoints.md;
+  const isDesktop = windowWidth !== undefined && windowWidth > breakpoints.lg;
+
+  // Adapter le nombre d’items visibles selon le viewport
   useEffect(() => {
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
+    if (isDesktop) {
+      setVisibleItems(itemsPerView);
+    } else if (isTablet) {
+      setVisibleItems(Math.max(1, Math.floor(itemsPerView / 2)));
+    } else {
+      setVisibleItems(1);
+    }
+  }, [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;
+        setItemWidth((containerWidth - totalGap) / visibleItems);
+      }
     };
 
-    window.addEventListener('resize', handleResize);
-    handleResize();
+    calculateItemWidth();
+    window.addEventListener('resize', calculateItemWidth);
+    return () => window.removeEventListener('resize', calculateItemWidth);
+  }, [visibleItems, gap]);
 
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
+  // Autoplay
+  useEffect(() => {
+    if (!autoplay) return;
 
-  return windowSize;
-};
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => {
+        const maxIndex = Math.max(0, data.length - visibleItems);
+        return prev >= maxIndex ? 0 : prev + 1;
+      });
+    }, autoplayInterval);
 
-export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'gap'>, NonNullable<CarouselVariants> {
-  css?: string;
-  data: ReactNode[];
-  itemsPerView?: number;
-  showNavButtons?: boolean;
-  showBullets?: boolean;
-  autoplay?: boolean;
-  autoplayInterval?: number;
-  gap?: number; // simple px value
-}
-
-export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
-  (
-    {
-      data,
-      itemsPerView = 1,
-      showNavButtons = false,
-      showBullets = false,
-      autoplay = false,
-      autoplayInterval = 3000,
-      gap = 16,
-      isFullWidth,
-      css,
-      className,
-      ...htmlProps
-    },
-    ref
-  ) => {
-    const { width: windowWidth } = useWindowSize();
-    const [currentIndex, setCurrentIndex] = useState(0);
-    const [itemWidth, setItemWidth] = useState(0);
-    const [visibleItems, setVisibleItems] = useState(itemsPerView);
-
-    const carouselRef = useRef<HTMLDivElement>(null);
-    const slideRef = useRef<HTMLDivElement>(null);
-
-    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);
-      } else if (isTablet) {
-        setVisibleItems(Math.max(1, Math.floor(itemsPerView / 2)));
-      } else {
-        setVisibleItems(1);
-      }
-    }, [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;
-          setItemWidth((containerWidth - totalGap) / visibleItems);
-        }
-      };
-
-      calculateItemWidth();
-      window.addEventListener('resize', calculateItemWidth);
-      return () => window.removeEventListener('resize', calculateItemWidth);
-    }, [visibleItems, gap]);
-
-    // 🔹 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;
-
-      let touchStartX = 0;
-      let touchEndX = 0;
-
-      const handleTouchStart = (e: TouchEvent) => {
-        touchStartX = e.changedTouches[0].screenX;
-      };
-
-      const handleTouchEnd = (e: TouchEvent) => {
-        touchEndX = e.changedTouches[0].screenX;
-        handleSwipe();
-      };
-
-      const handleSwipe = () => {
-        const swipeThreshold = 100;
-        const diff = touchStartX - touchEndX;
-
-        if (Math.abs(diff) > swipeThreshold) {
-          if (diff > 0) {
-            handleNext();
-          } else {
-            handlePrevious();
-          }
-        }
-      };
+    return () => clearInterval(interval);
+  }, [autoplay, autoplayInterval, data.length, visibleItems]);
 
-      carousel.addEventListener('touchstart', handleTouchStart, { passive: true });
-      carousel.addEventListener('touchend', handleTouchEnd, { passive: true });
+  // Swipe mobile
+  useEffect(() => {
+    const carousel = carouselRef.current;
+    if (!carousel) return;
 
-      return () => {
-        carousel.removeEventListener('touchstart', handleTouchStart);
-        carousel.removeEventListener('touchend', handleTouchEnd);
-      };
-    }, []);
+    let touchStartX = 0;
+    let touchEndX = 0;
 
-    const handlePrevious = () => {
-      setCurrentIndex((prev) => Math.max(0, prev - 1));
+    const handleTouchStart = (e: TouchEvent) => {
+      touchStartX = e.changedTouches[0].screenX;
     };
 
-    const handleNext = () => {
-      const maxIndex = Math.max(0, data.length - visibleItems);
-      setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
+    const handleTouchEnd = (e: TouchEvent) => {
+      touchEndX = e.changedTouches[0].screenX;
+      handleSwipe();
     };
 
-    const handleBulletClick = (index: number) => {
-      const maxIndex = Math.max(0, data.length - visibleItems);
-      setCurrentIndex(Math.min(index, maxIndex));
+    const handleSwipe = () => {
+      const swipeThreshold = 100;
+      const diff = touchStartX - touchEndX;
+
+      if (Math.abs(diff) > swipeThreshold) {
+        if (diff > 0) {
+          handleNext();
+        } else {
+          handlePrevious();
+        }
+      }
     };
 
-    const translateX = -(currentIndex * (itemWidth + gap));
+    carousel.addEventListener('touchstart', handleTouchStart, { passive: true });
+    carousel.addEventListener('touchend', handleTouchEnd, { passive: true });
+
+    return () => {
+      carousel.removeEventListener('touchstart', handleTouchStart);
+      carousel.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, []);
+
+  const handlePrevious = () => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  };
+
+  const handleNext = () => {
     const maxIndex = Math.max(0, data.length - visibleItems);
+    setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
+  };
 
-    return (
-      <div ref={ref as any} className={clsx(carouselRecipe({ isFullWidth }), css, className)} {...htmlProps}>
-        <div ref={carouselRef} className={carouselContent}>
-          <div
-            ref={slideRef}
-            className={carouselSlide}
-            style={{
-              gap: `${gap}px`,
-              transform: `translateX(${translateX}px)`,
-            }}>
-            {data.map((item, index) => (
-              <div key={index} className={carouselItem} style={{ width: `${itemWidth}px` }}>
-                {item}
-              </div>
-            ))}
-          </div>
+  const handleBulletClick = (index: number) => {
+    const maxIndex = Math.max(0, data.length - visibleItems);
+    setCurrentIndex(Math.min(index, maxIndex));
+  };
+
+  const translateX = -(currentIndex * (itemWidth + gap));
+  const maxIndex = Math.max(0, data.length - visibleItems);
+
+  return (
+    <div className={clsx(carouselRecipe({ isFullWidth }), className)}>
+      <div ref={carouselRef} className={carouselContent}>
+        <div
+          ref={slideRef}
+          className={carouselSlide}
+          style={{
+            gap: `${gap}px`,
+            transform: `translateX(${translateX}px)`,
+          }}>
+          {data.map((item, index) => (
+            <div key={index} className={carouselItem} style={{ width: `${itemWidth}px` }}>
+              {item}
+            </div>
+          ))}
         </div>
-
-        {showNavButtons && (
-          <div className={carouselNav}>
-            <button type="button" className={carouselNavButton} onClick={handlePrevious} disabled={currentIndex === 0} aria-label="Previous slide">
-              <Icon icon="arrowBack" />
-            </button>
-            <button type="button" className={carouselNavButton} onClick={handleNext} disabled={currentIndex >= maxIndex} aria-label="Next slide">
-              <Icon icon="arrowForward" />
-            </button>
-          </div>
-        )}
-
-        {showBullets && (
-          <div className={carouselBullets}>
-            {Array.from({ length: maxIndex + 1 }, (_, index) => (
-              <button
-                key={index}
-                type="button"
-                aria-label={`Go to slide ${index + 1}`}
-                onClick={() => handleBulletClick(index)}
-                className={clsx(carouselBullet, index === currentIndex && carouselBulletActive)}
-              />
-            ))}
-          </div>
-        )}
       </div>
-    );
-  }
-);
+
+      {showNavButtons && (
+        <div className={carouselNav}>
+          <button type="button" className={carouselNavButton} onClick={handlePrevious} disabled={currentIndex === 0} aria-label="Previous slide">
+            <Icon icon="arrowBack" />
+          </button>
+          <button type="button" className={carouselNavButton} onClick={handleNext} disabled={currentIndex >= maxIndex} aria-label="Next slide">
+            <Icon icon="arrowForward" />
+          </button>
+        </div>
+      )}
+
+      {showBullets && (
+        <div className={carouselBullets}>
+          {Array.from({ length: maxIndex + 1 }, (_, index) => (
+            <button
+              key={index}
+              type="button"
+              aria-label={`Go to slide ${index + 1}`}
+              onClick={() => handleBulletClick(index)}
+              className={clsx(carouselBullet, index === currentIndex && carouselBulletActive)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Carousel/theme.ts

@@ -0,0 +1,102 @@
+const themeCarouselBase = {
+  carousel: {
+    gap: {
+      mobile: '15',
+      sm: '15',
+      md: '30',
+      lg: '30',
+      xl: '50',
+      '2xl': '50',
+    },
+    nav: {
+      borderRadius: '1000px',
+      width: {
+        mobile: '15',
+        sm: '15',
+        md: '30',
+        lg: '30',
+        xl: '50',
+        '2xl': '50',
+      },
+      height: {
+        mobile: '15',
+        sm: '15',
+        md: '30',
+        lg: '30',
+        xl: '50',
+        '2xl': '50',
+      },
+    },
+    bullet: {
+      borderRadius: '1000px',
+      bottom: {
+        mobile: '15px',
+        sm: '15px',
+        md: '30px',
+        lg: '30px',
+        xl: '50px',
+        '2xl': '50px',
+      },
+      gap: {
+        mobile: '15',
+        sm: '15',
+        md: '30',
+        lg: '30',
+        xl: '50',
+        '2xl': '50',
+      },
+      width: {
+        mobile: '15',
+        sm: '15',
+        md: '30',
+        lg: '30',
+        xl: '50',
+        '2xl': '50',
+      },
+      height: {
+        mobile: '15',
+        sm: '15',
+        md: '30',
+        lg: '30',
+        xl: '50',
+        '2xl': '50',
+      },
+    },
+  },
+};
+
+export const themeCarouselLight = {
+  carousel: {
+    ...themeCarouselBase.carousel,
+    iconColor: '#FF7377',
+
+    nav: {
+      ...themeCarouselBase.carousel.nav,
+      backgroundColor: '#FF7377',
+    },
+
+    bullet: {
+      ...themeCarouselBase.carousel.bullet,
+      backgroundColor: '#FF7377',
+      activeBackgroundColor: '#FF7377',
+    },
+  },
+};
+
+export const themeCarouselDark = {
+  carousel: {
+    ...themeCarouselBase.carousel,
+    iconColor: '#FF7377',
+
+    nav: {
+      ...themeCarouselBase.carousel.nav,
+      backgroundColor: '#FF7377',
+    },
+
+    bullet: {
+      ...themeCarouselBase.carousel.bullet,
+      backgroundColor: '#FF7377',
+      activeBackgroundColor: '#FF7377',
+    },
+  },
+};

package/src/components/Columns/export.tsx

@@ -1,5 +1,2 @@
-// export { Columns } from '.';
-// export type { ColumnsProps } from '.';
-// export { Align as ColumnsAlign } from './types';
-
-// export { styles as ColumnsStyles } from './styles.css'
+export { Columns, type ColumnsProps } from './';
+export { type ColumnsVariants } from './styles.css';

package/src/components/Columns/index.tsx

@@ -1,22 +1,16 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-'use client';
-
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
-import { columnItem, columnsRecipe } from './styles.css';
+import { columnItem, columnsRecipe, ColumnsVariants } from './styles.css';
 
-export type ColumnsProps = React.HTMLAttributes<HTMLDivElement> & {
-  css?: string;
-  columns: number[];
-  align: any;
-  vAlign: any;
-  children: React.ReactNode;
-};
+export type ColumnsProps = React.HTMLAttributes<HTMLDivElement> &
+  ColumnsVariants & {
+    columns: number[];
+    children: React.ReactNode;
+  };
 
-export const Columns = forwardRef<HTMLDivElement, ColumnsProps>(({ align, vAlign, columns, children, className, css }, ref) => {
+export const Columns = ({ align, vAlign, columns, children, className }: ColumnsProps) => {
   return (
-    <div ref={ref} className={clsx(columnsRecipe({ align, vAlign }), css, className)}>
+    <div className={clsx(columnsRecipe({ align, vAlign }), className)}>
       {Array.isArray(children) &&
         children.map((child, index) => (
           <div
@@ -31,4 +25,4 @@ export const Columns = forwardRef<HTMLDivElement, ColumnsProps>(({ align, vAlign
         ))}
     </div>
   );
-});
+};

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

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries } from '../../styles/mediaqueries';
 import { themeContract } from '../../theme/contract.css';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
@@ -68,3 +68,5 @@ export const columnItem = style({
     },
   },
 });
+
+export type ColumnsVariants = RecipeVariants<typeof columnsRecipe>;

package/src/components/Columns/theme.ts

@@ -0,0 +1,24 @@
+const themeColumnsBase = {
+  columns: {
+    gap: {
+      mobile: '15',
+      sm: '15',
+      md: '30',
+      lg: '30',
+      xl: '50',
+      '2xl': '50',
+    },
+  },
+};
+
+export const themeColumnsLight = {
+  columns: {
+    ...themeColumnsBase.columns,
+  },
+};
+
+export const themeColumnsDark = {
+  columns: {
+    ...themeColumnsBase.columns,
+  },
+};

package/src/components/ConsentCookie/export.tsx

@@ -1,4 +1,2 @@
-// export { ConsentCookie } from '.';
-// export type { ConsentCookieProps } from '.';
-
-// export { styles as ConsentCookieStyles } from './styles.css';
+export { ConsentCookie, type ConsentCookieProps } from './';
+export { type ConsentCookieVariants } from './styles.css';