@zuzjs/ui 0.9.3 → 0.9.5

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

@@ -1,5 +1,5 @@
 declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     items: import("./types").CrumbItem[];
     maxItems?: number;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default Crumb;

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

@@ -41,10 +41,14 @@ const Drawer = forwardRef((props, ref) => {
         open(child) {
             if (child)
                 setContent(child);
+            if (!window.document.body.classList.contains(`--no-scroll`))
+                window.document.body.classList.add(`--no-scroll`);
             setVisible(true);
         },
         close() {
             onClose?.();
+            if (window.document.body.classList.contains(`--no-scroll`))
+                window.document.body.classList.remove(`--no-scroll`);
             setVisible(false);
         }
     }));

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) {
@@ -296,6 +296,9 @@ const Form = forwardRef((props, ref) => {
         },
         init() {
             _init();
+        },
+        submit() {
+            _onSubmit();
         }
     }));
     useEffect(_init, []);

package/dist/cjs/comps/Form/types.d.ts

@@ -40,4 +40,5 @@ export interface FormHandler {
     hideError: () => void;
     /** Resets the form to its initial state */
     init: () => void;
+    submit: () => void;
 }

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/List/index.d.ts

@@ -6,5 +6,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     direction?: "cols" | "rows";
     seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default List;

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

@@ -4,9 +4,8 @@ import { useBase, useScrollbar } from "../../hooks";
 import Box from "../Box";
 const ScrollView = forwardRef((props, ref) => {
     const { speed, style: _style, ...pops } = props;
-    const { rootRef, containerRef, thumbY, thumbX, onScrollY, onScrollX } = useScrollbar();
+    const { rootRef, containerRef, thumbY, thumbX, onScrollY, onScrollX } = useScrollbar(speed || 1);
     const { style, className, rest } = useBase(pops);
-    // useEffect(() => { }, [])
     return _jsxs(Box, { ref: rootRef, className: className.trim(), as: `--scrollview rel`, children: [_jsx(Box, { as: `--scroll-content`, ref: containerRef, style: _style || {}, children: rest.children }), _jsx(Box, { as: `--scroll-track --track-y --abs`, children: _jsx(Box, { as: `--scroll-thumb --abs`, ref: thumbY, onMouseDown: onScrollY }) }), _jsx(Box, { as: `--scroll-track --track-x --abs`, children: _jsx(Box, { as: `--scroll-thumb --abs`, ref: thumbX, onMouseDown: onScrollX }) })] });
 });
 ScrollView.displayName = `Zuz.ScrollView`;

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/hooks/useScrollbar.d.ts

@@ -1,7 +1,7 @@
 export interface ScrollBreakpoint {
     [key: number]: () => void;
 }
-declare const useScrollbar: (breakpoints?: ScrollBreakpoint) => {
+declare const useScrollbar: (speed: number, breakpoints?: ScrollBreakpoint) => {
     rootRef: import("react").RefObject<HTMLDivElement | null>;
     containerRef: import("react").RefObject<HTMLDivElement | null>;
     thumbY: import("react").RefObject<HTMLDivElement | null>;

package/dist/cjs/hooks/useScrollbar.js

@@ -1,11 +1,12 @@
 "use client";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useMutationObserver } from "..";
-const useScrollbar = (breakpoints = {}) => {
+const useScrollbar = (speed, breakpoints = {}) => {
     const rootRef = useRef(null);
     const containerRef = useRef(null);
     const thumbY = useRef(null);
     const thumbX = useRef(null);
+    const SCROLL_SPEED = useMemo(() => speed ?? 1, [speed]); // default to 1x multiplier
     const isDraggingY = useRef(false);
     const isDraggingX = useRef(false);
     const dragStartX = useRef(0);
@@ -52,7 +53,13 @@ const useScrollbar = (breakpoints = {}) => {
         });
     };
     const handleScroll = useCallback(() => {
-        if (!containerRef.current)
+        if (!containerRef.current
+        // || 
+        // (
+        //     typeof window !== `undefined` &&
+        //     window.document.body.classList.contains(`--no-scroll`)
+        // )
+        )
             return;
         const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
         const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
@@ -122,13 +129,13 @@ const useScrollbar = (breakpoints = {}) => {
                 const maxScrollY = scrollHeight - clientHeight;
                 let newScrollTop = scrollTop + e.deltaY;
                 newScrollTop = Math.max(0, Math.min(newScrollTop, maxScrollY));
-                containerRef.current.scrollTop = newScrollTop;
+                containerRef.current.scrollTop = newScrollTop * SCROLL_SPEED;
             }
             if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
                 const maxScrollX = scrollWidth - clientWidth;
                 let newScrollLeft = scrollLeft + e.deltaX;
                 newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollX));
-                containerRef.current.scrollLeft = newScrollLeft;
+                containerRef.current.scrollLeft = newScrollLeft * SCROLL_SPEED;
             }
             const scrollPercentY = (containerRef.current.scrollTop / (containerRef.current.scrollHeight - clientHeight)) * 100;
             const scrollPercentX = (containerRef.current.scrollLeft / (containerRef.current.scrollWidth - clientWidth)) * 100;

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