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

package/package.json

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

package/src/components/Carousel/index.tsx

@@ -2,6 +2,7 @@
 
 import { clsx } from 'clsx';
 import { ReactNode, useEffect, useRef, useState } from 'react';
+
 import {
   carouselBullet,
   carouselBulletActive,
@@ -16,38 +17,39 @@ import {
   carouselSlide,
   type CarouselVariants,
 } from './styles.css';
+
 import { breakpoints } from '../../styles/mediaqueries';
+import { getResponsiveValue, parseResponsiveNumber } from '../../utils/getResponsiveValue';
 import { useWindowSize } from '../../utils/useWindowSize';
+
 import { Icon } from '../Icon';
 
 export type CarouselProps = React.HTMLAttributes<HTMLDivElement> &
   CarouselVariants &
   CarouselNavVariants &
   CarouselContentVariants & {
+    /** Responsive gap between items (e.g. { mobile: '8px', md: '16px' }) */
+    gap?: number | Record<keyof typeof breakpoints, string | number>;
+
+    /** Items to render */
     data: ReactNode[];
-    gap?: number | Partial<Record<keyof typeof breakpoints, number>>;
+
+    /** Number of items visible per view */
     itemsPerView?: number;
+
+    /** Show pagination bullets */
     showBullets?: boolean;
+
+    /** Show prev/next nav buttons */
     showNavButtons?: boolean;
+
+    /** Autoplay enabled */
     autoplay?: boolean;
+
+    /** Autoplay interval in ms */
     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,6 +65,7 @@ export const Carousel = ({
   navPositionHorizontal,
 }: CarouselProps) => {
   const { width: windowWidth } = useWindowSize();
+
   const [currentIndex, setCurrentIndex] = useState(0);
   const [itemWidth, setItemWidth] = useState(0);
   const [visibleItems, setVisibleItems] = useState(itemsPerView);
@@ -73,6 +76,7 @@ export const Carousel = ({
   const isTablet = windowWidth !== undefined && windowWidth > breakpoints.md;
   const isDesktop = windowWidth !== undefined && windowWidth > breakpoints.lg;
 
+  /** Update number of visible items responsively */
   useEffect(() => {
     if (isDesktop) {
       setVisibleItems(itemsPerView);
@@ -83,14 +87,17 @@ export const Carousel = ({
     }
   }, [isTablet, isDesktop, itemsPerView]);
 
+  /** Compute width per item based on container width + gap */
   useEffect(() => {
     const calculateItemWidth = () => {
-      if (carouselRef.current) {
-        const containerWidth = carouselRef.current.getBoundingClientRect().width;
-        const currentGap = getResponsiveValue(gap, windowWidth);
-        const totalGap = (visibleItems - 1) * currentGap;
-        setItemWidth((containerWidth - totalGap) / visibleItems);
-      }
+      if (!carouselRef.current) return;
+
+      const containerWidth = carouselRef.current.getBoundingClientRect().width;
+      const responsiveGap = getResponsiveValue(gap, windowWidth);
+      const numericGap = parseResponsiveNumber(responsiveGap);
+      const totalGap = (visibleItems - 1) * numericGap;
+
+      setItemWidth((containerWidth - totalGap) / visibleItems);
     };
 
     calculateItemWidth();
@@ -98,17 +105,21 @@ export const Carousel = ({
     return () => window.removeEventListener('resize', calculateItemWidth);
   }, [visibleItems, gap, windowWidth]);
 
+  /** Autoplay logic */
   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 logic */
   useEffect(() => {
     const carousel = carouselRef.current;
     if (!carousel) return;
@@ -122,12 +133,8 @@ export const Carousel = ({
 
     const handleTouchEnd = (e: TouchEvent) => {
       touchEndX = e.changedTouches[0].screenX;
-      handleSwipe();
-    };
-
-    const handleSwipe = () => {
-      const swipeThreshold = 100;
       const diff = touchStartX - touchEndX;
+      const swipeThreshold = 100;
 
       if (Math.abs(diff) > swipeThreshold) {
         if (diff > 0) {
@@ -147,10 +154,7 @@ export const Carousel = ({
     };
   }, []);
 
-  const handlePrevious = () => {
-    setCurrentIndex((prev) => Math.max(0, prev - 1));
-  };
-
+  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));
@@ -161,8 +165,10 @@ export const Carousel = ({
     setCurrentIndex(Math.min(index, maxIndex));
   };
 
-  const currentGap = getResponsiveValue(gap, windowWidth);
-  const translateX = -(currentIndex * (itemWidth + currentGap));
+  const responsiveGap = getResponsiveValue(gap, windowWidth);
+  const numericGap = parseResponsiveNumber(responsiveGap);
+
+  const translateX = -(currentIndex * (itemWidth + numericGap));
   const maxIndex = Math.max(0, data.length - visibleItems);
 
   return (
@@ -172,7 +178,7 @@ export const Carousel = ({
           ref={slideRef}
           className={carouselSlide}
           style={{
-            gap: `${currentGap}px`,
+            gap: typeof responsiveGap === 'number' ? `${responsiveGap}px` : responsiveGap,
             transform: `translateX(${translateX}px)`,
           }}>
           {data.map((item, index) => (

package/src/utils/getResponsiveValue.ts

@@ -0,0 +1,52 @@
+import { breakpoints } from '../styles/mediaqueries';
+
+type BreakpointKey = keyof typeof breakpoints;
+type ResponsiveValue = string | number;
+type ResponsiveMap = Partial<Record<BreakpointKey, ResponsiveValue>>;
+
+/**
+ * Get a responsive value based on current viewport width.
+ *
+ * Supports both raw values (number/string) and responsive maps.
+ *
+ * Example:
+ * getResponsiveValue({ mobile: '8px', sm: '12px', md: '16px' }, 768) -> "12px"
+ * getResponsiveValue(24, 1280) -> 24
+ */
+export const getResponsiveValue = (values: ResponsiveValue | ResponsiveMap, width: number | undefined): ResponsiveValue => {
+  // ✅ Case 1: single non-responsive value
+  if (typeof values === 'string' || typeof values === 'number') return values;
+
+  const bpOrder: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+  // ✅ Default fallback: mobile or first defined value
+  let currentValue: ResponsiveValue = values.mobile ?? Object.values(values).find((v): v is ResponsiveValue => v !== undefined) ?? 0;
+
+  // ✅ Iterate breakpoints in order and update if current width passes threshold
+  for (const bp of bpOrder) {
+    const bpMin = breakpoints[bp];
+    const bpValue = values[bp];
+
+    if (width !== undefined && width >= bpMin && bpValue !== undefined) {
+      currentValue = bpValue;
+    }
+  }
+
+  return currentValue;
+};
+
+/**
+ * Convert a responsive value (with units) into a numeric value for arithmetic operations.
+ * If it's a string with units (e.g., "16px"), the numeric part is extracted.
+ *
+ * Example:
+ * parseResponsiveNumber("16px") -> 16
+ * parseResponsiveNumber(24) -> 24
+ */
+export const parseResponsiveNumber = (value: ResponsiveValue): number => {
+  if (typeof value === 'number') return value;
+
+  // Extract numeric portion from string, e.g. "16px" -> 16
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? 0 : parsed;
+};