@zuzjs/ui 0.10.5 → 0.10.7

package/dist/cjs/hooks/usePlayer.js

@@ -1,85 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-const useMediaPlayer = ({ src, type = "video", autoPlay = false, loop = false, controls = false }) => {
-    const mediaRef = useRef(null);
-    const [isPlaying, setIsPlaying] = useState(autoPlay);
-    const [volume, setVolume] = useState(1);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-    // Play / Pause toggle
-    const togglePlay = useCallback(() => {
-        if (mediaRef.current) {
-            if (mediaRef.current.paused) {
-                mediaRef.current.play();
-                setIsPlaying(true);
-            }
-            else {
-                mediaRef.current.pause();
-                setIsPlaying(false);
-            }
-        }
-    }, []);
-    // Seek media
-    const seek = useCallback((time) => {
-        if (mediaRef.current) {
-            mediaRef.current.currentTime = time;
-            setCurrentTime(time);
-        }
-    }, []);
-    // Change volume
-    const changeVolume = useCallback((newVolume) => {
-        if (mediaRef.current) {
-            mediaRef.current.volume = newVolume;
-            setVolume(newVolume);
-        }
-    }, []);
-    // Toggle fullscreen (only for video)
-    const toggleFullscreen = useCallback(() => {
-        if (type === "video" && mediaRef.current) {
-            if (!document.fullscreenElement) {
-                mediaRef.current.requestFullscreen?.();
-                setIsFullscreen(true);
-            }
-            else {
-                document.exitFullscreen?.();
-                setIsFullscreen(false);
-            }
-        }
-    }, [type]);
-    // Update time
-    const handleTimeUpdate = useCallback(() => {
-        if (mediaRef.current) {
-            setCurrentTime(mediaRef.current.currentTime);
-        }
-    }, []);
-    // Set duration
-    const handleLoadedMetadata = useCallback(() => {
-        if (mediaRef.current) {
-            setDuration(mediaRef.current.duration);
-        }
-    }, []);
-    return {
-        mediaRef,
-        isPlaying,
-        togglePlay,
-        seek,
-        volume,
-        changeVolume,
-        isFullscreen,
-        toggleFullscreen,
-        currentTime,
-        duration,
-        handleTimeUpdate,
-        handleLoadedMetadata,
-        mediaProps: {
-            ref: mediaRef,
-            src,
-            autoPlay,
-            loop,
-            controls,
-            onTimeUpdate: handleTimeUpdate,
-            onLoadedMetadata: handleLoadedMetadata,
-        },
-    };
-};
-export default useMediaPlayer;

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

@@ -1,13 +0,0 @@
-import { Direction } from "../types";
-interface PositionOptions {
-    offset?: number;
-    direction?: Direction;
-    container?: HTMLElement | null;
-    triggerRef?: React.RefObject<HTMLElement>;
-}
-export declare const usePosition: (ref: React.RefObject<HTMLElement>, // The element to be positioned
-options?: PositionOptions) => {
-    postion: "fixed" | "absolute" | null;
-    reposition: () => void;
-};
-export default usePosition;

package/dist/cjs/hooks/usePosition.js

@@ -1,191 +0,0 @@
-import { useCallback, useEffect, useRef } from "react"; // Added useRef for internal state if needed
-export const usePosition = (ref, // The element to be positioned
-options = {}) => {
-    const { offset = 8, direction = 'bottom', container = null, // Can be a specific parent container
-    triggerRef = null, // If the trigger is not the immediate parent
-     } = options;
-    // Internal state to store the applied position type
-    const appliedPositionRef = useRef(null);
-    const calculate = useCallback(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        // Determine the trigger element
-        const trigger = triggerRef?.current || el.parentElement;
-        if (!trigger) {
-            console.warn("usePosition: No trigger element found. Positioning may not work.");
-            return;
-        }
-        const rect = el.getBoundingClientRect(); // Bounding rect of the element to position
-        const triggerRect = trigger.getBoundingClientRect(); // Bounding rect of the trigger
-        // --- Determine the effective positioning context ---
-        let parentRect;
-        let targetPosition;
-        if (container) {
-            // If a specific container is provided, we assume 'absolute' positioning relative to it
-            // The container MUST be positioned (relative, absolute, fixed, sticky) for this to work correctly.
-            parentRect = container.getBoundingClientRect();
-            targetPosition = 'absolute';
-        }
-        else {
-            // No specific container provided. We need to decide if fixed or absolute to the viewport/document.
-            // Heuristic: If the trigger itself (or its ancestors) has 'fixed' position,
-            // or if the trigger is very close to the viewport edge,
-            // and/or if we want the positioned element to stay visible during scroll,
-            // we might prefer 'fixed'. Otherwise, 'absolute' is the default.
-            // A simple check: if the element is meant to stay in view regardless of scroll, 'fixed' is better.
-            // Otherwise, if it should scroll with the document, 'absolute' relative to the document.
-            // Let's default to 'fixed' for viewport-relative behavior if no container is provided,
-            // as this is often desired for elements like tooltips/dropdowns that follow the viewport.
-            // If the user *wants* it to scroll with content when no explicit container, they should set
-            // `position: absolute` and its parent *will* determine its containing block.
-            // For automatic calculation *without* explicitly setting parent position:
-            // If the `el`'s *computed* position is already `fixed`, keep it `fixed`.
-            // Otherwise, we will explicitly set it to `absolute` and position relative to the document.
-            const computedElStyle = window.getComputedStyle(el);
-            if (computedElStyle.position === 'fixed') {
-                targetPosition = 'fixed';
-            }
-            else {
-                // If not fixed, we will try to make it absolute relative to the document body
-                // (which effectively means relative to the viewport if no parent is positioned).
-                // We'll set el.style.position = 'absolute'
-                targetPosition = 'absolute';
-            }
-            // For 'fixed' positioning, the parentRect is the viewport
-            if (targetPosition === 'fixed') {
-                parentRect = {
-                    top: 0,
-                    left: 0,
-                    right: window.innerWidth,
-                    bottom: window.innerHeight,
-                    width: window.innerWidth,
-                    height: window.innerHeight,
-                };
-            }
-            else { // targetPosition === 'absolute'
-                // For 'absolute' positioning without a specified container,
-                // it implicitly positions relative to the initial containing block (viewport/document).
-                // So, the coordinates will still be viewport-relative.
-                // We need to ensure 'el' is actually positioned absolute.
-                parentRect = {
-                    top: 0,
-                    left: 0,
-                    right: window.innerWidth,
-                    bottom: window.innerHeight,
-                    width: window.innerWidth,
-                    height: window.innerHeight,
-                };
-            }
-        }
-        // Apply the determined position style if it's different from current
-        if (el.style.position !== targetPosition) {
-            el.style.position = targetPosition;
-            appliedPositionRef.current = targetPosition; // Store what we applied
-        }
-        else {
-            appliedPositionRef.current = targetPosition; // Confirm current state
-        }
-        let top = 0;
-        let left = 0;
-        // Calculate position relative to the viewport for initial placement
-        // These are always viewport coordinates, even if `targetPosition` becomes `absolute`
-        // We'll adjust based on `targetPosition` when applying to `el.style`
-        let viewportTop = 0;
-        let viewportLeft = 0;
-        // Determine base top/left by direction
-        switch (direction) {
-            case 'top':
-                viewportTop = triggerRect.top - rect.height - offset;
-                viewportLeft = triggerRect.left;
-                // Flipping logic (if it goes off-screen in the current direction)
-                if (viewportTop < parentRect.top && triggerRect.bottom + rect.height + offset <= parentRect.bottom) {
-                    viewportTop = triggerRect.bottom + offset;
-                }
-                break;
-            case 'bottom':
-                viewportTop = triggerRect.bottom + offset;
-                viewportLeft = triggerRect.left;
-                // Flipping logic
-                if (viewportTop + rect.height > parentRect.bottom && triggerRect.top - rect.height - offset >= parentRect.top) {
-                    viewportTop = triggerRect.top - rect.height - offset;
-                }
-                break;
-            case 'left':
-                viewportTop = triggerRect.top;
-                viewportLeft = triggerRect.left - rect.width - offset;
-                // Flipping logic
-                if (viewportLeft < parentRect.left && triggerRect.right + rect.width + offset <= parentRect.right) {
-                    viewportLeft = triggerRect.right + offset;
-                }
-                break;
-            case 'right':
-                viewportTop = triggerRect.top;
-                viewportLeft = triggerRect.right + offset;
-                // Flipping logic
-                if (viewportLeft + rect.width > parentRect.right && triggerRect.left - rect.width - offset >= parentRect.left) {
-                    viewportLeft = triggerRect.left - rect.width - offset;
-                }
-                break;
-        }
-        // Clamp to parent/viewport boundaries *after* potential flipping
-        viewportTop = Math.max(parentRect.top, Math.min(viewportTop, parentRect.bottom - rect.height));
-        viewportLeft = Math.max(parentRect.left, Math.min(viewportLeft, parentRect.right - rect.width));
-        // Apply coordinates based on the determined `targetPosition`
-        if (appliedPositionRef.current === 'fixed') {
-            // If fixed, apply viewport coordinates directly
-            el.style.top = `${viewportTop}px`;
-            el.style.left = `${viewportLeft}px`;
-        }
-        else { // 'absolute'
-            // If absolute, coordinates need to be relative to the closest positioned ancestor (offsetParent)
-            // If there's no positioned ancestor, offsetParent is body/html, so it's effectively viewport relative
-            // If there *is* a positioned ancestor, we need to subtract its position.
-            // Get the actual offset parent's bounding rect
-            let offsetParentRect;
-            if (el.offsetParent) {
-                offsetParentRect = el.offsetParent.getBoundingClientRect();
-            }
-            else {
-                // If no offsetParent, it implies relative to initial containing block (viewport)
-                offsetParentRect = { top: 0, left: 0 };
-            }
-            // Calculate relative coordinates
-            const finalTop = viewportTop - offsetParentRect.top + window.scrollY; // Add scrollY for document-relative `top`
-            const finalLeft = viewportLeft - offsetParentRect.left + window.scrollX; // Add scrollX for document-relative `left`
-            el.style.top = `${finalTop}px`;
-            el.style.left = `${finalLeft}px`;
-        }
-    }, [ref, triggerRef, offset, direction, container]);
-    useEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        // Determine the trigger element
-        const trigger = triggerRef?.current || el.parentElement;
-        if (!trigger) {
-            console.warn("usePosition: No trigger element found. Positioning may not work.");
-            return;
-        }
-        // Observers and event listeners
-        const observer = new ResizeObserver(calculate);
-        observer.observe(el);
-        if (trigger)
-            observer.observe(trigger); // Observe trigger for size/position changes
-        calculate(); // Initial calculation
-        window.addEventListener('resize', calculate);
-        window.addEventListener('scroll', calculate, true); // Use capture phase for reliability
-        return () => {
-            observer.disconnect();
-            if (trigger)
-                observer.disconnect(); // Disconnect trigger observer as well
-            window.removeEventListener('resize', calculate);
-            window.removeEventListener('scroll', calculate, true);
-        };
-    }, [ref, direction, offset, container, triggerRef]); // Add triggerRef to dependency array
-    return {
-        postion: appliedPositionRef.current,
-        reposition: calculate
-    };
-};
-export default usePosition;

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

@@ -1,45 +0,0 @@
-export type PushSubscriptionMeta = {
-    endpoint: string;
-    keys: {
-        p256dh: string;
-        auth: string;
-    };
-};
-export type PushNotificationsOptions = {
-    /**
-     * VAPID public key (required for subscription)
-     */
-    vapidPublicKey: string;
-    /**
-     * Path to your service worker file
-     * @default '/sw.js'
-     */
-    serviceWorkerPath?: string;
-    /**
-     * Auto-request permission on mount
-     * @default false
-     */
-    requestPermissionOnMount?: boolean;
-};
-export type PushNotificationsResult = {
-    /** Current permission state */
-    permission: NotificationPermission;
-    /** Push subscription object (or null if not subscribed) */
-    subscription: PushSubscription | null;
-    /** JSON representation of subscription (easy to send to backend) */
-    subscriptionMeta: PushSubscriptionMeta | null;
-    /** Is push supported in this browser? */
-    isSupported: boolean;
-    /** Request permission and subscribe */
-    subscribe: () => Promise<PushSubscription | null>;
-    /** Unsubscribe from push */
-    unsubscribe: () => Promise<boolean>;
-    /** Request notification permission only */
-    requestPermission: () => Promise<NotificationPermission>;
-    /** Error state */
-    error: string | null;
-    /** Loading state */
-    isLoading: boolean;
-};
-declare const usePushNotifications: (options: PushNotificationsOptions) => PushNotificationsResult;
-export default usePushNotifications;

package/dist/cjs/hooks/usePushNotifications.js

@@ -1,166 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { urlBase64ToUint8Array } from "../funs";
-const usePushNotifications = (options) => {
-    const { vapidPublicKey, serviceWorkerPath = '/sw.js', requestPermissionOnMount = false, } = options;
-    const [permission, setPermission] = useState('default');
-    const [subscription, setSubscription] = useState(null);
-    const [subscriptionMeta, setSubscriptionMeta] = useState(null);
-    const [error, setError] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [registration, setRegistration] = useState(null);
-    const [isSupported, setIsSupported] = useState(false);
-    // Register service worker
-    const registerServiceWorker = useCallback(async () => {
-        if (!isSupported)
-            return null;
-        try {
-            const reg = await navigator.serviceWorker.register(serviceWorkerPath, {
-                scope: '/',
-                updateViaCache: 'all',
-            });
-            setRegistration(reg);
-            return reg;
-        }
-        catch (err) {
-            console.error('Service Worker registration failed:', err);
-            setError('Failed to register service worker');
-            return null;
-        }
-    }, [serviceWorkerPath, isSupported]);
-    // Get current subscription
-    const getCurrentSubscription = useCallback(async (reg) => {
-        try {
-            const sub = await reg.pushManager.getSubscription();
-            setSubscription(sub);
-            if (sub) {
-                setSubscriptionMeta(sub.toJSON());
-            }
-            else {
-                setSubscriptionMeta(null);
-            }
-            return sub;
-        }
-        catch (err) {
-            console.error('Failed to get subscription:', err);
-            setError('Failed to get subscription');
-            return null;
-        }
-    }, []);
-    // Subscribe to push
-    const subscribe = useCallback(async () => {
-        if (!isSupported || !registration) {
-            setError('Push not supported or service worker not registered');
-            return null;
-        }
-        setIsLoading(true);
-        setError(null);
-        try {
-            const permissionResult = await Notification.requestPermission();
-            setPermission(permissionResult);
-            if (permissionResult !== 'granted') {
-                setError('Permission not granted for notifications');
-                setIsLoading(false);
-                return null;
-            }
-            const applicationServerKey = urlBase64ToUint8Array(vapidPublicKey);
-            const pushSubscription = await registration.pushManager.subscribe({
-                userVisibleOnly: true,
-                applicationServerKey,
-            });
-            setSubscription(pushSubscription);
-            setSubscriptionMeta(pushSubscription.toJSON());
-            setIsLoading(false);
-            return pushSubscription;
-        }
-        catch (err) {
-            console.error('Subscription failed:', err);
-            setError(err.message || 'Failed to subscribe');
-            setIsLoading(false);
-            return null;
-        }
-    }, [isSupported, registration, vapidPublicKey]);
-    // Unsubscribe
-    const unsubscribe = useCallback(async () => {
-        if (!subscription)
-            return true;
-        try {
-            const result = await subscription.unsubscribe();
-            if (result) {
-                setSubscription(null);
-                setSubscriptionMeta(null);
-            }
-            return result;
-        }
-        catch (err) {
-            console.error('Failed to unsubscribe:', err);
-            return false;
-        }
-    }, [subscription]);
-    // Request permission only
-    const requestPermission = useCallback(async () => {
-        const result = await Notification.requestPermission();
-        setPermission(result);
-        return result;
-    }, []);
-    // Initialize
-    useEffect(() => {
-        const _isSupported = 'PushManager' in window && 'serviceWorker' in navigator;
-        setIsSupported(_isSupported);
-        if (!_isSupported) {
-            setError('Push notifications not supported in this browser');
-            return;
-        }
-        let isMounted = true;
-        const init = async () => {
-            const reg = await registerServiceWorker();
-            if (!reg || !isMounted)
-                return;
-            setPermission(Notification.permission);
-            await getCurrentSubscription(reg);
-            if (requestPermissionOnMount && Notification.permission === 'default') {
-                await requestPermission();
-            }
-        };
-        init();
-        return () => {
-            isMounted = false;
-        };
-    }, [
-        isSupported,
-        registerServiceWorker,
-        getCurrentSubscription,
-        requestPermissionOnMount,
-        requestPermission,
-    ]);
-    // Listen for permission changes
-    useEffect(() => {
-        if (!('permissions' in navigator))
-            return;
-        let revoked = false;
-        const checkPermission = async () => {
-            if (revoked)
-                return;
-            const perm = await navigator.permissions.query({ name: 'notifications' });
-            perm.onchange = () => {
-                setPermission(Notification.permission);
-                if (Notification.permission === 'denied') {
-                    revoked = true;
-                    unsubscribe();
-                }
-            };
-        };
-        checkPermission();
-    }, [unsubscribe]);
-    return {
-        permission,
-        subscription,
-        subscriptionMeta,
-        isSupported,
-        subscribe,
-        unsubscribe,
-        requestPermission,
-        error,
-        isLoading,
-    };
-};
-export default usePushNotifications;

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

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

package/dist/cjs/hooks/useResizeObserver.js

@@ -1,25 +0,0 @@
-"use client";
-import { useEffect, useState } from 'react';
-const useResizeObserver = (ref) => {
-    const [size, setSize] = useState({ width: 0, height: 0, top: 0, left: 0 });
-    useEffect(() => {
-        const _ref = ref instanceof HTMLElement ? ref : ref.current;
-        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) {
-            resizeObserver.observe(_ref);
-        }
-        return () => {
-            if (_ref) {
-                resizeObserver.unobserve(_ref);
-            }
-        };
-    }, [ref]);
-    return size;
-};
-export default useResizeObserver;

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

@@ -1,22 +0,0 @@
-import { RefObject } from 'react';
-type ScrollPhysicsOptions = {
-    lerpFactor?: number;
-    x?: number;
-    y?: number;
-    xMultiplier?: number;
-    yMultiplier?: number;
-    scale?: {
-        min: number;
-        max: number;
-        factor: number;
-    };
-    rotate?: {
-        direction?: 1 | -1;
-        multiplier?: number;
-    };
-};
-declare const useScrollPhysics: (ref: RefObject<HTMLElement>, options: ScrollPhysicsOptions) => {
-    position: RefObject<number>;
-    velocity: RefObject<number>;
-};
-export default useScrollPhysics;

package/dist/cjs/hooks/useScrollPhysics.js

@@ -1,69 +0,0 @@
-import { clamp } from '@zuzjs/core';
-import { useEffect, useRef } from 'react';
-const useScrollPhysics = (ref, options) => {
-    const { lerpFactor = 0.1, x, y, xMultiplier = 0.25, yMultiplier = 0.25, scale, rotate, } = options;
-    const position = useRef(0);
-    const velocity = useRef(0);
-    const current = useRef(0);
-    const target = useRef(0);
-    const lastTime = useRef(performance.now());
-    const raf = useRef(null);
-    const isRunning = useRef(false);
-    const smoothedVelocity = useRef(0);
-    const threshold = 0.2; // minimum delta to trigger animation
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        const tick = () => {
-            const now = performance.now();
-            const dt = (now - lastTime.current) / 1000;
-            lastTime.current = now;
-            const delta = target.current - current.current;
-            const v = delta / dt;
-            // Update position & velocity
-            current.current += delta * lerpFactor;
-            position.current = current.current;
-            velocity.current = v;
-            smoothedVelocity.current += (v - smoothedVelocity.current) * lerpFactor;
-            // Apply transform
-            if (ref.current) {
-                const translateX = x ? position.current * x * xMultiplier : 0;
-                const translateY = y ? position.current * y * yMultiplier : 0;
-                const scaleValue = scale
-                    ? clamp(scale.max - Math.abs(smoothedVelocity.current) * scale.factor, scale.min, scale.max) : 1;
-                const rotateValue = rotate
-                    ? velocity.current * (rotate.multiplier ?? 1) * (rotate.direction ?? 1)
-                    : 0;
-                ref.current.style.transform = `
-          translate3d(${translateX}px, ${translateY}px, 0)
-          scale(${scaleValue})
-          rotate(${rotateValue}deg)
-        `.trim();
-            }
-            // If still moving, continue animating
-            if (Math.abs(delta) > threshold || Math.abs(v) > threshold) {
-                raf.current = requestAnimationFrame(tick);
-            }
-            else {
-                isRunning.current = false;
-                raf.current = null;
-            }
-        };
-        const handleScroll = () => {
-            target.current = window.scrollY;
-            if (!isRunning.current) {
-                lastTime.current = performance.now();
-                raf.current = requestAnimationFrame(tick);
-                isRunning.current = true;
-            }
-        };
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-            if (raf.current)
-                cancelAnimationFrame(raf.current);
-        };
-    }, [lerpFactor, x, y, xMultiplier, yMultiplier, scale, rotate]);
-    return { position, velocity };
-};
-export default useScrollPhysics;

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

@@ -1,16 +0,0 @@
-export interface ScrollBreakpoint {
-    [key: number]: () => void;
-}
-declare const useScrollbar: (speed: number, breakpoints?: ScrollBreakpoint) => {
-    rootRef: import("react").RefObject<HTMLDivElement | null>;
-    containerRef: import("react").RefObject<HTMLDivElement | null>;
-    thumbY: import("react").RefObject<HTMLDivElement | null>;
-    thumbX: import("react").RefObject<HTMLDivElement | null>;
-    scrollToTop: () => void | undefined;
-    scrollToBottom: () => void | undefined;
-    scrollToLeft: () => void | undefined;
-    scrollToRight: () => void | undefined;
-    onScrollY: (e: React.MouseEvent) => void;
-    onScrollX: (e: React.MouseEvent) => void;
-};
-export default useScrollbar;