@zuzjs/ui 0.9.4 → 0.9.6

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

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { useResizeObserver } from "../..";
+import useBase from "../../hooks/useBase";
+import useLineChart from "../../hooks/useLineChart";
+import Box from "../Box";
+import { CHART } from "./types";
+const Chart = forwardRef((props, ref) => {
+    const { data, width, height, lineColor, strokeWidth = 2, gradientStartColor, gradientEndColor, animated, animDuration = 2, animDelay = 0, padding = 0, type, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const innerRef = useRef(null);
+    // State to store the actual dimensions of the container
+    const observedDimensions = useResizeObserver(innerRef.current?.parentElement || innerRef);
+    const chartWidth = typeof width === 'number' ? width : observedDimensions.width;
+    const chartHeight = typeof height === 'number' ? height : observedDimensions.height;
+    const dimensionsForChartHook = {
+        width: chartWidth,
+        height: chartHeight
+    };
+    // Generate a unique ID for the gradient to avoid conflicts if multiple charts are on the page
+    const gradientId = useId(); //`chartGradient-${Math.random().toString(36).substring(2, 9)}`;
+    // Use the custom hook to get the SVG path data and area path data
+    const { pathD, areaPathD } = useLineChart(data, dimensionsForChartHook, (padding + (strokeWidth || 2)));
+    // Refs for the path elements to get their total length for animation
+    const linePathRef = useRef(null);
+    const areaPathRef = useRef(null);
+    // State to store the calculated lengths of the paths
+    const [linePathLength, setLinePathLength] = useState(0);
+    const [areaPathLength, setAreaPathLength] = useState(0);
+    useEffect(() => {
+        if (animated) {
+            if (linePathRef.current) {
+                // Get the total length of the line path for stroke-dasharray animation
+                setLinePathLength(linePathRef.current.getTotalLength());
+            }
+            if (areaPathRef.current) {
+                // Get the total length of the area path for stroke-dasharray animation
+                setAreaPathLength(areaPathRef.current.getTotalLength());
+            }
+        }
+    }, [animated, pathD, areaPathD, chartWidth, chartHeight]);
+    return _jsx(Box, { ref: innerRef, as: `--chart --${type || CHART.Line}-chart ${className}`.trim(), style: {
+            ...style,
+            width,
+            height
+        }, ...rest, children: chartWidth > 0 && chartHeight > 0 && _jsxs("svg", { viewBox: `0 0 ${chartWidth} ${chartHeight}`, preserveAspectRatio: "xMidYMid meet" // Ensures the SVG scales nicely
+            , children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: gradientStartColor }), _jsx("stop", { offset: "100%", stopColor: gradientEndColor })] }) }), _jsx("path", { ref: areaPathRef, d: areaPathD, fill: `url(#${gradientId})`, stroke: "none" // No stroke for the area
+                    , 
+                    // Apply animation properties if 'animated' is true
+                    style: animated ? {
+                        strokeDasharray: areaPathLength,
+                        strokeDashoffset: areaPathLength,
+                    } : {}, children: animated && (_jsx("animate", { attributeName: "stroke-dashoffset", from: areaPathLength, to: "0", dur: `${animDuration || 2}s`, begin: `${animDelay || 0}s`, fill: "freeze" })) }), _jsx("path", { ref: linePathRef, d: pathD, fill: "none" // No fill for the line
+                    , stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: "round" // Rounded line caps
+                    , strokeLinejoin: "round" // Rounded line joins
+                    , 
+                    // Apply animation properties if 'animated' is true
+                    style: animated ? {
+                        strokeDasharray: linePathLength,
+                        strokeDashoffset: linePathLength,
+                    } : {}, children: animated && (_jsx("animate", { attributeName: "stroke-dashoffset", from: linePathLength, to: "0", dur: `${animDuration || 2}s`, begin: `${animDelay || 0}s`, fill: "freeze" // Keep the final state
+                     })) })] }) });
+});
+Chart.displayName = `Zuz.Chart`;
+export default Chart;

package/dist/esm/comps/Chart/types.d.ts

@@ -0,0 +1,10 @@
+import { LineChartProps } from "../../hooks/useLineChart";
+import { BoxProps } from "../Box";
+export declare enum CHART {
+    Line = "line"
+}
+export type ChartProps = BoxProps & LineChartProps & {
+    type?: CHART;
+    animDuration?: number;
+    animDelay?: number;
+};

package/dist/esm/comps/Chart/types.js

@@ -0,0 +1,4 @@
+export var CHART;
+(function (CHART) {
+    CHART["Line"] = "line";
+})(CHART || (CHART = {}));

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { withPost } from "@zuzjs/core";
+import { _, withPost } from "@zuzjs/core";
 import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { addPropsToChildren, isEmail, isEmpty } from "../../funs";
+import { addPropsToChildren, isEmpty } from "../../funs";
 import { useBase, useToast } from "../../hooks";
 import { FORMVALIDATION } from "../../types/enums";
 import Box from "../Box";
@@ -89,8 +89,12 @@ const Form = forwardRef((props, ref) => {
                 }
             }
             switch (_with.toUpperCase()) {
+                case FORMVALIDATION.IPV4:
+                    return _(el.value).isIPv4();
+                case FORMVALIDATION.IPV6:
+                    return _(el.value).isIPv6();
                 case FORMVALIDATION.Email:
-                    return isEmail(el.value);
+                    return _(el.value).isEmail();
                 case FORMVALIDATION.Uri:
                     try {
                         new URL(el.value);
@@ -267,7 +271,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/Password/index.d.ts

@@ -2,7 +2,7 @@ import { InputProps } from '../Input';
 export type PasswordProps = Omit<InputProps, `type` | `numeric`> & {
     strenthMeter?: boolean;
 };
-declare const Password: import("react").ForwardRefExoticComponent<Omit<InputProps, "type" | "numeric"> & {
+declare const Password: import("react").ForwardRefExoticComponent<Omit<InputProps, "numeric" | "type"> & {
     strenthMeter?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default Password;

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

@@ -8,5 +8,6 @@ declare const Select: import("react").ForwardRefExoticComponent<Omit<import(".."
     search?: boolean;
     onChange?: (v: Option) => void;
     searchPlaceholder?: string;
+    maxHeight?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default Select;

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

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
-import { useBase } from "../../hooks";
+import { useBase, usePosition } from "../../hooks";
+import { Position } from "../../types/enums";
 import Box from "../Box";
 import Button from "../Button";
 import Input from "../Input";
@@ -9,7 +10,7 @@ import SVGIcons from "../svgicons";
 import Text from "../Text";
 import OptionItem from "./optionItem";
 const Select = forwardRef((props, ref) => {
-    const { selected, options, label, name, variant, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
+    const { selected, options, label, name, variant, search: withSearch, searchPlaceholder, maxHeight, onChange, ...pops } = props;
     const [value, setValue] = useState(selected ?
         typeof selected === `string` ? options.find(fo => fo.value === selected) : selected
         : options[0]);
@@ -17,8 +18,10 @@ const Select = forwardRef((props, ref) => {
     const [query, setQuery] = useState(null);
     const _ref = useRef(null);
     const _search = useRef(null);
+    const _pop = useRef(null);
     const _did = useId();
     const _id = useMemo(() => name || _did, []);
+    const { reposition } = usePosition(_pop, { direction: Position.Bottom, offset: 2 });
     const { className, style, rest } = useBase(pops);
     const updateValue = (o) => {
         setValue(o);
@@ -28,6 +31,7 @@ const Select = forwardRef((props, ref) => {
         document.body.addEventListener(`click`, (e) => {
             setChoosing(false);
         });
+        window.dispatchEvent(new Event('resize'));
     }, []);
     useEffect(() => {
         if (choosing) {
@@ -39,10 +43,11 @@ const Select = forwardRef((props, ref) => {
             }
             setQuery(null);
         }
+        reposition();
     }, [choosing]);
-    return _jsxs(Box, { className: `--select ${variant ? `--${variant}` : ``} ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
-                    pointerEvents: choosing ? `auto` : `none`,
-                }, animate: {
+    return _jsxs(Box, { className: `--select ${variant ? `--${variant}` : ``} ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, "aria-hidden": !choosing, style: {
+                    maxHeight: maxHeight || `auto`
+                }, ref: _pop, fx: {
                     from: { y: 5, opacity: 0 },
                     to: { y: 0, opacity: 1 },
                     when: choosing,

package/dist/esm/comps/Select/types.d.ts

@@ -55,4 +55,8 @@ export type SelectProps = Omit<BoxProps, "onChange"> & {
      * Placeholder text for the search input field.
      */
     searchPlaceholder?: string;
+    /**
+     * Max Height
+     */
+    maxHeight?: number;
 };

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

@@ -4,5 +4,7 @@ declare const TextWheel: React.ForwardRefExoticComponent<Omit<import("..").BoxPr
     value?: number | string;
     color?: string;
     direction?: `up` | `down`;
+    charDelay?: number | ((index: number) => number);
+    charDuration?: number | ((index: number) => number);
 } & React.RefAttributes<TextWheelHandler>>;
 export default TextWheel;

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

@@ -1,54 +1,66 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import Box from '../Box';
-import Span from '../Span';
+import Box from '../Box'; // Assuming these are your custom components
+import Span from '../Span'; // Assuming these are your custom components
 const TextWheel = forwardRef((props, ref) => {
     const { as, value, color, direction, ...rest } = props;
     const divRef = useRef(null);
+    // Internal state to manage the displayed value
     const [_value, _setValue] = useState(value || 0);
+    // Expose methods to parent components via ref
     useImperativeHandle(ref, () => ({
+        // Updates the value without immediately triggering a full re-render of characters
+        // Useful for when the number of digits changes.
         updateValue(v) {
-            if (_value.toString().length != v.toString().length) {
+            if (_value.toString().length !== v.toString().length) {
                 _setValue(v);
             }
         },
+        // Sets the value and triggers the animation for each character
         setValue(v) {
-            this.updateValue(v);
+            this.updateValue(v); // First, update the internal value to handle length changes
             if (divRef.current) {
                 const chars = v.toString().split('');
                 divRef.current.querySelectorAll('.--wheel-char').forEach((charElement, index) => {
                     const char = chars[index];
                     if (charElement instanceof HTMLElement) {
+                        // Set the data-value attribute, which CSS can then use
                         charElement.setAttribute('data-value', char);
                         const track = charElement.querySelector('.--wheel-char-track');
                         if (track instanceof HTMLElement) {
+                            // Directly update the CSS custom property for immediate animation
                             track.style.setProperty('--v', char);
+                            // Force a reflow to ensure the transition plays even if the value is the same
+                            // This is a common trick for re-triggering CSS animations/transitions
+                            void track.offsetWidth;
                         }
                     }
                 });
             }
         }
     }));
+    // Effect to update internal value when the prop `value` changes
     useEffect(() => {
-        // console.log(value)
         _setValue(value || 0);
     }, [value]);
-    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) => {
+    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) => {
+                // Render non-numeric characters directly (e.g., decimal points)
                 if (isNaN(parseInt(char, 10))) {
-                    return _jsx(Span, { className: "--wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
+                    return _jsx(Span, { className: "--wheel-char wheel-char-symbol grid", children: char }, `wheel-char-symbol-${index}`);
                 }
-                return _jsx(Span, { "data-value": char, className: `--wheel-char grid ${index > char.toString().split('').length - 3 ? '--wheel-fraction' : ''}`.trim(), children: _jsxs(Span, { className: `--wheel-char-track --wheel-track-${direction || `down`} grid`, style: {
-                            '--v': char
-                        }, children: [_jsx(Span, { children: !direction || direction == `down` ? 0 : 9 }), (!direction || direction == `down` ?
+                // Render numeric characters with the wheel effect
+                return (_jsx(Span, { "data-value": char, className: `--wheel-char grid ${index > (_value || 0).toString().length - 3 ? '--wheel-fraction' : ''}`.trim(), children: _jsxs(Span, { className: `--wheel-char-track --wheel-track-${direction || `down`} grid`, style: {
+                            '--v': char // Set the custom property for the current character value
+                        }, children: [_jsx(Span, { children: !direction || direction === `down` ? 0 : 9 }), (!direction || direction === `down` ?
                                 [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
                                 : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]).map((val, indx) => {
                                 return _jsx(Span, { children: val }, `${index}--${indx}`);
-                            }), _jsx(Span, { children: !direction || direction == `down` ? 9 : 0 })] }) }, `wheel-char-${index}`);
+                            }), _jsx(Span, { children: !direction || direction === `down` ? 9 : 0 })] }) }, `wheel-char-${index}`));
             }), color && _jsx(Box, { className: `abs fillx`, style: {
                     zIndex: 1,
                     background: `linear-gradient(0deg, ${color}, transparent, transparent, transparent, ${color})`,
-                } })] });
+                } })] }));
 });
 TextWheel.displayName = `Zuz.TextWheel`;
 export default TextWheel;

package/dist/esm/comps/TextWheel/types.d.ts

@@ -3,6 +3,8 @@ export type TextWheelProps = Omit<BoxProps, "name"> & {
     value?: number | string;
     color?: string;
     direction?: `up` | `down`;
+    charDelay?: number | ((index: number) => number);
+    charDuration?: number | ((index: number) => number);
 };
 export interface TextWheelHandler {
     setValue: (v: number | string) => void;

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

@@ -12,6 +12,8 @@ export * from './Avatar/types';
 export { default as Box, type BoxProps } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
+export { default as Chart } from './Chart';
+export * from './Chart/types';
 export { default as CheckBox } from './CheckBox';
 export * from './CheckBox/types';
 export { default as ColorScheme } from './ColorScheme';
@@ -36,6 +38,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

@@ -12,6 +12,8 @@ export * from './Avatar/types';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
+export { default as Chart } from './Chart';
+export * from './Chart/types';
 export { default as CheckBox } from './CheckBox';
 export * from './CheckBox/types';
 export { default as ColorScheme } from './ColorScheme';
@@ -36,6 +38,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/index.d.ts

@@ -11,6 +11,7 @@ export { default as useDebounce } from './useDebounce';
 export { default as useDelayed, default as useMounted } from './useDelayed';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
+export { default as useLineChart, type DataPoint, type LineChartProps, type UseLineChartDimensions, type UseLineChartReturn } from './useLineChart';
 export { default as useMediaPlayer, type MediaPlayerProps, type MediaType } from './useMediaPlayer';
 export { default as useMergedRefs } from './useMergedRefs';
 export { default as useMutationObserver, type MutationCallback } from './useMutationObserver';
@@ -26,6 +27,7 @@ export { default as useScrollPhysics } from './useScrollPhysics';
 export { default as useSheet } from './useSheet';
 export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
+export { default as usePosition } from './usePosition';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';

package/dist/esm/hooks/index.js

@@ -11,6 +11,7 @@ export { default as useDebounce } from './useDebounce';
 export { default as useDelayed, default as useMounted } from './useDelayed';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
+export { default as useLineChart } from './useLineChart';
 export { default as useMediaPlayer } from './useMediaPlayer';
 export { default as useMergedRefs } from './useMergedRefs';
 export { default as useMutationObserver } from './useMutationObserver';
@@ -27,6 +28,7 @@ export { default as useScrollPhysics } from './useScrollPhysics';
 export { default as useSheet } from './useSheet';
 export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
+export { default as usePosition } from './usePosition';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useToast } from './useToast';

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

@@ -0,0 +1,25 @@
+export interface DataPoint {
+    x: number;
+    y: number;
+}
+export interface UseLineChartDimensions {
+    width: number;
+    height: number;
+}
+export interface UseLineChartReturn {
+    pathD: string;
+    areaPathD: string;
+}
+export interface LineChartProps {
+    data: DataPoint[];
+    width?: string | number;
+    height?: string | number;
+    lineColor?: string;
+    strokeWidth?: number;
+    gradientStartColor?: string;
+    gradientEndColor?: string;
+    padding?: number;
+    animated?: boolean;
+}
+declare const useLineChart: (data: DataPoint[], dimensions?: UseLineChartDimensions, padding?: number) => UseLineChartReturn;
+export default useLineChart;