@zuzjs/ui 0.8.8 → 0.9.0

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

@@ -1,9 +1,11 @@
 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 innerRef = useRef(null);
+    const targetRef = useMemo(() => ref && typeof ref !== "function" && ref.current ? ref : innerRef, [ref]);
+    const { style: _style, className, rest } = useBase(pops, targetRef);
     // const handleInternalClick = (e: React.MouseEvent<HTMLDivElement>) => {
     //     // if ( withEditor && isBrowser ) {
     //     //     // window.dispatchEvent(new CustomEvent(`ZUZ_COMP_SELECTED`, {
@@ -15,7 +17,7 @@ const Box = forwardRef((props, ref) => {
     //     //     // }))
     //     // }
     // }
-    return _jsx("div", { ref: ref, 
+    return _jsx("div", { ref: ref || innerRef, 
         // onClick={handleInternalClick}
         className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
             ..._style,

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

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { withPost } from "@zuzjs/core";
 import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { addPropsToChildren, isEmail, isEmpty } from "../../funs";
-import { useBase } from "../../hooks";
-import { FORMVALIDATION, SHEET } from "../../types/enums";
+import { useBase, useToast } from "../../hooks";
+import { FORMVALIDATION } from "../../types/enums";
 import Box from "../Box";
 import Cover from "../Cover";
 import Sheet, { isSheetHandler } from "../Sheet";
@@ -24,6 +24,7 @@ const Form = forwardRef((props, ref) => {
     const innerRef = useRef(null);
     const sheet = useRef(null);
     const submit = useRef(null);
+    const toast = useToast();
     /**
      * Utility function to select multiple DOM elements within the form based on a CSS query.
      * @param query - CSS selector to match elements inside the form.
@@ -91,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;
@@ -188,7 +194,8 @@ const Form = forwardRef((props, ref) => {
     const _onSubmit = useCallback(() => {
         const { error, errorMsg, payload } = _buildFormData();
         if (error) {
-            sheet.current.error(errorMsg);
+            toast.error(errorMsg);
+            // sheet.current!.error(errorMsg)
         }
         else if (action) {
             // If `action` is defined, submit the form data to the specified endpoint
@@ -199,7 +206,8 @@ const Form = forwardRef((props, ref) => {
                 }
                 else
                     setLoading(true);
-                sheet.current.hide();
+                // sheet.current!.hide()
+                toast.clearAll();
                 // submit.current?.setState(ButtonState.Loading)
                 withPost(action, { ...payload, ...(withData || {}) })
                     .then(_resp => {
@@ -219,8 +227,10 @@ const Form = forwardRef((props, ref) => {
                     if (onSuccess)
                         onSuccess(resp);
                     else {
-                        sheet.current.hide();
-                        sheet.current.success(resp.message || `Redirecting..`);
+                        toast.clearAll();
+                        // sheet.current!.hide()
+                        // sheet.current!.success(resp.message || `Redirecting..`)
+                        toast.success(resp.message || `Redirecting...`);
                     }
                 })
                     .catch(err => {
@@ -234,7 +244,8 @@ const Form = forwardRef((props, ref) => {
                     if (onError)
                         onError(err);
                     else
-                        sheet.current.show(err.message || `We cannot process your request at this time.`, 4, SHEET.Error);
+                        toast.error(err.message || `We cannot process your request at this time.`);
+                    // sheet.current!.show(err.message || `We cannot process your request at this time.`, 4, SHEET.Error)
                 });
             });
         }
@@ -261,14 +272,27 @@ const Form = forwardRef((props, ref) => {
         setLoading(mod) {
             if (mod) {
                 sheet.current.hide();
+                try {
+                    toast.clearAll();
+                }
+                catch (e) { }
             }
             setLoading(mod);
         },
         showError(errorMsg) {
-            sheet.current.error(errorMsg, 4);
+            if (typeof errorMsg == `string`) {
+                toast.error(errorMsg);
+            }
+            else {
+                sheet.current.error(errorMsg, 4);
+            }
         },
         hideError() {
             sheet.current.hide();
+            try {
+                toast.clearAll();
+            }
+            catch (e) { }
         },
         init() {
             _init();

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

@@ -3,5 +3,6 @@ import { ProgressHandler } from "./types";
 declare const ProgressBar: import("react").ForwardRefExoticComponent<BoxProps & {
     progress?: number;
     type?: import("../..").PROGRESS;
+    animated?: boolean;
 } & import("react").RefAttributes<ProgressHandler>>;
 export default ProgressBar;

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

@@ -4,20 +4,24 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { useBase } from "../../hooks";
 import Box from "../Box";
 const ProgressBar = forwardRef((props, ref) => {
-    const { progress, type, ...pops } = props;
+    const { progress, type, animated, ...pops } = props;
     const bar = useRef(null);
     useImperativeHandle(ref, () => ({
-        setWidth: (p) => {
+        setProgress: (p) => {
             bar.current.style.width = `${p * 100}%`;
         }
     }), []);
     useEffect(() => {
         if (progress && bar.current) {
-            bar.current.style.width = `${progress * 100}%`;
+            if (animated) {
+                setTimeout(() => bar.current.style.width = `${progress * 100}%`, 500);
+            }
+            else
+                bar.current.style.width = `${progress * 100}%`;
         }
     }, [progress, bar.current]);
     const { className, style, rest } = useBase(pops);
-    return _jsx(Box, { className: `--progress flex rel ${className}`.trim(), style: style, ...rest, children: _jsx(Box, { ref: bar, className: `--bar rel` }) });
+    return _jsx(Box, { className: `--progress ${animated ? `--animated` : ``} flex rel ${className}`.trim(), style: style, ...rest, children: _jsx(Box, { ref: bar, className: `--bar rel` }) });
 });
 ProgressBar.displayName = `Zuz.ProgressBar`;
 export default ProgressBar;

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

@@ -3,7 +3,8 @@ import { BoxProps } from "../Box";
 export type ProgressBarProps = BoxProps & {
     progress?: number;
     type?: PROGRESS;
+    animated?: boolean;
 };
 export interface ProgressHandler {
-    setWidth?: (w: number) => void;
+    setProgress?: (p: 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/comps/TextWheel/index.js

@@ -34,7 +34,7 @@ const TextWheel = forwardRef((props, ref) => {
         // console.log(value)
         _setValue(value || 0);
     }, [value]);
-    return _jsxs(Box, { className: `--text-wheel flex aic jcc rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
+    return _jsxs(Box, { className: `--text-wheel flex aic rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
                 if (isNaN(parseInt(char, 10))) {
                     return _jsx(Span, { className: "--wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
                 }

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

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { dynamic } from "../..";
 import { TRANSITION_CURVES } from "../../types/enums";
 export declare enum ToastType {
@@ -12,8 +13,8 @@ export interface ToastData {
     id: number;
     type: ToastType;
     icon?: string;
-    title?: string;
-    message?: string;
+    title?: string | ReactNode;
+    message?: string | ReactNode;
     duration?: number;
     onClick?: () => void;
 }

package/dist/cjs/funs/css.js

@@ -925,7 +925,6 @@ export const buildWithStyles = (source) => {
         if (_filter.length > 0) {
             _.filter = _filter.join(` `);
         }
-        // console.log(_, _transform)
     }
     return _;
 };

package/dist/cjs/funs/stylesheet.js

@@ -453,7 +453,11 @@ export const cssFilterKeys = [
 ];
 export const cssWithKeys = {
     w: `width`,
+    minW: `minWidth`,
+    maxW: `maxWidth`,
     h: `height`,
+    minH: `minHeight`,
+    maxH: `maxHeight`,
     x: `translateX`,
     y: `translateY`,
     z: `translateZ`,

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,6 +1,8 @@
+import { animateCSSVar } from "@zuzjs/core";
+import { useEffect, useRef } from "react";
 import { cleanProps, css } from "../funs";
 import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
-import { cssFilterKeys, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
+import { cssFilterKeys, cssProps, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
 let useDrag = null;
 const buildSkeletonStyle = (s) => {
     const makeValue = (v, unit = `px`) => {
@@ -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` }
@@ -76,7 +63,7 @@ const useBase = (props) => {
             if (prop in cssWithKeys) {
                 _subTrans = cssTransformKeys.includes(cssWithKeys[prop].toString()) ? `transform`
                     : cssFilterKeys.includes(cssWithKeys[prop].toString()) ? `filter`
-                        : _subTrans;
+                        : _subTrans in cssProps ? cssProps[_subTrans] : _subTrans; //(cssWithKeys[prop] || _subTrans).toString() // _subTrans
             }
             else if (cssTransformKeys.includes(prop)) {
                 _subTrans = `transform`;
@@ -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/hooks/useSlider.d.ts

@@ -2,6 +2,6 @@ declare const useSlider: () => {
     push: (key: string) => void;
     goBack: () => void;
     prevKey: string | null;
-    direction: "right" | "left";
+    direction: "left" | "right";
 };
 export default useSlider;

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;
@@ -67,7 +68,11 @@ export type FormInputs = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElem
 export type cssShortKey = keyof cssShortKeys;
 export type cssShortKeys = {
     w: string | number;
+    minW: string | number;
+    maxW: string | number;
     h: string | number;
+    minH: string | number;
+    maxH: string | number;
     x: string | number;
     y: string | number;
     z: string | number;

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