@zuzjs/ui 0.7.4 → 0.7.5

package/dist/esm/src/hooks/useIntersectionObserver.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+const useIntersectionObserver = (refs, options = {}) => {
+    const [intersectionRatio, setIntersectionRatio] = useState(refs && refs.length > 0 ? new Array(refs.length).fill(0) : []);
+    useEffect(() => {
+        if (!refs || !refs.length)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            requestAnimationFrame(() => {
+                setIntersectionRatio(prev => {
+                    const newRatios = [...prev];
+                    let hasChanges = false;
+                    entries.forEach(entry => {
+                        const index = refs.findIndex(ref => ref.current === entry.target);
+                        if (index !== -1 && newRatios[index] !== entry.intersectionRatio) {
+                            newRatios[index] = entry.intersectionRatio;
+                            hasChanges = true;
+                        }
+                    });
+                    return hasChanges ? newRatios : prev;
+                });
+            });
+        }, { rootMargin: '200px', threshold: [1], ...options });
+        refs.forEach(ref => {
+            if (ref.current) {
+                observer.observe(ref.current);
+            }
+        });
+        return () => {
+            refs.forEach(ref => {
+                if (ref.current) {
+                    observer.unobserve(ref.current);
+                }
+            });
+        };
+    }, [refs, options]);
+    return intersectionRatio;
+};
+export default useIntersectionObserver;

package/dist/esm/src/hooks/useKeyBind.d.ts

@@ -0,0 +1,3 @@
+import { KeyCode } from "../types/enums";
+declare const useKeyBind: (key: KeyCode, fun: () => void) => void;
+export default useKeyBind;

package/dist/esm/src/hooks/useKeyBind.js

@@ -0,0 +1,4 @@
+const useKeyBind = (key, fun) => {
+    // bindKey()
+};
+export default useKeyBind;

package/dist/esm/src/hooks/useMounted.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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/esm/src/hooks/useMounted.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } 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/esm/src/hooks/useNetworkStatus.d.ts

@@ -0,0 +1,2 @@
+declare const useNetworkStatus: () => boolean | null;
+export default useNetworkStatus;

package/dist/esm/src/hooks/useNetworkStatus.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+const useNetworkStatus = () => {
+    const [isOnline, setIsOnline] = useState(null);
+    const updateNetworkStatus = () => {
+        setIsOnline(navigator.onLine);
+    };
+    useEffect(() => {
+        setTimeout(() => setIsOnline(navigator.onLine));
+        window.addEventListener('online', updateNetworkStatus);
+        window.addEventListener('offline', updateNetworkStatus);
+        return () => {
+            window.removeEventListener('online', updateNetworkStatus);
+            window.removeEventListener('offline', updateNetworkStatus);
+        };
+    }, []);
+    return isOnline;
+};
+export default useNetworkStatus;

package/dist/esm/src/hooks/useResizeObserver.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+interface Size {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+}
+declare const useResizeObserver: (ref: RefObject<HTMLElement | null>) => Size;
+export default useResizeObserver;

package/dist/esm/src/hooks/useResizeObserver.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+const useResizeObserver = (ref) => {
+    const [size, setSize] = useState({ width: 0, height: 0, top: 0, left: 0 });
+    useEffect(() => {
+        const handleResize = (entries) => {
+            for (let entry of entries) {
+                const { width, height, top, left } = entry.contentRect;
+                setSize({ width, height, top, left });
+            }
+        };
+        const resizeObserver = new ResizeObserver(handleResize);
+        if (ref.current) {
+            resizeObserver.observe(ref.current);
+        }
+        return () => {
+            if (ref.current) {
+                resizeObserver.unobserve(ref.current);
+            }
+        };
+    }, [ref]);
+    return size;
+};
+export default useResizeObserver;

package/dist/esm/src/hooks/useSheet.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent, RefObject } from "react";
+import { SheetHandler } from "../comps";
+declare const useSheet: (sheet: RefObject<SheetHandler | null>) => {
+    show: (e: MouseEvent<Element, MouseEvent> | TouchEvent) => void;
+    hide: (e: MouseEvent | TouchEvent) => void;
+};
+export default useSheet;

package/dist/esm/src/hooks/useSheet.js

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+const useSheet = (sheet) => {
+    const show = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setTimeout(() => {
+            sheet.current?.show(e);
+        }, 0);
+    };
+    const hide = (e) => {
+        sheet.current?.hide();
+    };
+    useEffect(() => {
+        document.addEventListener("click", hide);
+        return () => {
+            document.removeEventListener("click", hide);
+        };
+    }, [sheet]);
+    return { show, hide };
+};
+export default useSheet;

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

@@ -0,0 +1,9 @@
+export * from "./comps";
+export { withCSS as css } from "./funs";
+export * from "./funs";
+export { default as PubSub } from "./funs/events";
+export * from "./hooks";
+export * from "./types";
+export * from "./types/enums";
+export * from "./types/interfaces";
+export { default as SVGIcons } from "./comps/svgicons";

package/dist/esm/src/index.js

@@ -0,0 +1,9 @@
+export * from "./comps";
+export { withCSS as css } from "./funs";
+export * from "./funs";
+export { default as PubSub } from "./funs/events";
+export * from "./hooks";
+export * from "./types";
+export * from "./types/enums";
+export * from "./types/interfaces";
+export { default as SVGIcons } from "./comps/svgicons";

package/dist/esm/src/types/enums.d.ts

@@ -0,0 +1,231 @@
+export declare enum FILTER {
+    Gooey = "gooey"
+}
+export declare enum SPINNER {
+    Simple = "SIMPLE",
+    Roller = "ROLLER",
+    Wave = "Wave"
+}
+export declare enum SLIDER {
+    Default = "range",
+    Text = "number"
+}
+export declare enum FORMVALIDATION_STYLE {
+    Dots = "DOTS"
+}
+export declare enum FORMVALIDATION {
+    Email = "EMAIL",
+    Uri = "URI",
+    Password = "PASSWORD",
+    MatchField = "MATCHFIELD",
+    Pattern = "*"
+}
+export declare enum SHEET {
+    Dialog = "DIALOG",
+    Default = "DEFAULT",
+    Error = "ERROR",
+    Success = "SUCCESS",
+    Warn = "WARN"
+}
+export declare enum SHEET_ACTION_POSITION {
+    Left = "LEFT",
+    Right = "RIGHT",
+    Center = "CENTER"
+}
+export declare enum TRANSITION_CURVES {
+    Spring = "SPRING",
+    EaseInOut = "EASEINOUT",
+    Bounce = "BOUNCE"
+}
+export declare enum TRANSITIONS {
+    FadeIn = "FADE_IN",
+    ScaleIn = "SCALE_IN",
+    SlideInTop = "SLIDE_FROM_TOP",
+    SlideInRight = "SLIDE_FROM_RIGHT",
+    SlideInBottom = "SLIDE_FROM_BOTTOM",
+    SlideInLeft = "SLIDE_FROM_LEFT"
+}
+export declare enum DRAWER_SIDE {
+    Left = "LEFT",
+    Right = "RIGHT",
+    Top = "TOP",
+    Bottom = "BOTTOM"
+}
+export declare enum CHECKBOX {
+    Default = "DEFAULT",
+    Switch = "SWITCH"
+}
+export declare enum RADIO {
+    Default = "DEFAULT",
+    Card = "CARD"
+}
+export declare enum EDIT_TYPE {
+    Slider = "SLIDER",
+    Checkbox = "CHECKBOX"
+}
+export declare enum DATATYPE {
+    String = "STRING",
+    Number = "NUMBER",
+    Boolean = "BOOLEAN",
+    Array = "ARRAY",
+    Object = "OBJECT",
+    Date = "DATE",
+    Time = "TIME",
+    DateTime = "DATETIME",
+    File = "FILE"
+}
+export declare enum SORT {
+    Asc = "ASC",
+    Desc = "DESC"
+}
+export declare enum PROGRESS {
+    Bar = "BAR",
+    Ring = "RING"
+}
+export declare enum SKELETON {
+    Default = "DEFAULT",
+    Circle = "CIRCLE"
+}
+export declare enum ALERT {
+    Success = "success",
+    Error = "error",
+    Warning = "warning",
+    Info = "info"
+}
+export declare enum AVATAR {
+    Circle = "CIRCLE",
+    Square = "SQUARE"
+}
+export declare enum KeyCode {
+    Backspace = 8,
+    Tab = 9,
+    Enter = 13,
+    Shift = 16,
+    Ctrl = 17,
+    Alt = 18,
+    PauseBreak = 19,
+    CapsLock = 20,
+    Escape = 27,
+    Space = 32,
+    PageUp = 33,
+    PageDown = 34,
+    End = 35,
+    Home = 36,
+    ArrowLeft = 37,
+    ArrowUp = 38,
+    ArrowRight = 39,
+    ArrowDown = 40,
+    Insert = 45,
+    Delete = 46,
+    Digit0 = 48,
+    Digit1 = 49,
+    Digit2 = 50,
+    Digit3 = 51,
+    Digit4 = 52,
+    Digit5 = 53,
+    Digit6 = 54,
+    Digit7 = 55,
+    Digit8 = 56,
+    Digit9 = 57,
+    KeyA = 65,
+    KeyB = 66,
+    KeyC = 67,
+    KeyD = 68,
+    KeyE = 69,
+    KeyF = 70,
+    KeyG = 71,
+    KeyH = 72,
+    KeyI = 73,
+    KeyJ = 74,
+    KeyK = 75,
+    KeyL = 76,
+    KeyM = 77,
+    KeyN = 78,
+    KeyO = 79,
+    KeyP = 80,
+    KeyQ = 81,
+    KeyR = 82,
+    KeyS = 83,
+    KeyT = 84,
+    KeyU = 85,
+    KeyV = 86,
+    KeyW = 87,
+    KeyX = 88,
+    KeyY = 89,
+    KeyZ = 90,
+    Numpad0 = 96,
+    Numpad1 = 97,
+    Numpad2 = 98,
+    Numpad3 = 99,
+    Numpad4 = 100,
+    Numpad5 = 101,
+    Numpad6 = 102,
+    Numpad7 = 103,
+    Numpad8 = 104,
+    Numpad9 = 105,
+    NumpadMultiply = 106,
+    NumpadAdd = 107,
+    NumpadSubtract = 109,
+    NumpadDecimal = 110,
+    NumpadDivide = 111,
+    F1 = 112,
+    F2 = 113,
+    F3 = 114,
+    F4 = 115,
+    F5 = 116,
+    F6 = 117,
+    F7 = 118,
+    F8 = 119,
+    F9 = 120,
+    F10 = 121,
+    F11 = 122,
+    F12 = 123,
+    NumLock = 144,
+    ScrollLock = 145,
+    Semicolon = 186,// ;
+    Equal = 187,// =
+    Comma = 188,// ,
+    Minus = 189,// -
+    Period = 190,// .
+    Slash = 191,// /
+    Backquote = 192,// `
+    BracketLeft = 219,// [
+    Backslash = 220,// \
+    BracketRight = 221,// ]
+    Quote = 222
+}
+export declare enum SHIMMER {
+    Classic = "CLASSIC",
+    Aurora = "AURORA",
+    Flame = "FLAME"
+}
+export declare enum DRAG_DIRECTION {
+    x = "x",
+    y = "y",
+    xy = "xy"
+}
+export declare enum Size {
+    Default = "def",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+export declare enum Variant {
+    Default = "def",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg",
+    XLarge = "xl"
+}
+export declare enum Position {
+    Auto = "auto",
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+export declare enum ColorTheme {
+    Light = "light",
+    Dark = "dark",
+    System = "system"
+}