import { Tour } from '@tour-kit/react';

<Tour
  id="my-tour"
  autoStart={false}
  startAt={0}
  config={tourConfig}
  onStart={() => {}}
  onComplete={() => {}}
  onSkip={(stepIndex) => {}}
  onStepChange={(step, index) => {}}
>
  {children}
</Tour>

import { TourStep } from '@tour-kit/react';

<TourStep
  target="#element"
  title="Step Title"
  content="Step description"
  placement="bottom"
  offset={[0, 12]}
  spotlightPadding={8}
  spotlightRadius={4}
  interactive={false}
  showNavigation={true}
  showProgress={true}
  showClose={true}
/>

import {
  TourCard,
  TourCardHeader,
  TourCardContent,
  TourCardFooter,
} from '@tour-kit/react';

<TourCard size="default" className="w-80">
  <TourCardHeader showClose>
    <TourClose />
  </TourCardHeader>
  <TourCardContent spacing="default" />
  <TourCardFooter>
    <TourProgress variant="dots" />
    <TourNavigation />
  </TourCardFooter>
</TourCard>

import { TourOverlay } from '@tour-kit/react';

<TourOverlay
  zIndex="default"
  className="custom-overlay"
  onClick={() => skip()}
/>

import { TourNavigation } from '@tour-kit/react';

<TourNavigation
  prevLabel="Back"
  nextLabel="Next"
  finishLabel="Done"
  skipLabel="Skip"
  prevVariant="outline"
  nextVariant="default"
/>

import { TourProgress } from '@tour-kit/react';

<TourProgress variant="dots" />
<TourProgress variant="bar" />
<TourProgress variant="text" />

import { TourClose } from '@tour-kit/react';

<TourClose asChild>
  <button>Custom Close</button>
</TourClose>

import { TourPortal } from '@tour-kit/react';

<TourPortal className="portal-container">
  {children}
</TourPortal>

import { TourArrow } from '@tour-kit/react';

<TourArrow ref={arrowRef} context={floatingContext} />

import { TourCardHeadless } from '@tour-kit/react/headless';

<TourCardHeadless
  render={({
    isActive,
    currentStep,
    currentStepIndex,
    totalSteps,
    isFirstStep,
    isLastStep,
    next,
    prev,
    skip,
    floatingStyles,
    refs,
    arrowRef,
    context,
  }) => (
    <div ref={refs.setFloating} style={floatingStyles}>
      {/* Custom UI */}
    </div>
  )}
/>

import { TourOverlayHeadless } from '@tour-kit/react/headless';

<TourOverlayHeadless
  render={({
    isActive,
    overlayStyle,
    cutoutStyle,
    targetRect,
    interactive,
  }) => (
    <div style={overlayStyle}>
      {targetRect && <div style={cutoutStyle} />}
    </div>
  )}
/>

import { TourNavigationHeadless } from '@tour-kit/react/headless';

<TourNavigationHeadless
  isFirstStep={isFirstStep}
  isLastStep={isLastStep}
  onPrev={prev}
  onNext={next}
  onSkip={skip}
  render={({ isFirstStep, isLastStep, onPrev, onNext, onSkip }) => (
    // Custom navigation UI
  )}
/>

import { TourProgressHeadless } from '@tour-kit/react/headless';

<TourProgressHeadless
  current={currentStepIndex + 1}
  total={totalSteps}
  render={({ current, total }) => (
    <div>{current} / {total}</div>
  )}
/>

import { TourCloseHeadless } from '@tour-kit/react/headless';

<TourCloseHeadless
  render={(props) => (
    <button {...props}>Close</button>
  )}
/>

import { MultiTourKitProvider } from '@tour-kit/react';

<MultiTourKitProvider
  config={tourKitConfig}
  router={router}
  routePersistence={{ enabled: true }}
  autoNavigate={false}
  onNavigationRequired={(route) => {}}
  onTourStart={(tourId) => {}}
  onTourComplete={(tourId) => {}}
  onTourSkip={(tourId, stepIndex) => {}}
  onStepView={(tourId, stepId, stepIndex) => {}}
>
  {children}
</MultiTourKitProvider>

import { useTours } from '@tour-kit/react';

const {
  tours,           // TourInfo[]
  activeTourId,    // string | null
  isAnyTourActive, // boolean
  completedTours,  // string[]
  skippedTours,    // string[]
  isTourCompleted, // (id: string) => boolean
  isTourSkipped,   // (id: string) => boolean
  getTour,         // (id: string) => TourInfo | undefined
} = useTours();

import { useTourRoute } from '@tour-kit/react';

const {
  isStepOnCurrentRoute, // boolean
  currentStepRoute,     // string | undefined
  currentRoute,         // string
  isNavigating,         // boolean
  goToStepRoute,        // () => Promise<void>
  isOnRoute,            // (route: string) => boolean
} = useTourRoute({ router, tourId? });

import { useNextAppRouter, createNextAppRouterAdapter } from '@tour-kit/react';

// Hook (uses dynamic require)
const router = useNextAppRouter();

// Factory (for custom setup)
import { usePathname, useRouter } from 'next/navigation';
const createRouter = createNextAppRouterAdapter(usePathname, useRouter);
const router = createRouter();

import { useNextPagesRouter, createNextPagesRouterAdapter } from '@tour-kit/react';

// Hook
const router = useNextPagesRouter();

// Factory
import { useRouter } from 'next/router';
const createRouter = createNextPagesRouterAdapter(useRouter);

import { useReactRouter, createReactRouterAdapter } from '@tour-kit/react';

// Hook
const router = useReactRouter();

// Factory
import { useNavigate, useLocation } from 'react-router-dom';
const createRouter = createReactRouterAdapter(useNavigate, useLocation);

import {
  // Button
  tourButtonVariants,

  // Card
  tourCardVariants,
  tourCardHeaderVariants,
  tourCardContentVariants,
  tourCardFooterVariants,

  // Progress
  tourProgressVariants,
  tourProgressDotVariants,

  // Overlay
  tourOverlayVariants,
} from '@tour-kit/react';

import { cn } from '@tour-kit/react';

cn('base-class', condition && 'conditional', className);

import { Slot, Slottable, UnifiedSlot } from '@tour-kit/react';

// Radix-style slot
<Slot {...props}>{children}</Slot>

// Unified for both Radix and Base UI
<UnifiedSlot {...props}>{children}</UnifiedSlot>

import { UILibraryProvider, useUILibrary } from '@tour-kit/react';

<UILibraryProvider library="radix">
  {children}
</UILibraryProvider>

const library = useUILibrary(); // 'radix' | 'base-ui'

// Providers
export { TourContext, TourProvider, TourKitContext, TourKitProvider } from '@tour-kit/react';

// Hooks
export {
  useTour,
  useStep,
  useSpotlight,
  useElementPosition,
  useKeyboardNavigation,
  useFocusTrap,
  usePersistence,
  useRoutePersistence,
  useMediaQuery,
  usePrefersReducedMotion,
} from '@tour-kit/react';

// Utilities
export {
  createTour,
  createStep,
  waitForElement,
  isElementVisible,
  getScrollParent,
  scrollIntoView,
  generateId,
  announce,
  prefersReducedMotion,
  getStepAnnouncement,
  createStorageAdapter,
  createPrefixedStorage,
  safeJSONParse,
  calculatePosition,
} from '@tour-kit/react';

// Configs
export {
  defaultSpotlightConfig,
  defaultKeyboardConfig,
  defaultPersistenceConfig,
  defaultA11yConfig,
  defaultScrollConfig,
} from '@tour-kit/react';

// Types
export type {
  Placement,
  TourStep,
  Tour,
  TourState,
  TourKitConfig,
  RouterAdapter,
  // ... and more
} from '@tour-kit/react';