@zuzjs/ui 0.7.7 → 0.7.9

package/dist/cjs/hooks/useBase.js

@@ -1,7 +1,7 @@
 import { cleanProps, css } from "../funs";
 import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
 import { cssFilterKeys, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
-import useDrag from "./useDrag";
+let useDrag = null;
 const buildSkeletonStyle = (s) => {
     const makeValue = (v, unit = `px`) => {
         return v ?
@@ -29,12 +29,15 @@ const buildSkeletonStyle = (s) => {
     return style;
 };
 const useBase = (props) => {
-    const { as, fx, animate, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
+    const { as, fx, animate, transition: autoTransition, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
     let cx = [];
     if (as) {
         cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
     }
-    const { transition, from, to, when, duration, delay, curve } = fx || animate || {};
+    const { transition, from, to, when, duration, delay, curve } = autoTransition ? {
+        transition: autoTransition,
+        duration: 0.3
+    } : fx || animate || {};
     let _style = {};
     if (undefined === when) {
         _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };
@@ -67,19 +70,30 @@ const useBase = (props) => {
         });
         _transition.transition = _transitionList.join(`, `);
     }
-    // console.log(_style, _transition)
-    const drag = useDrag(dragOptions);
+    // // console.log(_style, _transition)
+    const is = typeof window !== "undefined";
     let dragProps = {};
     let dragStyle = {};
-    if (draggable) {
-        dragProps = {
-            onMouseDown: drag.onMouseDown,
-        };
-        dragStyle = {
-            transform: `translate(${drag.position.x}px, ${drag.position.y}px)`,
-        };
+    if (draggable && is) {
+        if (!useDrag) {
+            import("./useDrag")
+                .then(module => {
+                useDrag = module.default;
+            })
+                .catch(err => {
+                console.error("Error loading useDrag:", err);
+            });
+        }
+        if (useDrag) {
+            const drag = useDrag(dragOptions);
+            dragProps = {
+                onMouseDown: drag.onMouseDown,
+            };
+            dragStyle = {
+                transform: `translate(${drag.position.x}px, ${drag.position.y}px)`,
+            };
+        }
     }
-    // console.log(`x`, buildWithStyles(_style),)
     return {
         style: {
             ...buildWithStyles(_style),

package/dist/cjs/hooks/useCalendar.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 const isLeapYear = (year) => {
     return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);

package/dist/cjs/hooks/useColorScheme.js

@@ -71,8 +71,8 @@ const Theme = ({ children, storageKey, forceTheme }) => {
     useEffect(() => {
         applyColorScheme((forceTheme || colorScheme || `system`));
     }, [colorScheme]);
-    return (_jsxs(ThemeContext, { value: { colorScheme: colorScheme, resolvedScheme: resolvedTheme, setColorScheme: switchColorScheme }, children: [_jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: {
-                    __html: forceTheme ? `` : `const el = document.documentElement
+    return (_jsxs(ThemeContext, { value: { colorScheme: colorScheme, resolvedScheme: resolvedTheme, setColorScheme: switchColorScheme }, children: [forceTheme ? null : _jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: {
+                    __html: `const el = document.documentElement
                     const themes = ['light', 'dark']
                     let theme = localStorage.getItem(\`${storageKey}\`) || "system";
                     if (theme === "system") {

package/dist/cjs/hooks/useContextMenu.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 const useContextMenu = (menu) => {
     const show = (e, items) => {

package/dist/cjs/hooks/useDB.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useRef, useState } from "react";
 var DBMode;
 (function (DBMode) {

package/dist/cjs/hooks/useDebounce.js

@@ -1,4 +1,5 @@
-import { useRef, useCallback } from "react";
+"use client";
+import { useCallback, useRef } from "react";
 const useDebounce = (func, delay) => {
     const timeoutRef = useRef(null);
     const debouncedFunction = useCallback((...args) => {

package/dist/cjs/hooks/useDelayed.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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/cjs/hooks/useDelayed.js

@@ -0,0 +1,26 @@
+"use client";
+import { useEffect, useState } 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/cjs/hooks/useDevice.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 import useDimensions from './useDimensions';
 const useDevice = () => {

package/dist/cjs/hooks/useDimensions.js

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+"use client";
+import { useEffect, useState } from 'react';
 const useDimensions = (el) => {
     const [dims, setDims] = useState({
         width: 0,

package/dist/cjs/hooks/useDom.d.ts

@@ -0,0 +1,2 @@
+declare const useDom: () => void;
+export default useDom;

package/dist/cjs/hooks/useDom.js

@@ -0,0 +1,3 @@
+const useDom = () => {
+};
+export default useDom;

package/dist/cjs/hooks/useDomMutation.d.ts

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

package/dist/cjs/hooks/useDomMutation.js

@@ -0,0 +1,19 @@
+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/cjs/hooks/useDrag.js

@@ -1,4 +1,5 @@
-import { useRef, useState, useEffect } from 'react';
+"use client";
+import { useEffect, useRef, useState } from 'react';
 import { DRAG_DIRECTION } from '../types/enums';
 const useDrag = (dragOptions) => {
     const { direction, snap, limits } = dragOptions || {

package/dist/cjs/hooks/useFileManager.d.ts

@@ -0,0 +1,2 @@
+declare const useFileManager: () => void;
+export default useFileManager;

package/dist/cjs/hooks/useFileManager.js

@@ -0,0 +1,3 @@
+const useFileManager = () => {
+};
+export default useFileManager;

package/dist/cjs/hooks/useImage.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useRef, useState } from "react";
 const useImage = (url, crossOrigin, referrerPolicy) => {
     const img = useRef(null);

package/dist/cjs/hooks/useIntersectionObserver.js

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+"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(() => {

package/dist/cjs/hooks/useMediaPlayer.d.ts

@@ -0,0 +1,32 @@
+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/cjs/hooks/useMediaPlayer.js

@@ -0,0 +1,86 @@
+"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/cjs/hooks/useMergedRefs.d.ts

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

package/dist/cjs/hooks/useMergedRefs.js

@@ -0,0 +1,14 @@
+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/cjs/hooks/useMutationObserver.d.ts

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

package/dist/cjs/hooks/useMutationObserver.js

@@ -0,0 +1,20 @@
+"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/cjs/hooks/useNetworkStatus.js

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+"use client";
+import { useEffect, useState } from 'react';
 const useNetworkStatus = () => {
     const [isOnline, setIsOnline] = useState(null);
     const updateNetworkStatus = () => {

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

@@ -0,0 +1,32 @@
+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/cjs/hooks/usePlayer.js

@@ -0,0 +1,85 @@
+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/cjs/hooks/useResizeObserver.js

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+"use client";
+import { useEffect, useState } from 'react';
 const useResizeObserver = (ref) => {
     const [size, setSize] = useState({ width: 0, height: 0, top: 0, left: 0 });
     useEffect(() => {

package/dist/cjs/hooks/useScrollbar.d.ts

@@ -0,0 +1,16 @@
+export interface ScrollBreakpoint {
+    [key: number]: () => void;
+}
+declare const useScrollbar: (breakpoints?: ScrollBreakpoint) => {
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    thumbY: import("react").RefObject<HTMLDivElement | null>;
+    thumbX: import("react").RefObject<HTMLDivElement | null>;
+    scrollToTop: () => void | undefined;
+    scrollToBottom: () => void | undefined;
+    scrollToLeft: () => void | undefined;
+    scrollToRight: () => void | undefined;
+    onScrollY: (e: React.MouseEvent) => void;
+    onScrollX: (e: React.MouseEvent) => void;
+};
+export default useScrollbar;