/**
 * @file useClickableContainer.ts
 * @input Container ref, interactive element ref, click/href handlers
 * @output onClick and onMouseUp handlers for the container; INTERACTIVE_SELECTORS list
 * @position Core hook for clickable containers that safely handle nested interactive elements
 *
 * Solves the "nested interactive elements" problem: when a card is clickable
 * but contains buttons/links, clicking those should NOT trigger the card's action.
 *
 * SYNC: When modified, update:
 * - /packages/core/src/hooks/index.ts (export)
 */
import { type RefObject, type MouseEvent } from 'react';
/**
 * Canonical list of interactive element selectors — native controls plus
 * role-based interactive elements. Clicks on these (or their descendants)
 * should NOT bubble to a clickable container's click handler.
 *
 * Exported so other focus/interaction utilities can share one comprehensive
 * definition of "interactive target" rather than hand-rolling divergent lists.
 * Note: this list is about "don't bubble clicks", not focus-eligibility —
 * consumers that need focusable elements must additionally exclude
 * unfocusable/disabled targets (e.g. `[tabindex="-1"]`, `:disabled`).
 */
export declare const INTERACTIVE_SELECTORS: string;
export interface UseClickableContainerOptions {
    /** Ref to the outer container element */
    containerRef: RefObject<HTMLElement | null>;
    /** Ref to the primary interactive element inside (link, button) */
    interactiveRef?: RefObject<HTMLElement | null>;
    /** Click handler */
    onClick?: (event: MouseEvent<HTMLElement>) => void;
    /** Navigation URL — when provided, clicking the container navigates */
    href?: string;
    /** Link target */
    target?: string;
    /** Whether the container is disabled */
    disabled?: boolean;
}
export interface ClickableContainerResult {
    onClick: (event: MouseEvent<HTMLElement>) => void;
    onMouseUp: (event: MouseEvent<HTMLElement>) => void;
}
/**
 * Hook that makes a container element clickable while preserving
 * nested interactive element behavior.
 *
 * When the user clicks the container surface (not on a nested button/link),
 * the hook fires the onClick handler or navigates to href.
 * When the user clicks a nested interactive element, it does nothing —
 * the nested element handles its own event.
 *
 * @compositionHint Use inside ClickableCard or SelectableCard.
 * For custom interactive containers, pair with a ref to the outer div.
 *
 * @example
 * ```
 * const containerRef = useRef<HTMLDivElement>(null);
 * const { onClick, onMouseUp } = useClickableContainer({
 *   containerRef,
 *   onClick: () => console.log('card clicked'),
 * });
 * return (
 *   <div ref={containerRef} onClick={onClick} onMouseUp={onMouseUp}>
 *     <p>Click anywhere on this card</p>
 *     <button onClick={() => alert('button')}>Nested button</button>
 *   </div>
 * );
 * ```
 */
export declare function useClickableContainer({ containerRef, interactiveRef, onClick: onClickProp, href, target, disabled, }: UseClickableContainerOptions): ClickableContainerResult;
//# sourceMappingURL=useClickableContainer.d.ts.map