Stepper

import { Stepper } from '@/components/ui/stepper'
import { DemoRow, DemoStage } from './_kit'

const steps = [
  { id: 'account', label: 'Account', description: 'Name and email' },
  { id: 'workspace', label: 'Workspace', description: 'Region and slug' },
  { id: 'team', label: 'Invite team', description: 'Optional' },
  { id: 'done', label: 'Review', description: 'Confirm and finish' },
]

export default function StepperDemo() {
  return (
    <DemoStage>
      <DemoRow label="Horizontal" description="Stacks vertically below the sm breakpoint.">
        <Stepper steps={steps} current={1} className="w-full" />
      </DemoRow>

      <DemoRow label="Final step">
        <Stepper steps={steps} current={3} className="w-full" />
      </DemoRow>

      <DemoRow label="Vertical" description="For sidebars and narrow columns.">
        <Stepper steps={steps} current={2} orientation="vertical" className="w-full max-w-xs" />
      </DemoRow>
    </DemoStage>
  )
}

import { Check } from 'lucide-react'
import { cn } from '@/lib/cn'

/**
 * Stepper
 *
 * Progress through a multi-step flow. Rendered as an ordered list so the count
 * and order are conveyed structurally, with `aria-current="step"` on the
 * active step and a visually hidden status word ("completed", "current") on
 * each — the connector line and tick alone are not information.
 */
export interface Step {
  id: string
  label: string
  description?: string
}

export interface StepperProps {
  steps: Step[]
  /** Zero-based index of the current step. */
  current: number
  orientation?: 'horizontal' | 'vertical'
  className?: string
  label?: string
}

export function Stepper({
  steps,
  current,
  orientation = 'horizontal',
  className,
  label = 'Progress',
}: StepperProps) {
  return (
    <nav aria-label={label} className={className}>
      <ol
        className={cn(
          orientation === 'horizontal'
            ? 'flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-0'
            : 'flex flex-col',
        )}
      >
        {steps.map((step, index) => {
          const complete = index < current
          const active = index === current
          const isLast = index === steps.length - 1

          return (
            <li
              key={step.id}
              aria-current={active ? 'step' : undefined}
              className={cn(
                'flex min-w-0 gap-3',
                orientation === 'horizontal' ? 'sm:flex-1 sm:flex-col sm:gap-2' : 'pb-6 last:pb-0',
              )}
            >
              <div
                className={cn(
                  'flex items-center gap-3',
                  orientation === 'vertical' && 'flex-col self-stretch',
                )}
              >
                <span
                  className={cn(
                    'flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold',
                    complete && 'border-accent bg-accent text-accent-ink',
                    active && 'border-accent bg-accent-soft text-accent-soft-ink',
                    !complete && !active && 'border-line bg-surface text-ink-subtle',
                  )}
                >
                  {complete ? <Check className="size-3.5" aria-hidden="true" /> : index + 1}
                </span>
                {!isLast ? (
                  <span
                    aria-hidden="true"
                    className={cn(
                      orientation === 'horizontal'
                        ? 'hidden h-px flex-1 sm:block'
                        : 'w-px flex-1 self-center',
                      complete ? 'bg-accent' : 'bg-line',
                    )}
                  />
                ) : null}
              </div>

              <div className={cn('min-w-0', orientation === 'horizontal' && 'sm:pr-4')}>
                <p
                  className={cn(
                    'text-sm leading-snug font-medium',
                    active ? 'text-ink-strong' : complete ? 'text-ink' : 'text-ink-muted',
                  )}
                >
                  {step.label}
                  <span className="sr-only">
                    {complete ? ' — completed' : active ? ' — current step' : ' — not started'}
                  </span>
                </p>
                {step.description ? (
                  <p className="mt-0.5 text-xs text-ink-muted">{step.description}</p>
                ) : null}
              </div>
            </li>
          )
        })}
      </ol>
    </nav>
  )
}