Stepper

1'use client';
2 
3import { AlertTriangle, Check } from 'lucide-react';
4import { ComponentProps, createContext, useContext } from 'react';
5 
6import { Label1, Label2 } from '@/components/ui/typography';
7import { cn } from '@/lib/utils';
8 
9/*
10 * UX4G stepper:
11 * icon size: 1.938rem (~31px), font-size 0.875rem, font-weight 500
12 * completed icon: color #9E9E9E, border 1px solid #E0E0E0
13 * done icon: bg #3C9718 with checkmark SVG
14 * connector line: 1px solid #C6C6C6, done: #3C9718
15 * head-text color: #212121
16 * vertical connector: left 2.45rem, width 1px
17 * horizontal padding: 1.5rem
18 */
19 
20interface IStepperContext {
21  activeStep: number;
22  orientation: 'horizontal' | 'vertical';
23}
24 
25const STEPPER_CONTEXT = createContext<IStepperContext>({
26  activeStep: 0,
27  orientation: 'horizontal',
28});
29 
30interface IStepperProps extends ComponentProps<'ul'> {
31  activeStep?: number;
32  orientation?: 'horizontal' | 'vertical';
33}
34 
35/**
36 * A stepper component for displaying progress through a multi-step process.
37 * Matches the UX4G 2.0 Stepper specification.
38 *
39 * Uses semantic `<ul>/<li>` elements per UX4G.
40 * Supports horizontal/vertical, completed/done/warning/active/pending states.
41 */
42function Stepper({
43  className,
44  activeStep = 0,
45  orientation = 'horizontal',
46  children,
47  ...props
48}: IStepperProps) {
49  return (
50    <STEPPER_CONTEXT.Provider value={{ activeStep, orientation }}>
51      <ul
52        className={cn(
53          'relative m-0 flex w-full gap-0 overflow-hidden p-0',
54          orientation === 'horizontal' ? 'flex-row justify-between' : 'flex-col',
55          className,
56        )}
57        style={{ listStyle: 'none' }}
58        {...props}
59      >
60        {children}
61      </ul>
62    </STEPPER_CONTEXT.Provider>
63  );
64}
65 
66interface IStepProps extends ComponentProps<'li'> {
67  step: number;
68  title?: string;
69  description?: string;
70  status?: 'completed' | 'active' | 'warning' | 'pending';
71  isLast?: boolean;
72}
73 
74/**
75 * Individual step within a Stepper.
76 * UX4G icon: 1.938rem, connector: 1px #C6C6C6, done connector: #3C9718.
77 */
78function Step({ className, step, title, description, status, isLast, ...props }: IStepProps) {
79  const { activeStep, orientation } = useContext(STEPPER_CONTEXT);
80 
81  const resolvedStatus =
82    status ?? (step < activeStep ? 'completed' : step === activeStep ? 'active' : 'pending');
83 
84  const isCompleted = resolvedStatus === 'completed';
85  const isActive = resolvedStatus === 'active';
86  const isWarning = resolvedStatus === 'warning';
87 
88  return (
89    <li
90// … truncated