@zuzjs/ui 0.8.0 → 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/Crumb/index.d.ts

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

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

@@ -16,6 +16,8 @@ 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';

package/dist/cjs/hooks/index.js

@@ -17,6 +17,8 @@ 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';

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/useSlider.d.ts

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

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<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 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<HTMLOListElement | HTMLUListElement>>;
+} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
 export default List;

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

@@ -16,6 +16,8 @@ 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';

package/dist/esm/hooks/index.js

@@ -17,6 +17,8 @@ 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';

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;

package/dist/esm/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/esm/hooks/useSlider.d.ts

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