Progress

"use client";

import { useEffect, useId, useLayoutEffect, useRef, useState, type ReactNode } from "react";
import { AnimatePresence, MotionConfig, motion, useSpring, useTransform } from "motion/react";
import { cn } from "@/lib/utils";

// Progress in four shapes that share one look: a bar, a ring, a segmented bar
// for a breakdown (storage, budget, quota) and a list of steps. Values ease to
// where they're going on a spring, so updates that arrive faster than the
// animation never make it stutter or step, and the numbers roll rather than
// flicker. Reaching the end turns the bar or ring green and draws a check.
// In the segmented bar, pointing at a legend row lights up its segment and
// dims the rest; in the steps, a finished step draws its check while the rail
// fills down to the next one, and the running step shows its own progress.
//
// Everything moves with transforms only, and a value of null shows an
// indeterminate bar.

export type ProgressSegment = {
  label: string;
  value: number;
  /** Any CSS colour. Defaults run through a quiet palette. */
  color?: string;
};