/**
* @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;