@zuzjs/ui 0.7.8 → 0.7.9

package/dist/esm/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/esm/hooks/useSheet.js

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

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

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

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

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

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