Progress Steps

1'use client'
2 
3import { cn } from '@/lib/utils'
4import { Check } from 'lucide-react'
5import { demoProgressSteps } from './demo/status'
6 
7/**
8 * Represents an individual step in the progress tracker.
9 * @interface Step
10 * @property {string} [label] - Display text for the step
11 * @property {"completed" | "current" | "pending"} [status] - Current status of the step
12 */
13export interface Step {
14  label?: string
15  status?: 'completed' | 'current' | 'pending'
16}
17 
18/**
19 * ═══════════════════════════════════════════════════════════════════════════
20 * ProgressStepsProps
21 * ═══════════════════════════════════════════════════════════════════════════
22 *
23 * Props for the ProgressSteps component, which displays a visual progress
24 * tracker showing sequential steps with completion states.
25 */
26export interface ProgressStepsProps {
27  data?: {
28    /** Array of steps to display with their labels and status. */
29    steps?: Step[]
30  }
31}
32 
33 
34/**
35 * A progress stepper component showing sequential step status.
36 * Displays steps with completed, current, and pending states.
37 *
38 * Features:
39 * - Three step states: completed, current, pending
40 * - Check icon for completed steps
41 * - Responsive horizontal/vertical layout
42 * - Connected step indicators
43 *
44 * @component
45 * @example
46 * ```tsx
47 * <ProgressSteps
48 *   data={{
49 *     steps: [
50 *       { label: "Order received", status: "completed" },
51 *       { label: "Processing", status: "completed" },
52 *       { label: "Shipping", status: "current" },
53 *       { label: "Delivery", status: "pending" }
54 *     ]
55 *   }}
56 * />
57 * ```
58 */
59export function ProgressSteps({ data }: ProgressStepsProps) {
60  const resolved: NonNullable<ProgressStepsProps['data']> = data ?? { steps: demoProgressSteps }
61  const steps = resolved.steps ?? []
62  return (
63    <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2 bg-card rounded-lg p-4">
64      {steps.map((step, index) => {
65        const stepStatus = step.status ?? 'pending'
66        return (
67          <div key={index} className="flex items-center gap-2">
68            <div className="flex items-center gap-2">
69              <div
70                className={cn(
71// … truncated