@buddhacognitivelab/theme-glassmorphic/dist/utils/interactions.d.ts

Enhanced glassmorphic theme package with dual-mode support, advanced glass effects, interactive UI components, and gesture-based interactions

/**
 * @fileoverview Advanced Interaction Utilities - Phase 5
 * Sophisticated touch gestures, drag and drop, and keyboard navigation
 */
import React from 'react';
export type GestureType = 'tap' | 'press' | 'swipe' | 'pinch' | 'rotate' | 'pan';
export type SwipeDirection = 'up' | 'down' | 'left' | 'right';
export type DragState = 'idle' | 'dragging' | 'dropped';
export type TouchState = 'idle' | 'touching' | 'pressed';
export interface GestureConfig {
    /** Enable touch gestures */
    enableTouch: boolean;
    /** Enable mouse gestures */
    enableMouse: boolean;
    /** Minimum distance for swipe detection */
    swipeThreshold: number;
    /** Minimum time for press detection */
    pressThreshold: number;
    /** Maximum time for tap detection */
    tapThreshold: number;
    /** Enable haptic feedback */
    enableHaptics: boolean;
}
export interface DragDropConfig {
    /** Enable drag functionality */
    draggable: boolean;
    /** Enable drop functionality */
    droppable: boolean;
    /** Drag threshold in pixels */
    dragThreshold: number;
    /** Enable auto-scroll during drag */
    autoScroll: boolean;
    /** Auto-scroll speed */
    autoScrollSpeed: number;
    /** Enable ghost image */
    enableGhostImage: boolean;
    /** Custom ghost image */
    ghostImage?: HTMLElement;
}
export interface KeyboardNavConfig {
    /** Enable arrow key navigation */
    enableArrowKeys: boolean;
    /** Enable tab navigation */
    enableTabNavigation: boolean;
    /** Enable enter/space activation */
    enableActivation: boolean;
    /** Enable escape to close */
    enableEscape: boolean;
    /** Custom key bindings */
    customKeys: Record<string, () => void>;
}
export interface TouchEventData {
    type: GestureType;
    startX: number;
    startY: number;
    currentX: number;
    currentY: number;
    deltaX: number;
    deltaY: number;
    distance: number;
    duration: number;
    velocity: number;
    direction?: SwipeDirection;
}
export interface DragEventData {
    state: DragState;
    startX: number;
    startY: number;
    currentX: number;
    currentY: number;
    deltaX: number;
    deltaY: number;
    element: HTMLElement;
    dropTarget?: HTMLElement;
}
export interface RippleConfig {
    /** Enable ripple effect */
    enabled: boolean;
    /** Ripple color */
    color: string;
    /** Ripple duration */
    duration: number;
    /** Ripple size multiplier */
    sizeMultiplier: number;
    /** Center ripple on element */
    centered: boolean;
}
export declare const calculateDistance: (x1: number, y1: number, x2: number, y2: number) => number;
export declare const calculateVelocity: (distance: number, duration: number) => number;
export declare const getSwipeDirection: (deltaX: number, deltaY: number) => SwipeDirection;
export declare const triggerHapticFeedback: (type?: "light" | "medium" | "heavy") => void;
export declare const useGestures: (config?: Partial<GestureConfig>, callbacks?: {
    onTap?: (data: TouchEventData) => void;
    onPress?: (data: TouchEventData) => void;
    onSwipe?: (data: TouchEventData) => void;
    onPan?: (data: TouchEventData) => void;
}) => {
    touchState: TouchState;
    onTouchStart: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
    onTouchMove: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
    onTouchEnd: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
    onMouseDown: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
    onMouseMove: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
    onMouseUp: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
};
export declare const useDragDrop: (config?: Partial<DragDropConfig>, callbacks?: {
    onDragStart?: (data: DragEventData) => void;
    onDrag?: (data: DragEventData) => void;
    onDragEnd?: (data: DragEventData) => void;
    onDrop?: (data: DragEventData) => void;
}) => {
    dragState: DragState;
    elementRef: React.RefObject<HTMLElement>;
    draggable: boolean;
    onDragStart: ((event: React.DragEvent) => void) | undefined;
    onDrag: ((event: React.DragEvent) => void) | undefined;
    onDragEnd: ((event: React.DragEvent) => void) | undefined;
    onDrop: ((event: React.DragEvent) => void) | undefined;
    onDragOver: ((event: React.DragEvent) => void) | undefined;
};
export declare const useKeyboardNavigation: (config?: Partial<KeyboardNavConfig>, callbacks?: {
    onArrowKey?: (direction: "up" | "down" | "left" | "right") => void;
    onEnter?: () => void;
    onSpace?: () => void;
    onEscape?: () => void;
    onTab?: (shiftKey: boolean) => void;
}) => {
    onKeyDown: (event: React.KeyboardEvent) => void;
};
export declare const useRipple: (config?: Partial<RippleConfig>) => {
    createRipple: (event: React.MouseEvent | React.TouchEvent) => void;
    rippleElements: React.DetailedReactHTMLElement<{
        key: string;
        style: {
            position: "absolute";
            left: number;
            top: number;
            width: number;
            height: number;
            borderRadius: string;
            backgroundColor: string;
            transform: "scale(0)";
            animation: `ripple-animation ${number}ms ease-out`;
            pointerEvents: "none";
        };
    }, HTMLElement>[];
    rippleStyles: import("styled-components").RuleSet<object>;
};
export declare const useFocusManagement: () => {
    focusedElement: HTMLElement | null;
    trapFocus: (container: HTMLElement) => () => void;
    saveFocus: () => void;
    restoreFocus: () => void;
};
export declare const interactions: {
    useGestures: (config?: Partial<GestureConfig>, callbacks?: {
        onTap?: (data: TouchEventData) => void;
        onPress?: (data: TouchEventData) => void;
        onSwipe?: (data: TouchEventData) => void;
        onPan?: (data: TouchEventData) => void;
    }) => {
        touchState: TouchState;
        onTouchStart: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
        onTouchMove: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
        onTouchEnd: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
        onMouseDown: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
        onMouseMove: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
        onMouseUp: ((event: React.TouchEvent | React.MouseEvent) => void) | undefined;
    };
    useDragDrop: (config?: Partial<DragDropConfig>, callbacks?: {
        onDragStart?: (data: DragEventData) => void;
        onDrag?: (data: DragEventData) => void;
        onDragEnd?: (data: DragEventData) => void;
        onDrop?: (data: DragEventData) => void;
    }) => {
        dragState: DragState;
        elementRef: React.RefObject<HTMLElement>;
        draggable: boolean;
        onDragStart: ((event: React.DragEvent) => void) | undefined;
        onDrag: ((event: React.DragEvent) => void) | undefined;
        onDragEnd: ((event: React.DragEvent) => void) | undefined;
        onDrop: ((event: React.DragEvent) => void) | undefined;
        onDragOver: ((event: React.DragEvent) => void) | undefined;
    };
    useKeyboardNavigation: (config?: Partial<KeyboardNavConfig>, callbacks?: {
        onArrowKey?: (direction: "up" | "down" | "left" | "right") => void;
        onEnter?: () => void;
        onSpace?: () => void;
        onEscape?: () => void;
        onTab?: (shiftKey: boolean) => void;
    }) => {
        onKeyDown: (event: React.KeyboardEvent) => void;
    };
    useRipple: (config?: Partial<RippleConfig>) => {
        createRipple: (event: React.MouseEvent | React.TouchEvent) => void;
        rippleElements: React.DetailedReactHTMLElement<{
            key: string;
            style: {
                position: "absolute";
                left: number;
                top: number;
                width: number;
                height: number;
                borderRadius: string;
                backgroundColor: string;
                transform: "scale(0)";
                animation: `ripple-animation ${number}ms ease-out`;
                pointerEvents: "none";
            };
        }, HTMLElement>[];
        rippleStyles: import("styled-components").RuleSet<object>;
    };
    useFocusManagement: () => {
        focusedElement: HTMLElement | null;
        trapFocus: (container: HTMLElement) => () => void;
        saveFocus: () => void;
        restoreFocus: () => void;
    };
    calculateDistance: (x1: number, y1: number, x2: number, y2: number) => number;
    calculateVelocity: (distance: number, duration: number) => number;
    getSwipeDirection: (deltaX: number, deltaY: number) => SwipeDirection;
    triggerHapticFeedback: (type?: "light" | "medium" | "heavy") => void;
};
export default interactions;