@zuzjs/ui 0.9.5 → 0.9.6

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/comps/Chart/index.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from "../Box";
+import { CHART } from "./types";
+declare const Chart: import("react").ForwardRefExoticComponent<BoxProps & import("../..").LineChartProps & {
+    type?: CHART;
+    animDuration?: number;
+    animDelay?: number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Chart;

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);

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;