@zuzjs/ui 0.8.9 → 0.9.1

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

@@ -1,23 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useMemo, useRef } from "react";
 import { useBase } from "../../hooks";
 const Box = forwardRef((props, ref) => {
     const { style, withEditor, ...pops } = props;
-    const { style: _style, className, rest } = useBase(pops);
-    // const handleInternalClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    //     // if ( withEditor && isBrowser ) {
-    //     //     // window.dispatchEvent(new CustomEvent(`ZUZ_COMP_SELECTED`, {
-    //     //     //     detail: {
-    //     //     //         compName: 'Box',
-    //     //     //         target: e.target,
-    //     //     //         props
-    //     //     //     }
-    //     //     // }))
-    //     // }
-    // }
-    return _jsx("div", { ref: ref, 
-        // onClick={handleInternalClick}
-        className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
+    const innerRef = useRef(null);
+    const targetRef = useMemo(() => ref && typeof ref !== "function" && ref.current ? ref : innerRef, [ref]);
+    const { style: _style, className, rest } = useBase(pops, targetRef);
+    return _jsx("div", { ref: ref || innerRef, className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
             ..._style,
             ...(style || {})
         }, ...rest });

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

@@ -92,8 +92,13 @@ const Form = forwardRef((props, ref) => {
                 case FORMVALIDATION.Email:
                     return isEmail(el.value);
                 case FORMVALIDATION.Uri:
-                    console.log(`Add FORMVALIDATION.Uri`);
-                    return false;
+                    try {
+                        new URL(el.value);
+                        return true;
+                    }
+                    catch (e) {
+                        return false;
+                    }
                 case FORMVALIDATION.Password:
                     console.log(`Add FORMVALIDATION.Password`);
                     return false;

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

@@ -23,7 +23,7 @@ const Password = forwardRef((props, ref) => {
         onChange && onChange(ev);
     }, 100);
     useEffect(() => { }, []);
-    return _jsxs(Box, { as: `w:100% flex cols`, children: [_jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, onChange: debounce, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] }), strenthMeter && _jsxs(Box, { as: `flex aic --password-meter --pb-score-${strenth.score}`, children: [_jsxs(Box, { as: `--password-bars flex aic`, children: [_jsx(Box, { as: `--pbar ${strenth.score >= 1 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 2 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 3 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 4 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 5 ? `--pb-on` : ``}`.trim() })] }), _jsx(Text, { as: `--password-meter-label`, "aria-hidden": true, children: strenth.result })] })] });
+    return _jsxs(Box, { as: `w:100% flex cols`, children: [_jsxs(Box, { style: style, className: `--password flex aic rel`, children: [_jsx(Input, { ref: ref, type: visible ? 'text' : 'password', className: className, onChange: debounce, ...rest }), _jsx(Button, { tabIndex: -1, onClick: () => setVisible(prev => !prev), className: `--toggle flex aic jcc abs`, children: visible ? SVGIcons.eye : SVGIcons.eyeSlash })] }), strenthMeter && _jsxs(Box, { as: `flex aic --password-meter --pb-score-${strenth.score}`, style: style, children: [_jsxs(Box, { as: `--password-bars flex aic`, children: [_jsx(Box, { as: `--pbar ${strenth.score >= 1 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 2 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 3 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 4 ? `--pb-on` : ``}`.trim() }), _jsx(Box, { as: `--pbar ${strenth.score >= 5 ? `--pb-on` : ``}`.trim() })] }), _jsx(Text, { as: `--password-meter-label`, "aria-hidden": true, children: strenth.result })] })] });
 });
 Password.displayName = `Zuz.Password`;
 export default Password;

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

@@ -12,7 +12,6 @@ const ProgressBar = forwardRef((props, ref) => {
         }
     }), []);
     useEffect(() => {
-        console.log(`progressChanged`, progress);
         if (progress && bar.current) {
             if (animated) {
                 setTimeout(() => bar.current.style.width = `${progress * 100}%`, 500);

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

@@ -1,6 +1,6 @@
 import { Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
-import { Segment } from "./types";
+import { Segment, SegmentController } from "./types";
 /**
  * `SelectTabs` component is a segmented control that allows switching between segments.
  *
@@ -25,5 +25,5 @@ declare const Segmented: import("react").ForwardRefExoticComponent<BoxProps & {
     selected?: number;
     onSwitch?: (segment: Segment) => void;
     items: Segment[];
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<SegmentController>>;
 export default Segmented;

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useBase } from "../../hooks";
 import { Variant } from "../../types/enums";
 import Box from "../Box";
@@ -26,6 +26,8 @@ import SegmentItem from "./item";
 const Segmented = forwardRef((props, ref) => {
     const { animate, fx, items, selected, size, variant, onSwitch, ...pops } = props;
     const [_selected, setSelected] = useState(selected || 0);
+    const hasMounted = useRef(false);
+    const prevSelectedRef = useRef(_selected);
     const { className, style, rest } = useBase(pops);
     const _tab = useRef(null);
     const _segmented = useRef(null);
@@ -40,8 +42,9 @@ const Segmented = forwardRef((props, ref) => {
         // console.log(selected, _selected, index, mounted)
         if (force || (_selected != index && _selected != -2)) {
             setSelected(index);
-            if (onSwitch)
-                onSwitch(meta);
+            prevSelectedRef.current = _selected;
+            if (hasMounted.current)
+                onSwitch?.(meta);
         }
         if (_tab.current) {
             const _sp = _segmented.current?.getBoundingClientRect();
@@ -49,11 +52,22 @@ const Segmented = forwardRef((props, ref) => {
             _tab.current.style.setProperty(`--x`, `${_sp ? x - _sp.left : x}px`);
         }
     };
-    useEffect(() => {
-        if (selected !== undefined && selected != _selected) {
-            setSelected(selected);
+    useImperativeHandle(ref, () => ({
+        setSelected: (index) => {
+            if (typeof index === `number` && index != _selected) {
+                setSelected(index);
+            }
         }
-    }, [selected, _selected]);
+    }), [_selected]);
+    // useEffect(() => {
+    //     if (typeof selected === `number` && selected != _selected) {
+    //         prevSelectedRef.current = _selected;
+    //         setSelected(selected);
+    //     }
+    // }, [selected, _selected]);
+    useEffect(() => {
+        hasMounted.current = true;
+    }, []);
     return _jsxs(Box, { ref: _segmented, "data-selected": _selected, className: `${className} --segmented --${variant || Variant.Small} flex aic rel`, style: style, ...rest, children: [_jsx(Box, { ref: _tab, className: `--segment-tab abs` }), items.map((item, i) => _jsx(SegmentItem, { onSelect: handleSelect, selected: _selected == i, meta: {
                     ...item,
                     index: i

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

@@ -36,3 +36,6 @@ export type SegmentItemProps = {
     selected: boolean;
     onSelect: (index: number, width: number, x: number, segment: Segment, force: boolean) => void;
 };
+export interface SegmentController {
+    setSelected: (index: number) => void;
+}

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

@@ -1,6 +1,6 @@
 import { JSX, Ref } from "react";
-import type { TableProps } from "./types";
+import type { TableController, TableProps } from "./types";
 declare const ForwardedTable: <T>(props: TableProps<T> & {
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<TableController>;
 }) => JSX.Element;
 export default ForwardedTable;

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { PubSub, SPINNER, Spinner, Text, TRANSITION_CURVES, TRANSITIONS, uuid } from "../..";
 import { useBase } from "../../hooks";
 import Box from "../Box";
@@ -63,7 +63,7 @@ import TRow from "./row";
  * ```
  */
 const Table = (props, ref) => {
-    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, paginationHash, showPaginationOnZeroPageCount, animateRows, header, rowClassName, selectableRows, hoverable, sortBy, loading, loadingRowCount, loadingMessage, spinner, onSort, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
+    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, paginationHash, showPaginationOnZeroPageCount, animateRows, header, rowClassName, selectableRows, hoverable, sortBy, loading: _loading, loadingRowCount, loadingMessage, spinner, emptyMessage, onSort, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
     const _pagination = useRef(null);
     const _schemaParsed = useMemo(() => schema.reduce((prev, c) => {
         prev[c.id] = {
@@ -85,22 +85,43 @@ const Table = (props, ref) => {
     const pubsub = useMemo(() => new PubSub(), []);
     const rowKeys = useRef(rows.map(() => uuid()));
     const [_sortBy, setSortBy] = useState(sortBy || null);
-    // const placeholderRows = useMemo(() => {
-    // }, [loading, loadingRowCount])
+    // const [ _loading, _setLoading ] = useState(loading || false)
+    // const _loading = useRef<boolean>(loading || false)
+    const [_loadingMessage, _setLoadingMessage] = useState(loadingMessage || `loading`);
+    const isEmpty = useMemo(() => !_loading && rows && rows.length == 0, [_loading, rows]);
+    const renderEmpty = useCallback(() => {
+        if (emptyMessage) {
+            if (typeof emptyMessage == `function`) {
+                const Empty = emptyMessage;
+                return _jsx(Empty, {});
+            }
+            return emptyMessage;
+        }
+        return _jsx(Text, { as: `tac s:18 mt:75`, children: "No Record Found" });
+    }, [_loading, rows]);
     useEffect(() => {
         rowKeys.current = rows.map(() => uuid()); // Update only when rows change
     }, [rows]);
+    // useEffect(() => {
+    //     if ( loading != undefined && loading != _loading ) _setLoading(loading)
+    // }, [loading])
     const handleSort = (col, dir) => {
         setSortBy(col);
         onSort?.(col, dir);
     };
     const possiblePage = (rowCount || (rows ? rows.length : 0)) / (rowsPerPage || 10);
     const _paginated = useMemo(() => (showPaginationOnZeroPageCount || (possiblePage > 1)) ? _jsx(Pagination, { hash: paginationHash, ref: _pagination, renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, startPage: currentPage, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) : null, [currentPage, rowCount]);
-    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols rel ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, loading: true, styles: _schemaParsed }), loading && _jsxs(Box, { as: `abs center-x flex aic --table-spinner`, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), loadingMessage && _jsx(Text, { as: `--table-loading-message`, children: loadingMessage })] }), loading && Array(loadingRowCount || 5).fill({}).map((row, index) => _jsx(TRow, { tableRef: _tableRef, index: index, pubsub: pubsub, schema: schema, styles: _schemaParsed, loading: true, animate: animateRows }, `--trow-loading-${index}-${schema[0].id}`)), !loading && rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, loading: false, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys.current[index] || index}-${schema[0].id}`)), _jsx(Box, { "aria-hidden": !pagination || !_paginated, ...(animateRows ? { fx: {
+    useImperativeHandle(ref, () => ({
+        setLoading(mod) {
+            // _setLoading(mod)
+            // _loading.current = mod
+        }
+    }));
+    return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols rel ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, loading: true, styles: _schemaParsed }), _loading && _jsxs(Box, { as: `abs center-x flex aic --table-spinner`, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), _loadingMessage && _jsx(Text, { as: `--table-loading-message`, children: _loadingMessage })] }), _loading && Array(loadingRowCount || 5).fill({}).map((row, index) => _jsx(TRow, { tableRef: _tableRef, index: index, pubsub: pubsub, schema: schema, styles: _schemaParsed, loading: true, animate: animateRows }, `--trow-loading-${index}-${schema[0].id}`)), !_loading && rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, loading: false, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys.current[index] || index}-${schema[0].id}`)), isEmpty && renderEmpty(), _jsx(Box, { "aria-hidden": !pagination || !_paginated, ...(animateRows ? { fx: {
                         transition: TRANSITIONS.SlideInBottom,
                         curve: TRANSITION_CURVES.EaseInOut,
                         delay: .02 * (rows.length + 1),
-                        when: !loading && rows && pagination && _paginated != null
+                        when: !_loading && rows && pagination && _paginated != null
                     } } : {}), as: `--row flex aic --row-footer`, children: pagination && _paginated ? _paginated : null })] });
 };
 Table.displayName = `Zuz.Table`;

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

@@ -1,8 +1,11 @@
-import { ReactNode, RefObject } from "react";
+import { FC, ReactNode, RefObject } from "react";
 import { PubSub, SPINNER } from "../..";
 import { dynamicObject } from "../../types";
 import { BoxProps } from "../Box";
 import { PaginationCallback } from "../Pagination/types";
+export interface TableController {
+    setLoading: (mod: boolean) => void;
+}
 /**
  * Callback function for row selection.
  *
@@ -140,6 +143,7 @@ export type TableProps<T> = BoxProps & {
     loadingRowCount?: number;
     loadingMessage?: string;
     spinner?: SPINNER;
+    emptyMessage?: ReactNode | FC;
     onRowSelectToggle?: RowSelectCallback<T>;
     onRowContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: T) => void;
     onPageChange?: PaginationCallback;

package/dist/cjs/funs/css.js

@@ -899,12 +899,6 @@ export const buildWithStyles = (source) => {
         for (const _prop in source) {
             let prop = _prop;
             if (prop in cssWithKeys) {
-                // console.log(
-                //     prop,
-                //     cssTransformKeys.includes(cssWithKeys[prop].toString()),
-                //     cssFilterKeys.includes(cssWithKeys[prop].toString()),
-                //     cssWithKeys[prop]
-                // )
                 if (cssTransformKeys.includes(cssWithKeys[prop].toString())) {
                     _transform.push(`${cssWithKeys[prop]}(${source[prop]}${_css.makeUnit(prop, source[prop])})`);
                 }
@@ -931,7 +925,6 @@ export const buildWithStyles = (source) => {
         if (_filter.length > 0) {
             _.filter = _filter.join(` `);
         }
-        // console.log(_, _transform)
     }
     return _;
 };

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

@@ -22,6 +22,7 @@ export { default as useImage } from './useImage';
 export { default as useImageCropper } from './useImageCropper';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
+export { default as useScrollPhysics } from './useScrollPhysics';
 export { default as useSheet } from './useSheet';
 export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';

package/dist/cjs/hooks/index.js

@@ -23,6 +23,7 @@ export { default as useImage } from './useImage';
 export { default as useImageCropper } from './useImageCropper';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
+export { default as useScrollPhysics } from './useScrollPhysics';
 export { default as useSheet } from './useSheet';
 export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';

package/dist/cjs/hooks/useBase.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithRef, CSSProperties, JSX } from "react";
+import { ComponentPropsWithRef, CSSProperties, JSX, RefObject } from "react";
 import { Props } from "../types";
-declare const useBase: <T extends keyof JSX.IntrinsicElements>(props: Props<T>) => {
+declare const useBase: <T extends keyof JSX.IntrinsicElements>(props: Props<T>, ref?: RefObject<HTMLElement>) => {
     style: CSSProperties;
     className: string;
     rest: ComponentPropsWithRef<T>;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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