@udixio/ui-react 2.5.2 → 2.6.0

package/dist/lib/components/Carousel.d.ts

@@ -6,8 +6,6 @@ import { ReactProps } from '../utils';
  * @status beta
  * @category Layout
  * @limitations
- * - At the end of the scroll, a residual gap/space may remain visible.
- * - In/out behavior is inconsistent at range edges.
  * - Responsive behavior on mobile is not supported.
  * - Only the default (hero) variant is supported.
  */

package/dist/lib/components/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAyB,MAAM,eAAe,CAAC;AAIzE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,GAAI,qKActB,UAAU,CAAC,iBAAiB,CAAC,4CAooB/B,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAyB,MAAM,eAAe,CAAC;AAIzE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAOtC;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,GAAI,qKActB,UAAU,CAAC,iBAAiB,CAAC,4CA2f/B,CAAC"}

package/dist/lib/effects/AnimateOnScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimateOnScroll.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/AnimateOnScroll.ts"],"names":[],"mappings":"AAoNA,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,sBAA2B,GACnC,MAAM,IAAI,CAsIZ;AAGD,eAAO,MAAM,mBAAmB,4BAAsB,CAAC;AACvD,eAAO,MAAM,eAAe,4BAAsB,CAAC"}
+{"version":3,"file":"AnimateOnScroll.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/AnimateOnScroll.ts"],"names":[],"mappings":"AA2NA,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,sBAA2B,GACnC,MAAM,IAAI,CAgKZ;AAGD,eAAO,MAAM,mBAAmB,4BAAsB,CAAC;AACvD,eAAO,MAAM,eAAe,4BAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -36,8 +36,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/tailwind": "2.3.7",
-    "@udixio/theme": "2.1.2"
+    "@udixio/theme": "2.1.2",
+    "@udixio/tailwind": "2.3.7"
   },
   "repository": {
     "type": "git",

package/src/lib/components/Carousel.tsx

@@ -7,14 +7,16 @@ import { CustomScroll } from '../effects';
 import { ReactProps } from '../utils';
 import { CarouselItem, normalize } from './CarouselItem';
 
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v));
+}
+
 /**
  * Carousels show a collection of items that can be scrolled on and off the screen
  *
  * @status beta
  * @category Layout
  * @limitations
- * - At the end of the scroll, a residual gap/space may remain visible.
- * - In/out behavior is inconsistent at range edges.
  * - Responsive behavior on mobile is not supported.
  * - Only the default (hero) variant is supported.
  */
@@ -49,6 +51,7 @@ export const Carousel = ({
     onChange,
     gap,
     scrollSensitivity,
+    onMetricsChange,
   });
 
   const items = React.Children.toArray(children).filter(
@@ -79,7 +82,6 @@ export const Carousel = ({
 
     const scrollVisible =
       scroll?.scrollVisible ?? (ref.current as any)?.clientWidth ?? 0;
-    // const scrollProgress = scrollMV.get();
 
     function assignRelativeIndexes(
       values: number[],
@@ -90,13 +92,16 @@ export const Carousel = ({
       index: number;
       width: number;
     }[] {
-      return values.map((value, index) => ({
-        itemScrollXCenter: value,
-        relativeIndex:
-          (value - progressScroll) / Math.abs(values[1] - values[0]),
-        index: index,
-        width: 0,
-      }));
+      return values.map((value, index) => {
+        const relativeIndex =
+          (value - progressScroll) / Math.abs(values[1] - values[0]);
+        return {
+          itemScrollXCenter: value,
+          relativeIndex,
+          index: index,
+          width: 0,
+        };
+      });
     }
 
     const itemsScrollXCenter = items.map((_, index) => {
@@ -113,206 +118,85 @@ export const Carousel = ({
       itemsScrollXCenter,
       scroll?.scrollProgress ?? 0,
     ).sort((a, b) => a.index - b.index);
-    // const visible =
-    //   ((ref.current?.clientWidth ?? scrollVisible) - (outputRange[0] + gap)) /
-    //   (outputRange[1] + gap);
-
-    const visible =
-      ((ref.current?.clientWidth ?? scrollVisible) + gap) /
-      (outputRange[1] + gap);
 
-    let widthContent = visible;
-
-    let selectedItem;
+    let widthLeft =
+      (ref.current?.clientWidth ?? scrollVisible) + gap + outputRange[0] + gap;
 
     const visibleItemValues = itemValues
       .sort((a, b) => Math.abs(a.relativeIndex) - Math.abs(b.relativeIndex))
       .map((item, index) => {
-        if (!item) return;
-
-        if (index === 0) {
+        if (widthLeft <= 0) {
+          return undefined;
+        }
+        if (index == 0) {
           setSelectedItem(item.index);
-          selectedItem = item;
         }
 
-        const el = itemRefs[item.index]?.current;
-        if (!ref.current || !el) return;
+        item.width = normalize(
+          widthLeft - gap,
+          [outputRange[0], outputRange[1]],
+          [outputRange[0], outputRange[1]],
+        );
+
+        widthLeft -= item.width + gap;
 
-        if (widthContent <= 0) {
-          return undefined;
-        } else {
-          item.width = outputRange[1];
-        }
+        if (widthLeft != 0 && widthLeft < (outputRange[0] + gap) * 2) {
+          const newWidth =
+            item.width - ((outputRange[0] + gap) * 2 - widthLeft);
+
+          widthLeft += item.width;
+          item.width = newWidth;
+          widthLeft -= item.width;
+        } else if (widthLeft == 0 && item.width >= outputRange[0] * 2 + gap) {
+          const newWidth = item.width - (outputRange[0] + gap - widthLeft);
 
-        --widthContent;
+          widthLeft += item.width;
+          item.width = newWidth;
+          widthLeft -= item.width;
+        }
         return item;
       })
-      .filter(Boolean)
-      .sort((a, b) => a.index - b.index) as {
+      .filter(Boolean) as unknown as {
       itemScrollXCenter: number;
       relativeIndex: number;
       index: number;
       width: number;
     }[];
 
-    let widthLeft = (ref.current?.clientWidth ?? scrollVisible) - gap;
-
-    const dynamicItems = visibleItemValues.filter((item, index, array) => {
-      let isDynamic = false;
-      if (item.width == outputRange[1]) {
-        if (index === 0 || index === array.length - 1) {
-          isDynamic = true;
-        }
-      }
-      if (isDynamic) {
-        return true;
-      } else {
-        widthLeft -= item.width + gap;
-        return false;
-      }
-    });
+    const reverseItemsVisible = visibleItemValues.reverse();
+    const itemsVisibleByIndex = [...visibleItemValues].sort(
+      (a, b) => Math.abs(a.index) - Math.abs(b.index),
+    );
 
-    // console.log(dynamicItems, visibleItemValues, visible);
+    //dynamic items
 
-    let dynamicWidth = 0;
+    reverseItemsVisible.forEach((item, index) => {
+      const nextItem = reverseItemsVisible[index + 1];
+      if (!nextItem) return;
 
-    dynamicItems.forEach((item) => {
-      if (!item) return;
+      const test =
+        1 - (Math.abs(item.relativeIndex) - Math.abs(nextItem?.relativeIndex));
 
-      const result = normalize(
-        1 - Math.abs(scroll.scrollProgress - item.itemScrollXCenter),
-        [0, 1],
-        [0, 1],
+      const newWidth = normalize(
+        test,
+        [0, 2],
+        [item.width + widthLeft, nextItem.width],
       );
-      item.width = result;
-      dynamicWidth += result;
-    });
-
-    // let widthLeft =
-    //   (visible -
-    //     visibleItemValues
-    //       .slice(0, visibleItemValues.length - 2)
-    //       .filter((item) => item.width === outputRange[1]).length) *
-    //   outputRange[1];
-
-    // console.log(
-    //   visible,
-    //   widthLeft,
-    //   visibleItemValues
-    //     .slice(0, visibleItemValues.length - 2)
-    //     .filter((item) => item.width === outputRange[1]).length,
-    // );
-
-    let translate = 0;
-    dynamicItems.forEach((item, index) => {
-      if (!item) return;
-
-      if (index == 0) {
-        const percent = normalize(
-          item?.relativeIndex,
-          [-2, item.index == 0 ? 0 : -1],
-          [0, 1],
-        );
-
-        if (item.index >= 1) {
-          itemValues.sort((a, b) => a.index - b.index);
 
-          itemValues[item.index - 1].width = outputRange[0];
-          visibleItemValues.unshift(itemValues[item.index - 1]);
-          widthLeft -= outputRange[0] + gap;
-
-          translate = normalize(
-            1 - percent,
-            [0, 1],
-            [0, -(outputRange[0] + gap)],
-          );
-        }
-        widthLeft -= translate;
-
-        // let relative = selectedItem?.relativeIndex * 2;
-        // relative = relative > 0 ? (1 - relative) * -1 : 1 + relative;
-
-        item.width = normalize(
-          percent,
-          [0, 1],
-          [outputRange[0], outputRange[1]],
-        );
-
-        widthLeft -= item.width;
-
-        // console.log(widthLeft);
-      } else {
-        let dynamicIndex = item.index;
-        // console.log('n', dynamicIndex, widthLeft);
-        let isEnd = dynamicIndex == itemValues.length - 1;
-        const isNearEnd = dynamicIndex == itemValues.length - 2;
-        // console.log('start');
-        while (widthLeft > 0) {
-          // console.log('boucle', widthLeft);
-          const dynamicItem = itemValues.filter(
-            (item) => item.index === dynamicIndex,
-          )[0];
-
-          if (!dynamicItem) {
-            if (isEnd) {
-              throw new Error('dynamicItem not found');
-            }
-            // dynamicIndex = dynamicItems[0].index;
-            isEnd = true;
-            break;
-          }
-
-          if (!visibleItemValues.includes(dynamicItem)) {
-            visibleItemValues.push(dynamicItem);
-          }
-
-          dynamicItem.width = normalize(
-            widthLeft,
-            [outputRange[0], outputRange[1] + (gap + outputRange[0]) * 2],
-            [outputRange[0], outputRange[1]],
-          );
-
-          widthLeft -= dynamicItem.width + gap;
-
-          if (
-            (isNearEnd || isEnd) &&
-            dynamicItem.index == itemValues.length - 1
-          ) {
-            let dynamicItemIndexStart = isEnd ? 1 : 1;
-
-            while (widthLeft > 0) {
-              const dynamicItemStart = visibleItemValues[dynamicItemIndexStart];
-
-              const width =
-                normalize(
-                  dynamicItemStart.width + widthLeft,
-                  [outputRange[0], outputRange[1]],
-                  [outputRange[0], outputRange[1]],
-                ) - dynamicItemStart.width;
-
-              dynamicItemStart.width += width;
-              widthLeft -= width;
-
-              dynamicItemIndexStart--;
-              // break;
-            }
-
-            break;
-          } else {
-            dynamicIndex++;
-          }
-          // }
-        }
-      }
+      widthLeft += item.width;
+      item.width = newWidth;
+      widthLeft -= item.width;
+    });
 
-      // console.log(item, dynamicWidth, visible, selectedItem);
+    const percentMax = visibleItemValues.length / 2;
+    const percent = normalize(
+      Math.abs(itemsVisibleByIndex[0].relativeIndex),
+      [itemsVisibleByIndex[0].index == 0 ? 0 : percentMax - 1, percentMax],
+      [0, 1],
+    );
 
-      // item.width = normalize(
-      //   item.width / dynamicWidth,
-      //   [0, 1],
-      //   [0, visible * outputRange[1]],
-      // );
-    });
+    const translate =
+      normalize(percent, [0, 1], [0, 1]) * -(outputRange[0] + gap);
 
     setTranslateX(translate);
 
@@ -414,25 +298,6 @@ export const Carousel = ({
     );
   });
 
-  // persistent motion value for scroll progress, driven by user scroll and programmatic centering
-  // const scrollMVRef = useRef(motionValue(0));
-  // const scrollMV = scrollMVRef.current;
-
-  // const transform = useTransform(
-  //   scrollMV,
-  //   [0, 1],
-  //   [
-  //     0,
-  //     1 -
-  //       (ref.current?.clientWidth ?? 0) / (trackRef?.current?.clientWidth ?? 0),
-  //   ],
-  // );
-
-  // const percentTransform = useTransform(
-  //   transform,
-  //   (value) => `${-value * 100}%`,
-  // );
-
   const handleScroll = (args: {
     scrollProgress: number;
     scrollTotal: number;

package/src/lib/effects/AnimateOnScroll.ts

@@ -152,10 +152,11 @@ function queryJsObserverCandidates(
 }
 
 // Utility: identify presence of in/out classes
-function hasInOutClass(cls: DOMTokenList, prefix: string): boolean {
-  return cls.contains(`${prefix}-in`) || cls.contains(`${prefix}-out`);
+function hasOutClass(cls: DOMTokenList, prefix: string): boolean {
+  return Array.from(cls).some(
+    (className) => className.startsWith(prefix) && className.includes('-out'),
+  );
 }
-
 // Utility: set run flags for a given direction ("in" or "out"), always ensuring generic run flag exists
 function setRunFlag(el: HTMLElement, prefix: string, dir: 'in' | 'out'): void {
   el.setAttribute(`data-${prefix}-run`, ``);
@@ -163,12 +164,20 @@ function setRunFlag(el: HTMLElement, prefix: string, dir: 'in' | 'out'): void {
 }
 
 // Utility: reset run flags and restart animation timeline without changing computed styles
-function resetRunFlags(el: HTMLElement, prefix: string): void {
+function resetRunFlags(
+  el: HTMLElement,
+  prefix: string,
+  direction?: 'in' | 'out',
+): void {
   const currentAnimationName = el.style.animationName;
   el.style.animationName = 'none';
   el.removeAttribute(`data-${prefix}-run`);
-  el.removeAttribute(`data-${prefix}-in-run`);
-  el.removeAttribute(`data-${prefix}-out-run`);
+  if (!direction) {
+    el.removeAttribute(`data-${prefix}-in-run`);
+    el.removeAttribute(`data-${prefix}-out-run`);
+  } else {
+    el.removeAttribute(`data-${prefix}-${direction}-run`);
+  }
   void (el as HTMLElement).offsetWidth; // reflow to restart animations
   el.style.animationName = currentAnimationName;
 }
@@ -198,11 +207,9 @@ function addAnimationLifecycle(el: HTMLElement, prefix: string): void {
 
   const onEndOrCancel = (e: AnimationEvent) => {
     if (e.target !== el) return;
+    // If an IN animation just finished, persist a completion flag so it won't replay on upward scroll
+
     el.removeAttribute(`data-${prefix}-animating`);
-    // Clear directional run flags so a new trigger can happen after completion
-    el.removeAttribute(`data-${prefix}-in-run`);
-    el.removeAttribute(`data-${prefix}-out-run`);
-    // Note: keep generic data-{prefix}-run for style stability
   };
 
   el.addEventListener('animationstart', onStart as EventListener);
@@ -229,6 +236,21 @@ export function initAnimateOnScroll(
   // Setup JS observers for non-scroll-driven animations
   const observed = new WeakSet<Element>();
 
+  // Track scroll direction to prevent triggering IN when scrolling up
+  let lastScrollY =
+    typeof window !== 'undefined'
+      ? window.pageYOffset || window.scrollY || 0
+      : 0;
+  let scrollingDown = true; // default allow initial IN
+  const onScrollDir = () => {
+    const y = window.pageYOffset || window.scrollY || 0;
+    scrollingDown = y >= lastScrollY;
+    lastScrollY = y;
+  };
+  if (typeof window !== 'undefined') {
+    window.addEventListener('scroll', onScrollDir, { passive: true });
+  }
+
   const io = new IntersectionObserver(
     (entries) => {
       for (const entry of entries) {
@@ -239,17 +261,25 @@ export function initAnimateOnScroll(
         // If an animation is in progress, avoid re-triggering or flipping direction
         if (el.hasAttribute(`data-${prefix}-animating`)) continue;
 
-        const isOut = el.classList.contains(`${prefix}-out`);
+        const isOut = hasOutClass(el.classList, prefix);
 
-        if (!isOut && entry.isIntersecting) {
+        if (entry.isIntersecting) {
+          if (isOut) {
+            resetRunFlags(el, prefix, 'out');
+          }
           setRunFlag(el, prefix, 'in');
+
           if (once) io.unobserve(el);
-        } else if (isOut && !entry.isIntersecting) {
-          setRunFlag(el, prefix, 'out');
-          if (once) io.unobserve(el);
-        } else if (!once) {
-          // Only reset flags if not currently animating (already checked), to prevent rapid restarts
-          resetRunFlags(el, prefix);
+        } else {
+          if (!once) {
+            if (!scrollingDown) {
+              resetRunFlags(el, prefix, 'in');
+            }
+
+            if (isOut) {
+              setRunFlag(el, prefix, 'out');
+            }
+          }
         }
       }
     },
@@ -349,6 +379,9 @@ export function initAnimateOnScroll(
   // Public cleanup
   return () => {
     if (cleanupScrollDriven) cleanupScrollDriven();
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('scroll', onScrollDir as EventListener);
+    }
     io.disconnect();
   };
 }