@latte-macchiat-io/latte-vanilla-components 0.0.176 → 0.0.178

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,328 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { clsx } from 'clsx';
+import { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
+import {
+  carouselBullet,
+  carouselBulletActive,
+  carouselBullets,
+  carouselContent,
+  carouselItem,
+  carouselNav,
+  carouselNavButton,
+  carouselRecipe,
+  carouselSlide,
+  type CarouselVariants,
+} from './Carousel.css';
+import { breakpoints } from '../../styles/mediaqueries';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { Icon } from '../Icon/Icon';
+
+interface UseWindowSizeReturn {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+const useWindowSize = (): UseWindowSizeReturn => {
+  const [windowSize, setWindowSize] = useState<UseWindowSizeReturn>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+};
+
+export interface CarouselProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'gap'>, Sprinkles, NonNullable<CarouselVariants> {
+  css?: string;
+  data: ReactNode[];
+  itemsPerView?: number;
+  showNavButtons?: boolean;
+  showBullets?: boolean;
+  autoplay?: boolean;
+  autoplayInterval?: number;
+  gap?: any;
+  as?: 'div' | 'section';
+}
+
+export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
+  (
+    {
+      data,
+      itemsPerView = 1,
+      showNavButtons = false,
+      showBullets = false,
+      autoplay = false,
+      autoplayInterval = 3000,
+      gap = 16,
+      fullWidth,
+      as: Component = 'div',
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...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;
+
+    // Calculate visible items based on screen size
+    useEffect(() => {
+      if (isDesktop) {
+        setVisibleItems(itemsPerView);
+      } else if (isTablet) {
+        setVisibleItems(Math.max(1, Math.floor(itemsPerView / 2)));
+      } else {
+        setVisibleItems(1);
+      }
+    }, [isTablet, isDesktop, itemsPerView]);
+
+    // Calculate item width
+    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 functionality
+    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]);
+
+    // Touch/swipe handling
+    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) {
+            // Swipe left - next
+            handleNext();
+          } else {
+            // Swipe right - previous
+            handlePrevious();
+          }
+        }
+      };
+
+      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));
+    };
+
+    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 (
+      <Component
+        ref={ref as any}
+        className={clsx(
+          carouselRecipe({ fullWidth }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        <div ref={carouselRef} className={carouselContent}>
+          <div
+            ref={slideRef}
+            className={carouselSlide}
+            style={{
+              transform: `translateX(${translateX}px)`,
+              gap: `${gap}px`,
+            }}>
+            {data.map((item, index) => (
+              <div key={index} className={carouselItem} style={{ width: `${itemWidth}px` }}>
+                {item}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {showNavButtons && (
+          <div className={carouselNav}>
+            <button type="button" className={carouselNavButton} onClick={handlePrevious} disabled={currentIndex === 0} aria-label="Previous slide">
+              <Icon icon="arrowBack" size="md" />
+            </button>
+            <button type="button" className={carouselNavButton} onClick={handleNext} disabled={currentIndex >= maxIndex} aria-label="Next slide">
+              <Icon icon="arrowForward" size="md" />
+            </button>
+          </div>
+        )}
+
+        {showBullets && (
+          <div className={carouselBullets}>
+            {Array.from({ length: maxIndex + 1 }, (_, index) => (
+              <button
+                key={index}
+                type="button"
+                className={clsx(carouselBullet, index === currentIndex && carouselBulletActive)}
+                onClick={() => handleBulletClick(index)}
+                aria-label={`Go to slide ${index + 1}`}
+              />
+            ))}
+          </div>
+        )}
+      </Component>
+    );
+  }
+);
+
+Carousel.displayName = 'Carousel';

package/src/components/Carousel/export.tsx

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

package/src/components/Columns/Columns.tsx

@@ -0,0 +1,142 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { columnsRecipe, type ColumnsVariants, columnWidths } from './Columns.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface ColumnsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ColumnsVariants> {
+  css?: string;
+  columns?: (keyof typeof columnWidths)[];
+  as?: 'div' | 'section' | 'article';
+}
+
+export const Columns = forwardRef<HTMLDivElement, ColumnsProps>(
+  (
+    {
+      children,
+      columns,
+      align,
+      spacing,
+      wrap,
+      reverse,
+      alignItems,
+      as: Component = 'div',
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    const childrenArray = Array.isArray(children) ? children : [children];
+
+    return (
+      <Component
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        className={clsx(
+          columnsRecipe({ align, spacing, wrap, reverse, alignItems }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            position,
+            top,
+            bottom,
+            left,
+            right,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        {...htmlProps}>
+        {columns && columns.length > 0
+          ? childrenArray.map((child, index) => (
+              <div key={index} className={clsx(columns[index] && columnWidths[columns[index]])}>
+                {child}
+              </div>
+            ))
+          : children}
+      </Component>
+    );
+  }
+);
+
+Columns.displayName = 'Columns';

package/src/components/Columns/export.tsx

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

package/src/components/ConsentCookie/ConsentCookie.tsx

@@ -0,0 +1,202 @@
+import { clsx } from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import { consentActions, consentContent, type ConsentCookieVariants, consentRecipe } from './ConsentCookie.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { getCookie, setCookie } from '../../utils/cookie';
+import { Button } from '../Button/Button';
+
+// Declare window object including gtag to avoid TypeScript errors
+declare const window: Window &
+  typeof globalThis & {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gtag: any;
+  };
+
+export interface ConsentCookieProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ConsentCookieVariants> {
+  css?: string;
+  cookieName?: string;
+  cookieExpirationDays?: number;
+  onAccept?: () => void;
+  onReject?: () => void;
+  translations?: {
+    actions: {
+      accept: string;
+      reject: string;
+    };
+  };
+  enableGoogleAnalytics?: boolean;
+}
+
+export const ConsentCookie = forwardRef<HTMLDivElement, ConsentCookieProps>(
+  (
+    {
+      children,
+      variant,
+      cookieName = 'consent',
+      cookieExpirationDays = 365,
+      onAccept,
+      onReject,
+      translations,
+      enableGoogleAnalytics = true,
+      css,
+      className,
+      // Extract sprinkles props
+      margin,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      gap,
+      display,
+      flexDirection,
+      justifyContent,
+      flexWrap,
+      flex,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      zIndex,
+      fontSize,
+      fontFamily,
+      lineHeight,
+      textAlign,
+      fontWeight,
+      color,
+      backgroundColor,
+      borderRadius,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      boxShadow,
+      opacity,
+      overflow,
+      overflowX,
+      overflowY,
+      ...htmlProps
+    },
+    ref
+  ) => {
+    const [showConsent, setShowConsent] = useState(false);
+
+    const handleAccept = () => {
+      setShowConsent(false);
+      setCookie(cookieName, 'true', cookieExpirationDays);
+
+      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
+        window.gtag('consent', 'update', {
+          analytics_storage: 'granted',
+        });
+      }
+
+      onAccept?.();
+    };
+
+    const handleReject = () => {
+      setShowConsent(false);
+      setCookie(cookieName, 'false', cookieExpirationDays);
+
+      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
+        window.gtag('consent', 'update', {
+          analytics_storage: 'denied',
+        });
+      }
+
+      onReject?.();
+    };
+
+    useEffect(() => {
+      const consentValue = getCookie(cookieName);
+      const shouldShowConsent = consentValue !== 'true' && consentValue !== 'false';
+      const areCookiesAccepted = consentValue === 'true';
+
+      if (shouldShowConsent) {
+        setShowConsent(true);
+      }
+
+      // Set initial Google Analytics consent
+      if (enableGoogleAnalytics && typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
+        const gAnalyticsConsent = areCookiesAccepted ? 'granted' : 'denied';
+        window.gtag('consent', 'update', {
+          analytics_storage: gAnalyticsConsent,
+        });
+      }
+    }, [cookieName, enableGoogleAnalytics]);
+
+    if (!showConsent) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          consentRecipe({ variant }),
+          sprinkles({
+            margin,
+            marginTop,
+            marginBottom,
+            marginLeft,
+            marginRight,
+            padding,
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            gap,
+            display,
+            flexDirection,
+            justifyContent,
+            flexWrap,
+            flex,
+            width,
+            height,
+            minWidth,
+            maxWidth,
+            minHeight,
+            zIndex,
+            fontSize,
+            fontFamily,
+            lineHeight,
+            textAlign,
+            fontWeight,
+            color,
+            backgroundColor,
+            borderRadius,
+            borderWidth,
+            borderStyle,
+            borderColor,
+            boxShadow,
+            opacity,
+            overflow,
+            overflowX,
+            overflowY,
+          }),
+          css,
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="consent-title"
+        {...htmlProps}>
+        <div className={consentContent}>
+          {children}
+          <div className={consentActions}>
+            <Button variant="outline" size="sm" onClick={handleReject}>
+              {translations?.actions.reject || 'Reject'}
+            </Button>
+            <Button variant="primary" size="sm" onClick={handleAccept}>
+              {translations?.actions.accept || 'Accept'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+ConsentCookie.displayName = 'ConsentCookie';

package/src/components/ConsentCookie/export.tsx

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