@zuzjs/ui 0.7.4 → 0.7.6

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

@@ -0,0 +1,16 @@
+import { CalendarMonthFormat, CalendarWeekdayFormat } from "../types";
+declare const useCalendar: (range?: number, dayFormat?: CalendarWeekdayFormat, monthFormat?: CalendarMonthFormat) => {
+    today: Date;
+    daysCount: number;
+    month: string;
+    day: string;
+    days: {
+        day: string;
+        date: number;
+        month: string;
+        year: number;
+    }[];
+    next: () => void;
+    prev: () => void;
+};
+export default useCalendar;

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

@@ -0,0 +1,64 @@
+import { useState } from "react";
+const isLeapYear = (year) => {
+    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
+};
+const getDaysInMonth = (month, year) => {
+    switch (month) {
+        case 1: // February
+            return isLeapYear(year) ? 29 : 28;
+        case 3:
+        case 5:
+        case 8:
+        case 10: // April, June, September, November
+            return 30;
+        default:
+            return 31;
+    }
+};
+const getDayName = (date, format) => {
+    return date.toLocaleString('default', { weekday: format });
+};
+const getMonthName = (month, format) => {
+    const date = new Date();
+    date.setMonth(month);
+    return date.toLocaleString('default', { month: format });
+};
+const useCalendar = (range = 1, dayFormat, monthFormat) => {
+    const [currentDate, setCurrentDate] = useState(new Date());
+    const next = () => {
+        setCurrentDate(prevDate => {
+            const nextDate = new Date(prevDate);
+            nextDate.setMonth(prevDate.getMonth() + range);
+            return nextDate;
+        });
+    };
+    const prev = () => {
+        setCurrentDate(_prevDate => {
+            const prevDate = new Date(_prevDate);
+            prevDate.setMonth(prevDate.getMonth() - range);
+            return prevDate;
+        });
+    };
+    const daysCount = getDaysInMonth(currentDate.getMonth(), currentDate.getFullYear());
+    const month = getMonthName(currentDate.getMonth(), monthFormat || "long");
+    const day = getDayName(currentDate, dayFormat || "short");
+    const days = Array.from({ length: daysCount }, (_, index) => {
+        const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), index + 1);
+        return {
+            day: getDayName(date, dayFormat || "short"),
+            date: date.getDate(),
+            month: getMonthName(date.getMonth(), monthFormat || "long"),
+            year: date.getFullYear(),
+        };
+    });
+    return {
+        today: currentDate,
+        daysCount,
+        month,
+        day,
+        days,
+        next,
+        prev,
+    };
+};
+export default useCalendar;

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

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { ColorTheme } from "../types/enums";
+export type ColorScheme = `light` | `dark` | `system`;
+export type ThemeContextProps = {
+    colorScheme: ColorScheme;
+    resolvedScheme: `light` | `dark`;
+    setColorScheme: (theme: ColorScheme) => void;
+};
+export interface ThemeProviderProps {
+    children: ReactNode;
+    forceTheme?: ColorTheme;
+    storageKey?: string;
+}
+export declare const useColorScheme: () => ThemeContextProps;
+export declare const ThemeProvider: ({ children, storageKey, forceTheme }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+const MATCH_MEDIA = `(prefers-color-scheme: dark)`;
+const SSR = typeof window === 'undefined';
+const ThemeContext = createContext(undefined);
+export const useColorScheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};
+export const ThemeProvider = ({ children, storageKey = `--ucs`, forceTheme }) => {
+    return _jsx(Theme, { storageKey: storageKey, forceTheme: forceTheme, children: children });
+};
+const Theme = ({ children, storageKey, forceTheme }) => {
+    const [colorScheme, setThemeState] = useState(() => forceTheme || getTheme(storageKey, `system`));
+    const [resolvedTheme, setResolvedTheme] = useState(() => forceTheme || getTheme(storageKey));
+    // const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark' | undefined>(() => {
+    //     if ( SSR ) return undefined
+    //     return colorScheme === 'system' ? window?.matchMedia(MATCH_MEDIA).matches ? 'dark' : 'light' : colorScheme
+    // });
+    const getCurrentScheme = (e) => {
+        if (!e)
+            e = window.matchMedia(MATCH_MEDIA);
+        return e.matches ? `dark` : `light`;
+    };
+    const applyColorScheme = useCallback((theme) => {
+        let last = theme == `system` ? getCurrentScheme() : theme;
+        const d = document.documentElement;
+        d.setAttribute(`color-scheme`, last);
+        d.style.colorScheme = last;
+        setResolvedTheme(last);
+    }, [getCurrentScheme]);
+    const switchColorScheme = useCallback((theme) => {
+        setThemeState(theme);
+        localStorage.setItem(storageKey, theme);
+        applyColorScheme(theme);
+    }, [colorScheme]);
+    const withMediaQuery = useCallback((e) => {
+        const resolved = getCurrentScheme(e);
+        setResolvedTheme(resolved);
+        if (colorScheme === 'system') {
+            applyColorScheme('system');
+        }
+    }, [colorScheme]);
+    useEffect(() => {
+        if (colorScheme == undefined)
+            window.localStorage.getItem(storageKey) || `system`;
+    }, [colorScheme]);
+    useEffect(() => {
+        const media = window.matchMedia(MATCH_MEDIA);
+        media.addEventListener(`change`, withMediaQuery);
+        // withMediaQuery(media)
+    }, [withMediaQuery]);
+    useEffect(() => {
+        const handleStorage = (e) => {
+            if (e.key != storageKey) {
+                return;
+            }
+            if (!e.newValue) {
+                switchColorScheme(`system`);
+            }
+            else
+                switchColorScheme(e.newValue);
+        };
+        window.addEventListener(`storage`, handleStorage);
+        return () => window.removeEventListener(`storage`, handleStorage);
+    }, [switchColorScheme]);
+    useEffect(() => {
+        applyColorScheme((forceTheme || colorScheme || `system`));
+    }, [colorScheme]);
+    return (_jsxs(ThemeContext, { value: { colorScheme: colorScheme, resolvedScheme: resolvedTheme, setColorScheme: switchColorScheme }, children: [_jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: {
+                    __html: forceTheme ? `` : `const el = document.documentElement
+                    const themes = ['light', 'dark']
+                    let theme = localStorage.getItem(\`${storageKey}\`) || "system";
+                    if (theme === "system") {
+                        theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+                    }
+                    document.documentElement.setAttribute("color-scheme", theme);
+                    document.documentElement.style.colorScheme = theme;`
+                } }), children] }));
+};
+const getTheme = (key, fallback) => {
+    if (SSR)
+        return undefined;
+    let theme;
+    try {
+        theme = localStorage.getItem(key) || undefined;
+    }
+    catch (e) {
+        // Unsupported
+    }
+    return theme || fallback;
+};

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

@@ -0,0 +1,7 @@
+import { MouseEvent, RefObject } from "react";
+import { ContextItem, ContextMenuHandler } from "../comps";
+declare const useContextMenu: (menu: RefObject<ContextMenuHandler | null>) => {
+    show: (e: MouseEvent<Element, MouseEvent> | TouchEvent, items?: ContextItem[]) => void;
+    hide: (e: MouseEvent | TouchEvent) => void;
+};
+export default useContextMenu;

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

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

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

@@ -0,0 +1,27 @@
+export type IDBOptions = {
+    name: string;
+    version: number;
+    meta: IDBMeta[];
+};
+export interface IDBMeta {
+    name: string;
+    config: {
+        keyPath: string;
+        autoIncrement: boolean;
+    };
+    schema: IDBSchema[];
+}
+export interface IDBSchema {
+    name: string;
+    key?: string;
+    unique?: boolean;
+}
+declare const useDB: (options: IDBOptions) => {
+    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>;
+    remove: (storeName: string, key: IDBValidKey) => Promise<void>;
+    error: string | null;
+};
+export default useDB;

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

@@ -0,0 +1,135 @@
+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 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 = (storeName, value, key) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readWrite);
+            const request = store.put(value, key);
+            request.onsuccess = (evt) => {
+                resolve();
+            };
+        })
+            .catch(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 {
+        getByID,
+        getStore,
+        insert,
+        update,
+        remove,
+        error
+    };
+};
+export default useDB;

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

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

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

@@ -0,0 +1,14 @@
+import { useRef, useCallback } 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/esm/src/hooks/useDevice.d.ts

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

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

@@ -0,0 +1,17 @@
+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/esm/src/hooks/useDimensions.d.ts

@@ -0,0 +1,13 @@
+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/esm/src/hooks/useDimensions.js

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

@@ -0,0 +1,21 @@
+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/esm/src/hooks/useDrag.js

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

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

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

@@ -0,0 +1,22 @@
+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/esm/src/hooks/useImage.d.ts

@@ -0,0 +1,2 @@
+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;

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

@@ -0,0 +1,22 @@
+import { useEffect, useRef, useState } from "react";
+const useImage = (url, crossOrigin, referrerPolicy) => {
+    const img = useRef(null);
+    const [state, setState] = useState({ loaded: false, error: null });
+    useEffect(() => {
+        if (url && url !== ``) {
+            var _img = new Image();
+            crossOrigin && (_img.crossOrigin = crossOrigin);
+            referrerPolicy && (_img.referrerPolicy = referrerPolicy);
+            _img.onload = () => {
+                img.current = _img;
+                setState({ loaded: true, error: null });
+            };
+            _img.onerror = () => {
+                setState({ loaded: false, error: `Failed to load image at ${url}` });
+            };
+            _img.src = url;
+        }
+    }, []);
+    return [img.current ? img.current.src : ``, state.loaded, state.error];
+};
+export default useImage;

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

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+interface IntersectionObserverOptions {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+}
+declare const useIntersectionObserver: (refs: RefObject<HTMLElement | null>[], options?: IntersectionObserverOptions) => number[];
+export default useIntersectionObserver;