@zuzjs/ui 0.8.8 → 0.9.0

package/dist/esm/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/esm/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/esm/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/esm/funs/css.js

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/hooks/useScrollPhysics.d.ts

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

package/dist/esm/hooks/useScrollPhysics.js

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

package/dist/esm/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/esm/types/enums.d.ts

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

package/dist/esm/types/enums.js

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

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

@@ -48,6 +48,7 @@ export interface ZuzProps {
     animate?: animationProps;
     /** Animation configuration using {@link animationProps} */
     fx?: animationProps;
+    timeline?: animationProps[];
     transition?: TRANSITIONS;
     /** Skeleton placeholder configuration using {@link Skeleton} */
     skeleton?: Skeleton;
@@ -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/esm/types/interfaces.d.ts

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