@udixio/ui-react 1.6.4 → 2.0.0

package/src/lib/effects/custom-scroll/custom-scroll.effect.tsx

@@ -90,21 +90,32 @@ export const CustomScroll = ({
     handleScrollThrottledRef.current = throttle(
       throttleDuration,
       (latestValue, scrollOrientation: 'x' | 'y') => {
-        if (!containerSize.current || !contentScrollSize.current) return;
+        if (
+          !containerSize.current ||
+          !contentScrollSize.current ||
+          !ref.current
+        )
+          return;
         if (onScroll) {
           if (orientation === 'horizontal' && scrollOrientation === 'x') {
             onScroll({
               scrollProgress: latestValue,
-              scroll: latestValue * contentScrollSize.current.width,
-              scrollTotal: contentScrollSize.current.width,
+              scroll:
+                latestValue *
+                (contentScrollSize.current.width - ref.current.clientWidth),
+              scrollTotal:
+                contentScrollSize.current.width - ref.current.clientWidth,
               scrollVisible: containerSize.current.width,
             });
           }
           if (orientation === 'vertical' && scrollOrientation === 'y') {
             onScroll({
               scrollProgress: latestValue,
-              scroll: latestValue * contentScrollSize.current.height,
-              scrollTotal: contentScrollSize.current.height,
+              scroll:
+                latestValue *
+                (contentScrollSize.current.height - ref.current.clientHeight),
+              scrollTotal:
+                contentScrollSize.current.height - ref.current.clientHeight,
               scrollVisible: containerSize.current.height,
             });
           }

package/src/lib/effects/index.ts

@@ -3,3 +3,4 @@ export * from './custom-scroll';
 export * from './smooth-scroll.effect';
 export * from './SyncedFixedWrapper';
 export * from './ThemeProvider';
+export * from './AnimateOnScroll';

package/src/lib/effects/scrollDriven.ts

@@ -0,0 +1,239 @@
+import { CSSProperties } from 'react';
+
+export type InitAnimationOptions = {
+  once?: boolean;
+};
+
+let initialized = false;
+let teardown: (() => void) | null = null;
+
+function supportsScrollTimeline(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    // @ts-ignore
+    if (window.CSS && typeof window.CSS.supports === 'function') {
+      // @ts-ignore
+      return (
+        CSS.supports('animation-timeline: view()') ||
+        CSS.supports('animation-timeline: scroll()') ||
+        CSS.supports('view-timeline-name: --a')
+      );
+    }
+  } catch {}
+  return false;
+}
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined' || !('matchMedia' in window)) return false;
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+// Helpers to read CSS custom properties used by the Tailwind plugin
+function readVar(el: Element, name: string): string | null {
+  const v = getComputedStyle(el).getPropertyValue(name).trim();
+  return v || null;
+}
+
+function parsePercentFromRangeToken(token?: string | null): number | null {
+  if (!token) return null;
+  // Expect patterns like "entry 20%", "cover 80%", "center 60%" etc.
+  const parts = token.split(/\s+/);
+  const last = parts[parts.length - 1];
+  if (!last) return null;
+  if (last.endsWith('%')) {
+    const n = parseFloat(last);
+    if (!isNaN(n)) return Math.max(0, Math.min(100, n)) / 100;
+  }
+  // px not supported for now (would require element size); fallback null
+  return null;
+}
+
+function getRange(el: Element): { start: number; end: number } {
+  const startToken = readVar(el, '--udx-range-start');
+  const endToken = readVar(el, '--udx-range-end');
+  const start = parsePercentFromRangeToken(startToken) ?? 0.2; // default entry 20%
+  const end = parsePercentFromRangeToken(endToken) ?? 0.5; // default cover 50%
+  // Ensure sane ordering
+  const s = Math.max(0, Math.min(1, start));
+  const e = Math.max(s + 0.001, Math.min(1, end));
+  return { start: s, end: e };
+}
+
+function num(val: string | null | undefined, unit?: 'px' | 'deg'): number | null {
+  if (!val) return null;
+  const v = val.trim();
+  if (unit && v.endsWith(unit)) {
+    const n = parseFloat(v);
+    return isNaN(n) ? null : n;
+  }
+  // Try plain number
+  const n = parseFloat(v);
+  return isNaN(n) ? null : n;
+}
+
+function lerp(a: number, b: number, t: number) {
+  return a + (b - a) * t;
+}
+
+function applyProgress(el: HTMLElement, from: CSSProperties, to: CSSProperties, p: number) {
+  // Opacity
+  const o0 = from.opacity != null ? Number(from.opacity) : 1;
+  const o1 = to.opacity != null ? Number(to.opacity) : 1;
+  const op = lerp(o0, o1, p);
+  el.style.opacity = String(op);
+
+  // Transform: translateX/Y (px only), scale, rotate (deg)
+  const fx = num((from as any)['--tw-enter-translate-x'] as any) ??
+             num((from as any)['--tw-exit-translate-x'] as any) ?? 0;
+  const fy = num((from as any)['--tw-enter-translate-y'] as any) ??
+             num((from as any)['--tw-exit-translate-y'] as any) ?? 0;
+  const tx = num((to as any)['--tw-enter-translate-x'] as any) ??
+             num((to as any)['--tw-exit-translate-x'] as any) ?? 0;
+  const ty = num((to as any)['--tw-enter-translate-y'] as any) ??
+             num((to as any)['--tw-exit-translate-y'] as any) ?? 0;
+
+  const fs = num((from as any)['--tw-enter-scale'] as any) ??
+             num((from as any)['--tw-exit-scale'] as any) ?? 1;
+  const ts = num((to as any)['--tw-enter-scale'] as any) ??
+             num((to as any)['--tw-exit-scale'] as any) ?? 1;
+
+  const fr = num((from as any)['--tw-enter-rotate'] as any) ??
+             num((from as any)['--tw-exit-rotate'] as any) ?? 0;
+  const tr = num((to as any)['--tw-enter-rotate'] as any) ??
+             num((to as any)['--tw-exit-rotate'] as any) ?? 0;
+
+  const x = lerp(fx, tx, p);
+  const y = lerp(fy, ty, p);
+  const s = lerp(fs, ts, p);
+  const r = lerp(fr, tr, p);
+
+  const transforms: string[] = [];
+  if (x !== 0 || y !== 0) transforms.push(`translate3d(${x}px, ${y}px, 0)`);
+  if (s !== 1) transforms.push(`scale(${s})`);
+  if (r !== 0) transforms.push(`rotate(${r}deg)`);
+  el.style.transform = transforms.length ? transforms.join(' ') : 'none';
+}
+
+function buildFromTo(el: Element): { from: CSSProperties; to: CSSProperties } | null {
+  const cls = el.classList;
+  const isIn = cls.contains('animate-in');
+  const isOut = cls.contains('animate-out');
+  if (!isIn && !isOut) return null;
+
+  const cs = getComputedStyle(el as Element);
+  const enter = {
+    opacity: num(cs.getPropertyValue('--tw-enter-opacity')) ?? undefined,
+    '--tw-enter-translate-x': cs.getPropertyValue('--tw-enter-translate-x') || undefined,
+    '--tw-enter-translate-y': cs.getPropertyValue('--tw-enter-translate-y') || undefined,
+    '--tw-enter-scale': cs.getPropertyValue('--tw-enter-scale') || undefined,
+    '--tw-enter-rotate': cs.getPropertyValue('--tw-enter-rotate') || undefined,
+  } as CSSProperties & Record<string, any>;
+  const exit = {
+    opacity: num(cs.getPropertyValue('--tw-exit-opacity')) ?? undefined,
+    '--tw-exit-translate-x': cs.getPropertyValue('--tw-exit-translate-x') || undefined,
+    '--tw-exit-translate-y': cs.getPropertyValue('--tw-exit-translate-y') || undefined,
+    '--tw-exit-scale': cs.getPropertyValue('--tw-exit-scale') || undefined,
+    '--tw-exit-rotate': cs.getPropertyValue('--tw-exit-rotate') || undefined,
+  } as CSSProperties & Record<string, any>;
+
+  if (isIn) {
+    // from enter vars to neutral
+    return {
+      from: enter,
+      to: { opacity: 1, '--tw-enter-translate-x': '0', '--tw-enter-translate-y': '0', '--tw-enter-scale': '1', '--tw-enter-rotate': '0' } as any,
+    };
+  }
+  if (isOut) {
+    // from neutral to exit vars
+    return {
+      from: { opacity: 1, '--tw-exit-translate-x': '0', '--tw-exit-translate-y': '0', '--tw-exit-scale': '1', '--tw-exit-rotate': '0' } as any,
+      to: exit,
+    };
+  }
+  return null;
+}
+
+function findTargets(): HTMLElement[] {
+  const selector = [
+    '.udx-view',
+    '.udx-view-x',
+    '.udx-view-y',
+    '.udx-view-inline',
+    '.udx-view-block',
+    '[data-udx-view]'
+  ]
+    .map((s) => `${s}.animate-in, ${s}.animate-out`)
+    .join(', ');
+  return Array.from(document.querySelectorAll<HTMLElement>(selector));
+}
+
+export function initScrollViewFallback(options: InitAnimationOptions = {}) {
+  if (initialized) return teardown || (() => {});
+  if (typeof window === 'undefined') return () => {};
+  if (supportsScrollTimeline() || prefersReducedMotion()) {
+    initialized = true; // No-op in supporting browsers or reduced motion
+    return () => {};
+  }
+
+  initialized = true;
+  const once = options.once ?? true;
+  const seen = new WeakSet<Element>();
+  let rafId: number | null = null;
+
+  const measure = () => {
+    const targets = findTargets();
+    const vh = window.innerHeight || 0;
+    for (const el of targets) {
+      const rect = el.getBoundingClientRect();
+      const visible = Math.min(rect.bottom, vh) - Math.max(rect.top, 0);
+      const visibleClamped = Math.max(0, Math.min(visible, rect.height));
+      const ratio = rect.height > 0 ? visibleClamped / rect.height : 0;
+
+      const { start, end } = getRange(el);
+      let p = (ratio - start) / (end - start);
+      p = Math.max(0, Math.min(1, p));
+
+      if (once && seen.has(el) && p < 1) p = 1;
+
+      const fe = buildFromTo(el);
+      if (!fe) continue;
+      const { from, to } = fe;
+      applyProgress(el, from, to, p);
+
+      if (p >= 1 && once) seen.add(el);
+    }
+  };
+
+  const onScroll = () => {
+    if (rafId != null) return;
+    rafId = window.requestAnimationFrame(() => {
+      rafId = null;
+      measure();
+    });
+  };
+
+  // Initial run and listeners
+  measure();
+  window.addEventListener('scroll', onScroll, { passive: true });
+  window.addEventListener('resize', onScroll);
+
+  const mo = new MutationObserver(() => {
+    onScroll();
+  });
+  mo.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+  });
+
+  teardown = () => {
+    window.removeEventListener('scroll', onScroll);
+    window.removeEventListener('resize', onScroll);
+    if (rafId != null) cancelAnimationFrame(rafId);
+    mo.disconnect();
+    initialized = false;
+    teardown = null;
+  };
+
+  return teardown;
+}

package/src/lib/effects/smooth-scroll.effect.tsx

@@ -1,91 +1,124 @@
-import { ReactNode, useRef, useState } from 'react';
-import {
-  motion,
-  motionValue,
-  useMotionValueEvent,
-  useTransform,
-} from 'motion/react';
-import { CustomScroll, CustomScrollInterface } from './custom-scroll';
-import { classNames, ReactProps } from '../utils';
+import { useEffect, useRef, useState } from 'react';
+import { CustomScrollInterface } from './custom-scroll';
+import { ReactProps } from '../utils';
+import { BlockScroll } from './block-scroll.effect';
+import { animate, AnimationPlaybackControls } from 'motion';
 
 export const SmoothScroll = ({
-  children,
-  transition = '.5s',
+  transition,
   orientation = 'vertical',
   throttleDuration = 25,
-  ...restProps
 }: {
-  children: ReactNode;
-  transition?: string;
+  transition?: {
+    duration?: number;
+  };
 } & ReactProps<CustomScrollInterface>) => {
-  const [scroll, setScroll] = useState<{
-    scrollProgress: number;
-    scrollTotal: number;
-    scrollVisible: number;
-    scroll: number;
-  } | null>(null);
+  // Target value (instant), driven by wheel/touch/keyboard or native scroll sync
+  const [scrollY, setScrollY] = useState(0);
 
-  const scrollProgress = motionValue(scroll?.scrollProgress ?? 0);
+  const [el, setEl] = useState<HTMLHtmlElement>();
 
-  const transform = useTransform(
-    scrollProgress,
-    [0, 1],
-    [0, 1 - (scroll?.scrollVisible ?? 0) / (scroll?.scrollTotal ?? 0)]
-  );
+  const isScrolling = useRef(false);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout>();
+  const lastAppliedYRef = useRef(0);
 
-  const percentTransform = useTransform(
-    transform,
-    (value) => `${-value * 100}%`
-  );
+  useEffect(() => {
+    setEl(document as unknown as HTMLHtmlElement);
+    const y = document.documentElement.scrollTop;
+    setScrollY(y);
+    lastAppliedYRef.current = y;
+  }, []);
+
+  // Sync native scroll (e.g., scrollbar, programmatic) back to target after a small delay
+  useEffect(() => {
+    const onScroll = () => {
+      if (isScrolling.current) return;
+      setScrollY(document.documentElement.scrollTop);
+    };
+
+    el?.addEventListener('scroll', onScroll as unknown as EventListener);
+    return () => {
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      el?.removeEventListener('scroll', onScroll as unknown as EventListener);
+    };
+  }, [el]);
 
-  const handleScroll = (args: {
-    scrollProgress: number;
-    scrollTotal: number;
-    scrollVisible: number;
-    scroll: number;
-  }) => {
-    scrollProgress.set(args.scrollProgress);
-    if (args.scrollTotal > 0) {
-      setScroll(args);
+  // Drive the spring when target changes
+  const currentY = useRef<number | null>();
+  const animationRef = useRef<AnimationPlaybackControls | null>(null);
+  useEffect(() => {
+    const y = scrollY;
+
+    if (animationRef.current) {
+      animationRef.current.stop();
+      animationRef.current = null;
     }
-  };
-  const lastChangeTimeRef = useRef<number | null>(null);
-  useMotionValueEvent(percentTransform, 'change', (value) => {
-    // Récupérer l'heure actuelle
-    const now = performance.now();
 
-    // Si une heure précédente existe, calculer le delta
-    if (lastChangeTimeRef.current !== null) {
-      const deltaTime = now - lastChangeTimeRef.current;
-      console.log(`Delta temps : ${deltaTime} ms`);
+    if (!isScrolling.current) {
+      currentY.current = y;
+      return;
     }
+    animationRef.current = animate(currentY.current ?? y, y, {
+      duration: transition?.duration ?? 0.5,
+      ease: 'circOut',
+
+      onUpdate: (value) => {
+        if (scrollTimeoutRef.current) {
+          clearTimeout(scrollTimeoutRef.current);
+        }
+        currentY.current = value;
 
-    // Mettre à jour l'heure du dernier changement
-    lastChangeTimeRef.current = now;
+        const html = document.documentElement;
+        // Avoid micro-movements causing extra layout work
+        const rounded = Math.round(value * 1000) / 1000;
+        const last = lastAppliedYRef.current;
+        if (Math.abs(rounded - last) < 0.1) return;
+        lastAppliedYRef.current = rounded;
 
-    console.log(value); // Affiche également la valeur si nécessaire
-  });
+        if (isScrolling.current) {
+          html.scrollTo({ top: rounded });
+        }
+      },
+      onComplete: () => {
+        scrollTimeoutRef.current = setTimeout(() => {
+          isScrolling.current = false;
+        }, 300);
+        animationRef.current = null;
+      },
+    });
+    return () => {
+      // Safety: stop if effect re-runs quickly
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+    };
+  }, [scrollY]);
+
+  if (!el) return null;
 
   return (
-    <CustomScroll
-      onScroll={handleScroll}
-      throttleDuration={throttleDuration}
-      {...restProps}
-    >
-      <motion.div
-        className={classNames('transition-transform  ease-out', {
-          'w-fit h-full': orientation === 'horizontal',
-          'h-fit w-full': orientation === 'vertical',
-        })}
-        style={{
-          transitionDuration: transition,
-          ...(orientation == 'vertical'
-            ? { y: percentTransform }
-            : { x: percentTransform }),
-        }}
-      >
-        {children}
-      </motion.div>
-    </CustomScroll>
+    <BlockScroll
+      touch={false}
+      el={el as unknown as HTMLElement}
+      onScroll={(scroll) => {
+        if (
+          'deltaY' in scroll &&
+          scroll.deltaY !== 0 &&
+          el &&
+          scrollY !== null
+        ) {
+          let y = scrollY + scroll.deltaY;
+          const html = el.querySelector('html');
+          if (html) {
+            y = Math.min(y, html.scrollHeight - html.clientHeight);
+          }
+          y = Math.max(y, 0);
+          setScrollY(y);
+
+          isScrolling.current = true;
+        }
+      }}
+    ></BlockScroll>
   );
 };

package/src/lib/index.ts

@@ -4,3 +4,4 @@ export * from './icon';
 export * from './interfaces';
 export * from './styles';
 export * from './utils';
+export * from './config';

package/src/lib/styles/card.style.ts

@@ -5,7 +5,7 @@ export const cardStyle = defaultClassNames<CardInterface>(
   'card',
   ({ variant, isInteractive }) => ({
     card: classNames(
-      'card group/card rounded-xl overflow-hidden z-10',
+      'group/card rounded-xl overflow-hidden z-10',
       variant === 'outlined' && 'bg-surface border border-outline-variant',
       variant === 'elevated' && 'bg-surface-container-low shadow-1',
       variant === 'filled' && 'bg-surface-container-highest',

package/src/lib/styles/fab.style.ts

@@ -20,6 +20,10 @@ export const fabStyle = defaultClassNames<FabInterface>(
       variant === 'primary' && 'bg-primary-container',
       variant === 'secondary' && 'bg-secondary-container',
       variant === 'tertiary' && 'bg-tertiary-container',
+      variant === 'surface' && 'text-primary',
+      variant === 'primary' && 'text-on-primary-container',
+      variant === 'secondary' && 'text-on-secondary-container',
+      variant === 'tertiary' && 'text-on-tertiary-container',
     ),
     stateLayer: classNames(
       'absolute w-full h-full overflow-hidden left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2',
@@ -33,23 +37,11 @@ export const fabStyle = defaultClassNames<FabInterface>(
         'group-hover:hover-state-on-tertiary-container group-focus-visible:focus-state-on-tertiary-container',
     ),
 
-    icon: classNames(
-      {
-        'size-6': size == 'small' || size == 'medium' || isExtended,
-        'size-9': size == 'large' && !isExtended,
-      },
-      variant === 'surface' && 'text-primary',
-      variant === 'primary' && 'text-on-primary-container',
-      variant === 'secondary' && 'text-on-secondary-container',
-      variant === 'tertiary' && 'text-on-tertiary-container',
-    ),
+    icon: classNames({
+      'size-6': size == 'small' || size == 'medium' || isExtended,
+      'size-9': size == 'large' && !isExtended,
+    }),
 
-    label: classNames(
-      'text-title-medium text-nowrap',
-      variant === 'surface' && 'text-primary',
-      variant === 'primary' && 'text-on-primary-container',
-      variant === 'secondary' && 'text-on-secondary-container',
-      variant === 'tertiary' && 'text-on-tertiary-container',
-    ),
+    label: classNames('text-title-medium text-nowrap'),
   }),
 );

package/src/lib/styles/slider.style.ts

@@ -5,7 +5,7 @@ export const sliderStyle = defaultClassNames<SliderInterface>(
   'slider',
   ({ isChanging }) => ({
     slider: classNames([
-      'relative w-full h-11 flex items-center rounded gap-x-1.5 cursor-pointer',
+      'relative w-full h-11 flex items-center rounded gap-x-1.5 cursor-pointer min-w-32',
     ]),
     activeTrack: classNames([
       'h-4 relative transition-all duration-100 bg-primary overflow-hidden rounded-l-full ',
@@ -23,5 +23,5 @@ export const sliderStyle = defaultClassNames<SliderInterface>(
     dot: classNames([
       'h-1 w-1 absolute transform -translate-y-1/2 -translate-x-1/2 top-1/2 rounded-full',
     ]),
-  })
+  }),
 );

package/src/lib/styles/tab.style.ts

@@ -6,7 +6,7 @@ export const tabStyle = defaultClassNames<TabInterface>(
   'tab',
   ({ isSelected, icon, label, variant }) => ({
     tab: classNames(
-      'bg-surface flex-1 group outline-none flex px-4 justify-center items-center cursor-pointer',
+      'flex-1 group outline-none flex px-4 justify-center items-center cursor-pointer',
       { 'z-10': isSelected },
       Boolean(icon && label) && variant === 'primary' && 'h-16',
       !(Boolean(icon && label) && variant === 'primary') && 'h-12',

package/src/lib/styles/tabs.style.ts

@@ -5,9 +5,9 @@ export const tabsStyle = defaultClassNames<TabsInterface>(
   'tabs',
   ({ scrollable }) => ({
     tabs: classNames(
-      'border-b border-surface-container-highest',
+      'border-b border-surface-container-highest bg-surface',
       'flex relative ',
-      { 'overflow-x-auto': scrollable }
+      { 'overflow-x-auto': scrollable },
     ),
-  })
+  }),
 );