import { ChecklistProvider } from '@tour-kit/checklists';

<ChecklistProvider
  checklists={[onboarding, setup]}
  onTaskComplete={(checklistId, taskId) => {}}
  onChecklistComplete={(checklistId) => {}}
>
  {children}
</ChecklistProvider>

import { useChecklist } from '@tour-kit/checklists';

const {
  checklist,
  tasks,
  visibleTasks,
  progress,
  completeTask,
  executeAction,
  dismiss,
  reset,
} = useChecklist('onboarding');

import { useTask } from '@tour-kit/checklists';

const {
  task,
  isCompleted,
  isLocked,
  dependencies,
  complete,
  execute,
} = useTask('onboarding', 'profile');

import { useChecklistPersistence } from '@tour-kit/checklists';

const { save, load, clear } = useChecklistPersistence('onboarding');

import { useChecklistsProgress } from '@tour-kit/checklists';

const progress = useChecklistsProgress();
// [{ id, title, completed, total, percentage }]

import { Checklist } from '@tour-kit/checklists';

<Checklist id="onboarding" className="custom-class">
  <ChecklistProgress />
  {tasks.map(task => (
    <ChecklistTask key={task.id} taskId={task.id} />
  ))}
</Checklist>

import { ChecklistTask } from '@tour-kit/checklists';

<ChecklistTask
  taskId="profile"
  checklistId="onboarding"
  showIcon
  showDescription
/>

import { ChecklistProgress } from '@tour-kit/checklists';

<ChecklistProgress
  checklistId="onboarding"
  showPercentage
  showCount
/>

import { ChecklistLauncher } from '@tour-kit/checklists';

<ChecklistLauncher checklistId="onboarding">
  <button>Open Checklist</button>
</ChecklistLauncher>

import { ChecklistPanel } from '@tour-kit/checklists';

<ChecklistPanel
  checklistId="onboarding"
  position="bottom-right"
  collapsible
  defaultExpanded={true}
/>

import { ChecklistHeadless, TaskHeadless } from '@tour-kit/checklists/headless';

<ChecklistHeadless id="onboarding">
  {({ checklist, tasks, progress, completeTask }) => (
    <CustomChecklist />
  )}
</ChecklistHeadless>

<TaskHeadless checklistId="onboarding" taskId="profile">
  {({ task, isCompleted, isLocked, complete, execute }) => (
    <CustomTask />
  )}
</TaskHeadless>

import { createChecklist } from '@tour-kit/checklists';

const checklist = createChecklist({
  id: 'onboarding',
  title: 'Get Started',
  tasks: [/* ... */],
});

import { createTask } from '@tour-kit/checklists';

const task = createTask({
  id: 'profile',
  title: 'Complete profile',
  action: { type: 'navigate', url: '/settings' },
});

import { calculateProgress } from '@tour-kit/checklists';

const { completed, total, percentage, remaining } = calculateProgress(state);

import { getNextTask } from '@tour-kit/checklists';

const next = getNextTask(state);

import { getLockedTasks } from '@tour-kit/checklists';

const locked = getLockedTasks(state);

import { canCompleteTask } from '@tour-kit/checklists';

const canComplete = canCompleteTask('task-id', state);

import { resolveTaskDependencies } from '@tour-kit/checklists';

const order = resolveTaskDependencies(tasks);

import { hasCircularDependency } from '@tour-kit/checklists';

const hasCircular = hasCircularDependency(tasks);

interface ChecklistConfig {
  id: string;
  title: string;
  description?: string;
  icon?: string | ReactNode;
  tasks: ChecklistTaskConfig[];
  onComplete?: () => void;
  onDismiss?: () => void;
  dismissible?: boolean;
  hideOnComplete?: boolean;
  meta?: Record<string, unknown>;
}

interface ChecklistTaskConfig {
  id: string;
  title: string;
  description?: string;
  icon?: string | ReactNode;
  action?: TaskAction;
  dependsOn?: string[];
  when?: (context: ChecklistContext) => boolean;
  completedWhen?: TaskCompletionCondition;
  manualComplete?: boolean;
  meta?: Record<string, unknown>;
}

type TaskAction =
  | { type: 'navigate'; url: string; external?: boolean }
  | { type: 'callback'; handler: () => void | Promise<void> }
  | { type: 'tour'; tourId: string }
  | { type: 'modal'; modalId: string }
  | { type: 'custom'; data: unknown };

type TaskCompletionCondition =
  | { event: string }
  | { selector: string }
  | { custom: (ctx: ChecklistContext) => boolean };

interface ChecklistProgress {
  completed: number;
  total: number;
  percentage: number;
  remaining: number;
}