The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| import { cn } from "../lib/utils"; |
| 6 | import { transitions } from "../lib/motion"; |
| 7 |
| 8 | /** Progress through a multi-step flow. */ |
| 9 | export function Steps({ |
| 10 | steps, |
| 11 | current, |
| 12 | className, |
| 13 | }: { |
| 14 | steps: Array<{ label: string; description?: string }>; |
| 15 | /** Index of the active step. Earlier steps show as done. */ |
| 16 | current: number; |
| 17 | className?: string; |
| 18 | }) { |
| 19 | return ( |
| 20 | <ol className={cn("flex w-full items-start", className)}> |
| 21 | {steps.map((step, index) => { |
| 22 | const done = index < current; |
| 23 | const active = index === current; |
| 24 | return ( |
| 25 | <li key={step.label} className="relative flex min-w-0 flex-1 flex-col items-center gap-1.5 text-center" aria-current={active ? "step" : undefined}> |
| 26 | {index > 0 ? ( |
| 27 | <span aria-hidden="true" className="absolute top-3 right-1/2 left-[-50%] h-px bg-border"> |
| 28 | <motion.span |
| 29 | className="absolute inset-y-0 left-0 bg-action" |
| 30 | initial={false} |
| 31 | animate={{ width: index <= current ? "100%" : "0%" }} |
| 32 | transition={transitions.enter} |
| 33 | /> |
| 34 | </span> |
| 35 | ) : null} |
| 36 | <motion.span |
| 37 | initial={false} |
| 38 | animate={{ scale: active ? 1.08 : 1 }} |
| 39 | transition={transitions.spring} |
| 40 | className={cn( |
| 41 | "relative z-10 flex size-6 items-center justify-center rounded-full border text-xs font-semibold transition-colors duration-200", |
| 42 | done && "border-action bg-action text-background", |
| 43 | active && "border-action bg-background text-action ring-4 ring-action/15", |
| 44 | !done && !active && "border-border bg-background text-muted-foreground", |
| 45 | )} |
| 46 | > |
| 47 | {done ? <IconCheck className="size-3.5" /> : index + 1} |
| 48 | </motion.span> |
| 49 | <span className={cn("max-w-full truncate px-1 text-xs font-medium", active || done ? "text-foreground" : "text-muted-foreground")}> |
| 50 | {step.label} |
| 51 | </span> |
| 52 | {step.description ? ( |
| 53 | <span className="hidden max-w-full truncate px-1 text-xs text-muted-foreground sm:block">{step.description}</span> |
| 54 | ) : null} |
| 55 | </li> |
| 56 | ); |
| 57 | })} |
| 58 | </ol> |
| 59 | ); |
| 60 | } |
| 61 |
