@zuzjs/ui 0.7.9 → 0.8.1

package/README.md

@@ -41,4 +41,4 @@ Documention in progress.
 
 ## License
 
-This project is licensed under the MIT License.
+This project is licensed under the MIT License.

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/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

@@ -16,12 +16,16 @@ 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 useFacebookPixel } from './useFacebookPixel';
+export { default as useGoogleTagManager } from './useGoogleTagManager';
 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

@@ -17,12 +17,16 @@ export { default as useMutationObserver } from './useMutationObserver';
 export { default as useDrag } from './useDrag';
 export { default as useFileManager } from './useFileManager';
 //useFilter
+export { default as useFacebookPixel } from './useFacebookPixel';
+export { default as useGoogleTagManager } from './useGoogleTagManager';
 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/useFacebookPixel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Custom hook for Facebook Pixel tracking
+ * @param pixelId - Facebook Pixel ID (e.g., '123456789012345')
+ * @param debug - Optional debug mode (default: false)
+ */
+declare const useFacebookPixel: (pixelId?: string, debug?: boolean) => {
+    trackPageView: () => void;
+    trackEvent: (eventName: string, params?: Record<string, any>) => void;
+    trackCustom: (eventName: string, params?: Record<string, any>) => void;
+};
+export default useFacebookPixel;

package/dist/cjs/hooks/useFacebookPixel.js

@@ -0,0 +1,64 @@
+import { useEffect } from "react";
+/**
+ * Custom hook for Facebook Pixel tracking
+ * @param pixelId - Facebook Pixel ID (e.g., '123456789012345')
+ * @param debug - Optional debug mode (default: false)
+ */
+const useFacebookPixel = (pixelId, debug = false) => {
+    // Initialize Facebook Pixel
+    useEffect(() => {
+        if (!pixelId)
+            return;
+        // Load Facebook Pixel script if not already loaded
+        if (!window.fbq) {
+            const script = document.createElement('script');
+            script.async = true;
+            script.src = `https://connect.facebook.net/en_US/fbevents.js`;
+            document.head.appendChild(script);
+            window._fbq = window._fbq || [];
+            window.fbq = function () {
+                window._fbq.push(arguments);
+            };
+            window.fbq('init', pixelId);
+            if (debug) {
+                window.fbq('set', 'debug', true);
+            }
+        }
+        // Track initial page view
+        window.fbq('track', 'PageView');
+    }, [pixelId, debug]);
+    /**
+     * Track a page view
+     */
+    const trackPageView = () => {
+        if (!pixelId)
+            return;
+        window.fbq('track', 'PageView');
+    };
+    /**
+     * Track a custom event
+     * @param eventName - Standard or custom event name
+     * @param params - Optional event parameters
+     */
+    const trackEvent = (eventName, params) => {
+        if (!pixelId)
+            return;
+        window.fbq('track', eventName, params);
+    };
+    /**
+     * Track a custom conversion
+     * @param eventName - Conversion event name
+     * @param params - Optional conversion parameters
+     */
+    const trackCustom = (eventName, params) => {
+        if (!pixelId)
+            return;
+        window.fbq('trackCustom', eventName, params);
+    };
+    return {
+        trackPageView,
+        trackEvent,
+        trackCustom,
+    };
+};
+export default useFacebookPixel;

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

@@ -0,0 +1,9 @@
+/**
+ * Custom hook for Google gtag (Global Site Tag) tracking
+ * @param id - Google Analytics tracking ID (e.g., 'G-XXXXXXXXXX')
+ */
+declare const useGtag: (id?: string) => {
+    trackPageView: (path?: string) => void;
+    trackEvent: (eventName: string, params?: Record<string, any>) => void;
+};
+export default useGtag;

package/dist/cjs/hooks/useGoogleTagManager.js

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+/**
+ * Custom hook for Google gtag (Global Site Tag) tracking
+ * @param id - Google Analytics tracking ID (e.g., 'G-XXXXXXXXXX')
+ */
+const useGtag = (id) => {
+    // Initialize gtag.js
+    useEffect(() => {
+        if (!id)
+            return;
+        // Load gtag.js script if not already loaded
+        if (!window.gtag) {
+            const script = document.createElement('script');
+            script.async = true;
+            script.src = `https://www.googletagmanager.com/gtag/js?id=${id}`;
+            document.head.appendChild(script);
+            window.dataLayer = window.dataLayer || [];
+            window.gtag = function () {
+                window.dataLayer.push(arguments);
+            };
+            // Set the current date/time
+            window.gtag('js', new Date());
+        }
+        // Configure the tracker
+        window.gtag('config', id);
+    }, [id]);
+    /**
+     * Track a page view
+     * @param path - URL path to track (defaults to current location)
+     */
+    const trackPageView = (path) => {
+        if (!id)
+            return;
+        window.gtag('config', id, {
+            page_path: path || window.location.pathname,
+        });
+    };
+    /**
+     * Track an event
+     * @param eventName - Event name (e.g., 'login', 'sign_up')
+     * @param params - Additional event parameters
+     */
+    const trackEvent = (eventName, params) => {
+        if (!id)
+            return;
+        window.gtag('event', eventName, params);
+    };
+    return {
+        trackPageView,
+        trackEvent,
+    };
+};
+export default useGtag;

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/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

@@ -16,12 +16,16 @@ 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 useFacebookPixel } from './useFacebookPixel';
+export { default as useGoogleTagManager } from './useGoogleTagManager';
 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

@@ -17,12 +17,16 @@ export { default as useMutationObserver } from './useMutationObserver';
 export { default as useDrag } from './useDrag';
 export { default as useFileManager } from './useFileManager';
 //useFilter
+export { default as useFacebookPixel } from './useFacebookPixel';
+export { default as useGoogleTagManager } from './useGoogleTagManager';
 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/useFacebookPixel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Custom hook for Facebook Pixel tracking
+ * @param pixelId - Facebook Pixel ID (e.g., '123456789012345')
+ * @param debug - Optional debug mode (default: false)
+ */
+declare const useFacebookPixel: (pixelId?: string, debug?: boolean) => {
+    trackPageView: () => void;
+    trackEvent: (eventName: string, params?: Record<string, any>) => void;
+    trackCustom: (eventName: string, params?: Record<string, any>) => void;
+};
+export default useFacebookPixel;