@zuzjs/ui 0.7.8 → 0.7.9

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;

package/dist/cjs/hooks/useScrollbar.js

@@ -0,0 +1,160 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+import { useMutationObserver } from "..";
+const useScrollbar = (breakpoints = {}) => {
+    const rootRef = useRef(null);
+    const containerRef = useRef(null);
+    const thumbY = useRef(null);
+    const thumbX = useRef(null);
+    const isDraggingY = useRef(false);
+    const isDraggingX = useRef(false);
+    const dragStartX = useRef(0);
+    const dragStartY = useRef(0);
+    const scrollStartY = useRef(0);
+    const scrollStartX = useRef(0);
+    const thumbHeight = useRef(30); // Default min height
+    const thumbWidth = useRef(30); // Default min height
+    const updateThumb = useCallback(() => {
+        if (!containerRef.current || !thumbY.current || !thumbX.current)
+            return;
+        const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } = containerRef.current;
+        //Y thumb
+        const thumbSizeY = Math.max((clientHeight / scrollHeight) * clientHeight, 30); // Min thumb size: 30px
+        thumbHeight.current = thumbSizeY;
+        const thumbPosY = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbSizeY);
+        thumbY.current.style.height = `${thumbSizeY}px`;
+        thumbY.current.style.top = `${thumbPosY}px`;
+        //X thumb
+        const thumbSizeX = Math.max((clientWidth / scrollWidth) * clientWidth, 30); // Min thumb size: 30px
+        thumbWidth.current = thumbSizeX;
+        const thumbPosX = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbSizeX);
+        thumbX.current.style.width = `${thumbSizeX}px`;
+        thumbX.current.style.left = `${thumbPosX}px`;
+        if (thumbY.current.clientHeight == clientHeight && rootRef) {
+            rootRef.current?.classList.add(`--no-y`);
+        }
+        else
+            rootRef.current?.classList.remove(`--no-y`);
+        if (thumbX.current.clientWidth == clientWidth && rootRef) {
+            rootRef.current?.classList.add(`--no-x`);
+        }
+        else
+            rootRef.current?.classList.remove(`--no-x`);
+    }, []);
+    const postScroll = (scrollPercentY) => {
+        updateThumb();
+        // Trigger breakpoints
+        Object.keys(breakpoints).forEach((key) => {
+            const breakpoint = parseFloat(key);
+            if (Math.abs(scrollPercentY - breakpoint) < 1) {
+                breakpoints[breakpoint]?.();
+            }
+        });
+    };
+    const handleScroll = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+        const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
+        const scrollPercentX = (scrollLeft / (scrollWidth - clientWidth)) * 100;
+        postScroll(scrollPercentY);
+        postScroll(scrollPercentX);
+    }, [breakpoints, updateThumb]);
+    // Dragging logic
+    const onScrollY = (e) => {
+        isDraggingY.current = true;
+        dragStartY.current = e.clientY;
+        scrollStartY.current = containerRef.current?.scrollTop || 0;
+        document.body.style.userSelect = "none";
+        if (rootRef.current)
+            rootRef.current?.classList.add(`--scrolling`);
+    };
+    const onScrollX = (e) => {
+        isDraggingX.current = true;
+        dragStartX.current = e.clientX;
+        scrollStartX.current = containerRef.current?.scrollLeft || 0;
+        document.body.style.userSelect = "none";
+        if (rootRef.current)
+            rootRef.current?.classList.add(`--scrolling`);
+    };
+    const handleDragMove = useCallback((e) => {
+        if (!containerRef.current || !thumbY.current || !thumbX.current)
+            return;
+        const { clientHeight, scrollHeight, clientWidth, scrollWidth } = containerRef.current;
+        if (isDraggingY.current) {
+            const maxScroll = scrollHeight - clientHeight;
+            const maxThumbMove = clientHeight - thumbHeight.current;
+            const deltaY = e.clientY - dragStartY.current;
+            const newScrollTop = Math.min(Math.max(scrollStartY.current + (deltaY / maxThumbMove) * maxScroll, 0), maxScroll);
+            containerRef.current.scrollTop = newScrollTop;
+        }
+        if (isDraggingX.current) {
+            const maxScrollX = scrollWidth - clientWidth;
+            const maxThumbMoveX = clientWidth - thumbWidth.current;
+            const deltaX = e.clientX - dragStartX.current;
+            const newScrollLeft = Math.min(Math.max(scrollStartX.current + (deltaX / maxThumbMoveX) * maxScrollX, 0), maxScrollX);
+            containerRef.current.scrollLeft = newScrollLeft;
+        }
+    }, []);
+    const handleDragEnd = () => {
+        isDraggingY.current = false;
+        isDraggingX.current = false;
+        document.body.style.userSelect = "";
+        if (rootRef.current)
+            rootRef.current?.classList.remove(`--scrolling`);
+    };
+    const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+    const scrollToBottom = () => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: "smooth" });
+    const scrollToLeft = () => containerRef.current?.scrollTo({ left: 0, behavior: "smooth" });
+    const scrollToRight = () => containerRef.current?.scrollTo({ left: containerRef.current.scrollWidth, behavior: "smooth" });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleWheel = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!containerRef.current)
+                return;
+            // Adjust scrollTop manually based on deltaY
+            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+            if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+                const maxScrollY = scrollHeight - clientHeight;
+                let newScrollTop = scrollTop + e.deltaY;
+                newScrollTop = Math.max(0, Math.min(newScrollTop, maxScrollY));
+                containerRef.current.scrollTop = newScrollTop;
+            }
+            if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+                const maxScrollX = scrollWidth - clientWidth;
+                let newScrollLeft = scrollLeft + e.deltaX;
+                newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollX));
+                containerRef.current.scrollLeft = newScrollLeft;
+            }
+            const scrollPercentY = (containerRef.current.scrollTop / (containerRef.current.scrollHeight - clientHeight)) * 100;
+            const scrollPercentX = (containerRef.current.scrollLeft / (containerRef.current.scrollWidth - clientWidth)) * 100;
+            postScroll(scrollPercentY);
+            postScroll(scrollPercentX);
+        };
+        window.addEventListener("resize", updateThumb);
+        container.addEventListener("scroll", handleScroll);
+        // Prevent blocking default scrolling (fixes touchpad scrolling)
+        container.addEventListener("wheel", handleWheel, { passive: false });
+        document.addEventListener("mousemove", handleDragMove);
+        document.addEventListener("mouseup", handleDragEnd);
+        updateThumb();
+        return () => {
+            window.removeEventListener("resize", updateThumb);
+            window.removeEventListener("wheel", handleWheel);
+            container.removeEventListener("scroll", handleScroll);
+            document.removeEventListener("mousemove", handleDragMove);
+            document.removeEventListener("mouseup", handleDragEnd);
+        };
+    }, [handleScroll, handleDragMove, updateThumb]);
+    useMutationObserver(containerRef.current, updateThumb);
+    return {
+        rootRef, containerRef, thumbY, thumbX,
+        scrollToTop, scrollToBottom, scrollToLeft, scrollToRight,
+        onScrollY, onScrollX
+    };
+};
+export default useScrollbar;

package/dist/cjs/hooks/useSheet.js

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

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

@@ -0,0 +1,7 @@
+import { KeyCode } from "../types/enums";
+export type Shortcut = {
+    keys: KeyCode[];
+    callback: (event: KeyboardEvent) => void;
+};
+declare const useShortcuts: (shortcuts: Shortcut[], preventDefault?: boolean) => void;
+export default useShortcuts;

package/dist/cjs/hooks/useShortcuts.js

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect } from "react";
+import { KeyCode } from "../types/enums";
+const useShortcuts = (shortcuts, preventDefault) => {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            const pressedKeys = [];
+            if (event.ctrlKey)
+                pressedKeys.push(KeyCode.Ctrl);
+            if (event.shiftKey)
+                pressedKeys.push(KeyCode.Shift);
+            if (event.altKey)
+                pressedKeys.push(KeyCode.Alt);
+            if (event.metaKey)
+                pressedKeys.push(KeyCode.PauseBreak); // Meta key (Cmd on Mac)
+            pressedKeys.push(event.keyCode); // Convert event key to KeyCode enum
+            shortcuts.forEach(({ keys, callback }) => {
+                if (keys.every(key => pressedKeys.includes(key))) {
+                    if (preventDefault ?? true)
+                        event.preventDefault();
+                    callback(event);
+                }
+            });
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [shortcuts, preventDefault]);
+};
+export default useShortcuts;

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

@@ -0,0 +1,7 @@
+declare const useSlider: () => {
+    push: (key: string) => void;
+    goBack: () => void;
+    prevKey: string | null;
+    direction: "right" | "left";
+};
+export default useSlider;

package/dist/cjs/hooks/useSlider.js

@@ -0,0 +1,23 @@
+"use client";
+import { useState } from "react";
+import { useViewTransition } from "..";
+const useSlider = () => {
+    const [history, setHistory] = useState(["root"]);
+    const [prevKey, setPrevKey] = useState(null);
+    const [direction, setDirection] = useState("left");
+    const startTransition = useViewTransition();
+    const push = (key) => {
+        setDirection("left");
+        setPrevKey(history[history.length - 1]);
+        startTransition(() => setHistory((prev) => [...prev, key]));
+    };
+    const goBack = () => {
+        if (history.length <= 1)
+            return;
+        setDirection("right");
+        setPrevKey(history[history.length - 1]);
+        startTransition(() => setHistory((prev) => prev.slice(0, -1)));
+    };
+    return { push, goBack, prevKey, direction };
+};
+export default useSlider;

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

@@ -0,0 +1,2 @@
+declare const useTruncateText: (lines: number) => import("react").RefObject<HTMLDivElement | null>;
+export default useTruncateText;

package/dist/cjs/hooks/useTruncateText.js

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect, useRef } from "react";
+const useTruncateText = (lines) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const el = ref.current;
+        const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
+        const maxHeight = lineHeight * lines;
+        while (el.scrollHeight > maxHeight) {
+            el.textContent = el.textContent?.trim().slice(0, -1) + "…";
+        }
+    }, [lines]);
+    return ref;
+};
+export default useTruncateText;

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

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

package/dist/cjs/hooks/useViewTransition.js

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+const useViewTransition = () => {
+    const startTransition = useCallback((callback) => {
+        if (document.startViewTransition) {
+            document.startViewTransition(callback);
+        }
+        else {
+            callback(); // Fallback for browsers without View Transitions
+        }
+    }, []);
+    return startTransition;
+};
+export default useViewTransition;

package/dist/cjs/types/enums.d.ts

@@ -104,6 +104,7 @@ export declare enum KeyCode {
     Ctrl = 17,
     Alt = 18,
     PauseBreak = 19,
+    Command = 19,
     CapsLock = 20,
     Escape = 27,
     Space = 32,

package/dist/cjs/types/enums.js

@@ -138,6 +138,7 @@ export var KeyCode;
     KeyCode[KeyCode["Ctrl"] = 17] = "Ctrl";
     KeyCode[KeyCode["Alt"] = 18] = "Alt";
     KeyCode[KeyCode["PauseBreak"] = 19] = "PauseBreak";
+    KeyCode[KeyCode["Command"] = 19] = "Command";
     KeyCode[KeyCode["CapsLock"] = 20] = "CapsLock";
     KeyCode[KeyCode["Escape"] = 27] = "Escape";
     KeyCode[KeyCode["Space"] = 32] = "Space";

package/dist/cjs/types/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { DragOptions } from "../hooks";
-import { SHIMMER, SORT } from "./enums";
+import { SHIMMER, SORT, TRANSITIONS } from "./enums";
 import { animationProps, Skeleton } from "./interfaces";
 export type Deprecated<T, M extends string> = T & {
     __deprecatedMessage?: M;
@@ -45,6 +45,7 @@ export interface ZuzProps {
     animate?: animationProps;
     /** Animation configuration using {@link animationProps} */
     fx?: animationProps;
+    transition?: TRANSITIONS;
     /** Skeleton placeholder configuration using {@link Skeleton} */
     skeleton?: Skeleton;
     /** Additional class names for styling the component */

package/dist/cjs/types/interfaces.d.ts

@@ -10,6 +10,8 @@ export interface animationProps {
      * {@link TRANSITIONS}
      */
     transition?: TRANSITIONS;
+    /** This will be removed / added to default calculations for x, y */
+    offset?: number;
     /** Starting style properties for the animation */
     from?: dynamicObject;
     /** Target style properties after the animation completes */