// Plaaayground v2 — SegmentedProgress
// Blueprint: 01 — Step dots for onboarding (● ● ○)

import { motion } from "framer-motion";
import { spring } from "@/lib/motion";
import { cn } from "@/lib/utils";

export interface SegmentedProgressProps {
  steps: number;
  current: number;
  className?: string;
}

export function SegmentedProgress({
  steps,
  current,
  className,
}: SegmentedProgressProps) {
  return (
    <div
      className={cn("flex items-center gap-2", className)}
      role="progressbar"
      aria-valuenow={current + 1}
      aria-valuemin={1}
      aria-valuemax={steps}
    >
      {Array.from({ length: steps }, (_, i) => {
        const isCompleted = i < current;
        const isCurrent = i === current;

        return (
          <motion.div
            key={i}
            className={cn(
              "rounded-full transition-colors",
              isCompleted && "bg-primary",
              isCurrent && "bg-primary ring-4 ring-primary/20",
              !isCompleted && !isCurrent && "bg-border"
            )}
            animate={{
              width: isCurrent ? 12 : 8,
              height: isCurrent ? 12 : 8,
            }}
            transition={spring.snappy}
          />
        );
      })}
    </div>
  );
}
SegmentedProgress

Source Code
