@zuzjs/ui 0.7.9 → 0.8.0

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

@@ -5,7 +5,7 @@ declare const Alert: import("react").ForwardRefExoticComponent<BoxProps & {
     type?: ALERT;
     icon?: string;
     iconSize?: number;
-    message?: string;
-    title: string;
+    message?: string | import("react").ReactNode;
+    title: string | import("react").ReactNode;
 } & import("react").RefAttributes<AlertHandler>>;
 export default Alert;

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

@@ -8,7 +8,7 @@ import Text from "../Text";
 const Alert = forwardRef((props, ref) => {
     const { type, icon, title, message, iconSize, ...pops } = props;
     const { className, style, rest } = useBase(pops);
-    return _jsxs(Box, { className: `--alert --${(type || ALERT.Info)} flex aic ${className}`.trim(), style: style, ...rest, children: [_jsx(Box, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { width: iconSize, height: iconSize } : {}, children: !icon && SVGIcons[type || ALERT.Info] }), _jsxs(Box, { className: `--meta flex cols`, children: [_jsx(Text, { className: `--title ${message ? `--tm` : ``}`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(Text, { className: `--message`, h: 2, children: message })] })] });
+    return _jsxs(Box, { className: `--alert --${(type || ALERT.Info)} flex aic ${className}`.trim(), style: style, ...rest, children: [_jsx(Box, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { fontSize: iconSize, width: iconSize, height: iconSize } : {}, children: !icon && SVGIcons[type || ALERT.Info] }), _jsxs(Box, { className: `--meta flex cols`, children: [_jsx(Text, { className: `--title ${message ? `--tm` : ``}`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(Text, { className: `--message`, h: 2, children: message })] })] });
 });
 Alert.displayName = `Alert`;
 export default Alert;

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

@@ -1,11 +1,12 @@
+import { ReactNode } from "react";
 import { ALERT } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type AlertProps = BoxProps & {
     type?: ALERT;
     icon?: string;
     iconSize?: number;
-    message?: string;
-    title: string;
+    message?: string | ReactNode;
+    title: string | ReactNode;
 };
 export interface AlertHandler {
     open: () => void;

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

@@ -12,7 +12,7 @@ const Cover = forwardRef((props, ref) => {
     if (`when` in props && props.when == false) {
         return null;
     }
-    return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous`, style: {
+    return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous ${className}`.trim(), style: {
             ...style,
             backgroundColor: `var(--cover-bg)`
         }, ...rest, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });

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

@@ -1,4 +1,4 @@
 declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     items: import("./types").CrumbItem[];
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default Crumb;

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

@@ -6,5 +6,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     direction?: "cols" | "rows";
     seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default List;

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

@@ -11,6 +11,8 @@ export type SheetProps = ZuzProps & {
     spinner?: SPINNER;
     loadingMessage?: string;
     actionPosition?: SHEET_ACTION_POSITION;
+    onShow?: () => void;
+    onHide?: () => void;
 };
 export interface SheetActionHandler {
     key?: string;
@@ -38,6 +40,8 @@ declare const Sheet: import("react").ForwardRefExoticComponent<ZuzProps & {
     spinner?: SPINNER;
     loadingMessage?: string;
     actionPosition?: SHEET_ACTION_POSITION;
+    onShow?: () => void;
+    onHide?: () => void;
 } & import("react").RefAttributes<SheetHandler>>;
 export declare const isSheetHandler: (src: unknown) => src is SheetHandler;
 export default Sheet;

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

@@ -12,7 +12,7 @@ import Overlay from "../Overlay";
 let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
-    const { title: _title, message, transition, curve, speed, type, actionPosition, spinner, loadingMessage, ...pops } = props;
+    const { title: _title, message, transition, curve, speed, type, actionPosition, spinner, loadingMessage, onShow, onHide, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     const [title, setTitle] = useState(_title || ``);
     const [msg, setMsg] = useState(message || ``);
@@ -125,9 +125,11 @@ const Sheet = forwardRef((props, ref) => {
             setSheetType(type || SHEET.Default);
             setMsg(message);
             setVisible(true);
+            onShow?.();
         },
         hide() {
             setVisible(false);
+            onHide?.();
         }
     }));
     const buildAnimation = useMemo(() => {

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Box from "../Box";
 const VideoPlayer = forwardRef((props, ref) => {
-    return _jsx(Box, {});
+    return _jsx(Box, { children: _jsx("video", {}) });
 });
 export default VideoPlayer;

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

@@ -50,7 +50,7 @@ export declare const withZuz: (cx: string | string[]) => string;
 export declare const setDeep: (object: dynamicObject, path: string, value: any, seperator?: string) => dynamicObject;
 export declare const removeDuplicatesFromArray: <T>(array: T[]) => T[];
 export declare const withPost: <T>(uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<T>;
-export declare const withGet: <T>(uri: string, timeout?: number) => Promise<T>;
+export declare const withGet: <T>(uri: string, timeout?: number, ignoreKind?: boolean) => Promise<T>;
 export declare const withTime: (fun: (...args: any[]) => any) => {
     result: any;
     executionTime: number;

package/dist/cjs/funs/index.js

@@ -260,12 +260,12 @@ export const withPost = async (uri, data, timeout = 60, onProgress) => {
         });
     });
 };
-export const withGet = async (uri, timeout = 60) => {
+export const withGet = async (uri, timeout = 60, ignoreKind = false) => {
     return new Promise((resolve, reject) => {
         axios
             .get(uri, { timeout: timeout * 1000 })
             .then((resp) => {
-            if (resp.data && "kind" in resp.data) {
+            if (ignoreKind || (resp.data && "kind" in resp.data)) {
                 resolve(resp.data);
             }
             else {

package/dist/cjs/funs/stylesheet.js

@@ -18,6 +18,7 @@ export const cssProps = {
     "backgroundColor": "background-color",
     "backgroundImage": "background-image",
     "bgi": "background-image",
+    "bgc": "background-color",
     "backgroundOrigin": "background-origin",
     "backgroundPosition": "background-position",
     "backgroundRepeat": "background-repeat",
@@ -230,6 +231,7 @@ export const cssProps = {
     "textOverflow": "text-overflow",
     "textShadow": "text-shadow",
     "textTransform": "text-transform",
+    "textStroke": "-webkit-text-stroke",
     "top": "top",
     "transform": "transform",
     "transform(2D)": "transform(2D)",

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

@@ -19,9 +19,11 @@ export { default as useFileManager } from './useFileManager';
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
+export { default as useSheet } from './useSheet';
 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';
+export { default as useWebSocket, type WebSocketOptions } from './useWebSocket';

package/dist/cjs/hooks/index.js

@@ -20,9 +20,11 @@ export { default as useFileManager } from './useFileManager';
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
+export { default as useSheet } from './useSheet';
 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';
+export { default as useWebSocket } from './useWebSocket';

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

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

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

@@ -0,0 +1,15 @@
+import { dynamicObject } from "..";
+export type WebSocketOptions = {
+    onOpen?: (event: Event) => void;
+    onClose?: (event: CloseEvent) => void;
+    onRawMessage?: (event: MessageEvent) => void;
+    onMessage?: (data: dynamicObject) => void;
+    onError?: (event: Event) => void;
+    reconnect?: boolean;
+};
+declare const useWebSocket: (url: string, options?: WebSocketOptions) => {
+    isConnected: boolean;
+    messages: any[];
+    sendMessage: (message: string | object) => void;
+};
+export default useWebSocket;

package/dist/cjs/hooks/useWebSocket.js

@@ -0,0 +1,87 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+const socketInstances = new Map();
+const listenersMap = new Map();
+const reconnectIntervals = new Map(); // Store dynamic reconnect intervals
+const useWebSocket = (url, options) => {
+    const { onOpen, onClose, onRawMessage, onMessage, onError, reconnect = true } = options || {};
+    const [isConnected, setIsConnected] = useState(false);
+    const [messages, setMessages] = useState([]);
+    const getReconnectInterval = (url) => reconnectIntervals.get(url) ?? 2;
+    const increaseReconnectInterval = (url) => {
+        const current = getReconnectInterval(url);
+        const next = Math.min(current * 2, 60); // Double each time, max 60s
+        reconnectIntervals.set(url, next);
+        return next * 1000;
+    };
+    const resetReconnectInterval = (url) => {
+        reconnectIntervals.set(url, 2); // Reset to 1s on successful reconnect
+    };
+    const connect = useCallback(() => {
+        if (socketInstances.has(url))
+            return; // Prevent duplicate connection
+        const socket = new WebSocket(url);
+        socketInstances.set(url, socket);
+        listenersMap.set(url, []);
+        socket.onopen = (event) => {
+            setIsConnected(true);
+            resetReconnectInterval(url);
+            onOpen?.(event);
+        };
+        socket.onmessage = (event) => {
+            setMessages((prev) => [...prev, event.data]);
+            onRawMessage?.(event);
+            const raw = JSON.parse(Buffer.isBuffer(event) ? event.toString(`utf8`) : `string` == typeof event ? event : event.data);
+            onMessage?.(raw);
+            listenersMap.get(url)?.forEach((listener) => listener(event));
+        };
+        socket.onerror = (event) => {
+            onError?.(event);
+        };
+        socket.onclose = (event) => {
+            setIsConnected(false);
+            onClose?.(event);
+            socketInstances.delete(url);
+            listenersMap.delete(url);
+            if (reconnect && event.code !== 1000) { // 1000 = normal close
+                const delay = increaseReconnectInterval(url);
+                console.log(`Reconnecting in ${delay / 1000} seconds...`);
+                setTimeout(() => {
+                    if (!socketInstances.has(url))
+                        connect(); // Ensure only one instance reconnects
+                }, delay);
+            }
+        };
+    }, [url, onOpen, onClose, onMessage, onError, reconnect]);
+    useEffect(() => {
+        connect();
+        return () => {
+            if (listenersMap.get(url)?.length === 0) {
+                socketInstances.get(url)?.close();
+                socketInstances.delete(url);
+                listenersMap.delete(url);
+                reconnectIntervals.delete(url);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const messageListener = (event) => setMessages((prev) => [...prev, event.data]);
+        listenersMap.get(url)?.push(messageListener);
+        return () => {
+            const listeners = listenersMap.get(url) || [];
+            listenersMap.set(url, listeners.filter((listener) => listener !== messageListener));
+        };
+    }, [url]);
+    const sendMessage = useCallback((message) => {
+        const socket = socketInstances.get(url);
+        if (socket && socket.readyState === WebSocket.OPEN) {
+            const data = typeof message === "string" ? message : JSON.stringify(message);
+            socket.send(data);
+        }
+        else {
+            console.warn("WebSocket is not connected.");
+        }
+    }, [url]);
+    return { isConnected, messages, sendMessage };
+};
+export default useWebSocket;

package/dist/esm/comps/Alert/index.d.ts

@@ -5,7 +5,7 @@ declare const Alert: import("react").ForwardRefExoticComponent<BoxProps & {
     type?: ALERT;
     icon?: string;
     iconSize?: number;
-    message?: string;
-    title: string;
+    message?: string | import("react").ReactNode;
+    title: string | import("react").ReactNode;
 } & import("react").RefAttributes<AlertHandler>>;
 export default Alert;

package/dist/esm/comps/Alert/index.js

@@ -8,7 +8,7 @@ import Text from "../Text";
 const Alert = forwardRef((props, ref) => {
     const { type, icon, title, message, iconSize, ...pops } = props;
     const { className, style, rest } = useBase(pops);
-    return _jsxs(Box, { className: `--alert --${(type || ALERT.Info)} flex aic ${className}`.trim(), style: style, ...rest, children: [_jsx(Box, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { width: iconSize, height: iconSize } : {}, children: !icon && SVGIcons[type || ALERT.Info] }), _jsxs(Box, { className: `--meta flex cols`, children: [_jsx(Text, { className: `--title ${message ? `--tm` : ``}`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(Text, { className: `--message`, h: 2, children: message })] })] });
+    return _jsxs(Box, { className: `--alert --${(type || ALERT.Info)} flex aic ${className}`.trim(), style: style, ...rest, children: [_jsx(Box, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { fontSize: iconSize, width: iconSize, height: iconSize } : {}, children: !icon && SVGIcons[type || ALERT.Info] }), _jsxs(Box, { className: `--meta flex cols`, children: [_jsx(Text, { className: `--title ${message ? `--tm` : ``}`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(Text, { className: `--message`, h: 2, children: message })] })] });
 });
 Alert.displayName = `Alert`;
 export default Alert;

package/dist/esm/comps/Alert/types.d.ts

@@ -1,11 +1,12 @@
+import { ReactNode } from "react";
 import { ALERT } from "../../types/enums";
 import { BoxProps } from "../Box";
 export type AlertProps = BoxProps & {
     type?: ALERT;
     icon?: string;
     iconSize?: number;
-    message?: string;
-    title: string;
+    message?: string | ReactNode;
+    title: string | ReactNode;
 };
 export interface AlertHandler {
     open: () => void;

package/dist/esm/comps/Cover/index.js

@@ -12,7 +12,7 @@ const Cover = forwardRef((props, ref) => {
     if (`when` in props && props.when == false) {
         return null;
     }
-    return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous`, style: {
+    return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous ${className}`.trim(), style: {
             ...style,
             backgroundColor: `var(--cover-bg)`
         }, ...rest, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });

package/dist/esm/comps/Crumb/index.d.ts

@@ -1,4 +1,4 @@
 declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     items: import("./types").CrumbItem[];
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default Crumb;

package/dist/esm/comps/List/index.d.ts

@@ -6,5 +6,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     direction?: "cols" | "rows";
     seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default List;

package/dist/esm/comps/Sheet/index.d.ts

@@ -11,6 +11,8 @@ export type SheetProps = ZuzProps & {
     spinner?: SPINNER;
     loadingMessage?: string;
     actionPosition?: SHEET_ACTION_POSITION;
+    onShow?: () => void;
+    onHide?: () => void;
 };
 export interface SheetActionHandler {
     key?: string;
@@ -38,6 +40,8 @@ declare const Sheet: import("react").ForwardRefExoticComponent<ZuzProps & {
     spinner?: SPINNER;
     loadingMessage?: string;
     actionPosition?: SHEET_ACTION_POSITION;
+    onShow?: () => void;
+    onHide?: () => void;
 } & import("react").RefAttributes<SheetHandler>>;
 export declare const isSheetHandler: (src: unknown) => src is SheetHandler;
 export default Sheet;

package/dist/esm/comps/Sheet/index.js

@@ -12,7 +12,7 @@ import Overlay from "../Overlay";
 let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
-    const { title: _title, message, transition, curve, speed, type, actionPosition, spinner, loadingMessage, ...pops } = props;
+    const { title: _title, message, transition, curve, speed, type, actionPosition, spinner, loadingMessage, onShow, onHide, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     const [title, setTitle] = useState(_title || ``);
     const [msg, setMsg] = useState(message || ``);
@@ -125,9 +125,11 @@ const Sheet = forwardRef((props, ref) => {
             setSheetType(type || SHEET.Default);
             setMsg(message);
             setVisible(true);
+            onShow?.();
         },
         hide() {
             setVisible(false);
+            onHide?.();
         }
     }));
     const buildAnimation = useMemo(() => {

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Box from "../Box";
 const VideoPlayer = forwardRef((props, ref) => {
-    return _jsx(Box, {});
+    return _jsx(Box, { children: _jsx("video", {}) });
 });
 export default VideoPlayer;

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

@@ -50,7 +50,7 @@ export declare const withZuz: (cx: string | string[]) => string;
 export declare const setDeep: (object: dynamicObject, path: string, value: any, seperator?: string) => dynamicObject;
 export declare const removeDuplicatesFromArray: <T>(array: T[]) => T[];
 export declare const withPost: <T>(uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<T>;
-export declare const withGet: <T>(uri: string, timeout?: number) => Promise<T>;
+export declare const withGet: <T>(uri: string, timeout?: number, ignoreKind?: boolean) => Promise<T>;
 export declare const withTime: (fun: (...args: any[]) => any) => {
     result: any;
     executionTime: number;

package/dist/esm/funs/index.js

@@ -260,12 +260,12 @@ export const withPost = async (uri, data, timeout = 60, onProgress) => {
         });
     });
 };
-export const withGet = async (uri, timeout = 60) => {
+export const withGet = async (uri, timeout = 60, ignoreKind = false) => {
     return new Promise((resolve, reject) => {
         axios
             .get(uri, { timeout: timeout * 1000 })
             .then((resp) => {
-            if (resp.data && "kind" in resp.data) {
+            if (ignoreKind || (resp.data && "kind" in resp.data)) {
                 resolve(resp.data);
             }
             else {

package/dist/esm/funs/stylesheet.js

@@ -18,6 +18,7 @@ export const cssProps = {
     "backgroundColor": "background-color",
     "backgroundImage": "background-image",
     "bgi": "background-image",
+    "bgc": "background-color",
     "backgroundOrigin": "background-origin",
     "backgroundPosition": "background-position",
     "backgroundRepeat": "background-repeat",
@@ -230,6 +231,7 @@ export const cssProps = {
     "textOverflow": "text-overflow",
     "textShadow": "text-shadow",
     "textTransform": "text-transform",
+    "textStroke": "-webkit-text-stroke",
     "top": "top",
     "transform": "transform",
     "transform(2D)": "transform(2D)",

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

@@ -19,9 +19,11 @@ export { default as useFileManager } from './useFileManager';
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
+export { default as useSheet } from './useSheet';
 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';
+export { default as useWebSocket, type WebSocketOptions } from './useWebSocket';

package/dist/esm/hooks/index.js

@@ -20,9 +20,11 @@ export { default as useFileManager } from './useFileManager';
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
+export { default as useSheet } from './useSheet';
 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';
+export { default as useWebSocket } from './useWebSocket';

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

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

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

@@ -0,0 +1,15 @@
+import { dynamicObject } from "..";
+export type WebSocketOptions = {
+    onOpen?: (event: Event) => void;
+    onClose?: (event: CloseEvent) => void;
+    onRawMessage?: (event: MessageEvent) => void;
+    onMessage?: (data: dynamicObject) => void;
+    onError?: (event: Event) => void;
+    reconnect?: boolean;
+};
+declare const useWebSocket: (url: string, options?: WebSocketOptions) => {
+    isConnected: boolean;
+    messages: any[];
+    sendMessage: (message: string | object) => void;
+};
+export default useWebSocket;

package/dist/esm/hooks/useWebSocket.js

@@ -0,0 +1,87 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+const socketInstances = new Map();
+const listenersMap = new Map();
+const reconnectIntervals = new Map(); // Store dynamic reconnect intervals
+const useWebSocket = (url, options) => {
+    const { onOpen, onClose, onRawMessage, onMessage, onError, reconnect = true } = options || {};
+    const [isConnected, setIsConnected] = useState(false);
+    const [messages, setMessages] = useState([]);
+    const getReconnectInterval = (url) => reconnectIntervals.get(url) ?? 2;
+    const increaseReconnectInterval = (url) => {
+        const current = getReconnectInterval(url);
+        const next = Math.min(current * 2, 60); // Double each time, max 60s
+        reconnectIntervals.set(url, next);
+        return next * 1000;
+    };
+    const resetReconnectInterval = (url) => {
+        reconnectIntervals.set(url, 2); // Reset to 1s on successful reconnect
+    };
+    const connect = useCallback(() => {
+        if (socketInstances.has(url))
+            return; // Prevent duplicate connection
+        const socket = new WebSocket(url);
+        socketInstances.set(url, socket);
+        listenersMap.set(url, []);
+        socket.onopen = (event) => {
+            setIsConnected(true);
+            resetReconnectInterval(url);
+            onOpen?.(event);
+        };
+        socket.onmessage = (event) => {
+            setMessages((prev) => [...prev, event.data]);
+            onRawMessage?.(event);
+            const raw = JSON.parse(Buffer.isBuffer(event) ? event.toString(`utf8`) : `string` == typeof event ? event : event.data);
+            onMessage?.(raw);
+            listenersMap.get(url)?.forEach((listener) => listener(event));
+        };
+        socket.onerror = (event) => {
+            onError?.(event);
+        };
+        socket.onclose = (event) => {
+            setIsConnected(false);
+            onClose?.(event);
+            socketInstances.delete(url);
+            listenersMap.delete(url);
+            if (reconnect && event.code !== 1000) { // 1000 = normal close
+                const delay = increaseReconnectInterval(url);
+                console.log(`Reconnecting in ${delay / 1000} seconds...`);
+                setTimeout(() => {
+                    if (!socketInstances.has(url))
+                        connect(); // Ensure only one instance reconnects
+                }, delay);
+            }
+        };
+    }, [url, onOpen, onClose, onMessage, onError, reconnect]);
+    useEffect(() => {
+        connect();
+        return () => {
+            if (listenersMap.get(url)?.length === 0) {
+                socketInstances.get(url)?.close();
+                socketInstances.delete(url);
+                listenersMap.delete(url);
+                reconnectIntervals.delete(url);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const messageListener = (event) => setMessages((prev) => [...prev, event.data]);
+        listenersMap.get(url)?.push(messageListener);
+        return () => {
+            const listeners = listenersMap.get(url) || [];
+            listenersMap.set(url, listeners.filter((listener) => listener !== messageListener));
+        };
+    }, [url]);
+    const sendMessage = useCallback((message) => {
+        const socket = socketInstances.get(url);
+        if (socket && socket.readyState === WebSocket.OPEN) {
+            const data = typeof message === "string" ? message : JSON.stringify(message);
+            socket.send(data);
+        }
+        else {
+            console.warn("WebSocket is not connected.");
+        }
+    }, [url]);
+    return { isConnected, messages, sendMessage };
+};
+export default useWebSocket;