인터랙션 훅

import {
  useHoverMotion,
  useClickToggle,
  useFocusToggle,
  useButtonEffect,
  useInteractive,
  useKeyboardToggle,
} from '@hua-labs/motion-core'

function useHoverMotion<T extends MotionElement = HTMLDivElement>(
  options?: HoverMotionOptions
): BaseMotionReturn<T> & { isHovered: boolean }

import { useHoverMotion } from '@hua-labs/motion-core'

function HoverCard() {
  const { ref, style, isHovered } = useHoverMotion({
    hoverScale: 1.05,
    hoverY: -4,
    duration: 200
  })

  return (
    <div ref={ref} style={style}>
      {isHovered ? '호버 중' : '호버해 보세요'}
    </div>
  )
}

function useClickToggle(options?: ClickToggleOptions): ClickToggleReturn

interface ClickToggleReturn {
  isActive: boolean
  mounted: boolean
  toggle: () => void
  activate: () => void
  deactivate: () => void
  reset: () => void
  clickHandlers: {
    onClick?: (event: React.MouseEvent) => void
    onDoubleClick?: (event: React.MouseEvent) => void
    onContextMenu?: (event: React.MouseEvent) => void
    onKeyDown?: (event: React.KeyboardEvent) => void
  }
}

import { useClickToggle } from '@hua-labs/motion-core'

function ToggleButton() {
  const { isActive, clickHandlers, mounted } = useClickToggle({
    toggleOnClick: true,
    autoReset: true,
    resetDelay: 2000
  })

  if (!mounted) return null

  return (
    <button
      {...clickHandlers}
      style={{ opacity: isActive ? 1 : 0.6 }}
    >
      {isActive ? '활성' : '비활성'}
    </button>
  )
}

function useFocusToggle(options?: FocusToggleOptions): FocusToggleReturn

interface FocusToggleReturn {
  isActive: boolean
  mounted: boolean
  toggle: () => void
  activate: () => void
  deactivate: () => void
  reset: () => void
  focusHandlers: {
    onFocus?: (event: React.FocusEvent) => void
    onBlur?: (event: React.FocusEvent) => void
    onFocusIn?: (event: React.FocusEvent) => void
    onFocusOut?: (event: React.FocusEvent) => void
  }
  ref: RefObject<HTMLElement | null>
}

import { useFocusToggle } from '@hua-labs/motion-core'

function FocusInput() {
  const { isActive, focusHandlers } = useFocusToggle({
    toggleOnFocus: true,
    toggleOnBlur: true
  })

  return (
    <input
      {...focusHandlers}
      style={{
        outline: isActive ? '2px solid blue' : 'none',
        transition: 'outline 150ms ease'
      }}
    />
  )
}

function useButtonEffect<T extends MotionElement = HTMLButtonElement>(
  options?: ButtonEffectOptions
): BaseMotionReturn<T> & {
  buttonType: string
  isPressed: boolean
  isHovered: boolean
  isFocused: boolean
  ripplePosition: { x: number; y: number }
  currentGlowIntensity: number
  shakeOffset: number
  bounceOffset: number
  slideOffset: number
  pressButton: () => void
  releaseButton: () => void
  setButtonState: (state: 'idle' | 'hover' | 'active' | 'focus' | 'disabled') => void
}

import { useButtonEffect } from '@hua-labs/motion-core'

function AnimatedButton() {
  const { ref, style, pressButton, releaseButton } = useButtonEffect({
    type: 'scale',
    hoverScale: 1.08,
    activeScale: 0.92
  })

  return (
    <button
      ref={ref}
      style={style}
      onMouseDown={pressButton}
      onMouseUp={releaseButton}
    >
      클릭해 보세요
    </button>
  )
}

function useInteractive(config?: InteractiveConfig): {
  ref: (element: HTMLDivElement | null) => void
  scale: number
  isHovered: boolean
  isClicked: boolean
  handleMouseEnter: () => void
  handleMouseLeave: () => void
  handleMouseDown: () => void
  handleMouseUp: () => void
}

interface InteractiveConfig {
  hoverScale?: number   // 기본값: 1.05
  clickScale?: number   // 기본값: 0.95
  duration?: number     // 기본값: 200
}

import { useInteractive } from '@hua-labs/motion-core'

function InteractiveCard() {
  const {
    ref,
    scale,
    handleMouseEnter,
    handleMouseLeave,
    handleMouseDown,
    handleMouseUp
  } = useInteractive({ hoverScale: 1.03, clickScale: 0.98 })

  return (
    <div
      ref={ref}
      style={{ transform: `scale(${scale})`, transition: 'transform 200ms ease' }}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
    >
      카드
    </div>
  )
}

function useKeyboardToggle(options?: KeyboardToggleConfig): KeyboardToggleReturn

interface KeyboardToggleReturn {
  isActive: boolean
  mounted: boolean
  toggle: () => void
  activate: () => void
  deactivate: () => void
  reset: () => void
  keyboardHandlers: {
    onKeyDown?: (event: React.KeyboardEvent) => void
    onKeyUp?: (event: React.KeyboardEvent) => void
    onKeyPress?: (event: React.KeyboardEvent) => void
  }
  ref: RefObject<HTMLElement | null>
}

import { useKeyboardToggle } from '@hua-labs/motion-core'

function SearchModal() {
  // Ctrl+K로 토글
  const { isActive } = useKeyboardToggle({
    keyCombo: ['Control', 'k'],
    preventDefault: true
  })

  return isActive ? <div>검색 모달</div> : null
}