@zuzjs/ui 0.9.5 → 0.9.6

package/dist/cjs/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/cjs/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/cjs/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/cjs/comps/Chart/types.js

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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';

package/dist/cjs/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';

package/dist/cjs/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/cjs/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/cjs/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;

package/dist/cjs/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/cjs/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;