"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CheckIcon, ChevronDownIcon } from "@kineticui/icons"; export type ProgressStep = { id: string; title: string; description?: string; /** Sub-tasks; the step completes when all are done. */ tasks?: { id: string; label: string; done?: boolean }[]; done?: boolean; /** Free content shown when expanded. */ content?: React.ReactNode; }; export type ProgressStepsProps = { steps: ProgressStep[]; onToggleTask?: (stepId: string, taskId: string, done: boolean) => void; className?: string; }; /** Vertical milestone list with nested sub-tasks, per-step progress and the current step auto-expanded. */ export function ProgressSteps({ steps, onToggleTask, className }: ProgressStepsProps) { const status = (s: ProgressStep) => { const total = s.tasks?.length ?? 0; const done = s.tasks?.filter((t) => t.done).length ?? 0; const complete = s.done ?? (total > 0 && done === total); return { total, done, complete }; }; const currentIndex = steps.findIndex((s) => !status(s).complete); const [open, setOpen] = React.useState(steps[currentIndex]?.id ?? null); return (

{i < steps.length - 1 ? : null} {st.complete ? : i + 1} {current ? : null}
{isOpen && (s.tasks || s.content) ? (
{s.tasks?.map((t) => ( onToggleTask?.(s.id, t.id, e.target.checked)} className="size-4 accent-[var(--kn-accent)]" /> {t.label} ))} {s.content ?
{s.content}
: null}
) : null}

); }

Progress Steps

Installation

Exports