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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.177",
+  "version": "0.0.178",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",
@@ -14,7 +14,9 @@
   "files": [
     "src/**/*.css.ts",
     "src/**/*.ts",
+    "src/**/*.tsx",
     "!src/**/*.stories.ts",
+    "!src/**/stories.ts",
     "!src/**/*.test.ts"
   ],
   "peerDependencies": {

package/src/assets/styles/mediaqueries.tsx

@@ -0,0 +1,24 @@
+export const breakpoints1 = [
+  640 /* Small devices (portrait tablets and large phones, 640px and up) */, 768 /* Medium devices (landscape tablets, 768px and up) */,
+  1024 /* Large devices (laptops/desktops, 1024px and up) */, 1680 /* Extra large devices (large laptops and desktops, 1280px and up) */,
+];
+
+export const mq = breakpoints1.map((bp) => `(min-width: ${bp}px)`);
+
+export const breakpoints = {
+  mobile: 0, // Mobile par défaut
+  sm: 640, // Mobile large
+  md: 768, // Tablette
+  lg: 1024, // Petit laptop
+  xl: 1280, // Desktop
+  '2xl': 1536, // Grand écran
+} as const;
+
+export const queries = {
+  mobile: `screen and (min-width: ${breakpoints.mobile}px)`,
+  sm: `screen and (min-width: ${breakpoints.sm}px)`,
+  md: `screen and (min-width: ${breakpoints.md}px)`,
+  lg: `screen and (min-width: ${breakpoints.lg}px)`,
+  xl: `screen and (min-width: ${breakpoints.xl}px)`,
+  '2xl': `screen and (min-width: ${breakpoints['2xl']}px)`,
+};

package/src/components/Actions/Actions.tsx

@@ -0,0 +1,132 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { actionsRecipe, type ActionsVariants } from './Actions.css';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+
+export interface ActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ActionsVariants> {
+  css?: string;
+  as?: 'div' | 'section' | 'footer';
+}
+
+export const Actions = forwardRef<HTMLDivElement, ActionsProps>(
+  (
+    {
+      children,
+      align,
+      direction,
+      spacing,
+      wrap,
+      fullWidth,
+      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
+  ) => {
+    return (
+      <Component
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={ref as any}
+        className={clsx(
+          actionsRecipe({ align, direction, spacing, wrap, fullWidth }),
+          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}>
+        {children}
+      </Component>
+    );
+  }
+);
+
+Actions.displayName = 'Actions';

package/src/components/Actions/export.tsx

@@ -0,0 +1,4 @@
+// export { Actions } from '.';
+// export type { ActionsProps } from '.';
+
+// export { styles as ActionsStyles } from './styles.css';

package/src/components/{Main/stories.ts → Actions/stories.tsx}

@@ -1,13 +1,15 @@
 // import type { Meta, StoryObj } from '@storybook/react';
-//
+
+// import { Actions, Button } from '../../index';
+// import { actionsStyle } from './styles.css';
+
 // import { defaultTheme } from '../../assets/styles/default-theme';
-// import { Main } from '.';
-// import { mainStyle } from './styles.css';
-//
+// import { buttonStyle } from '../Button/styles.css';
+
 // // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-// const meta = {
-//   title: 'Latte Components / Layout / Main',
-//   component: Main,
+// const meta: Meta<typeof Actions> = {
+//   title: 'Latte Components / 3. Buttons / Actions',
+//   component: Actions,
 //   parameters: {
 //     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
 //     layout: 'centered',
@@ -17,17 +19,16 @@
 //   // More on argTypes: https://storybook.js.org/docs/api/argtypes
 //   argTypes: {},
 //   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-// } satisfies Meta<typeof Main>;
-//
+// };
+
 // export default meta;
 // type Story = StoryObj<typeof meta>;
-//
+
 // // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 // export const Default: Story = {
 //   args: {
-//     className: mainStyle,
 //     theme: defaultTheme,
-//     children:
-//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//     className: actionsStyle,
+//     children: <Button className={buttonStyle}>Button</Button>,
 //   },
 // };

package/src/components/Button/Button.tsx

@@ -0,0 +1,132 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { buttonRecipe, type ButtonVariants } from './Button.css';
+import { sprinkles, Sprinkles } from '../../styles/sprinkles.css';
+
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Sprinkles, NonNullable<ButtonVariants> {
+  css?: string;
+  isPending?: boolean;
+  asChild?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant,
+      size,
+      fullWidth,
+      isPending = false,
+      disabled,
+      css,
+      className,
+      children,
+      // 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
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={clsx(
+          buttonRecipe({ variant, size, fullWidth }),
+          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
+        )}
+        disabled={disabled || isPending}
+        {...htmlProps}>
+        {isPending ? 'Loading...' : children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/components/Button/export.tsx

@@ -0,0 +1,5 @@
+// export { Button } from './Button';
+// export type { ButtonProps } from '.';
+// export { Type as ButtonType, Size as ButtonSize, Style as ButtonStyle, Variant as ButtonVariant } from './types';
+
+// export { styles as ButtonStyles } from './styles.css';

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';