@zuzjs/ui 0.10.5 → 0.10.7

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

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

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

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

@@ -1,96 +0,0 @@
-"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

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

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

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

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

@@ -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/esm/src/hooks/useDebounce.js

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

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

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

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

@@ -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/esm/src/hooks/useDimensions.js

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

@@ -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/esm/src/hooks/useDrag.js

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

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

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

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

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

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