"use client"; import { clamp01, mixOklch, type RemocnTheme, useRemocnTheme, } from "@/lib/remocn-ui"; export interface StepperStyle { position: number; } export type StepperOrientation = "horizontal" | "vertical"; export interface StepperProps { steps?: string[]; activeIndex?: number; style?: StepperStyle; orientation?: StepperOrientation; theme?: Partial; className?: string; } const DEFAULT_STEPS = ["Account", "Plan", "Done"]; const CIRCLE = 36; const CHECK_PATH_LENGTH = 14; export interface StepperStyleContext { primary: string; primaryFg: string; mutedBg: string; border: string; mutedFg: string; foreground: string; } export function stepperStyleContext(theme: RemocnTheme): StepperStyleContext { return { primary: theme.primary, primaryFg: theme.primaryForeground, mutedBg: theme.muted, border: theme.border, mutedFg: theme.mutedForeground, foreground: theme.foreground, }; } export function stepperStyle(activeIndex: number): StepperStyle { return { position: activeIndex }; } export function stepCircleAt( i: number, position: number, ): { fill: number; checkDraw: number; active: boolean; } { const fill = clamp01(position - i); const checkDraw = fill; const active = Math.floor(position) === i && fill < 1; return { fill, checkDraw, active }; } export function connectorFillAt(i: number, position: number): number { return clamp01(position - i); } export function Stepper({ steps = DEFAULT_STEPS, activeIndex = 0, style, orientation: _orientation = "horizontal", theme: themeOverride, className, }: StepperProps) { const theme = useRemocnTheme(themeOverride, "light"); const ctx = stepperStyleContext(theme); const v = style ?? stepperStyle(activeIndex); const position = v.position; return (

{steps.map((label, i) => { const { fill, checkDraw, active } = stepCircleAt(i, position); const completed = fill >= 1; const circleBg = mixOklch(ctx.mutedBg, ctx.primary, fill); const circleBorder = mixOklch(ctx.border, ctx.primary, fill); const numberOpacity = 1 - checkDraw; const numberColor = active || completed ? ctx.foreground : ctx.mutedFg; const isLast = i === steps.length - 1; return (

{}

{} {i + 1} {}

{label}

{} {!isLast && (

)}

); })}

); }