Progress stack
Layered step cards showing what is done, what is running, and what is queued.
Set up profileName and avatar
Create accountEmail verified0%
Implementation
1"use client";2 3import {} from "react";4import type { HTMLAttributes } from "react";5import { ViewTransitionSafe } from "./ViewTransitionSafe";6 7export type ProgressStep = {8 id: string;9 /** Step name shown on its card. */10 label: string;11 /** Optional supporting line under the label. */12 detail?: string;13};14 15export type ProgressStackProps = Omit<16 HTMLAttributes<HTMLDivElement>,17 "children"18> & {19 /** Steps in order. */20 steps: ProgressStep[];21 /** Index of the running step; steps.length when everything is done. */22 activeIndex: number;23 /** Fill of the active step's track, 0–100. Omit for an indeterminate shimmer. */24 progress?: number;25};26 27function DoneIcon() {28 return (