@zuzjs/ui 0.7.7 → 0.7.9

package/dist/esm/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/esm/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/esm/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/esm/funs/index.d.ts

@@ -63,7 +63,8 @@ export declare const formatSize: (bytes: number | string) => string;
 export declare const copyToClipboard: (text: string) => Promise<unknown>;
 export declare const natsort: (options?: sortOptions) => (a: string | number, b: string | number) => number;
 export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElement) => void;
-export declare const camelCase: (str: string) => string;
+export declare const camelCase: (str: string, ucf?: boolean) => string;
+export declare const camelCaseToDash: (str: string) => string;
 export declare const pluralize: (word: string, count: number) => string;
 export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, newProps: object) => ReactNode;
 export declare const getPositionAroundElement: (x: number, y: number, distance: number, childCount: number) => {
@@ -73,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/esm/funs/index.js

@@ -468,15 +468,16 @@ export const bindKey = (key, fun, element) => {
     };
     (element || document.documentElement).addEventListener('keydown', handleKeydown);
 };
-export const camelCase = (str) => {
+export const camelCase = (str, ucf = false) => {
     return str
         .toLowerCase()
         .split(/[^a-zA-Z0-9]+/) // Split by any non-alphanumeric character
         .map((word, index) => index === 0
-        ? word
-        : word.charAt(0).toUpperCase() + word.slice(1))
+        ? ucf ? ucfirst(word) : word
+        : ucfirst(word))
         .join('');
 };
+export const camelCaseToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 export const pluralize = (word, count) => `${word}${count !== 1 ? 's' : ''}`;
 export const addPropsToChildren = (children, conditions, newProps) => {
     return Children.map(children, (child) => {
@@ -535,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

@@ -3,19 +3,25 @@ export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
 export { default as useContextMenu } from './useContextMenu';
-export { type IDBOptions, type IDBSchema, default as useDB } from './useDB';
+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 useDrag } from './useDrag';
-export { type DragOptions } from './useDrag';
+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 './useMounted';
-export { default as useDelayed } from './useMounted';
+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 './useMounted';
-export { default as useDelayed } from './useMounted';
+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.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/esm/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/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;