@zuzjs/ui 0.8.9 → 0.9.0

package/dist/esm/hooks/useBase.js

@@ -1,3 +1,5 @@
+import { animateCSSVar } from "@zuzjs/core";
+import { useEffect, useRef } from "react";
 import { cleanProps, css } from "../funs";
 import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
 import { cssFilterKeys, cssProps, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
@@ -28,13 +30,15 @@ const buildSkeletonStyle = (s) => {
     }
     return style;
 };
-const useBase = (props) => {
-    const { as, fx, animate, transition: autoTransition, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
+const useBase = (props, ref) => {
+    const { as, fx, animate, timeline, transition: autoTransition, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
+    const currentScroll = useRef({ x: 0, y: 0 });
+    const lastTime = useRef(performance.now());
     let cx = [];
     if (as) {
         cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
     }
-    const { transition, from, to, exit, when, duration, delay, curve } = autoTransition ? {
+    const { transition, from, to, exit, when, duration, delay, curve, scroll } = autoTransition ? {
         transition: autoTransition,
         duration: 0.3
     } : fx || animate || {};
@@ -48,23 +52,6 @@ const useBase = (props) => {
     else {
         _style = transition ? getAnimationTransition(transition, false, true) : from || {};
     }
-    // Track previous value of 'when'
-    // const prevWhenRef = useRef<boolean | undefined>(when);
-    // if (undefined === when) {
-    //     _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };
-    // } else if (true === when) {
-    //     _style = transition ? getAnimationTransition(transition, false) : { ...(to || {}) };
-    // } else {
-    //     // Check if exit style should be applied
-    //     const wasTrue = prevWhenRef.current === true;
-    //     if (wasTrue && exit) {
-    //         _style = { ...(exit || {}) };
-    //     } else {
-    //         _style = transition ? getAnimationTransition(transition, false, true) : from || {};
-    //     }
-    // }
-    // // Update previous value for next render
-    // prevWhenRef.current = when;
     const _transition = {};
     if (transition || (from && to)) {
         // { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` }
@@ -111,6 +98,36 @@ const useBase = (props) => {
             };
         }
     }
+    const handleScroll = () => {
+        if (fx && fx.scroll && typeof window !== 'undefined') {
+            const now = performance.now();
+            const dt = (now - lastTime.current) / 1000;
+            lastTime.current = now;
+            const { lerpFactor, x, y, multiplier, xMultiplier, yMultiplier } = fx.scroll;
+            const delta = window.scrollY - currentScroll.current.y;
+            const velocity = delta / dt;
+            currentScroll.current.y += delta * (lerpFactor || .1);
+            if (ref?.current) {
+                const translateX = x ? currentScroll.current.x * x * (multiplier || xMultiplier || .25) : 0;
+                const translateY = y ? currentScroll.current.y * y * (multiplier || yMultiplier || .25) : 0;
+                // ref.current.style.setProperty(`--scroll-y`, `${translateY}px`)
+                // transform = `translate3d(${translateX}px, ${translateY}px, 0)`.trim()
+                animateCSSVar(ref, "--scroll-y", translateY);
+            }
+        }
+    };
+    useEffect(() => {
+        if (fx && fx.scroll && typeof window !== 'undefined') {
+            if (ref) {
+                ref.current.style.transform = `translate3d(0px, var(--scroll-y), 0)`;
+                ref.current.style.transition = `transform 0.1s ${fx.curve ? getAnimationCurve(fx.curve) : `var(--spring)`}`;
+            }
+            window.addEventListener('scroll', handleScroll, { passive: true });
+            return () => {
+                window.removeEventListener('scroll', handleScroll);
+            };
+        }
+    }, [ref]);
     return {
         style: {
             ...buildWithStyles(_style),

package/dist/esm/hooks/useScrollPhysics.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+type ScrollPhysicsOptions = {
+    lerpFactor?: number;
+    x?: number;
+    y?: number;
+    xMultiplier?: number;
+    yMultiplier?: number;
+    scale?: {
+        min: number;
+        max: number;
+        factor: number;
+    };
+    rotate?: {
+        direction?: 1 | -1;
+        multiplier?: number;
+    };
+};
+declare const useScrollPhysics: (ref: RefObject<HTMLElement>, options: ScrollPhysicsOptions) => {
+    position: RefObject<number>;
+    velocity: RefObject<number>;
+};
+export default useScrollPhysics;

package/dist/esm/hooks/useScrollPhysics.js

@@ -0,0 +1,69 @@
+import { clamp } from '@zuzjs/core';
+import { useEffect, useRef } from 'react';
+const useScrollPhysics = (ref, options) => {
+    const { lerpFactor = 0.1, x, y, xMultiplier = 0.25, yMultiplier = 0.25, scale, rotate, } = options;
+    const position = useRef(0);
+    const velocity = useRef(0);
+    const current = useRef(0);
+    const target = useRef(0);
+    const lastTime = useRef(performance.now());
+    const raf = useRef(null);
+    const isRunning = useRef(false);
+    const smoothedVelocity = useRef(0);
+    const threshold = 0.2; // minimum delta to trigger animation
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const tick = () => {
+            const now = performance.now();
+            const dt = (now - lastTime.current) / 1000;
+            lastTime.current = now;
+            const delta = target.current - current.current;
+            const v = delta / dt;
+            // Update position & velocity
+            current.current += delta * lerpFactor;
+            position.current = current.current;
+            velocity.current = v;
+            smoothedVelocity.current += (v - smoothedVelocity.current) * lerpFactor;
+            // Apply transform
+            if (ref.current) {
+                const translateX = x ? position.current * x * xMultiplier : 0;
+                const translateY = y ? position.current * y * yMultiplier : 0;
+                const scaleValue = scale
+                    ? clamp(scale.max - Math.abs(smoothedVelocity.current) * scale.factor, scale.min, scale.max) : 1;
+                const rotateValue = rotate
+                    ? velocity.current * (rotate.multiplier ?? 1) * (rotate.direction ?? 1)
+                    : 0;
+                ref.current.style.transform = `
+          translate3d(${translateX}px, ${translateY}px, 0)
+          scale(${scaleValue})
+          rotate(${rotateValue}deg)
+        `.trim();
+            }
+            // If still moving, continue animating
+            if (Math.abs(delta) > threshold || Math.abs(v) > threshold) {
+                raf.current = requestAnimationFrame(tick);
+            }
+            else {
+                isRunning.current = false;
+                raf.current = null;
+            }
+        };
+        const handleScroll = () => {
+            target.current = window.scrollY;
+            if (!isRunning.current) {
+                lastTime.current = performance.now();
+                raf.current = requestAnimationFrame(tick);
+                isRunning.current = true;
+            }
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            if (raf.current)
+                cancelAnimationFrame(raf.current);
+        };
+    }, [lerpFactor, x, y, xMultiplier, yMultiplier, scale, rotate]);
+    return { position, velocity };
+};
+export default useScrollPhysics;

package/dist/esm/types/enums.d.ts

@@ -18,7 +18,8 @@ export declare enum FORMVALIDATION {
     Uri = "URI",
     Password = "PASSWORD",
     MatchField = "MATCHFIELD",
-    Pattern = "*"
+    Pattern = "*",
+    GreaterThan = "GREATER_THAN"
 }
 export declare enum SHEET {
     Dialog = "DIALOG",

package/dist/esm/types/enums.js

@@ -24,6 +24,7 @@ export var FORMVALIDATION;
     FORMVALIDATION["Password"] = "PASSWORD";
     FORMVALIDATION["MatchField"] = "MATCHFIELD";
     FORMVALIDATION["Pattern"] = "*";
+    FORMVALIDATION["GreaterThan"] = "GREATER_THAN";
 })(FORMVALIDATION || (FORMVALIDATION = {}));
 export var SHEET;
 (function (SHEET) {

package/dist/esm/types/index.d.ts

@@ -48,6 +48,7 @@ export interface ZuzProps {
     animate?: animationProps;
     /** Animation configuration using {@link animationProps} */
     fx?: animationProps;
+    timeline?: animationProps[];
     transition?: TRANSITIONS;
     /** Skeleton placeholder configuration using {@link Skeleton} */
     skeleton?: Skeleton;

package/dist/esm/types/interfaces.d.ts

@@ -1,5 +1,13 @@
 import { dynamicObject } from ".";
 import { SKELETON, TRANSITION_CURVES, TRANSITIONS } from "./enums";
+export interface scrollEffectProps {
+    lerpFactor?: number;
+    x?: number;
+    y?: number;
+    multiplier?: number;
+    xMultiplier?: number;
+    yMultiplier?: number;
+}
 /**
  * `animationProps` defines the properties to control animation effects
  * applied to elements. Supports transitions with timing configurations.
@@ -26,6 +34,7 @@ export interface animationProps {
     delay?: number;
     /** Easing curve applied to the animation, as a string or {@link TRANSITION_CURVES} */
     curve?: string | TRANSITION_CURVES;
+    scroll?: scrollEffectProps;
 }
 /**
  * `Skeleton` defines properties for a skeleton loader, used to indicate