@zuzjs/ui 0.7.8 → 0.7.9

package/dist/cjs/comps/Treeview/types.d.ts

@@ -33,8 +33,8 @@ export type TreeItemProps = BoxProps & {
     treeTag: string;
     meta: TreeNode;
     nodes: TreeNode[];
-    isRoot: boolean;
     expanded: boolean;
+    roots: string[];
     onSelect: (tag: string) => void;
     selected?: String;
     icons?: TreeNodeIcons;

package/dist/cjs/comps/VideoPlayer/index.d.ts

@@ -0,0 +1,2 @@
+declare const VideoPlayer: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export default VideoPlayer;

package/dist/cjs/comps/VideoPlayer/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+const VideoPlayer = forwardRef((props, ref) => {
+    return _jsx(Box, {});
+});
+export default VideoPlayer;

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

@@ -9,7 +9,7 @@ export { default as AutoComplete } from './AutoComplete';
 export * from './AutoComplete/types';
 export { default as Avatar } from './Avatar';
 export * from './Avatar/types';
-export { type BoxProps, default as Box } from './Box';
+export { default as Box, type BoxProps } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
 export { default as CheckBox } from './CheckBox';
@@ -19,7 +19,9 @@ export { default as ContextMenu } from './ContextMenu';
 export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
-export { type CoverProps, default as Cover } from './Cover';
+export { default as Cover, type CoverProps } from './Cover';
+export { default as Crumb } from './Crumb';
+export * from './Crumb/types';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
 /**Editor */
@@ -29,43 +31,49 @@ export * from './Editor/types';
 export { default as withEditor } from './Editor/withEditor';
 export { default as Fab } from './Fab';
 export * from './Fab/types';
-export { type FilterProps, default as Filters } from './Filters';
-export { type FormProps, default as Form } from './Form';
-export { type IconProps, default as Icon } from './Icon';
-export { type ImageProps, default as Image } from './Image';
-export { type InputProps, default as Input } from './Input';
-export { type LabelProps, default as Label } from './Label';
+export { default as Filters, type FilterProps } from './Filters';
+export { default as Form } from './Form';
+export * from './Form/types';
+export { default as Icon, type IconProps } from './Icon';
+export { default as Image, type ImageProps } from './Image';
+export { default as Input, type InputProps } from './Input';
+export { default as KeyboardKeys } from './KeyboardKeys';
+export * from './KeyboardKeys/types';
+export { default as Label, type LabelProps } from './Label';
 export { default as List } from './List';
 export * from './List/types';
 export { default as NetworkStatus } from './Network';
 export * from './Network/types';
-export { type OverlayProps, default as Overlay } from './Overlay';
-export { type PasswordProps, default as Password } from './Password';
-export { type PinInputProps, default as PinInput } from './PinInput';
+export { default as Overlay, type OverlayProps } from './Overlay';
+export { default as Password, type PasswordProps } from './Password';
+export { default as PinInput, type PinInputProps } from './PinInput';
 export { default as Pagination } from './Pagination';
 export * from './Pagination/types';
 export { default as ProgressBar } from './ProgressBar';
 export * from './ProgressBar/types';
 export { default as Radio } from './Radio';
 export * from './Radio/types';
-export { type SearchProps, default as Search } from './Search';
+export { default as ScrollView } from './ScrollView';
+export * from './ScrollView/types';
+export { default as Search } from './Search';
+export * from './Search/types';
 export { default as SelectTabs } from './Segmented';
 export * from './Segmented/types';
 export { default as Select } from './Select';
 export * from './Select/types';
-export { type SheetProps, type SheetHandler, default as Sheet } from './Sheet';
+export { default as Sheet, type SheetHandler, type SheetProps } from './Sheet';
 export { default as SideBar } from './Sidebar';
 export * from './Sidebar/types';
-export { type SliderProps, default as Slider } from './Slider';
-export { type SpanProps, default as Span } from './Span';
-export { type SpinnerProps, default as Spinner } from './Spinner';
+export { default as Slider, type SliderProps } from './Slider';
+export { default as Span, type SpanProps } from './Span';
+export { default as Spinner, type SpinnerProps } from './Spinner';
 export { default as Switch } from './Switch';
 export { default as Table } from './Table';
 export * from './Table/types';
 export { default as TabView } from './TabView';
 export * from './TabView/types';
-export { type TextProps, default as Text } from './Text';
-export { type TextAreaProps, default as Textarea } from './TextArea';
+export { default as Text, type TextProps } from './Text';
+export { default as Textarea, type TextAreaProps } from './TextArea';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
 export { default as ToolTip } from './Tooltip';

package/dist/cjs/comps/index.js

@@ -20,6 +20,8 @@ export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
 export { default as Cover } from './Cover';
+export { default as Crumb } from './Crumb';
+export * from './Crumb/types';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
 /**Editor */
@@ -31,9 +33,12 @@ export { default as Fab } from './Fab';
 export * from './Fab/types';
 export { default as Filters } from './Filters';
 export { default as Form } from './Form';
+export * from './Form/types';
 export { default as Icon } from './Icon';
 export { default as Image } from './Image';
 export { default as Input } from './Input';
+export { default as KeyboardKeys } from './KeyboardKeys';
+export * from './KeyboardKeys/types';
 export { default as Label } from './Label';
 export { default as List } from './List';
 export * from './List/types';
@@ -48,7 +53,10 @@ export { default as ProgressBar } from './ProgressBar';
 export * from './ProgressBar/types';
 export { default as Radio } from './Radio';
 export * from './Radio/types';
+export { default as ScrollView } from './ScrollView';
+export * from './ScrollView/types';
 export { default as Search } from './Search';
+export * from './Search/types';
 export { default as SelectTabs } from './Segmented';
 export * from './Segmented/types';
 export { default as Select } from './Select';

package/dist/cjs/funs/css.d.ts

@@ -1,7 +1,7 @@
-import { dynamicObject } from "../types";
+import { OptionValues } from "commander";
 import Hashids from "hashids";
+import { dynamicObject } from "../types";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
-import { OptionValues } from "commander";
 declare class CSS {
     cache: dynamicObject;
     PROPS: dynamicObject;
@@ -52,7 +52,7 @@ declare class CSS {
 export default CSS;
 export declare const buildWithStyles: (source: dynamicObject) => dynamicObject;
 export declare const getAnimationCurve: (curve?: string | TRANSITION_CURVES) => string;
-export declare const animationTransition: (transition: TRANSITIONS) => {
+export declare const animationTransition: (transition: TRANSITIONS, offset?: number, dialog?: boolean) => {
     from: {};
     to: {};
 };

package/dist/cjs/funs/css.js

@@ -1,9 +1,9 @@
-import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
-import { cssAnimationCurves, cssDirect, cssFilterKeys, cssProps, cssPropsWithColor, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 import Hashids from "hashids";
-import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 import md5 from "md5";
 import pc from "picocolors";
+import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
+import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
+import { cssAnimationCurves, cssDirect, cssFilterKeys, cssProps, cssPropsWithColor, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 class CSS {
     cache;
     PROPS;
@@ -935,39 +935,41 @@ export const getAnimationCurve = (curve) => {
     switch (curve.toUpperCase()) {
         case TRANSITION_CURVES.Bounce:
             return `var(--bounce)`;
-            // return `linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%,
-            //     0.1407, 0.25, 0.3908, 0.5625, 0.7654,
-            //     1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657,
-            //     0.7539, 0.75, 0.7539, 0.7657, 0.7852,
-            //     0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532,
-            //     0.9414, 0.9375, 0.9414, 0.9531, 0.9726,
-            //     1, 0.9883, 0.9844, 0.9883, 1 )`
-            break;
         case TRANSITION_CURVES.Spring:
             // return `cubic-bezier(0.2, -0.36, 0, 1.46)`
             return `var(--spring)`;
-            break;
         case TRANSITION_CURVES.EaseInOut:
             // return `cubic-bezier(0.42, 0, 0.58, 1)`
             return `ease-in-out`;
-            break;
         default:
             return `linear`;
     }
 };
-export const animationTransition = (transition) => {
+export const animationTransition = (transition, offset = 0, dialog = false) => {
     let _from = {};
     let _to = {};
     switch (transition) {
         case TRANSITIONS.SlideInLeft:
         case TRANSITIONS.SlideInRight:
-            _from = { x: transition == TRANSITIONS.SlideInLeft ? -20 : 20, opacity: 0 };
-            _to = { x: 0, opacity: 1 };
+            _from = { x: transition == TRANSITIONS.SlideInLeft ?
+                    dialog ? `-${50 + (offset || 10)}%` : -20 :
+                    dialog ? `-${50 - (offset || 10)}%` : 20,
+                y: dialog ? `-50%` : 0,
+                opacity: 0 };
+            _to = { x: dialog ? `-50%` : 0, y: dialog ? `-50%` : 0, opacity: 1 };
             break;
         case TRANSITIONS.SlideInTop:
         case TRANSITIONS.SlideInBottom:
-            _from = { y: transition == TRANSITIONS.SlideInTop ? -20 : 20, opacity: 0 };
-            _to = { y: 0, opacity: 1 };
+            _from = {
+                y: transition == TRANSITIONS.SlideInTop ?
+                    //Top
+                    dialog ? `-${50 + (offset || 10)}%` : -20
+                    //Bottom 
+                    : dialog ? `-${50 - (offset || 10)}%` : 20,
+                x: dialog ? `-50%` : 0,
+                opacity: 0
+            };
+            _to = { y: dialog ? `-50%` : 0, x: dialog ? `-50%` : 0, opacity: 1 };
             break;
         case TRANSITIONS.ScaleIn:
             _from = { scale: 0, opacity: 0 };

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

@@ -74,3 +74,4 @@ export declare const getPositionAroundElement: (x: number, y: number, distance:
 export declare const clamp: (value: number, min: number, max: number) => number;
 export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;
 export declare const slugify: (text: string, separator?: string) => string;
+export declare const truncate: (selector: string, lines?: number) => void;

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