@zuzjs/ui 0.9.4 → 0.9.6

package/dist/esm/hooks/useLineChart.js

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+// Helper function to generate a smooth SVG path from data points
+// This uses cubic Bezier curves for smoothing.
+const getSmoothLinePath = (data, width, height, padding = 20) => {
+    if (!data || data.length === 0 || width <= 0 || height <= 0)
+        return "";
+    // Calculate min/max for x and y values to scale the data
+    const minX = Math.min(...data.map(d => d.x));
+    const maxX = Math.max(...data.map(d => d.x));
+    const minY = Math.min(...data.map(d => d.y));
+    const maxY = Math.max(...data.map(d => d.y));
+    // Determine scaling factors, ensuring padding
+    const scaleX = (width - 2 * padding) / (maxX - minX);
+    const scaleY = (height - 2 * padding) / (maxY - minY);
+    // Function to convert data point to SVG coordinate
+    const toSvgCoords = (point) => {
+        const svgX = (point.x - minX) * scaleX + padding;
+        // SVG Y-axis is inverted, so we subtract from height
+        const svgY = height - ((point.y - minY) * scaleY + padding);
+        return { x: svgX, y: svgY };
+    };
+    // Convert all data points to SVG coordinates
+    const svgPoints = data.map(toSvgCoords);
+    let path = "";
+    if (svgPoints.length > 0) {
+        // Start the path at the first point
+        path = `M ${svgPoints[0].x},${svgPoints[0].y}`;
+        for (let i = 0; i < svgPoints.length - 1; i++) {
+            const p0 = svgPoints[i];
+            const p1 = svgPoints[i + 1];
+            // Calculate control points for cubic Bezier curve
+            // This is a simplified approach for smooth curves.
+            // For more advanced smoothing, consider D3's curve generators.
+            const cp1 = {
+                x: (p0.x + p1.x) / 2,
+                y: p0.y
+            };
+            const cp2 = {
+                x: (p0.x + p1.x) / 2,
+                y: p1.y
+            };
+            // Add cubic Bezier curve segment
+            path += ` C ${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${p1.x},${p1.y}`;
+        }
+    }
+    return path;
+};
+// Helper function to generate the SVG path for the filled area below the line
+const getAreaPath = (data, width, height, padding = 20) => {
+    if (!data || data.length === 0)
+        return "";
+    // Reuse the line path generation logic for the top boundary of the area
+    const linePath = getSmoothLinePath(data, width, height, padding);
+    // Calculate min/max for x values to scale the data
+    const minX = Math.min(...data.map(d => d.x));
+    const maxX = Math.max(...data.map(d => d.x));
+    // Determine scaling factor for x
+    const scaleX = (width - 2 * padding) / (maxX - minX);
+    // Get SVG coordinates for the first and last points of the line
+    const firstPointSvgX = (data[0].x - minX) * scaleX + padding;
+    const lastPointSvgX = (data[data.length - 1].x - minX) * scaleX + padding;
+    // The bottom Y-coordinate of the chart, accounting for padding
+    const chartBottomY = height - padding;
+    // Construct the area path:
+    // 1. Start at the first point of the line path
+    // 2. Follow the smooth line path
+    // 3. Draw a vertical line down from the last point to the bottom of the chart
+    // 4. Draw a horizontal line across the bottom to the x-coordinate of the first point
+    // 5. Draw a vertical line up from the bottom to the first point's y-coordinate (closing the path)
+    return `${linePath} L ${lastPointSvgX},${chartBottomY} L ${firstPointSvgX},${chartBottomY} Z`;
+};
+// Custom React hook for the line chart logic
+const useLineChart = (data, dimensions = { width: 600, height: 300 }, padding = 20) => {
+    const [pathD, setPathD] = useState("");
+    const [areaPathD, setAreaPathD] = useState("");
+    useEffect(() => {
+        // Generate the SVG path whenever data or dimensions change
+        const newPathD = getSmoothLinePath(data, dimensions.width, dimensions.height, padding);
+        setPathD(newPathD);
+        // Generate the area path for the gradient fill
+        const newAreaPathD = getAreaPath(data, dimensions.width, dimensions.height, padding);
+        setAreaPathD(newAreaPathD);
+    }, [data, dimensions.width, dimensions.height, padding]);
+    return { pathD, areaPathD };
+};
+export default useLineChart;

package/dist/esm/hooks/usePosition.d.ts

@@ -0,0 +1,12 @@
+import { Direction } from "../types";
+interface PositionOptions {
+    offset?: number;
+    direction?: Direction;
+    container?: HTMLElement | null;
+    triggerRef?: React.RefObject<HTMLElement>;
+}
+export declare const usePosition: (ref: React.RefObject<HTMLElement>, options?: PositionOptions) => {
+    postion: "fixed" | "absolute" | null;
+    reposition: () => void;
+};
+export default usePosition;

package/dist/esm/hooks/usePosition.js

@@ -0,0 +1,191 @@
+import { useCallback, useEffect, useRef } from "react"; // Added useRef for internal state if needed
+export const usePosition = (ref, // The element to be positioned
+options = {}) => {
+    const { offset = 8, direction = 'bottom', container = null, // Can be a specific parent container
+    triggerRef = null, // If the trigger is not the immediate parent
+     } = options;
+    // Internal state to store the applied position type
+    const appliedPositionRef = useRef(null);
+    const calculate = useCallback(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        // Determine the trigger element
+        const trigger = triggerRef?.current || el.parentElement;
+        if (!trigger) {
+            console.warn("usePosition: No trigger element found. Positioning may not work.");
+            return;
+        }
+        const rect = el.getBoundingClientRect(); // Bounding rect of the element to position
+        const triggerRect = trigger.getBoundingClientRect(); // Bounding rect of the trigger
+        // --- Determine the effective positioning context ---
+        let parentRect;
+        let targetPosition;
+        if (container) {
+            // If a specific container is provided, we assume 'absolute' positioning relative to it
+            // The container MUST be positioned (relative, absolute, fixed, sticky) for this to work correctly.
+            parentRect = container.getBoundingClientRect();
+            targetPosition = 'absolute';
+        }
+        else {
+            // No specific container provided. We need to decide if fixed or absolute to the viewport/document.
+            // Heuristic: If the trigger itself (or its ancestors) has 'fixed' position,
+            // or if the trigger is very close to the viewport edge,
+            // and/or if we want the positioned element to stay visible during scroll,
+            // we might prefer 'fixed'. Otherwise, 'absolute' is the default.
+            // A simple check: if the element is meant to stay in view regardless of scroll, 'fixed' is better.
+            // Otherwise, if it should scroll with the document, 'absolute' relative to the document.
+            // Let's default to 'fixed' for viewport-relative behavior if no container is provided,
+            // as this is often desired for elements like tooltips/dropdowns that follow the viewport.
+            // If the user *wants* it to scroll with content when no explicit container, they should set
+            // `position: absolute` and its parent *will* determine its containing block.
+            // For automatic calculation *without* explicitly setting parent position:
+            // If the `el`'s *computed* position is already `fixed`, keep it `fixed`.
+            // Otherwise, we will explicitly set it to `absolute` and position relative to the document.
+            const computedElStyle = window.getComputedStyle(el);
+            if (computedElStyle.position === 'fixed') {
+                targetPosition = 'fixed';
+            }
+            else {
+                // If not fixed, we will try to make it absolute relative to the document body
+                // (which effectively means relative to the viewport if no parent is positioned).
+                // We'll set el.style.position = 'absolute'
+                targetPosition = 'absolute';
+            }
+            // For 'fixed' positioning, the parentRect is the viewport
+            if (targetPosition === 'fixed') {
+                parentRect = {
+                    top: 0,
+                    left: 0,
+                    right: window.innerWidth,
+                    bottom: window.innerHeight,
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                };
+            }
+            else { // targetPosition === 'absolute'
+                // For 'absolute' positioning without a specified container,
+                // it implicitly positions relative to the initial containing block (viewport/document).
+                // So, the coordinates will still be viewport-relative.
+                // We need to ensure 'el' is actually positioned absolute.
+                parentRect = {
+                    top: 0,
+                    left: 0,
+                    right: window.innerWidth,
+                    bottom: window.innerHeight,
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                };
+            }
+        }
+        // Apply the determined position style if it's different from current
+        if (el.style.position !== targetPosition) {
+            el.style.position = targetPosition;
+            appliedPositionRef.current = targetPosition; // Store what we applied
+        }
+        else {
+            appliedPositionRef.current = targetPosition; // Confirm current state
+        }
+        let top = 0;
+        let left = 0;
+        // Calculate position relative to the viewport for initial placement
+        // These are always viewport coordinates, even if `targetPosition` becomes `absolute`
+        // We'll adjust based on `targetPosition` when applying to `el.style`
+        let viewportTop = 0;
+        let viewportLeft = 0;
+        // Determine base top/left by direction
+        switch (direction) {
+            case 'top':
+                viewportTop = triggerRect.top - rect.height - offset;
+                viewportLeft = triggerRect.left;
+                // Flipping logic (if it goes off-screen in the current direction)
+                if (viewportTop < parentRect.top && triggerRect.bottom + rect.height + offset <= parentRect.bottom) {
+                    viewportTop = triggerRect.bottom + offset;
+                }
+                break;
+            case 'bottom':
+                viewportTop = triggerRect.bottom + offset;
+                viewportLeft = triggerRect.left;
+                // Flipping logic
+                if (viewportTop + rect.height > parentRect.bottom && triggerRect.top - rect.height - offset >= parentRect.top) {
+                    viewportTop = triggerRect.top - rect.height - offset;
+                }
+                break;
+            case 'left':
+                viewportTop = triggerRect.top;
+                viewportLeft = triggerRect.left - rect.width - offset;
+                // Flipping logic
+                if (viewportLeft < parentRect.left && triggerRect.right + rect.width + offset <= parentRect.right) {
+                    viewportLeft = triggerRect.right + offset;
+                }
+                break;
+            case 'right':
+                viewportTop = triggerRect.top;
+                viewportLeft = triggerRect.right + offset;
+                // Flipping logic
+                if (viewportLeft + rect.width > parentRect.right && triggerRect.left - rect.width - offset >= parentRect.left) {
+                    viewportLeft = triggerRect.left - rect.width - offset;
+                }
+                break;
+        }
+        // Clamp to parent/viewport boundaries *after* potential flipping
+        viewportTop = Math.max(parentRect.top, Math.min(viewportTop, parentRect.bottom - rect.height));
+        viewportLeft = Math.max(parentRect.left, Math.min(viewportLeft, parentRect.right - rect.width));
+        // Apply coordinates based on the determined `targetPosition`
+        if (appliedPositionRef.current === 'fixed') {
+            // If fixed, apply viewport coordinates directly
+            el.style.top = `${viewportTop}px`;
+            el.style.left = `${viewportLeft}px`;
+        }
+        else { // 'absolute'
+            // If absolute, coordinates need to be relative to the closest positioned ancestor (offsetParent)
+            // If there's no positioned ancestor, offsetParent is body/html, so it's effectively viewport relative
+            // If there *is* a positioned ancestor, we need to subtract its position.
+            // Get the actual offset parent's bounding rect
+            let offsetParentRect;
+            if (el.offsetParent) {
+                offsetParentRect = el.offsetParent.getBoundingClientRect();
+            }
+            else {
+                // If no offsetParent, it implies relative to initial containing block (viewport)
+                offsetParentRect = { top: 0, left: 0 };
+            }
+            // Calculate relative coordinates
+            const finalTop = viewportTop - offsetParentRect.top + window.scrollY; // Add scrollY for document-relative `top`
+            const finalLeft = viewportLeft - offsetParentRect.left + window.scrollX; // Add scrollX for document-relative `left`
+            el.style.top = `${finalTop}px`;
+            el.style.left = `${finalLeft}px`;
+        }
+    }, [ref, triggerRef, offset, direction, container]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        // Determine the trigger element
+        const trigger = triggerRef?.current || el.parentElement;
+        if (!trigger) {
+            console.warn("usePosition: No trigger element found. Positioning may not work.");
+            return;
+        }
+        // Observers and event listeners
+        const observer = new ResizeObserver(calculate);
+        observer.observe(el);
+        if (trigger)
+            observer.observe(trigger); // Observe trigger for size/position changes
+        calculate(); // Initial calculation
+        window.addEventListener('resize', calculate);
+        window.addEventListener('scroll', calculate, true); // Use capture phase for reliability
+        return () => {
+            observer.disconnect();
+            if (trigger)
+                observer.disconnect(); // Disconnect trigger observer as well
+            window.removeEventListener('resize', calculate);
+            window.removeEventListener('scroll', calculate, true);
+        };
+    }, [ref, direction, offset, container, triggerRef]); // Add triggerRef to dependency array
+    return {
+        postion: appliedPositionRef.current,
+        reposition: calculate
+    };
+};
+export default usePosition;

package/dist/esm/hooks/useResizeObserver.d.ts

@@ -5,5 +5,5 @@ interface Size {
     top: number;
     left: number;
 }
-declare const useResizeObserver: (ref: RefObject<HTMLElement | null>) => Size;
+declare const useResizeObserver: (ref: RefObject<HTMLElement | null> | HTMLElement) => Size;
 export default useResizeObserver;

package/dist/esm/hooks/useResizeObserver.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 const useResizeObserver = (ref) => {
     const [size, setSize] = useState({ width: 0, height: 0, top: 0, left: 0 });
     useEffect(() => {
+        const _ref = ref instanceof HTMLElement ? ref : ref.current;
         const handleResize = (entries) => {
             for (let entry of entries) {
                 const { width, height, top, left } = entry.contentRect;
@@ -10,12 +11,12 @@ const useResizeObserver = (ref) => {
             }
         };
         const resizeObserver = new ResizeObserver(handleResize);
-        if (ref.current) {
-            resizeObserver.observe(ref.current);
+        if (_ref) {
+            resizeObserver.observe(_ref);
         }
         return () => {
-            if (ref.current) {
-                resizeObserver.unobserve(ref.current);
+            if (_ref) {
+                resizeObserver.unobserve(_ref);
             }
         };
     }, [ref]);

package/dist/esm/hooks/useScrollbar.js

@@ -13,60 +13,78 @@ const useScrollbar = (speed, breakpoints = {}) => {
     const dragStartY = useRef(0);
     const scrollStartY = useRef(0);
     const scrollStartX = useRef(0);
-    const thumbHeight = useRef(30); // Default min height
-    const thumbWidth = useRef(30); // Default min height
+    // No need for thumbHeight/Width refs if calculating them dynamically
+    // const thumbHeight = useRef(30);
+    // const thumbWidth = useRef(30);
+    // Animation frame ID for batching visual updates
+    const animationFrameId = useRef(null);
     const updateThumb = useCallback(() => {
         if (!containerRef.current || !thumbY.current || !thumbX.current)
             return;
         const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } = containerRef.current;
-        //Y thumb
-        const thumbSizeY = Math.max((clientHeight / scrollHeight) * clientHeight, 30); // Min thumb size: 30px
-        thumbHeight.current = thumbSizeY;
-        const thumbPosY = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbSizeY);
+        // Y thumb calculations and update
+        const actualThumbMinHeight = 30; // Min thumb size: 30px
+        const thumbSizeY = Math.max((clientHeight / scrollHeight) * clientHeight, actualThumbMinHeight);
+        const maxThumbPosY = clientHeight - thumbSizeY;
+        const thumbPosY = (scrollTop / (scrollHeight - clientHeight)) * maxThumbPosY;
         thumbY.current.style.height = `${thumbSizeY}px`;
-        thumbY.current.style.top = `${thumbPosY}px`;
-        //X thumb
-        const thumbSizeX = Math.max((clientWidth / scrollWidth) * clientWidth, 30); // Min thumb size: 30px
-        thumbWidth.current = thumbSizeX;
-        const thumbPosX = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbSizeX);
+        // *** KEY CHANGE: Use transform for positioning ***
+        thumbY.current.style.transform = `translateY(${thumbPosY}px)`;
+        thumbY.current.style.willChange = 'transform, height'; // Hint for browser
+        // X thumb calculations and update
+        const actualThumbMinWidth = 30; // Min thumb size: 30px
+        const thumbSizeX = Math.max((clientWidth / scrollWidth) * clientWidth, actualThumbMinWidth);
+        const maxThumbPosX = clientWidth - thumbSizeX;
+        const thumbPosX = (scrollLeft / (scrollWidth - clientWidth)) * maxThumbPosX;
         thumbX.current.style.width = `${thumbSizeX}px`;
-        thumbX.current.style.left = `${thumbPosX}px`;
-        if (thumbY.current.clientHeight == clientHeight && rootRef) {
-            rootRef.current?.classList.add(`--no-y`);
+        // *** KEY CHANGE: Use transform for positioning ***
+        thumbX.current.style.transform = `translateX(${thumbPosX}px)`;
+        thumbX.current.style.willChange = 'transform, width'; // Hint for browser
+        // Handle --no-y and --no-x classes (consider if these are strictly needed on every frame)
+        // These might still cause reflows, but less frequently than 'top'/'left'
+        if (scrollHeight <= clientHeight && rootRef.current) { // Use scrollHeight <= clientHeight for accurate check
+            rootRef.current.classList.add(`--no-y`);
         }
-        else
-            rootRef.current?.classList.remove(`--no-y`);
-        if (thumbX.current.clientWidth == clientWidth && rootRef) {
-            rootRef.current?.classList.add(`--no-x`);
+        else if (rootRef.current) {
+            rootRef.current.classList.remove(`--no-y`);
         }
-        else
-            rootRef.current?.classList.remove(`--no-x`);
-    }, []);
-    const postScroll = (scrollPercentY) => {
-        updateThumb();
-        // Trigger breakpoints
-        Object.keys(breakpoints).forEach((key) => {
-            const breakpoint = parseFloat(key);
-            if (Math.abs(scrollPercentY - breakpoint) < 1) {
-                breakpoints[breakpoint]?.();
+        if (scrollWidth <= clientWidth && rootRef.current) { // Use scrollWidth <= clientWidth for accurate check
+            rootRef.current.classList.add(`--no-x`);
+        }
+        else if (rootRef.current) {
+            rootRef.current.classList.remove(`--no-x`);
+        }
+    }, []); // Dependencies can be added here if needed, but often not for core calculations
+    // *** NEW: Central function to request a visual update via requestAnimationFrame ***
+    const requestVisualUpdate = useCallback(() => {
+        if (animationFrameId.current) {
+            cancelAnimationFrame(animationFrameId.current);
+        }
+        animationFrameId.current = requestAnimationFrame(() => {
+            updateThumb();
+            // Trigger breakpoints after the visual update for this frame
+            if (containerRef.current) {
+                const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+                const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
+                const scrollPercentX = (scrollLeft / (scrollWidth - clientWidth)) * 100;
+                Object.keys(breakpoints).forEach((key) => {
+                    const breakpoint = parseFloat(key);
+                    if (Math.abs(scrollPercentY - breakpoint) < 1) {
+                        breakpoints[breakpoint]?.();
+                    }
+                    if (Math.abs(scrollPercentX - breakpoint) < 1) { // Assuming breakpoints can be for X too
+                        breakpoints[breakpoint]?.();
+                    }
+                });
             }
         });
-    };
+    }, [updateThumb, breakpoints]);
     const handleScroll = useCallback(() => {
-        if (!containerRef.current
-        // || 
-        // (
-        //     typeof window !== `undefined` &&
-        //     window.document.body.classList.contains(`--no-scroll`)
-        // )
-        )
+        if (!containerRef.current)
             return;
-        const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
-        const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
-        const scrollPercentX = (scrollLeft / (scrollWidth - clientWidth)) * 100;
-        postScroll(scrollPercentY);
-        postScroll(scrollPercentX);
-    }, [breakpoints, updateThumb]);
+        // *** Call requestVisualUpdate instead of postScroll ***
+        requestVisualUpdate();
+    }, [requestVisualUpdate]);
     // Dragging logic
     const onScrollY = (e) => {
         isDraggingY.current = true;
@@ -85,30 +103,37 @@ const useScrollbar = (speed, breakpoints = {}) => {
             rootRef.current?.classList.add(`--scrolling`);
     };
     const handleDragMove = useCallback((e) => {
-        if (!containerRef.current || !thumbY.current || !thumbX.current)
+        if (!containerRef.current || (!isDraggingY.current && !isDraggingX.current))
             return;
         const { clientHeight, scrollHeight, clientWidth, scrollWidth } = containerRef.current;
         if (isDraggingY.current) {
             const maxScroll = scrollHeight - clientHeight;
-            const maxThumbMove = clientHeight - thumbHeight.current;
+            const thumbCurrentHeight = thumbY.current?.clientHeight || 30; // Use actual thumb height
+            const maxThumbMove = clientHeight - thumbCurrentHeight;
             const deltaY = e.clientY - dragStartY.current;
             const newScrollTop = Math.min(Math.max(scrollStartY.current + (deltaY / maxThumbMove) * maxScroll, 0), maxScroll);
             containerRef.current.scrollTop = newScrollTop;
+            // *** No direct updateThumb here, the scroll event listener will trigger requestVisualUpdate ***
         }
         if (isDraggingX.current) {
             const maxScrollX = scrollWidth - clientWidth;
-            const maxThumbMoveX = clientWidth - thumbWidth.current;
+            const thumbCurrentWidth = thumbX.current?.clientWidth || 30; // Use actual thumb width
+            const maxThumbMoveX = clientWidth - thumbCurrentWidth;
             const deltaX = e.clientX - dragStartX.current;
             const newScrollLeft = Math.min(Math.max(scrollStartX.current + (deltaX / maxThumbMoveX) * maxScrollX, 0), maxScrollX);
             containerRef.current.scrollLeft = newScrollLeft;
+            // *** No direct updateThumb here, the scroll event listener will trigger requestVisualUpdate ***
         }
-    }, []);
+    }, []); // No dependencies needed if current values are always fresh
     const handleDragEnd = () => {
         isDraggingY.current = false;
         isDraggingX.current = false;
         document.body.style.userSelect = "";
         if (rootRef.current)
             rootRef.current?.classList.remove(`--scrolling`);
+        if (animationFrameId.current) {
+            cancelAnimationFrame(animationFrameId.current); // Clear any pending rAF
+        }
     };
     const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
     const scrollToBottom = () => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: "smooth" });
@@ -119,49 +144,69 @@ const useScrollbar = (speed, breakpoints = {}) => {
         if (!container)
             return;
         const handleWheel = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+            // *** Passive listener means preventDefault is often not needed/effective here ***
+            // e.preventDefault();
+            // e.stopPropagation();
             if (!containerRef.current)
                 return;
-            // Adjust scrollTop manually based on deltaY
             const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+            let newScrollTop = scrollTop;
+            let newScrollLeft = scrollLeft;
+            let changed = false;
             if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
                 const maxScrollY = scrollHeight - clientHeight;
-                let newScrollTop = scrollTop + e.deltaY;
+                newScrollTop = scrollTop + e.deltaY * SCROLL_SPEED;
                 newScrollTop = Math.max(0, Math.min(newScrollTop, maxScrollY));
-                containerRef.current.scrollTop = newScrollTop * SCROLL_SPEED;
+                if (newScrollTop !== scrollTop) {
+                    containerRef.current.scrollTop = newScrollTop;
+                    changed = true;
+                }
             }
-            if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+            else { // Prefer deltaX if it's larger or if deltaY is 0
                 const maxScrollX = scrollWidth - clientWidth;
-                let newScrollLeft = scrollLeft + e.deltaX;
+                newScrollLeft = scrollLeft + e.deltaX * SCROLL_SPEED;
                 newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollX));
-                containerRef.current.scrollLeft = newScrollLeft * SCROLL_SPEED;
+                if (newScrollLeft !== scrollLeft) {
+                    containerRef.current.scrollLeft = newScrollLeft;
+                    changed = true;
+                }
+            }
+            // *** Only request update if scroll position actually changed ***
+            if (changed) {
+                requestVisualUpdate();
             }
-            const scrollPercentY = (containerRef.current.scrollTop / (containerRef.current.scrollHeight - clientHeight)) * 100;
-            const scrollPercentX = (containerRef.current.scrollLeft / (containerRef.current.scrollWidth - clientWidth)) * 100;
-            postScroll(scrollPercentY);
-            postScroll(scrollPercentX);
         };
-        window.addEventListener("resize", updateThumb);
-        container.addEventListener("scroll", handleScroll);
-        // Prevent blocking default scrolling (fixes touchpad scrolling)
-        container.addEventListener("wheel", handleWheel, { passive: false });
+        window.addEventListener("resize", requestVisualUpdate); // Use requestVisualUpdate for resize
+        container.addEventListener("scroll", handleScroll, { passive: true }); // Make scroll passive if you don't preventDefault
+        container.addEventListener("wheel", handleWheel, { passive: true }); // Keep passive for wheel
         document.addEventListener("mousemove", handleDragMove);
         document.addEventListener("mouseup", handleDragEnd);
-        updateThumb();
+        // Initial update
+        requestVisualUpdate(); // Use requestVisualUpdate for initial render
         return () => {
-            window.removeEventListener("resize", updateThumb);
-            window.removeEventListener("wheel", handleWheel);
+            window.removeEventListener("resize", requestVisualUpdate);
             container.removeEventListener("scroll", handleScroll);
+            container.removeEventListener("wheel", handleWheel); // Corrected: remove from container
             document.removeEventListener("mousemove", handleDragMove);
             document.removeEventListener("mouseup", handleDragEnd);
+            if (animationFrameId.current) {
+                cancelAnimationFrame(animationFrameId.current); // Clean up any pending rAF
+            }
         };
-    }, [handleScroll, handleDragMove, updateThumb]);
-    useMutationObserver(containerRef.current, updateThumb);
+    }, [handleScroll, handleDragMove, requestVisualUpdate, SCROLL_SPEED]); // Added SCROLL_SPEED to deps
+    // *** NEW: Hook useMutationObserver to call requestVisualUpdate ***
+    useMutationObserver(containerRef.current, requestVisualUpdate);
     return {
-        rootRef, containerRef, thumbY, thumbX,
-        scrollToTop, scrollToBottom, scrollToLeft, scrollToRight,
-        onScrollY, onScrollX
+        rootRef,
+        containerRef,
+        thumbY,
+        thumbX,
+        scrollToTop,
+        scrollToBottom,
+        scrollToLeft,
+        scrollToRight,
+        onScrollY,
+        onScrollX,
     };
 };
 export default useScrollbar;

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

@@ -14,6 +14,8 @@ export declare enum FORMVALIDATION_STYLE {
     Dots = "DOTS"
 }
 export declare enum FORMVALIDATION {
+    IPV4 = "IPV4",
+    IPV6 = "IPV6",
     Email = "EMAIL",
     Uri = "URI",
     Password = "PASSWORD",

package/dist/esm/types/enums.js

@@ -19,6 +19,8 @@ export var FORMVALIDATION_STYLE;
 })(FORMVALIDATION_STYLE || (FORMVALIDATION_STYLE = {}));
 export var FORMVALIDATION;
 (function (FORMVALIDATION) {
+    FORMVALIDATION["IPV4"] = "IPV4";
+    FORMVALIDATION["IPV6"] = "IPV6";
     FORMVALIDATION["Email"] = "EMAIL";
     FORMVALIDATION["Uri"] = "URI";
     FORMVALIDATION["Password"] = "PASSWORD";

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { DragOptions } from "../hooks";
-import { SHIMMER, SORT, TRANSITIONS } from "./enums";
+import { Position, SHIMMER, SORT, TRANSITIONS } from "./enums";
 import { animationProps, Skeleton } from "./interfaces";
 export type Deprecated<T, M extends string> = T & {
     __deprecatedMessage?: M;
@@ -85,3 +85,4 @@ export type cssShortKeys = {
     sy: string | number;
     sz: string | number;
 };
+export type Direction = Position;

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

@@ -1,6 +1,6 @@
 import { dynamicObject } from ".";
 import { SKELETON, TRANSITION_CURVES, TRANSITIONS } from "./enums";
-export interface scrollEffectProps {
+export interface parallaxEffectProps {
     lerpFactor?: number;
     x?: number;
     y?: number;
@@ -34,7 +34,8 @@ export interface animationProps {
     delay?: number;
     /** Easing curve applied to the animation, as a string or {@link TRANSITION_CURVES} */
     curve?: string | TRANSITION_CURVES;
-    scroll?: scrollEffectProps;
+    scroll?: parallaxEffectProps;
+    mouse?: parallaxEffectProps;
 }
 /**
  * `Skeleton` defines properties for a skeleton loader, used to indicate