50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T14e8,'use client'; import { AlertTriangle, Check } from 'lucide-react'; import { ComponentProps, createContext, useContext, useMemo } from 'react'; import { Label1, Label2 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G stepper: * icon size: 1.938rem (~31px), font-size 0.875rem, font-weight 500 * completed icon: color #9E9E9E, border 1px solid #E0E0E0 * done icon: bg #3C9718 with checkmark SVG * connector line: 1px solid #C6C6C6, done: #3C9718 * head-text color: #212121 * vertical connector: left 2.45rem, width 1px * horizontal padding: 1.5rem */ /* Hoisted so the object identity is stable across renders. */ const LIST_RESET_STYLE = { listStyle: 'none' } as const; const VERTICAL_CONNECTOR_STYLE = { top: '3.25rem', height: 'calc(100% - 2.45rem)' } as const; interface IStepperContext { activeStep: number; orientation: 'horizontal' | 'vertical'; } const STEPPER_CONTEXT = createContext({ activeStep: 0, orientation: 'horizontal', }); interface IStepperProps extends ComponentProps<'ul'> { activeStep?: number; orientation?: 'horizontal' | 'vertical'; } /** * A stepper component for displaying progress through a multi-step process. * Matches the UX4G 2.0 Stepper specification. * * Uses semantic `

` elements per UX4G. * Supports horizontal/vertical, completed/done/warning/active/pending states. */ function Stepper({ className, activeStep = 0, orientation = 'horizontal', children, ...props }: IStepperProps) { const contextValue = useMemo(() => ({ activeStep, orientation }), [activeStep, orientation]); return (
); } interface IStepProps extends ComponentProps<'li'> { step: number; title?: string; description?: string; status?: 'completed' | 'active' | 'warning' | 'pending'; isLast?: boolean; } /** * Individual step within a Stepper. * UX4G icon: 1.938rem, connector: 1px #C6C6C6, done connector: #3C9718. */ function Step({ className, step, title, description, status, isLast, ...props }: IStepProps) { const { activeStep, orientation } = useContext(STEPPER_CONTEXT); const resolvedStatus = status ?? (step < activeStep ? 'completed' : step === activeStep ? 'active' : 'pending'); const isCompleted = resolvedStatus === 'completed'; const isActive = resolvedStatus === 'active'; const isWarning = resolvedStatus === 'warning'; return (
{/* Step icon - UX4G: 1.938rem = ~31px */}
{isCompleted ? ( ) : isWarning ? ( ) : ( {step + 1} )}
{/* Step text */} {(title || description) && (
{title && ( {title} )} {description && {description}}
)} {/* Horizontal connector line after icon+text */} {orientation === 'horizontal' && !isLast && (
)}
{/* Vertical connector line */} {orientation === 'vertical' && !isLast && (
)}