aura-glass/dist/hooks/extended/useDraggableListPhysics.d.ts

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

import React from 'react';
import { SpringConfig } from '../../animations/hooks/useMultiSpringBasic';
export interface DraggableItem {
    id: string;
    content: React.ReactNode;
    data?: any;
}
export interface DragState {
    isDragging: boolean;
    draggedItem: DraggableItem | null;
    dragIndex: number;
    hoverIndex: number;
    dragOffset: {
        x: number;
        y: number;
    };
    dropTarget: HTMLElement | null;
}
export interface DraggableListPhysicsOptions {
    /** Enable physics-based animations */
    enablePhysics?: boolean;
    /** Spring configuration for drag animations */
    springConfig?: SpringConfig;
    /** Drag threshold in pixels */
    dragThreshold?: number;
    /** Enable haptic feedback on mobile */
    enableHaptics?: boolean;
    /** Custom drag handle selector */
    dragHandle?: string;
    /** Enable auto-scroll when dragging near edges */
    autoScroll?: boolean;
    /** Auto-scroll threshold from edges */
    autoScrollThreshold?: number;
    /** Auto-scroll speed */
    autoScrollSpeed?: number;
    /** Enable drop zones */
    enableDropZones?: boolean;
    /** Custom drop zone validator */
    validateDrop?: (draggedItem: DraggableItem, targetIndex: number) => boolean;
    /** Enable multi-select drag */
    multiSelect?: boolean;
    /** Selected items for multi-select */
    selectedItems?: string[];
}
export declare function useDraggableListPhysics(items: DraggableItem[], onReorder: (fromIndex: number, toIndex: number, draggedItems?: DraggableItem[]) => void, options?: DraggableListPhysicsOptions): {
    dragState: DragState;
    containerRef: React.RefObject<HTMLElement>;
    selectedItems: string[];
    physicsValues: Record<string, number>;
    handleDragStart: (event: React.DragEvent | React.TouchEvent | MouseEvent, item: DraggableItem, index: number) => void;
    handleKeyDown: (event: KeyboardEvent, itemId: string) => void;
    toggleItemSelection: (itemId: string) => void;
    selectItemRange: (startId: string, endId: string) => void;
    clearSelection: () => void;
    isSelected: (itemId: string) => boolean;
    isDragging: boolean;
    canDrop: (targetIndex: number) => boolean;
};
export declare function useItemTransitions(items: DraggableItem[], transitionType?: 'slide' | 'fade' | 'scale' | 'bounce', options?: {
    duration?: number;
    stagger?: number;
    direction?: 'up' | 'down' | 'left' | 'right';
    easing?: string;
}): {
    getTransitionStyle: (itemId: string, index: number) => {
        transition: string;
        transform: string;
        opacity: number;
    };
    animateItem: (itemId: string) => void;
    animateAllItems: () => void;
    isAnimating: boolean;
};
export declare function useDropZones(zones: Array<{
    id: string;
    accepts: (item: DraggableItem) => boolean;
    onDrop: (item: DraggableItem, zoneId: string) => void;
}>): {
    activeZone: string | null;
    isOverZone: boolean;
    handleDragOver: (event: React.DragEvent, zoneId: string) => void;
    handleDragLeave: () => void;
    handleDrop: (event: React.DragEvent, zoneId: string) => void;
    isValidDrop: (zoneId: string, item: DraggableItem) => boolean;
};
//# sourceMappingURL=useDraggableListPhysics.d.ts.map