@zuzjs/ui 0.8.0 → 0.8.2

package/dist/esm/comps/Table/row.js

@@ -83,5 +83,5 @@ const TRow = (props) => {
                 return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(i, `--selector-${c.id}`, c.id.toString()), ids.includes(String(c.id)) ? _jsx(TColumn, { pubsub: pubsub, idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data, index) : data[String(c.id).includes(`.`) ? String(c.id).split(`.`).reverse()[0] : c.id] }) : null] }, `--${String(c.id)}-val-${i}`);
             })] });
 };
-TRow.displayName = `Row`;
+TRow.displayName = `Zuz.Row`;
 export default TRow;

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

@@ -10,5 +10,5 @@ const Text = forwardRef((props, ref) => {
     const Tag = `h${props.h || 1}`;
     return _jsx(Tag, { ref: ref, style: style, className: className, ...rest, children: html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children });
 });
-Text.displayName = `ZuzUI.Text`;
+Text.displayName = `Zuz.Text`;
 export default Text;

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

@@ -9,5 +9,5 @@ const TextArea = forwardRef((props, ref) => {
     };
     return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: { ...style, resize: resize || `none` }, onInput: handleInput, ref: ref, ...rest });
 });
-TextArea.displayName = `ZuzUI.TextArea`;
+TextArea.displayName = `Zuz.TextArea`;
 export default TextArea;

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

@@ -17,11 +17,11 @@ const TextWheel = forwardRef((props, ref) => {
             this.updateValue(v);
             if (divRef.current) {
                 const chars = v.toString().split('');
-                divRef.current.querySelectorAll('.wheel-char').forEach((charElement, index) => {
+                divRef.current.querySelectorAll('.--wheel-char').forEach((charElement, index) => {
                     const char = chars[index];
                     if (charElement instanceof HTMLElement) {
                         charElement.setAttribute('data-value', char);
-                        const track = charElement.querySelector('.wheel-char-track');
+                        const track = charElement.querySelector('.--wheel-char-track');
                         if (track instanceof HTMLElement) {
                             track.style.setProperty('--v', char);
                         }
@@ -50,5 +50,5 @@ const TextWheel = forwardRef((props, ref) => {
                     background: `linear-gradient(0deg, ${color}, transparent, transparent, transparent, ${color})`,
                 } })] });
 });
-TextWheel.displayName = `TextWheel`;
+TextWheel.displayName = `Zuz.TextWheel`;
 export default TextWheel;

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

@@ -53,5 +53,5 @@ const ToolTip = forwardRef((props, ref) => {
                     when: hovered
                 }, children: _jsx(Text, { className: `--text rel`, children: title }) })] });
 });
-ToolTip.displayName = `ToolTip`;
+ToolTip.displayName = `Zuz.ToolTip`;
 export default ToolTip;

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

@@ -22,5 +22,5 @@ const TreeView = forwardRef((props, ref) => {
             .filter(node => roots.includes(node.tag))
             .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, roots: roots, expanded: node.expanded || false, skeleton: rest.skeleton, nodes: nodes }, `--node-${node.tag}`)) });
 });
-TreeView.displayName = `ZuzUI.TreeView`;
+TreeView.displayName = `Zuz.TreeView`;
 export default TreeView;

package/dist/esm/comps/Treeview/item.js

@@ -27,7 +27,7 @@ const TreeItem = forwardRef((props, ref) => {
                             : _nodes.length == 0 ? SVGIcons.chevronBottom : isOpen ? SVGIcons.chevronBottom : SVGIcons.chevronRight }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [((icons?.nodeOpen && icons?.nodeClose) || (isRoot && icons?.rootOpen && icons?.rootClose)) &&
                                 _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon ${isRoot ? `--icon-root` : ``}`, name: icon || (isOpen ?
                                         isRoot ? icons?.rootOpen || icons.nodeOpen : icons.nodeOpen
-                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label` }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, roots: roots, expanded: node.expanded || false, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
+                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label ${isRoot ? `--node-label-root` : ``}`.trim() }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, roots: roots, expanded: node.expanded || false, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
 });
 TreeItem.displayName = `TreeItem`;
 export default TreeItem;

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

@@ -4,4 +4,5 @@ import Box from "../Box";
 const VideoPlayer = forwardRef((props, ref) => {
     return _jsx(Box, { children: _jsx("video", {}) });
 });
+VideoPlayer.displayName = `Zuz.VideoPlayer`;
 export default VideoPlayer;

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

@@ -20,6 +20,8 @@ export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
 export { default as Cover, type CoverProps } from './Cover';
+export { default as Cropper } from './Cropper';
+export * from './Cropper/types';
 export { default as Crumb } from './Crumb';
 export * from './Crumb/types';
 export { default as Drawer } from './Drawer';

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 Cropper } from './Cropper';
+export * from './Cropper/types';
 export { default as Crumb } from './Crumb';
 export * from './Crumb/types';
 export { default as Drawer } from './Drawer';

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

@@ -1,17 +1,41 @@
+export interface EventListener {
+    fun: (...args: any[]) => void;
+    context?: any;
+    id: symbol;
+}
 export interface Event {
     event: String | Symbol;
-    listeners: Array<{
-        fun: (...args: any[]) => void;
-        context?: any;
-    }>;
+    listeners: Array<EventListener>;
 }
 declare class Events {
     _events: Event[];
     constructor();
-    addEvent(event: String | Symbol, fun: (...args: any[]) => void, context?: any): number | undefined;
-    removeEvent(event: String | Symbol, fun: (...args: any[]) => void): void;
-    on(event: String | Symbol, fun: (...args: any[]) => void, context?: any): number | undefined;
+    /**
+     * Registers an event listener.
+     * @param event The name of the event.
+     * @param fun The callback function.
+     * @param context Optional context (this) for the callback.
+     * @returns A function to unsubscribe this specific listener.
+     */
+    on(event: String | Symbol, fun: (...args: any[]) => void, context?: any): () => void;
+    /**
+     * Removes event listeners matching a specific event and function.
+     * Note: This removes *all* listeners for the event that use the exact same function reference.
+     * It's often more reliable to use the unsubscribe function returned by 'on'.
+     * @param event The name of the event.
+     * @param fun The callback function to remove.
+     */
     off(event: String | Symbol, fun: (...args: any[]) => void): void;
+    /**
+     * Emits an event, calling all registered listeners.
+     * @param event The name of the event.
+     * @param args Arguments to pass to the listeners.
+     */
     emit(event: String | Symbol, ...args: any[]): void;
+    /**
+     * Removes all listeners for a specific event.
+     * @param event The name of the event.
+     */
+    removeAllListeners(event: String | Symbol): void;
 }
 export default Events;

package/dist/esm/funs/events.js

@@ -3,42 +3,80 @@ class Events {
     constructor() {
         this._events = [];
     }
-    addEvent(event, fun, context) {
-        const evt = this._events.find(x => x.event == event);
-        const listener = { fun: context ? fun.bind(context) : fun, context };
+    /**
+     * Registers an event listener.
+     * @param event The name of the event.
+     * @param fun The callback function.
+     * @param context Optional context (this) for the callback.
+     * @returns A function to unsubscribe this specific listener.
+     */
+    on(event, fun, context) {
+        const evt = this._events.find(x => x.event === event);
+        const id = Symbol('listener_id'); // Give each listener a unique ID
+        const listener = {
+            fun: fun, // Store original function
+            context: context,
+            id: id,
+        };
         if (!evt) {
-            return this._events.push({ event: event, listeners: [listener] });
+            this._events.push({ event: event, listeners: [listener] });
         }
-        if (!evt.listeners.find(x => x.fun == fun)) {
+        else {
             evt.listeners.push(listener);
         }
+        // Return an unsubscribe function
+        return () => {
+            const currentEvt = this._events.find(x => x.event === event);
+            if (currentEvt) {
+                currentEvt.listeners = currentEvt.listeners.filter(l => l.id !== id);
+                if (currentEvt.listeners.length === 0) {
+                    this._events = this._events.filter(e => e.event !== event);
+                }
+            }
+        };
     }
-    removeEvent(event, fun) {
-        const evt = this._events.find(x => x.event == event);
+    /**
+     * Removes event listeners matching a specific event and function.
+     * Note: This removes *all* listeners for the event that use the exact same function reference.
+     * It's often more reliable to use the unsubscribe function returned by 'on'.
+     * @param event The name of the event.
+     * @param fun The callback function to remove.
+     */
+    off(event, fun) {
+        const evt = this._events.find(x => x.event === event);
         if (evt) {
-            evt.listeners = evt.listeners.filter(x => x.fun != fun);
+            // Filter out listeners where the 'fun' property matches the provided function.
+            evt.listeners = evt.listeners.filter(listener => listener.fun !== fun);
+            // Optional: If no listeners remain for this event, remove the event entry.
+            if (evt.listeners.length === 0) {
+                this._events = this._events.filter(e => e.event !== event);
+            }
         }
     }
-    on(event, fun, context) {
-        return this.addEvent(event, fun, context);
-    }
-    off(event, fun) {
-        this.removeEvent(event, fun);
-    }
+    /**
+     * Emits an event, calling all registered listeners.
+     * @param event The name of the event.
+     * @param args Arguments to pass to the listeners.
+     */
     emit(event, ...args) {
-        const evt = this._events.find(x => x.event == event);
+        const evt = this._events.find(x => x.event === event);
         if (evt) {
-            // console.log(evt)
-            evt.listeners.forEach(({ fun, context }) => {
+            [...evt.listeners].forEach(({ fun, context }) => {
                 try {
-                    // f(args)
                     fun.apply(context, args);
                 }
                 catch (e) {
-                    console.error(e);
+                    console.error(`Error during event '${String(event)}' emission:`, e);
                 }
             });
         }
     }
+    /**
+     * Removes all listeners for a specific event.
+     * @param event The name of the event.
+     */
+    removeAllListeners(event) {
+        this._events = this._events.filter(e => e.event !== event);
+    }
 }
 export default Events;

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

@@ -1,4 +1,3 @@
-import { AxiosProgressEvent } from "axios";
 import { ReactElement, ReactNode, Ref } from "react";
 import { KeyCode } from "../types/enums.js";
 import { dynamicObject, FormatNumberParams, sortOptions } from "../types/index.js";
@@ -49,8 +48,6 @@ export declare const cleanProps: <T extends dynamicObject>(props: T, withProps?:
 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, ignoreKind?: boolean) => Promise<T>;
 export declare const withTime: (fun: (...args: any[]) => any) => {
     result: any;
     executionTime: number;
@@ -75,3 +72,8 @@ 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;
+export declare const checkPasswordStrength: (password: string) => {
+    score: number;
+    result: string;
+    suggestion: string[];
+};

package/dist/esm/funs/index.js

@@ -1,6 +1,4 @@
-import axios from "axios";
 import Hashids from "hashids";
-import Cookies from "js-cookie";
 import md5 from "md5";
 import moment from "moment";
 import { nanoid } from "nanoid";
@@ -205,88 +203,6 @@ export const removeDuplicatesFromArray = (array) => {
         return accumulator;
     }, []);
 };
-export const withPost = async (uri, data, timeout = 60, onProgress) => {
-    const _cookies = Cookies.get();
-    if (data instanceof FormData) {
-        for (const c in _cookies) {
-            data.append(c, _cookies[c]);
-        }
-        return new Promise((resolve, reject) => {
-            axios({
-                method: 'post',
-                url: uri,
-                data: data,
-                timeout: timeout * 1000,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-                onUploadProgress: ev => onProgress && onProgress(ev)
-            })
-                .then(resp => {
-                if (resp.data && "kind" in resp.data) {
-                    resolve(resp.data);
-                }
-                else {
-                    reject(resp.data);
-                }
-            })
-                .catch(err => reject(err));
-        });
-    }
-    return new Promise((resolve, reject) => {
-        axios.post(uri, {
-            ...data,
-            ..._cookies,
-            __stmp: new Date().getTime() / 1000
-        }, {
-            timeout: 1000 * timeout,
-            headers: {
-                'Content-Type': 'application/json',
-            }
-        })
-            .then(resp => {
-            if (resp.data && "kind" in resp.data) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch(err => {
-            if (err?.response?.data)
-                reject(err.response.data);
-            else
-                reject(err.code && err.code == `ERR_NETWORK` ? { error: err.code, message: navigator.onLine ? `Unable to connect to the server. It may be temporarily down.` : `Network error: Unable to connect. Please check your internet connection and try again.` } : err);
-        });
-    });
-};
-export const withGet = async (uri, timeout = 60, ignoreKind = false) => {
-    return new Promise((resolve, reject) => {
-        axios
-            .get(uri, { timeout: timeout * 1000 })
-            .then((resp) => {
-            if (ignoreKind || (resp.data && "kind" in resp.data)) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch((err) => {
-            if (err?.response?.data)
-                reject(err.response.data);
-            else
-                reject(err.code === `ERR_NETWORK`
-                    ? {
-                        error: err.code,
-                        message: navigator.onLine
-                            ? `Unable to connect to the server. It may be temporarily down.`
-                            : `Network error: Unable to connect. Please check your internet connection and try again.`,
-                    }
-                    : err);
-        });
-    });
-};
 export const withTime = (fun) => {
     const start = new Date().getTime();
     const result = fun();
@@ -546,3 +462,42 @@ export const truncate = (selector, lines = 2) => {
         }
     });
 };
+export const checkPasswordStrength = (password) => {
+    const suggestions = [];
+    let score = 0;
+    if (password.length >= 8) {
+        score++;
+    }
+    else {
+        suggestions.push("Use at least 8 characters");
+    }
+    if (/[a-z]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add lowercase letters");
+    }
+    if (/[A-Z]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add uppercase letters");
+    }
+    if (/\d/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Include numbers");
+    }
+    if (/[^A-Za-z0-9]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add special characters (e.g. !, @, #)");
+    }
+    return {
+        score,
+        result: score <= 2 ? "Weak" : score == 3 ? "Moderate" : score == 4 ? "Strong" : "Excellent",
+        suggestion: suggestions
+    };
+};

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

@@ -16,7 +16,10 @@ 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 useImageCropper } from './useImageCropper';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
 export { default as useSheet } from './useSheet';
@@ -25,5 +28,6 @@ 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 useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket, type WebSocketOptions } from './useWebSocket';

package/dist/esm/hooks/index.js

@@ -17,7 +17,10 @@ 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 useImageCropper } from './useImageCropper';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
 export { default as useSheet } from './useSheet';
@@ -26,5 +29,6 @@ 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 useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket } from './useWebSocket';

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

@@ -17,10 +17,14 @@ export interface IDBSchema {
     unique?: boolean;
 }
 declare const useDB: (options: IDBOptions) => {
+    getAll: <T>(storeName: string) => Promise<T>;
     getByID: <T>(storeName: string, id: string | number) => Promise<T>;
     getStore: <T>(storeName: string, id: string | number) => Promise<T>;
     insert: <T>(storeName: string, value: T, key?: any) => Promise<number>;
-    update: <T>(storeName: string, value: T, key: IDBValidKey) => Promise<void>;
+    update: <T>(storeName: string, values: {
+        [x: string | number | symbol]: T;
+    }) => Promise<void>;
+    update_one: <T extends Object>(storeName: string, value: Partial<T>, key: IDBValidKey) => Promise<void>;
     remove: (storeName: string, key: IDBValidKey) => Promise<void>;
     error: string | null;
 };

package/dist/esm/hooks/useDB.js

@@ -65,6 +65,25 @@ const useDB = (options) => {
             reject(err.message || 'Database either corrupted or not initialized');
         });
     });
+    const getAll = (storeName) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readOnly);
+            const request = store.getAll();
+            request.onsuccess = (evt) => {
+                const result = evt.target.result;
+                if (undefined == result)
+                    reject('Record not found');
+                resolve(evt.target.result);
+            };
+            request.onerror = (evt) => {
+                reject(`SELECT Failed. ${evt.target.result}`);
+            };
+        })
+            .catch(err => {
+            console.log(`[getAll]`, err);
+            reject('Database either corrupted or not initialized');
+        });
+    });
     const getByID = (storeName, id) => new Promise((resolve, reject) => {
         connect().then((db) => {
             const { store } = createTransaction(storeName, DBMode.readOnly);
@@ -80,7 +99,7 @@ const useDB = (options) => {
             };
         })
             .catch(err => {
-            // console.log(`getByID`, err)
+            console.log(`[getByID]`, err);
             reject('Database either corrupted or not initialized');
         });
     });
@@ -99,16 +118,43 @@ const useDB = (options) => {
             reject(err.message || 'Database either corrupted or not initialized');
         });
     });
-    const update = (storeName, value, key) => new Promise((resolve, reject) => {
+    const update_one = (storeName, value, key) => new Promise((resolve, reject) => {
         connect().then((db) => {
             const { store } = createTransaction(storeName, DBMode.readWrite);
-            const request = store.put(value, key);
+            const getReq = store.get(key);
+            getReq.onsuccess = () => {
+                const existing = getReq.result;
+                if (!existing) {
+                    reject(`Record with key ${key} not found.`);
+                    return;
+                }
+                const updateReq = store.put({ ...existing, ...value });
+                updateReq.onsuccess = () => resolve();
+                updateReq.onerror = (evt) => reject(`Update failed. ${evt.target.error}`);
+            };
+            getReq.onerror = (evt) => {
+                reject(`Failed to get existing record. ${evt.target.error}`);
+            };
+        })
+            .catch(err => {
+            reject('Database either corrupted or not initialized');
+        });
+    });
+    const update = (storeName, values) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readWrite);
+            let completed = 0;
+            const request = store.put(values);
             request.onsuccess = (evt) => {
                 resolve();
             };
+            request.onerror = (evt) => {
+                reject(`UPDATE Failed. ${evt.target.result}`);
+            };
         })
             .catch(err => {
-            reject('Database either corrupted or not initialized');
+            reject(`UPDATE Failed. ${err}`);
+            // reject('Database either corrupted or not initialized');
         });
     });
     const remove = (storeName, key) => new Promise((resolve, reject) => {
@@ -125,10 +171,12 @@ const useDB = (options) => {
         });
     });
     return {
+        getAll,
         getByID,
         getStore,
         insert,
         update,
+        update_one,
         remove,
         error
     };

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;

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