@zuzjs/ui 0.10.5 → 0.10.7

package/dist/esm/hooks/useImage.js

@@ -1,23 +0,0 @@
-"use client";
-import { useEffect, useRef, useState } from "react";
-const useImage = (url, crossOrigin, referrerPolicy) => {
-    const [state, setState] = useState({ loaded: false, error: null });
-    const img = useRef(null);
-    useEffect(() => {
-        if (url && url !== ``) {
-            var _img = new Image();
-            crossOrigin && (_img.crossOrigin = crossOrigin);
-            referrerPolicy && (_img.referrerPolicy = referrerPolicy);
-            _img.onload = () => {
-                img.current = _img;
-                setState({ loaded: true, error: null });
-            };
-            _img.onerror = () => {
-                setState({ loaded: false, error: `Failed to load image at ${url}` });
-            };
-            _img.src = url;
-        }
-    }, [url]);
-    return [img.current ? img.current.src : ``, state.loaded, state.error];
-};
-export default useImage;

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

@@ -1,10 +0,0 @@
-import { CropShape } from '..';
-declare const useImageCropper: (imageUrl: string, cropSize: number, cropShape?: CropShape, scale?: number) => {
-    canvasRef: import("react").RefObject<HTMLCanvasElement | null>;
-    crop: () => string | null;
-    setScale: import("react").Dispatch<import("react").SetStateAction<number>>;
-    handleMouseDown: () => void;
-    handleMouseUp: () => void;
-    handleMouseMove: (e: React.MouseEvent<HTMLCanvasElement>) => void;
-};
-export default useImageCropper;

package/dist/esm/hooks/useImageCropper.js

@@ -1,67 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { CropShape } from '..';
-const useImageCropper = (imageUrl, cropSize, cropShape = CropShape.Circle, scale = 1) => {
-    const [dragging, setDragging] = useState(false);
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
-    const [_scale, setScale] = useState(scale);
-    const imgRef = useRef(null);
-    const canvasRef = useRef(null);
-    const draw = () => {
-        const canvas = canvasRef.current;
-        const ctx = canvas?.getContext('2d');
-        const img = imgRef.current;
-        if (!canvas || !ctx || !img)
-            return;
-        canvas.width = cropSize;
-        canvas.height = cropSize;
-        ctx.clearRect(0, 0, cropSize, cropSize);
-        ctx.globalAlpha = 0.5;
-        ctx.drawImage(img, offset.x, offset.y, img.width * _scale, img.height * _scale);
-        ctx.globalAlpha = 1.0;
-        ctx.save();
-        if (cropShape === CropShape.Circle) {
-            ctx.beginPath();
-            ctx.arc(cropSize / 2, cropSize / 2, cropSize / 2, 0, Math.PI * 2);
-            ctx.closePath();
-            ctx.clip();
-        }
-        ctx.drawImage(img, offset.x, offset.y, img.width * _scale, img.height * _scale);
-        ctx.restore();
-    };
-    useEffect(draw, [_scale]);
-    useEffect(() => {
-        if (imageUrl) {
-            const img = new Image();
-            img.onload = () => {
-                imgRef.current = img;
-                draw();
-            };
-            img.src = imageUrl;
-        }
-    }, [imageUrl, offset]);
-    const handleMouseDown = () => setDragging(true);
-    const handleMouseUp = () => setDragging(false);
-    const handleMouseMove = (e) => {
-        if (!dragging || !imgRef.current)
-            return;
-        setOffset(prev => ({
-            x: prev.x + e.movementX,
-            y: prev.y + e.movementY,
-        }));
-    };
-    const crop = () => {
-        const canvas = canvasRef.current;
-        if (!canvas)
-            return null;
-        return canvas.toDataURL('image/png');
-    };
-    return {
-        canvasRef,
-        crop,
-        setScale,
-        handleMouseDown,
-        handleMouseUp,
-        handleMouseMove,
-    };
-};
-export default useImageCropper;

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

@@ -1,8 +0,0 @@
-import { RefObject } from 'react';
-interface IntersectionObserverOptions {
-    root?: Element | null;
-    rootMargin?: string;
-    threshold?: number | number[];
-}
-declare const useIntersectionObserver: (refs: RefObject<HTMLElement | null>[], options?: IntersectionObserverOptions) => number[];
-export default useIntersectionObserver;

package/dist/esm/hooks/useIntersectionObserver.js

@@ -1,39 +0,0 @@
-"use client";
-import { useEffect, useState } from 'react';
-const useIntersectionObserver = (refs, options = {}) => {
-    const [intersectionRatio, setIntersectionRatio] = useState(refs && refs.length > 0 ? new Array(refs.length).fill(0) : []);
-    useEffect(() => {
-        if (!refs || !refs.length)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            requestAnimationFrame(() => {
-                setIntersectionRatio(prev => {
-                    const newRatios = [...prev];
-                    let hasChanges = false;
-                    entries.forEach(entry => {
-                        const index = refs.findIndex(ref => ref.current === entry.target);
-                        if (index !== -1 && newRatios[index] !== entry.intersectionRatio) {
-                            newRatios[index] = entry.intersectionRatio;
-                            hasChanges = true;
-                        }
-                    });
-                    return hasChanges ? newRatios : prev;
-                });
-            });
-        }, { rootMargin: '200px', threshold: [1], ...options });
-        refs.forEach(ref => {
-            if (ref.current) {
-                observer.observe(ref.current);
-            }
-        });
-        return () => {
-            refs.forEach(ref => {
-                if (ref.current) {
-                    observer.unobserve(ref.current);
-                }
-            });
-        };
-    }, [refs, options]);
-    return intersectionRatio;
-};
-export default useIntersectionObserver;

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

@@ -1,3 +0,0 @@
-import { KeyCode } from "../types/enums";
-declare const useKeyBind: (key: KeyCode, fun: () => void) => void;
-export default useKeyBind;

package/dist/esm/hooks/useKeyBind.js

@@ -1,4 +0,0 @@
-const useKeyBind = (key, fun) => {
-    // bindKey()
-};
-export default useKeyBind;

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

@@ -1,25 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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/useMediaPlayer.d.ts

@@ -1,32 +0,0 @@
-export type MediaType = "video" | "audio";
-export type MediaPlayerProps = {
-    src: string;
-    type?: MediaType;
-    autoPlay?: boolean;
-    loop?: boolean;
-    controls?: boolean;
-};
-declare const useMediaPlayer: ({ src, type, autoPlay, loop, controls }: MediaPlayerProps) => {
-    mediaRef: import("react").RefObject<(HTMLVideoElement & HTMLAudioElement) | null>;
-    isPlaying: boolean;
-    togglePlay: () => void;
-    seek: (time: number) => void;
-    volume: number;
-    changeVolume: (newVolume: number) => void;
-    isFullscreen: boolean;
-    toggleFullscreen: () => void;
-    currentTime: number;
-    duration: number;
-    handleTimeUpdate: () => void;
-    handleLoadedMetadata: () => void;
-    mediaProps: {
-        ref: import("react").RefObject<(HTMLVideoElement & HTMLAudioElement) | null>;
-        src: string;
-        autoPlay: boolean;
-        loop: boolean;
-        controls: boolean;
-        onTimeUpdate: () => void;
-        onLoadedMetadata: () => void;
-    };
-};
-export default useMediaPlayer;

package/dist/esm/hooks/useMediaPlayer.js

@@ -1,86 +0,0 @@
-"use client";
-import { useCallback, useRef, useState } from "react";
-const useMediaPlayer = ({ src, type = "video", autoPlay = false, loop = false, controls = false }) => {
-    const mediaRef = useRef(null);
-    const [isPlaying, setIsPlaying] = useState(autoPlay);
-    const [volume, setVolume] = useState(1);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-    // Play / Pause toggle
-    const togglePlay = useCallback(() => {
-        if (mediaRef.current) {
-            if (mediaRef.current.paused) {
-                mediaRef.current.play();
-                setIsPlaying(true);
-            }
-            else {
-                mediaRef.current.pause();
-                setIsPlaying(false);
-            }
-        }
-    }, []);
-    // Seek media
-    const seek = useCallback((time) => {
-        if (mediaRef.current) {
-            mediaRef.current.currentTime = time;
-            setCurrentTime(time);
-        }
-    }, []);
-    // Change volume
-    const changeVolume = useCallback((newVolume) => {
-        if (mediaRef.current) {
-            mediaRef.current.volume = newVolume;
-            setVolume(newVolume);
-        }
-    }, []);
-    // Toggle fullscreen (only for video)
-    const toggleFullscreen = useCallback(() => {
-        if (type === "video" && mediaRef.current) {
-            if (!document.fullscreenElement) {
-                mediaRef.current.requestFullscreen?.();
-                setIsFullscreen(true);
-            }
-            else {
-                document.exitFullscreen?.();
-                setIsFullscreen(false);
-            }
-        }
-    }, [type]);
-    // Update time
-    const handleTimeUpdate = useCallback(() => {
-        if (mediaRef.current) {
-            setCurrentTime(mediaRef.current.currentTime);
-        }
-    }, []);
-    // Set duration
-    const handleLoadedMetadata = useCallback(() => {
-        if (mediaRef.current) {
-            setDuration(mediaRef.current.duration);
-        }
-    }, []);
-    return {
-        mediaRef,
-        isPlaying,
-        togglePlay,
-        seek,
-        volume,
-        changeVolume,
-        isFullscreen,
-        toggleFullscreen,
-        currentTime,
-        duration,
-        handleTimeUpdate,
-        handleLoadedMetadata,
-        mediaProps: {
-            ref: mediaRef,
-            src,
-            autoPlay,
-            loop,
-            controls,
-            onTimeUpdate: handleTimeUpdate,
-            onLoadedMetadata: handleLoadedMetadata,
-        },
-    };
-};
-export default useMediaPlayer;

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

@@ -1,2 +0,0 @@
-declare const useMergedRefs: <T>(...refs: (React.Ref<T> | undefined)[]) => (node: T) => void;
-export default useMergedRefs;

package/dist/esm/hooks/useMergedRefs.js

@@ -1,14 +0,0 @@
-import { useCallback } from "react";
-const useMergedRefs = (...refs) => {
-    return useCallback((node) => {
-        refs.forEach((ref) => {
-            if (!ref)
-                return;
-            if (typeof ref === "function")
-                ref(node);
-            else if ("current" in ref)
-                ref.current = node;
-        });
-    }, [refs]);
-};
-export default useMergedRefs;

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

@@ -1,17 +0,0 @@
-/**
- * Custom hook that sets a mounted state to true after a specified delay.
- *
- * @param {number} [delay=100] - The delay in milliseconds before setting the mounted state to true.
- * @returns {boolean} - The mounted state.
- *
- * @example
- * const isMounted = useMounted(200);
- *
- * useEffect(() => {
- *   if (isMounted) {
- *     // Component is mounted after 200ms
- *   }
- * }, [isMounted]);
- */
-declare const useMounted: (delay?: number) => boolean;
-export default useMounted;

package/dist/esm/hooks/useMounted.js

@@ -1,25 +0,0 @@
-import { useState, useEffect } from 'react';
-/**
- * Custom hook that sets a mounted state to true after a specified delay.
- *
- * @param {number} [delay=100] - The delay in milliseconds before setting the mounted state to true.
- * @returns {boolean} - The mounted state.
- *
- * @example
- * const isMounted = useMounted(200);
- *
- * useEffect(() => {
- *   if (isMounted) {
- *     // Component is mounted after 200ms
- *   }
- * }, [isMounted]);
- */
-const useMounted = (delay = 100) => {
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        const timer = setTimeout(() => setMounted(true), delay);
-        return () => clearTimeout(timer); // Cleanup the timer on unmount
-    }, [delay]);
-    return mounted;
-};
-export default useMounted;

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

@@ -1,3 +0,0 @@
-export type MutationCallback = (mutations: MutationRecord[], observer: MutationObserver) => void;
-declare const useMutationObserver: (target: HTMLElement | null, callback: MutationCallback, options?: MutationObserverInit) => void;
-export default useMutationObserver;

package/dist/esm/hooks/useMutationObserver.js

@@ -1,20 +0,0 @@
-"use client";
-import { useEffect, useRef } from "react";
-const useMutationObserver = (target, callback, options = { childList: true, subtree: true }) => {
-    const observerRef = useRef(null);
-    useEffect(() => {
-        if (!target)
-            return;
-        // Create a new MutationObserver and pass the callback
-        observerRef.current = new MutationObserver(callback);
-        // Start observing the target element
-        observerRef.current.observe(target, options);
-        // Cleanup function to disconnect the observer
-        return () => {
-            if (observerRef.current) {
-                observerRef.current.disconnect();
-            }
-        };
-    }, [target, callback, options]);
-};
-export default useMutationObserver;

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

@@ -1,2 +0,0 @@
-declare const useNetworkStatus: () => boolean | null;
-export default useNetworkStatus;

package/dist/esm/hooks/useNetworkStatus.js

@@ -1,19 +0,0 @@
-"use client";
-import { useEffect, useState } from 'react';
-const useNetworkStatus = () => {
-    const [isOnline, setIsOnline] = useState(null);
-    const updateNetworkStatus = () => {
-        setIsOnline(navigator.onLine);
-    };
-    useEffect(() => {
-        setTimeout(() => setIsOnline(navigator.onLine));
-        window.addEventListener('online', updateNetworkStatus);
-        window.addEventListener('offline', updateNetworkStatus);
-        return () => {
-            window.removeEventListener('online', updateNetworkStatus);
-            window.removeEventListener('offline', updateNetworkStatus);
-        };
-    }, []);
-    return isOnline;
-};
-export default useNetworkStatus;

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

@@ -1,14 +0,0 @@
-interface Countdown {
-    minutes: number;
-    seconds: number;
-    formatted: string;
-    nextBoundary: Date;
-}
-/**
- * React hook that counts down to the next N-minute boundary.
- *
- * @param intervalMinutes The interval in minutes (e.g., 1, 5, 15, 30, 60)
- * @returns Countdown info + next boundary time
- */
-declare const useNextInterval: (intervalMinutes?: number) => Countdown;
-export default useNextInterval;

package/dist/esm/hooks/useNextInterval.js

@@ -1,54 +0,0 @@
-import { useEffect, useState } from 'react';
-/**
- * React hook that counts down to the next N-minute boundary.
- *
- * @param intervalMinutes The interval in minutes (e.g., 1, 5, 15, 30, 60)
- * @returns Countdown info + next boundary time
- */
-const useNextInterval = (intervalMinutes = 15) => {
-    if (intervalMinutes <= 0) {
-        throw new Error('intervalMinutes must be greater than 0');
-    }
-    const calculateNextBoundary = (now) => {
-        const next = new Date(now);
-        const minutes = next.getMinutes();
-        const remainder = minutes % intervalMinutes;
-        if (remainder === 0) {
-            // Exactly on a boundary → go to next one
-            next.setMinutes(minutes + intervalMinutes);
-        }
-        else {
-            // Round up to next boundary
-            next.setMinutes(minutes + (intervalMinutes - remainder));
-        }
-        // Reset seconds and milliseconds
-        next.setSeconds(0);
-        next.setMilliseconds(0);
-        return next;
-    };
-    const [nextBoundary, setNextBoundary] = useState(() => calculateNextBoundary(new Date()));
-    useEffect(() => {
-        const update = () => {
-            const now = new Date();
-            const next = calculateNextBoundary(now);
-            if (next.getTime() !== nextBoundary.getTime()) {
-                setNextBoundary(next);
-            }
-        };
-        update(); // Initial sync
-        const interval = setInterval(update, 1000);
-        return () => clearInterval(interval);
-    }, [intervalMinutes, nextBoundary]);
-    const now = new Date();
-    const diffMs = Math.max(0, nextBoundary.getTime() - now.getTime());
-    const totalMinutes = Math.floor(diffMs / 60000);
-    const seconds = Math.floor((diffMs % 60000) / 1000);
-    const formatted = `${totalMinutes}m ${seconds.toString().padStart(2, '0')}s`;
-    return {
-        minutes: totalMinutes,
-        seconds,
-        formatted,
-        nextBoundary,
-    };
-};
-export default useNextInterval;

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

@@ -1,32 +0,0 @@
-export type MediaType = "video" | "audio";
-export type MediaPlayerProps = {
-    src: string;
-    type?: MediaType;
-    autoPlay?: boolean;
-    loop?: boolean;
-    controls?: boolean;
-};
-declare const useMediaPlayer: ({ src, type, autoPlay, loop, controls }: MediaPlayerProps) => {
-    mediaRef: import("react").RefObject<(HTMLVideoElement & HTMLAudioElement) | null>;
-    isPlaying: boolean;
-    togglePlay: () => void;
-    seek: (time: number) => void;
-    volume: number;
-    changeVolume: (newVolume: number) => void;
-    isFullscreen: boolean;
-    toggleFullscreen: () => void;
-    currentTime: number;
-    duration: number;
-    handleTimeUpdate: () => void;
-    handleLoadedMetadata: () => void;
-    mediaProps: {
-        ref: import("react").RefObject<(HTMLVideoElement & HTMLAudioElement) | null>;
-        src: string;
-        autoPlay: boolean;
-        loop: boolean;
-        controls: boolean;
-        onTimeUpdate: () => void;
-        onLoadedMetadata: () => void;
-    };
-};
-export default useMediaPlayer;