@growth-angels/ds-core 1.3.5 → 1.5.0

package/dist/hooks/useBreakPointObserver.d.ts

@@ -2,4 +2,5 @@ export declare function useBreakpointObserver(breakpoints?: {
     sm: number;
     md: number;
     lg: number;
-}): "sm" | "md" | "lg";
+    xl: number;
+}): "sm" | "md" | "lg" | "xl";

package/dist/hooks/useBreakPointObserver.js

@@ -1,5 +1,5 @@
 import { useReactAdapter } from './useReactAdaptater';
-export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 1280 }) {
+export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 1280, xl: 1400 }) {
     const { useEffect, useState } = useReactAdapter();
     const [current, setCurrent] = useState('sm');
     useEffect(() => {
@@ -7,10 +7,14 @@ export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 128
         const check = () => {
             const width = window.innerWidth;
             let bp = 'sm';
-            if (width >= breakpoints.md)
+            if (width >= breakpoints.xl)
+                bp = 'xl';
+            else if (width >= breakpoints.lg)
                 bp = 'lg';
-            else if (width >= breakpoints.sm)
+            else if (width >= breakpoints.md)
                 bp = 'md';
+            else if (width >= breakpoints.sm)
+                bp = 'sm';
             setCurrent((prev) => (prev !== bp ? bp : prev));
             frameId = requestAnimationFrame(check);
         };

package/dist/organisms/Carousel/Carousel.js

@@ -3,56 +3,131 @@ import { Button } from "../../atoms/atoms";
 import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
 export const Carousel = (props) => {
-    const { children, slidesPerView = { sm: 1, md: 2, lg: 3 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, } = props;
+    const { children, slidesPerView = { sm: 1, md: 2, lg: 3, xl: 4 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, loop = false, } = props;
     const { useEffect, useState, useRef, Children } = useReactAdapter();
     const trackRef = useRef(null);
+    const isNavigatingRef = useRef(false);
     const slides = Children.toArray(children);
     const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
         return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1);
     };
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const [activeDOMIndex, setActiveDOMIndex] = useState(0);
     const [isAtEnd, setIsAtEnd] = useState(false);
     const [isAtStart, setIsAtStart] = useState(true);
     const [totalPages, setTotalPages] = useState(0);
     useEffect(() => {
-        setIsAtStart(activeSlideIndex === 0);
-        setIsAtEnd(activeSlideIndex === totalPages - 1);
-    }, [activeSlideIndex, totalPages]);
-    const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200 });
+        if (loop) {
+            setIsAtStart(false);
+            setIsAtEnd(false);
+        }
+        else {
+            setIsAtStart(activeSlideIndex === 0);
+            setIsAtEnd(activeSlideIndex === totalPages - 1);
+        }
+    }, [activeSlideIndex, totalPages, loop]);
+    const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200, xl: 1400 });
     useEffect(() => {
         setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1));
     }, [breakpoint, slidesPerView]);
+    useEffect(() => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const handleScroll = () => {
+            if (loop) {
+                const slideWidth = track.scrollWidth / (slides.length * 3);
+                const scrollLeft = track.scrollLeft;
+                // Repositionnement infini (uniquement si pas en navigation)
+                if (!isNavigatingRef.current) {
+                    if (scrollLeft <= slideWidth * slides.length) {
+                        track.scrollLeft = scrollLeft + slideWidth * slides.length;
+                    }
+                    else if (scrollLeft >= slideWidth * slides.length * 2) {
+                        track.scrollLeft = scrollLeft - slideWidth * slides.length;
+                    }
+                }
+                const scrollPosition = track.scrollLeft + slideWidth / 2;
+                const domIndex = Math.floor(scrollPosition / slideWidth);
+                const index = domIndex % slides.length;
+                setActiveDOMIndex(domIndex);
+                setActiveSlideIndex(index);
+            }
+            else {
+                const slideWidth = track.scrollWidth / slides.length;
+                const scrollPosition = track.scrollLeft + slideWidth / 2;
+                const index = Math.floor(scrollPosition / slideWidth);
+                setActiveSlideIndex(Math.min(index, slides.length - 1));
+                setActiveDOMIndex(index);
+            }
+        };
+        track.addEventListener("scroll", handleScroll);
+        // Position initiale au milieu en mode loop
+        if (loop) {
+            setTimeout(() => {
+                const slideWidth = track.scrollWidth / (slides.length * 3);
+                track.scrollLeft = slideWidth * slides.length;
+            }, 0);
+        }
+        return () => track.removeEventListener("scroll", handleScroll);
+    }, [slides.length, loop]);
     const style = Object.fromEntries(Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`]));
     const goPrev = () => {
         if (!trackRef.current)
             return;
-        const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
-        if (activeSlideIndex === 0)
+        const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
+        if (activeSlideIndex === 0 && !loop)
             return;
-        const nextIndex = activeSlideIndex - 1;
-        slides[nextIndex]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "start",
-        });
-        setActiveSlideIndex(nextIndex);
+        isNavigatingRef.current = true;
+        if (loop) {
+            // En mode loop, on utilise l'index DOM actuel
+            allSlides[activeDOMIndex - 1]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }
+        else {
+            const nextIndex = activeSlideIndex - 1;
+            allSlides[nextIndex]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }
+        setTimeout(() => {
+            isNavigatingRef.current = false;
+        }, 600);
     };
     const goNext = () => {
         if (!trackRef.current)
             return;
-        const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
-        const totalSlides = slides.length;
-        if (activeSlideIndex >= totalSlides - 1)
-            return;
-        if (isAtEnd)
-            return;
-        const nextIndex = activeSlideIndex + 1;
-        slides[nextIndex]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "start",
-        });
-        setActiveSlideIndex(nextIndex);
+        const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
+        isNavigatingRef.current = true;
+        if (loop) {
+            // En mode loop, on utilise l'index DOM actuel
+            allSlides[activeDOMIndex + 1]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }
+        else {
+            const totalSlides = allSlides.length;
+            if (activeSlideIndex >= totalSlides - 1)
+                return;
+            if (isAtEnd)
+                return;
+            const nextIndex = activeSlideIndex + 1;
+            allSlides[nextIndex]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "start",
+            });
+        }
+        setTimeout(() => {
+            isNavigatingRef.current = false;
+        }, 600);
     };
     const goTo = (nextIndex) => {
         if (!trackRef.current)
@@ -63,17 +138,23 @@ export const Carousel = (props) => {
             block: "nearest",
             inline: "start",
         });
-        setActiveSlideIndex(nextIndex);
     };
     const classes = ["ga-ds-carousel"];
     if (props.extraClassNames) {
-        classes.push(...props.extraClassNames);
+        if (typeof props.extraClassNames === "string") {
+            classes.push(props.extraClassNames);
+        }
+        else {
+            classes.push(...props.extraClassNames);
+        }
     }
     return (_jsxs("div", { className: classes.join(" "), style: style, children: [navigation?.positionY === "top" && hasNavigation && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd })), _jsx("div", { className: "ga-ds-carousel__track", ref: trackRef, style: {
                     "--ga-ds-space-between": `${spaceBetween / 10}rem`,
                 }, children: context === "wp-editor"
                     ? children
-                    : slides.map((child, index) => (_jsx("div", { className: `ga-ds-carousel__slide ${index === activeSlideIndex ? "ga-ds-carousel__slide--active" : ""}`, children: child }, index))) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [pagination && hasPagination && (_jsx(CarouselPagination, { totalPages: totalPages, activeSlideIndex: activeSlideIndex, goTo: goTo, clickable: pagination.clickable })), hasNavigation && navigation?.positionY === "bottom" && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd }))] })] }));
+                    : slides.map((child, index) => {
+                        return (_jsx("div", { className: `ga-ds-carousel__slide ${index === activeDOMIndex ? "ga-ds-carousel__slide--active" : ""}`, children: child }, index));
+                    }) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [pagination && hasPagination && (_jsx(CarouselPagination, { totalPages: totalPages, activeSlideIndex: activeSlideIndex, goTo: goTo, clickable: pagination.clickable })), hasNavigation && navigation?.positionY === "bottom" && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd }))] })] }));
 };
 const CarouselNavigation = ({ goPrev, goNext, isAtStart, isAtEnd, }) => {
     return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left", onClick: goPrev, disabled: isAtStart }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right", onClick: goNext, disabled: isAtEnd })] }));

package/dist/organisms/Carousel/Carousel.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Carousel>;
 export default meta;
 type Story = StoryObj<typeof Carousel>;
 export declare const Primary: Story;
+export declare const LoopingCarousel: Story;

package/dist/organisms/Carousel/Carousel.stories.js

@@ -17,7 +17,7 @@ export const Primary = {
             _jsx("div", { children: "Slide 6" }),
             _jsx("div", { children: "Slide 7" }),
         ],
-        slidesPerView: { sm: 1, md: 2, lg: 3 },
+        slidesPerView: { sm: 1, md: 2, lg: 3, xl: 4 },
         spaceBetween: 16,
         pagination: {
             clickable: true,
@@ -29,3 +29,19 @@ export const Primary = {
         hasPagination: true,
     },
 };
+export const LoopingCarousel = {
+    args: {
+        children: [_jsx("div", { children: "Slide A" }), _jsx("div", { children: "Slide B" }), _jsx("div", { children: "Slide C" }), _jsx("div", { children: "Slide D" })],
+        slidesPerView: { sm: 1, md: 1, lg: 1, xl: 1 },
+        spaceBetween: 24,
+        loop: true,
+        pagination: {
+            clickable: true,
+        },
+        navigation: {
+            positionY: "top",
+        },
+        hasNavigation: true,
+        hasPagination: true,
+    },
+};

package/dist/organisms/Carousel/Carousel.types.d.ts

@@ -1,14 +1,16 @@
 import { WordpressDefault } from "../../global.types";
-export type Attributes = {
+export type CarouselAttributes = {
     context?: 'wp-editor';
     slidesPerView?: {
         sm: number;
         md: number;
         lg: number;
+        xl: number;
     };
     spaceBetween?: number;
     hasPagination?: boolean;
     hasNavigation?: boolean;
+    loop?: boolean;
     pagination?: {
         clickable: boolean;
     };
@@ -16,6 +18,6 @@ export type Attributes = {
         positionY: 'bottom' | 'top';
     };
 };
-export interface CarouselProps extends Attributes, WordpressDefault {
+export interface CarouselProps extends CarouselAttributes, WordpressDefault {
     children: React.ReactNode | React.ReactNode[];
 }

package/dist/organisms/Tabs/Tabs.js

@@ -1,14 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReactAdapter } from "../../hooks/useReactAdaptater";
 export const Tabs = ({ tabs, children, extraClassNames, edit }) => {
-    const { useEffect, useState, useRef, Children, Fragment } = useReactAdapter();
-    console.log(edit);
+    const { useState, useRef, Children } = useReactAdapter();
     const [activeTab, setActiveTab] = useState(tabs[0]?.id || "");
     const tabsRef = useRef([]);
-    useEffect(() => {
-        const activeIndex = tabs.findIndex((tab) => tab.id === activeTab);
-        tabsRef.current[activeIndex]?.focus();
-    }, [activeTab, tabs]);
     const classes = ["ga-ds-tabs"];
     if (extraClassNames) {
         classes.push(...extraClassNames);

package/dist/organisms/organisms.d.ts

@@ -1,6 +1,7 @@
 export * from './Card/Card';
 export * from './Card/Card.types';
 export * from './Carousel/Carousel';
+export * from './Carousel/Carousel.types';
 export * from './SpoilerList/SpoilerList';
 export * from './Tabs/Tabs';
 export * from './Tabs/Tabs.types';

package/dist/organisms/organisms.js

@@ -1,6 +1,7 @@
 export * from './Card/Card';
 export * from './Card/Card.types';
 export * from './Carousel/Carousel';
+export * from './Carousel/Carousel.types';
 export * from './SpoilerList/SpoilerList';
 export * from './Tabs/Tabs';
 export * from './Tabs/Tabs.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.3.5",
+  "version": "1.5.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,
@@ -17,7 +17,8 @@
       "types": "./dist/index.d.ts"
     },
     "./styles": "./src/styles.ts",
-    "./styles/scss": "./src/index.scss"
+    "./styles/scss": "./src/index.scss",
+    "./mixins": "./src/mixins.scss"
   },
   "files": [
     "dist",

package/src/atoms/Button/Button-mixins.scss

@@ -0,0 +1,29 @@
+@mixin button {
+  padding: var(--ga-button-padding);
+  border: none;
+  font-size: var(--ga-font-sizes-base);
+  font-weight: var(--ga-font-weight-base);
+  font-family: var(--ga-font-family-button);
+  border-radius: var(--ga-button-radius, 0);
+  cursor: pointer;
+}
+
+@mixin button--primary {
+  background-color: var(--ga-button-background-primary, #eee);
+  color: var(--ga-button-color-primary, #000);
+}
+
+@mixin button--secondary {
+  background-color: var(--ga-button-background-secondary, #424242);
+  color: var(--ga-button-color-secondary, #fff);
+}
+
+@mixin button--link {
+  color: var(--ga-button-color-link, purple);
+}
+
+@mixin button--icon {
+  --ga-button-padding: 0.8rem 1.2rem;
+  justify-content: center;
+  align-items: center;
+}

package/src/atoms/Button/Button.scss

@@ -1,35 +1,21 @@
-.ga-ds-button > .wp-block-button__link.wp-element-button,
-button.ga-ds-button {
-  padding: var(--ga-button-padding);
-  border: none;
-  font-size: var(--ga-font-sizes-base);
-  font-weight: var(--ga-font-weight-base);
-  font-family: var(--ga-font-family-button);
-  border-radius: var(--ga-button-radius, 0);
-  cursor: pointer;
+@use "./Button-mixins.scss" as *;
+
+.ga-ds-button {
+  @include button;
 }
 
-.ga-ds-button--primary > .wp-block-button__link.wp-element-button,
-button.ga-ds-button--primary {
-  background-color: var(--ga-button-background-primary, #eee);
-  color: var(--ga-button-color-primary, #000);
+.ga-ds-button--primary {
+  @include button--primary;
 }
 
-.ga-ds-button--secondary > .wp-block-button__link.wp-element-button,
-button.ga-ds-button--secondary {
-  background-color: var(--ga-button-background-secondary, #424242);
-  color: var(--ga-button-color-secondary, #fff);
+.ga-ds-button--secondary {
+  @include button--secondary;
 }
 
-.ga-ds-button--link > .wp-block-button__link.wp-element-button,
-button.ga-ds-button--link {
-  color: var(--ga-button-color-link, purple);
-  padding: 0;
+.ga-ds-button--link {
+  @include button--link;
 }
 
-.ga-ds-button--icon > .wp-block-button__link.wp-element-button,
-button.ga-ds-button--icon {
-  --ga-button-padding: 0.8rem 1.2rem;
-  justify-content: center;
-  align-items: center;
+.ga-ds-button--icon {
+  @include button--icon;
 }

package/src/atoms/atoms-mixins.scss

@@ -0,0 +1 @@
+@forward "./Button/Button-mixins.scss";

package/src/hooks/useBreakPointObserver.ts

@@ -1,17 +1,19 @@
 import { useReactAdapter } from './useReactAdaptater'
 
-export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 1280 }) {
+export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 1280, xl: 1400 }) {
   const { useEffect, useState } = useReactAdapter()
-  const [current, setCurrent] = useState<'sm' | 'md' | 'lg'>('sm')
+  const [current, setCurrent] = useState<'sm' | 'md' | 'lg' | 'xl'>('sm')
   useEffect(() => {
     let frameId: number
 
     const check = () => {
       const width = window.innerWidth
-      let bp: 'sm' | 'md' | 'lg' = 'sm'
+      let bp: 'sm' | 'md' | 'lg' | 'xl' = 'sm'
 
-      if (width >= breakpoints.md) bp = 'lg'
-      else if (width >= breakpoints.sm) bp = 'md'
+      if (width >= breakpoints.xl) bp = 'xl'
+      else if (width >= breakpoints.lg) bp = 'lg'
+      else if (width >= breakpoints.md) bp = 'md'
+      else if (width >= breakpoints.sm) bp = 'sm'
 
       setCurrent((prev) => (prev !== bp ? bp : prev))
       frameId = requestAnimationFrame(check)

package/src/mixins.scss

@@ -0,0 +1 @@
+@forward "./atoms/atoms-mixins.scss";

package/src/organisms/Carousel/Carousel.stories.tsx

@@ -21,7 +21,7 @@ export const Primary: Story = {
       <div>Slide 6</div>,
       <div>Slide 7</div>,
     ],
-    slidesPerView: { sm: 1, md: 2, lg: 3 },
+    slidesPerView: { sm: 1, md: 2, lg: 3, xl: 4 },
     spaceBetween: 16,
     pagination: {
       clickable: true,
@@ -33,3 +33,20 @@ export const Primary: Story = {
     hasPagination: true,
   },
 }
+
+export const LoopingCarousel: Story = {
+  args: {
+    children: [<div>Slide A</div>, <div>Slide B</div>, <div>Slide C</div>, <div>Slide D</div>],
+    slidesPerView: { sm: 1, md: 1, lg: 1, xl: 1 },
+    spaceBetween: 24,
+    loop: true,
+    pagination: {
+      clickable: true,
+    },
+    navigation: {
+      positionY: "top",
+    },
+    hasNavigation: true,
+    hasPagination: true,
+  },
+}

package/src/organisms/Carousel/Carousel.tsx

@@ -6,16 +6,18 @@ import { CarouselProps } from "./Carousel.types"
 export const Carousel = (props: CarouselProps) => {
   const {
     children,
-    slidesPerView = { sm: 1, md: 2, lg: 3 },
+    slidesPerView = { sm: 1, md: 2, lg: 3, xl: 4 },
     spaceBetween = 20,
     navigation,
     pagination,
     context,
     hasPagination,
     hasNavigation,
+    loop = false,
   } = props
   const { useEffect, useState, useRef, Children } = useReactAdapter()
   const trackRef = useRef<HTMLDivElement>(null)
+  const isNavigatingRef = useRef(false)
   const slides = Children.toArray(children)
 
   const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
@@ -23,54 +25,133 @@ export const Carousel = (props: CarouselProps) => {
   }
 
   const [activeSlideIndex, setActiveSlideIndex] = useState(0)
+  const [activeDOMIndex, setActiveDOMIndex] = useState(0)
   const [isAtEnd, setIsAtEnd] = useState(false)
   const [isAtStart, setIsAtStart] = useState(true)
   const [totalPages, setTotalPages] = useState(0)
 
   useEffect(() => {
-    setIsAtStart(activeSlideIndex === 0)
-    setIsAtEnd(activeSlideIndex === totalPages - 1)
-  }, [activeSlideIndex, totalPages])
+    if (loop) {
+      setIsAtStart(false)
+      setIsAtEnd(false)
+    } else {
+      setIsAtStart(activeSlideIndex === 0)
+      setIsAtEnd(activeSlideIndex === totalPages - 1)
+    }
+  }, [activeSlideIndex, totalPages, loop])
 
-  const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200 })
+  const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200, xl: 1400 })
 
   useEffect(() => {
     setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1))
   }, [breakpoint, slidesPerView])
 
+  useEffect(() => {
+    const track = trackRef.current
+    if (!track) return
+
+    const handleScroll = () => {
+      if (loop) {
+        const slideWidth = track.scrollWidth / (slides.length * 3)
+        const scrollLeft = track.scrollLeft
+
+        // Repositionnement infini (uniquement si pas en navigation)
+        if (!isNavigatingRef.current) {
+          if (scrollLeft <= slideWidth * slides.length) {
+            track.scrollLeft = scrollLeft + slideWidth * slides.length
+          } else if (scrollLeft >= slideWidth * slides.length * 2) {
+            track.scrollLeft = scrollLeft - slideWidth * slides.length
+          }
+        }
+
+        const scrollPosition = track.scrollLeft + slideWidth / 2
+        const domIndex = Math.floor(scrollPosition / slideWidth)
+        const index = domIndex % slides.length
+        setActiveDOMIndex(domIndex)
+        setActiveSlideIndex(index)
+      } else {
+        const slideWidth = track.scrollWidth / slides.length
+        const scrollPosition = track.scrollLeft + slideWidth / 2
+        const index = Math.floor(scrollPosition / slideWidth)
+        setActiveSlideIndex(Math.min(index, slides.length - 1))
+        setActiveDOMIndex(index)
+      }
+    }
+
+    track.addEventListener("scroll", handleScroll)
+
+    // Position initiale au milieu en mode loop
+    if (loop) {
+      setTimeout(() => {
+        const slideWidth = track.scrollWidth / (slides.length * 3)
+        track.scrollLeft = slideWidth * slides.length
+      }, 0)
+    }
+
+    return () => track.removeEventListener("scroll", handleScroll)
+  }, [slides.length, loop])
+
   const style = Object.fromEntries(
     Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`])
   )
 
   const goPrev = () => {
     if (!trackRef.current) return
-    const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
-    if (activeSlideIndex === 0) return
+    const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
+    if (activeSlideIndex === 0 && !loop) return
 
-    const nextIndex = activeSlideIndex - 1
-    slides[nextIndex]?.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "start",
-    })
-    setActiveSlideIndex(nextIndex)
+    isNavigatingRef.current = true
+
+    if (loop) {
+      // En mode loop, on utilise l'index DOM actuel
+      allSlides[activeDOMIndex - 1]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      })
+    } else {
+      const nextIndex = activeSlideIndex - 1
+      allSlides[nextIndex]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      })
+    }
+
+    setTimeout(() => {
+      isNavigatingRef.current = false
+    }, 600)
   }
 
   const goNext = () => {
     if (!trackRef.current) return
-    const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
-    const totalSlides = slides.length
+    const allSlides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide")
 
-    if (activeSlideIndex >= totalSlides - 1) return
-    if (isAtEnd) return
+    isNavigatingRef.current = true
 
-    const nextIndex = activeSlideIndex + 1
-    slides[nextIndex]?.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "start",
-    })
-    setActiveSlideIndex(nextIndex)
+    if (loop) {
+      // En mode loop, on utilise l'index DOM actuel
+      allSlides[activeDOMIndex + 1]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      })
+    } else {
+      const totalSlides = allSlides.length
+      if (activeSlideIndex >= totalSlides - 1) return
+      if (isAtEnd) return
+
+      const nextIndex = activeSlideIndex + 1
+      allSlides[nextIndex]?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "start",
+      })
+    }
+
+    setTimeout(() => {
+      isNavigatingRef.current = false
+    }, 600)
   }
 
   const goTo = (nextIndex: number) => {
@@ -81,13 +162,16 @@ export const Carousel = (props: CarouselProps) => {
       block: "nearest",
       inline: "start",
     })
-    setActiveSlideIndex(nextIndex)
   }
 
   const classes = ["ga-ds-carousel"]
 
   if (props.extraClassNames) {
-    classes.push(...props.extraClassNames)
+    if (typeof props.extraClassNames === "string") {
+      classes.push(props.extraClassNames)
+    } else {
+      classes.push(...props.extraClassNames)
+    }
   }
 
   return (
@@ -106,14 +190,16 @@ export const Carousel = (props: CarouselProps) => {
       >
         {context === "wp-editor"
           ? children
-          : slides.map((child, index) => (
-              <div
-                key={index}
-                className={`ga-ds-carousel__slide ${index === activeSlideIndex ? "ga-ds-carousel__slide--active" : ""}`}
-              >
-                {child}
-              </div>
-            ))}
+          : slides.map((child, index) => {
+              return (
+                <div
+                  key={index}
+                  className={`ga-ds-carousel__slide ${index === activeDOMIndex ? "ga-ds-carousel__slide--active" : ""}`}
+                >
+                  {child}
+                </div>
+              )
+            })}
       </div>
 
       <div className="ga-ds-carousel__navigation">

package/src/organisms/Carousel/Carousel.types.ts

@@ -1,15 +1,17 @@
 import { WordpressDefault } from "../../global.types"
 
-export type Attributes = {
+export type CarouselAttributes = {
   context?: 'wp-editor'
   slidesPerView?: {
     sm: number
     md: number
     lg: number
+    xl: number
   }
   spaceBetween?: number
   hasPagination?: boolean
   hasNavigation?: boolean
+  loop?: boolean
   pagination?: {
     clickable: boolean
   },
@@ -17,6 +19,6 @@ export type Attributes = {
     positionY: 'bottom' | 'top';
   }
 }
-export interface CarouselProps extends Attributes, WordpressDefault {
+export interface CarouselProps extends CarouselAttributes, WordpressDefault {
   children: React.ReactNode | React.ReactNode[]
 }

package/src/organisms/Tabs/Tabs.tsx

@@ -1,16 +1,11 @@
 import { useReactAdapter } from "../../hooks/useReactAdaptater"
 import { TabsProps } from "./Tabs.types"
 export const Tabs = ({ tabs, children, extraClassNames, edit }: TabsProps) => {
-  const { useEffect, useState, useRef, Children, Fragment } = useReactAdapter()
-  console.log(edit)
+  const { useState, useRef, Children } = useReactAdapter()
+
   const [activeTab, setActiveTab] = useState(tabs[0]?.id || "")
   const tabsRef = useRef<Array<HTMLButtonElement | null>>([])
 
-  useEffect(() => {
-    const activeIndex = tabs.findIndex((tab) => tab.id === activeTab)
-    tabsRef.current[activeIndex]?.focus()
-  }, [activeTab, tabs])
-
   const classes = ["ga-ds-tabs"]
   if (extraClassNames) {
     classes.push(...extraClassNames)

package/src/organisms/organisms.ts

@@ -1,6 +1,7 @@
 export * from './Card/Card'
 export * from './Card/Card.types'
 export * from './Carousel/Carousel'
+export * from './Carousel/Carousel.types'
 export * from './SpoilerList/SpoilerList'
 export * from './Tabs/Tabs'
 export * from './Tabs/Tabs.types'