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

<TourProgress />

<TourProgress variant="text" />
// Renders: "Step 1 of 5"

<TourProgress variant="dots" />
// Renders: ● ○ ○ ○ ○

<TourProgress variant="bar" />
// Renders: [====    ] 40%

<TourProgress
  variant="text"
  format={(current, total) => `${current}/${total}`}
/>
// Renders: "1/5"

<TourProgress
  variant="text"
  format={(current, total) => `Step ${current} • ${total} total`}
/>
// Renders: "Step 1 • 5 total"

<TourProgress
  variant="dots"
  className="gap-2"
/>

/* Custom dot styles */
.tour-progress-dot {
  @apply w-2 h-2 rounded-full bg-gray-300;
}

.tour-progress-dot[data-active="true"] {
  @apply bg-blue-500;
}

.tour-progress-dot[data-completed="true"] {
  @apply bg-green-500;
}

<TourProgress
  variant="bar"
  className="w-32 h-2 bg-gray-200 rounded-full overflow-hidden"
/>

.tour-progress-bar {
  @apply h-full bg-blue-500 transition-all duration-300;
}

<TourCardFooter className="flex items-center justify-between">
  <TourProgress variant="dots" />
  <TourNavigation />
</TourCardFooter>

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

function CustomProgress() {
  const { currentStepIndex, totalSteps } = useTour('my-tour');
  const percentage = ((currentStepIndex + 1) / totalSteps) * 100;

  return (
    <div className="flex items-center gap-3">
      <div className="w-24 h-1.5 bg-gray-200 rounded-full">
        <div
          className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all"
          style={{ width: `${percentage}%` }}
        />
      </div>
      <span className="text-sm text-muted-foreground">
        {currentStepIndex + 1} of {totalSteps}
      </span>
    </div>
  );
}