@zuzjs/ui 0.9.5 → 0.9.7

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

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

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

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

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

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

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

@@ -12,6 +12,8 @@ export * from './Avatar/types';
 export { default as Box, type BoxProps } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
+export { default as Chart } from './Chart';
+export * from './Chart/types';
 export { default as CheckBox } from './CheckBox';
 export * from './CheckBox/types';
 export { default as ColorScheme } from './ColorScheme';

package/dist/esm/comps/index.js

@@ -12,6 +12,8 @@ export * from './Avatar/types';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
+export { default as Chart } from './Chart';
+export * from './Chart/types';
 export { default as CheckBox } from './CheckBox';
 export * from './CheckBox/types';
 export { default as ColorScheme } from './ColorScheme';

package/dist/esm/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/esm/hooks/index.d.ts

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

package/dist/esm/hooks/index.js

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

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