import React from 'react';
import { ResponsiveOrSingle } from '../../types/responsive';
export type ZIndexLevel = 'base' | 'raised' | 'navigation' | 'header' | 'dropdown' | 'sticky' | 'overlay' | 'modal' | 'toast' | 'popover' | 'tooltip';
export type CursorType = 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed' | 'grab' | 'grabbing' | 'zoom-in' | 'zoom-out' | 'crosshair' | 'cell' | 'context-menu' | 'copy' | 'alias';
export type FocusStyle = 'outline' | 'ring' | 'none';
export type PointerEvents = 'auto' | 'none';
export type UserSelect = 'auto' | 'none' | 'text' | 'all';
export type OpacityLevel = 'hover' | 'disabled' | 'overlay-light' | 'overlay-medium' | 'overlay-heavy' | number;
export interface InteractiveProps extends React.HTMLAttributes<HTMLElement> {
    as?: 'div' | 'section' | 'article' | 'aside' | 'nav' | 'header' | 'footer' | 'main' | 'span' | 'button';
    zIndex?: ResponsiveOrSingle<ZIndexLevel | number>;
    cursor?: ResponsiveOrSingle<CursorType>;
    focusStyle?: FocusStyle;
    focusWithin?: boolean;
    pointerEvents?: ResponsiveOrSingle<PointerEvents>;
    userSelect?: ResponsiveOrSingle<UserSelect>;
    opacity?: ResponsiveOrSingle<OpacityLevel>;
    hoverOpacity?: OpacityLevel;
    hoverScale?: number;
    hoverElevation?: boolean;
    pressed?: boolean;
    disabled?: boolean;
    touchAction?: 'auto' | 'none' | 'pan-x' | 'pan-y' | 'manipulation';
    children?: React.ReactNode;
}
/**
 * Interactive 프리미티브 컴포넌트
 *
 * 인터랙션 관련 속성(포커스, z-index, 커서, 호버 등)을 담당하는 순수한 프리미티브입니다.
 * 시멘틱 토큰을 활용하여 일관된 인터랙션 경험을 제공합니다.
 *
 * 참고: 애니메이션은 기존 AnimationUtils를 사용하므로 이 컴포넌트에서는 제외됩니다.
 *
 * @example
 * ```tsx
 * // 기본 포커스와 호버 효과
 * <Interactive focusStyle="ring" hoverOpacity="hover" cursor="pointer">
 *   <button>Clickable button</button>
 * </Interactive>
 *
 * // 높은 z-index와 특별한 커서
 * <Interactive zIndex="modal" cursor="grab">
 *   <div>Draggable modal</div>
 * </Interactive>
 *
 * // 비활성 상태 처리
 * <Interactive disabled opacity="disabled" cursor="not-allowed">
 *   <button>Disabled button</button>
 * </Interactive>
 *
 * // 복잡한 호버 효과
 * <Interactive
 *   hoverOpacity="hover"
 *   hoverScale={1.05}
 *   hoverElevation
 *   focusStyle="outline"
 * >
 *   <div>Interactive card</div>
 * </Interactive>
 * ```
 */
export declare const Interactive: React.ForwardRefExoticComponent<InteractiveProps & React.RefAttributes<HTMLElement>>;