@zuzjs/ui 0.10.6 → 0.10.8

package/dist/cjs/hooks/useBase.js

@@ -1,192 +0,0 @@
-import { animateCSSVar } from "@zuzjs/core";
-import { useEffect, useRef } from "react";
-import { cleanProps, css } from "../funs";
-import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
-import { cssFilterKeys, cssProps, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
-let useDrag = null;
-const buildSkeletonStyle = (s) => {
-    const makeValue = (v, unit = `px`) => {
-        return v ?
-            `string` == typeof v ? v : `${v}${unit}`
-            : `inherit`;
-    };
-    const style = {};
-    if (s.radius) {
-        style.borderRadius = makeValue(s.radius);
-    }
-    if (s.size) {
-        style.width = style.minWidth = style.maxWidth = style.height = style.minHeight = style.maxHeight = makeValue(s.size);
-    }
-    else if (s.width || s.height) {
-        if (s.width) {
-            style.width = style.minWidth = style.maxWidth = makeValue(s.width);
-        }
-        if (s.height) {
-            style.height = style.minHeight = style.maxHeight = makeValue(s.height);
-        }
-    }
-    else {
-        style.minWidth = style.minHeight = s.defaultSize || `100%`;
-    }
-    return style;
-};
-const useBase = (props, ref) => {
-    const { as, fx, animate, timeline, transition: autoTransition, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
-    const currentScroll = useRef({ x: 0, y: 0 });
-    const lastTime = useRef(performance.now());
-    let cx = [];
-    if (as) {
-        cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
-    }
-    const { transition, from, to, exit, when, duration, delay, curve, scroll } = autoTransition ? {
-        transition: autoTransition,
-        duration: 0.3
-    } : fx || animate || {};
-    let _style = {};
-    if (undefined === when) {
-        _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };
-    }
-    else if (true === when) {
-        _style = transition ? getAnimationTransition(transition, false) : { ...(to || {}) };
-    }
-    else {
-        _style = transition ? getAnimationTransition(transition, false, true) : from || {};
-    }
-    const _transition = {};
-    if (transition || (from && to)) {
-        // { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` }
-        const _curve = getAnimationCurve(curve);
-        const _transitionList = [];
-        const _willChangeList = [];
-        Object.keys(_style).forEach(ck => {
-            let prop = ck;
-            let _subTrans = ck;
-            if (prop in cssWithKeys) {
-                _subTrans = cssTransformKeys.includes(cssWithKeys[prop].toString()) ? `transform`
-                    : cssFilterKeys.includes(cssWithKeys[prop].toString()) ? `filter`
-                        : _subTrans in cssProps ? cssProps[_subTrans] : _subTrans; //(cssWithKeys[prop] || _subTrans).toString() // _subTrans
-            }
-            else if (cssTransformKeys.includes(prop)) {
-                _subTrans = `transform`;
-            }
-            // will-change: ${_subTrans}; 
-            const _newTransition = `${_subTrans} ${duration || `0.2`}s ${_curve} ${delay || 0}s`;
-            if (!_willChangeList.includes(_subTrans))
-                _willChangeList.push(_subTrans);
-            if (!_transitionList.includes(_newTransition))
-                _transitionList.push(_newTransition);
-        });
-        _transition.transition = _transitionList.join(`, `);
-        _transition.willChange = _willChangeList.join(`, `);
-    }
-    // // console.log(_style, _transition)
-    const is = typeof window !== "undefined";
-    let dragProps = {};
-    let dragStyle = {};
-    if (draggable && is) {
-        if (!useDrag) {
-            import("./useDrag")
-                .then(module => {
-                useDrag = module.default;
-            })
-                .catch(err => {
-                console.error("Error loading useDrag:", err);
-            });
-        }
-        if (useDrag) {
-            const drag = useDrag(dragOptions);
-            dragProps = {
-                onMouseDown: drag.onMouseDown,
-            };
-            dragStyle = {
-                transform: `translate(${drag.position.x}px, ${drag.position.y}px)`,
-            };
-        }
-    }
-    const handleScrollParallax = () => {
-        if (fx && fx.scroll && typeof window !== 'undefined') {
-            const now = performance.now();
-            const dt = (now - lastTime.current) / 1000;
-            lastTime.current = now;
-            const { lerpFactor, x, y, multiplier, xMultiplier, yMultiplier } = fx.scroll;
-            const delta = window.scrollY - currentScroll.current.y;
-            const velocity = delta / dt;
-            currentScroll.current.y += delta * (lerpFactor || .1);
-            if (ref?.current) {
-                const translateX = x ? currentScroll.current.x * x * (multiplier || xMultiplier || .25) : 0;
-                const translateY = y ? currentScroll.current.y * y * (multiplier || yMultiplier || .25) : 0;
-                animateCSSVar(ref, "--scroll-y", translateY);
-                animateCSSVar(ref, "--scroll-x", translateX);
-            }
-        }
-    };
-    const handleMouseParallax = (e) => {
-        if (!fx || !fx.mouse || typeof window === 'undefined')
-            return;
-        const now = performance.now();
-        const dt = (now - lastTime.current) / 1000;
-        lastTime.current = now;
-        const { lerpFactor, x, y, multiplier, xMultiplier, yMultiplier } = fx.mouse;
-        // Normalize mouse position to center (0) range (-1 to 1)
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        const nx = (e.clientX - vw / 2) / (vw / 2); // -1 to 1
-        const ny = (e.clientY - vh / 2) / (vh / 2); // -1 to 1
-        const dx = nx - currentScroll.current.x;
-        const dy = ny - currentScroll.current.y;
-        currentScroll.current.x += dx * (lerpFactor || 0.1);
-        currentScroll.current.y += dy * (lerpFactor || 0.1);
-        if (ref?.current) {
-            const translateX = x ? currentScroll.current.x * (multiplier || xMultiplier || 20) : 0;
-            const translateY = y ? currentScroll.current.y * (multiplier || yMultiplier || 20) : 0;
-            animateCSSVar(ref, '--mouse-x', translateX);
-            animateCSSVar(ref, '--mouse-y', translateY);
-        }
-    };
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            if (fx && fx.scroll) {
-                if (ref) {
-                    ref.current.style.willChange = `transform`;
-                    ref.current.style.transform = `translate3d(0px, var(--scroll-y), 0)`;
-                    ref.current.style.transition = `transform 0.1s ${fx.curve ? getAnimationCurve(fx.curve) : `var(--spring)`}`;
-                }
-                window.addEventListener('scroll', handleScrollParallax, { passive: true });
-                return () => {
-                    window.removeEventListener('scroll', handleScrollParallax);
-                };
-            }
-            if (fx && fx.mouse) {
-                if (ref) {
-                    ref.current.style.willChange = `transform`;
-                    ref.current.style.transform = `translate3d(0px, var(--mouse-y), 0)`;
-                    ref.current.style.transition = `transform 0.1s ${fx.curve ? getAnimationCurve(fx.curve) : `var(--spring)`}`;
-                }
-                window.document.addEventListener('mousemove', handleMouseParallax, { passive: true });
-                return () => {
-                    window.removeEventListener('mousemove', handleMouseParallax);
-                };
-            }
-        }
-    }, [ref]);
-    return {
-        style: {
-            ...buildWithStyles(_style),
-            ..._transition,
-            ...(skeleton?.enabled ? buildSkeletonStyle(skeleton) : {}),
-            ...dragStyle,
-        },
-        className: [
-            className,
-            ...cx,
-            skeleton?.enabled ? `--skeleton` : ``,
-            shimmer ? `--shimmer --${shimmer.toLowerCase()}` : ``,
-            draggable ? `--draggable` : ``,
-        ].join(' ').trim(),
-        rest: {
-            ...dragProps,
-            ...cleanProps(rest, propsToRemove ? [...propsToRemove, `skeleton`] : [`skeleton`]),
-        },
-    };
-};
-export default useBase;

package/dist/cjs/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/cjs/hooks/useCalendar.js

@@ -1,65 +0,0 @@
-"use client";
-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/cjs/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/cjs/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: [forceTheme ? null : _jsx("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: {
-                    __html: `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/cjs/hooks/useCommandActions.d.ts

@@ -1,29 +0,0 @@
-import { RefObject } from "react";
-export type Command = {
-    label: string;
-    value: string;
-    icon?: string;
-    type?: 'command' | 'submenu' | 'action';
-    subCommands?: Command[];
-    action?: React.ReactNode | ((props: {
-        onSelect: (value: string) => void;
-    }) => React.ReactNode);
-};
-export type CommandActionProps = {
-    command?: string;
-    commands?: Command[];
-    cmd?: (value: string, textarea: HTMLTextAreaElement | HTMLInputElement) => void;
-    ref: RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
-};
-declare const useCommandActions: ({ command, commands, cmd, ref, }: CommandActionProps) => {
-    showDropdown: boolean;
-    dropdownPosition: {
-        top: number;
-        left: number;
-    };
-    handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
-    handleInput: (event: React.FormEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
-    handleCommandSelect: (value: string) => void;
-    parentRef: RefObject<HTMLDivElement | null>;
-};
-export default useCommandActions;

package/dist/cjs/hooks/useCommandActions.js

@@ -1,104 +0,0 @@
-import { useEffect } from "react";
-import { useState } from "react";
-import { useRef } from "react";
-const useCommandActions = ({ command = '/', commands = [], cmd, ref, }) => {
-    const [commandStart, setCommandStart] = useState(-1);
-    const [showDropdown, setShowDropdown] = useState(false);
-    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
-    const parentRef = useRef(null);
-    const handleInput = (event) => {
-        const textarea = ref.current;
-        if (textarea && showDropdown) {
-            const { value } = textarea;
-            if (commandStart < 0 || commandStart >= value.length || value[commandStart] !== command) {
-                setShowDropdown(false);
-            }
-        }
-    };
-    const handleKeyDown = (event) => {
-        const textarea = ref.current;
-        if (!textarea)
-            return;
-        const { selectionStart } = textarea;
-        if (event.key === command) {
-            setCommandStart(selectionStart || -1);
-            const caretPos = getCaretCoordinates(textarea, selectionStart || -1);
-            setDropdownPosition({
-                top: caretPos.top + 20,
-                left: caretPos.left,
-            });
-            setShowDropdown(true);
-        }
-        else if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            setShowDropdown(false);
-        }
-    };
-    const handleCommandSelect = (value) => {
-        const textarea = ref.current;
-        if (!textarea)
-            return;
-        if (cmd) {
-            cmd(value, textarea);
-        }
-        else {
-            const { value: currentValue, selectionStart } = textarea;
-            const newValue = currentValue.slice(0, commandStart) +
-                value +
-                currentValue.slice(selectionStart || -1);
-            textarea.value = newValue;
-            textarea.setSelectionRange(commandStart + value.length, commandStart + value.length);
-            const event = new Event('input', { bubbles: true });
-            textarea.dispatchEvent(event);
-        }
-        setShowDropdown(false);
-        textarea.focus();
-    };
-    const getCaretCoordinates = (element, position) => {
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        if (!context) {
-            return { top: 0, left: 0 };
-        }
-        const style = window.getComputedStyle(element);
-        context.font = `${style.fontSize} ${style.fontFamily}`;
-        const text = element.value.substring(0, position);
-        const lines = text.split('\n');
-        const lastLine = lines[lines.length - 1];
-        const left = context.measureText(lastLine).width;
-        const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.2;
-        const top = (lines.length - 1) * lineHeight;
-        const paddingTop = parseFloat(style.paddingTop) || 0;
-        const paddingLeft = parseFloat(style.paddingLeft) || 0;
-        const scrollTop = element.scrollTop;
-        canvas.remove();
-        return {
-            top: top - scrollTop + paddingTop,
-            left: left + paddingLeft,
-        };
-    };
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (ref.current &&
-                parentRef.current &&
-                !ref.current.contains(event.target) &&
-                !parentRef.current.contains(event.target)) {
-                setShowDropdown(false);
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [ref]);
-    return {
-        showDropdown,
-        dropdownPosition,
-        handleKeyDown,
-        handleInput,
-        handleCommandSelect,
-        parentRef,
-    };
-};
-export default useCommandActions;

package/dist/cjs/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/cjs/hooks/useContextMenu.js

@@ -1,22 +0,0 @@
-"use client";
-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/cjs/hooks/useDB.d.ts

@@ -1,31 +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) => {
-    getAll: <T>(storeName: string) => Promise<T>;
-    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, values: {
-        [x: string | number | symbol]: T;
-    }) => Promise<void>;
-    update_one: <T extends Object>(storeName: string, value: Partial<T>, key: IDBValidKey) => Promise<void>;
-    remove: (storeName: string, key: IDBValidKey) => Promise<void>;
-    error: string | null;
-};
-export default useDB;