@zuzjs/ui 0.10.6 → 0.10.8

package/dist/cjs/hooks/useDB.js

@@ -1,184 +0,0 @@
-"use client";
-import { useEffect, useRef, useState } from "react";
-var DBMode;
-(function (DBMode) {
-    DBMode["readOnly"] = "readonly";
-    DBMode["readWrite"] = "readwrite";
-})(DBMode || (DBMode = {}));
-const useDB = (options) => {
-    const { name, version, meta } = options;
-    const db = useRef(null);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        const openRequest = indexedDB.open(name, +(version.toString().replace(/\./g, ``)));
-        openRequest.onupgradeneeded = (event) => {
-            const database = event.target.result;
-            meta.forEach((meta) => {
-                if (!database.objectStoreNames.contains(meta.name)) {
-                    const store = database.createObjectStore(meta.name, meta.config);
-                    meta.schema.forEach((schema) => {
-                        store.createIndex(schema.name, schema.key || schema.name, { unique: schema.unique || false });
-                    });
-                }
-            });
-        };
-        openRequest.onsuccess = (event) => {
-            db.current = event.target.result;
-        };
-        openRequest.onerror = () => {
-            setError('Failed to open database');
-        };
-        return () => db.current?.close();
-    }, [name, version]);
-    const connect = () => new Promise((resolve, reject) => {
-        if (db.current)
-            resolve(db.current);
-        const request = indexedDB.open(name, +(version.toString().replace(/\./g, ``)));
-        request.onsuccess = (event) => {
-            db.current = event.target.result;
-            resolve(db.current);
-        };
-        request.onerror = (event) => {
-            reject([`Failed to open database`, event].join(`\n`));
-        };
-    });
-    const createTransaction = (storeName, mode) => {
-        const transaction = db.current.transaction(storeName, mode);
-        const store = transaction.objectStore(storeName);
-        return { store };
-    };
-    const getStore = (storeName, id) => 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 => {
-            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);
-            const request = store.get(id);
-            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(`[getByID]`, err);
-            reject('Database either corrupted or not initialized');
-        });
-    });
-    const insert = (storeName, value, key) => new Promise((resolve, reject) => {
-        connect().then((db) => {
-            const { store } = createTransaction(storeName, DBMode.readWrite);
-            const request = store.add(value, key);
-            request.onsuccess = (evt) => {
-                resolve(evt.target.result);
-            };
-            request.onerror = (evt) => {
-                reject(`INSERTION Failed. ${evt.target.result}`);
-            };
-        })
-            .catch(err => {
-            reject(err.message || 'Database either corrupted or not initialized');
-        });
-    });
-    const update_one = (storeName, value, key) => new Promise((resolve, reject) => {
-        connect().then((db) => {
-            const { store } = createTransaction(storeName, DBMode.readWrite);
-            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(`UPDATE Failed. ${err}`);
-            // reject('Database either corrupted or not initialized');
-        });
-    });
-    const remove = (storeName, key) => new Promise((resolve, reject) => {
-        connect().then((db) => {
-            const { store } = createTransaction(storeName, DBMode.readWrite);
-            const request = store.delete(key);
-            request.onsuccess = (evt) => {
-                resolve();
-            };
-        })
-            .catch(err => {
-            console.log(err);
-            reject(`Delete failed from ${storeName} with key: ${key}`);
-        });
-    });
-    return {
-        getAll,
-        getByID,
-        getStore,
-        insert,
-        update,
-        update_one,
-        remove,
-        error
-    };
-};
-export default useDB;

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

@@ -1,2 +0,0 @@
-declare const useDebounce: <T extends (...args: any[]) => void>(func: T, delay: number) => (...args: Parameters<T>) => void;
-export default useDebounce;

package/dist/cjs/hooks/useDebounce.js

@@ -1,15 +0,0 @@
-"use client";
-import { useCallback, useRef } from "react";
-const useDebounce = (func, delay) => {
-    const timeoutRef = useRef(null);
-    const debouncedFunction = useCallback((...args) => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-            func(...args);
-        }, delay);
-    }, [func, delay]);
-    return debouncedFunction;
-};
-export default useDebounce;

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

@@ -1,17 +0,0 @@
-/**
- * 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/cjs/hooks/useDelayed.js

@@ -1,26 +0,0 @@
-"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/cjs/hooks/useDevice.d.ts

@@ -1,7 +0,0 @@
-import { Dimensions } from './useDimensions';
-declare const useDevice: () => {
-    isMobile: boolean;
-    isTablet: boolean;
-    isDesktop: boolean;
-} & Dimensions;
-export default useDevice;

package/dist/cjs/hooks/useDevice.js

@@ -1,18 +0,0 @@
-"use client";
-import { useEffect } from 'react';
-import useDimensions from './useDimensions';
-const useDevice = () => {
-    const userAgent = navigator.userAgent;
-    const mobile = /Mobi|Android/i.test(userAgent);
-    const tablet = /Tablet|iPad/i.test(userAgent);
-    const dims = useDimensions();
-    useEffect(() => {
-    }, []);
-    return {
-        isMobile: mobile,
-        isTablet: tablet,
-        isDesktop: !mobile && !tablet,
-        ...dims
-    };
-};
-export default useDevice;

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

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-export interface Dimensions {
-    width: number;
-    height: number;
-    top: number;
-    left: number;
-    bottom: number;
-    right: number;
-    x: number;
-    y: number;
-}
-declare const useDimensions: (el?: HTMLElement | ReactNode) => Dimensions;
-export default useDimensions;

package/dist/cjs/hooks/useDimensions.js

@@ -1,48 +0,0 @@
-"use client";
-import { useEffect, useState } from 'react';
-const useDimensions = (el) => {
-    const [dims, setDims] = useState({
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        x: 0,
-        y: 0
-    });
-    const update = () => {
-        if (el) {
-            const { width, height, top, left, bottom, right, x, y } = el.getBoundingClientRect();
-            setDims({
-                width,
-                height,
-                top,
-                left,
-                bottom,
-                right,
-                x,
-                y
-            });
-        }
-        else {
-            setDims({
-                width: window.innerWidth,
-                height: window.innerHeight,
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-                x: 0,
-                y: 0
-            });
-        }
-    };
-    useEffect(() => {
-        update();
-        window.addEventListener("resize", update);
-        return () => window.removeEventListener("resize", update);
-    }, []);
-    return dims;
-};
-export default useDimensions;

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

@@ -1,2 +0,0 @@
-declare const useDom: () => void;
-export default useDom;

package/dist/cjs/hooks/useDom.js

@@ -1,3 +0,0 @@
-const useDom = () => {
-};
-export default useDom;

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

@@ -1,3 +0,0 @@
-export type MutationCallback = (mutations: MutationRecord[], observer: MutationObserver) => void;
-declare const useMutationObserver: (target: HTMLElement | null, callback: MutationCallback, options?: MutationObserverInit) => void;
-export default useMutationObserver;

package/dist/cjs/hooks/useDomMutation.js

@@ -1,19 +0,0 @@
-import { useEffect, useRef } from "react";
-const useMutationObserver = (target, callback, options = { childList: true, subtree: true }) => {
-    const observerRef = useRef(null);
-    useEffect(() => {
-        if (!target)
-            return;
-        // Create a new MutationObserver and pass the callback
-        observerRef.current = new MutationObserver(callback);
-        // Start observing the target element
-        observerRef.current.observe(target, options);
-        // Cleanup function to disconnect the observer
-        return () => {
-            if (observerRef.current) {
-                observerRef.current.disconnect();
-            }
-        };
-    }, [target, callback, options]);
-};
-export default useMutationObserver;

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

@@ -1,21 +0,0 @@
-import { DRAG_DIRECTION } from '../types/enums';
-interface Position {
-    x: number;
-    y: number;
-}
-export type DragOptions = {
-    direction?: DRAG_DIRECTION;
-    snap?: number;
-    limits?: {
-        left?: number;
-        right?: number;
-        top?: number;
-        bottom?: number;
-    };
-};
-declare const useDrag: (dragOptions?: DragOptions) => {
-    position: Position;
-    onMouseDown: (event: React.MouseEvent) => void;
-    isDragging: boolean;
-};
-export default useDrag;

package/dist/cjs/hooks/useDrag.js

@@ -1,72 +0,0 @@
-"use client";
-import { useEffect, useRef, useState } from 'react';
-import { DRAG_DIRECTION } from '../types/enums';
-const useDrag = (dragOptions) => {
-    const { direction, snap, limits } = dragOptions || {
-        direction: DRAG_DIRECTION.xy,
-        snap: 0,
-        limits: {}
-    };
-    const [position, setPosition] = useState({ x: 0, y: 0 });
-    const isDragging = useRef(false);
-    const dragStart = useRef({ x: 0, y: 0 });
-    const wasDragged = useRef(false);
-    const onMouseDown = (event) => {
-        isDragging.current = true;
-        wasDragged.current = false; // Reset drag flag on mouse down
-        dragStart.current = {
-            x: event.clientX - position.x,
-            y: event.clientY - position.y
-        };
-        // Prevent text selection during dragging
-        event.preventDefault();
-    };
-    const onMouseMove = (event) => {
-        if (!isDragging.current)
-            return;
-        let newX = position.x; //event.clientX - dragStart.current.x;
-        let newY = position.y; //event.clientY - dragStart.current.y;
-        if (direction === DRAG_DIRECTION.x || direction === DRAG_DIRECTION.xy) {
-            newX = event.clientX - dragStart.current.x;
-        }
-        if (direction === DRAG_DIRECTION.y || direction === DRAG_DIRECTION.xy) {
-            newY = event.clientY - dragStart.current.y;
-        }
-        // Apply limits
-        if (limits.left !== undefined)
-            newX = Math.max(newX, limits.left);
-        if (limits.right !== undefined)
-            newX = Math.min(newX, limits.right);
-        if (limits.top !== undefined)
-            newY = Math.max(newY, limits.top);
-        if (limits.bottom !== undefined)
-            newY = Math.min(newY, limits.bottom);
-        // Apply snapping
-        if (snap && snap > 0) {
-            newX = Math.round(newX / snap) * snap;
-            newY = Math.round(newY / snap) * snap;
-        }
-        // Set `wasDragged` to true if the mouse has moved from the starting position
-        if (Math.abs(newX - position.x) > 1 || Math.abs(newY - position.y) > 1) {
-            wasDragged.current = true;
-        }
-        setPosition({ x: newX, y: newY });
-    };
-    const onMouseUp = () => {
-        isDragging.current = false;
-    };
-    useEffect(() => {
-        document.addEventListener('mousemove', onMouseMove);
-        document.addEventListener('mouseup', onMouseUp);
-        return () => {
-            document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', onMouseUp);
-        };
-    }, [limits]);
-    return {
-        position,
-        onMouseDown,
-        isDragging: wasDragged.current
-    };
-};
-export default useDrag;

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

@@ -1,11 +0,0 @@
-/**
- * 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

@@ -1,64 +0,0 @@
-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/useFileManager.d.ts

@@ -1,2 +0,0 @@
-declare const useFileManager: () => void;
-export default useFileManager;

package/dist/cjs/hooks/useFileManager.js

@@ -1,3 +0,0 @@
-const useFileManager = () => {
-};
-export default useFileManager;

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

@@ -1,5 +0,0 @@
-export declare enum FILTER {
-    Gooey = "gooey"
-}
-declare const useFilters: () => string;
-export default useFilters;

package/dist/cjs/hooks/useFilters.js

@@ -1,22 +0,0 @@
-export var FILTER;
-(function (FILTER) {
-    FILTER["Gooey"] = "gooey";
-})(FILTER || (FILTER = {}));
-const useFilters = () => {
-    const filters = {
-        [FILTER.Gooey]: [
-            `<filter id="gooey">`,
-            `<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />`,
-            `<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="gooey" />`,
-            `<feBlend in="SourceGraphic" in2="goo" />`,
-            `</filter>`
-        ]
-    };
-    return [
-        `<svg xmlns="http://www.w3.org/2000/svg" version="1.1">`,
-        `<defs>`,
-        `</defs>`,
-        `</svg>`
-    ].join(``);
-};
-export default useFilters;

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

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1,53 +0,0 @@
-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/useImage.d.ts

@@ -1,2 +0,0 @@
-declare const useImage: (url: string, crossOrigin?: "anonymous" | "use-credentials", referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url") => any[];
-export default useImage;