@senka-ai/ui/dist/utils/focus.svelte.d.ts

A modern, type-safe Svelte 5 UI component library with full theme support, accessibility standards, and robust state management patterns

/**
 * Focus management utilities for consistent focus handling across components
 *
 * These utilities provide standardized patterns for managing focus states,
 * focus trapping, and keyboard navigation in interactive components.
 *
 * Uses .svelte.ts extension to support Svelte 5 runes
 */
/**
 * Enhanced focus state management with event handling
 */
export declare function useFocusManagement(options?: {
    onFocus?: (event: FocusEvent) => void;
    onBlur?: (event: FocusEvent) => void;
    disabled?: boolean;
    autoFocus?: boolean;
}): {
    focused: () => boolean;
    setElement: (el: HTMLElement | null) => void;
    handleFocus: (event: FocusEvent) => void;
    handleBlur: (event: FocusEvent) => void;
    focus: () => void;
    blur: () => void;
    disabled: () => boolean;
};
/**
 * Focus trap utility for modals and dropdowns
 */
export declare function useFocusTrap(enabled?: boolean): {
    setContainer: (el: HTMLElement | null) => void;
    activate: () => void;
    deactivate: () => void;
    updateFocusableElements: () => void;
};
/**
 * Keyboard navigation utilities for lists and menus
 */
export declare function useKeyboardNavigation<T>(options: {
    items: T[];
    onSelect?: (item: T, index: number) => void;
    onEscape?: () => void;
    loop?: boolean;
    orientation?: 'horizontal' | 'vertical';
}): {
    activeIndex: () => number;
    setActiveIndex: (index: number) => void;
    moveNext: () => void;
    movePrevious: () => void;
    selectCurrent: () => void;
    handleKeyDown: (event: KeyboardEvent) => void;
};
/**
 * Focus visible utility for better UX
 * Only shows focus rings when navigating via keyboard
 */
export declare function useFocusVisible(): {
    focusVisible: () => boolean;
    handleFocus: () => void;
    handleBlur: () => void;
};
/**
 * Auto-focus management for components
 */
export declare function useAutoFocus(shouldAutoFocus?: boolean, delay?: number): {
    setElement: (el: HTMLElement | null) => void;
};
/**
 * Focus restoration utility
 * Saves and restores focus when components mount/unmount
 */
export declare function useFocusRestore(): {
    save: () => void;
    restore: () => void;
    previouslyFocused: () => HTMLElement | null;
};
/**
 * Click outside detection with focus management
 */
export declare function useClickOutside(callback: () => void, enabled?: boolean): {
    setElement: (el: HTMLElement | null) => void;
};
/**
 * Roving tabindex management for composite components
 */
export declare function useRovingTabIndex<T>(items: T[], initialIndex?: number): {
    activeIndex: () => number;
    setActiveIndex: (index: number) => void;
    getTabIndex: (index: number) => number;
    getAriaSelected: (index: number) => boolean;
};
/**
 * Focus management constants and utilities
 */
export declare const FocusConstants: {
    readonly FOCUSABLE_SELECTORS: readonly ["button:not([disabled])", "[href]", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", "[tabindex]:not([tabindex=\"-1\"]):not([disabled])", "[contenteditable=\"true\"]"];
    readonly NAVIGATION_KEYS: readonly ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
    readonly ACTIVATION_KEYS: readonly ["Enter", " "];
    readonly ESCAPE_KEYS: readonly ["Escape"];
};
/**
 * Utility to find all focusable elements within a container
 */
export declare function findFocusableElements(container: HTMLElement): HTMLElement[];
/**
 * Utility to focus the first focusable element in a container
 */
export declare function focusFirstElement(container: HTMLElement): boolean;
/**
 * Utility to focus the last focusable element in a container
 */
export declare function focusLastElement(container: HTMLElement): boolean;
//# sourceMappingURL=focus.svelte.d.ts.map