@zuzjs/ui 0.9.5 → 0.9.7

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

@@ -1,8 +1,9 @@
-import { SPINNER } from "../../types/enums";
+import { SPINNER, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type CoverProps = BoxProps & {
     message?: string;
     spinner?: SPINNER;
+    spinnerSize?: Variant;
     color?: string;
     when?: boolean;
     hideMessage?: boolean;
@@ -10,6 +11,7 @@ export type CoverProps = BoxProps & {
 declare const Cover: import("react").ForwardRefExoticComponent<BoxProps & {
     message?: string;
     spinner?: SPINNER;
+    spinnerSize?: Variant;
     color?: string;
     when?: boolean;
     hideMessage?: boolean;

package/dist/cjs/comps/Cover/index.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useBase } from "../../hooks";
-import { SPINNER } from "../../types/enums";
+import { SPINNER, Variant } from "../../types/enums";
 import Box from "../Box";
 import Spinner from "../Spinner";
 import Text from "../Text";
 const Cover = forwardRef((props, ref) => {
-    const { message, spinner, color, when, hideMessage, ...pops } = props;
+    const { message, spinner, spinnerSize, color, when, hideMessage, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     if (`when` in props && props.when == false) {
         return null;
@@ -15,7 +15,7 @@ const Cover = forwardRef((props, ref) => {
     return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous ${className}`.trim(), style: {
             ...style,
             backgroundColor: `var(--cover-bg)`
-        }, ...rest, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
+        }, ...rest, children: [_jsx(Spinner, { variant: spinnerSize || Variant.Small, type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
 });
 Cover.displayName = `Zuz.Cover`;
 export default Cover;

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

@@ -13,5 +13,9 @@ declare const Search: import("react").ForwardRefExoticComponent<import("../..").
     withStyle?: string;
     shortcut?: import("..").KeyCombination;
     reverse?: boolean;
+    searchIcon?: string | import("react").ReactNode;
+    hideSearchIcon?: boolean;
+    clearIcon?: string | import("react").ReactNode;
+    hideClearIcon?: boolean;
 } & import("react").RefAttributes<SearchHandler>>;
 export default Search;

package/dist/cjs/comps/Search/index.js

@@ -1,19 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useBase } from '../../hooks';
 import { Variant } from '../../types/enums';
 import Box from '../Box';
 import Button from '../Button';
+import Icon from '../Icon';
 import Input from '../Input';
 import KeyBoardKeys from '../KeyboardKeys';
 import SVGIcons from '../svgicons';
 const Search = forwardRef((props, ref) => {
-    const { fx, animate, withStyle, as, reverse, onChange, onClear, ...pops } = props;
+    const { fx, animate, withStyle, as, reverse = false, searchIcon = SVGIcons.search, hideSearchIcon = false, clearIcon = SVGIcons.close, hideClearIcon = false, onChange, onClear, ...pops } = props;
     const { style, className } = useBase({ as: props.as });
     // const { className : searchStyle } = useBase({ as: withStyle || `` } as Props<`div`>)
     const [query, setQuery] = useState(``);
     const innerRef = useRef(null);
+    const actionBtn = useMemo(() => _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ?
+            !hideClearIcon && (`string` === typeof clearIcon ? _jsx(Icon, { name: clearIcon, as: `--search-action` }) : clearIcon) :
+            !hideSearchIcon && (`string` === typeof searchIcon ? _jsx(Icon, { name: searchIcon, as: `--search-action` }) : searchIcon) }), [reverse, searchIcon, hideClearIcon, clearIcon, hideSearchIcon]);
     if (`type` in props) {
         delete props[`type`];
     }
@@ -38,7 +42,7 @@ const Search = forwardRef((props, ref) => {
         value: () => innerRef.current?.value
     }));
     useEffect(() => { }, []);
-    return _jsxs(Box, { style: style, className: `--search ${reverse ? `--search-rev` : ``} --${props.variant || Variant.Small} flex aic ${props.as?.includes(`abs`) ? `` : `rel`} ${className}`.trim(), children: [reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search }), _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
+    return _jsxs(Box, { style: style, className: `--search ${reverse ? `--search-rev` : ``} --${props.variant || Variant.Small} flex aic ${props.as?.includes(`abs`) ? `` : `rel`} ${className}`.trim(), children: [reverse && actionBtn, _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && actionBtn] });
 });
 Search.displayName = `Zuz.Search`;
 export default Search;

package/dist/cjs/comps/Search/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { KeyCombination } from "../..";
 import { InputProps } from "../Input";
 export type SearchProps = InputProps & {
@@ -7,6 +8,10 @@ export type SearchProps = InputProps & {
     withStyle?: string;
     shortcut?: KeyCombination;
     reverse?: boolean;
+    searchIcon?: string | ReactNode;
+    hideSearchIcon?: boolean;
+    clearIcon?: string | ReactNode;
+    hideClearIcon?: boolean;
 };
 export interface SearchHandler {
     focus: () => void;

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

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

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

@@ -1,15 +1,17 @@
 "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 Icon from "../Icon";
 import Input from "../Input";
 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, arrowDownIcon = SVGIcons.arrowDown, arrowUpIcon = SVGIcons.arrowUp, onChange, ...pops } = props;
     const [value, setValue] = useState(selected ?
         typeof selected === `string` ? options.find(fo => fo.value === selected) : selected
         : options[0]);
@@ -17,8 +19,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 +32,7 @@ const Select = forwardRef((props, ref) => {
         document.body.addEventListener(`click`, (e) => {
             setChoosing(false);
         });
+        window.dispatchEvent(new Event('resize'));
     }, []);
     useEffect(() => {
         if (choosing) {
@@ -39,10 +44,13 @@ 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 ?
+                            `string` === typeof arrowUpIcon ? _jsx(Icon, { name: arrowUpIcon, as: `--search-action` }) : arrowUpIcon :
+                            `string` === typeof arrowDownIcon ? _jsx(Icon, { name: arrowDownIcon, as: `--search-action` }) : arrowDownIcon })] }), _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

@@ -1,4 +1,4 @@
-import { FormEventHandler } from "react";
+import { FormEventHandler, ReactNode } from "react";
 import { FORMVALIDATION, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 /**
@@ -55,4 +55,10 @@ export type SelectProps = Omit<BoxProps, "onChange"> & {
      * Placeholder text for the search input field.
      */
     searchPlaceholder?: string;
+    /**
+     * Max Height
+     */
+    maxHeight?: number;
+    arrowDownIcon?: string | ReactNode;
+    arrowUpIcon?: string | ReactNode;
 };

package/dist/cjs/comps/Spinner/index.d.ts

@@ -1,8 +1,9 @@
-import { Size, SPINNER } from "../../types/enums";
+import { Size, SPINNER, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type SpinnerProps = BoxProps & {
     type?: SPINNER;
     size?: Size | number;
+    variant?: Variant | number;
     width?: number;
     color?: string;
     background?: string;
@@ -12,6 +13,7 @@ export type SpinnerProps = BoxProps & {
 declare const Spinner: import("react").ForwardRefExoticComponent<BoxProps & {
     type?: SPINNER;
     size?: Size | number;
+    variant?: Variant | number;
     width?: number;
     color?: string;
     background?: string;

package/dist/cjs/comps/Spinner/index.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { forwardRef } from "react";
 import { hexToRgba } from "../../funs";
 import { useBase } from "../../hooks";
-import { Size, SPINNER } from "../../types/enums";
+import { Size, SPINNER, Variant } from "../../types/enums";
 import Box from "../Box";
 const Spinner = forwardRef((props, ref) => {
-    const { type, size, width, speed, color, background, foreground, ...pops } = props;
+    const { type, size, variant, width, speed, color, background, foreground, ...pops } = props;
     const defaultColor = `#000000`;
     const { className, style, rest } = useBase(pops);
     const build = () => {
@@ -18,13 +18,20 @@ const Spinner = forwardRef((props, ref) => {
             default: 20
         };
         const _size = size ? Object.values(Size).includes(size) ? sizes[size] : size : sizes.default;
+        const variants = {
+            [Variant.Small]: 20,
+            [Variant.Medium]: 30,
+            [Variant.Large]: 50,
+            default: 20
+        };
+        const _variant = variant ? Object.values(Variant).includes(variant) ? variants[variant] : variant : variants.default;
         const _animationSetting = {
             animationDuration: `${speed || .6}s`,
             animationTimingFunction: `linear`
         };
         const _props = (type || SPINNER.Simple) == SPINNER.Simple ? {
-            width: _size,
-            height: _size,
+            width: _variant || _size,
+            height: _variant || _size,
             border: `${width || 3}px solid ${bg}`,
             borderRadius: `50%`,
             borderTopColor: c,

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/funs/stylesheet.js

@@ -308,11 +308,13 @@ export const cssDirect = {
     "translate": "transform: translate(__VALUE__);",
     "translateX": "transform: translateX(__VALUE__);",
     "translateY": "transform: translateY(__VALUE__);",
+    "translateZ": "transform: translateZ(__VALUE__);",
     "x": "transform: translateX(__VALUE__);",
     "y": "transform: translateY(__VALUE__);",
+    "z": "transform: translateZ(__VALUE__);",
     "rotate": "transform: rotate(__VALUE__);",
     "rotateX": "transform: rotateX(__VALUE__);",
-    "rotateY": "transform: rotatY(__VALUE__);",
+    "rotateY": "transform: rotateY(__VALUE__);",
     "rotateZ": "transform: rotateZ(__VALUE__);",
     "rotate3d": "transform: rotate3d(__X__, __Y__, __Z__, __A__);",
     "scale": "transform: scale(__VALUE__);",

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;