Progress

import { Progress } from "@/ui/Progress";

<Progress.Root value={72} max={100} />

function ProgressRoot({ value, max = 100 }: { value: number; max?: number }) {
  const pct = Math.min(Math.max(value, 0), max) / max * 100;
  return (
    <div role="progressbar" className="h-2 w-full rounded-full bg-slate-200">
      <div className="h-full rounded-full bg-primary" style={{ width: pct + "%" }} />
    </div>
  );
}

type ProgressCompound = typeof ProgressRoot & { Root: typeof ProgressRoot };
export const Progress = Object.assign(ProgressRoot, { Root: ProgressRoot }) as ProgressCompound;