/** * @zendir/ui - useCompactMode Hook * * Provides compact mode functionality for data cards with: * - Hover-to-expand behavior * - Click-to-pin (stays expanded until clicked again) * - Keyboard accessibility (Enter/Space to toggle pin) * - Reduced motion support * - Integration with DisplaySettingsContext for global compact mode * * Priority for compact mode: * 1. Explicit `compact` prop (if provided) * 2. Global compact mode from DisplaySettingsContext * 3. Default: false * * Usage: * ```tsx * const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({ * compact: true, // Optional - if omitted, uses global setting * defaultExpanded: false, * onPinChange: (pinned) => {}, * }); * * return ( *
* {expanded ? : } *
* ); * ``` */ /** * Options for useCompactMode hook */ export interface UseCompactModeOptions { /** Whether compact mode is enabled */ compact?: boolean; /** Start in expanded (pinned) state */ defaultExpanded?: boolean; /** Callback when pin state changes */ onPinChange?: (isPinned: boolean) => void; } /** * Result from useCompactMode hook */ export interface UseCompactModeResult { /** Whether the component should render in expanded state */ expanded: boolean; /** Whether the component is pinned (clicked to stay expanded) */ isPinned: boolean; /** Whether the component is being hovered */ isHovered: boolean; /** Whether compact mode is active */ isCompact: boolean; /** Event handlers to spread on the container element */ handlers: { onMouseEnter: () => void; onMouseLeave: () => void; onClick: () => void; onKeyDown: (e: React.KeyboardEvent) => void; tabIndex: number; role: string; "aria-expanded": boolean; }; /** Transition duration respecting reduced motion */ transitionDuration: string; /** Toggle the pinned state programmatically */ togglePin: () => void; /** Set pinned state programmatically */ setPin: (pinned: boolean) => void; } /** * Hook for managing compact mode state and interactions * * Provides hover-to-expand and click-to-pin functionality with * full keyboard accessibility and reduced motion support. * * Priority for compact mode: * 1. Explicit `compact` prop (if provided) * 2. Global compact mode from DisplaySettingsContext * 3. Default: false */ export declare function useCompactMode(options?: UseCompactModeOptions): UseCompactModeResult;