@zuzjs/ui 0.7.8 → 0.7.9

package/dist/esm/funs/index.js

@@ -536,3 +536,13 @@ export const slugify = (text, separator = "-") => {
         .replace(new RegExp(`\\${separator}{2,}`, "g"), separator) // Remove duplicate separators
         .replace(new RegExp(`^\\${separator}|\\${separator}$`, "g"), ""); // Trim separators from ends
 };
+export const truncate = (selector, lines = 2) => {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach((el) => {
+        const lineHeight = parseFloat(window.getComputedStyle(el).lineHeight);
+        const maxHeight = lineHeight * lines;
+        while (el.scrollHeight > maxHeight) {
+            el.textContent = el.textContent?.trim().slice(0, -1) + '…';
+        }
+    });
+};

package/dist/esm/funs/stylesheet.js

@@ -325,14 +325,19 @@ export const cssDirect = {
     "brightness": "filter: brightness(__VALUE__);",
     "ratio": "aspect-ratio: __VALUE__;",
     "center-h": "left: 50%;transform: translateX(-50%);",
+    "center-x": "left: 50%;transform: translateX(-50%);",
     "center-v": "top: 50%;transform: translateY(-50%);",
+    "center-y": "top: 50%;transform: translateY(-50%);",
     "no-overflow": "overflow: hidden;",
+    "no-overflow-x": "overflow-x: hidden;",
+    "no-overflow-y": "overflow-y: hidden;",
     "overflow-x": "overflow-x: auto;",
     "overflow-y": "overflow-x: auto;",
     "space-pre": "white-space: pre;",
     "white-space-pre": "white-space: pre;",
     "text-wrap": "width: 98%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;",
     "text-clip": "color: transparent;background-clip: text;-webkit-background-clip: text;",
+    "word-break": "wordc-break: break-word;",
 };
 export const cssPropsWithColor = [
     // Regular CSS keys

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

@@ -5,16 +5,23 @@ export { useColorScheme } from './useColorScheme';
 export { default as useContextMenu } from './useContextMenu';
 export { default as useDB, type IDBOptions, type IDBSchema } from './useDB';
 export { default as useDebounce } from './useDebounce';
+/**
+ * @deprecated use useDelayed hook instead
+ */
+export { default as useDelayed, default as useMounted } from './useDelayed';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
+export { default as useMediaPlayer, type MediaPlayerProps, type MediaType } from './useMediaPlayer';
+export { default as useMergedRefs } from './useMergedRefs';
+export { default as useMutationObserver, type MutationCallback } from './useMutationObserver';
 export { default as useDrag, type DragOptions } from './useDrag';
+export { default as useFileManager } from './useFileManager';
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
-export { default as useKeyBind } from './useKeyBind';
-/**
- * @deprecated use useDelayed hook instead
- */
-export { default as useMounted } from './useDelayed';
-export { default as useDelayed } from './useDelayed';
+export { default as useScrollbar } from './useScrollbar';
+export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
+export { default as useSlider } from './useSlider';
+export { default as useTruncateText } from './useTruncateText';
+export { default as useViewTransition } from './useViewTransition';

package/dist/esm/hooks/index.js

@@ -5,17 +5,24 @@ export { useColorScheme } from './useColorScheme';
 export { default as useContextMenu } from './useContextMenu';
 export { default as useDB } from './useDB';
 export { default as useDebounce } from './useDebounce';
+/**
+ * @deprecated use useDelayed hook instead
+ */
+export { default as useDelayed, default as useMounted } from './useDelayed';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
+export { default as useMediaPlayer } from './useMediaPlayer';
+export { default as useMergedRefs } from './useMergedRefs';
+export { default as useMutationObserver } from './useMutationObserver';
 export { default as useDrag } from './useDrag';
+export { default as useFileManager } from './useFileManager';
+//useFilter
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
-export { default as useKeyBind } from './useKeyBind';
-/**
- * @deprecated use useDelayed hook instead
- */
-export { default as useMounted } from './useDelayed';
-export { default as useDelayed } from './useDelayed';
+export { default as useScrollbar } from './useScrollbar';
+export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
-// export { default as useDomSelector } from './useDomSelector';
+export { default as useSlider } from './useSlider';
+export { default as useTruncateText } from './useTruncateText';
+export { default as useViewTransition } from './useViewTransition';

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

@@ -1,4 +1,3 @@
-import { RefObject } from "react";
 export type AnchorOptions = {
     offsetX?: number;
     offsetY?: number;
@@ -9,6 +8,6 @@ declare const useAnchorPosition: (parent?: HTMLElement, event?: MouseEvent, opti
         top: number;
         left: number;
     };
-    targetRef: RefObject<HTMLDivElement | null>;
+    targetRef: import("react").RefObject<HTMLDivElement | null>;
 };
 export default useAnchorPosition;

package/dist/esm/hooks/useAnchorPosition.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 const useAnchorPosition = (parent, event, options = {}) => {
     const [position, setPosition] = useState({ top: 0, left: 0 });

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

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

package/dist/esm/hooks/useDB.js

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

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

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+"use client";
+import { useEffect, useState } from 'react';
 /**
  * Custom hook that sets a mounted state to true after a specified delay.
  *

package/dist/esm/hooks/useDevice.js

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

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

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

package/dist/esm/hooks/useDom.js

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

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

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

package/dist/esm/hooks/useFileManager.js

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

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