@zuzjs/ui 0.9.4 → 0.9.5

package/dist/cjs/comps/Form/index.js

@@ -267,7 +267,7 @@ const Form = forwardRef((props, ref) => {
             });
         }
     }, [innerRef.current]);
-    const buildChildren = useMemo(() => addPropsToChildren(children, child => child.props.type == `submit`, { ref: submit }), [children]);
+    const buildChildren = useMemo(() => addPropsToChildren(children, child => child.props.type == `submit`, index => ({ ref: submit })), [children]);
     useImperativeHandle(ref, () => ({
         setLoading(mod) {
             if (mod) {

package/dist/cjs/comps/Group/index.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from "../Box";
+declare const Group: import("react").ForwardRefExoticComponent<BoxProps & {
+    fxDelay?: number;
+    fxStep?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Group;

package/dist/cjs/comps/Group/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useDelayed } from "../..";
+import { addPropsToChildren } from "../../funs";
+import Box from "../Box";
+const Group = forwardRef((props, ref) => {
+    const { children, fx, fxDelay, fxStep, ...rest } = props;
+    const when = useDelayed();
+    const Children = useMemo(() => {
+        if (!fx)
+            return children;
+        return addPropsToChildren(children, child => !(`fx` in (child.props ?? {})), index => ({ fx: {
+                ...fx,
+                delay: (fxDelay || 0) + index * (fxStep || .1), // how to increment per index ?
+                when
+            } }));
+    }, [children, when, fx]);
+    return _jsx(Box, { className: `--group`, ref: ref, ...rest, children: Children });
+});
+Group.displayName = `Zuz.Group`;
+export default Group;

package/dist/cjs/comps/Image/index.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import { useBase } from '../../hooks';
 const Image = forwardRef((props, ref) => {
-    const { style, className, rest } = useBase(props);
+    const innerRef = useRef(null);
+    const targetRef = useMemo(() => ref && typeof ref !== "function" && ref.current ? ref : innerRef, [ref]);
+    const { style, className, rest } = useBase(props, targetRef);
     if (!rest.src || rest.src == ``)
         return null;
-    return _jsx("img", { ref: ref, style: style, className: `${className} flex`, ...rest });
+    return _jsx("img", { ref: targetRef, style: style, className: `${className} flex`, ...rest });
 });
 Image.displayName = `Zuz.Image`;
 export default Image;

package/dist/cjs/comps/Text/index.js

@@ -5,8 +5,6 @@ import Span from '../Span';
 const Text = forwardRef((props, ref) => {
     const { h, html, children, lines, ...pops } = props;
     const { style, className, rest } = useBase(pops);
-    // const textRef = useTruncateText(lines || 2)
-    // const mergedRef = useMergedRefs(ref, textRef)
     const Tag = `h${props.h || 1}`;
     return _jsx(Tag, { ref: ref, style: style, className: className, ...rest, children: html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children });
 });

package/dist/cjs/comps/index.d.ts

@@ -36,6 +36,7 @@ export * from './Fab/types';
 export { default as Filters, type FilterProps } from './Filters';
 export { default as Form } from './Form';
 export * from './Form/types';
+export { default as Group } from './Group';
 export { default as Icon, type IconProps } from './Icon';
 export { default as Image, type ImageProps } from './Image';
 export { default as Input, type InputProps } from './Input';

package/dist/cjs/comps/index.js

@@ -36,6 +36,8 @@ export * from './Fab/types';
 export { default as Filters } from './Filters';
 export { default as Form } from './Form';
 export * from './Form/types';
+export { default as Group } from './Group';
+// export * from './Form/types';
 export { default as Icon } from './Icon';
 export { default as Image } from './Image';
 export { default as Input } from './Input';

package/dist/cjs/funs/index.d.ts

@@ -63,7 +63,7 @@ export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElem
 export declare const camelCase: (str: string, ucf?: boolean) => string;
 export declare const camelCaseToDash: (str: string) => string;
 export declare const pluralize: (word: string, count: number) => string;
-export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, newProps: object) => ReactNode;
+export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, getProps: (index: number, element: ReactElement<any>) => object) => ReactNode;
 export declare const getPositionAroundElement: (x: number, y: number, distance: number, childCount: number) => {
     x: number;
     y: number;

package/dist/cjs/funs/index.js

@@ -395,16 +395,17 @@ export const camelCase = (str, ucf = false) => {
 };
 export const camelCaseToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 export const pluralize = (word, count) => `${word}${count !== 1 ? 's' : ''}`;
-export const addPropsToChildren = (children, conditions, newProps) => {
+export const addPropsToChildren = (children, conditions, getProps) => {
+    let i = 0;
     return Children.map(children, (child) => {
         if (isValidElement(child)) {
             const element = child;
             const newChild = conditions(element)
-                ? cloneElement(element, { ...newProps })
+                ? cloneElement(element, getProps(i++, element))
                 : element;
             if (element.props.children) {
                 return cloneElement(newChild, {
-                    children: addPropsToChildren(element.props.children, conditions, newProps)
+                    children: addPropsToChildren(element.props.children, conditions, getProps)
                 });
             }
             return newChild;

package/dist/cjs/hooks/useBase.js

@@ -57,6 +57,7 @@ const useBase = (props, ref) => {
         // { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` }
         const _curve = getAnimationCurve(curve);
         const _transitionList = [];
+        const _willChangeList = [];
         Object.keys(_style).forEach(ck => {
             let prop = ck;
             let _subTrans = ck;
@@ -68,11 +69,15 @@ const useBase = (props, ref) => {
             else if (cssTransformKeys.includes(prop)) {
                 _subTrans = `transform`;
             }
+            // will-change: ${_subTrans}; 
             const _newTransition = `${_subTrans} ${duration || `0.2`}s ${_curve} ${delay || 0}s`;
+            if (!_willChangeList.includes(_subTrans))
+                _willChangeList.push(_subTrans);
             if (!_transitionList.includes(_newTransition))
                 _transitionList.push(_newTransition);
         });
         _transition.transition = _transitionList.join(`, `);
+        _transition.willChange = _willChangeList.join(`, `);
     }
     // // console.log(_style, _transition)
     const is = typeof window !== "undefined";
@@ -98,7 +103,7 @@ const useBase = (props, ref) => {
             };
         }
     }
-    const handleScroll = () => {
+    const handleScrollParallax = () => {
         if (fx && fx.scroll && typeof window !== 'undefined') {
             const now = performance.now();
             const dt = (now - lastTime.current) / 1000;
@@ -110,22 +115,58 @@ const useBase = (props, ref) => {
             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);
+                animateCSSVar(ref, "--scroll-x", translateX);
             }
         }
     };
+    const handleMouseParallax = (e) => {
+        if (!fx || !fx.mouse || typeof window === 'undefined')
+            return;
+        const now = performance.now();
+        const dt = (now - lastTime.current) / 1000;
+        lastTime.current = now;
+        const { lerpFactor, x, y, multiplier, xMultiplier, yMultiplier } = fx.mouse;
+        // Normalize mouse position to center (0) range (-1 to 1)
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const nx = (e.clientX - vw / 2) / (vw / 2); // -1 to 1
+        const ny = (e.clientY - vh / 2) / (vh / 2); // -1 to 1
+        const dx = nx - currentScroll.current.x;
+        const dy = ny - currentScroll.current.y;
+        currentScroll.current.x += dx * (lerpFactor || 0.1);
+        currentScroll.current.y += dy * (lerpFactor || 0.1);
+        if (ref?.current) {
+            const translateX = x ? currentScroll.current.x * (multiplier || xMultiplier || 20) : 0;
+            const translateY = y ? currentScroll.current.y * (multiplier || yMultiplier || 20) : 0;
+            animateCSSVar(ref, '--mouse-x', translateX);
+            animateCSSVar(ref, '--mouse-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)`}`;
+        if (typeof window !== 'undefined') {
+            if (fx && fx.scroll) {
+                if (ref) {
+                    ref.current.style.willChange = `transform`;
+                    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', handleScrollParallax, { passive: true });
+                return () => {
+                    window.removeEventListener('scroll', handleScrollParallax);
+                };
+            }
+            if (fx && fx.mouse) {
+                if (ref) {
+                    ref.current.style.willChange = `transform`;
+                    ref.current.style.transform = `translate3d(0px, var(--mouse-y), 0)`;
+                    ref.current.style.transition = `transform 0.1s ${fx.curve ? getAnimationCurve(fx.curve) : `var(--spring)`}`;
+                }
+                window.document.addEventListener('mousemove', handleMouseParallax, { passive: true });
+                return () => {
+                    window.removeEventListener('mousemove', handleMouseParallax);
+                };
             }
-            window.addEventListener('scroll', handleScroll, { passive: true });
-            return () => {
-                window.removeEventListener('scroll', handleScroll);
-            };
         }
     }, [ref]);
     return {

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

@@ -1,6 +1,6 @@
 import { dynamicObject } from ".";
 import { SKELETON, TRANSITION_CURVES, TRANSITIONS } from "./enums";
-export interface scrollEffectProps {
+export interface parallaxEffectProps {
     lerpFactor?: number;
     x?: number;
     y?: number;
@@ -34,7 +34,8 @@ export interface animationProps {
     delay?: number;
     /** Easing curve applied to the animation, as a string or {@link TRANSITION_CURVES} */
     curve?: string | TRANSITION_CURVES;
-    scroll?: scrollEffectProps;
+    scroll?: parallaxEffectProps;
+    mouse?: parallaxEffectProps;
 }
 /**
  * `Skeleton` defines properties for a skeleton loader, used to indicate

package/dist/esm/comps/Form/index.js

@@ -267,7 +267,7 @@ const Form = forwardRef((props, ref) => {
             });
         }
     }, [innerRef.current]);
-    const buildChildren = useMemo(() => addPropsToChildren(children, child => child.props.type == `submit`, { ref: submit }), [children]);
+    const buildChildren = useMemo(() => addPropsToChildren(children, child => child.props.type == `submit`, index => ({ ref: submit })), [children]);
     useImperativeHandle(ref, () => ({
         setLoading(mod) {
             if (mod) {

package/dist/esm/comps/Group/index.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from "../Box";
+declare const Group: import("react").ForwardRefExoticComponent<BoxProps & {
+    fxDelay?: number;
+    fxStep?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Group;

package/dist/esm/comps/Group/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useDelayed } from "../..";
+import { addPropsToChildren } from "../../funs";
+import Box from "../Box";
+const Group = forwardRef((props, ref) => {
+    const { children, fx, fxDelay, fxStep, ...rest } = props;
+    const when = useDelayed();
+    const Children = useMemo(() => {
+        if (!fx)
+            return children;
+        return addPropsToChildren(children, child => !(`fx` in (child.props ?? {})), index => ({ fx: {
+                ...fx,
+                delay: (fxDelay || 0) + index * (fxStep || .1), // how to increment per index ?
+                when
+            } }));
+    }, [children, when, fx]);
+    return _jsx(Box, { className: `--group`, ref: ref, ...rest, children: Children });
+});
+Group.displayName = `Zuz.Group`;
+export default Group;

package/dist/esm/comps/Image/index.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import { useBase } from '../../hooks';
 const Image = forwardRef((props, ref) => {
-    const { style, className, rest } = useBase(props);
+    const innerRef = useRef(null);
+    const targetRef = useMemo(() => ref && typeof ref !== "function" && ref.current ? ref : innerRef, [ref]);
+    const { style, className, rest } = useBase(props, targetRef);
     if (!rest.src || rest.src == ``)
         return null;
-    return _jsx("img", { ref: ref, style: style, className: `${className} flex`, ...rest });
+    return _jsx("img", { ref: targetRef, style: style, className: `${className} flex`, ...rest });
 });
 Image.displayName = `Zuz.Image`;
 export default Image;

package/dist/esm/comps/Text/index.js

@@ -5,8 +5,6 @@ import Span from '../Span';
 const Text = forwardRef((props, ref) => {
     const { h, html, children, lines, ...pops } = props;
     const { style, className, rest } = useBase(pops);
-    // const textRef = useTruncateText(lines || 2)
-    // const mergedRef = useMergedRefs(ref, textRef)
     const Tag = `h${props.h || 1}`;
     return _jsx(Tag, { ref: ref, style: style, className: className, ...rest, children: html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children });
 });

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

@@ -36,6 +36,7 @@ export * from './Fab/types';
 export { default as Filters, type FilterProps } from './Filters';
 export { default as Form } from './Form';
 export * from './Form/types';
+export { default as Group } from './Group';
 export { default as Icon, type IconProps } from './Icon';
 export { default as Image, type ImageProps } from './Image';
 export { default as Input, type InputProps } from './Input';

package/dist/esm/comps/index.js

@@ -36,6 +36,8 @@ export * from './Fab/types';
 export { default as Filters } from './Filters';
 export { default as Form } from './Form';
 export * from './Form/types';
+export { default as Group } from './Group';
+// export * from './Form/types';
 export { default as Icon } from './Icon';
 export { default as Image } from './Image';
 export { default as Input } from './Input';

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

@@ -63,7 +63,7 @@ export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElem
 export declare const camelCase: (str: string, ucf?: boolean) => string;
 export declare const camelCaseToDash: (str: string) => string;
 export declare const pluralize: (word: string, count: number) => string;
-export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, newProps: object) => ReactNode;
+export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, getProps: (index: number, element: ReactElement<any>) => object) => ReactNode;
 export declare const getPositionAroundElement: (x: number, y: number, distance: number, childCount: number) => {
     x: number;
     y: number;

package/dist/esm/funs/index.js

@@ -395,16 +395,17 @@ export const camelCase = (str, ucf = false) => {
 };
 export const camelCaseToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 export const pluralize = (word, count) => `${word}${count !== 1 ? 's' : ''}`;
-export const addPropsToChildren = (children, conditions, newProps) => {
+export const addPropsToChildren = (children, conditions, getProps) => {
+    let i = 0;
     return Children.map(children, (child) => {
         if (isValidElement(child)) {
             const element = child;
             const newChild = conditions(element)
-                ? cloneElement(element, { ...newProps })
+                ? cloneElement(element, getProps(i++, element))
                 : element;
             if (element.props.children) {
                 return cloneElement(newChild, {
-                    children: addPropsToChildren(element.props.children, conditions, newProps)
+                    children: addPropsToChildren(element.props.children, conditions, getProps)
                 });
             }
             return newChild;

package/dist/esm/hooks/useBase.js

@@ -57,6 +57,7 @@ const useBase = (props, ref) => {
         // { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` }
         const _curve = getAnimationCurve(curve);
         const _transitionList = [];
+        const _willChangeList = [];
         Object.keys(_style).forEach(ck => {
             let prop = ck;
             let _subTrans = ck;
@@ -68,11 +69,15 @@ const useBase = (props, ref) => {
             else if (cssTransformKeys.includes(prop)) {
                 _subTrans = `transform`;
             }
+            // will-change: ${_subTrans}; 
             const _newTransition = `${_subTrans} ${duration || `0.2`}s ${_curve} ${delay || 0}s`;
+            if (!_willChangeList.includes(_subTrans))
+                _willChangeList.push(_subTrans);
             if (!_transitionList.includes(_newTransition))
                 _transitionList.push(_newTransition);
         });
         _transition.transition = _transitionList.join(`, `);
+        _transition.willChange = _willChangeList.join(`, `);
     }
     // // console.log(_style, _transition)
     const is = typeof window !== "undefined";
@@ -98,7 +103,7 @@ const useBase = (props, ref) => {
             };
         }
     }
-    const handleScroll = () => {
+    const handleScrollParallax = () => {
         if (fx && fx.scroll && typeof window !== 'undefined') {
             const now = performance.now();
             const dt = (now - lastTime.current) / 1000;
@@ -110,22 +115,58 @@ const useBase = (props, ref) => {
             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);
+                animateCSSVar(ref, "--scroll-x", translateX);
             }
         }
     };
+    const handleMouseParallax = (e) => {
+        if (!fx || !fx.mouse || typeof window === 'undefined')
+            return;
+        const now = performance.now();
+        const dt = (now - lastTime.current) / 1000;
+        lastTime.current = now;
+        const { lerpFactor, x, y, multiplier, xMultiplier, yMultiplier } = fx.mouse;
+        // Normalize mouse position to center (0) range (-1 to 1)
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const nx = (e.clientX - vw / 2) / (vw / 2); // -1 to 1
+        const ny = (e.clientY - vh / 2) / (vh / 2); // -1 to 1
+        const dx = nx - currentScroll.current.x;
+        const dy = ny - currentScroll.current.y;
+        currentScroll.current.x += dx * (lerpFactor || 0.1);
+        currentScroll.current.y += dy * (lerpFactor || 0.1);
+        if (ref?.current) {
+            const translateX = x ? currentScroll.current.x * (multiplier || xMultiplier || 20) : 0;
+            const translateY = y ? currentScroll.current.y * (multiplier || yMultiplier || 20) : 0;
+            animateCSSVar(ref, '--mouse-x', translateX);
+            animateCSSVar(ref, '--mouse-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)`}`;
+        if (typeof window !== 'undefined') {
+            if (fx && fx.scroll) {
+                if (ref) {
+                    ref.current.style.willChange = `transform`;
+                    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', handleScrollParallax, { passive: true });
+                return () => {
+                    window.removeEventListener('scroll', handleScrollParallax);
+                };
+            }
+            if (fx && fx.mouse) {
+                if (ref) {
+                    ref.current.style.willChange = `transform`;
+                    ref.current.style.transform = `translate3d(0px, var(--mouse-y), 0)`;
+                    ref.current.style.transition = `transform 0.1s ${fx.curve ? getAnimationCurve(fx.curve) : `var(--spring)`}`;
+                }
+                window.document.addEventListener('mousemove', handleMouseParallax, { passive: true });
+                return () => {
+                    window.removeEventListener('mousemove', handleMouseParallax);
+                };
             }
-            window.addEventListener('scroll', handleScroll, { passive: true });
-            return () => {
-                window.removeEventListener('scroll', handleScroll);
-            };
         }
     }, [ref]);
     return {

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

@@ -1,6 +1,6 @@
 import { dynamicObject } from ".";
 import { SKELETON, TRANSITION_CURVES, TRANSITIONS } from "./enums";
-export interface scrollEffectProps {
+export interface parallaxEffectProps {
     lerpFactor?: number;
     x?: number;
     y?: number;
@@ -34,7 +34,8 @@ export interface animationProps {
     delay?: number;
     /** Easing curve applied to the animation, as a string or {@link TRANSITION_CURVES} */
     curve?: string | TRANSITION_CURVES;
-    scroll?: scrollEffectProps;
+    scroll?: parallaxEffectProps;
+    mouse?: parallaxEffectProps;
 }
 /**
  * `Skeleton` defines properties for a skeleton loader, used to indicate